Das E-Book zu ECMAScript 5

Cover von ECMAScript 5 - Entwickeln mit dem aktuellen JavaScript-Standard

Vor langer Zeit schrieb ich einst eine Artikelserie über ECMAScript 5, den seit 2011 aktuellen JavaScript-Standard. Der Inhalt der einzelnen Artikel war notgedrungen in Teilen etwas verknappt – schließlich sollte das Ganze in 6 Blogposts passen. Zu erzählen wäre eigentlich viel viel mehr gewesen, denn es gibt allerlei Edge Cases und interessante Details. Außerdem sind heutzutage die Internet Explorer der Versionen 8 und älter die einzigen Browser, die den neuen Standard noch nicht unterstützen. Anders gesagt: in jedem aktuellen Browser und in jedem Vorgänger jedes aktuellen Browsers ist Unterstützung vorhanden und auf Plattformen wie NodeJS sowieso. Gleichzeitig hat mir eine Twitter-Umfrage gezeigt, dass viele Entwickler die meisten ES5-Features noch gar nicht auf dem Schirm haben (während gleichzeitig schon alle Welt von ECMAScript 6 redet). Es wird also Zeit, das Thema mal wieder auf die Agenda zu setzen, Zeit für das E-Book zu ECMAScript 5.

Das E-Book ist mehr als nur eine überarbeitete Fassung der Artikelserie. Zwar ist der Gegenstand der Texte notgedrungen der gleiche, doch so gut wie jeder Satz wurde überarbeitet und das E-Book enthält vieles, was in der Artikelserie einfach keinen Platz hatte. Während die Artikelserie in DIN A4 umgerechnet ca. 30 Seiten belegt, wiegt das E-Book mehr als 120 Seiten ‐ und diese Extra-Seiten enthalten alles andere als reines Füllmaterial! Beispiele für Neues:

  • Wirklich jedes neues ES5-Feature, selbst die in der Artikelsiere übergangenen neuen Date- und JSON-Funktionen
  • Ausführlichere und präzisere Erläuterungen zu allen Themen von der JavaScript-Geschichte bis hin zu den neuen APIs
  • Exotischere Konzepte wie z.B. bound function werden ausführlich erklärt
  • Es gibt ausführlichere und zahlreichere Codebeispiele zu jedem Aspekt von ES5
  • Praktische Anwendungsbeispiele für die tägliche Arbeit (z.B. mit jQuery)
  • Hinweise zur Performance der neuen Features
  • Einen kleinen Ausblick auf ECMAScript 6
  • Einen kompakten Anhang zum schnellen Nachschlagen

Wie gewohnt gibt es das E-Book zum Warum-Nicht-Preis von 9,99 € im Kindle-Format bei Amazon und bei Open Source Press in allen anderen denkbaren Formaten. Mehr Infos zu Thema und Inhalt auf der Webseite.

Letzte öffentliche Termine 2013

Der Jahresendspurt steht an! Die letzten vier Möglichkeiten, sich 2013 von meiner Wenigkeit etwas über HTML5, CSS3 und JavaScript erklärbären zu lassen, sind die Folgenden:

  • 19. September in Hamburg: Talk „HTML5 und Webplattform - Wer, was, warum“ auf der Mediale 2013. Erklärung, Entwirrung und Vorstellung von HTML5 und der Webplattform.
  • 7. - 9. Oktober in München: HTML5-Schulung bei der Open Source School. Mein bewährtes drei­tä­gi­ges HTML5-Standardprogramm stattet die Teilnehmer im Druckbetankungsverfahren mit so gut wie allem aus, was man zu HTML5 wissen muss. Von semantischem Markup bis hin zu Canvas-Frameworks ist alles dabei. Geboten wird ein großer Praxisanteil, kleine Arbeitsgruppen und ein Buch gibt es obendrein.
  • 10. und 11. Oktober in München: CSS3 bei der Open Source School. Mein zweitä­gi­ges CSS3-Standardprogramm katapultiert die Teilnehmer in das CSS3-Zeitalter, in dem Webfonts und Farbverläufe fließen. Auch hier steht einen großer Praxisanteil mit überschaubaren Arbeitsgruppen auf dem Plan und mindestens ein CSS3-E-Book gibt es als Bonus.
  • 13. November in Hamburg: Workshop „Neue Techniken für Responsive Design“ im Rahmen der WDC kompakt 2013. Es werden mehrere CSS3-Techniken für Responsive Layouts (z.B. Flexbox und neue Tools) vorgestellt und zum Praxiseinsatz gebracht.

