Frontend Focus

#​522 — December 22, 2021 | Read on the web

🚀 Looking back: Our frontend highlights of 2021

Hey! Hope you're well. This is the last issue of Frontend Focus that will land in your inbox this year. As such, we're going to take a look back at some of the frontend highlights of the past twelve months.

I've taken a look over the issues we've sent throughout 2021 and pulled together a dozen or so of the top links shared. I hope you'll enjoy looking back and reflecting on the year we've all had building the web. 🧡

So, with Christmas and the New Year just around the corner we'll be taking a short break next week, but we'll be back on the 5th of January with our usual format. As ever, if you've got a great tutorial, video, or article you want to share then please do hit reply and let us know.

Thank you for reading, and catch you in 2022.
Chris ✌️

1: HTTP/3 From A To Z: Core Concepts — This post from the summer explains what HTTP/3 is, and why it has been needed so soon after HTTP/2. It also goes into how it helps improve web performance overall. This is the first post in a three part series - all of which are worth checking out if you want to round out your knowledge in this space.

Robin Marx

2: The State of 'Mobile First' and 'Desktop First' — Is mobile first or desktop first still relevant? Well, this popular article from Ahmad (who we linked to several times this year) explores that very question, outlining the pros and cons of such approaches.

Ahmad Shadeed

Avoid DNS Downtime — Make DNS downtime history with DNSimple! We created this 5-step checklist to help you achieve 100% uptime. Explore our effortless DNS management, along with our robust domain & DNSsecurity for yourself – enter your domain name, and we’ll do the rest. 🎅

DNSimple sponsor

3: Designing Beautiful Shadows in CSS — This excellent tutorial from Josh (shared back in September) takes a considered look at how to use CSS to create “rich, lush, lifelike shadows” and do away with the commonly found “fuzzy grey boxes”.

Josh W Comeau

4: Adobe Photoshop's Journey to the Web — Photoshop in the browser is quite a feat and one of those things that feels like a very real glimpse at the future of the web platform — as such, this post digging into how it's being made a reality resonated with readers.

Thomas Nattestad and Nabeel Al-Shamma

5: HTML with Superpowers — We shared this 45-minute talk all about Web Components in an October issue. It covers how to use them, style them with CSS, and build them with JavaScript. With browser support now being fairly widespread it seems you agreed with Dave: “they’re worth investigating”.

Dave Rupert video

Data Visualization Made Easy with ReactJS, Nivo and InfluxDB — Learn how you can build charts in ReactJS using Nivo and InfluxDB.

InfluxData sponsor

6: Simplifying Form Styles With accent-color — The CSS accent-color property makes it quick and easy to roll out brand colors to certain form inputs by leveraging user agent styles. This article looks at what it does and how to use it alongside color-scheme for simple, accessible checkboxes and radio buttons — and imagines how we might use it in the future.

Michelle Barker

7: How I Made Google’s Data Grid Scroll 10x Faster with One Line of CSS — A surprisingly effective bit of performance spelunking into one of Google's public facing apps.

Johan Isaksson

Shortcut Puts the Agile in Agile and the “Can” in Kanban

Shortcut (formerly sponsor

8: Reducing the Need for Pseudo-Elements — Yes, pseudo-elements still have an important place, but as this blog post from September highlights, we can now leave them behind in some scenarios — thanks to newer CSS properties.

Marcel Moreau

9: 30 Seconds of CSS: Useful CSS Snippets You Can Understand Quickly — This handy collection of CSS snippets has grown since we first shared it, and it remains a popular resource.

30 seconds of code

10: Why Are Hyperlinks Blue? — It's one of those things that you may have never stopped to ponder. If not, this is a deep dive into the history of interfaces and link design over the years, aiming to track down the origin of the blue link we know today.

Elise Blanchard


Engineering Manager - Front End (Remote) — With over 8 million clients, Kraken is one of the world's largest, most successful bitcoin exchanges.

Find Your Next Design Opportunity with Stream — Stream's design team is hiring for a Marketing Designer, Senior Designer, and a Senior UI/UX designer. Join the fast-growing startup, apply today.

Find Frontend Engineering Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

🧑‍💻 Looking to share your job listing in Frontend Focus? There's more info here.

...and finally 🎄

A CSS Christmas ElfYou’ve heard of elf on the shelf, well get ready for… Christmas on the cascade? (sorry 😅) Álvaro has created this using a combination of multiple gradients, masks, and clip-path. There’s even a timelapse video of the process which really helps in understanding how it came together.

Álvaro Montoro