Auf ein Neues beim Projekt26

Torsten Landsiedel hatte für dieses Jahr das Projekt26 gestartet, bei dem alle zwei Wochen ein Blog-Artikel und ein Kommentar unter einem anderen Artikel geschrieben werden sollte. Bis Anfang Juni war ich auch noch gut dabei, habe dann allerdings stark nachgelassen.

Torsten hat auf seinem Blog im Beitrag »Projekt26 – Jetzt erst recht!« eine schöne Zusammenfassung geschrieben, und es wird auch im nächsten Jahr wieder ein Projekt26 geben. Ich werde dabei sein und diesmal hoffentlich auch bis zum Ende durchhalten.

Updates bei Block-Plugins und die oft verzögerte Auswirkung aufs Frontend

Ich bin ein großer Fan von Gutenberg. In den letzten Wochen hatte ich allerdings gleich mehrfach das zweifelhafte Vergnügen, bei dem Seiten nach dem Aktualisieren plötzlich im Frontend zerschossen waren, obwohl nicht groß etwas geändert wurde.

Der Grund: ein Block-Plugin hatte ein Update spendiert bekommen, mit dem das Markup der Blöcke geändert wurde. Dadurch griffen CSS-Änderungen nicht mehr, die ich im Theme gemacht hatte. Gut, das hätte auch mit Markup passieren können, das über Shortcodes generiert wird.

"Updates bei Block-Plugins und die oft verzögerte Auswirkung aufs Frontend" Weiterlesen

save-Funktion eines Blocks ändern

Manchmal findet man einen Block für den WordPress-Block-Editor, der fast ist was man braucht, aber das in der Datenbank gespeicherte Markup müsste ein bisschen verändert werden. Dieser Beitrag zeigt, wie wir das über die Filterung der save-Funktion eines Blocks hinbekommen können.

"save-Funktion eines Blocks ändern" Weiterlesen

Webpack: SASS bei mehreren Entry-Points in eigene Datei kompilieren

Webpack kann mit mehreren Entry-Points genutzt werden, um zum Beispiel mehrere JavaScript-Dateien mit Babel zu kompilieren. Hier zeige ich, wie sich die Kompilierung von SASS-Dateien in eigene CSS-Dateien bei mehreren Entry-Points umsetzen lässt.

"Webpack: SASS bei mehreren Entry-Points in eigene Datei kompilieren" Weiterlesen

Mit Travis CI auf Kompatibilität mit einer bestimmten PHP-Version prüfen

Mein Lazy-Loader-Plugin benötigt PHP 5.3 oder höher. Wenn sich User darauf verlassen, ist es ärgerlich, wenn durch eine Unachtsamkeit (wie etwa die Nutzung der []-Syntax für Arrays) in einem Patch- oder Minor-Release diese Mindestanforderung steigt.

Um sowas zu verhindern, lasse ich mit Travis CI jetzt jeden Release auf Kompatibilität mit PHP 5.3 testen.

"Mit Travis CI auf Kompatibilität mit einer bestimmten PHP-Version prüfen" Weiterlesen

Suchen und Ersetzen in MySQL

Nebenher bin ich gerade dabei, Akronyme – zum Beispiel »PHP« – mit einem span-Element zu umschließen, um sie in Kapitälchen anzuzeigen. Das ginge natürlich manuell, wäre aber etwas zeitaufwendig. Also habe ich mal geschaut, ob es etwas wie Suchen und Ersetzen in MySQL gibt, und siehe da: REGEXP_REPLACE heißt das Zauberwort.

So lassen sich zum Beispiel die Vorkommen von WOFF in allen Beitragstiteln eines Blogs über den folgenden Befehl mit dem Markup umschließen (es empfiehlt sich vorher ein Backup zu machen):

UPDATE `wp_posts` SET `post_title` = REGEXP_REPLACE(post_title COLLATE utf8mb4_bin, 'WOFF', '<span class="smcp">WOFF</span>' ) WHERE `ID` = 4691
Code-Sprache: SQL (Structured Query Language) (sql)

