The Frontenders Kaleidoscope ~ Ed.6 ~ 2018

5 min readApr 22, 2018

Welcome to the 6th Edition of Frontenders Kaleidoscope. This week, more news and interesting reads than you can shake a stick at. So, let’s dive right in.

Reader View

Preload with font-display: optional is an Anti-Pattern

Zach Leatherman sets the record straight on using font-display: optional; with preload. tl;dr — Preloading a font set as optional is a wasted HTTP request.

Best Practices With CSS Grid Layout

Grid along with Flexbox is changing the way, and the possibilities, with regards to design and layout on the web. There is a lot of freedom, and new wonderful experiences to build for users of modern browsers. But surely there must be caveats, gotchas and other nasty little surprises to watch out for. Ways we should not be using Grid?

Well, there are few people more skilled than Rachel Andrew to guide you along the way.

Going Offline

I have already pre-ordered Jeremy Keith’s upcoming new book Going Offline from A Book Apart but, this week there was a neat little surprise for everyone. The first chapter of the book has been published on the A List Apart website. Enjoy!

And in related news ~ Table of Contents for Going Offline

Introducing the Accessibility Inspector in the Firefox Developer Tools

The built-in Firefox Developer Tools just received a new family member. The Accessibility Inspector allows you to inspect your website’s exposure to assistive technologies.

In this great post Mozilla’s Marco Zehe explores this new tool, and demonstrates all that this tools is, and is not. A great addition to your tool chain indeed.

In Motion

“Playful dolphin sticking head out of water in pool in Loro Park” by Damian Patkowski on Unsplash

Design for a Viewport

In this episode of Layout Land, Jen Simmons posets that the way we design, and think about designing for the web is not quite accurate, and a rethink is in order. She draws parallels between the movie industry, storyboarding and the viewport as a way of approaching designing for the web from a new, more accurate, perspective. Super interesting and well worth your time. From the video:

The web is a medium that has a viewport. What does it mean to truly be designing for the web — a medium that reveals the page slowly, from inside a viewport frame?

Tool-chest

Webassembly.Studio

Started in December 2017, it is a merging of WasmExplorer and WasmFiddle. Webassemble Studio is, and I quote “an online IDE that helps you learn and teach others about WebAssembly. It’s also a Swiss Army knife that comes in handy whenever working with WebAssembly.” — Hacks Blog

OctoTree

Time to pimp your Github and improve the way you browse source code in repositories. I have been using this tool for a little over a week now, and I am loving it. From the repo

Browser extension (Chrome, Firefox, Opera and Safari) to show a code tree on GitHub. Awesome for exploring project source without having to pull every single repository to your machine.

Notable Releases

Browser Releases

Chrome 66 Stable

Blackboxing in the Network panel
Auto-adjust zooming in Device Mode
Local Overrides with styles inside of HTML
Autoplay policy changes

Chrome 67 Dev Channel

CSS variable value previews in the Styles pane
New audits, desktop configuration options, and viewing traces
User Timing in the Performance tabs
and more

Listen Up

ShopTalk ~ JAM Stack with Phil Hawksworth

Static site generators are a dime a dozen these days. There is a good reason for this. There is a lot performance gains to be had, and hosting is dead simple. It’s just HTML really. There is more to all of this though. From the episode:

We’re joined by Phil Hawksworth to talk about the benefits of static sites as well as work through some of the objections people often have to using a static site in 2018.

Listen Now

The Changelog ~ Live coding open source on Twitch

Live streaming gaming has been a thing for some time on both Youtube and specifically Twitch. Over the last year or so, more and more developers have started to get in on the action. From the episode:

Suz Hinton joined the show to talk about live coding open source on Twitch. We talk about how she got interested in Twitch, her goals and aspirations for live streaming, the work she’s doing in open source, Twitch for open source, how you and others can get started — and maybe some other fun stuff we have in the works at Changelog.