Frontend Insights — October

A collection of useful resources from around the internet.

BlurHash

A compact representation of a placeholder for an image — (3 min read)

If you are using a tiny blurred version of your image as a placeholder, or even worse, no placeholder at all, then might just be the right tool for you.

With BlurHash you can serialize your image into a tiny string which you then use as the image placeholder. This in turn makes both your users and your designers happy. 😊

Dag Ågren provides a nice summary of his experience with creating the algorithm and eventual push towards open-source.

Tags: Beginner, CSS, UI/UX, Performance

CSS: focus-visible

A (new) way to manage button outlines — (3 min read)

The focus outline has been a thorn in the side of many designers and web developers for a long time. Unfortunately, a lot of the time this has been solved by a rather innocent-looking :focus { outline: none; } which is probably .

However, with recent browser updates, the :focus-visible comes to the rescue allowing us to get rid of the outline for mouse users while keeping the behavior once the focus is triggered by the keyboard.

Matthias Ott describes this in further detail and even includes a bit of CSS you can copy-paste into your projects to start using this immediately.

Tags: Beginner, CSS, UI/UX, Accessibility

Webpack 5 from scratch

How to bundle JavaScript, images, fonts, and styles for the web — (12 min read)

Tooling is the bread and butter of modern web development. It’s then no wonder that we ended up with tools to manage our other tools. And one such tool managing tool is . Although it has been around for a (relatively) long time, many devs still treat it as a black box that just “does its thing”.

Tania Rascia lifts the veil on this mysterious webpack.config.js in her step by step tutorial.

Tags: Intermediate, HTML, CSS, JS

Responsive Height Design

Thinking vertically in CSS — (8 min read)

So you created your web page, added a couple of min-width breakpoints in your CSS, made sure it works for those and called it a day. After all, this is what mobile-first responsive design is about right? Well, that’s just partially true, although it is responsive it is so only in the width department.

“But height is where the scrolling happens, it adjusts automatically.” Yes, that may be true, but more often than not there are elements on the web that are not scrollable and those could benefit from a little min-height love. ❤️

Ahmad Shadeed includes some other examples along with tips and tricks to help you optimize your web for different heights.

Tags: Intermediate, CSS, UI/UX, Accessibility

Cumulative Layout Shift in Practice

The SEO metric for user frustration — (25 min read)

The Visual Stability is one of the 3 main pillars of and is measured via the Cumulative Layout Shift (CLS) metric. This specific metric represents the scale of unexpected layout jumps across the website.

Websites above a certain threshold receive an SEO penalty so it is good to keep this in check with tools such as or .

Nic Jansma wrote an extensive article that covers pretty much everything you need to know about CLS and more. 🤓

Tags: Expert, UI/UX, Performance, SEO

Highlight of the month

The long-awaited release of React 17 is finally here… or not.

Actually, the React dev team decided to release v17 with no new features and instead it will serve as a stepping stone for React 18 to facilitate an easier transition between major versions. As such it is strongly recommended to update now and avoid some headaches later on.

However React 17 does come with the , the result of cooperation between React and Babel dev teams. This functionality has also been backported to previous major releases for convenience.

So yeah, we can now stop eagerly awaiting React 17 and start looking forward to React 18. 😅