Kategorie: Webentwicklung

Webpack kann mit mehreren Entry-Points genutzt werden, um zum Beispiel mehrere JavaScript-Dateien mit Babel zu kompilieren. Hier zeige ich, wie sich die Kompilierung von SASS-Dateien in eigene CSS-Dateien bei mehreren Entry-Points umsetzen lässt.

"Webpack: SASS bei mehreren Entry-Points in eigene Datei kompilieren" Weiterlesen

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

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
Code-Sprache: SQL (Structured Query Language) (sql)

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
Code-Sprache: SQL (Structured Query Language) (sql)

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

Mit Bash on Ubuntu on Windows kann auf Windows 10 ein Windows Subsystem for Linux genutzt werden. Damit lassen sich viele Linux-Befehle auf Windows ausführen, wie beispieslweise auch ssh. Hier zeige ich euch, wie die Erstellung eines SSH-Keys abläuft, der im Subsystem und von Windows genutzt werden soll.

"SSH-Key und das »Windows Subsystem for Linux«" Weiterlesen

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

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>
Code-Sprache: HTML, XML (xml)

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

SVG-Elemente dynamisch über JavaScript zu erstellen ist gar nicht so einfach, wie ich erst dachte … In diesem Beitrag zeige ich, wie sich mit JS ein SVG-Element erzeugen lässt, das über ein use-Element ein Symbol anzeigt.

"svg- und use-Element mit JavaScript erzeugen" Weiterlesen

Elemente wie Links, Buttons und Formularfelder können über die Tastatur (standardmäßig mit der Tab-Taste) angesteuert werden. Hier zeige ich, wie ihr bestimmte Elemente aus dieser Tab-Reihenfolge entfernen könnt, damit sie nicht mehr über die Tastatur angesprochen werden können. "Elemente aus der Tab-Reihenfolge entfernen" Weiterlesen

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