Working Draft

Das 150er-Jubiläum geriet aufgrund von Themen- und Personalmangel sowie leichter Verpestung seitens Peters etwas kurz. Da konnte auch der eigentlich sehr motivierte Schepp nicht mehr viel ausrichten. [00:00:37] News CSS-Variablen im Firefox In der endgültigen Standard-Fassung. [00:01:31] Glücksrad Das colgroup-Element Wir quasseln etwas über das unterbewertete colgroup-Element und über die ähnlich unterbewerteten col-, caption- und tbody-Elemente. Durch CSS3-Selektoren wie die nth-child-Pseudoklasse erachten wir colgroup und col für weitgehend überflüssig und anstelle von caption sollte man in der HTML5-Ära wohl auch besser zum figure-Element greifen. Und auch über den Wechsel von Selfhtml zu developers.whatwg.org kann man mal nachdenken. Zum Schluss ranten wir noch in guter Tradition etwas über Mobile-Browser. [00:14:01] Keine Schaunotizen What You May Not Know About the Z-Index Property Nicht-offensichtliches zum Z-Index. jquery.adaptive-backgrounds.js A jQuery plugin for extracting dominant colors from images and applying it to its parent. Understanding the Real-World Performance of your Web Application Across IE11 and Other Browsers Im Prinzip ein Tutorial für die verschiedenen Performance-APIs in IE11 und einigen anderen Browsern. JavaScript Promises – There and back again Jake Archibald erklärt alles was es zum Thema Promises zu wissen gibt. hoodie-plugin-angularjs Verheiratet Hoodie mit AngularJS.

Hans und Stefan luden sich zu dieser Revision Gerrit von Aaken ein, deutsches Podcast-Urgestein und Meister der Webtypografie. Schaunotizen [00:02:44] Die Toolchain-Welt aus Designersicht Grunt, Yeoman, Jekyll, Travis und co. in allen Ehren, oft braucht man Tooling an Ort und Stelle. Gerrit erzählt uns von seinem Einstieg ins Tooling mit Codekit und wir philosophieren etwas über die Toolchain-Welten, in denen wir uns bewegen. [00:18:52] Wissenswertes zum Thema WebFonts In Anlehnung an die Hörerfrage aus einer früheren Revision graben wir das Thema Webfonts und vor allem Webfont Hosting-Services aus. Gerrit erzählt von den unumstrittenen Vorteilen, die ein Fremdhosting bieten kann. [00:38:22] Offline First vs. Progressive Enhancement. Unvereinbar? Offline First! Zuvor bei Workingdraft, dann bei A List Apart. Doch beisst sich der Gedanke nicht mit den Grundlagen des Progressive Enhancements? Und was gilt jetzt eigentlich wirklich? Mobile First? Desktop First? Offline First? Coffee First? Wir nehmen den unumstrittenen Paradigmen ein wenig Wind aus den Segeln. [00:51:00] Keine Schaunotizen Share Grunt Configuration Hans beschreibt, wie man seine Grunt tasks super versionierbar macht. Phantomas Webperformance Metriken via PhantomJS unter Node. How the browser preloader makes pages load faster Bei der Vielzahl an unterschiedlichen prefetch Methoden der Browser verwirrt? Dieser Artikel gibt Aufschluss. Android Chrome Dev Tools Chrome am Desktop und Chrome auf Android. Ein Gespann wie es im Buche steht. Welche neuen Möglichkeiten es gibt, Chrome auf Android auf eurem Desktop zu debuggen, findet ihr hier.. Have I been PWNED? Sind eure Mailadressen in den großen Sicherheitslückenoffenbarungen der letzten Monate dabei gewesen? Hier könnt ihr es ausprobieren. Front-end development quiz Bei einer durchschnittlichen Antwortgenauigkeit von 53% ist eins sicher: Knackig und nichts für Anfänger

