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

Website-Logo-Funk­tion von WordPress ohne alt-Text für un­ver­link­tes Logo

Für WordPress-Themes (Classic, nicht Block-Themes) kann über einen add_theme_support()-Aufruf die Unterstützung für die Website-Logo-Funktion aktiviert werden. Dabei gibt es seit WordPress 5.5.0 die Option, das Logo auf der Startseite nicht zu verlinken, allerdings wird dann auch das alt-Attribut leer gelassen statt mit dem Website-Titel gefüllt. Das kann je nachdem, wie das Logo im Theme genutzt wird, Probleme mit der Barrierefreiheit bedeuten.

"Website-Logo-Funk­tion von WordPress ohne alt-Text für un­ver­link­tes Logo" 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

Anti­spam Bee 3: jetzt aber wirklich 🤞

Das Plugin Antispam Bee (ASB) dürfte vielen ein Begriff sein, die sich mit WordPress beschäftigen – es kümmert sich darum, dass Kommentarspam erkannt und als Spam markiert wird. Im Pluginkollektiv, zu dem auch ich seit ein paar Jahren gehöre, gab es schon länger Pläne zu einer v3 von ASB, um das Plugin modularer, erweiterbar und für Drittplugins nutzbar zu machen.

David hatte sich schon 2019 Gedanken zur v3 gemacht, aus zeitlichen Gründen blieb es aber bei einer unvollständigen ersten Implementierung. Danach wurde es wieder ziemlich ruhig um die v3, da das Zeitproblem das ganze Kollektiv betrifft, und wir meist nur so gerade schaffen, die Plugins zu pflegen, für große Weiterentwicklungen reicht die Kapazität oft nicht.

"Anti­spam Bee 3: jetzt aber wirklich 🤞" 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

Bildschirminhalt mit FFmpeg für das Web aufzeichnen

Ich wollte vorhin – mal eben – für Twitter ein kleines Video aufzeichnen, das einen Teil meines Bildschirminhalts zeigt. Das Aufzeichnen hat auch relativ einfach funktioniert (nachdem ich herausgefunden habe, dass ich Ubuntu von Wayland auf Xorg umstellen muss), das Video wurde im Firefox allerdings nicht abgespielt.

Nach einiger Recherche bin ich auf das »Encoding Video«-Gist von Glen Cheney gestoßen, in dem ich die rettende Code-Zeile gefunden habe, die eine MP4 generiert, die auch in Firefox abgespielt wird:

ffmpeg -video_size 960x400 -framerate 25 -f x11grab -i :0.0+75,260 -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3 output.mp4
Code-Sprache: Bash (bash)

Mit der Zeile wird der Display-Inhalt in einer Größe von 960x400 Pixel aufgezeichnet, wobei die linke obere Ecke des aufgenommenen Bereichs 75 Pixel vom linken und 260 Pixel vom oberen Displayrand positioniert ist.

Veröffentlicht in Tipps

useEntityProp zum Verändern von Beitrags- oder Seitenattributen verwenden

Der Hook useEntityProp kann verwendet werden, um Attribute von Inhalten wie Seiten und Beiträgen zu verändern. Bisher hatte ich den nur genau so eingesetzt wie in einem Doku-Code-Beispiel, aber vorhin habe ich mir die Funktion etwas genauer angeschaut und hatte einen kleinen 🤯-Moment, als ich verstanden habe, wie der Hook funktioniert.

"useEntityProp zum Verändern von Beitrags- oder Seitenattributen verwenden" Weiterlesen

Block-Stile von WordPress-Core-Blöcken entfernen

Einige Core-Blöcke kommen mit zusätzlichen Block-Stilen daher, wie etwa der Zitat-Block, der neben dem Standard-Stil noch einen großen Stil hat. Wenn diese Core-Block-Stile nicht erwünscht sind, können sie seit WordPress 5.8 mit einem kleinen Code-Snippet entfernt werden.

"Block-Stile von WordPress-Core-Blöcken entfernen" Weiterlesen