Working Draft

Eigentlich haben wir alle keine Zeit, aber das ist keine Ausrede – jedenfalls nicht für Schepp, Peter und Frederic. [00:00:23] News Google and MPEG LA Agree, Free VP8 Der VP8-Codec (verwendet in WebM) wird auch in Zukunft nicht in die Nichtexistenz geklagt werden. Opera 14 Beta Der erste Opera mit Webkit. Besonders schön: Läuft anders als Chrome und Co bereits ab Android 2.3. Node.js 0.10 Neues Streams-Interface, stark verbesserte Performance und diverse Bugfixes. Schaunotizen [00:01:51] Data Compression Proxy Google bastelt einen Performance-Proxy für mobiles Surfen, vergleichbar mit Opera Turbo. Jede (nicht-HTTPS) Anfrage wird durch einen Google-Server getunnelt, der Performancetuning mit z.B. SPDY und mod_pagespeed vernimmt, bevor die Daten an den Nutzer weitergeleitet werden. Performance-Papst Schepp findet die Idee total klasse, während sich Peter fragt, ob man wirklich jeden seiner HTTP-Requests zu Google tragen möchte – viel besser wäre es doch, die Mobilfunknetze auszubauen. [00:17:35] The Good & Bad of Level 4 Media Queries Noch sind Media Queries Level 4 alles andere fertig, aber ein bisschen Spec-Exegese kann man schon betreiben. Der Artikel von Stu Cox und wir reiben uns ein wenig am Media Feature pointer, das nicht ganz durchdacht scheint. Nicht zuletzt fehlt eine Option für den Minority Report Mode. Wäre es nicht besser, wenn wir einfach weniger Annahmen über die Eingabegeräte der Nutzer machen würden? [00:27:48] http-client-hints Ilya Grigorik will, dass wir genauere Annahmen über die Endgeräte der Surfer machen können und spezifiziert einen HTTP-Header für solche Informationen. Peter fühlt sich bei sowas an die History of the browser user-agent string, Viewports und andere Flunkereien durch Browser erinnert und fragt sich, warum dieses mal alles anders sein sollte. [00:40:05] HTML-Glücksrad Timed Text Tracks Wir fabulieren ein wenig über Video-Untertitel, das WebVTT-Format, Security sowie Transloadit und andere Datei-Umwandel-Dienste. Außerdem empfehlen wir den Talk The State of HTML5 Video von Jeroen Wijering. [00:51:05] Keine Schaunotizen Finer grained control of hyphenation with CSS4 Text – Generated Content by David Storey Funktioniert sogar schon in IE 10 und Safari. Using SVG Umfassender Überblick von Chris Coyier zum Thema. Codebase Github für mehr als nur Git plus Projektverwaltung. Spenden für Tern Open-Source-JavaScript-Autocompletion kann man nicht kaufen, aber crowdfunden. Meaningful Transitions Schöne Patterns für Transitions in UIs.

Peter, Hans und Rod diskutieren Rendering Performance auf mobilen Geräten. Wie finden wir die Engpässe, was lässt sich ohne Verluste beheben und wo möchte man freiwillig Abstriche machen? Eine sehr exakte Wissenschaft, wir liefern Fakten Fakten Fakten! [00:00:11] News Internet Explorer 10 auf Windows 7 Der IE10 ist jetzt für Windows 7 zum Download verfügbar. Wer sich mit dem neusten Trident noch nicht auseinandergesetzt hat, möchte dies jetzt nachholen. Intrinsic Dimensions Wer schon immer mal ein <div> auf die Größe seines Inhaltes anpassen wollte, wird sich jetzt in Firefox und Chrome an width: fit-content; erfreuen. jQuery 2.0 beta2 Der nächste Kandidat ist da – wieder heisst es: Testet eure Plugins und Seiten. CoffeeScript 1.6.1 Jetzt auch mit Source Maps (Achtung: 1.6.0 ist kaputt) Schaunotizen [00:01:56] Mobile Browser Performance Wir diskutieren über Performance – ausgelöst von den Artikeln On Translate3D und Myth busting the HTML5 performance of transform:translate vs. top/left. Einen sehr netten Einstieg in das Thema Transforms bietet das Tutorial Manipulating content with CSS3 transforms. [00:26:10] HTML-Glücksrad autocomplete Attribut … kann nützlich sein, aber auch für (falsche) Sicherheit missbraucht werden [00:34:45] Keine Schaunotizen grunt-devtools … integriert Grunts Konsolenausgabe in die Google Chrome Developer Tools WebKit for Developers … Paul erklärt uns was WebKit eigentlich ist und dass WebKit eben nicht gleich WebKit ist. Full-text search in your browser lunr.js ist eine Feauture-bepackte Suchmaschine, die im Browser läuft. Designing Better JavaScript APIs (Video) Rod erklärt uns hier in 20 Minuten, was sein Artikel in ausführlicherem Umfang liefert.

