Frontend Focus

#​523 — January 5, 2022 | Read on the web

🚀 Hello 2022!

Hey! 👋 Hope you're well — thank you for opening the first issue of the year! After a festive break, we're back and ready to keep you updated on all things frontend for another year.

If you missed our last issue, we took a look back over some of the highlights shared in Frontend Focus throughout 2021 (you can read it here — there's plenty of good stuff worth reading). Also, whilst I've got you, you may want to follow our accompanying Twitter account, sharing helpful resources and handy links most days.

Anyway, that's all from me. All the best for 2022!
Chris ✌️

The Browser Rendering Cycle, Hardware Acceleration & Compositor Layers — A detailed read that aims to give the reader a solid understanding of the rendering cycle, how to analyse it with available tools, and minimise the work necessary to deliver frames – something that’s essential for a performant frontend.

Matthew Costello

Course: Dynamic CSS with Custom Properties (aka CSS Variables) — Join Lea Verou and learn how best to leverage Custom Properties - a revolution in how we write CSS. This detailed course will see you improve code reuse, maintainability, and enable possibilities that previously required large amounts of JavaScript.

Frontend Masters sponsor

Improving Core Web Vitals, A Smashing Magazine Case Study — How Smashing Magazine went about improving their own Core Web Vitals, with details on detection, how they fixed any bottlenecks, and ended up with green scores across the board.

Barry Pollard

Frontend Developer Resources for 2022 — Nick has compiled a list of stuff he found to be compelling throughout 2021. Lots of good stuff here including videos, tutorials, and resources on things such as CSS, JavaScript, animation, testing, and more.

Nick Taylor

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

▶  Generating Your Color Palette in CSS — Jake Archibald and Surma (who is leaving Google after 7 years) sit down to discuss Color Spaces — touching upon device capabilities, color mixing, contrast calculations, and more.

Google Chrome Developers

Metaphors We Web By — An interesting post looking over the history of our metaphorical understanding of the web.

Maggie Appleton

Container Queries — This incoming CSS feature will allow developing components that respond to their container’s width and other properties.

Stephanie Eckles

Doppler - All Your Environment Variables in One Place — Stop struggling with scattered API keys and avoiding access controls. Keep your team and servers in sync with Doppler.

Doppler sponsor

'CSS Underlines Are Too Thin and Too Low in Chrome' — Šime has encountered two bugs in Chrome while testing the new CSS text-decoration-thickness and text-underline-offset properties as shared here.

Šime Vidas

Should CSS Override Default Browser Styles? — Every CSS ruleset you write will likely changes the defaults of something. But should CSS override browser defaults defaults?

Chris Coyier

Building Gatsby Themes for WordPress-Powered Websites
Paulina Hetman

▶  The Six Most Important CSS Concepts for Beginners
Kevin Powell

Smoothly Reverting CSS Animations
Nikola Đuza


Frontend Developer Excited About Internet of Things? — Great opportunity to join a remote-friendly company positioned for exponential growth, working with emerging technologies and tools. Apply now.
Dimension Four

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.

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.

🔧 Code, Tools and Resources

Non Boring Gradients: Online Tool to Build Gradients That Look Good — As the author explains, this takes advantage of non-sRGB interpolation spaces and non-linear easing, evidently making the gradients more appealing.

Tom Quinonero

Try JavaScript Online: Simple Web-based JavaScript Console Input — This is a console side-by-side with a web page, so you can run script snippets while learning. The default example web page is Eloquent JavaScript but you can enter any online resource.

Jakub T. Jankiewicz

Buildkite Is Now an Official AWS Graviton Ready Partner. Read All the Details Here

Buildkite sponsor

HTML Mocker: A Script to Mock Dynamic Data in HTML for Automatic Responsiveness Testing — Just add the script to a page and it will randomize the innerText content for elements based on constraints you can define via HTML classes.


Guess CSS: An Interactive HTML & CSS Game — An interesting game to test your CSS layout knowledge. Based on a visual layout, select which code example matches. You can even filter which CSS features you want to be tested on.

Aleksei Berezkin

Inspect: Figma Plugin to Export to HTML, React, or Tailwind