Frontend Entwicklung

Jedes kennt es von seinem mobilen Endgerät. Die bequeme Pull-To-Refresh Funktion, die viele Apps verwenden, kann jetzt auch schnell und einfach in deine Seite integriert werden. Mithilfe von hook.js. Das funktioniert genau so wie man es in den Apps geht. Scrollt man weit genug nach oben wird der Refresh des Browsers ausgelöst. Die ganz die komplette Seite aktualisieren oder aber nur ein bestimmten Bereich der…

Im letzten Blogpost habe ich einige gute Grunt-Plugins für Entwickler kurz vorgestellt. Heute geht es um einen praktischen Anwendungsfall, nämlich das minifien von CSS Dateien. Grunt bietet hierfür das Plugin grunt-contrib-cssmin. Zunächst muss das Plugin in der package.json hinzugefügt werden. Hierzu einfach einen Eintrag bei den devDepencies hinzufügen. { "name" : "Projekt", "title" : "demo", "version" :…

Ich werde in der nächsten Zeit immer mal wieder etwas über den HTML-Videotag schreiben. Ich habe das Gefühl mir laufen ständig Dinge im Bezug auf ihn über den Weg, über die es sich lohnt zu schreiben. Heute beschäftigen wir uns mit der dynamischen Ermittlung der Größe eines Videos. Dies wird vor allem dann gebraucht, wenn man seine Seite dynamisch an die Größe eines Videos anpassen möchte und man nicht von einer bestimmten…

SVGMagic ist ein jQuery Plugin, dass eine automatische Fallback Lösung für SVG Grafiken bietet. Da SVG Grafiken noch nicht komplett Browser abdeckend benutzt werden können bedarf es eine gute Fallback Lösung, wenn man Vektor Grafiken einsetzen möchte. Da Vektor Grafiken für hochauflösende Displays und auch für mobile Endgeräte einen enormen Vorteil gegenüber normalen Grafiken haben. SVGMagic bietet genau…

Über 50% aller E-Mails werden mittlerweile auf einem Mobile-Device geöffnet, gleichzeitig sind die Anforderungen an den Code einer robusten E-Mail alles andere als leichte Kost und "schön" ohnehin nicht. Grund genug sich ein Framework zu suchen, dass die Arbeit erleichtert. Mit Ink haben wir zuletzt sehr gute Erfahrungen…

In einem meiner vorherigen Blogposts habe ich euch Grunt vorgestellt. Dieses mal möchte ich, um den Nutzen von grunt nochmal hervorzuheben, hilfreiche Grunt Plugins vorstellen.Allgemeine Plugins grunt-contrib-copy Kopiert Dateien und Verzeichnisse grunt-contrib-concatVerkettet Dateien grunt-contrib-clean Löscht…

Problem Vor kurzem bin ich in die Situation gekommen das ich eine Ladegrafik (Throbber) auf einem dunklen Hintergrund anzeigen musste. Da es sich ein animiertes Bild handelt, liegt nahe dafür ein Gif zu verwenden, das Problem hierbei ist aber der fehlende Alpha-Kanal für halb-Transparenz. Egal wie gut man die Grafik ausarbeitet, es bleiben immer "ausgefranzte", weiße…

Diese Woche gibt es mal wieder bunte Kiste Frontend-Entwickler-Links für euch! . Themen: E-Mail Templates, Responsive Webdesign, JavaScript CSS3-Animation Events und die guten alten iFrames. Responsive E-Mails Step-By-Step Immer mehr E-Mails werden zuerst auf dem Handy gelesen. Grund genug sich um das Responsive verhalten von Newslettern gedanken zu machen. Dieser Artikel bestehend aus 9-Schritten zum…

Image Lightbox ist eine minimalistische Lightbox mit responsive Design und Touch Unterstützung. Lightbox Scripts sind perfekt um Bilder bzw. Bildergalerien darzustellen, deshalb gibt es gefühlt 1000 verschiedene Lightbox Scripte, die mehr und minder gut sind. Lightbox ist eins davon den positiven Lösungen. Hier eine kurze Auflistung der Vorteile: Minimalistisch…

Zum Thema Performance-Optimierung gibt es im Netz schon viele unzählige Tipps. Minifying und diverse andere Techniken sind bei jedem Frontendler bekannt. Aber ich glaube meinen heutigen Tipp kennen die wenigsten.Der Tipp lautet: sortiere deine properties alphabetisch. Dann kann nämlich gzip bei dei der Auslieferung nämlich noch besser arbeiten und besser komprimieren. Das kann n ochmal bis zu einem Prozent an Dateigröße…