Kahlil und Rod luden Andreas Dantz ins virtuelle Studio ein, um die letzte Internetwoche zu reflektieren. Schaunotizen [00:00:23] CSS Counter Styles CSS Counter Styles Level 3 (Working Draft) beschreibt wie man Listen (<ul> und <ol>) mit eigenen Zählerstilen versehen können werden wird. Der Futur ist leider korrekt, denn Implementationen lassen noch auf sich warten. [00:06:35] Mobile Betriebssysteme LG kauft webOS um damit seine SmartTVs zu betreiben. Ob und wann das von Palm und HP entwickelte, auf Webstandards pochende, Betriebsystem auch auf LGs SmartPhones zum Einsatz kommt, ist noch nicht so ganz klar. Mozilla Firefox OS  Startet im zweiten Quartal 2013 – mit einer Menge von Partnern. [00:14:17] HTML5-Linkelement Ian Devlin erklärt uns was das gute alte <a> denn zwischenzeitlich alles kann. Interessant ist vor allem die Möglichkeit Downloads von Resourcen des Servers, sowie der JavaScript Laufzeit des geöffneten Dokuments zu erzwingen. Auch sinnieren wir über den Sinn und Unsinn des ping Attributs. [00:27:41] jQuery Europe Conference Schön war’s beim Kaiser. JavaScript spricht man auch in den prunkvollen Hallen der Paradeiser-Esser. Viele interessante Talks, leider keine Videos. Ohne jQuery-Bezug, stellte man die CSP – Content Security Policy vor. In Chrome kann man Version 1.0 bereits testen. [00:36:34] Keine Schaunotizen grunt-parallel … erlaubt das parallele Ausführen bestimmter Aufgaben. Üblicherweise werden Tasks in Sequenz ausgeführt, was aber nicht immer Notwendig ist. Hier kann grunt-parallel für etwas mehr Geschwindigkeit sorgen. Dig Deep into CSS Gradients … ist ein toller Artikel über die Funktionsweise von Farbverläufen. CSS Tests – fonts and text … nennt @ppks zuletzt gefundene Mobile Browser Bugs.

