Working Draft

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.

Nach der internationalen Gala letzte Woche war diesmal wieder teutonisches Steineklopfen an der Web-Front angesagt. Schepp, Hans, Rod und Peter wühlten sich in bewährter Manier durch HTML5-News und andere Neuheiten. Das ist die letzte Revision für dieses Jahr. Wir danken allen treuen Hören, wünschen ein frohes Fest und einen verschleißfreien Rutsch ins neue Jahr! [00:00:12] News HTML5-News HTML 5 wird CR, HTML 5.1 wird WD. Was das bedeutet könnt ihr in Revision 99 nachhören oder bei Peter nachlesen. Schaunotizen [00:00:54] -webkit-canvas() Neuerdings kann man in Webkit-Browsern Canvas-Elemente als Hintergrundbild-Generatoren verwenden. Wir finden das als Idee ganz nett, mögen aber eigentlich mehr die bei Mozilla verwendete Implementierung, die vielseitiger ist und auch zur Standardisierung vorgesehen ist [00:14:39] The Web We Lost Früher war alles bessser? Zumindest posutliert Anil Dash, dass in der letzten Dekade einige Dinge im Web verloren gegangen sind, um die es schade sei – Flickr-Dominanz, RSS-Feeds und Bloggerkultur z.B. Wir können dem nur sehr bedingt zustimmen, denn schließlich sind Flickr, RSS und Blogs noch immer da. Wir erkennen vor allem eine weniger nerdige Ausrichtung vieler neuer Angebote, die ihrer breiteren Zielgruppe geschuldet sind. Einwände? [00:35:12] Das <main>-Element Die Einführung des neuen <main>-Elements ist so ziemlich beschlossene Sache. Übermäßigen Unmut darüber können wir nicht mobilisieren. Peter beschreibt, wie man aus der Puristen-Perspektive das Element überflüssig finden kann, erzählt aber auch, wie er dann zur Vernunft kam (auf die gleiche Weise wie auch Bruce Lawson). Zum Ende stellen wir fest, dass man über nichts so gut streiten kann, wie über Semantik. [00:49:54] Keine Schaunotizen Dom Compatibility Table Kompatibilitätstabelle für das DOM. Ideale Ergänzung zu all den anderen Tabellen die da draußen herumschwirren. From the Front 2012 Videos Konferenzfilmchen. Schepp empfiehlt den Talk „A Happy Grain of Sand“ von Aral Balkan (wird dort demnächst online gestellt) sowie „Inventing a New World“ von Blaine Cook. Rodney ist hingegen Fan des Usability-Testing-Talks von Steve Krug

Wow, can it really be the 100th episode already? Almost 2 years of weekly updates and discussions on web development – and we’re still here. And so no one less than Paul Irish joined Hans, Kahlil, Rodney and Schepp. While our podcast is a German thing, we’re thrilled how things turned out with recording an English episode over the wire. Thank you Paul! Please take a second and tell us how you feel: Do you want more English revisions of Workingdraft, featuring international Guests? [00:00:45] News Chrome DevTools: A Sneak Peek At CSS Media Type Emulation Addy Osmani shows us how Chrome Dev Tool (Canary, at the moment) allows you to specify the media type (screen, projector, handheld, print, …) used for CSS. Firebug 1.11 is out A new version Firebug has been released, sporting a number of interesting features. Performance Timing Visualization, copy ’n‘ paste HTML chunks and observing postMessage to name a few. Schaunotizen (aka the shownotes) [00:03:40] BountySource Have an issue but neither you nor the maintainers of the project can (or want to) resolve? Set a bounty for it! BountySource let’s you define an amount (say 15$) up for grabs to anyone willing to solve your issue with an open source project. All you need to participate is a GitHub account and either PayPal or Google Wallet. Finally something that might work smoothly in Europe as well. Note that BountySource aims for the small things, backing full blown projects is (currently) better handled by pledgie et al. [00:10:53] 5 APIs to change the world We mostly agree with Alex on which APIs will have the highest impact next year. Web Components are going to be the thing, as they allow modularization, templating and more. They will not enhance how we work, they will (evenutally) change the way we create web apps. Flexbox (and the other layouting schemes) are missing from the list. We’re still eagerly awaiting their availability. The Autocomplete API (spec in development) is something that will benefit users more than developers. That and Mozilla’s Persona will hopefully put an end to all that identification and recurring data input mess that has been our internet. [00:28:12] CSS Performance Debugging Github’s CSS Performance made us reflect on tools and approaches we have to find rendering bottlenecks. Addy has written an article about Performance Optimization With Timeline Profiles. [00:38:21] display: none; | Laura Kalbag The gist of the story: »You needn’t be the first, you’ll just help if you’re the first that somebody finds.« Do not try to impress anyone. Do not assume everybody knows what you know. Simply publish what you learn. Instead of explaining things to your friends in closed channels, write a (short) blog about it. Found something new (to you)? Blog about it. Keep the knowledge flowing! [00:45:18] Keine Schaunotizen (aka the links) Embracing Touch (open in Chrome) Instant Parallax on touch devices (ab)using CSS3 Transforms. jQuery uncomment Uncomment is a handy little plugin that allows you to serve HTML-comments and only have them parsed and processed when needed. Crawly – Alexa 1x Search Engine Crawly allows you to perform regular expression matches against the sources of the Alexa 1x websites. Focal Point: Intelligent Cropping of Responsive Images Denote the focal point (interesting-content-center) of an image using CSS, allowing intelligent cropping on responsive sites Full Frontal 2012 Videos Remy has finally uploaded all the talks of this year’s Full Frontal Conference. Paul is keeping a list on delicious Callbacks Considered A Code Smell Nice recap of the various approaches to make asynchronous code maintainable. jStat Javascript statistics library – do you know the 4th qantile or what a median really is? No? Then this utility is for you. GeoLib Javascript library doing all the funky math you need for your geo location services. #webtypobuch A German book on typography on the web We Love Icon Fonts Collection of icon fonts.