Fragen zu HTML5 & Co beantwortet 11 - Main, Hgroup, HTML5-Formularvalidierung, komplexe Navigationen

Es ist mal wieder so weit: Leser fragen, der Erklärbär beantwortet Fragen zu HTML5! Üblicherweise gebe ich auch gerne Antworten zu CSS3 und JavaScript, aber da gab es diesmal keine Fragen. Wenn auch ihr etwas wissen wollt: einfach eure Frage mailen, twittern oder mich sonstwie heimsuchen!

HTML5 Shiv für <main> in IE 9 und 10?

Sollte man den HTML5 Shiv auch für den Internet Explorer 9 benutzen? Der Internet Explorer 9 kennt ja das Main-Element nicht.

Der Shiv ist für den IE9 nicht zwingend nötig, obwohl er funktionieren bzw. nicht stören würde. In den alten Internet Explorern wird der Shiv benötigt, da deren Engines nicht in der Lage sind, für sie unbekannte HTML-Tags zu parsen. Normalerweise würde man erwarten, dass ein fehlertoleranter Browser unbekannte Tags (bzw. super-neue Tags wie main) einfach hinnimmt und daraus ein generisches Element ohne Funktion erstellt. Genau das macht der IE9 glücklicherweise und damit kann man auch ohne Shiv arbeiten – da das Element von Haus aus nicht viel macht, muss man nur an zwei Stellen nachbessern. Das kann man dem Shiv überlassen oder man kann selbst Hand anlegen.

Nachbesserung 1 betrifft die Styles. Laut Spezifikaktionen sollte ein Main-Element display:block haben, was es, wenn es ein dem Browser unbekanntes Element ist, nicht hat. Als zweites sollte man auch die automatischen ARIA-Mappings, über die das Element verfügen sollte, nachrüsten. Das bedeutet laut Specs ein role="main" pro Element. Mit diesen zwei Anpassungen ist das Element dann fit für den Einsatz im IE9. Aber wie gesagt: der HTML5Shiv macht das auch, d.h. wenn man ihn verwendet, ist man bereits auf der sicheren Seite.

Warum kein hgroup?

Weshalb wurde das hgroup-Element abgeschafft?

Weil es kaum benutzt wurde! Sinn und Zweck des Elements war, Unterüberschirften vor dem Outline-Algorithmus zu verstecken (der an sich ja schon etwas schwierig mit der Realität zu vereinbaren ist), was aber kein Browser je unterstützt hat und auf den W3C-Mailinglisten hat sich auch kein Webentwickler oder eingefunden, der etwas für das Element vorgebracht hat. So wurde es dann zur Löschung vorgeschlagen.

Allerdings ist zu sagen, das das hroup-Element im Moment zumindest noch in den Specs der WHATWG auftaucht und nur im W3C-Draft schon fehlt. Richtig „weg“ ist es also noch nicht, aber die Entscheidung scheint gefallen. Ich jedenfalls würde schon mal anfangen, hgroup zu vergessen. Es macht in keinem Browser etwas, niemand scheint es zu nutzen und allen ist es egal. Also weg damit.

Und selbst wenn es etwas im Browser machen würde: nur weil ein Element in den Spezifikationen steht, heißt das noch nicht, dass man es auch benutzen muss! Dort sind genug Tags aufgeführt, die kaum jemand im Sinne von HTML5 benutzt (<s>, <u> usw.). Und das ist völlig ok.

HTML5-Formularvalidierung

Ich möchte der Frage nachgehen, inwieweit es Sinn macht die bei HTML5 integrierte Pflichtfeld-Validierung heute zu nutzen. Was spricht gegen den Einsatz von HTML5 bei der Pflichtfeld-Validierung? Wie gehe ich am besten vor wenn Javascript deaktiviert ist?

Bevor ich die eigentlichen Fragen beantworte, möchte ich kurz darauf hinweisen, dass man eigentlich die HTML5-Formularvalidierung nicht nicht benutzen kann. So wie Formulare an sich in HTML5 spezifiziert sind, ist die Validierung fest in sie eingebaut. Kein halbwegs aktueller Browser nutzt also die Validierung nicht – jedenfalls nicht, solange man sie nicht mit dem Attribut novalidate auf dem Formular-Element deaktiviert. Ansonsten gibt es noch die Möglichkeit, ausschließlich <input type="text"> und keins der neuen Validierungs-Attribute zu nutzen, aber dass die Validierungsmechanik zumindest nachschaut, ob sie aktiv werden muss, kann man nicht vorhindern. In HTML5 gehört Validierung fest zu Formularen dazu.

