New Old Video Postings

Beim Stöbern in meinem Blog ist mir aufgefallen dass viele Videos nicht mehr abrufbar sind. Viele Dateien lagen noch als .flv vor und oder das dazugehörige WordPress Video-Plugin hatte ich schon lange deaktiviert.

Um zu retten, was zu retten ist, habe ich die Videos zu .mp4 Dateien konvertiert und die entsprechenden Beiträge überarbeitet:

Auch sonst habe ich noch alle möglichen Videos versucht wieder zugänglich zu machen.

closing-body

Javascript und der </body>-Tag

„Kaum macht man es richtig, schon funktioniert es.“

Ein simples Sprichwort – doch kann man das Ganze bei Javascript umdrehen:

„Es funktioniert, also ist es richtig?“

Womit ich beim Thema wäre :-)

Paul Lewis und Jake Archibald haben mich mit ihrem Videoblog HTTP 203 zum Grübeln gebracht. Als erfahrene JS Entwickler hängen wir unseren Code erst vor dem </body>-Tag ein und führen ihn frühestens im document.ready Event aus…

Und um ihr Beispiel (von mir frei übersetzt) zu zitieren:

„Das ist so, als würde man sicher stellen dass die Straßen bis 8:45h frei sind und dann fahren alle auf einmal los“ (HTTP 203: Performance Matters ~30s)

(mehr …)

svg2png

svg 2 png grunt workflow

Vektorgrafiken sind toll. Man kann sie unendlich skalieren und der Detailgrad bleibt immer gleich gut. Auf HiDPI1)HiDPI – High DPI Bildschirme, sind Bildschirme deren Device Pixel Ratio > 1 ist, also ein berechnetes Pixel von mehreren dargestellt wird und daher ein feineres Bild entsteht Displays sind sie die beste Lösung wenn es darum geht einfache Grafiken darzustellen. Photorealismus ist mit Vektorgrafiken allerdings nicht effizient zu erreichen. Hier ist weiterhin progressive JPEG oder ähnliches die beste Wahl.

Auch die Renderperformance sollte beachtet werden. In einem Projekt im Sommer 2013 habe ich am Ende alle SVGs wieder rausgenommen, da in diesem Artikel2)Data URI Performance: Don’t Blame it on Base64 | Mobify die Rendergeschwindigkeit von SVGs auf mobilen Geräten unter dem Punkt „Secondary Result: SVGs are Surprisingly Slow!“ generell in Frage gestellt wurde. Und damals ging es um die Renderperformance… (mehr …)

References   [ + ]

1. HiDPI – High DPI Bildschirme, sind Bildschirme deren Device Pixel Ratio > 1 ist, also ein berechnetes Pixel von mehreren dargestellt wird und daher ein feineres Bild entsteht
2. Data URI Performance: Don’t Blame it on Base64 | Mobify
grunt jslint vanilla js

jQuery vs Vanilla JS featuring JSLint = good practice

Javascript Frameworks wie jQuery1)jQuery – „write less, do more“ erleichtern jedem Entwickler die Arbeit, aber können dem Browser mehr Arbeit bescheren.

JSLint2)JSLint – The JavaScript Code Quality Tool ist in der JavaScript Entwicklung ein idealer Partner, doch leider ist jQuery für JSLint nicht ganz durchschaubar und so können sich schnell wieder „bad practices“ einschleichen.

Zu diesem Beitrag habe ich mir ein Testdokument erstellt, welches aus einem simplen html Gerüst besteht und als Inhalt einen <ul> mit 10.000 <li> Elementen besteht, welche jeweils ein Click Event bekommen um eine Klasse zu wechseln. Das erste Beispiel nutzt jQuery 1.7.2, alle weiteren jQuery 1.11.2. UPDATE: Nun habe ich auch eine Vanilla JS delegated Methode durchgemessen. UPDATE 2: Die kompletten Testdateien habe ich nun bei bitbucket hochgeladen: djpogo/vanilla-jquery-listener.

