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

1. November 2023

setTimeout() – JavaScript-Code zeitverzögert ausführen

Mit folgendem Code lässt sich JavaScript zeitverzögert ausführen.

1. November 2023

PDF2JPG – PDFs in JPGs konvertieren

Mit dieser Anleitung kannst du in wenigen Minuten ein Automator-Skript erstellen, mit dem du anschließend alle Seiten eines PDFs in einzelne JPGs konvertieren kannst. Öffne Automator und wähle „Schnellaktion“. Gib dann „pdf“ in die Suche ein, wähle „PDF-Seiten als Bilder rendern“ und wähle oben rechts „Finder“ aus. Gib jetzt „Finder“ in der Suche ein und […]

29. Oktober 2023

JavaScript-generierte Websites crawlen („Scraping“)

Das Crawlen oder Scrapen externer Websites ist ein spannendes Thema und ermöglicht viele coole Anwendungen. In der Vergangenheit habe ich zum Crawlen die PHP-Funktion „file_get_contents()“, in Kombination mit SimpleHTMLDom oder DOMXPath, eingesetzt. Das funktioniert auch wunderbar, wenn die gewünschten Daten auf dem Server generiert und als statische HTML-Dateien an den Browser des Benutzers gesendet werden. […]

24. Oktober 2023

Multilevel-CSS-only-Dropdown-Navigation

Mit folgendem Stylesheet lässt sich eine Navigation mit mehreren Unterebenen darstellen, die sehr gut an das eigene Design adaptierbar ist: Der dazugehörige HTML-Code besteht aus einer einfachen verschachtelten Liste: Hier gehts zur Demo: Multilevel CSS-Navigation Die mobile Darstellung der Navigation stelle ich meistens in einem separatem div dar. Dazu lade ich das Menü mit jQuery […]

17. Oktober 2023

4 weitere Ideen, wie du ChatGPT im Agentur-Alltag einsetzen kannst.

Es ist immer wieder beeindruckend, was ChatGPT alles kann. Produkttexte, Briefe und Songtexte formulieren, Geschichten schreiben und Hausaufgaben erledigen. Viele dieser Einsatzbereiche sind absolut beeindruckend aber in der (Agentur-)Praxis nicht gerade hilfreich. Im Folgenden habe ich 4 weitere Einsatzmöglichkeiten zusammengestellt, die in der Praxis tatsächlich hilfreich sind:

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 […]
Datenschutz Impressum

FRTG - Traces
Jetzt bei Apple Music & Spotify.