Working Draft

In der heutigen Revision holen sich Schepp und Stefan Matthias Mees aus dem hohen Norden vors Mikro, um über Progressive Enhancement und Twitters Paketmanager Bower zu quatschen. [00:01:36] News Stripe Der Online Payment Provider Stripe ist jetzt auch in Deutschland verfügbar. Opera 16 released Nachdem durch den Umstieg auf Blink Opera kurzzeitig seine Geolocation-Fähigkeit verloren hat, ist mit Version 16 nun wieder alles komplett. Schaunotizen [00:02:41] Progressive Enhancement – Still alive and kicking. Progressive Enhancement wird von der Community in der letzten Zeit wieder ordentlich heiß diskutiert und lässt nach Jake Archibalds Post vor ein paar Monaten auch einige andere Stimmen zu Wort kommen. Wie Daniel Mall, der mit seinem Tumblr Sigh, JavaScript eine virtuelle Hall of Shame für Websites, die so ohne JavaScript mal gar nicht funktionieren, eröffnet hat. Wir plaudern über über unsere Erfahrungen mit deaktiviertem JavaScript und fragen uns, ob die Fragestellung nach Sinn oder Unsinn von Progressive Enhancement nicht eher eine Frage der Entwicklungsqualität sein sollte. [00:19:00] Bower – A package manager for the web Seit einiger Zeit ist Twitters Bower schon veröffentlicht, und durch Tools wie Yeoman schon in den Arbeitsablauf einiger Webentwickler fest integriert, ohne dass man es unbedingt mitbekommen hat. Von Matthias‘ Blogbeitrag ausgehend, erklären wir die Funktionsweise des Paketmanagers, wo die großen Stärken liegen und worauf Nutzer achten sollen, wenn es in ihren Workflow integriert werden soll. [00:44:30] Keine Schaunotizen XDomain Cross Origin Resource Sharing leicht gemacht. Diese JavaScript Bibliothek kümmert sich um all eure CORS Anliegen. Prädikat: cheffig. Transitions for Off-Canvas Navigations Dass Off-Canvas Navigationen nicht immer lahm wie bei der Facebook-App aussehen müssen, zeigen die Leute bei Typmanus mit diesem gelungenen Demo. HTML5 Progress Element Pankaj Parashar zeigt in seinem Gastartikel bei CSS Tricks, in welchem Status das HTML5 Progress Element ist, und was man mittlerweile alles damit anstellen kann. Anfragen aus der Hölle Marc Hinse made our day mit unser aller Lieblingstumblr rund um Kundenanfragen und Sonderwünsche. Zum scheppig lachen! Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Trotz angespannter Themenlage griffen Hans, Schepp und Peter zu den Mikrofonen. Letzter verpennte in Folge das Schreiben der Schaunotizen, was leichte Verzögerungen im Betriebsablauf der weiteren Veröffentlichung nach sich zog. [00:00:13] News Yeoman 1.0 Hurra, hurra, die 1.0 ist da. Bootstrap 3.0 Aller guten Dinge sind 3.0. Schaunotizen [00:00:36] Heydon Pickering: Semantic CSS With Intelligent Selectors Dass wir alle den Artikel nicht gelesen haben, ist uns Anlass genug, um einfach mal so über CSS zu reden. Hans erzählt von seinem Traum-CSS und hat Zorn auf Styling im Bootstrap-Style, wo Design effektiv per HTML-Klassen-Vergabe umgesetzt wird. Die Komposition von Styles per Extends im Präprozessor-Code scheint die bessere Alternative. Trotzdem bringt Hans für Präprozessor-Zweifler Verständnis auf – Peter nicht ganz so sehr. In Anschluss fragen wir uns, in welcher Reihenfolge man CSS und SASS lernen sollte und ob es je einen reinen CSS-Relaunch ohne HTML-Änderungen gegeben hat (Spoiler Alert: natürlich nicht). [00:38:20] CSS3-Glücksrad CSS Generated Content for Paged Media Eine Papiertiger-Spezifikation verleitet uns zum Nachdenken, wie und ob man denn Leaders mit CSS-Bordmitteln zurechthacken könnte. Peter meint mal gehört zu haben, dass PrinceXML guten Support für Print-Foo hat. Der Matrix-Filter der CSS3-Transformations-Spezifikationen Wir stellen fest, dass sich unser Verhältnis zur Mathematik nicht nur dank Transformationsmatrizen stark entspannt hat und lobpreisen Steven Wittens Mathe-Talk von der Full Frontal 2012. [00:47:41] Keine Schaunotizen html2pdf.it Baut PDFs aus Webseiten (Print-CSS vorausgesetzt). NProgress Hippe Fortschrittsbalken im Youtube-Stil. Web Components Resources Massenhaft Links zum Thema Web Components. Font Hacking Älterer, aber guter Artikel voller Tricks rund um Webfonts. Tridiv CSS-3D-Editor. PLAY & MAKE 20013 Unsere allwöchentliche Event-Empfehlung. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

