Artikel über JavaScript

Ich bin kein Designer. Doch dieser Fakt hat mich noch nie davon abgehalten, selbst gestalterisch tätig zu werden. Webseiten, GUI, Animationen und Effekte. Das meiste bei meinen Projekten gestalte ich selbst. Besonders schwierig finde ich dabei immer die Auswahl geeigneter und vor allem harmonierender Farben. Doch eine Farbpalette zu erstellen ist gar nicht so schwer. Selbst wenn man davon gar keine Ahnung hat.

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.

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.

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.

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.

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.

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.

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.

"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.

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.

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.

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.