The Frontenders Kaleidoscope ~ Ed.7 ~ 2018

5 min readApr 29, 2018

Welcome to the 7th edition of Frontenders Kaleidoscope. These are definitely no longer following a very predictable release schedule ;) Better late than never right? This week is packed with releases both notable and good to know. Wasm is all over the new, and for good reason, and to my delight, it seems that accessibility is coming to the foreground more and more. Love it!

With that, dive right in.

Reader View

Hello wasm-pack!

A great introductory article by ashley williams covering the current and future plans for wasm-pack. From the article:

wasm-pack is a tool for assembling and packaging Rust crates that target WebAssembly. These packages can be published to the npm Registry and used alongside other packages. This means you can use them side-by-side with JS and other packages, and in many kind of applications, be it a Node.js server side app, a client-side application bundled by Webpack, or any other sort of application that uses npm dependencies.

More accessible markup with display: contents

Great article by Hidde de Vries on avoiding flatter markup, which effects the semantics and accessibility of your markup, with display:content when using Grid layout. From the article:

CSS Grid Layout lets you turn an element into a grid, and place the element’s direct children onto it. Given that, it might be tempting to use flatter markup, but less meaning is usually less accessibility. With display: contents, we can place grand children on a grid, which lets us have accessible markup and beautiful layout.

Using the `for` Attribute on the `output` Element in HTML5

Using the for attribute on label elements to associate it with an input field aids the accessibility and usability of forms. In this post Louis Lazaris demonstrates that the same accessibility benefit can be achieved using for with the output element. From the post:

The main benefit here is in terms of accessibility and semantics. The HTML5 Accessibility project lists the <output> element as “Accessibly supported” and “mapped”, so the functionality opened up by this feature is available to screen readers if they choose to implement it.

Animating Progress

Jonathan Snook goes over getting an animated, cross-browser progress bar using the progress element. He finds that not much has changed:

The <progress> element has been in browsers for years. (Lea Verou worked on a polyfill back in 2011!) One might expect that after all these years, things are rock solid. Turns out, not much has changed over the years. It’s still a mess and the process of animating the <progress> element is… not at all smooth.

Notable Releases

CSS-Blocks and Opticss

A new toolchain for CSS has been released by Linkedin as open source:

CSS Blocks is an ergonomic, component-oriented CSS authoring system that compiles to high-performance stylesheets.
By combining an opinionated authoring system, build-time analysis and rewriting of templates, and a new type of CSS optimizer, css-blocks breathes new power and ease of use into the technologies and best practices that stylesheet developers already know and love.

Introducing sonarwhal v1: The linting tool for the web

I have mentioned sonarwhal previously and now it has reached the milestone of v1. From the announcement:

Just over one year ago, we started working on a best practices tool for the web called sonarwhal — a customizable, open-source linting tool, built for modern web developer workflows. Today, we are announcing the release of its first major version. With today’s launch, we’d like to talk you through a look back at how sonarwhal started, and the journey to v1 over the past few months.

Other Releases

Theatre

Zell Liew: What Writing About Frontend Dev Taught Me About Communicating

An impassioned, powerful, inspirational talk at this years’ JSConf.Asia by Zell Liew. In a world that feels and looks so hard and unforgiving these days, it is up to each on of us to be more human. Be more empathetic, do the work, and put ourselves out there. No matter the inner, and external critics. Thanks Zell.

Listen Up

The Changelog ~ Code Cartoons, Rust, and WebAssembly

This week on the The Changelog podcast, the hosts were joined by Mozilla’s Lin Clark, talking about code cartoons, Rust, and the present and future of WebAssembly. Not to be missed. From the show:

Lin Clark joined the show to talk about Code Cartoons, her work at Mozilla in the emerging technologies group, Rust, Servo, and WebAssembly (aka Wasm), the Rust community’s big goal in 2018 for Rust to become a web language (thanks in part to Wasm), passing objects between Rust and JavaScript, Rust libraries depending on JavaScript packages and vice versa, Wasm ES Modules, and Lin’s upcoming keynote at Fluent on the parallel future of the browser.

Listen Now

The Web Platform Podcast ~ React 16 — Fiber and Beyond

The version 16 release of React is not new any longer but, if you did not catch all the details of what went into this release, and what is planned for the future. The this talk with core team member Andrew Clark will bring you up to speed. From the show:

In the past few years React has become a mainstay in the front end development community and React 16 has more to offer than ever. This week our hosts chat with Andrew Clark of the React core team about some of React’s history as well as some of the new exciting things in React 16 and beyond.