Webentwicklung · Florian Brinkmann

Bestimmte Skripte und Stylesheets inline einbinden

Veröffentlicht am 16. Mai 202216. Mai 2022

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.

Vorsicht vor PHP-Funktionen mit gecachtem Ergebnis

Veröffentlicht am 24. April 202224. April 2022

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.

Web Vitals per JavaScript messen

Veröffentlicht am 10. April 202210. April 2022

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.

Formular per AJAX verschicken

Veröffentlicht am 1. September 20212. September 2021

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.

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

Veröffentlicht am 30. Juni 202130. Juni 2021

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.

CSS-Selektoren in PHP eine Klasse voranstellen

Veröffentlicht am 28. Februar 202128. Februar 2021

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.

Visuelle Regressionstests mit JLineup

Veröffentlicht am 13. Februar 20212. September 2021

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.

Auf ein Neues beim Projekt26

Veröffentlicht am 30. Dezember 20209. Januar 2021

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

Veröffentlicht am 26. Januar 202026. Januar 2020

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.

save-Funktion eines Blocks ändern

Veröffentlicht am 7. März 20198. Februar 2020

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.