Möchte man JavaScript Funktionen bei einer bestimmten Bildschirmauflösung ausführen, so bieten sich dazu verschiedene Techniken an. Beispielweise könnte man per window.outerWidth eine bestimmte Pixelbreite des Fensters in Erfahrung bringen und diese Abfragen. Nun ist es so, dass JavaScript Funktionen die auf einer bestimmten Auflösung basieren, häufig mit dem Design der Seite zu tun haben. Für die Steuerung des Designs…

weiterlesen

Open Graph Tags

Bestimmt wollte jeder von euch eure Webseite bei Facebook posten und dabei merkt man, dass das ja gar nicht so toll wie bei den anderen aussieht. Genau dafür hat Facebook die Open Graph Tags (OG Tags) eingeführt. Ich zeige euch, wie ihr sie verwendet. Zu erst einmal: Was sind überhaupt diese Open Graph Tags? Die OG Tags sind spezielle Meta Tags für Facebook. Sie gehören nicht zum…

weiterlesen

Möchte man interaktive Elemente auf einem Smartphone oder anderen Touch-Devices benutzerfreundlich machen, so bietet es sich an diese so umzusetzen, dass die User die komplette Fläche des Elements für eine Interaktion touchen können, statt nur ein kleines Icon oder Text. Problematisch wird es, wenn solch ein Element die komplette Breite des Screens einnimmt und der User beim darüber  scrollen mit dem Finger…

weiterlesen

MD5 Hash mit Javascript erzeugen

Auch mit Javascript kann man einen MD5 Hash erzeugen. Leider bietet Javascript nicht wie PHP gleich eine fertige Funktion dafür. Deswegen müssen wir sie uns selber schreiben. Da das Internet voller Überraschungen ist gibt es schon diverse Leute, die das für uns erledigt haben. Wir müssen jetzt nur noch die Funktion in unsere Webseite kopieren und schon können wir sie benutzen. function md5(str) { var…

weiterlesen

Viele von euch stehen bestimmt vor der selben Herausforderung, wenn man eine Galerie bzw. ein Karussell für ein Projekt erstellen will, frag man sich "wie mache ich das oder welche fertige Lösung nehme ich dafür?". Ganz tricky wird Geschichte wenn diese Galerie oder der Slider dazu noch "responsive" bzw. touchfähig sein soll. Da kommt schnell der Gedanke an…

weiterlesen

JavaScript debounce was ist das?

Falls du schon öfter JavaScript Code geschrieben hast und noch nie etwas von "debounce" gehört hast stehen dir wohl ein paar Refactoring-Sessions bevor. In JavaScript gibt es einige Events die vom Browser sehr häufig getriggert werden können, dazu gehört z.B. das resize Event auf dem Window Objekt. Während du mit der Maus ein Fenster verkleinerst wird es unzählige male…

weiterlesen

Der HTML5 Meter-Tag

Möchte man eine grafische Darstellung für einen Wert erreichen der sich innerhalb einer bestimmten Range bewegt, zum Beispiel die Belegung eines Speichers einer App, ist der HTML5 Meter-Tag sehr praktisch. Dieser bietet zudem einige nützliche Features von Haus aus. Features Ohne zutun bekommt der meta-Tag eine brauchbare Optik und hat passende Attribute um diese mit dem aktuellen Wert, sowie…

weiterlesen

Responsive Overlays

Ihr wollt responsive Overlays bauen und braucht eine gute Grundstruktur? Ich zeige euch heute wie ihr diese Grundstruktur schnell erstellt und sie auch bei größen Inhalt gut zu bedienen bleibt. Was brauchen wir dafür? Gar nicht viel! Ich benutze jQuery da es die meisten so wie so verwenden. Man kann das ganze aber auch mit VanillaJS einfach bauen. Zu dem ein bisschen HTML und CSS. Damit wir bei…

weiterlesen

CSS Selektoren Level 4

Heute zeige ich euch eine kleine Vorschau auf die neuen Selektoren in CSS. Sachen, die wir uns Frontendler schon vor Jahren gewünscht haben. Also legen wir los.  Der ! Selektor Fangen wir mit den für mich sinnvollsten Seketor an. Den sogenanten parent Selektor. Wo wir früher mit jQuery uns ein Eltern-DIV selektiert haben, können wir nun mit einem einfachen Ausrufezeichzen "!" in der Selektorenkette das zu…

weiterlesen

Bessere Präsentationen mit reveal.js

HTML, JavaScript und CSS sind heutzutage die Basics die jeder Software Entwickler beherrschen sollte. Da liegt es doch nahe auch Präsentationen damit zu erstellen. Einer der Vorteile ist das ein Browser überall installiert sein sollte, und das lästige mitschleppen von PowerPoint Viewern auf USB-Sticks entfällt. Einfach ins Internet "gießen" und loslegen. Natürlich gibt es auch schon die passende Library dafür,…

weiterlesen