The Frontenders Kaleidoscope — Ed.5–2018

5 min readApr 14, 2018

“A pug wrapped in a blanket on a bed” by Matthew Henry on Unsplash

Welcome to the fifth edition of the Frontenders Kaleidoscope. Thanks so much to everyone who has clapped, shared, and highlighted the previous editions.

This week there has been a pooper scooper full of releases so, check them out in the list down below. There are also some great articles on performance, Webpack, accessibility and the power of SVG and CSS. Enjoy!

Weekend Reading

Solved With CSS! Colorizing SVG Backgrounds

I am in the process of replacing one of our(MDN Web Docs) uses of icon fonts with inline SVG. There are a load of benefits to this, most notably the increased control over the visual style of the icon, the display quality, and performance improvements. You can read more details about the benefits on the CloudFour blog.

You do lose some of these benefits when the SVG is not inlined but, added to the page in some other way. One of the common ways of using SVG is as a background image set with CSS. In this great article, you will learn how to overcome some of these limitations by using CSS filters.

As a side note, a great tool to learn more about the power of CSS filters by playing around, is cssFilters.co

Animated SVG Radial Progress Bars

Talking about SVG. In this tutorial by Shoptalk host Dave Rupert, you will learn how to use a little bit of JavaScript and SVG to build a radial progress bar.

Lazy Loading Images and Video

Performance is a topic that is on pretty much everyone’s mind all the time. Whether it is for an app or general web presence. Lazy loading cannot only improve the initial load time of a page but, can also be beneficial for users with metered data plans.

In this article Jeremy Wagner talks about the do’s and don’ts of this technique, and the intersection observer API.

Designing Accessible Navigations

Another topic we are currently working on at MDN Web Docs is to improve the accessibility of the site. We have always tried to be cognisant of this. There are skip links in the header that will activate when pressing the tab key on page load. There are however always room for improvement.

Over on UX Planet, Nicholas Kramer posted a great article on topics such as skip links, accessible menu’s, keyboard shortcuts and more.

Traversing the DOM with JavaScript

jQuery has been a wonderful tool and a lot of people and websites still depend on it. It is also a great learning tool to get new people into using JavaScript. JavaScript, and browsers, has evolved a lot since the days when jQuery was first introduced though, and so people are starting to move away from this dependency.

One of the power tools of jQuery was traversing the DOM in a simple and concise way. When you then move away from jQuery, how do you replace those utility functions with vanilla JavaScript? This article from Zell’s blog is a great resource to help you migrate.

A tale of Webpack 4 and how to finally configure it in the right way

As I have mentioned before, I am looking at using either Webpack or Parcel to rethink and reimplement the front-end pipeline on MDN Web Docs. As such, I have been reading a lot of documentation on both Webpack and Parcel but, also looking to real world experience from others.

Over on Hackernoon, Margarita Obraztsova has written a great article about her experience.

At The Library

DOM Testing Library

A great library by Kent C. Dodds which, in his words, is a: “Simple and complete DOM testing utilities that encourage good testing practices.”

On The Air

Air Mozilla ~ GDPR Expert Panel

I am sure many of you still have a ton of questions with regards to GDPR which will come into effect on May 25, 2018. Watch this expert panel discuss, and answer questions about the impact of GDPR, and what you need to do.

Notable Releases

browser-compat-data v0.0.31
Handbrake v1.1.0
Husky v1.0.0-rc.1
Sonarwhal v1.5.0 ~ Also see all the dependencies which have all been updated
TestCafe v0.19.2-alpha3
Prismjs v1.14.0
Privacy Badger 2018.4.10
Talk v4.3.1
Grunt-UnCSS v0.8.3: More ES6 updates.
semantic-release v15.1.6
Prettier 1.12: Fixes, Features, and Formatting, Oh My!
Atom 1.26.0-beta2
eslint v5.0.0-alpha.1
Discourse v1.9.5

Listen Up

JSParty ~ Oh, the places JS will go

So one, JSParty is back! In this second episode of the new incarnation of JSParty, the participants talk about topics such as Web Bluetooth, Web Torrent, and the power of DSL.

Listen Now

Request for Commits ~ Documentation and the Value of Non-Code Contributions

Over on the interactive examples repo we have been seeing first hand the incredible power of community, and the importance of good documentation.

In this episode the hosts talk with Eric Holscher, co-founder of the incredible Read The Docs, about non-code contributions and the importance of great documentation in the open source world.