Frontend Focus

🇺🇦 #​533 — March 16, 2022 | Read on the web

New WebKit Features in Safari 15.4 — This is a big release from the Safari team, with support for several new web technologies, along with plenty of updates, and fixes. Expect details on lazy-loading, <dialog>, :has(), Cascade Layers, viewport units, focus-visible, accent-color, and much more.

Jen Simmons & Jon Davis (WebKit)

Ten Years of Page Bloat: What Have We Learned? — Just how big are pages today versus a decade ago? How does page bloat hurt your business? How does it affect Google’s Core Web Vitals? What can you do to fight it? This well-rounded post digs into all this (with plenty of visuals to help things along).

Tammy Everts

Streamline and Evolve Your Workflows With Shortcut — All of your development work easily flows through Shortcut, from coding to review to release, and then to the bugs and the fixes that inevitably follow. Try project management for today's (and tomorrow's) software team.

Shortcut (formerly sponsor

'When' or 'If': A CSS Naming Debate — The CSS Working Group is currently considering a generic conditional/fallback structure (for things such @supports and @media) and is currently at something of a loggerheads over what, specifically, to name it. Eric outlines here how it’s a thornier issue than you might expect.

Eric Meyer

WebGPU — All of the Cores, None of the Canvas — The WebGPU is an upcoming Web API that exposes a lot of capabilities of the client's GPU hardware. This post digs into how things work in excellent detail — now, there’s a bit of learning curve to all this, but Surma sets out to make it accessible, explaining how the API will prove beneficial to us.. one day!


⚡️ Quick bits:

đź“™ Tutorials, Articles & Opinion

Aligning Content In Different Wrappers — A look at how to align content with another section, across all viewport sizes, given that they are placed in different wrappers.

Ahmad Shadeed

▶  Building VR and AR Experiences using HTML — Ada Rose Cannon from Samsung Internet chats with Jake Archibald of the Chrome team about VR & AR web standards, and how you can build immersive experiences using markup.

Google Chrome Developers

Making the 'World’s Fastest Website', and Other Mistakes — An insightful look into some real-world performance considerations for a popular ecommerce site.

Taylor Hunt

How to Use Rustlang’s Async Tokio for CPU-Heavy Jobs — Yes, you can use Tokio for heavy data processing tasks — see how.

InfluxData sponsor

▶  Create a Stunning 'Glassmorphism' Effect in CSS — A 15-minute step-by-step guide to creating immersive background effects using the backdrop-filter and background-clip CSS properties.

Zoran Jambor

Don’t Alienate Your User: A Primer for Internationalization & Localization — A look at how i18n and l10n can help you serve a wider audience: “The web should be an inclusive place for anyone.”

Sophie Clifton-Tucker

▶  Who Says HTML and CSS Aren't Real Programming? — Among other topics (including security, skills training), this half-hour episode touches upon how sites like MySpace, Tumblr, and the GeoCities of the world introduced an entire generation to coding. There's a transcript here if you'd prefer.

The Stack Overflow Podcast podcast

Animation Performance Fundamentals: How to Make Your Pages Look Smooth
Reza Lavarian

How Much CO2 Does Creating a 1,000-Word Piece of Content Cause? — Also how much wood would a woodchuck chuck if a woodchuck could chuck wood?
Gerry McGovern

How Many Hyperlinks Are Too Many for Accessibility?
Bureau of Internet Accessibility


Fullstack Engineer (Remote, EU Timezones) — We’ve built a product thousands of people love (See Trustpilot if you don’t believe us). We need your help with Node & TypeScript.

Senior Front-End Developer (Remote) — Get featured directly to tech companies hiring Frontend developers right now. Land an interview in as little as 24 hrs.

Join the Remote Work Revolution — We offer the freedom of freelance with the security of full-time. Start working remotely with the world’s top clients today.

🔧 Code, Tools & Resources

Fluent Icons: 4000+ Modern Open-Source Icons from Microsoft — This project is not affiliated with Microsoft, but it’s a searchable website where you can find and download Microsoft’s icons in various formats (PNG, SVG, etc).

Fayaz Ahmed

SingleFile: Browser Extension and CLI Tool to Save a Complete Page as a Single HTML File — Uses the WebExtensions API, so this is compatible with all the major modern browsers.

gildas lormeau

Announcing Build Matrix

Buildkite sponsor

Animate CSS Grid: Painless Transitions for CSS Grid — A bit of an older project, but a neat effect, which you can try using this CodePen demo.

Alex Holachek

HTMLShell: A Visual HTML Template Editor — We’ve seen lots of tools like this before, but this one has quite a few options to include various meta tags, stylesheets, analytics, and more — all easily toggled on or off.


Nextacular: Open-Source Starter Kit to Quickly Launch Multi-Tenant SaaS Apps
Arjay Osma