Natürlich waren wir auch dieses Mal wieder auf der (grandiosen) beyond tellerrand // Düsseldorf und haben uns wie gehabt einen der Sprecher herausgeangelt und zu einem Interview genötigt :)
Getroffen hat es niemanden geringeres als Sara Soueidan, der CSS- und SVG-Shooting-Star des letzten Jahres. Wir sprachen allerdings genau nicht über technische Themen, sondern interessierten uns viel mehr für ihren Hintergrund.
Foto mit freundlicher Genehmigung von Gunnar Bittersmann
Dieses Mal haben sich Peter, Hans, Rodney und Stefan zusammengefunden, um ein wenig von der Arbeit mit ECMAScript 6 zu berichten.
Schaunotizen
- [00:00:10] ES6 in der Praxis
- Hans und Stefan berichten davon, wie ihre Erfahrungen mit dem Einsatz von ES6. Es geht dabei um Tools, und inwiefern es einem im Vergleich zum Vorgänger das Leben einfacher macht. Darüberhinaus reden wir auch darüber, wie zweckmäßig der Einsatz von ES6 heute schon ist und wie spekulieren darüber, wie lange es wohl dauern wird, bis es im Alltag angekommen sein wird.
- [00:25:36] ES6 Module-Loader sind wieder gestrichen
- Nicht undiskutiert bleiben durfte auch die Tatsache, dass die TC39 in letzter Sekunde in Sachen ES6 Module-Loader einen Rückzieher gemacht hat, und JavaScript damit weiterhin ohne einen solchen dastehen wird. Wir reden über die möglichen Gründe für diesen Schritt und darüber, welche Möglichkeiten man derzeit für’s Module Laden hat. Dabei fällt auch das Stichwort „Universal Module Definition“.
[00:40:12] Keine Schaunotizen
- ramjet
- „Ramjet makes it looks as though one DOM element is capable of transforming into another, no matter where the two elements sit in the DOM tree.“ WOW!
- Git-Extras
- Hilfereiche Toolsammlung für Git Nr. 1
- Hub
- Hilfereiche Toolsammlung für Git Nr. 2
- LanguageTool
- Ein Open Source Grammatikfehler-Suchprogramm
Ganz unverhofft gesellte sich diese Revision der gute Chris Heilmann auf einen Plauderabend zu uns.
[00:00:45] News
- „WebKit’s JavaScriptCore and Web Inspector now have a code coverage profiler that tells you what JS code has executed“
- Die News der Woche ist dieses neue Feature des kommenden Safari bzw. des jetzigen WebKit-Nightlys, mit Hilfe dessen man ungenutzte Code-Stellen in seinem JavaScript ausfindig machen kann.
Schaunotizen
- [00:03:02] ES6 Template Strings
- Die neuen ESCMAScript 6/2015 Template Strings erlauben in ihren Backticks viele neue String-Spielereien, wie etwa Multiline-Strings, Variablen-Ersetzung innerhalb des Strings, Filterung und Internationalisierung. Mit dem Browsersupport sieht es leider noch nicht so gut aus, aber es gibt Transpiler und Polyfills dafür.
- [00:17:25] Chris Heilmann geht zu Microsoft
- Dass für Chris bei Mozilla die Luft ein wenig raus war, war ja bekannt. Dass er jetzt zu Microsoft geht war hingegen ein ganz schöne Überraschung (Aaron Gustafson übrigens ebenfalls). Wir sprachen mit Chris über seine Zeit bei Mozilla und seine Aufgaben und Pläne im neuen Job. Außerdem durfte auch Microsofts Spartan Browser in unserer Diskussion nicht fehlen.
[01:06:42] Erkenntnis der Woche
- display: flex doesn’t work for button elements
- Rodney erzählt von seinen erfolglosen Versuchen, die Firefox-Buttons in eine Flexbox-Konstruktion zu zwängen. Er erzählt uns außerdem, warum das alles sowas von nicht funktioniert und welchen Workaround-Joker man erfolgreich ziehen kann.
[01:17:40] Keine Schaunotizen
- JavaScript Application Architecture On The Road To 2015
- Addy Osmani legt uns seine Sicht auf die JavaScript-Architektur des Jahres 2015 in einem ellenlangen Artikel dar. Lesenswert!
- A Vision for Our Sass
- Felicity Evans formuliert und erklärt in diesem ALA-Artikel Ihr Manifest für guten SASS-Code-Stil. Gehen wir sehr mit d’accord!
- Useful SVGO[ptimization] Tools
- Sara Soueidan bietet hier ein kleines Roundup an verschiedenen GUIs und Ausprägungen des SVG-Optimierers SVGO auf. Gutes Thema!
- Using WEBP/JPEG 2000/JPEG-XR/APNG Now With Picturefill and Modernizr
- Zoltan “Du Lac” Hawryluk, Urgestein der Webszene, widmet sich der Frage, welche Vorzüge die verschiedenen exotischeren Bildformate abseits von JPEG haben und wie man sie im Alltag einsetzen kann. Erschöpfend, gut!
Wie jedes Jahr waren wir auch diesmal zu mehreren auf der beyond tellerrand und haben einen Speaker in einen Hinterhalt gelockt, aus dem er erst nach einem Interview mit uns wieder freigelassen wurde. Unsere Beute diesmal: Niemand geringeres als Chris Coyier von CSS Tricks, Codepen.io und Shoptalkshow, auch bekannt als „Die Rampensau“! :) Wir stellten viele Fragen über seinen Werdegang, und sein täglich Brot und Butter. Viel Spaß!
Da Peter und Jens Grochtdreis zufällig gerade in Düsseldorf weilten, wo sie über drei Tage verteilt ihre HTML5 MasterClass gaben, dachte Schepp sich: Warum nicht das Angenehme mit dem Nützlichen verbinden, sich mit den Jungs im Biergarten treffen, und ein Mikro auf den Tisch stellen? Gesagt, getan! Statt über das übliche Nerd-Zeugs zu reden, rekapitulierten wir, wie wir im Laufe der Jahre durch Ereignisse und Dinge die wir bewusst taten zu dem beruflichen Punkt angelangten, an dem wir jetzt stehen.
Da wir in einem Biergarten nahe einer Straße saßen, kann die Tonqualität diesmal nicht ganz mit denen der übrigen Folgen mithalten. auphonic hat allerdings wieder mal etwas sehr Brauchbares herbeigezaubert. <3
[00:42:21] Keine Schaunotizen
- gitignore.io
- Create useful .gitignore files for your project
- PuPHPet
- Online GUI Configurator for Puppet & Vagrant
- Adobe’s Project Parfait
- PSD CSS Extraction, Measurements and Image Optimization Service for the Web
In der heutigen Revision haben Hans, Peter und Stefan den Performance-König Tobias Baldauf eingeladen, um über aktuelle Trends und gute Ratschläge in Sachen Webperformance zu plaudern.
[00:01:08] News
- Firefox 27
- Neuer Release des Independent Browser, mit der neuen CSS Eigenschaft
all:unset und einigen anderen Änderungen.
Schaunotizen
- [00:01:56] Bleeding Edge Bildoptimierung
- Tobias erzählt über aktuelle Trends in der Bildoptimierung, und wie man aus langgedienten Grafikformaten wie JPEG dank Machine Learning noch weitere 10% rausholen möchte.
- [00:07:56] Renderingoptimierungsmöglichkeiten bei Webfonts
- Chrome hat seinen Webfont Renderingprozess neu gelöst, und zeigt nach 30 Sekunden ohne geladener Font eine Fallbackschrift an. Außerdem erzählen wir welche weiteren Steuerungsmöglichkeiten es gibt, ob
text-rendering Unterschiede macht und wie man Subsetting richtig einsetzen kann!
- [00:13:15] Automatisiert Performance Metriken generieren
- Performance kann und soll man klarerweise messen. Tobias gibt Tipps und verweist auf Tools wie Phantomas (samt Grunt-Plugin) und das HTTP Archive.
- [00:17:41] Viele Schriftschnitte vs. Performance
- Der Schriftenkaiser Gerrit van Aaken ruft zu Recht auf, verschiedene Fettschnitte in Webfonts zu beachten. Doch was des Designers Freud‘ ist des Performanceoptimierers Leid. Wo liegt die optimale Grenze, und welche Möglichkeiten würden wir uns wünschen um beide Welten zufrieden zu stellen. Wir philosophieren.
- [00:22:06] Performance-Guidelines und -Budgets
- Performance ist wichtig und kann auch gut argumentiert bzw. verkauft werden! Stefan erzählt von Kompromissen aus dem täglichen Agenturleben und welche Probleme man sich fernhält, wenn man das Performance-Augenmerk von Anfang an in Betracht zieht. Der Rest stimmt in der Reflexion mit ein und gibt Ratschläge.
- [00:27:58] Leserfrage: Unsere Erfahrungen zu custom styled Inputs
- Stammhörer Christoph Rumpel fragt, wie man Formularelemente am besten stylen kann, und welche Bibliotheken bzw. Tools wir dafür nehmen. Eine Antwort mit einem Plottwist. Erwähnt werden: Ryan Seddons Technik über :checked Attribut und das ähnlich funktionierende Navigataur. Außerdem wird es Zeit
alert und confirm wieder aus ihrer Versenkung zu bringen!
- [00:35:37] Layoutgeschwindigkeit von CSS Flexbox
- CSS Flexbox rendert langsam und hat nicht unbedenkliche Aufbaustrukturen. Doch lieber CSS3 Grid-Layouts verwenden! Doch was, wenn manches davon noch gar nicht in den aktuellen Browsern implementiert wurde? Wir ranten über Angebot und Nachfrage, den IE9 und die Zukunft des Internet Explorers, und geben Peter in einer spontanen Selbsthilfegruppensitzung Platz.
- [00:46:47] Leserfrage: Gute Onlinecommunities für Webentwicklung?
- Christian fragt: Welche guten Onlinecommunities gibt es? Die Leute kurz vor oder jenseits der 30 erzählen mit weißen Rauschebärten über die gute, alte Forenzeit, dass deren Abgesang eigentlich eh nicht so schlecht ist, und warum Twitter und Co. sich in den letzten Jahren behauptet haben.
[00:58:52] Keine Schaunotizen
- CSS Above the fold Inliner
- Dinge, die über der Fenstergrenze passieren sollten auch besonders schnell sichtbar sein. Dieses PhantomJS basierte Tool hilft!
- Responsive Images & Lazy Loading
- Der sehr aktive Sven Wolfermann über Responsive Images und Lazy Loading. Pflichtartikel
Tipp der Woche
Topcoat.io
Man braucht fesches UI, ohne sich dabei gleich Boliden wie Bootstrap oder Foundation zu installieren, hat Ansprüche auf Performance und Anpassung? Dann sollte man auf Adobes Topcoat einen genaueren Blick werfen.
Wenig Themen, viel Diskussion! Peter, Rodney und Stefan besprechen Browserbugs, die keine sein sollten und sinnieren über einen jüngst veröffentlichten A List Apart Artikel, den man wohl ohne Weiteres in die Kategorie „Große Erschütterung der Macht“ stecken darf.
[00:00:15] News
- CSS Editor’s Draft contains links to Shepherd
- Noch in Beta und in starker Bearbeitung, aber nach jahrelanger Wartezeit endlich Realität: Im CSS Editor’s Draft der W3C werden die Shepherd Tests verlinkt.
Schaunotizen
- [00:01:00] Viewport Units in iOS
- Trotz recht weitreichender Kompatibilität und echtem Bedarf sind Viewport Units überaus buggy und beinah unbrauchbar, wie Rodney jüngst herausfinden musste. Wir sprechen über die eigentliche Nutzung und wie man Dank CSSOM zu einem netten Buggyfill kommt (Term coined by Sebastian Golasch.
- [00:24:05] CSS Regions considered harmful
- Wenn einer der CSS Erfinder CSS Regions öffentlich für Scheiße erklärt, kann das Internet schonmal Kopf stehen. Browserhersteller treten den Rückzug an und nehmen experimentelle Implementierungen aus der Codebase. Wir sprechen über Sinn und Unsinn, Web vs. Webtechnologie und den Bedarf an „Generated Content“. Außerdem flattert pünktlich zur Sendung ein sehr interessanter Pro-Artikel von Sara Soueidan zum Thema herein.
[00:44:31] Glücksrad
- Table Sorting Model
- Tabellensortieren im Browser, wie einst beim guten, alten jQuery Tablesorter! Existiert momentan allerdings nur am Papier.
[00:49:25] Keine Schaunotizen
- Drag & Drop für Dateien
- Peter beschreibt eine uralte API, mit der man sogar ganz brauchbare Dinge anstellen kann. Erster Teil einer Minireihe.
- Avoiding anonymous JavaScript funcitons
- Todd Motto erklärt anonyme Funktionen, deren Nachteil und wie man sie vermeidet.
- Markdown.js
- Markdown Parser in JavaScript. Mitsamt Abstract Syntax Tree.
Die Stammbesetzung von Schepp, Peter, Hans und Stefan durfte in der aktuellen Revision Frederic Hemberger als Gast begrüßen, um uns über die unterschiedlichen Use Cases von Vagrant zu informieren. Spontan stieß auch noch unser treuer Hörer Marius hinzu, der ebenfalls in die Lobeshymnen einstimmte.
Schaunotizen
- [00:01:03] Vagrant – Development environments made easy
- Die Entwicklungsumgebung braucht Java, man will sich die eigene Maschine aber nicht versauen? PHP in einer Uraltversion gefordert, die man lokal nicht mehr zum Laufen kriegt? Oder einfach zwischen den Kollegen die gleichen Rahmenparameter für die Entwicklung herstellen? Mit Vagrant alles kein Problem. Frederic und Stefan sind seit längerem Fan des Commandline Tools, welches das Aufsetzen, Steuern und Konfigurieren von virtuellen (Linux-)Maschinen kinderleicht und versionierbar macht. Die beiden machen — unterstützt von Marius — dem Rest der Truppe die Vor- und Nachteile an einigen Beispielen schmackhaft und sprechen vom ultimativen Test- und Reproduzierbarkeitsnirvana. Wer auf den Geschmack gekommen ist und mehr als Ubuntu braucht, wird übrigens auf Vagrantbox.es fündig. WordPressentwickler sollten sich VagrantPress genauer ansehehn.
- [00:20:30] Clientside JavaScript Error Reporting
- Die Hörerfrage von Marius wurde nicht nur über Twitter, sondern auch gleich live in der Sendung vom Fragesteller persönlich eingeworfen: Welche client-seitigen Fehlerreporting Tools verwenden wir eigentlich, und welche Dienste sind uns da am geläufigsten? Frederic schwört auf eine eigene Lösung, bestehend aus ca. 60 Zeilen Code, die ihm beim Ermitteln von Edge Cases schon einige Male enorm geholfen hat. Außerdem gab Paul Irish auf Google Plus einen guten Überblick über geläufige Services.
[00:30:48] Glücksrad
- Application Cache
- Der Application Cache war als Offlinemechanismus eine durchaus ambitionierte Angelegenheit, ging bei uns aber nie über den Demostatus hinaus. Wir erörtern die Gründe und geben auch Positivbeispiele. Erwähnung findet auch Frederics Manifest Validator und ein Blick in die Zukunft mit Service Workern.
[00:40:10] Keine Schaunotizen
- 10 Reasons we switched from an icon font to SVG
- Icon Fonts sind toll, haben aber ein paar Nachteile, die für die Autoren des Artikels Grund genug waren komplett auf SVG zu wechseln.
- How to measure Frontend Performance with Phantomas and Grunt
- Die 4Waisenkinder erzählen uns wie man Frontend Performance mit Phantomas und Automatisierungstools wie Grunt hervorragend messen kann.
- Slip
- Listen, die auf unterschiedliche Gesten unterschiedlich reagieren, gibt’s bei Pornels Slip.
- Accessibility Tools
- Frederic wirft drei hervorragende Accessibility Tools ins Rennen: Eine Chrome Extension nebst anschaulichen Lintern bei AccessLint und WAVE.
- Manageable Sass Components
- Wer mit Bower und Sass Komponenten arbeitet bzw. solche sogar entwickelt, kann in dieser Ode an das !default Flag erkennen, wie man diese für Außenstehende konfigurierbar macht.
- Kod.io Linz
- Stefans Wahlheimatstadt Linz bekommt eine Entwicklerkonferenz. Eine einmalige Gelegenheit mit einem ansehnlichen Line-Up, auch für Frontend Entwickler.
- I Want To Use
- Irgendein modernes Browserfeature erwünscht? Nicht sicher ob das alle mobilen Devices auch können? „On mobile, I want to use“ gibt Aufschluss.
- Donate your dusty device
- Die Open Device Labs der Welt fordern auf, euer ranziges Smartphone für den guten Testzweck zu spenden. Finden wir unterstützenswert!
[00:49:22] Der Tipp der Woche
- Option-Key + Click
- Man lernt eben nie aus: Im OS Terminal kann man bei gedrücktem Option Key und einem Klick die Cursorposition ändern. Enorm hilfreich bei langen Commandline-Befehlen.
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
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!
