PDF on the fly mit Javascript

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.

Use SVG Use

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.

http-equiv=“X-UA-Compatible“?

Warum mosert der Validator?
Error: A meta element with an http-equiv attribute whose value is X-UA-Compatible must have a content attribute with the value IE=edge.

MathJax – neue Heimat

Für die Handvoll tapferer Mathematiker, die sich an Formeln mit MathML, Latex oder TEX in Webseiten trauen: MathJax, die Javascript-Library für mathematische Formeln, beherbergt die Code-Library nicht mehr.

WebP vs JPG und PNG : Fotos und Grafik optimieren

Fotos und Grafiken werden immer für die Webseite optimiert. Nachdem JPEG über Jahrzehnte das Königsformat für Fotos war und Motive mit transparentem Hintergrund die Ladezeit ausdehnt, ist WebP das neue JPEG + PNG.

Gleich mittenrein

Website-Staging und Domain-Umzug: Sehen, was sonst niemand sieht

Beim Umzug einer Webseite auf einen anderen Server entsteht eine mehr oder minder lange Wartezeit bis alle DNS-Server die neue IP-Adresse registriert haben.

Icons für option-Tag

Viele Formular-Elemente widersetzen sich hartnäckig allen Annäherungen seitens CSS – sehen wir mal von border-radius und font-size für Eingabefelder vom vom Typ Text ab.

SVG SMIL Animationen

Eigentlich wären SVG SMIL-Animationen ein perfekter Nachfolger für die animierten GIFs und fast vergessenen Flash-Animationen. Sie brauchen kein Beiwerk, kein Javascript, kein CSS. Alles in einer Datei.

Ladezeit: SVG optimieren für die Webseite

SVG-Grafiken aus Inkscape und Adobe Illustrator sind vollgepackt mit Attributen, die für die Anzeige in Webseiten nicht gebraucht werden und die Ladezeit verlängern. Wie läßt sich SVG optimieren?

Pseudo-Elemente mit querySelector

Pseudo-Elemente wie ::before und ::after ersparen zusätzliche HTML-Elemente, aber früher galt, dass Javascript nicht auf Pseudo-Elemente wie ::before und ::after zugreifen kann, weil sie nicht im DOM liegen. Javascript querySelector und getComputedStyle bilden zusammen eine Lösung.

Font per base64 in CSS einbetten

Webfonts lassen sich auf die Zeichen reduzieren, die tatsächlich benötigt werden, und dann wie Bilder als Base64 codieren. Dabei entsteht eine Zeichenkette, die direkt in die @font-face-Regel eingesetzt wird.