Bei jQuery ist es durchaus gängig einen Listener Funktion als anonyme Funktion zu implementieren. Das sieht dann so aus:

// jQuery &lt; = 1.7.x 
$(".viewportChanger").click(function () { $(this).toggleClass("show"); });
 
// jQuery 1.11.2 ohne Delegation
$(".viewportChanger").on("click", function () { $(this).toggleClass("show"); });
 
// jQuery 1.11.2 mit Delegation
$(".viewport").on("click", ".viewportChanger", function () { $(this).toggleClass("show"); });

(mehr …)

References   [ + ]

1. jQuery – „write less, do more“
2. JSLint – The JavaScript Code Quality Tool
grunt-svgmin

Nachtrag: Mobile Web Performance Optimierung

Vor kurzem hatte ich das Chromium Device Mode Tool1)Chromium Device Mode – Ähnlich wie die Firefox Responsive Design View bietet Chromium (oder Google Chrome) seit Version 38 ein leistungsfähigeres Werkzeug an. Neben mehr Geräteprofilen und der Auswertung des mobile viewport gibt es ein Killer Feature, nämlich das die Simulation von Netzwerkverbindungen wie WiFi, 3G,EDGE,GPRS einfach möglich ist. wieder entdeckt und ausführlich getestet3)mobile web performance optimization mit chromium responsive design view.

Die Einsparung war mit kleinen Handgriffen direkt enorm, aber ein paar Ideen hatte ich noch, denen ich in diesem Artikel nachgehen werde.

Als Ausblick sei genannt Grunt2)Grunt – Der Javascript Task RunnerSVG4)SVG – Scalable Vector Graphic; Ein verlustfrei skalierbares GrafikformatMinifizierung5)Minifizierung – Entfernen aller nicht notwendigen Zeichen in einer Javascript- oder CSS Datei, Uglifizierung6)Uglifizierung – Ersetzung von Variablen- und Funktionsnamen um einerseits die Datei noch kleiner zu bekommen, anderseits die Lesbarkeit zu erschweren und SVG-Sprites7)Sprites – im allgemeinen fasst man mit Sprites mehrere Grafiken in einer Datei zusammen, damit diese nur ein mal geladen werden muss und somit den Seitenaufbau beschleunigt. (mehr …)

References   [ + ]

1. Chromium Device Mode – Ähnlich wie die Firefox Responsive Design View bietet Chromium (oder Google Chrome) seit Version 38 ein leistungsfähigeres Werkzeug an. Neben mehr Geräteprofilen und der Auswertung des mobile viewport gibt es ein Killer Feature, nämlich das die Simulation von Netzwerkverbindungen wie WiFi, 3G,EDGE,GPRS einfach möglich ist.
2. Grunt – Der Javascript Task Runner
3. mobile web performance optimization mit chromium responsive design view
4. SVG – Scalable Vector Graphic; Ein verlustfrei skalierbares Grafikformat
5. Minifizierung – Entfernen aller nicht notwendigen Zeichen in einer Javascript- oder CSS Datei
6. Uglifizierung – Ersetzung von Variablen- und Funktionsnamen um einerseits die Datei noch kleiner zu bekommen, anderseits die Lesbarkeit zu erschweren
7. Sprites – im allgemeinen fasst man mit Sprites mehrere Grafiken in einer Datei zusammen, damit diese nur ein mal geladen werden muss und somit den Seitenaufbau beschleunigt
Extract for Creative Cloud Ansicht: Beispiel PSD von Adobe

Adobe Extract – cloud powered PSD2HTML

Ein etablierter Workflow in der Web Industrie ist, dass ein Grafiker eine Website mit Photoshop konzipiert und der Frontend Entwickler diese dann zur Umsetzung bekommt.