Was spricht gegen den Einsatz von HTML5 bei der Pflichtfeld-Validierung? Das ist recht simpel: sie funktioniert nicht in alten Browsern (IE < 10) und wenn JavaScript deaktiviert ist oder ausfällt, verwendet jeder Browser seine eigenen Styles um ungültige Felder anzuzeigen. Allerdings ist das auch das einzige Problem, funktionieren wird die Navigation auch ohne JS. Das hat sie auch jeder anderen denkbaren Lösung voraus und da man um eine serverseitige Validierung sowieso nicht herumkommt, spricht eigentlich nicht viel gegen den Einsatz von HTML5-Formularvalidierung.

Strukturierte Navigationen erlaubt?

Eine grundsätzliche Frage zum nav-Element: dürfen diese bei komplexen Navigationen auch Article- und Section-Elemente enthalten? Hier mal ein Beispiel, das meiner Problemstellung entspricht … darf man das?

Es sieht so aus als stünde dem zumindest formal nichts im Wege. Das Content Model des Nav-Elements (dritter Punkt in der grünen Box) erlaubt Sectioning Content, was grünes Licht für Article- und Section-Elemente bedeutet. Ganz am Ende des Abschnitts in den Spezifikationen heißt es beim letzten Beispiel sogar explizit A nav element doesn't have to contain a list, it can contain other kinds of content as well. Ob das dann auch sinnvoll und problemlos ist, ist eine andere Frage.

Ich würde sagen, dass man im Einzelfall testen sollte, wie Screenreader auf solche komplexen Konstruktionen reagieren und wie es allgemein mit der Usability aussieht (v.a. via Tastatur), aber laut Spezifikation spricht zumindest nichts dagegen, mit solchen Verschachtelungen zu experimentieren.

Weitere Fragen?

Eure Fragen zu HTML5, JavaScript und anderen Webtechnologien beantworte ich gerne! Einfach eine E-Mail schreiben oder Twitter bemühen und ein bisschen Geduld mit der Antwort haben. Ansonsten kann man mich natürlich auch mieten!

Aufschlag zur E-Book-Serie zu CSS3

Cover von Einstieg in CSS3 - Struktur und Standards

Ich scheitere schon seit geraumer Zeit daran, ein CSS3-Buch zu veröffentlichen. Schuld daran ist (neben meiner Person) auch die hohe Mutationsrate der neuen Spezifikationen. Es kommt mir fast noch schlimmer als bei HTML5 vor – kaum scheint etwas einigermaßen stabil zu sein, schon ändert sich wieder irgend ein Detail. Also läuft das jetzt anders. Anstelle eines dicken Papierwälzers in ferner Zukunft erscheinen die einzelnen Kapitel ab sofort als E-Books, und zwar sobald sie fertig sind. Die einzelnen Teile sind dann jeweils so aktuell wie sie sein können und weil es E-Books sind, kann man auch Updates machen, ohne dafür mit Unsummen hantieren zu müssen. Irgendwann kann man die gesammelten Einzelteile dann sicher auch in Papierform bringen, aber erst mal geht es digital los – Teil 1 ist auch bereits zu haben!

Dieser erste Teil der Serie heißt Einstieg in CSS3: Standards und Struktur (Kindle, andere Formate) und befasst sich, wie der Name vermuten lässt, mit den Hintergründen und der Geschichte von CSS3. Wer schon immer mal verstehen wollte, warum CSS3 so durchmodularisiert ist, warum vieles im modernen Webdesign so endlos mühsam erscheint und wer CSS überhaupt erfunden hat, ist hier an der richtigen Stelle. Nach der Lektüre der etwas über 40 Seiten baut man dann zwar noch keine schöneren Webseiten, aber dafür kostet dieser erste Teil mit 4,99 € auch nicht viel mehr als ein Kaffee und ein Brötchen beim Bahnhofsbäcker.

Als Teil 2 ist Schrifteinbettung und Schriftgestaltung geplant und danach würde ich mir ganz gern Layout-Techniken vornehmen. Erscheinungstermin für diese nächsten Teile ist when it's done mit Tendenz in Richtung noch irgendwann dieses Jahr. Auf css3-buch.de gibt es weitere Infos zur Serie, zu CSS3 und auch Inhaltsverzeichnisse und ähnliches stehen dort zum Download bereit.

Folgt mir!

Kauft mein Zeug!

Cover der HTML5-DVD
Infos auf html5-dvd.de, kaufen bei Amazon

Cover des HTML5-Buchs
Infos auf html5-buch.de, kaufen bei Amazon

Cover des CSS3-Buchs
Infos auf css3-buch.de, kaufen bei Amazon