Als lieben Gast hatten sich Christian und Hans diesmal Sebastian Golasch dazu geholt, der bereits einige Male zu Gast war und jedes mal eine Bereicherung für die Sendung ist. [00:00:22] News Adobe Edge Relow Adobe veröffentlicht ein Tool für Responsive Webdesign um Photoshop zu verdrängen. Grunt 0.4.0 veröffentlich Nach langer Entwicklungszeit ist Grunt 0.4.0 nun endlich veröffentlicht. Schaunotizen [00:01:53] asm.js Mozilla veröffentlicht asm.js, einer Untermenge von JavaScript, getrimmt auf Performance. Wir diskutieren über den Einsatzbereich von asm.js und on man es wirklich braucht. [00:15:02] UA Sniffing Pamela Fox schreibt über UA Sniffing und Fälle, bei denen es sinnvoll sein kann auf UA Sniffing zu vertrauen, anstatt Feature Detection zu nutzen. [00:25:31] Opera wechselt zu WebKit Buhuu… Die Meldung der Woche. Auch wir beteiligen uns an der Diskussion und sprechen über die Vor- und Nachteile dieses Schrittes. Als Diskussionsgrundlage bauen wir unter anderem auf Jake Archibalds Artikel auf. [00:40:45] Keine Schaunotizen Edge Conference – Videos Einige interessante Panel-Diskussionen zu verschiedensten Webthematiken. Screensharing with getUserMedia Chrome Canary unterstützt Fullscreen-Sharing. Eine Demo dazu hat Eric Bidelman zusammengezimmert. Dialogboxen und a11y Nicholas Zakas beschreibt wie man mit wenigen aria-roles und ein bisschen JavaScript Dialogboxen zugänglich macht. Distilled Hype sucht Nachwuchs Unser Co-Host Kahlil such Hilfe für sein Link-Blog Distilled Hype. Flexbox richtig gemacht Chris Coyier beschreibt, wie man Flexbox richtig nutzt – mit der alten und neuen Syntax kombiniert. Textillate Mit Textillate kann man Buchstaben und Text toll animieren. Lazy Line Painter LLP malt SVGs. Demo anschauen!

Mit Schepp, Hans, Anselm und Peter auf der Brücke dampfte Working Draft gezielt auf seine Revision 107 zu. [00:00:21] News <main>-Support in Firefox Das neue Element (siehe Revision 101) ist nach Chrome jetzt auch im Firefox gelandet. Schaunotizen [00:00:49] Ditching responsive design GoCardless hat für sein letztes Redesign ein unresponsive Design gewählt. Kann man so etwas heutzutage überhaupt machen? Die Firma argumentiert diesen Schritt mit zu wenig Mobile-Usern und Zeit- sowie Geldersparnis beim Bau eines unresponsive Designs. Schepp kann die Argumentation nachvollziehen, Anselm und Peter eher nicht – sie halten den Aufwand für ein Mimimum an responsiveness für so gering, dass es ihrer Meinung nach keinen validen Grund gibt, es nicht zu machen. Interessant scheint die Existenz einer „Unresponsive-Szene“ auf Twitter, die es genau wie GoCardless sieht. [00:23:51] Bericht vom Web Platform Doc Sprint Berlin Schepp, Hans und Anselm berichten vom Web Platform Doc Sprint Berlin, auf dem sie letzte Woche viel für webplatform.org geschrieben haben. Schepp schrieb Tutorials über IE-Handling, Hans dokumentierte box-sizing, Anselm unter anderem text-overflow. Einstimmiges Urteil: gut organisierte Veranstaltung und durch das Schreiben der Dokumentation gewinnt selbst der größte Nerd noch hier und da neue Erkenntnisse. [00:41:00] Keine Schaunotizen DevTools: Visually Re-engineering CSS For Faster Paint Times Addy Osmani erklärt, wie man mit den Webkit-Devtools zu lange Paint-Zeiten erkennt. Front-Trends 2013 Warschau ist schön und diese Konferenz ist es auch. BLOKK font Webfont für Wireframes. Extensionizr – boilerplate for your chrome extension Nomen est omen. CSS Regions Polyfill Im Gegensatz zu anderen Polyfills entspricht dieser der aktuellen Regions-Syntax.

