Frontend Entwicklung

Um eine gute Navigation zu bauen kann es durch aus sinnvoll sein, sie per Tastatur steuerbar zu machen. So könnte man zwischen den einzelnen Seiten mittels Pfeiltasten hin und her wechseln zum Beispiel bei einem Blog. Ich zeige euch wie ihr das ganze umsetzen könnt. In JavaScript wird uns das Event onkeydown angeboten. Mit Hilfe dieses Events ist es uns möglich zu ermitteln, um welche gedrückte Taste…

Hallo freunde der Frontend Entwicklung, heute gibt mal was ganz neues... DRAG&DROP! Ja ich weiß, das Thema ist gar nicht neu, wir haben es auch schon diverse male in unserem Technik Blog behandelt. Heute möchte ich aber mal eine andere Seite beleuchtet, nämlich wie Drag&Drop von Dateien in den Browser löst,…

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…

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…

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…

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…

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…

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…

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…

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…