Kategorie: Webentwicklung

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

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

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

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>

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

Autoloader mit Composer erstellen

Ich habe heute ein kleines Plugin für WordPress angefangen und versucht, mich für die Struktur und grundsätzliches ein bisschen am Speaking-Plugin von Alain Schlesser zu orientieren. So bin ich auf das Thema Autoloading gekommen. Alain hat für sein Plugin einen eigenen Autoloader geschrieben, in seinem Talk beim WordCamp Nijmegen aber auch die Möglichkeit via Composer angesprochen. Hier zeige ich, wie sich ein Autoloader mit Composer umsetzen lässt. Autoloader mit Composer erstellen weiterlesen