In Zeiten des Responsive Web hat die pixelgenaue Umsetzung mittlerweile ihren Charme verloren. Viele Probleme die beim statischen Konzipieren in Photoshop entstehen, können bei frühzeitigem Schwenk auf den Browser schneller erkannt und eliminiert werden. Aber trotzdem kann es passieren, dass einen Frontend Entwickler ein PSD als Designvorlage erreicht. Unter Linux hatte man bis vor kurzem dann nur unzureichende Möglichkeiten mit diesem PSD sinnvoll zu arbeiten.

(mehr …)

Responsice Design View im Chromium

mobile Web Performance Optimization mit Chromiums 38 Responsive Design View

Der Titel ist ein ziemlicher Buzzword Dump, hält aber was er verspricht.

TL;DR

Mit Hilfe der Responsive Design View im Chromium1)Responsive Design Mode – Ein Werkzeug welches verschiedene Geräteprofile und Netzverbindungen simulieren kann 38, konnte ich schnell Flaschenhälse auf einer Seite erkennen und mit kleinen Handgriffen beheben.

Neben einer kleinen Theorie-Runde gibt es weiter unten die Messwerte vor und nach der Optimierung, Verbesserungen um 66% sind drin!

und los…

Bis gestern habe ich immer das Firefox Responsive Design View genutzt. Das äquivalente Tool im Chromium war mir bekannt, aber ich fand es nicht so intuitiv wie beim Firefox.

Der Ansatz im Firefox war einfach direkter, allerdings muss man als Anwender das Device Pixel Ratio2)Device Pixel Ratio – Hierbei weicht die native Auflösung eines Displays, zum Beispiel Full HD (1920×1080), von der im Gerätebrowser verfügbaren um einen bestimmten Faktor ab Konzept verstanden haben und die meta name="viewport" Angabe nicht vergessen.
(mehr …)

References   [ + ]

1. Responsive Design Mode – Ein Werkzeug welches verschiedene Geräteprofile und Netzverbindungen simulieren kann
2. Device Pixel Ratio – Hierbei weicht die native Auflösung eines Displays, zum Beispiel Full HD (1920×1080), von der im Gerätebrowser verfügbaren um einen bestimmten Faktor ab

simple Javascript HTML5 jQuery Form Validation

Formular Validierung hat noch nie Spaß gemacht und meistens beschränke ich die Validierung auf die Server-Seite. Doch bevor man ein Formular per AJAX abschicken will, ist es immer besser auch auf der Client-Seite die Eingaben zu validieren und dem Benutzer ggf. noch darauf hinzuweisen dass nicht alle notwendigen Informationen eingegeben sind, das erspart Frustration.

HTML5 ist dabei eine große Hilfe. Mit dem erweiterten Formularfeld Attribut type, sowie dem pattern und required Attribut übernimmt der Browser die Validierung. Per Javascript reicht dann die Suche nach Formular Elementen die required sind aber einen invalid Status haben:

var $form = $("#emailForm");
if ($form.find(":required:invalid").length === 0) {
  // alle Pflichtfelder validieren
 
} else {
  // Nicht alle Pflichtfelder validieren
}

Über CSS kann man die Formularfelder auch noch stylen je nachdem ob sie valid oder invalid sind. Wer noch „Nicht-HTML5-Browser“ unterstützten muss, könnte per Modernizr1)Modernizr  – the feature detection library for HTML5/CSS3 eine Weiche schalten und ein Javascript Plugin zur Valdierung nutzen, oder per Progressive Enhancement2)Progressive Enhancement – Wikipedia Artikel das Formular einfach über die serverseitige Parameter Validierung überprüfen und ausgeben lassen – um die serverseitige Validierung kommt man auch mit der jQuery Zeile von oben nicht drumherum. Frontend Formular Validierung ist und bleibt ein UX-Enrichment3)UX Enrichment – Die Bereicherung des Benutzer Erlebnis.

References   [ + ]

1. Modernizr  – the feature detection library for HTML5/CSS3
2. Progressive Enhancement – Wikipedia Artikel
3. UX Enrichment – Die Bereicherung des Benutzer Erlebnis