Die Not macht erfinderisch: Aus akutem Mangel an Themen zauberten Schepp, Peter und Stefan eine sehr JavaScript-lastige Revision aus dem Hut, die sich mit brandneuen bzw. noch nicht so geläufigen Technologien auseinandersetzt: Schaunotizen [00:00:26] DOM Mutation Events & Mutation Observers Bei seinen Arbeiten am object-fit Polyfill mit Anselm stieß Schepp auf die (älteren, mittlerweile obsoleten) DOM Mutation Events bzw. die (neueren, flotteren) Mutation Observer, mit denen sich Änderungen an DOM Knoten ab IE9 fein überwachen lassen. Schepp erzählt von seinen Erfahrungen und nennt Anwendungsmöglichkeiten, und verrät auch wie man rein theoretisch im alten IE8 etwas ähnliches nutzen könnte. [00:19:09] ECMAScript 6: Generators Aus dem Webtechnologienlabor des Erklärbärs kommt ein feiner Artikel zu den neuen Generator Funktionen, die mit ECMAScript 6 spruchreif werden, und in Chrome via Flag und den Nightly Builds von Firefox sogar schon eingesetzt werden können. Peter erklärt Syntax und Funktionsweise und gibt einen Anwendungsfall an, mit dem man der Callback-Hölle entfliehen und ins asynchrone Nirvana eintreten kann. Das Schöne: Mit ES6 auf ES3 Transpilern wie Traceur und dem dazu passenden Grunt task lässt sich das ganze sogar heute schon einsetzen! [00:42:31] Keine Schaunotizen Chrome Dev Summit: Service Worker Ab 1:05:00 gibt’s einen tollen Ausblick auf die kommende Service Worker API. Responsive Comments Responsive Inhalte (wie z.B.: Bilder) ressourcenschonend in Kommentare verpacken und mit dieser JavaScript Bibliothek auslesen. noUISlider jQuery Plugins seien passé? Nicht wenn man so ein sauber implementiertes und sogar auf Touchgeräten absolut funktionierendes Sliding Control vorgesetzt bekommt. Unicode in Fonts Wer braucht denn gleich die Iconfont, wenn man mit Unicode Characters auch seine Herzchen bekommt. Diese Liste enthält alle Details. LocalForage Auf die IndexedDB mit der aus localStorage bekannten API zugreifen. LocalForage von Mozilla macht das möglich. Advent, Advent … Die besinnlichste Zeit des Jahres wäre nicht dasselbe ohne die beliebten Advent(s)kalender von 24 ways, Perfplanet und natürlich den Webkrauts. Gerade bei letzterem empfehlen wir Frederic Hembergers HTTP Header Artikel.

Stefan, Hans und Schepp luden sich diesmal Christoph Rumpel aus dem schönen Wien ein. Und darum ging es: Schaunotizen [00:01:29] INIT INIT ist ein Frontend-Boilerplate aus Hans‘ Feder, das zunächst voll auf seine Bedürfnisse hin zugeschnitten gestartet war. Im Laufe der Zeit gesellten sich allerlei Contributions anderer Leute hinzu, so dass das Paket ab Stand heute zu einer ansehnlichen 1.0er-Version herangewachsen ist. [00:17:57] Know when to CDN Wir nahmen den KendoUI-Artikel zum Anlass uns nochmal das Thema CDNs vorzunehmen: Welche Typen von CDNs gibt es? Wann ist der Einsatz von CDNs angesagt? Wann von Nachteil? [00:40:48] Laravel Das Laravel Framework, mittlerweile in Version 4 vorliegend, erhebt den Anspruch, PHP eleganten und ausdrucksstarken Code abzutrotzen. Und das gelingt ihm auch. Christoph erzählt uns wie das funktioniert. [00:57:01] Keine Schaunotizen uncss Mit Grunt und uncss lässt sich ganz hervorragend überflüssiges CSS aus aufgeblähten Stylesheets entfernen. object-fit Polyfill Wer schon immer mal mit der CSS-Eigenschaft object-fit herumhantieren wollte, dem könnte dieser Polyfill gefallen. Die Google Page Speed Insights um UX-Hinweise ergänzt Mit einem angehängten GET-Parameter &ux=1 lassen sich den Page Speed Insights auch User Experience Hinweise zur untersuchten Seite entlocken. pa11y pa11y erlaubt ein automatisiertes Testing einer Seite gegen verschiedene Accessibility-Kriterien. DPLOY DPLOY ist ein Node-basiertes Script, das Änderungen in einem Git-Repository auf einem (S)FTP-Server nachvollzieht. 60fps scrolling using pointer-events: none Hovereffekte führen beim Scrollen auf Geräten mit auf dem Bildschirm stehendem Mauszeiger zu versehentlichen „Paint Storms“. Diese Technik kann sie verhindern. Kate Kiefer Lee: Voice and tone Kate Kiefer Lee von Mailchimp gibt wertvolle Einblicke darin, wie man optimal für seine Zielgruppe und einen bestimmten Bereich seiner Seite textet. Als Guide liegt das Ganze zudem unter der Adresse voiceandtone.com für alle zum Nachschlagen. Chrome Extension: Clockwork Mit Clockwork lassen sich Laravel-interne Metriken nach vorne in die Chrome Devtools herausgeben. Chrome Extension: JSON Formatter Der JSON Formatter sorgt für eine deutlich angenehmere Handhabbarkeit von JSON-Objekten in den Chrome Devtools. Laravel Meetup Vienna Wer in der Gegen um Wien herum lebt und mehr über das Laravel-Framework erfahren möchte, dem sei das Laravel Meetup Vienna sehr ans Herz gelegt!

