Über Web, Tech, Games, Art,
Musik, Code & Design

14. Oktober 2023

Website vorlesen lassen / Text2Speech für barrierefreie/-arme Websites

Um Barrierefreiheit oder -armut auf Websites umzusetzen, ist häufig auch eine Vorlesefunktion erforderlich. Mit Hilfe des jQuery-Plug-ins „articulate.js“ kann man das „Speech Synthesis Interface“ der Web Speech API des Browsers nutzen. Da „articulate.js“ standardmäßig kein UI bereitstellt, habe ich folgendes Script geschrieben, das einen „Vorlese-Button“ auf der Website einfügt: Der Button ist so gestaltet, dass […]

13. Oktober 2023

Reihenfolge der Spalten im Gutenberg-Editor mobil ändern.

Ein häufig verwendeter Design-Aufbau im Web ist: „Text links, Bild rechts“. Dieser Aufbau lässt sich auch im Gutenberg-Editor in WordPress sehr leicht umsetzen. Das Problem hierbei ist, dass das Bild in der mobilen Ansicht, standardmäßig unter dem Text ist. Mit folgendem CSS lässt sich die Reihenfolge der Spalten ändern: Die Klasse muss anschließend nur noch […]

13. Oktober 2023

Serverpfad einer Datei in WordPress

Wenn du, z.B. mit Hilfe von LazyBlocks, in WordPress Downloads zur Verfügung stellst, wird der Pfad zur Datei als URL ausgegeben. Um den Dateityp oder die Dateigröße mit PHP zu bestimmen, wird allerdings der absolute Serverpfad benötigt. Also z.B. statt: Mit folgendem Code kannst du den Serverpfad einer Datei in WordPress ermitteln und den Dateityp […]

11. Oktober 2023

Test-PDF

Hier ist ein Test-PDF, das als Platzhalter für PDF-Downloads auf Websites dienen kann.

9. Oktober 2023

Responsive Text

Im responsive Webdesign wird wird die Schriftgröße in der Regel durch Breakpoints und Mediaqueries angepasst. Z.B. auf kleinen Bildschirmen 14px und auf großen Bildschirmen 22px. Das funktioniert in den meisten Layouts auch sehr gut. Manchmal soll eine Headline aber auch stufenlos skaliert werden. Z.B. wenn sie, wie in diesem Beispiel, genau so breit sein soll, […]

6. Oktober 2023

SimpleHTMLDom-Alternative

Viele Jahre habe ich „SimpleHTMLDom“ eingesetzt um Inhalte externer Websites, wie z.B. Jobs, News etc. auszulesen. Immer häufiger bin ich damit in letzter Zeit an die Grenzen von SimpleHTMLDom geraten. Sobald ein HTML-Dokument sehr groß ist (> 1MB) hat SimpleHTMLDom oft einen Fehler 500 erzeugt. Die Alternative: Die PHP-Klasse DOMXPath! DOMXPath scheint auf den ersten […]

6. Oktober 2023

YouTube-Videos responsive einbetten

Mit folgendem Code lassen sich YouTube-Videos im Format 16:9 responsive einbetten:

5. Oktober 2023

Daten aus einer REST-API mit PHP ausgeben

Mit folgendem Code lassen sich (JSON-)Daten aus einer REST-API ausgeben:

30. September 2023

background-Attachment: fixed und background-size: cover auf einem iPhone oder iPad

Es ist ein altes Problem, das Apple leider bis heute nicht behoben hat: Die CSS-Eigenschaft „background-Attachment:fixed“ lässt sich nicht in Kombination „background-size: cover“ nutzen. Während auf dem Desktop alles normal aussieht, wird das Hintergrundbild unter iOS viel zu groß dargestellt, also nicht durch „background-size: cover“ in das div eingepasst. Erst seit dem Release von iOS […]

29. September 2023

Videos für´s Web komprimieren

In der Regel ist es eine gute Idee Videos bei YouTube zu hosten. Das erspart eine Menge Webspace & Traffic. Falls man ein Video selbst hosten möchte, sollte man es auf jeden Fall vernünftig komprimieren. Die App mit dem merkwürdigen Namen „Rain Video-Video-Kompression“ leistet diesbezüglich ganz hervorragende Dienste und fällt mit dem gebotenen Funktionsumfang wohl […]

FRTG - Traces
Jetzt bei Apple Music & Spotify.