In Abwesenheit der restlichen Stammbesetzung holt sich Stefan die beiden Gäste Anselm Hannemann und Jens „Flocke“ Grochtdreis ins virtuelle Studio. Bei diesem hochkarätigen Aufgebot an Mitsprechern liegen die Hauptpunkte der heutigen Sendung direkt auf dem Tisch: Responsive Webdesign in all seinen Formen. In einer angeregten Diskussion sprechen wir über neue Prozesse für Responsive Webdesign in Agenturen und kommen zu einer ausführlichen Betrachtung von CSS- und Grid-Frameworks. Viel Spaß! [00:00:20] News Webkit unterstützt das srcset Attribut und legt damit die ersten Pflastersteine in Richtung Responsive Images Opera Developer nennt sich die nächtlich aktualisierte Entwicklerversion des norwegischen Browsers. Der neue Channel wurde vor kurzem geöffnet und bietet Entwicklern eine erste Vorschau auf kommende Dinge. Schaunotizen [00:01:00] Robustes PNG Fallback für SVG SVGs sind toll und die Möglichkeiten scheinen schier unbegrenzt. Zu dumm dass ältere Browser nichts damit anfangen können. Alexey Ten zeigt in seinem Artikel, wie man alte Browsereigenheiten ausnutzen kann um aus Browserfixes eine Technik zu entwickeln, die äußerst robust und plattformübergreifend ein PNG als Fallbäck lädt. Eine Technik, die unter anderem auch von Chris Coyier äußerst genau analysiert wurde. Wir diskutieren über diesen und andere Hacks sowie deren Zukunftssicherheit, zeigen Alternativen wie Icon-Fonts und finden die Sache trotz der einen oder anderen Schwierigkeit toll. [00:14:00] Warum Responsive Web-Design Schrott ist Was für eine Woche! Patrick Voelcker hat mit seinem Artikel über den Unsinn von Responsive Webdesign für die heißeste Diskussion des Sommers im deutschsprachigen Webraum gesorgt und nicht nur Marc Hinse oder Jens selbst mit an- und aufgeregten Gegenantworten vor die Schirme geholt. Wir erklären die eigentlichen Inhalte des Artikels und erzählen, warum „Warum Responsive Webdesign Schrott ist“ Schrott ist. Denn immerhin geht’s nicht nur um die Technik, sondern auch um Prozesse, Abläufe und halt eine ganz neue Herangehensweise. [00:26:00] Responsive Webdesign braucht kein Framework. Oder doch? Bei all den neuen Vorgehensweisen gibt es in der Responsive Elite etliche Stimmen gegen den Einsatz von Frameworks wie Bootstrap oder Foundation. Stefan erklärt, wie diese Frameworks doch sinnvoll eingesetzt werden können und welche Vorteile sich für Entwickler wie Designer dadurch ergeben. [00:36:20] Missverständnis Framework Allerdings meint Stefan auch, dass trotz aller Benefits für Entwickler und Designer man irgendwann an die Grenzen eines Frameworks stößt, zumindest bei Bootstrap. Jens bricht einige Lanzen für das deutsche CSS Framework YAML, wir betrachten den Sinn und Unsinn von Harry Roberts inuit.css im Detail, und sprechen über die Erfolgsfaktoren von Bootstrap und Foundation. Schlußendlich halten wir es wie Framework Experte Mark Otto: Ein Framework ist immer nur ein Anfang. [00:57:20] Keine Schaunotizen Speed Awareness Month. Auch wenn er schon fast vorüber ist, ist der August immer noch Speed Awareness Month. Diese Website versorgt euch mit Aritkeln und Beiträgen zum Thema Webgeschwindigkeit am Client und am Server. Web Platform Doc Sprint Zürich. Diese Woche in Zürich und am Mittwoch noch nichts vor? Kurz vor der Schweizer Frontendconf findet in der Zentralgasse 37 der Web Platform Doc Sprint statt. Schaut vorbei und unterstützt die verschiedenen Teams beim Aufpeppeln der gemeinschaftlichen Online-Dokumentation. Von der Working Draft Crew sind Hans und Rodney mit am Start. Handle deprecated and unmaintained repositories. Ist das einstige Pet Project und jQuery Plugin mittlerweile am Verstauben? Das ehemalige Problem bereits perfekt gelöst oder irgendein Megaframework hat eine prominentere Lösung dafür? Gast Anselm gibt in seinem Artikel Tipps und Ratschläge, wie man mit veralteten und schlafengelegten Open Source Projekten verfahren soll. LESS Mixins. Und zu guter Letzt hat Hans seine populären Sass Mixins auch nach LESS portiert. Take what you need! Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Schepp und Rodney luden sich Sebastian Golasch ein, um ein wenig was über sein neues Projekt DalekJS zu erfahren. [00:00:31] News Firefox 23 ist da Der neuste Firefox unterstützt jetzt <input type="range">, mag kein HTTP in HTTPS mehr, erschwert das Abschalten von JavaScript und hat <blink> rausgeworfen. Schaunotizen [00:01:36] Testing Situation heute – Hallo DalekJS Sebastian erklärt uns die Unterschiede zwischen Unit- Functional- Integration- und sonstigem Testing. Wir sprechen über PhantomJS und SlimerJS – steuerbare WebKit und Gecko Laufzeiten. Sebastian schwärmt von CSSTest, um seine Styles zu prüfen. Basierend auf der WebDriver Specification hat Sebastian sein eigene, Java-freie Alternative zu Selenium gebaut, Damit kann man auch ein paar Screenshots machen. Außerdem gibt es einen Vergleich CasperJS zu DalekJS. [01:03:36] Keine Schaunotizen Techniques for mobile and responsive cross-browser testing Welche Dienste und Tools muss man sich für seine Test-Infrastruktur anschauen? Envato klärt auf… How To Do A Procedural City In 100 Lines – Learning Three.js Eine dreidimensionale Stadt generieren – mit quasi keinem Code… visibility:visible innerhalb von visibility:hidden Vielleicht für Menüs und ähnliches hilfreich: man kann die CSS-Property visibility in verschachtelten Elementen umkehren. Ultrasonic Networking on the Web Man nehme Mikrofon und Lautsprecher und baue sich eine Modem-ähnliche Kommunikationsschnittstelle Absolute Horizontal And Vertical Centering In CSS Viele Wege führen nach Rom, aber nur wenige ohne Stolpersteine… KarlsruheJS Der Working Draft Alumni Kahlil Lechelt möchte das Karlsruher JavaScript MeetUp wiederbeleben und sucht dafür noch Speaker. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Das Sommerloch hat die Themenliste gefressen! Zum Glück lagen noch ein paar Zuhörerfragen auf Halde, derer sich Rodney, Stefan und Peter annahmen. Schaunotizen [00:00:33] Grid-Framework-Empfehlungen Im Brustton der Überzeugung mochten wir keins empfehlen. Peter hat zu wenig Ahnung, Stefan fühlt sich zu schnell eingeschränkt und Rodney ist ein richtiger Entwickler und baut keine Layouts, sondern lässt bauen. Konsens: nehmt halt irgendeins! [00:04:19] Push-Funktionalität Der erfahrene Rodney rantet aus dem Nähkästchen. Außer Long Polling ist kaum was zu gebrauchen, wobei sich zumindest die Protokoll-Inkompatibilitäten vom Web Sockets sich auf dem Desktop ausgewachsen haben. Der Geheimtipp für die Zukunft: HTTP über WS tunneln. [00:11:33] Local Storage Stefan und Peter klären erst mal den den App-Begriff, bevor sie Hoodie großes Potenzial bescheinigen. [00:14:21] Packaging von Webapps zur Offline-Nutzung Rodney ist ein richtiger Entwickler und erzählt daher erst mal etwas über Java. Mehr ist leider auch nicht zu sagen, da ein brauchbarer Webstandard nicht in Sicht ist. Insellösungen wie Chrome Apps kommen dem noch am nächsten, laufen aber eben nur dort. [00:19:57] Die Zukunft von WebP Für die Zukunft von WebP sehen wir eher schwarz. Peter wiederholt die bekannte Facebook-Fail-Story. One does not simply invent a new image format! [00:25:07] Was ist von <nav> und <menu> zu halten? Aus Gründen der Barrierefreiheit empfiehlt Peter <nav> wärmstens. Rodney prophezeit das Ende von <menu>, das mangels Implementierungen auf der Abschussliste steht. [00:27:23] Was ist von Flexbox zu halten? Peter und Rodney lobpreisen! Stefan ist noch mit Floats schneller, was sich mit Peters Padawan-Beobachtungen deckt. Voll Spannung werden die kommenden Grid-Layout-Standards erwartet. Bis dahin baut man Flexbox wegen der diversen Syntax-Varianten am besten mit Flexyboxes. [00:35:03] Keine Schaunotizen DalekJS introduction on Vimeo DalekJS wird nächste Revision ein Thema sein. Wer schon jetzt einen Einstieg sucht, wird mit diesem Video fündig. VerbalExpressions Regex für Leute die kein Regex können (JS-Lib). WebPlatform DocSprint Zurich Spaß und Erkenntnisgewinn durch Schreiben – bald auch in Zürich! Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Fast alle Moderatoren waren ausgeflogen, was also tun? Natürlich eine AngularJS-Sonderrevision! Die hatten wir schon länger geplant, jetzt nutzten wir die Gunst der Stunde. Da Stefan und Schepp beide keine Alltagserfahrung mit AngularJS vorweisen konnten, luden sie sich ein deutsches Experten-Trio bestehend aus Robin Böhm, Sascha Brink und Philipp Tarasiewicz ein, die im Folgenden eine gute Stunde lang über die Funktionsweise und Vorteile von AngularJS erzählten. Schaunotizen [00:00:00] AngularJS Sascha, Robin und Philipp erklären uns, wie AngularJS funktioniert. Dabei erwähnen wir die Seite Built with AngularJS und dass man deployd als Datensilo mit einem AngularJS-Frontend verknüpfen kann. Und nicht zuletzt natürlich die deutschsprachige Anlaufstelle für alle AngularJS-Entwickler: angularjs.de [00:53:18] Keine Schaunotizen IE11 Developer Preview for Windows 7 Wer den IE11 austesten will und Windows 7 schon einsetzt, der muss dazu kein Image von Windows 8.1 mehr herunterladen. Alternativ dazu gibt es für Mac und Linux Banutzer auch ein Windows 7 Image mit integriertem IE11. Bootstrap 3 RC1 Das neue Bootstrap ist jetzt mobile first und flat! Android and the eternal dying mobile browser Auch mit Android 4.3 will der unterentwickelte Android-Browser einfach nicht aussterben. Weiterentwickelt hat er sich auch nicht. On Mobile, Data URIs are 6x Slower than Source Linking Mobify hat via Real User Monitoring, genannt RUM, herausgefunden, dass Bilder, die man per Data URI einbettet durch das doppelt nötige Dekodieren deutlich länger laden. Es gilt also, ihren Einsatz hier und da etwas zu begrenzen. Generators in v8 Ein kleiner Artikel, der die Vorzüge sogenannter Generatoren aus dem kommenden JavaScript-Version ES6 erklärt. NerdyData Eine Suchmaschine für Quellcode. Top 10 Proactive Web Application Security Measures 10 Sicherheitsmaßnahmen, die man seiner Webseite angedeihen lassen sollte. Thinkster – A better way to learn AngularJS Online-Workshop, um den Umgang mit AngularJS zu lernen. jspm.io jspm.io ist ein universeller JavaScript-Modul-Loader, dem es egal ist, ob ein Modul im ES6-, AMD- oder CommonJS-Format vorliegt. Außer aus dem lokalen Projekt kann jspm.io Module auch direkt von Github aus einbinden. AngularJS.de – Das deutsche Portal zu AngularJS Philipps, Saschas und Robins gemeinsames Projekt. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Angesichts hoher Temperaturen und eines niedrigen Themenlisten-Pegels nahmen sich Hans, Schepp und Peter Themenwünsche der Leser aus Revision 127 zur Brust. Obwohl wir jedem Thema nicht mehr als 5 Minuten gewidmet haben, hat die Zeit nicht für alle Fragen gereicht, aber die kommen dann eben nächstes Mal dran. Falls ihr noch weitere Themenwünsche habt, ab damit in die Kommentare. [00:00:40] Fragen über Fragen [00:00:40] Keygen-Element Peter rät von der Benutzung ab, da Implementierungsdetails noch unklar sind. Schepp und Hans haben das Element auch noch nie in freier Wildbahn gesehen. Außerdem klärt Peter darüber auf, dass eine Technologie schon mit nur zwei unabhängigen Implementierungen zum Webstandard erhoben werden kann. [00:04:43] WebGL Wir finden super, dass der IE 11 WebGL können wird, haben es aber selbst nie in irgendwelchen Projekten eingesetzt. Einigkeit herrscht darüber, dass man im Bedarfsfall Libraries benutzen sollte, insbesondere Three.js. [00:06:57] Application Cache Wir linkschleudern die erklärenden Werke von Jake Archibald und Andrew Betts (FT) und lobpreisen den Manifest-Generator von Yeoman sowie das Bookmarklet manifestR. [00:11:55] Frameworks wie Bootstrap, Foundation, Boilerplates und deren Zukunftssicherheit Hans würde solche Frameworks zum Prototyping nutzen, steht ansonsten aber eher auf Handarbeit. Peter erklärt, was Bootstrap und Ikea gemeinsam haben. Major-Updates sollte man nicht mitmachen (außer bei HTML5 Boilerplate). [00:17:25] CSS Grid Systems Peter und Schepp haben sowas nie genutzt, Schepp höchstens mal YAML. Beide suchen die Schuld dafür bei Designern, die nicht in Grids denken. Der große Hinderungsgrund für Hans war früher mobile, was mit Sass aber kein Problem mehr darstellt. [00:20:30] WebRTC Schepp ist die Technologien noch zu neu und er sieht in seiner Realität auch keine Use Cases. Peter ist für die Zukunft sogar noch leicht skeptisch. [00:00:00] Schriftgrößen: px, %, em oder rem? Wir erklären und empfehlen rem. Allen IE-Opfern empfehlen wir eins der zahlreichen rem-Mixins für die verbreiteten Präprozessoren. [00:27:12] Wie strukturiert man CSS-Dateien? Hans erklärt sein Vorgehen: Seitenbausteine werden komponentenweise modularisier. Es gibt keine globalen Breakpoints, sondern nur komponentenweise vergebene. Peter macht es genau so, baut aber (Präprozessoren sei dank) gerne auch seine Media Queries in die Selektoren selbst ein, was bei Hans Bloat-Befürchtungen schürt. [00:32:17] (Responsive) Wireframes? Wenn ja, wie? Peter war früher immer nur Designer-Sklave und hat nie viel mit Wireframes gemacht, Hans schon. Schepp ebenfalls, aber nicht responsive (obwohl er das für sinnvoll hielte). Adobe Edge Reflow und Balsamiq werden als (teilweise) relevante Tools genannt [00:34:44] JS-MVC-Frameworks: Warum? Welche? Peter gibt sich für seine Zwecke mit Knockout zufrieden, während Hans bisher Backbone und Ember im Einsatz hatte. Schepp hat ein Auge auf Angular geworfen. [00:37:14] Warum wird #a11y selten beachtet? Was ist diesbezüglich neu in HTML5? Peter erklärt was neu in HTML5 ist. Hans führt das desinteresse auf fehlende Nachfrage zurück, und Schepp hält das Thema für unsexy. Peter fordert bessere Artikel und glaubt dass die helfen würden. [00:42:21] Server-Sent Events Wir erklären nochmal kurz das Konzept und verweisen ansonsten auf Revision 112. [00:45:18] HTML5 Drag & Drop Peter berichtet, wann man man dieses neu-alte HTML5-Feature einsetzen sollte und wann nicht und zieht Parallelen zwischen HTML5 und der Entdeckung des Planeten Neptun. [00:50:26] Welche Hardware zum Entwickeln benutzen? Wir zählen unsere Keyboards, Mäuse und sonstige Hardware auf. Peter steht auf viele Monitore und Kabelfreiheit, der Rest nicht so sehr. [00:55:34] Geolocation Schepp und Peter ranten über vergangene und gegenwärtige Probleme mit Geolocation im Firefox (was niemanden grundsätzlich von der Benutzung der API abhalten sollte). [00:59:59] Device APIs Peter erzählt, was gerade im Mobile Firefox alles möglich und geplant ist. Eine bessere Unterstützung für Web Notifications wird in allen Browsern gewünscht. [01:04:22] Links Evaluating the Performance of SPDY-enabled Web Servers SPDY ist schneller und schont die Server-Hardware! CSS Day Coverage – Videos und Slides sind komplett Falls ihr die nächsten paar Monate nichts vorhabt, hier Material zum Ausfüllen dieser Zeit. AngularJS Fundamentals In 60-ish Minutes – YouTube Tolles Thema, tolle Stimme. Looking Into the Future of Sass Einblick in Planungen zu Sass 3.3. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Getreu dem Motto „Viel Feind, viel Ehr‘“ luden sich Stefan, Peter und Rodney mit Jan Monschke und Sebastian Deutsch gleich zwei Gäste ein, die in der Debatte rund um CoffeeScript ordentlich Gas gaben. Das Glückrad entfiel aus Zeitgründen, dafür wurden die Gewinner des Gewinnspiels aus Revision 127 gezogen. [00:00:10] News Audio-APIs landen im Firefox Firefox Nightly kann jetzt Audio aufnehmen und hat auch die Web Audio API drauf. Damit kann man schöne Sachen machen! Schaunotizen [00:00:36] The Battle of CoffeeScript Hill Wir streiten ausführlich über CoffeeScript und andere Zu-JS-Kompilier-Sprachen. Sebastian erklärt, dass die Haupteinflüsse von CoffeeScript Ruby und Python sind, was in einer Syntax resultiert, die Rodney nicht besonders schätzt. Ihn stört außerdem, dass zusätzliche Tools die Toolchain länger machen und dass nicht ganz so fitte Entwickler con CS zu sehr gefordert werden könnten. Sebastian hält dem entgegen, dass Vorgaben wie das Klassensystem in CoffeeScript weniger fitten Leuten das Leben eher leichter machen. Peter mokiert weitere syntaktische Details, während Rodney einen Codeschnipsel ausgäbt, der genau so detailliert debattiert wird, wie das von Sebastian erstellte Positivbeispiel. Im Schlussplädoyer führt Rodney an, dass es unhöflich und ggf. nachteilig ist, Libraries in einer so unüblichen Sprache zu schreiben, da es andere von Contributions abhalten kann. [00:50:48] Why mobile web-apps are slow Ein ausgewachsener Brachiosaurus von einem Artikel legt dar, warum mobile Webapps heutztage so lahmen und macht wenig Hofflung auf Besserung. Der JIT-Compiler von JavaScript wird als der Flaschenhals ausgemacht, der auf mobile alles 8 – 32× langsamer macht. Warum man sich nicht einfach zurücklehnen und Moore’s law die Arbeit machen lassen kann, wird nicht ganz klar. Hans erinnert an Senchas HTML5-Facebook-App, die, da mit Fachkenntnis gebaut, schöm schnell war. Dass man JavaScript nebst JIT im Browser wird ersetzen können, zweifelt Peter an. [01:10:36] Modular HTML components with RequireJS Der Artikel beschreibt, wie man RequireJS für Multi-Page-Apps nutzen sollte. Rodney kennt diese Technik aus aus eigener Erfahrung und berichtet vom Praxiseinsatz. Detailliertere Ausführungen und Gegenvorschläge entfallen wegen akutem Zeitmangel. [01:14:18] Keine Schaunotizen Sublime Worksheet Sublime Text als REPL. Super für schnelle Experimente und Demos. Grunt: LiveReload reloaded Wie man die neuesten Inkomptibilitäts-Klippen im Grunt-Ökosystem umschifft. Animating lists with CSS 3 transitions Was iOS kann, kann das Web schon lange! Devs Meetup in Freiburg: Funktionale Programmierung Hans lädt wieder alle Web-Nerds aus Freiburg und Umgebung ein. [01:17:13] Verlosung Peter verliest die Sieger Je ein Exemplar des HTML5/CSS3-Videotrainings von Peter ist bereits auf dem Weg zu Christian, Robert und Marius. Herzlichen Glückwunsch! Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Die Rumpfbesatzung aus Schepp und Peter erfreute sich diese Woche am IE11, fuhr das Glücksrad an den Drehzahlbegrenzer und verlost(e) am Ende sogar noch drei Exemplare von Peters HTML5/CSS3-Videotraining. Schaunotizen [00:00:21] Kompatibilität im IE11 Nachdem Schepp für Peter nochmal die Features des IE11 rezitiert hat, kommen wir zum eigentlichen Thema: der Abwärtskompatibiliät des neuen Internet Explorer. Mehr als je zuvor sägt Microsoft alte Features wie document.all und attachEvent() ab und baut sogar den UA-String um. Zum einen soll so der IE11 von Browsersniffern nicht mehr versehentlich als einer seiner fossilen Vorfahren identifiziert werden, zum anderen wird der Browser so standardkonformer. Das ganze geht allerdings nach Meinung einiger schon fast zu weit, denn auch einige nützliche IE-Eigenheiten wie Filter und kontrollierte Scriptausführung sind aus dem Browser geworfen worden. Wir halten das eher für ein Luxusproblem. Schepp ist guter Dinge, dass bald alte IE genau so ein Unding sind wie alte Chrome-Versionen, Peter verweist darauf, dass sich alte Software im Business-Bereich oft sehr lange hält. [00:23:47] HTML5-Glücksrad Browser-Infrastruktur Peter lobpreist die Vollständigkeit der HTML5-Specs am Beispiel eine inhaltlich sehr langweiligen Abschnitts über Browser-Infrastruktur. Media Elements Schepp berichtet, dass er in der Praxis keine freien Audio- und Videoformate einsetzt, sondern einfach H.264 und MP3 mit einem Flash-Fallback ausliefert. Seine Player-Libraries der Wahl sind MediaElement.js und der JWPlayer. Das Mark-Element Peter quält Schepp mit Fragen zu obskuren HTML5-Elementen wie <mark>, <s> und <u>. An sich finden wir Recycling ganz löblich, aber hier sind wir uns nicht so sicher. [00:39:44] Keine Schaunotizen Google Glass Browser Nichts nerdiges, nur ein kleiner Trip Report von der Benutzung des Glass-Browsers. Basic JavaScript: an introduction to the language Der Doktor hat wieder zugeschlagen und liefert eine umfassende JS-Einführung für erfahrene Programmierer ab. Web Platform Doc Sprint Zurich In Zürich treffen sich am 28. August Nerds, um Dokumentation für die Web-Plattform zu schreiben. Klingt langeweilig, ist es aber nicht; Zweifler mögen sich unseren Bericht in Revision 107 anhören. [00:42:57] Verlosung Das HTML5/CSS3-Videotraining Bis zu drei glückliche Gewinner erhalten je ein Exemplar von Peters Videotraining zu HTML5 und CSS3! Teilnehmen ist einfach: schreibt einen Kommentar und wünscht euch einen Aspekt von HTML, CSS, JavaScript oder ähnlichem, den wir in einer der kommenden Revisionen für euch im Glücksrad-Style erklären/besprechen/verdammen sollen. Teilnahme ist ab Erscheinen dieser Revision für eine Woche möglich. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Bei einem schönen Digestivum drehten Stefan und Schepp ein paar mal am HTML5-Glücksrad und ließen einen Berg Links vom Stapel. Im Detail ergab sich das folgendermaßen: [00:00:41] News Firefox 22 Firefox 22 bringt der breiten Masse WebRTC und unprefixtes CSS Flexbox. iOS 7 beta and the new Safari for web developers Maximiliano Firtman hat sich angeschaut, was iOS7 Neues für uns Entwickler bereithält. Unter anderem sind das Video-Untertitel, XHR 2, CSS Regions und CSS Flexbox. Glücksrad [00:07:02] input[type=“image“] Wir reden über den Sinn und Ursprung dieses Inputs, und dass er fast immer zweckentfremdet anzutreffen ist. [00:16:12] Form Submission In HTML5 ist es möglich, dass jeder Submit-Knopf eigene Aktionen, Methoden, etc. für das ihn umgebende Formular festlegt. [00:20:35] Pseudo-classes Wir betrachten ein paar der interessanteren Pseudoklassen aus der Spec, und streifen dabei das Select-Widget Select2. [00:32:35] Origin Wir reden darüber, was der Origin im Client für eine Rolle spielt und wie man mit ihm umgehen kann bzw. sollte. [00:39:16] Keine Schaunotizen CSSRegions.js Adobe hat einen CSS Regions Polyfill veröffentlicht. Macht einen guten Eindruck, bald auch mit IE9-Support. Hinweis zur vergangenen Sendung: display:table hat Auswirkungen auf manche Screenreader Danke für den Hinweis an Tomas Caspers! Good UI 16 kurze und sehr sinnvolle Tipps für einen perfekten Userflow Mobile Web Problems Passend dazu zeigt Brad Frost, wie man mit seinen mobilen Besuchern besser nicht umgehen sollte, um deren Flow nicht abrupt zunichte zu machen. UI Transitions Sara Soueidan hat ein paar erstklassige CSS Animationen für das Einhängen und Entfernen neuer DOM-Elemente entwickelt und zusammengetragen. Building Apps For Firefox OS, Chrome OS And The Web Und der fantastische Addy Osmani schreibt bei Kahlil und Hans drüben wie man eine App entwickelt, die nicht nur im Web sondern auch auf Chrome OS und Firefox OS als Bürger erster Klasse läuft. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/