Wenn es keine Themen gibt, macht man sich einfach welche. So luden Schepp, Peter und Stefan kurzerhand den Anselm ein und sprachen über Responsive Images (Anselm ist zufällig Experte auf dem Gebiet) sowie Verträge und Geschäftspraktiken im Webentwickler-Alltag. Schaunotizen [00:00:20] Responsive Images Anselm ist seit Anbeginn der Zeiten mit den Thema Responsive Images befasst und versucht, einen Überblick über die aktuelle Situation zu geben. Es gibt viele Vorschläge (srcset, src-n, <picture>) die von verschiedenen Parteien aus verschiedenen Gründen abgelehnt werden. Andere Ansätze wären ein responsives Bildformat (das wir für sehr schwer einführbar halten; siehe WebP) und JavaScript-Gehacke (das wir für sehr unzureichend halten). Am liebste hätten wir <picture>, müssen uns aber wohl für den Moment mit Polyfills oder komplizierten Libraries begnügen. Und zeitnahe Besserung ist nicht wirklich in Sicht … [00:32:59] Verträge und Geschäftspraktiken Angeregt durch die bei Github eingestellte Vertrags-Vorlage von Harry Roberts geben wir ein paar Tipps aus diesem Bereich zum besten. Wir sprechen unter anderem über Vorauszahlungen und Verzug Mitwirkungspflichten, Projektänderungen und -abbruch Copyright und Open Source Zeitplanung und Aufwandseinschätzung Zum Abschluss geben wir alle jeweils einen Tipp zum besten, von dem wir glauben, dass ihn jeder befolgen sollte. Falls ihr weitere Vorschläge habt: ab in die Kommentare! [01:11:12] Keine Schaunotizen Setting Up your dev machine with dotfiles Intro für alle, die das Themas Dotfiles bisher nur aus sicherer Distanz beobachtet haben. An Introduction To DOM Events Epische Detail-Einführung in das Thema DOM-Events. Donau Tech Radio Fast wie Working Draft, nur für das Backend. Web Development Reading List Anselms Newsletter/Linkschleuder, neuerdings sogar mit Newsfeed!