Neue Revision, neues Glück! Diesmal als Glücksfeen am Start: Kahli, Hans und als Überraschungsgast der feine Herr Hemberger. [00:00:29] News Sublime Text 3 Beta Der guteste Texteditor von allen erhält eine dritte Version. Flight Neues komponentenbasiertes Framework aus der Feder Twitters. Schaunotizen [00:01:49] modern.IE – Testing made easier in Internet Explorer Das Internet-Explorer-Team poliert weiter seinen ramponierten Ruf auf und bietet eine Webseite mit allerlei hilfreichen Ressourcen rund um Qualitätssicherung an. Besonders hilfreich: 3 Monate kostenloser Browserstack-Zugang. [00:17:35] Balancing Text for better Readability Adobe stellt einen Vorschlag für eine neue CSS-Eigenschaft vor. Mit text-wrap: balance soll es möglich sein bei zentriertem Text ein ausgeglicheneres Schriftbild zu erzeugen. [00:29:38] Should You „Use Strict“ in Your Production JavaScript? Der in ECMAScript 5 eingeführte Strict Mode verändert das Verhalten von JavaScript im Browser recht tiefgreifend und Michael Mathews fragt sich, ob man das im Produktiveinsatz wirklich haben will. [00:42:44] Keine Schaunotizen Big JS-Compatibility-Table Behauptet, es würde sich um JS drehen, enthält aber vor allem DOM. Und ist daher nützlich. js-testing-boilerplates Schön einfache Boilerplates für Unit Tests für Jasmine, Mocha und QUnit. Hilft vielleicht denen, die sonst immer zu faul sind, sich damit zu befassen. remoteStorage – An open protocol for per-user storage Jan-Christoph Borchardt erklärt‘s im Video. HTML5-Apps mit Firefox OS Chris Heilmann erzählt von der Entwicklung von und der Toolchain für Apps in Firefox OS. hint.css – styled tooltips without javascript JavaScript ist etwas für Leute, die kein CSS können. CSSConf Nomen est omen. Thema Das Chrome-Team berichtet von Fortschritten in Sachen Web RTC: Browser A kann Browser B anrufen!

Schepp und Peter holten sich Verstärkung bei Sebastian Golasch und beackerten mit ihm zwei Themen aus dem Bereich der Frontend-Performance. Dazu kommt die übliche Ladung Links. Schaunotizen [00:00:17] CSS-Performance Angestachelt von der Frage how much CSS should you have mäandern wir quer durch den Problemkomplex CSS-Performance. Peter und Sebastian grillten Performance-Papst Schepp unter anderem mit Fragen zum Einfluss vom Browsercache (groß) und Selektorperformance (vernachlässigbar) und erfahren, ob Sprites oder das Inlining von Bildern besser sind (Inlining gewinnt). Wir befinden die CSS Profiler von Dragonfly und Chrome für gut, CSS Lint ob zu strenger Regeln für weniger gut. Das DOM zu entrümpeln erscheint da schon sinnvoller. Schepp lobt das DOM Monster und verwendet Web Storage als Cache, Peter will durch CSS-Pseudoelemente sein DOM verschlanken. [00:24:41] Web Workers Eine Einführung zum Thema Web Workers scollte an uns vorbei und verleitete zu der Frage, wozu man sowas denn brauchen könnte. HTML5-Erklärbär Peter nennt als Use Case unter anderem JavaScript-Gesichtserkennung und erläutert die Vorzüge des structured clone algorithm. Darauf fallen uns einige weitere Anwendungsmöglichkeiten ein, die nur durch mangelnde Browserunterstützung eingeschränkt werden. [00:49:14] Keine Schaunotizen Writing Testable Frontend Javascript Das Wissen, das andere in einem ganzen Buch ausbreiten ist hier kompakt zusammengefasst. Paymill – The Payment Engineers Verspricht Online-Payment ohne die ganz großen Schmerzen. A11Y Project Links, Artikel und Checklisten zum Thema Accessibility. Surface – A building block for web-based text editors. A building block for web-based text editors.

