CSS, HTML und Javascript mit {stil}

Testen mit Android- / iOS-Simulatoren

iOS Emulator, Android Emulator

Simulatoren / Emulatoren geben einen besseren Einblick, wie die Webseite auf einem iOS bzw. Android-Gerät aussieht, aber sie brauchen einen »Anlauf«.

Die Brutstätten von Spam und Angriffen

Der überwiegende Teil der Spam-Mail kommt aus den Datencentern. Von dort aus senden Spammer mit ganzen Clustern von IP-Adressen ihre Fake-Emails.

Bilddatenformate: JPG, AVIF, PNG, WebP

Dateiformate und Komprimierung von Bildern / Fotos

Hans Dampf für Fotos auf Webseiten ist immer noch JPG – seit nahezu 30 Jahren. AVIF ist ein neues Komprimierungsverfahren, das Fotos bei gleicher Qualität besser komprimiert. Ladezeit ist Trumpf.

Loading Lazy

Anfang 2020 ist das HTML-Attribut loading in den Standard übernommen worden. loading lazy weist den Browser an, Bilder erst zu laden, wenn sie in den ViewPort kommen, um den Seitenaufbau zu forcieren und Bandbreite zu sparen.

flex-grow, flex-shrink, flex-basis für Zeilen in Spalten

CSS flex, grow, shrink

Spalten gleicher Höhe sind das Trauma der Webdesigner. Der Gutenberg-Editor liefert dank CSS flex und CSS grid Spalten gleicher Höhe, aber die Zeilen der Spalten variieren je nach Inhalt. flex-grow, flex-shrink und flex-basis bringen die Zeilen auf eine Höhe.

Programmierseelsorge: Hilfe bei kleinen Projekten

Programmierung, Webdesign Hilfe bei kleinen Projekten

Programmier-Sprechstunden und Webseiten-Seelsorge habe ich im ersten Lockdown angesetzt und festgestellt: Das bringt auch mir was.

Gleich mittenrein

CSS: Schriftgröße mit vw anpassen

CSS fluid font size

Am Anfang war der Pixel … das war einfach (vergessen wir mal, dass es auch pt gab). Heute haben wir einen ganzen Keller voller Maßeinheiten für Schriftgrößen, Abstände, Breite und Höhe von Elementen.

Werbe-Popup: Wie kommt der Trojaner ins WordPress?

Plugins: Wenn Scripts manipuliert wurden

Wer seine Twitter-Shares zählen wollte, griff auf ein Script zurück – auf newsharecounts.s3-us-west-2.amazonaws.com/nsc.js. Aber was passiert, wenn ein Script in die falschen Hände fällt? Ein Werbe-Popup übernimmt die Seite still und leise.

PDF on the fly mit Javascript

PDF mit Javascript erzeugen

jsPDF erzeugt PDFs, z.B. für Tickets, Angebote, Präsentationen, Stundenpläne und Anmeldebestätigungen. Die Javascript-Library wird in den Seitenkopf eingebunden und schon kann ein PDF erzeugt und vom Benutzer heruntergeladen werden.

Responsive Image Sprites

Responsive Image Sprites

Ein Image Sprite setzt mehrere kleine Bilder in eine Bildatei. So lädt der Browser mit einem HTTP-Request ein einziges Bild anstelle vieler kleiner Bilder mit vielen HTTP-Requests, um Bandbreite zu sparen.

Use SVG Use

Das nützliche SVG use Tag

SVG inline in die Seite einzubinden, hat seinen Reiz: Kein zusätzlicher HTTP-Request bremst die Seite aus. Aber niemand kann sich des Gefühls erwehren, dass der HTML-Quelltext mit inline-SVG schneller aufgeht als ein Hefekloß.

SVG Path-Animation: Lineart mit CSS

Lineart ist die Bezeichnung für Strichzeichnungen, die nur wenig oder gar nicht koloriert sind. Eine Path-Animation wirkt, als würden sie gerade mit einem Stift gezeichnet – ein schöner Effekt, der technische Zeichnungen verständlicher macht, als Basis für ein animiertes GIF oder Pausenfüller zwischen zwei Absätzen wirkt.