Eine weitere Sendung mit Besonderheiten und tollen Gästen: Kirby-Papa Bastian Allgeier und Hoodie-Mitentwickler Alex Feyerke waren diesmal mit von der Partie. [00:01:45] News IE11 für Windows 7 Den Internet Explorer 11 gibt es nun auch für Windows 7. Schaunotizen [00:02:09] Grand Decentral Station Unser Gast Bastian erzählt zu seinem neuen Projekt Grand Decentral Station, über das er auf der border:none sprach, bei dem es darum geht ein besseres, freies Web zu etablieren. Die Idee spielt im gleiche Spektrum wie Aral Balkans Quadranten und Projekt Prometheus und hat als These, dass das Netz zwischen Zentralisierung und Dezentralisierung oszilliert. Darauf kam Bastian über seine Arbeit an Zootool, bei dem er viel Verantwortung für die Daten Dritter hat. Mehr zum Thema gibt es im Starting Point zu GDS zu lesen. [00:30:13] Hood.ie Der zweite Gast, Alex, erklärt das Open Source Projekt Hoodie: Eine Library für schnell gebaute Data-Driven-Webapps, die komplett im Front-end geschrieben werden und den Ansatz Offline-First verfolgen. Peters erste Versuche mit Hoodie waren ziemlich schnell erfolgreich und Alex beschreibt, wie sie eine komplette Invoicing App in einem Samstags-Hack geschrieben haben. Und nicht nur Hoodies Gegenwart ist interessant, sondern auch die Zukunft: geplant ist Sharing/Public Data, Payments und einiges mehr. [00:56:00] Keine Schaunotizen CSS Shapes Ein Rundum-Schlag zum Thema CSS Shapes. cite and blockquote – reloaded Mit HTML5 bekommt das Zitieren in Markup eine ganz neue Bedeutung. Alle Infos dazu haben die HTML5 Doktoren. Icon fonts, unicode ranges, and IE8’s compatibility mode Jeremy Keith setzt sich mit dem Thema Unicode Ranges für Icons näher auseinander. Why We Need Responsive Images: Part Deux Noch mehr Gründe, warum wir Responsive Images brauchen.

Diese Woche war mal wieder ein Gast im Working Draft dabei: Sven Wolfermann gab sich die Ehre ein wenig über seine Projekte und Erfahrungen mit Responsive Images und vielem mehr Preis zu geben. [00:01:09] News 3 Jahre Working Draft! Uns gibt es drei Jahre, und wir sind cool. Danke an Mama! Firefox 25 veröffentlicht Firefox 25 für Entwickler liest sich ziemlich interessant. Cisco’s H.264 Cisco stellt seinen H.264 Codec für alle kostenfrei zur Verfügung. Somit wird H.264 der neue Video-Standard im Web werden. Android 4.4 KitKat Chrome wird der neue Standard Brower für alle Android Geräte und vieles mehr. Schaunotizen [00:05:38] Responsive Bilder und RESS Mit Sven haben wir einen guten Entwickler zu Gast, der im Bereich Responsive Bilder auf einen großen Erfahrungsschatz zurück greift. Gemeinsam besprechen wir BBCs Imager.js, fleximg, ReSRC und den generellen Ansatz der server-seitigen Implementierung von Responsive Images an. Svens Slidedeck zum Thema RESS bietet eine gute Grundlage für diese Diskussion, durch die wir schließlich auf das Thema Mobile Performance kommen. [00:37:06] Hörerfrage: Welche FTP/SFTP/SCP-Clients nutzen wir so? Aufgrund eine Hörerfrage sprechen wir über die Tools, die wir nutzen, um Ding irgendwo hoch zu laden. Einige FTP Clients, die genannt werden sind CyberDuck und Transmit. Allerdings schweifen wir etwas ab und besprechen andere Deployment Strategien für Websites, z.B. erwähnen wir deployhq.com. [00:47:20] Keine Schaunotizen Conditioner.js Laden und löschen von bestimmten JavaScript Modulen mittels einer Bibliothek. The new Kellum method Scroll Kellum beschreib seine neue Methode für Image Replacement, vor allem im Bezug auf Icons. TrifleJS Ein Headless Internet Explorer für Windows (als Pendant zu PhantomJS).

