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.
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ß.
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.
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.
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.
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-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 wie ::before und ::after ersparen zusätzliche HTML-Elemente, aber mit der Einschränkung, 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.
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.
Ein Verlauf oder Gradient wird durch CSS background-image erzeugt, aber für Text hat CSS nur color zu bieten. CSS color hingegen weist einem Text Farbe zu, aber keinen Verlauf, denn gradient ist ein Wert für die Eigenschaft background-image
Phoenix Code ist ein Code-Editor, programmiert in HTML und Javascript. Dennoch ist Phoenix Code eine Desktop-Anwendung. Adobe hat das Projekt ins Leben gerufen, heute wird es von seiner eigenen Community als Phoenix Code weitergeführt.
Das SVG image-Element bettet Bilder in ähnlicher Weise wie das HTML-img-Tag in eine SVG-Grafik ein. Das Bild kann eine Bitmap (jpg, png, gif) oder eine weitere SVG-Grafik sein.
Wie beim Einbetten von Bildern in HTML bleibt bei PNG bzw. GIF die Transparenz im Bild erhalten.
CSS-Dateien entwickeln sich schnell zu einem brodelnden Hexenkessel. Sie wachsen, werden unüberschaubar und versanden in Redundanz. Wie behalten wir die Übersicht und wie finden wir das CSS above the fold?
