Letzte Revision noch über ihn, bzw. einen seiner Artikel gesprochen, heute schon in unserer Sendung: Jens Oliver Meiert! Wir haben ihn auf der gerade vergangenen beyond tellerrand Düsseldorf zufällig getroffen und ihn erfolgreich in ein Interview zum Thema CSS verstrickt.
Schaunotizen
- [00:00:18] Optimierung und Wartbarkeit von CSS
- Wir sprachen mit Jens über sein aktuelles Forschungsthema, nämlich der Frage, wie man CSS besser optimieren und gleichzeitig gut wartbar halten kann. Ausgangslage war Jens‘ Erkenntnis, dass 70% des CSS, das die Durchschnittsseite mit sich herumschleift, aus vorher bereits definierten Deklarationen besteht. Das daraus resultierende Gespräch führte uns über Bootstrap und die Möglichkeit, es an die eigenen Bedürfnisse anzupassen, über Tachyons, Yahoos Atomic CSS, und OOCSS hin zu Googles GWT. Zur weiteren Erforschung des Themenkomplexes bittet Jens in einem Artikel darum, seine Umfrage das Thema betreffend auszufüllen.
Keine Schaunotizen
- Alle Videos der beyond tellerrand Düsseldorf 2017
- Die Videos der beyonds gehen mittlerweile so schnell online, da fehlt nicht mehr viel, dass man die Talks dort schon vor dem Bühnenauftritt sehen kann. Wenn Ihr nicht die Zeit findet, alle Videos zu schauen, dann doch wenigstens das von Espen Brunborg.
Diese Folge haben sich Hans und Schepp zusammengesetzt, und über die Idee eines Accessibility Object Model diskutiert.
Wie jede zweite Ausgabe wird unser Podcast wieder von Wire gesponsort, dem sicheren Open Source Messaging Client für all eure Plattformen, welcher auch den Desktop als First-Class-Citizen betrachtet. Demnächst mit erweiterten Funktionen für Teams!
Schaunotizen
- [00:01:41] The Accessibility Object Model
- Für jede Webseite erstellen unsere Browser einen Document Tree, einen Layout Tree, sowie einen Accessiblity Tree. Folgerichtig kommt aus der Web Incubator Community Group (WICG) die Idee, den Entwicklern zusätzlich zum Document Object Model (DOM) und CSS Object Model (CSSOM) auch ein Accessibility Object Model (AOM) an die Hand zu geben. Wir erforschen, welche neuen Programmierszenarien damit möglich werden, und ob wir die Idee insgesamt eher für gut oder für schlecht befinden (damit thematisieren wir auch die Ausführungen von Marco Zehe aus Revision 162).
[00:36:30] Keine Schaunotizen
- Modern JavaScript for Ancient Web Developers
- Ein Artikel voller guter Links, um moderne JavaScript-zentrierte Entwicklung zu lernen.
- Fuse.js
- Lightweight fuzzy-search, in JavaScript
Für diese Revision haben wir uns nach längerer Zeit mal wieder den Sven Wolfermann eingeladen, den man desöfteren auf Konferenzen, Community-Events und Unkonferenzen mit Vorträgen zu fortgeschrittenen CSS-Techniken antreffen kann. Selbiges gilt für sein Blog unter maddesigns.de. Denn wir wollten diese Woche gerne über die neuen CSS Grids sprechen, die jetzt nach und nach in den neuen Browsern freigeschaltet werden.
Bereits zum dritten Mal wird unser Podcast jetzt von Wire gesponsort, dem sicheren Open Source Messaging Client für all eure Plattformen. Dank verbesserter Technik verbindet sich der Messenger nun noch schneller mit der Gegenseite, und die Übertragungsqualität ist dabei auch noch gestiegen!
Schaunotizen
- [00:02:28] CSS Grids
- Lange wurde daran gearbeitet und wir hatten sie eigentlich schon letztes Jahr erwartet, nun ist es endlich soweit: CSS Grids kommen! Mit Sven sprechen wir darüber, welche Lücke die Grids füllen und inwiefern sie vergleichbar sind mit den guten alten Tabellenlayouts oder Flexbox. Weiter geht es mit der Frage des Browser-Supports, und ob der Internet Explorer mit seiner Vorversion von Grids gut genug ist, um den praktischen Einsatz zu wagen. Die Möglichkeiten und Vorzüge von Grids machen einige Demos deutlich, die man mal gesehen haben sollte:
Wer nach unserem Gespräch Lust bekommen hat, sich selbst mit den CSS Grids zu befassen, dem empfiehlt Sven folgendes Lernmaterial, um schnell in die Spur zu kommen:
Abschließend blicken wir in die Zukunft und sprechen über das Konzept der „Subgrids„, das von vielen Entwicklern im Zuge der Grids-Entwicklung nachgefragt wurde, und das in eine nächste Ausbaustufe des Layoutstandards gewandert ist.
[00:43:57] Keine Schaunotizen
- Animista
- Eine Bibliothek von fix und fertigen CSS-Animationen
- Scram.js
- Ein Electron-basiertes Framework, das es erlaubt, mit Web Components serverseitigen Code zu schreiben.
Vor ziemlich genau einem Jahr telefonierten Rodney und Schepp sich zusammen, und starteten den Versuch einer Technologie-Prognose für das nachfolgende Jahr: Welche brandneuen Technologien, Frameworks, Tools und Methodiken würden 2016 Fahrt aufnehmen? Heute blicken wir zu dritt zurück auf diese Folge und schauen, was davon eingetreten ist. Soviel lässt sich sagen: Wir lagen bei mindestens so vielen Vermutungen richtig, wie wir auch falsch lagen. Ganz am Ende wagen wir sogar noch einen vorsichtigen Ausblick auf 2017.
Schaunotizen
- [00:00:14] Der Jahr-2016-Progonosen-Check
- Folgende URLs passierten im Verlauf der Diskussion unsere Browser-Adresszeilen:
Während die anderen Kollegen allesamt geschlossen dem Tag der Deutschen Einheit gedachten – allen voran sicherlich Stefan :) – setzte Schepp sich mit Marc Thiele zusammen, dem Macher der beyond tellerrands als auch des Twumble-Podcasts, und wir sprachen über alles Mögliche, vor allem aber über…
Schaunotizen
- [00:00:12] … Nicht-Tellerrandiges
- Denn bei Marc hat sich seit seinem letzten Besuch bei uns viel Neues ergeben. Wir redeten über sein Engagement beim Smashing Magazine und darüber, wie es sich immer auszahlt, auf sein Bauchgefühl zu hören. Auch ging es darum, wie man seine Sprecherkarriere starten kann, und wie Marc sich Gedanken macht, wie man Newcomer fördern kann. Natürlich sprachen wir auch über den Konferenzzirkus insgesamt, welche Konferenzen funktionieren, welche nicht, und welche man besucht haben sollte.
[01:18:55] Keine Schaunotizen
- Bonfortionöse beyond tellerrand Workshops in Berlin!
- am 7. und 10. November 2016 zu den Themen „Performance“, „Research“ und „Letterpress“.
- Exquisite beyond tellerrand Workshops in Düsseldorf!
- am 14. und 17. Mai 2017 zu den Themen „Zeichnen Lernen“ und „Animation“.
- Und zwei großartige Accessibility Clubs!
- Und schließlich legen wir Euch nahe, zu einem der kommenden Accessibility Clubs in Berlin oder Nürnberg zu gehen, bei denen Karl Groves zu Gast sein wird.
This time we had no one less than Niels Leenheer from Drachten in Holland as our guest, creator of HTML5test.com, owner of the forth largest open device lab in the world and browser connaisseur.
Discussion Topics
- [00:01:47] On the rise and fall of open device labs
- Managing one of the largest open device labs in the world, we asked Niels how well the concept is being accepted by the developer community. We learned how exactly he manages these inquiries and what type of people ask for device testing. And of course we also talked about all the aspects that – contrary to initial expectations – does not work, and why that is.
- [00:19:36] HTML5test.com
- Device testing lead us right to the next topic which was the benchmarking site html5test.com. Incepted in 2010 the site quickly became a respected authority for information seeking developers, browser vendors and the press. And most importantly it pushed browser vendors forward and helped steer development into the right directions.
- [00:25:54] Weird Browsers
- Working on html5test.com brought a lot of browser-specific quirks to Niels‘ attention and so he shared a few interesting stories with us. We talked about „smart“ TV browser, console browsers, eBook-reader browsers and browsers that hide in VR glasses. Astonishingly most of the times these browsers act pretty normal, except for when they don’t. Then things are getting pretty weird!
- [00:52:21] Browser Sniffing
- The conclusio of the above topic was that some broken features cannot really be feature detected. So either we manage a very defensive approach that allows sites to gracefully degrade without breaking on strange browsers. But if we don’t, and we need to resort to user agent sniffing which traps to look out for. Niels suggests using one of two libraries doing a good job a browser detection: One being the UA Parser and the other one being the Piwik Device Detector.
[01:03:41] A Ticket Raffle!
- Win two tickets for the code.talks in Hamburg!
- We already twittered it: Niels is giving away two 100% discount codes for the code.talks conference in Hamburg at the end of September. Anyone that comments below or tweets to @html5test the exact number of devices he currently has in his device lab qualifies for our raffle. The Raffle ends Sunday, 4th of September.
Wir waren mal wieder reif für einen Gast und so luden wir diese Revision den Daniel Mies zu uns ein.
Schaunotizen
- [00:01:02] TypeScript
- Wir wählten TypeScript als Hauptthema dieser Folge, weil Daniel in seinen JavaScript-basierten Projekten reichlich gute Erfahrung damit gemacht hat. TypeScript ist im Prinzip ein Superset von EcmaScript Next, also reinrassiges JavaScript mit ein paar wenigen, aber wichtigen Erweiterungen oben drauf. Diese Erweiterungen haben nur einen Zweck, nämlich die Entwicklung in der Sprache JavaScript robuster und angenehmer zu gestalten. Die Eckpfeiler dafür sind:
- Typisierung von Variablen zur Absicherung gegen Typ-Fehler
- Interfaces zur Typisierung ganzer Objektstrukturen
- Decorators zur Anreicherung von Funktionen/Methoden um weitere Aufrufe
All diese Features ermöglichen es einer TypeScript-fähigen IDE schon zum Zeitpunkt der Codeerstellung Fehler zu erkennen, und sie ermöglichen auch bessere Code-Assistenz-Werkzeuge.
Um Typisierung und Interfaces auch für externe JavaScript-Bibliotheken nutzen zu können, gibt es das Typings-Projekt, eine Sammlung von Typ- und Interface-Definitionen für all die populären Libraries.
Wer jetzt Blut geleckt hat: Die TypeScript-Doku ist laut Daniel sehr gut. Darüberhinaus hat Damiel selbst eine kleine Einführung geschrieben. Zu guter Letzt gibt dann noch das exzellente TypeScript Book, das Pattern und Best-Practices dokumentiert.
- [00:35:38] State of the gap
- Abschließend beschäftigten wir noch mit der Frage, ob Adobe Cordova / PhoneGap in Zeiten moderner Browser überhaupt noch benötigt wird. Wir denken schon, auch wenn diese Bedarfsmomente eher selten sind.
[00:56:18] Keine Schaunotizen
- CSS Line Spacing Exposed
- Hier taucht der Autor tief in die Layout-Mechaniken von CSS Zeilendurchschüssen ein.
- Jugend hackt – Mit Code die Welt verbessern
- „Jugend hackt“ ist eine Veranstaltungsreihe, die bundesweit stattfindet, sowie in der Schweiz, und die junge Leute an das Thema „Programmieren“ heranführen soll. Dafür werden kontinuierlich erfahrene Mentoren gesucht, die den Neulingen helfend zur Seite stehen. Vielleicht wäre das ja auch mal was für Euch?
Auch dieses Jahr waren wir auf der Düsseldorfer beyond tellerrand, wo wir nicht nur fantastische Talks gesehen, sondern uns auch wieder jemanden zum Ausfragen geschnappt haben. Anstatt dass es wie sonst nur ein Interviewpartner war, ergab es sich, dass wir derer drei zusammenbekamen: Während drinnen Vorträge liefen, starteten Rodney und Schepp mit PPK und Chris Heilmann ein, und zur Pause gesellte sich spontan noch Jeremy Keith dazu. Im Hof des Capitols sitzend sprachen wir, wie sollte es in dieser Runde anders sein, über übertriebenes Tooling und die Kaputtheit des Webs. Für die Ton-Qualität, die eher mittel (und heftig geräuschgefiltert) ist, entschuldigen wir uns, aber ein Interview im Innenbereich war für uns ebenso wenig praktikabel. Viel Spaß beim Hören!
Es war mal wieder an der Zeit, dass wir uns Gäste zur Verstärkung ins virtuelle Studio holen. Nachdem sich die letzten Revisionen viel um Content Management Systeme die Arbeit als Frontend-Entwickler mit ihnen gedreht haben, lag es nahe, dass wir uns mal mit den Leuten hinter dem rein API-basierten „headless“ CMS Contentful unterhalten. Aus Berlin zugeschaltet waren Rouven Weßling und Thomas Scholtes.
Wir redeten über die Idee hinter dem CMS und seine Aufteilung in ein Multiuser-Fähiges Backend und fünf Teil-APIs:
Wir erfuhren außerdem weitere schöne Details, nämlich dass Contentful Mehrsprachigkeit, respektive Lokalisierbarkeit ermöglicht. Und auch dass man mit Hilfe der Content Delivery Sync API seine Daten zur Offline-Speicherung im Client regelmäßig abgleichen kann. Wohlwollend nahmen wir zur Kenntnis, dass Rich Content ausschließlich im Markdown-Format verarbeitet wird. Mehrere Seiten lassen sich mit Hilfe von Spaces unter einem Account betreiben. Volltextsuchen sind dank der Search API leicht zu implementieren. Und es lassen sich Webhooks einrichten, die jedes Mal getriggert werden, wenn Inhalte aktualisiert wurden.
Wer nun Blut geleckt hat: Contentful bietet für den schnellen Einstieg eine Reihe von fertigen SDKs und Plugins für JavaScript und alle gängigen serverseitigen Sprachen sowie für diverse Frameworks, native Plattformen und statische Seitengeneratoren.
Zu guter Letzt wiesen wir noch auf ein interessantes Gast-Posting im Firmenblog hin, wo beschrieben wird, wie man mit Contentful und Snipcart sogar ein Shopsystem abbilden kann.
Der einzige Nachteil, den wir während des ganzen Gesprächs an dem CMS ausmachen konnten: Durch die Art und Weise des Hostings lässt sich nicht sicherstellen, dass Inhalte ausschließlich in Europa gespeichert sind (zumindest derzeit).
Wir sind beeindruckt. Salespitch bestanden!
For our 250th episode, we managed to get our greedy hands on no one less than Bruce Lawson from Opera. Having barely returned from a trip to Asia and still dizzy from his jetlag, we managed to extract a whole bunch of classified information on CSS Houdini out of him (also thanks to our German interview style). And a little bit more as well:
Show Notes
- [00:02:01] Safari 9.1
- We talked about the new Safari version, what features it brings, and how it looks like it’s the first installment of a new rapid release cycle.
- [00:12:13] The CSS Houdini Project
- Bruce told us what the purpose of CSS Houdini is, how at came to be, which parts it consists of, and when to expect first experiments shipping to us in a browser (maybe this year already!).
- [00:37:50] Subgrids Considered Essential
- Prompted by a blog post from Eric Meyer we discussed the current CSS Grids spec and how it is badly lacking a subgrids feature.
[00:51:18] Links
- The web accessibility basics
- Accessibility can never be overly discussed. Marco wrote a good roundup on how do accessibility basics right, and he also takes a glimpse at a few more advanced things.
- Simple standalone toggletip widget pattern
- Likewise, Steve Faulkner from the Partiello Group showcases a prototype for an accessible info tooltip widget.