Nach der Spezial-Folge letzte Woche sind wir diesmal wieder mit vollem Programm am Start. Hans, Schepp und Peter meldeten sich zum Dienst. Als Gast war diesmal Andre Jay Meissner dabei, der uns über Open Device Labs und Docsprints berichtete. [00:01:45] News jQuery-News Version 1.9 ist raus und es gibt neuerdings ein ordentliches Plugin-Repository Schaunotizen [00:03:00] Scoped Stylesheets Das bereits in Revision 18 besprochene Feature gibt es jetzt in Chrome. Konsens über dieses Feature gibt es bei uns aber nicht. Während Hans sich darauf freut, unkt Peter den Aufstieg von <font>-Tags 2.0 herbei. Was meint ihr? Wird die Welt verantwortungsvoll mit Scoped Style Sheets umgehen können? [00:17:52] The Harsh Truth about HTML5 Structure Elements (Teil 1, Teil 2, Teil 3) Luke Stevens rechnet mit den neuen HTML5-Elementen ab. Schwammige Spezifikationen faselen viel Theorie, die in der Praxis selten funktioniert und wenn sie funktioniert, bringt sie nichts. Also Finger weg? Wir sehen das etwas differenzierter, auch wenn sich unsere Meinungen teilweise im Laufe der letzten Jahre und Monate geändert haben. [00:39:32] opendevicelab.com Premiere bei Working Draft: zum ersten Mal launcht während der Sendung live eine Seite. Opendevicelab.com ist ein Portal for Open Device Labs, Sammlungen von für jedermann nutzbaren Testgeräten, insbesondere Smartphones. Der Initiator Andre Jay Meissner erklärt uns die Hintergründe von Opendevicelab.com und spekuliert mit uns ein wenig über internetfähige Kühlschränke. Fragen zum Thema (Open Device Labs, nicht internetfähige Kühlschränke) könnt ihr an @odl richten. [01:03:12] Web Platform Doc Sprint Europe Webplatform.org soll das neue go-to-Wiki für alle Webentwickler sein, die nach Dokumentation suchen. Und der Inhalt? Der wird zum Beispiel in Doc Sprints produziert, wenn man sich zusammensetzt und gemeinsam ein paar Stunden oder Tage Content bolzt. Andre Jay Meissner hat auch hier seine Finger im Spiel, erläutert und Ablauf und Hintergründe der Docsprints und lädt euch natürlich herzlich ein, beim Web Platform Doc Sprint Berlin am 8. und 9. Februar 2013 dabei zu sein! Anmelden könnt Ihr euch auf Eventbrite. [01:21:43] Keine Schaunotizen jQuery Image Zoom Plugin Zoom-Plugin für jQuery. Nicht neu, aber ganz hübsch. Understanding the CSS Clip Property clip gibt es schön seit Äonen, aber die wenigsten wissen wirklich davon. Dieser Artikel hilft. CSS-Animations.js Bessere API für die Modifikation von Keyframe-Sets via JS. Monads and Gonads The Crock spricht zu uns! Z-Index issues Z-Index, Stacking Context … WTF? Was Peter mal kurz anriss ist hier in epischer Breite erklärt. Empfehlenswert! An Introduction to Source Maps Wir sind uns einig: das wird man in Zukunft häufiger brauchen. Understand the Favicon Über Favicons und die Probleme, die moderne (!) Browser mit ihnen haben. Learning HTML & CSS Schönes Einsteiger-Material. Nicht für euch, aber für eure Praktikanten, Azubis und Geschwister.

Trotz intensiver Suche und voller Besatzung haben wir dieses mal kein einziges Thema gefunden, das eine ausführliche Besprechung verdient hätte. Deshalb ist die Nummer 103 die kürzeste Revision seit Ende des Mesozoikums. Wir entschuldigen uns und versprechen schon mal, dass das in der nächsten Revision ganz anders sein wird. [00:00:15] News Firefox 18 Einige wenige neue Spielzeuge für Entwickler und schnelleres JavaScript werden geboten. Chrome Beta-Channel für Android Unter anderem mit besseren Devtools und Web GL. [00:01:25] Keine Schaunotizen Lightboxes suck for small screens Conditional Lightboxes für mobile Anwendungen. Antwort Responsive E-Mail-Templates. Introduction to Persona Tutorial für den Einsatz von Persona. End to End JavaScript Video Streaming Ein krimineller Hack, aber wenn es funktioniert … Gmail and the GC Wieder eine Geschichte von früher, diesmal über die Jagdt auf IE-Bugs anno 2006 *grusel*