Mit fast voller Stammbesatzung (Schepp, Stefan, Hans und Peter) stellten wir uns den CSS-Themen der Woche und nahmen uns auch eine Hörerfrage vor. [00:00:12] News LESSCSS 1.5 Totgesagte bringen mehr neue Versionen raus. Jetzt mit Source Maps! Schaunotizen [00:00:40] CSS best practices Artikel über Cargo Cult CSS und eine Herangehensweise mit vielen Klassen laden zur Diskussion über CSS best practices ein. Wir sind nicht die einzigen, die beide postulierten Methoden etwas krass finden. Konventionen und Systeme schön und gut, aber SMACSS, BEM, OOCSS, und Konsorten scheinen uns in ihrer Gesamtheit (Stefan findet BEM zumindest in Teilen gut) dann doch Probleme lösen zu wollen, die mit CSS allein nicht zu bewältigen sind. Wir sind uns einig, dass sehr viele Probleme einfach aus der Welt zu schaffen wären, wenn man nur einen Präprozessor benutzen würde. [00:19:11] Introducing layout boundaries Der Summus Pontifex Ecclesiae Performansis erklärt, wie (nach den Informationen von Wilson Page) bestimmte CSS-Eigenschaften genutzt werden können, um die Auswirkungen von Reflows (layout thrashing) auf Teilbereiche der Webseite zu beschränken. Des weiteren regen wir uns darüber auf, dass es nur in Chrome (und neuerdings im IE11) Devtools gibt, die die Diagnose solcher Probleme/Features erlauben und reden über die Performance-Sünder CSS-Gradients, Box-Shadow und Border-Radius. Schepps Tipp, in Mobile-Media-Queries solcherlei Spielkram auszuschalten (z.B. per Präprozessor-Mixin) findet großen Anklang. [00:28:57] Batching image insertion Sie kennen das: sie wollen über 9000 Bildelemente mit Data-URLs einfügen und plötzlich ruckelt der Browser. Wilson Page hat eine Technik bzw. mit fastdom eine JS-Library ausgegraben, mit der sich dieses Problem in den Griff bekommen lässt. Auch Performance-Papst Schepp und sein treuer Kardinal Stefan schwören drauf. [00:47:59] Hörerfrage: Wie geht ihr vor, wenn ihr ohne Designer arbeiten müsst/dürft? Peter bruteforced mangels Designtalent seine Webdesigns mit viel Zeit und natürlich im Browser. Ansonsten finden wir Webdesigner doch ganz praktisch (vor allem wenn sie zur entspannten Zusammenarbeit bereit sind) und fabulieren ein bisschen über Transitions und Hover-States (die manch ein Designer gern vergisst), Browserdesign versus Photoshop, Flash und Hitler. [00:50:08] Glücksrad Das img-Element Zum img-Element fällt uns nicht viel Intelligentes oder gar spannendes ein und so reden wir stattdessen über den Coolness-Faktor von Image Maps. Das crossorigin-Attribut klingt zwar interessant, aber so richtig viel Plan haben wir davon auch nicht. Mehr Plan und Verwendung hätten wir da schon von und für die lazyload und postpone-Attribute aus der Resource-Priorities-Spec, deren flächendeckende Unterstützung allerdings noch auf sich warten lässt. [00:56:28] Keine Schaunotizen Snap.svg und BonsaiJS SVG-Grafiklibraries. 1. Kasseler Web Montag 18. November, 19:00 Uhr. Automating Front-end Workflow Episches Slide Deck von Addy Osmani. localtunnel Schnell eine Web-URL für ein lokales Projekt anlegen.

Es herrscht Saure-Gurken-Zeit und die Themenliste war gähnend leer. Zum Glück konnte die Hörerschaft Hans, Peter und Stefan mit zwei Fragen gerade noch davon abhalten, eine Null-Minuten-Revision zu fabrizieren. Schaunotizen [00:00:14] Hörerfrage: Wie nutzt ihr Webfonts? Die Gretchenfrage spitzt sich auf die Entscheidung zwischen Fonthostern und Selfhosting zu. Hans macht gewzungenermaßen manche Projekte mit Typekit, obwohl er die Einbußen an Kontrolle und Performance nicht schätzt. Stefan leidet sehr unter Lizenzproblemen, weil es viele Fonts entweder gar nicht als Webfonts oder nur mit Mondpreisen und schlimmen Lizenzbedingungen von Fonts.com gibt. Ersatz-Fonts sind da oft die beste Lösung. Für die Suche nach dem richtigen Font-Anbieter empfehlen wir das Webtypobuch von Gerrit van Aaken. [00:17:12] Hörerfrage: Mit welchen Entwicklungsumgebungen arbeitet ihr? Wie fast die gesamte Web-Welt scheinen wir dem Sublime-Text-Virus anheim gefallen zu sein. Der Editor ist schnell, schön, auf jeder Plattform verfügbar, preiswert und allgemein unsere erste Wahl. Einigkeit herrscht ebenfalls darüber, dass auf Platz zwei WebStorm zu verorten ist, was mehr eine IDE als ein Editor, aber ebenfalls sehr tauglich ist (jedenfalls verglichen mit Aptana, über das Stefan und Peter Gruselgeschichten erzählen). Kein Gespräch über Sublime Text kommt ohne Plugin-, Theme- und Tricktipps aus uns so reden wir auch über Emmet (Früher Zen Coding), das Multicursor-Feature, den Cloud-Sync-Tipp von Peter, Tern, DocBlockr, Origami, Modific, JSHint und andere Linter für ST, EditorConfig (und das ST-Plugin) sowie das Soda-Theme. [00:46:00] Glücksrad Standardstyles für Elemente Trotzdem die HTML5-Specs vorschreiben, wie Elemente standardmäßig auszusehen haben, reden wir trotzdem über Reset-Stylesheets, normalize.css, HTML5 Boilerplate, Init und das Search-Input. [00:55:40] Keine Schaunotizen SirPepe/Unsync Kleine JS-Library von Peter. learn-travis Ein reich bebildertes Travis-Tutorial.

