Revision 254: Progressively loaded CSS, Grunt 1.0

Mar 4, 2016

Ask episode

Chapters

Transcript

Episode notes

Der wöchentliche News-Podcast hat wieder mal Neuigkeiten! Nebenbei wird noch über progressives Laden von CSS Dateien philosophiert. Anselm, Hans, Schepp und Stefan diesmal im Boot.

[00:00:25] News

Grunt 1.0 Release Candidate: Nein! Doch! Oh! Oder: Die Hölle friert zu und Node kommt ohne Dependencies aus. Grunt 1.0.0. bringt das verwaiste Projekt auf den aktuellen Stand mit NPM, löst einige bekannte Bugs und ist ein wichtiger Schritt zur Reanimation des Projektes. Statt dem Big Bang gibt’s jetzt die bekannte API gesichert und veröffentlicht.
Touch Action CSS Property: Die touch-action CSS Eigenschaft bekommt Browserreichweite. Hier gibt’s Informationen dazu.
Transitioning from SPDY to HTTP2: Chrome schmeißt in absehbarer Zeit SPDY raus. Hier gibt’s Informationen für Leute, die ihre Server noch damit betreiben.

Schaunotizen

[00:04:10] The future of loading CSS: Jake Archibald beschreibt eine gravierende Änderung in Chromes Lade- und Renderstrategie für blockierende CSS Dateien. Diese Änderung (die in Edge schon so umgesetzt wird) erlaubt, CSS auch an anderen Stellen als dem Head zu laden und so progressiv Stylesheets für gewisse Bereiche der Website nachzuladen. Jake belegt dies mit einem entsprechenden Demo und einigen Use Cases. Wir beleuchten die Vor- und Nachteile und diskutieren über Properties wie lazyload und postpone

[00:24:54] Keine Schaunotizen

Finessing feColorMatrix: Una beleuchtet SVG Filter Eigenschaften bis ins äußerste Detail.
New ways to make your web app jank with Houdini: Houdini, eine Einführung. Hier gibt’s massiv Informationen und erste Code-Beispiele zum erweiterbaren CSS Standard.
Creating Fun and Immersive Audio Experiences with Web Audio: Die Web Audio API kann viel. Hier findet man ein paar gute Beispiele und Anwendungsfälle.
The Fab Four technique to create Responsive Emails without Media Queries: Eine sehr einfache, aber doch effektive Implementierung von Element Queries mit calc, min-width und max-width .
Art directed responsive images: Automatische Art Direction für responsive Images? Hier.