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

17 Oktober, 2023

Farbpaletten – praktisches Hilfsmittel und Inspirationsquelle

Bei der Entwicklung eines (Screen-)Designs, müssen viele Entscheidungen getroffen werden. Layout, Raster, Schriften, Größen uvm… Wenn die Farben nicht vom Kunden oder vom Projekt vorgegeben sind, lohnt es sich, mal einen Blick auf fertige Farbpaletten zu werfen. So erhältst du auf einen Blick Farbvorschläge, dazu passende Farben und einen ersten Eindruck, wie die Farben zusammen […]

16 Oktober, 2023

Eigene Farben im Gutenberg-Editor definieren / Span-Styles in WordPress

Wie man Blöcken im Gutenberg-Editor eigene Klassen zuweisen kann, hatte ich hier schon mal beschrieben. Hierbei wird die Klasse jedoch immer auf den gesamten Block angewendet. Will man eine Klasse jedoch nur auf einzelne Wörter anwenden, z.B. um sie in einer anderen Farbe darzustellen, muss man einen anderen Weg gehen. Markiere das gewünschte Wort und […]

15 Oktober, 2023

Einfaches Google Maps Opt-in

Mit folgendem Snippet kannst du ein einfaches Google Maps Opt-in umsetzen. Der User muss der Nutzung von Google Maps aktiv zustimmen. Daten werden erst an Google übertragen, wenn er auf den Button geklickt hat. Zum Aktivieren der eingebetteten Karte bitte auf den Button klicken. Durch das Aktivieren werden Daten an Google übermittelt. Karte anzeigen

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:

Datenschutz Impressum

FRTG - Traces
Jetzt bei Apple Music & Spotify.