Als ersten Parameter wird an REGEXP_REPLACE der String übergeben, der durchsucht werden soll – in unserem Fall geben wir hier die Tabellenspalte an. Der zweite Parameter ist der gesuchte String und der dritte die Ersetzung. Die Angabe von COLLATE utf8mb4_bin (hier müsst ihr die Kollation gegebenenfalls anpassen, je nachdem, was ihr nutzt) ist wichtig, damit Groß- und Kleinschreibung beachtet wird.

Wie auf der Doku-Seite von MariaDB zu lesen ist (und der Name vermuten lässt), kann mit REGEXP_REPLACE auch über reguläre Ausdrücke gesucht werden. Bei meinen Wochenrückblicken sah das für das KW so aus:

UPDATE `wp_posts` SET `post_title` = REGEXP_REPLACE(post_title COLLATE utf8mb4_bin, 'KW([0-9]+)', '<span class="smcp">KW</span>\\1' ) WHERE `ID` = 4691
Code-Sprache: SQL (Structured Query Language) (sql)

Über \\1 wird in dem Ersetzungs-String der Teil innerhalb der Klammern des regulären Ausdrucks eingesetzt: die Kalenderwochen-Zahl.

SSH-Key und das »Windows Subsystem for Linux«

Mit Bash on Ubuntu on Windows kann auf Windows 10 ein Windows Subsystem for Linux genutzt werden. Damit lassen sich viele Linux-Befehle auf Windows ausführen, wie beispieslweise auch ssh. Hier zeige ich euch, wie die Erstellung eines SSH-Keys abläuft, der im Subsystem und von Windows genutzt werden soll.

"SSH-Key und das »Windows Subsystem for Linux«" Weiterlesen

Konvertierung von Schriften zu WOFF/WOFF2 und Font-Subsetting mit Glyphhanger

Um Webfonts mit breiter Browser-Unterstützung einzubinden, werden inzwischen eigentlich nur noch Dateien im .woff- und .woff2-Format benötigt – wer keine Rücksicht auf Internet Explorer, Safari auf Mac OS älter als Sierra und ein paar mobile Browser nimmt, kann auch nur .woff2 nutzen (bei Can I use gibt es die entsprechenden Tabellen zum Browser-Support der beiden Schriftformate).

In diesem Beitrag zeige ich, wie sich mit Hilfe des Kommandozeilen-Tools Glyphhanger .ttf-Schriftdateien in .woff und .woff2 umwandeln und um unnötige Zeichen erleichtern lassen (das Subsetting).

"Konvertierung von Schriften zu WOFF/WOFF2 und Font-Subsetting mit Glyphhanger" Weiterlesen

CSS-Regeln nur bei deaktiviertem JavaScript anwenden

Manchmal gibt es CSS-Eigenschaften, die nur bei deaktiviertem JavaScript greifen sollen. Bei dem Lazy-Loading-Plugin Lazy Loader zum Beispiel sollen die Bilder mit der lazyload-Klasse versteckt werden, wenn JS nicht aktiv ist.

Bisher habe ich das über eine Klasse gelöst, die via JS dem html- oder body-Element hinzugefügt wird – ohne Klasse werden die Bilder versteckt, wenn die Klasse da ist werden sie angezeigt.

Jetzt hat mich der User wprox im W.org-Support-Forum auf eine alternative Lösung aufmerksam gemacht, die er im Blogartikel »Nice and easy lazy loading with lazysizes.js« von Steve McKinney gefunden hat: Die Styles für deaktiviertes JavaScript einfach in ein noscript-Element schreiben.

Statt also über JavaScript einem Element eine Klasse hinzuzufügen und dann in CSS diese Klasse zu nutzen, um Styles für deaktiviertes JavaScript zu überschreiben, sieht es in meinem Plugin jetzt so aus:

<noscript> <style> .lazyload { display: none; } </style> </noscript>
Code-Sprache: HTML, XML (xml)

Eigentlich ist diese Lösung ja recht naheliegend, mir ist sie vorher aber nie in den Sinn gekommen.