Frontend Focus

#​527 — February 2, 2022 | Read on the web

Push Notifications, WebXR, and Better PWA Support Coming to iOS — Notable changes to the web platform on iOS are on the way, including icon support in the manifest, Web Push, AR, and VR experiments — as Max explains in excellent detail here. Tangentially, here's Apple’s release notes for the latest Safari beta.

Maximiliano Firtman

Memory Leaks: The Forgotten Side of Web Performance — An even-handed take on the importance of memory leaks, even though the “effort-to-payoff ratio” is often seen as “disappointingly high”.

Nolan Lawson

Take Part in the Biggest Research Survey for Frontend Devs — The State of Frontend 2022 survey is here for you to power through some exciting questions. Help the frontend community see the big picture - we got 4500 participants in 2020, so let’s make this bigger.

The Software House sponsor

What Web Frameworks Solve and How To Do Without Them — Dives deep into a few technical features that are common across frameworks, and explains how some of the different frameworks implement them and what they cost.

Noam Rosenthal

A Complete Beginner's Guide to npm — A nine-part guide from CSS Tricks covering everything from the ground up. If you’re a long time JavaScript developer, npm may be second nature, but nonetheless this guide to npm may prove useful, if only to share with folks on your team.

Josh Collinsworth

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

▶  How Does !important Actually Work? (It's Not What You Think) — CSS !important does more than just increase the important of a style rule, it inverts the CSS cascade — as explained in this 8-minute video.

Una Kravets

The Baseline for Web Development in 2022? — Analysis of numerous stats around frontend technologies, browser share, and more to establish a feel for what the lowest common denominators are in terms of what we must support.

Alan Dávalos

Visualize Real-Time Data with InfluxDB — How to use the React-based Giraffe visualization library to gain meaningful insights from streaming data.

InfluxData sponsor

WebAssembly Feature Detection — A look at how to use the newest WebAssembly features while supporting users across all browsers. In this related piece, Harshal Sheth talks about how the tech is now at an "inflection point" — with adoption expected to balloon over the next few years.

Ingvar Stepanyan

Use Cases For CSS fit-content — A short article on some of Ahmad’s favorite use-cases of CSS fit-content.

Ahmad Shadeed

Background Shift Animation with CSS Blend Modes — Here’s how to achieve a neat background color shift transition effect using CSS Blend Modes and a multi-layer animation. Demo here.

Mary Lou

Fluid Type Sizes and Spacing — Developer Piper shares why they use a fluid type and spacing system and how you may want to approach a similar type set up.

Piper Haywood

How to Keep Up with Web Development Without Falling Into Despair
Baldur Bjarnason

'Most Websites Are Implicitly Designed with A Short Lifetime'
Chris Siebenmann

Six Things to Consider Before Changing Fonts on a Site
Oliver Schöndorfer


Software Engineers (Frontend, Backend, Fullstack, DevOps) — Bird Eats Bug combines screen recording with technical logs. Join us to help more engineers debug 30% faster (on average).
Bird Eats Bug

Senior JavaScript Engineer — Join our dev team and help develop, test, document and maintain our JS driven web applications.

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 & Resources

OpenMoji: Open Source Emojis for Designers and Developers — Currently includes ~4,000 handcrafted emojis that all follow a consistent style, searchable by keyword or category.


Gradient Generator: Create CSS, SVG and PNG Color Gradients — Gradient generators are a dime-a-dozen, but this one has some useful features: Includes conic gradients, gradient layering, and automatically adds colors to prevent loss of saturation.


Doppler - All Your Environment Variables in One Place

Doppler sponsor

Open Props: Supercharged CSS Variables — These are essentially small plug-and-play components made up of predefined CSS variables that you can use to build your own design systems, components, or use alongside other frameworks.

Adam Argyle

Runno: A Browser-Based Code Runner That Can Be Embedded As An IFrame or Used as a Library — The browser-based version, which is similar to tools like JSFiddle and CodePen, includes runtimes for JS, Python, SQL, C, and C++.

Ben Taylor

Announcing PWA Studio, The VS Code Extension for Building Progressive Web Apps
Justin Willis