Web Development Archive

Private GitHub npm Packages im GitHub Actions Workflow verwenden

Johannes 30. Juni 2022

GitHub bietet mit GitHub Packages eine limitiert kostenfreie Alternative zu den sonst kostenpflichtigen privaten npm Packages an. Allerdings habe ich lange nach einem Weg suchen müssen, private GitHub Packages in GitHub Actions zu verwenden.

npm login kann man nicht so einfach ausführen, weil der Personal access token eingegeben werden muss und nicht über einen Parameter übergeben werden, kann und der secrets.GITHUB_TOKEN nicht ausreicht, um private GitHub Packages über npm install zu laden.

Meine Lösung für das Problem:

Ist Tailwind CSS eine gute Idee für WordPress Themes & Plugins?

Johannes 21. Januar 2022

Tailwind CSS hat sich in den letzten Jahren von einem belächelten CSS-Framework zu einem echten Schwergewicht entwickelt. Der Grund dafür ist einfach: Es nimmt euch komplett die Frage ab, wie ihr eure CSS-Klassen benennt: gar nicht!

Statt euch für jedes Element eures Designs eine oder mehrere Klassennamen auszudenken und die Klasse dann in eurem Stylesheet zu definieren, definiert ihr bei Tailwind den Style direkt über einfach zu merkende CSS-Klassen im HTML-Markup, z.B. block p-2 mx-3 mt-3 bg-gray-900 hover:bg-gray-700 text-white cursor-pointer. Aufgelöst sieht der genutzte Teil des Stylesheets wie folgt aus:

Laravel Tools für WordPress: Lokale Entwicklungsumgebung mit Valet

Johannes 29. Dezember 2021

Laravel ist ein PHP-Framework um komplexe Anwendungen zu erstellen und WordPress ein Content Management System um Inhalte zu verwalten und anzuzeigen. Zwar kann man in Laravel auch einen Blog wie bei WordPress umsetzen aber i.d.R. nutzt man Laravel eher für komplexere Anwendungen.

Um Laravel ist aber ein ganzes Ökosystem an nützlichen Tool entstanden, die man auch mit WordPress sehr gut nutzen kann. Meistens handelt es sich dabei um Tools für die Entwicklung z.B. von Plugin & Themes aber auch in anderen Bereichen lassen sie sich nutzen.

In dieser Serie möchte ich euch einige der Tools vorstellen. Den Anfang macht Laravel Valet:

WordPress Snippet: Revisionen für Wiederverwendbare Blöcke aktivieren

Johannes 6. April 2021

In meinen Augen sind die wiederverwendbaren Blöcke im WordPress Block Editor a.k.a. Gutenberg Gold wert. Ich nutze sie täglich. Allerdings wurde mit WordPress 5.7 die UI im Editor grundlegend geändert und sie integrieren sich fast nahtlos in den restlichen Content. Das für aber leider regelmäßig dazu, dass ein wiederverwendbarer Block von einem Autor unwissentlich bearbeitet wird. Eigentlich sollte das dank der Revisionen in WordPress kein Problem sein, leider sind sie aber für den wp_block Post Type, der für die wiederverwendbaren Blöcke verwendet wird, nicht aktiviert.

Laravel Tools für WordPress: Debuggen mit `dd` & `dump` statt `print_r`

Johannes 27. Januar 2021

Das Diagnostizieren von Fehler beim Programmieren von WordPress Plugins & Themes in PHP sieht bei mir meistens wie folgt aus:

// ...
echo '<code>';
print_r($meine_variable_in_der_ich_einen_fehler_vermute);
echo '</code>';
exit;
// oder
echo '<pre>';
var_dump($meine_variable_in_der_ich_einen_fehler_vermute);
echo '</pre>';
die;Code-Sprache: PHP (php)

Nicht besonders elegant, aber so sieht meistens die Praxis in PHP aus. Selbst in der offiziellen PHP Dokumentation gibt es keine sinnvollen Vorschläge, wie man in PHP sauber Fehler diagnostizieren kann.

Laravel Tools für WordPress: Webpack in elegant mit Laravel Mix 6

Johannes 20. Januar 2021

In der kleinen Serie zu Laravel Tools für WordPress, habe ich euch bereits Laravel Valet für die lokale Entwicklungsumgebung vorgestellt. Heute geht es wieder um ein Tool, was euch bei der Entwicklung von Themes & Plugins helfen kann. Besonders, wenn ihr an Block Editor (Gutenberg) Blöcken schraubt.

Laravel Mix vereinfacht euch die Arbeit mit Webpack enorm und spätestens, wenn ihr euren ersten Block in JavaScript programmiert, kommt ihr nicht mehr an Webpack (oder einem anderen JavaScript-Modul-Packer) vorbei. Die Konfiguration von Webpack empfinde ich aber als sehr kompliziert. Vor allem, wenn man noch nie mit React gearbeitet hat. Laravel Mix nimmt euch die Konfiguration in 80% der Fälle ab und reduziert den Konfigurationsaufwand extrem.

Vue.js Components im WordPress Block Editor / Gutenberg anzeigen

Johannes 7. Januar 2021

Gutenberg basiert ja (leider) auf React. Ich programmiere aber schon seit Jahren viel lieber mit Vue.js 2. Zwar habe ich mich damit abgefunden Blöcke für den Block Editor aka Gutenberg in React zu schreiben (wobei man nur sehr begrenzt eigentlich React verwendet, eher noch JSX), aber trotzdem verwende ich für einige Blöcke Vue.js. Im Fronend kein Problem, aber eine Vorschau im Block Editor angezeigt zu bekommen, inkl. Änderungen an den Attributen, war eine echte Herausforderung.

WordPress 5.6: Standard für die Verlinkung von Bildern setzen

Johannes 9. Dezember 2020

Mit WordPress 5.6 wird endlich wieder die Option image_default_link_type im Block Editor/Gutenberg berücksichtigt. Für ihr oder ein anderer Nutzer eurer Website einen neuen Bild- oder Gallerie Block ein, werden die Bilder dann standardmäßig auf die Mediendatei, Anhangsseite oder (bisher der Standard) gar nicht verlinkt.

Tipp: Bildoptimierung-Plugin ShortPixel lebenslanges Abo für einmalig 49$

Johannes 15. November 2020

Seit über drei Jahren nutze ich für die Optimierung der Bilder in WordPress ShortPixel. Die optimierten Bilder werden zwar lokal gespeichert, die eigentliche Optimierung erfolgt aber im Hintergrund auf den Servern von ShortPixel.

WordPress: Remote HTTP Request vor Timeouts absichern

Johannes 9. November 2020

Zusätzliche Daten & Informationen über einen HTTP Requests in einem WordPress Plugin oder Themen zu laden ist eine sehr schöne Möglichkeit den eigenen Content mit zusätzlichen Informationen anzureichern. Ich nutzte für Travel-Dealz.de mehrere APIs z.B. um Klimadiagramme für Reiseziele bereitzustellen oder Status- und Vielfliegermeilen für einen Flug zu berechnen.

Allerdings werden die Abfragen i.d.R. beim Seitenaufruf durchgeführt und das kann den Seitenaufruf für den Besucher der Seite stark verzögern oder im schlimmsten Fall zu einem Timeout führen = der Besucher erhält nur eine Fehlermeldung und verlässt die Seite wieder.