Frontend Focus

#​505 — August 25, 2021 | Read on the web

Decoding AVIF: A Deep Dive with Cats and Imgproxy — It’s been nearly a year since we shared Jake Arbibald’s piece on the ‘arrival of AVIF’. Now, browser support is not quite there just yet, so this article shows us how to actually implement this modern image format today using imgproxy. We also get an excellent explainer on AVIFs benefits — all told with cute cat example images.

Polina Gurtovaya and Andy Barnov

Why WebKit Supports AVIF But Safari Does Not
Jon Henshaw

You Can Write Your Own Angular Data Grid, but Why? — Data grids are a daunting task. We work hard to make the task not only easy and enjoyable. Kendo UI for Angular's data grid is fast, full-featured, & customizable. And part of a 100+ component library. Learn more with component info, blogs, & demos.

Progress Kendo UI for Angular sponsor

canistilluse​.​com — When looking up a certain feature on Jim asserts that “there’s an incredible assumption many of us make when interpreting its UI” — that given enough time everything will go green and stay that way. What happens when Web functionality goes away?

Jim Nielsen

HTTP/3: Performance Improvements — This is part two of Robin’s deep-dive into QUIC and HTTP/3. This time it’s a close look at the performance improvements of HTTP/3, congestion control, head-of-line-blocking, and more. Part one looked at the broader concepts of the HTTP/3 protocol.

Robin Marx

⚡️ Quick bits:

🗓 Upcoming Events:

📙 Tutorials, Articles & Opinion

Key Data Structures and Their Roles in RenderingNG — Explains the components of the RenderingNG architecture (frame trees, display lists, etc), and how the rendering pipeline flows through them.

Chrome Developers

Native Search vs. Jetpack Instant Search in Headless WordPress with Gatsby — A look at how to implement search on a Gatsby site connected to headless Wordpress. The first option uses the built-in Wordpress search via the API. The second works to improve search using Jetpack Instant Search.

Paulina Hetman

Performance in Progress — Here’s an overview of the performance improvements the Firefox team have been implementing over the past six months, including changes to responsiveness, security, and web standards.

Kim Moir

Why Use a Time Series Platform for Application Performance Monitoring

InfluxData sponsor

Static vs. Dynamic vs. Jamstack: Where's the Line? — A useful attempt to define the distinction between what's just a static site, what's a Jamstack site, and what's dynamic. [→ Via our Jamstack newsletter.]

Mike Neumegen

Accessibility of the <Section> Element — Advice/thoughts on using the <section> element in a semantically appropriate way.

Scott O'Hara

Creating an Interactive Gantt Chart Component with Vanilla JS — Coding a Gantt chart (commonly used as a way to visualize schedules) as a reusable Web component, covering the architecture of the component, rendering the calendar with CSS Grid, and managing the state of the draggable tasks with proxy objects.

Anna Prenzel

The Big Gotcha with CSS Custom Properties — Something to be aware of.

Chris Coyier

Does Shadow DOM Improve Style Performance?
Nolan Lawson

How to Build a Portfolio Site with Next.js and Tailwind CSS
Manu Arora

Six CSS Shorthand Properties to Improve Your Web Application
Carmine Scarpitta


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.

Frontend Engineer React.js - Cloud App (Remote) — We aim to provide the best developer experience for load & performance testing. Join our fully remote Frontend team of 4, while k6 is growing.
K6 - A Grafana Labs Company

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.

🔧 Code, Tools and Resources

wavesurfer.js: Navigable Waveforms with Web Audio and Canvas — If you’re creating a podcast player, audio experience, or anything where seeing an interactive audio waveform could be useful, check this out. Peaks.js from the BBC is also worth exploring in this area.

katspaugh and contributors

Notistack: A Library for Easy Snackbar/Toast Notifications — You can try out a whole slew of demos and an API reference on the docs site.

Hossein Dehnokhalaji

Exclusive: Get Retool Free for Up to a Year and $160,000 in Startup Discounts — Retool for Startups bundles access to tools such as Retool, AWS, MongoDB, Brex, and more—so startups can build great internal tools, for free.

Retool For Startups sponsor

TailwindCSS Buttons: A Unique Collection of Copy & Paste Tailwind Buttons — Lots of attractive and different options for buttons here and if that’s not enough, here’s another set of CSS-only buttons gleaned from various open source projects.

Tony Lea

v-lazy-image: A Vue.js Component to Lazy Load Images — Uses Intersection Observer and then progressive rendering with CSS animations to keep things smooth. CodeSandbox demo.

Alex Jover

'how i experience web today' — A frustrating and wholly accurate recreation of just trying to read an article on the modern web. We can do better.


💬 "Code is there to explain the comments to the computer."

Andy Harris (via CodeWisdom)