Alles beim alten im neuen Jahr: Wie immer kämpften sich Hans, Schepp, Rodney und Peter durch die Themen der vergangenen paar Zeiteinheiten. News gab es keine, dafür um so mehr Themen und Links. Schaunotizen [00:00:22] HTML5 Bones Das Projekt nennt sich selbst „the template that goes back to basics“, doch Hans, der als einer der Maintainer des vergleichbaren HTML5 Boilerplate zufällig Experte auf dem Gebiet ist, sieht das differenzierter: HTML5 Bones hat weniger Libraries dabei, liefert aber dafür mehr Markup-Vorlage. Was nehmen? Geschmackssache. Schepp hat ein eigenes Template, Peter und Rodney haben gar keins. Weitere Themen: das Header-Element und WAI-ARIA. [00:17:06] Progressive jpegs: a new best practice Es stellt sich heraus, das progressive JPEGs nicht nur (in vielen Browsern) gefühlt schneller laden, sondern tatsächlich auch kleiner sind. Warum benutzt die dann kaum jemand? Wir spekulieren wild und werfen ganz nebenbei unsere Terminologe ein bisschen durcheinander. Ist aber natürlich alles nur für die Show. [00:27:50] JS Developer Survey (Link broken) DailyJS hat eine Umfrage (Ergebnisse als PDF (Link Broken)) unter JavaScript-Entwicklern gemacht – machen wir also auch, allerdings nur unter uns. Ergebnis: Außer Peter und Rodney (für CLI-Tools) ist Node.js eher uninteressant, selbst mit dem Convincing the boss guide. Rodney mag kein CoffeeScript. Schepp meint, mein müsste es mit den Unit Tests nicht übertreiben. Selenium finden alle auf die eine oder andere Weise schrecklich. Hans und Peter verwetten eine Kiste Bier auf die Marktdurchdringung von ES6. Edit 17.01.2017: Alternative Links: whoishostingthis.com/resources/javascript/ generalassemb.ly/coding/full-stack-web-development [00:56:06] Starting an Open Source Project Nicholas C. Zakas schreibt einen umfassenden Guide über das Management von Open-Source-Projekten. Während Rodney in die gleiche Kerbe schlägt (gern auch in Text) sieht Peter das ganze sehr viel lockerer. Motto: lieber eine spartanische Existenz auf Github als proprietäres Verfaulen auf der heimischen Festplatte. [01:11:59] Keine Schaunotizen Why moving elements with translate() is better than pos:abs top/left Paul Irish erklärt die Performance-Vorzüge von 2D-Transforms im Deatil. Alles toll und richtig was er sagt, aber obacht: es gibt Nebenwirkungen Web Browser Compatibility Tables Falls ihr noch mehr Kompatibilitätstabellen haben wolltet: da sind mehr als genug. Socrates Online Markdown Editor Realtime-Online-Markdown-Fiddle. Giving Content Priority with CSS3 Grid Layout Grid Layout funktioniert zur Zeit nur im IE 10, ist hier aber besonders schön erklärt. FineUploader Fancy File-Upload mit modernen Mitteln. The Future of Javascript – a CoffeeScript like workflow Der Doktor über ES6-Transpiler. Interactive Guide to Web Typography Der Name ist Programm. Top 20 Web Dev Talks of 2012 Exquisite Auswahl von Konferenz-Highlights 2012. When I first heard the name “Safari” Geschichten rund um die Historie von Safari. Teil 1, Teil 2, Teil 3 Web Platform Doc Sprint Berlin Wenn ihr W3Schools einen reinwürgen wollt, kommt Anfang Februar nach Berlin! Wir sind auch dabei.