Bestimmte Skripte und Style­sheets inline einbinden

Performance-Optimierungstools wie PageSpeed Insights empfehlen, JavaScript-Code, der kritisch für die Funktion der Website ist und so schnell wie möglich ausgeführt werden muss, inline zu laden. Und auch bei JS- und/oder CSS-Dateien mit sehr wenig Code kann es sinnvoll sein, den Code inline einzufügen statt eine externe Datei laden zu müssen (wenn Sie die Dateien nicht lieber zu einer etwas größeren zusammenfassen möchten).

Das sind zugegebenermaßen etwas konstruierte Fälle, aber aus Gründen habe ich mich mit dem Thema beschäftigt und nach einer Lösung gesucht, wie in WordPress als externe Dateien eingebundene Skripte oder Stylesheets so angepasst werden können, dass sie inline geladen werden.

"Bestimmte Skripte und Style­sheets inline einbinden" Weiterlesen

Vorsicht vor PHP-Funk­tio­nen mit ge­cach­tem Er­geb­nis

Letzte Woche haben Angelo und ich an einem WP-CLI-Command gearbeitet und bei der Erstellung der Behat-Tests zufällig fehlschlagende und erfolgreiche Tests gehabt. Nach einigem Debugging sind wir dann auf die Idee gekommen, ob das Ergebnis der PHP-Funktion is_dir(), die prüft ob ein Verzeichnis existiert, vielleicht zwischengespeichert wird.

"Vorsicht vor PHP-Funk­tio­nen mit ge­cach­tem Er­geb­nis" Weiterlesen

Web Vitals per JavaScript messen

Die Core Web Vitals sind euch vielleicht schon untergekommen, wenn ihr euch mit SEO und Performance-Optimierung beschäftigt. Dabei handelt es sich um verschiedene von Google eingeführte Messwerte, die Aussagen über die User-Experience einer Seite geben können.

Diese Werte sind Teil der PageSpeed-Insights-Analyse, lassen sich aber auch per JavaScript ermitteln.

"Web Vitals per JavaScript messen" Weiterlesen

Formular per AJAX verschicken

Wenn ein HTML-Formular abgeschickt wird, lädt normalerweise die Seite neu. Das ist vielleicht nicht immer die beste User-Experience, im Sinne von Progressive Enhancement aber der beste Ausgangspunkt.

Wenn wir für Benutzer*innen, die JavaScript aktiv haben (und bei denen das Laden und Verarbeiten der JS-Ressourcen geklappt hat) die Erfahrung verbessern wollen, bietet es sich in manchen Fällen an, das Formular per AJAX zu verschicken, sodass die Seite nicht neugeladen werden muss.

"Formular per AJAX verschicken" Weiterlesen

Mehr Übersichtlichkeit im Code mit weniger `else` und Schachtelung

Ich habe mich kürzlich vermehrt damit beschäftigt, besseren Code zu schreiben, weil das ein Aspekt ist, bei dem ich noch einiges lernen möchte. Ein einfach zu merkender und – wie ich finde – schnell einleuchtender Weg zu weniger komplexem Code ist die Vermeidung von else und die Reduzierung von Verschachtelungen im Code.

"Mehr Übersichtlichkeit im Code mit weniger `else` und Schachtelung" Weiterlesen

CSS-Selektoren in PHP eine Klasse voranstellen

Bei einem Slider-Gutenberg-Block habe ich die Möglichkeit eingebaut, über ein Textfeld CSS einzugeben, das sich nur auf diesen einen Block auswirkt. Natürlich soll der User dabei nicht darauf achten müssen, die Selektoren so zu schreiben, dass sie wirklich nur für diesen Block gelten – das soll im Hintergrund vor der Frontend-Ausgabe geschehen.

Um das umzusetzen, habe ich mich nach einer PHP-Lösung zum Parsen von CSS umgeschaut und mit PHP CSS Parser ein passendes Tool gefunden.

"CSS-Selektoren in PHP eine Klasse voranstellen" Weiterlesen

Visuelle Regressionstests mit JLineup

Mit visuellen Regressionstests kann überprüft werden, ob es visuelle Unterschiede zwischen zwei Versionen einer Website gibt. Ein sinnvolles Szenario für so einen Test wäre beispielsweise, den Stand einer Website auf einem Testserver vor und nach dem Deployment einer Änderung zu überprüfen, und die Änderung nur auf den Live-Server zu schieben, wenn es keine visuellen Unterschiede gibt.

Es gibt verschiedene Lösungen zur Durchführung dieser Tests, hier stelle ich euch JLineup vor.

"Visuelle Regressionstests mit JLineup" Weiterlesen

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