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

Alle Beiträge zum Thema "JavaScript"

13 Februar, 2025

Hydra Video Synth – Fullscreen-Hack

Der Hydra Video Synth ist ein browserbasierter, live-coding Video-Synthesizer, der von Olivia Jack entwickelt wurde. Er ermöglicht es VJs und Video-Artists, visuelle Echtzeit-Generativeffekte zu erstellen, ähnlich wie bei analogen Videosynthesizern. Hydra bietet von Haus aus keinen Fullscreen-Modus. Mit folgendem JavaScript kannst du Hydra dennoch im Fullscreen-Modus laufen lassen und den Code ausblenden: Öffne die Konsole […]

4 Februar, 2025

Oktav-Arpeggios mit Random-MIDI-Parametern im Logic Pro Scripter

Mit dem Logic Pro Scripter kannst du, direkt in Logic, eigene MIDI-Plug-ins, wie z.B. Arpeggiatoren, Chord Trigger, Harmonizer oder Zufallsgeneratoren in JavaScript programmieren. Ich bin ja seit eh und je sehr begeistert von Ólafur Arnalds‘ „Stratus“. In Stratus wird, begleitend zum gespielten Klavier-Ton, eines von 8 Patterns, bestehend aus Oktav-Arpeggios, abgespielt. Das klingt ganz fantastisch […]

30 April, 2024

So erstellst du eine Offline-WebApp (PWA)

Um aus einer Website eine WebApp zu generieren, die auch offline funktioniert, sind 3 Dateien essentiell: „index.html“, „manifest.json“ und der Service-Worker „serviceworker.js“. (Die Dateinamen sind frei wählbar.) In den jeweiligen Files wird folgender Code benötigt: Im HTML: manifest.json serviceworker.js Um auf die WebApp hinzuweisen, kann folgenden Script ebenfalls hilfreich sein:add-to-homescreen.js CSS für iPhone-Notch Damit die […]

24 April, 2024

add-to-Homescreen.js

Mit dem JavaScript „add-to-Homescreen.js“ wird ein kleines Info-Fenster eingeblendet, das dazu auffordert, die aktuelle Website auf dem HomeScreen abzulegen. Zur Zeit noch iOS-only. Download add-to-homescreen.zip

26 Februar, 2024

Mit node.js JavaScript-generierte Inhalte scrapen

Eine etwas unkonventionelle Lösung habe ich mit für folgendes Problem überlegt. Für einen Kunden scrape ich automatisiert bestimmte Inhalte diverser Websites. Problem Nr. 1: Inzwischen werden viele Inhalte erst im Client-seitig mit JavaScript generiert. Das macht es unmöglich sie mit PHP zu crawlen. Auf der Suche nach einer Lösung stößt man schnell auf „node.js“ & […]

13 Februar, 2024

Kalender mit Monatsübersicht (mit Bootstrap & jQuery und optional mit WordPress)

Bei der Suche nach einem schlichten, schicken Kalender mit Monatsansicht, bin ich auf folgendes Template aufmerksam geworden: https://github.com/ylli2000/bootstrap-4-calendar Der Kalender sieht nicht nur sehr schick aus, er ist auch sehr leicht mit Terminen zu befüllen, zu konfigurieren und anzupassen. Termine können ganz einfach mit einem Array in den Kalender eingetragen werden: Solch ein Array lässt […]

21 Januar, 2024

Location Based Content und QR-Codes

Mit der Geolocation API kannst du den Standort des Users ermitteln. Diese API lässt sich durchaus auch kreativ einsetzen. So können z.B. basierend auf dem Standort des Users bestimmte Informationen und Funktionen angezeigt werden. Z.B.: All diese Beispiele lassen sich ideal mit einem QR-Code nutzen, der an entsprechendem Ort angebracht ist. Folgender Code kann als Basis für […]

30 Dezember, 2023

CSS 100vw und das Problem mit der Scrollbar

Die Einheit „vw“ („Viewport Width“) ist sehr praktisch, wenn man ein Element mit CSS bildschirmfüllend darstellen möchte. Das Problem hierbei ist, dass die Scrollbars im Browser, je nach Einstellung und Betriebssystem, automatisch ein- und ausgelblendet werden oder die ganze Zeit sichtbar sind. Dieser Umstand ist im dynamischen Wert „vw“ leider nicht berücksichtigt. Und so kommt […]

27 Dezember, 2023

So kannst du das Laden von gecachtem JavaScript und CSS verhindern

Dass JavaScript und CSS-Dateien nach einer Änderung im Browser nicht neu geladen, sondern aus dem Cache geladen werden, kann eine nervige Angelegenheit sein. Insbesondere auch auf dem iPhone, auf dem kein „Hard Refresh“ möglich ist. Um den Browser anzuweisen, immer die aktuelle JS uns CSS vom Server zu laden, reicht es einen sich ändernden Parameter […]

14 Dezember, 2023

Text-Fade-in-Effekt mit CSS und JavaScript

Mit folgendem Snippet lässt sich ein subtiler, schicker Text-Eingangs-Effekt erzielen, der sich insbesondere für große Headlines eignet. Lorem ipsum dolor sit amet constructor Noch mal