Artikel über JavaScript

14.06.2022

Wie Du einen Dark-Mode mit Tailwind umsetzt

Seit kurzem verfügt Aureola über einen Dark-Mode. Über die kleine Sonne rechts oben im Header kannst Du zwischen der hellen und dunklen Variante der Seite hin und her schalten. Dein Browser merkt sich Deine Auswahl. Wie das genau funktioniert und wie Du das selber in Tailwind umsetzen kannst, erkläre ich Dir in diesem Artikel.

04.11.2017

Bootstrap Breakpoints in JavaScript

Bei Bootstrap wird dem Entwickler das Leben mit vordefinierten Breakpoints ein wenig erleichtert. Manchmal muss man allerdings auch in JavaScript wissen, in welchem Breakpoint man sich gerade befindet. Heute zeige ich Euch, wie man Daten aus den Stylesheets nach JavaScript überträgt und auf Änderungen in den Breakpoints reagiert.

28.06.2017

Textfelder mit dynamischen Labels

Damit uns Entwicklern nicht langweilig wird, denken sich Designer gerne neue Gimmicks für Webseiten aus. Zum Beispiel so etwas schönes wie Textfeld-Labels, die sich beim Fokus auf das Feld verschieben. Ich nenne sie einfach mal "dynamische Labels". Sowas kann man natürlich mit JavaScript realisieren. Oder man missbraucht ein HTML5-Feature für seine Zwecke und kommt ganz ohne JavaScript aus. Ich zeige Euch heute beide Varianten.

16.06.2017

Fixierter Header mit Scroll-Events

Einen festen Header zu erstellen, der dynamisch auf Scroll-Ereignisse reagiert, ist nicht schwierig. Ihr braucht dafür keine Bibliothek oder irgendein Widget. Alles was Ihr benötigt sind ein paar Zeilen JavaScript und ein wenig CSS. Nun... und Ihr braucht ein Header-Element irgendwo in Eurer Webseite.

15.03.2017

Youtube-Videos Datensparend einbinden

Youtube-Videos Datenschutz-konform einzubinden ist gar nicht so schwer. Aber manchmal liegt der Teufel im Detail. Über die Cookie-sichere-Einbettung von Youtube wird zwar kein Cookie mehr gesetzt, Daten werden durch den Request an Youtube aber trotzdem übertragen. Gerade im Hinblick auf die kommenden neuen EU-Datenschutz-Gesetze sollte man sich auch als Blogautor fragen, wie man seine Leser besser schützen kann. In diesem Artikel erkläre ich Euch wie das geht.

02.02.2017

Mit mehreren Promises gleichzeitig arbeiten

Callbacks waren in JavaScript lange ein notwendiges Übel, um mit der asynchronen Natur der Sprache umzugehen. Promises machen in ECMAScript 6 endlich Schluss damit. Statt einer verschachtelten Callback-Struktur, kann man nun Operationen sauber miteinander verketten. Doch richtig spannend wird es erst, wenn man mehrere asynchrone Operationen auf einmal ausführen möchte. Ich gehe davon aus, dass Ihr Euch schon mit Promises beschäftigt habt. Für alle anderen gibt es zu Beginn eine kleine Zusammenfassung.

05.05.2016

Simply Build Tasks Collection

Letzten Monat habe ich Euch Simply Build vorgestellt. Ein Helper-Tool zur Verwaltung Eurer Tasks und Build-Prozesse. Heute möchte ich Euch eine kleine Sammlung von Simply-Tasks vorstellen, die Euch den Einstieg in Simply erleichtern sollen. Jeder Task funktioniert unabhängig voneinander und prinzipiell auch unabhängig von Simply Build.

17.04.2016

NPM: Tileset Slicer

"I will always choose a lazy man to do a hard job because a lazy man will find an easy way to do it." Ob Bill Gates das nun wirklich gesagt hat oder nicht, ist zwar umstritten. Aber der Satz beschreibt auf jeden Fall den Grundgedanken hinter jeder Automatisierung. Wenn ich eine nervige und/oder repetitive Arbeit habe, dann schreibe ich mir ein Programm, dass die Arbeit für mich erledigt. Zum Beispiel einen Tileset Slicer.

09.04.2016

NPM: Simply Build

Grunt, Gulp und wie sie alle heißen sind Segen und Fluch zugleich. Einerseits erleichtern sie einem die Arbeit zunächst einmal, indem sie richtig eingesetzt den Build-Prozess vereinfachen. Andererseits funktionieren Sie auch nur bedingt zuverlässig, da sie oft einfach ewig viele Dependencies haben. Irgendwo hakt es immer. Vor nicht allzu langer Zeit versuchte ich mal wieder ein älteres Projekt zum Laufen zu bekommen und in meiner Verzweiflung rief ich aus... "Jetzt bau's halt einfach!" So entstand Simply Build.

15.02.2016

Simple Node.js Boilerplate

Jedes Projekt von Grund auf neu zu entwickeln kostet wahnsinnig viel Zeit. Zum Glück gibt es Boilerplates. Hierbei handelt es sich um einen Grundsetup für Euer Projekt. Dieses Grundgerüst kann man entweder selbst für sich zusammen stellen oder man greift auf eines der zahlreichen Projekte bei Github zurück. In diesem Artikel stelle ich Euch heute eine einfache Boilerplate vor, welche ich für meine Node.js-Projekte verwende.

09.02.2016

jQuery Teamspeak 3 Status

Dinge, die man nie tun sollte: Ein PHP-Skript erstellen, das sich mit einem anderen Server verbindet, um Informationen abzurufen und auf Eurer Webseite anzuzeigen. Und auf keinen Fall sollte man dies bei jedem einzelnen Seitenaufruf tun, ohne die Ergebnisse zwischenzuspeichern. Kürzlich wurde ich gebeten, meinem Bruder mit einem Modul zu helfen, das er heruntergeladen hatte, was genau das tat. Also habe ich stattdessen dieses jQuery-Plugin erstellt.

08.01.2016

Wie man einen Mediator mit ES6 erstellt

Einen Mediator einzusetzen, ist immer dann sinnvoll, wenn man eine enge Kopplung von Komponenten vermeiden möchte, aber trotzdem eine Kommunikation zwischen eben jenen notwendig ist. Einen Mediator zu schreiben ist nicht schwierig. Ich zeige Euch heute anhand eines PubSub-Services, wie man einen solchen mit ein paar Zeilen Code definieren kann.