Hans, Stefan und Peter luden sich dieses Mal Ole Michaelis (@codestars) ein, um sich zum Thema DevOps erleuchten zu lassen. Ole arbeitet tagsüber bei Jimdo, organisiert des Nachts Konferenzen wie So Coded und erzählt viel über DevOps. Schaunotizen [00:00:57] DevOps Ole definiert DevOps als eine Mischung aus dem Dasein eines (Backend-) Developers und den Aufgaben einer Operations-Abteilung (Deployment, Metering, Infrastruktur). Er versucht dabei vor allem, seinen Team in die Lage zu versetzen, selbst Operations-Aufgaben zu übernehmen oder dafür die Extra-Abteilung zu brauchen. Dem schließt sich eoine Debatte über de Rollenverteilung im Team an, bei der wir über den Bus-Faktor, Continuous Integration und SaaS philosophieren. Vor allem treibt uns die Frage um: was passiert denn wenn Amazon und/oder Github mal down sind (was im Einzelfall ja schon mal vorkommt). Auch Code Ownership und die Rechtslage, wenn Code ins Ausland wandert, sind interessante Probleme. Außerdem erwähnen wir: http://jenkins-ci.org/ und https://travis-ci.org/ http://puppetlabs.com/ und http://www.opscode.com/chef/ https://npmjs.org/ und http://bower.io/ [00:22:40] Statische Seiten Nachdem wir die ganze Revision 138 über CMS geredet haben wird es auch mal Zeit die Gegenseite, d.h. statisches HTML zu beleuchten. Außerdem baut Ole ohnehin gerade etwas mit Jekyll. Peter erzählt Gruselstory von Padawanen, deren Webseite gehackt wurde während er eine Schulung gab und dass er seither CMS aus Sicherheitsgründen am liebsten nie wieder anfassen würde. Das Problem ist nur: wie macht man dann Nutzerinteraktion (reicht Disqus für Kommentare?) und wie bietet man nicht-nerdigen Redakteuren ein schönes Interface? Am Rande fallen die Namen des akut gehypten Ghost und des weniger gehypten Symfony CMF. [00:38:33] Glücksrad Outline-Algorithmus Wir reden über Theorie und Praxis des Outline-Algorithmus, SEO und schema.org. [00:46:31] Keine Schaunotizen Javascript Modules, AMD, and the road ahead. Ein Vergleich zwischen AMD, CommonJS und ES6-Modulen. Einen Konverter als Node-Modul gibt es auch schon. Getting Started With Web Components and polymer.js Einführung in die faszinierende Welt der Web Components. Internet Explorer, Blob URLs, Web Workers, die Same Origin Policy und der IE-Bugtracker Ein Rant von Peter über seinen aktuellen Lieblings-Bug im IE. Hier ist der Bug Report bei Microsoft. StahlstadtJS JS-Meetup in Linz. JSunconference Ist zwar erst im April 2014, aber vormerken kann man sich das Ganze schon mal.