Working Draft

Diese Woche sind fast alle irgendwie unterwegs. Deshalb lud Hans sich Stammgast Anselm Hannemann ein, um ein bisschen über die aktuellen Themen des Web zu sprechen. Schaunotizen [00:00:33] Bye, Bye, Chrome Frame Google wird ab Januar 2014 Chrome Frame nicht weiter supporten oder entwickeln. Dadurch fällt die Möglichkeit moderne Features auch in alten Browsern zu nutzen weg. Wir finden es schade, dass Chrome Frame stirbt, sehen es aber als logische Konsequenz des aktuellen User-Zahlen veralteter Browser. [00:12:44] CSS stacking with display:table Mit CSS Flexbox kann man Elemente beliebig sortieren, egal wie sie im Markup eingebunden sind. Ian Devlin zeigt eine Möglichkeit, wie das zumindest teilweise auch mit display: table und anderen display-Werten gemacht werden kann. Anselm führt an, dass das eventuell zu Problemen auf Screenreadern kommen kann, doch ist das tatsächlich so? [00:23:00] Keine Schaunotizen Web Development Reading List Die Reading List von Anselm gibt es nun als tatsächlichen Newsletter. Anmelden! Why We Need Responsive Images Eine Auswertung, wie viel Kilobytes man sich mit Responsive Images tatsächlich sparen könnte. DevTool Secrets Eine Liste an nützlichen Tips für die Developer Tools. Peter hat zufälligerweise auch einige Tips zusammengetragen. Grumpicon Drag and Drop SVGs in die App und man bekommt PNG Fallbacks zurück und die einfachste Möglichkeit diese im CSS einzusetzen. Web Fonts and the Critical Path Webfonts können die Ladezeit einer Seite negativ beeinflussen. Dieser Artikel gibt eine gute Übersicht, was man beachten sollte. Designing for the empty state Einige Ideen für Apps und Websites, wie man leere Inboxes, Fehlermeldungen und ähnliches gestalten kann. Front-Trends Videos Interessante Vorträge von der Front-Trends sind nun online. HTML Inspector HTML Inspector ist eine JS Library, die als (HTML) Validator, Konventions-Überprüfer und erweiterungsfähiges Tool funktioniert. The JavaScript Behind Touch-Friendly Sliders Es ist nicht so schwierig einen Slider zugänglich für Touch Geräte zu machen. Seht selbst. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Kleine Runde, große Spieldauer: In der 124. Revision des Working Drafts beleuchten der Schepp und Stefan eine Reihe eher JavaScript-lastige Themen. Neben dem gewohnten Programm gibt es auch noch eine Verlosung: Sebastian Golasch stellt uns ein Ticket für das Braincamp Cologne zur Verfügung! Unsere Trello Notizen findet ihr hier. Keine News Schaunotizen [00:00:28] Screen Readers at a Crossroads Auf der letzten Google IO hat man die ChromeVox API vorgestellt. Diese ermöglicht die zusätzliche Annotierung von Webseiten Content speziell für Screen Reader. Große Chance für qualitative Inhalte oder direkter Weg um Unfug anzustellen? Wir versuchen diese Frage zu beantworten und geben die Quintessenz des Artikels der NC State University wieder. [00:11:58] CSP to the Rescue Spätestens seit der ersten jQuery EU Konferenz und dem äußerst informativen Primer von Mike West ist die Working Draft Crew erklärter Fan des Content Security Protocols. Twitter hat CSP nun auf ihren Seiten implementiert und den Schalter vorerst auf „Analyse“ gestellt. Perfektes Timing, denn CSP ist in Version 1.0 nun auch in Firefox Aurora.  [00:28:00] Deep dive into the murky waters of script loading JavaScript laden ist ja eh einfach, oder? Nun, theoretisch schon, praktisch gibt’s da aber eine Menge an Alternativen, die ihr für und wider haben. Jake Archibald listet diese ausführlich auf, die Moderatoren geben fröhlich ihren Senf dazu ab. Die eine wahre Methode? Gibt’s wahrscheinlich nicht. Dafür aber die subsource Ausprägung des rel-Attributs, die uns zumindest neu war. [00:42:43] Keine Schaunotizen HTML5 Accesibility Über den Status der Accessibility Unterstützung in den aktuellen HTML5 Browsern Fluent Conf 2013 Die Videos der diesjährigen Fluent Conf sind da! iOS Webkit Debug Proxy Google veröffentlicht einen Proxy, um in den Dev Tools nicht nur Mobile Safari, sondern auch alle UIWebViews zu debuggen Portal in CSS3 Eine Szene aus dem Portal Game in CSS3 implementiert. Und nebenbei gute Übersicht über alle 3D Transformationen. Conditioner Browsereigenschaften checken und entsprechend Content laden? Das macht der Conditioner. Picnicc Parametrisierte Builds, einfach gemacht. Verlosung: Ticket für BrainCamp Cologne Wir verlosen ein Ticket zum BrainCamp Cologne! Aufgabe ist easy und an entsprechender Stelle im Podcast zu hören. Antwort einfach in die Kommentare! Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Zur Revision 123 begrüßen wir Stefan Baumgartner als neuen Co-Moderator im Team. Außerdem sind Peter, Schepp und Hans mit von der Partie. Das Board zur Sendung findet ihr hier. Keine News Schaunotizen [00:00:26] Smartphone Browser localStorage is up to 5x Faster than Native Cache Eine relativ aktueller Test hat ergeben, dass das Speichern von Daten im LocalStorage eines Smartphones bis zu 5x schneller sein kann als der Browser-Cache. Das widerlegt einige Behauptungen aus der Vergangenheit. Wir sprechen über den zusätzlichen Zeitaufwand, den man mit der Nutzung von LocalStorage investieren muss, aber Schepp erklärt uns, dass es sich lohnt. Das Präsentations-Framework von Peter über das wir sprechen, findet ihr hier. [00:16:07] Cargo-Culting in JavaScript James Padolsey ist der Meinung, dass viele Developer Cargo-Culting mit manchen JavaScript Konventionen betreiben. Aber wer von uns nutzt schon den Function-Constructor oder eval? Und Douglas Crockfords Guidelines sind sicher ein guter Anhaltspunkt für JavaScript-Entwickler. Man muss sie nur verstehen, anstatt sie blind zu adaptieren. [00:28:50] Using HTML5 prerendering to speed up a multi-page registration process Mit Prerendering von Inhalten und Link-DNS-Prefetching kann man die Performance von vielen Seiten verbessern, gerade wenn man die nächsten Aktionen des Nutzers „vorhersehen“ kann. Aber man muss aufpassen, dass man das Netzwerk nicht zu sehr beansprucht. Vor allem wenn der Nutzer mobil unterwegs ist. [00:41:38] Glücksrad CanvasPathMethods Canvas wird für „normales“ Web-Development eher selten verwendet. Dabei gibt es ziemlich viele Anwendungsmöglichkeiten, die sich mit Fallbacks auch für alte Browser umsetzen lassen. Abstraktionen und Helper gibt es sowieso genug. [00:48:32] Keine Schaunotizen How to keep up to date on Front-End Technologies Listen von interessanten Developern, Podcasts, Blogs und vielem mehr um auf dem aktuellen Stand zu bleiben. HeidiSQL 8.0 Die Windows SQL Administrationsoberfläche HeidiSQL wurde in Version 8.0 veröffentlicht. Auf Mac macht Sequel Pro glücklich. XRegExp Eine JavaScript RegEx Library. Autoprefixer CSS Vendor-Prefixes mit JavaScript. Ähnlich wie Prefixfree, nur maintained und besser. Tern for Sublime Das Tern-Plugin für Sublime Text, das funktioniert. Sass Style Guide Ein paar Tips zum sauberen Aufbau von Sass Code. Developer MeetUp Freiburg Hans organisiert am 12. Juni ein Developer und Software Engineering MeetUp in Freiburg. Wer Lust hat kommt vorbei. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Letzte Woche haben wir die beyond tellerrand 2013 in Düsseldorf besucht und dabei die Gelegenheit genutzt, Christian Heilmann von Mozilla vors Mikro zu bekommen und ihn zu Firefox OS zu befragen. Das Gespräch haben wir im Foyer aufgenommen, was leider mit vielen Nebengeräuschen einher ging. Sorry dafür. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Neue Browser, alte Probleme – diesmal mit Schepp, Peter und Rodney an den Mikrofonen. [00:00:20] News Firefox 21 Frisch released und mit Support für <main>, Scoped Stylesheets (Working Draft berichtete) und ersten Teilen der Crypto-API. Schaunotizen [00:01:00] Chrome’s requestAutocomplete() Chrome hat ein neues Feature, das es Webseiten erlaubt Autocomplete für Formulare anzufordern. Gedacht ist das ganze eigentlich nur für Payment, was Peter etwas einschränkend findet, Schepp aber ob der ranzigkeit der Alternativlösungen für ganz großartig erachtet. Außerdem kommen der Payment Card Industry Data Security Standard und das neuerdings globale hidden-Attribut zur Sprache. [00:17:06] Web Components Neben Mozillas X-Tag hat nun auch Google mit Polymer Polyfill-Material für Web Components gebaut. Rodney erklärt den Unterschied zwischen Web Components und Shadow DOM und den diversen Einzelteilen der jeweiligen Technologien. [00:31:31] Is This Thing On? Einen eigentlich nur mittelguten Artikel nehmen Rodney und Peter zum Anlass, sich um die beste Story im Bereich „worst of Offline-Status-Festellung im Browser“ zu kabbeln.Weder die HTML5-APIs für den Online-Status noch die Disconnect-Events von Web Sockets noch Event Sources taugen. Rodney kam in seinem Projekt nicht umhin, eine State Machine mit Heartbeats auf Basis von Web Sockets (und Long Polling für Android) zu bauen. Außerdem kommt kurz http://socket.io/ zur Sprache. [00:35:30] Glücksrad Sandbox-Attribut Das Sandbox-Attribut wird es einst erlauben, die Möglichkeiten einer Seite in einem Iframe einzuschränken oder sogar zu erweitern. [01:01:50] Keine Schaunotizen Prepros Das darf man nicht außer Acht lassen: ein Präprozessor-GUI für Windows! Handy Sass Mixins Bei diesem Titel sind die Zusammenhänge glasklar. Codeblock.js Im Prinzip brauchen wir nur drei Dinge um allen Code zu beschreiben: einen Syntaxhighlighter, einen darin eingebautem Editor und einen „Run“-Button. Alles andere ist unnötig und deshalb enthält dieses Plugin auch nur diese drei Funktionen. How to Style Google Maps Dass das überhaupt geht wissen auch nur die wenigsten. JavaScript Regular Expression Enlightenment Wie reguläre Ausdrücke funktionieren muss man wissen und dieser Artikel erklärt es in epischer Breite. Vier Diskussionen Podcast-Kameraden, bekannt, ja? Nicht? Dann anhören! Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Christian und Hans besprachen diese Woche die Themen aus der Welt von CSS, Touch-Detection und verschlüsselten Medien. [00:00:15] News JPEGmini Windows App JPEGmini gibt es nun endlich auch als Windows App. Schaunotizen [00:00:52] CSS is not an amoral monster Ben Henick ist der Meinung, dass CSS für Websites gar nicht so komplex ist, wie man vielleicht annehmen mag, wenn man die richtigen Methoden anwendet. Wir diskutieren darüber, wie modulares CSS das Bauen von Websites und Apps erleichtern kann und worauf man achten sollte. [00:18:46] You Can’t Detect A Touchscreen Stu Cox weist darauf hin, dass es keine verlässliche Methode gibt, um Geräte zu kennen, die einen Touchscreen haben. Man kann lediglich erkennen, ob es die API für Touch-Gesten gibt, was aber nicht verlässlich ist. Aber braucht man die Information überhaupt? Und sollte man Websites nicht so bauen, dass sie für alle Eingabemethoden funktionieren? [00:28:20] Encrypted Media Extensions Inhalte im Web zu schützen ist eine problematische Angelegenheit, da Medien per se erst einmal offen zugänglich sind und somit downloadbar. Oft wird versucht die Inhalte beispielsweise durch Flash zu schützen. Diese Methode ist allerdings proprietär. Das W3C versucht nun mit einer eigenen Spezifikation für verschlüsselte Medien eine standardisierte Methode fürs Web zu kreieren. [00:41:39] Keine Schaunotizen AngularJS Buch / Tutorial Ein freies Buch über AngularJS, dass sich gerade noch in der Entwicklung befindet. csste.st Resources und Tools zum Thema CSS Tests. How to markup sub-headings (now that <hgroup> is gone) Steve Faulkner beschreibt einige Methoden um Subheadlines mit den richtigen Tags zu verstehen. Unicode Table Eine übersichtliche Tabelle der Unicode Zeichen zum einfachen Copy&Paste. Ghostlab Ein weiteres Tool zum Debugging Cross-Browser und Cross-Device. The :empty selector Der CSS Selector :empty wird viel zu selten verwendet. Hier gibt es eine Einführung und eine Liste an Dingen, die man bei der Nutzung beachten sollte. Zopfli Mathias Bynens beschreibt den neuen Komprimierungsalgorithmus Zopfli und stellt Tools zur Nutzung vor. Avoiding Unnecessary Paints Wie man verhindert unnötige Repaints im Browser während des Scrollens verhindert, beschreibt Paul Lewis. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Hans, Rodney und Peter erzählten, ranteten und verlasen wie üblich das neues aus der Web-Welt. [00:00:18] News nosniff header Github berichtet, dass erste Browser den gegen Hotlinking helfenden HTTP-Header nosniff unterstützen. Schaunotizen [00:02:00] Thank God We Have A Specification Hans und Peter erstarrten in Ehrfurcht vor Rodneys bei Smashing Mag erschienenem Magnum Opus über Bugs in CSS-Transitions. Rod gibt seine liebsten Bugs zum besten und berichtet über die Entstehung seiner Testsuite. Wir empfehlen außerdem die Test the Web Forward für alle Hörer – Tests schreiben ist überraschend produktiv und man lernt extrem viel, auch wenn man kein Uber-Nerd ist. [00:25:25] Using flag in language selector is still okay Landesflaggen als Sprachauswahl-Icon – gute Idee oder beknackte Idee? Der Artikel ist die Gegenrede zur Position von Gunnar Bittersmann. Es fiel uns nicht leicht, großes Interesse für dieses Thema aufzubringen. [00:36:22] Glücksrad Canvas-Element bzw. Canvas-Pfadfunktionen Weder Rodney noch Hans haben das Canvas-Element (oder seine Pfad-API) je gebraucht. Peter hackt damit zumindest gelegentlich herum und empfiehlt den Katzen-Erkenner Kittydar sowie three.js, die WebGL-Engine für Dummies. [00:46:02] Keine Schaunotizen Intern Großes Dingens zum Testen von Webapps. Pik7 1.0.0 Peters HTML5-Präsentationsframework ist released. Details in seinem Blog. HTML differences from HTML5 Übersicht der WHATWG. CSS Modals Hans hat eine Lösung für CSS-only Content-Lightboxen gebaut. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Aufgrund von Konferenzen, Betankung und privater Großereignisse gibt es diese Woche ein kleines Loch an Themen. Schepp und Hans haben aber versucht das Beste draus zu machen. News gibt es diese Woche keine zu verkünden. Schaunotizen [00:00:33] Coding, Fast and Slow: Developers and the Psychology of Overconfidence Wir kennen es alle: Ein neues Projekt soll geschätzt werden und das am besten gleich in der nächsten halben Stunde. Wir kalkulieren irgendwelche Aufwände von Features, die wir gar nicht kennen. Dadurch entstehen oft Fehlschätzungen, die wir später oft selbst ausbaden müssen. Der oben genannte Artikel beschäftigt sich mit genau dieser Problematik und wir diskutieren, in wie fern man dem Entgegenwirken kann. [00:15:18] Glücksrad <col> und <colgroup> Mit <col> und <colgroup> erzeugt man in Tabellen Kontexte für einzelne Spalten, denen man Eigenschaften (wie zum Beispiel lang) zuweisen kann ohne sich in jeder Zeile wiederholen zu müssen. Die meisten Attribute, die man früher zum Stylen verwendet hat, sind mittlerweile obsolete. Erlaubte Zeichen in JavaScript Kommentaren Welche Zeichen darf man eigentlich in JavaScript Kommentaren verwenden? Und welche Mime-Types sind für JavaScripts erlaubt? [00:30:30] Keine Schaunotizen traceGL traceGL visualisiert den Code-Fluss einer App. Listen, Watch And Share! Eine Liste an angesagten englischen web-spezifischen Podcasts. PathFinding.js Mit PathFinding.js kann man anhand komplexer Algorithmen festlegen, wie sich Elemente auf einer Fläche bewegen dürfen. Vor allem für Spiele-Entwickler interessant. PhantomCSS Mit PhantomCSS lassen sich CSS-Tests automatisiert durchführen. jQuery Annotated Source Für alle, die etwas vom jQuery Core Code lernen möchten. Snap.js Snap.js bietet die Möglichkeit Menüs zu bauen, wie man sie von Facebooks oder Spotifys Mobile-App kennt. Unheap Unheap ist eine schön aufbereitete Sammlung von guten jQuery Plugins. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Schepp, Hans und Peter ackerten sich in gewohnter Manier durch das, was sie für die Themen der Woche hielten. [00:00:21] News jQuery 2.0 erschienen Wichtig: in Version 2.0 gibt es keine Unterstützung für alte Internet Explorer! Aber keine Angst, die 1er-Serie wird weiter gepflegt und kann bei Bedarf noch benutzt werden. Schaunotizen [00:00:56] I know jQuery. Now what? Remy Sharp stellt in diesem Artikel (zugehörige Slides) die Frage in den Raum, ob man angesichts mittlerweile ja doch ganz vernünftiger Browser mit neuen DOM-APIs nicht manchmal auf jQuery verzichten könnte. Peter argumentiert pro jQuery, denn er hält das Design der meisten DOM-APIs für zu benutzerfeindlich bzw. sich selbst für zu blöd für sie. Schepp und Hans sehen das entspannter – neben DOM-APIs gäbe ja auch noch MicroJS. [00:27:26] Font Loading Performance Chris Coyier hat Tricks zum Performance-Tuning von Webfonts gesammelt, von denen wir mehr so semibegeistert sind – wenn man versucht, den Browser auszutricksen, geht oft schief. Abschweifungen führen uns zu Typekit, Zorn auf die Nichtexistenz von Mobile-Browser-Caches und FOUT (flash of unstyled text). [00:43:10] Glücksrad CSS3: Resolution-Media-Query Das Media-Feature resolution soll der Standard-Ersatz für -webkit-device-pixel-ratio und ähnlichen Foo werden. Dazu braucht es aber auch die passenden Einheiten wie dppx für Bildschirme und dpi für den Druck. Auch ganz lustig: Facebooks gefailtes WebP-Experiment. HTML5: Table Sorting HTML5 (WHATWG-Version) spezifiziert einen Mechanismus zum Sortieren von Tabellen. Da dieser sehr komplex ist und in keinem Browser funktioniert, fällt uns dazu nicht viel ein. Bis auf weiteres ist man mit JavaScript besser beraten. [00:59:05] Keine Schaunotizen Animating with Physics Bessere Animationen braucht die Welt. Hand.js Polyfill für Pointer Events. Chrome für Enterprise Leckerbissen für Admins. SVG filters Absolut umfassender Artikel zu SVG-Filtern (auch im CSS-Kontext). Pseudo-Classes to Style Form elements Peter findet dass man sie nicht benutzen sollte, aber was weiß der schon :) Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Volles Haus bei Working Draft! Neben Schepp und Peter gaben sich heute Sven Wolfermann, Christoph Zillgens, Gunnar Bittersmann und Stefan Baumgartner die Ehre um zu berichten, zu ranten und zu streiten. [00:02:15] News Persona einsatzbereit „Mozillas Passwortkiller“ (wie Golem.de es nennt) hat Beta 2 erreicht und kann dank Identity Bridging nun auch tatsächlich benutzt werden. MDN erklärt die Details. Schaunotizen [00:03:02] Breaking Development Orlando Stefan liefert einen Tipreport von einer tollen Konferenz an einer originellen Location. Videos der Talks sind noch nicht hochgeladen, aber wenn das soweit ist, sind die Performances von Andrew Betts (Offline-Apps), Mat Marquis (Responsive Assets) und Cameron Moll (Cross-Alles-UX) besonders sehenswert. Außerdem reden wir über Konferenz-Kultur sowie Media Queries in SVG und verweisen auf die Konferenz-Notizen von Luke Wroblewski sowie die hier gesammelten Fotos und Folien. [00:20:51] Transitional Interfaces Medium.com argumentiert pro animierte UI-Elemente und wir gehen d‘accord. Besonders Schepp fordert vehement, dass wir Motion Design bzw. Motion Designer besser in Web-Projekte integrieren. Als mögliche Hindernisse machen wir wie üblich die Troika aus Kunden ohne Zeitbudget für sowas, in Photoshop festhängenden Designern mit statischem Weltbild und es übertreibenden Flashern aus. [00:33:07] IDs versus Classes Vor einigen Wochen poppte die Diskussion bei Twitter auf: IDs sind doof, man sollte nur Klassen verwenden. Peter trollt ohne großartigen Erfolg gegen den Konsens an, der allerlei Argumente für seine Position auffährt. Wir reden außerdem über SMACSS, Selektorspezifität, Attributselektoren, Semantik, Hunde, CSS Code Smells und sogar Mikroformate. [01:13:44] Glücksrad HTML5: das dialog-Element Mangels Browserunterstützung für das eigentliche Fundstück schweifen wir in Richtung details-Element ab und stellen die Frage ob man für all sowas eigene HTML-Elemente braucht. Schepp meint: sofern ARIA-Attribute eingebaut werden, machen diese Elemente Sinn. CSS3: CSS Multi-column Layout Module Trotz mittlerweile okayer Browserunterstützung finden wir Spalten-Layouts im Web eher problematisch. Von CSS Regions versprechen wir uns da schon mehr [01:30:50] Keine Schaunotizen Detecting Touch – the WHY, not the HOW Patrick H. Lauke erschlägt die gesamte Touch-Problematik in einem Artikel. Movement.js Webapps in Minority-Report-Manier mit Gesten steuern? Diese Library macht es möglich! TimeJump Polyfill für Media Fragments URIs. Flexbox Ein Artikel und ein Generator für Cross-Browser-Flexbox-Code. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/