CSS, HTML und Javascript mit {stil}

SVG Dateigröße verkleinern, überflüssige Attribute entfernen: SVG optimiert

SVG fürs Web optimieren

SVG-Grafiken aus Inkscape und Adobe Illustrator sind vollgepackt mit Attributen, die für die Anzeige auf dem Monitor nicht gebraucht werden. Obwohl SVG meist kleiner als PNG- oder JPEG-Grafik ist, dürfen wir nicht übersehen, dass der Browser SVG on the fly rendern muss. Für JPG, Javascript Canvas und Video hingegen gibt’s Hardware-Unterstützung.

Pseudo-Elemente mit querySelector

Click me, Touch me
Bislang galt, dass Javascript nicht auf Pseudo-Elemente wie ::before und ::after zugreifen kann, weil sie nicht im DOM liegen. querySelector schafft dieses kleine Kunststück aber doch – mit etwas Hilfe von getComputedStyle.

Fonts in CSS einbetten

Webfonts in CSS einbetten
Schriften / Webfont-Fonts lassen sich – genau wie Bilder – durch Base64 codieren. Dabei entsteht ein dicker Schwall aus Buchstaben und Ziffern, der in die CSS-Datei kopiert wird. Bei eingegrenzten kleinen Fonts – wenn nur wenige Zeichen gebraucht werden – spart das Einbetten der Schrift den zusätzlichen HTTP-Request zur Schriftdatei.

SVG in WordPress

SVG in WordPress laden
Um SVG in WordPress einzusetzen, muss der Media Upload von WordPress überredet werden, SVG als zulässigen Mime-Type anzuerkennen. Das passiert mit zwei oder drei Zeilen in der Datei functions.php des WordPress-Themes und ist schon lange bekannt.

Code-Editor Brackets

Brackets Open Source Editor
Brackets ist ein frisch gebackener Code-Editor, programmiert in HTML und Javascript, und dennoch eine Desktop-Anwendung. Adobe hat das Projekt ins Leben gerufen und verwaltet es auf Github.

Zwei mal WordPress, eine Datenbank

Zwei WordPress, eine Datenbank
Wofür könnte man zwei WordPress-Installationen brauchen, die beide auf dieselbe Datenbank zugreifen? z.B. für eine App, die nicht auf dasselbe Template zugreift, sondern ein eigenes Template bekommt.

SVG in einem image-Tag

SVG in einem image-Tag
Schöner Trick von Alexey Ten, der Bilder gleichzeitig als PNG für ältere Browser und als SVG für alle anderen in HTML einbindet: Eine SVG-Grafik wird innerhalb eines SVG-Tags mit einem SVG-image-Tag geladen.
css-organisieren

CSS organisieren

CSS-Dateien entwickeln sich schnell zu einem Wirrwar, sie wachsen, werden unüberschaubar und versanden in Redundanz. Wie kann CSS strukturiert werden, damit Änderungen ein Jahr und drei Projekte später besser lesbar sind und die Ladezeiten im Zaun gehalten werden?
bitmap-in-svg-in-safari

Safari zeigt eingebettete Bitmap-Bilder in SVG nicht an

SVG ist zwar Vektorgrafik, aber es gibt gute Gründe, in einer Vektorgrafik auf ein Bitmap-Bild zurückzugreifen. Wird das SVG-Bild inline in das HTML-Dokument gesetzt, zeigt Safari die Grafik korrekt an. Auch in einem object-Tag zeigt Safari die Bitmap im SVG.
Bad Bots, Hacker, Spammer

Bad Bots oder wie man Bots fern hält

Gibt es ein Gegenteil von Suchmaschinen-Optimierung? Bots und Spider machen auf vielen Webseiten mehr als die Hälfte des Traffics aus und belasten einen Server in Stoßzeiten zusätzlich.
MATH ML Formeln in HTML-Seiten

Chrome zieht MathML ab

Vor gut einem Jahr habe ich mich noch gefreut, dass HTML5 MathMl so einfach integriert war und ich mir endlich die Bitmaps für Formeln sparen konnte.
Farbtabellen verringern die Ladezeit von Grafiken

Kurze Ladezeit für Grafiken

Kurze Ladezeit für Grafiken: Seit den Anfängen des Webs verringert eine eingeschränkte Farbtabelle oder Farbpalette die Größe von Grafiken. Die alten Farbtabellen können wir vergessen, denn heute erzeugen die Bildbearbeitungsprogramme perfekte Farbtabellen automatisch und on the fly.
font-size

CSS Schriftgrößen: Immer ein Griff ins Wespennest

CSS font-size kann aus einem großen Fundus möglicher Maße schöpfen: Pixel oder Point, EM oder EX oder REM, Prozent, larger oder smaller. Jetzt kommt der Viewport mit vw und vh ins Spiel.

Javascript Animationen

Weiche CSS-Transitionen & Transformationen für jQuery:
Transit

Komplexe Animationen

Javascript-Animationen sollen im Vergleich mit CSS-Animationen langsam sein – stimmt so nicht. Fast immer ist es der »jQuery-Faktor«. Velocityjs ist eine Javascript-Library, die sich nahtlos in jQuery einklinkt und kompexen Animationen Dampf macht.
Velocity JS