The Frontenders Kaleidoscope ~ Ed.14 ~ 2018
Welcome to the 14th edition of the Frontenders Kaleidoscope. This week fostering a web performance culture, accessible landmarks, browsers and image loading, new tools, big releases, and suggested listening. Dive right in.
Reader View
Fostering a Web Performance Culture
Much like we need to foster a culture of accessibility testing, and testing itself, performance is one of the items we need to be much more proactive about. In this article by José M. Pérez provides a extremely detailed write up of how to go about this. He outlines 6 key areas such as testing on hardware that is not your own, in other words, test with throttled devices on slow connections etc.
Learn performance fundamentals, experiment, validate the results of your experiments, celebrate your successes and make performance part of your workflow.
15+ Experts Share Their Web Performance Advice for 2018
Yes indeed, more performance ;) This is an incredible roundup of tips, and links to other resources from people such as stefan judis, Chris Coyier, Peter Hedenskog, Peter Cooper, Harry Roberts, and Aaron Gustafson to name but a few. Be ready to spend some time on this one, and follow all the great external references they provide.
Accessible Landmarks
Over on his blog Scott O'Hara wrote a great article covering landmarks in HTML document. How they are exposed to various assistive technologies, how to make the best use of the landmarks, which elements natively expose landmark roles, and which needs a little more help via ARIA roles.
This is definitely yet another one of those scenarios where making a site more accessible benefits everyone. Great read.
Image Inconsistencies: How and When Browsers Download Images
This is an extremely interesting article from Harry Roberts(aka Harry Roberts), and definitely good information to have with regards to how you choose to add images to your sites. The information with regards to the behaviour of browser with the <img /> tag is especially puzzling.
Introducing the GraphQL Guide
In last week’s show notes I posted some links on GraphQL as I am experimenting with it on a side project. I have to say the more I use it, the more I understand all the noise about it. I was therefore very happy to read that, because of their extremely positive experience with it over at Khan Academy, John Resig and Loren Sands-Ramshaw is writing a book titled the GraphQL guide. John posted a nice writeup on how they are transitioning to GraphQL at Khan Academy, and what to expect from the book.
A Bitter Guide To Open Source
One of the, if not the best post I have read on how and why to get into open source. Hart felt, no bullshit, cut right to the core. All “wrapped up nicely” with real world advice you can take to the “bank”. Written by Ken Wheeler, director of Open Source at Formidable. Go, go read it now.
BEM For Beginners: Why You Need BEM
Strangely enough even after years of creating for the web, and writing tons of CSS, I have never really embraced a methodology. There are some code style and best practices I follow of course, but I have honestly not really looked with any attention to things such as SMACCS, OOCSS or BEM. Well, that is all about to change ;p
Over the last few weeks I have been doing some ready and glanced at docs and articles on the above mentioned three approaches. To be honest, I also looked at Atomic CSS but, I came away feeling that it is going to add more complexity and maintenance. The most likely candidates are SMACCS and BEM, with that latter seeming to lead the pack. To that end, this seems to be the article to read if you want to decide whether BEM is for you.
Resilient, Declarative, Contextual
Over on his blog Keith J Grant writes about the three aspects of CSS that makes it different from other programming languages. It is a great read, and a good reminder of the aspects of CSS that we should embrace instead of trying to stuff into an ill fitting box. The old adage of embrace the cascade. Especially the section on the contextual nature of CSS in insightful.
Tool chest
Landmarks Browser Extension
A neat browser extension for Chrome, Firefox and Opera. It allows you to navigate a web page via WAI-ARIA roles via a pop-up or keyboard shortcuts. Besides the usefulness of it’s main feature, it can obviously double as a neat testing tool to see how navigable your site is. Well worth checking out.
Polly.js
A record, replay, and stub library for HTTP requests from Netflix engineering. From the project page:
Keeping fixtures and factories in parity with your APIs can be a time consuming process. Polly alleviates this by recording and maintaining actual server responses without foregoing flexibility.
Release Watch
- Parcel v1.9.2 ~ Read the release post
- Gatsby v2-beta ~ Read the release post
- pickr v0.1.3 ~ No dependency JS colour picker
- Workbox v3.3.0
- eslint v5.0.0 ~ Read the release post
In Vision
Bruce Lawson — World-Wide Web, not Wealthy Western Web
Related to one of the points highlighted in José’s post, Bruce Lawson gave a great talk in 2016 at the Fronteers conference.
The Hunt for the Unicorn Performance Metric — Tammy Everts
So, of course we want our sites to be fast. But what exactly is fast? What is slow for that matter? What is the best metric to use when determining your performance budget? In this video Tammy Everts from Speedcurve does a thorough walk through of these topics. In the end, the answer is really more along the lines of “it depends” ;) It depends on what is meaningful to your users. One of the really interesting metrics that is discussed is what they call at Speedcurve, hero timing. A very insightful video.
Browserland
Firefox 61 Released
Firefox 61 has been promoted from Beta to Release today. Here are some of the highlights for developers:
- The Accessibility Inspector has been implemented.
- CSS variables now autocomplete
- The Network Monitor’s details pane now includes a Cache tab, which displays information about previously cached resources
- The grid-gap, grid-row-gap, and grid-column-gap properties have been renamed to gap, row-gap, and column-gap, as they are no longer grid-specific
- The CSS :host pseudo-class is now supported; this selects a custom element from inside its shadow DOM
- The String.prototype.trimStart() and String.prototype.trimEnd()
- The PerformanceServerTiming API has been implemented.
You can read the complete release notes over on MDN Web Docs.
Listen Up
The ShopTalk Show ~ Customer Experience with Gerry McGovern
A spirited and super interesting talk from Gerry McGovern on the art and science of user experience on the web. tl;dr Honestly care about your customer/user. Definitely well worth the listen.
JSParty ~ Do what every developer does: blame other people
Nick Nisi, Suz Hinton, and Jerod Santo talk about their goto methods for debugging in the browser, and shares some really neat tips you may not know about Devtools, and JavaScript.
That is it for this edition. I will have more to share in the next edition. Go make something amazing, and always stay curious.
