Frontend Focus

#​501 — July 28, 2021 | Read on the web

An Overview of the RenderingNG Architecture — Just how does Chrome render pixels on your screen? This thorough post explains how the components of the RenderingNG architecture work, and how the rendering pipeline flows through them.

Chris Harrelson (Google)

Reflections as the Internet Archive Turns 25 — The Internet Archive has been taking digital snapshots of the web for over a quarter of a century now. Here, Brewster Kahle shares his thoughts on “building a Library of Everything in the digital age”, and creating such a mammoth historical reference.

“I wanted to help make a new medium that would be a step forward from Gutenberg’s invention hundreds of years before”

Brewster Kahle

Get a Software Engineering Job, Guaranteed — With a curriculum built by Colt Steele and 1:1 mentorship from senior software engineers, accelerate your career with Springboard’s software engineering bootcamp. Graduates see an average salary increase of $24,000 and are backed by a job guarantee.

Springboard sponsor

How Do Chrome Extensions Impact Browser Performance? — This report investigates how 1,000 of the most popular Chrome extensions impact browser performance and end-user experience.

Matt Zeunert

NFC Comes to the Web — NFC functionality is now widely available on the hardware side, with browser support slowly gaining (for example: Chrome for Android 91 now supports WebNFC). As such, Sven has been experimenting with the technology and captured his thoughts here (along with a few code examples).

Sven Haiges

⚡️ Quick bits:

  • A six-year old feature request to expose a browser's built-in deep object cloning ability is finally being added to the HTML spec.
  • Here are the latest release notes for Safari Technology Preview — including support for 12 new values for list-style-type.
  • Are you currently having to navigate all that comes with the retirement of IE 11? Here's an FAQ from Microsoft.
  • Frustrations with the current beta version of Safari on iOS continue...

📙 Tutorials, Articles & Opinion

Thinking About the Cut-Out Effect: CSS or SVG? — A real deep-dive look at just how CSS and SVG can be used together to implement a clean ‘cut-out’ effect.

Ahmad Shadeed

How to Create Rich Angular Snackbar Notifications — In this fun and easy-to-follow video, learn how Kendo UI for Angular helps you create better notifications.

Progress Kendo UI for Angular sponsor

Improving A Calculator Form — A web form designer tries to improve a web-based calculator. Goes into a fair bit of detail and explains the rationale behind each change. A considered review.

Chris Annetts

'For Developers, Apple’s Safari is C**p and Outdated' — This spirited piece claims that with “IE now out of the way, the distinction of ‘most-hated browser’ goes to Apple’s Safari”. Perry adds that this decline in approval is “seemingly deliberate and about protecting App Store revenue”.

Perry Sun opinion

Building a Breadcrumbs Component — A foundational overview of how to build a responsive and accessible breadcrumbs component for users to navigate your site.

Adam Argyle

How We Built Markdown Support into Our Low-Code App Builder

Retool sponsor

What I Wish I Knew About CSS When Starting Out as a 'Frontender'
Nathan Hardy

Building a ‘Table Of Contents’ with Active Indicator using Intersection Observers
Ben Frain

Using Google Drive as a CMS
Nathan Babcock


Senior Frontend Engineer - React (Remote) — With over 7 million clients, Kraken is one of the world's largest, most successful bitcoin exchanges.

Exciting Senior Frontend Opportunity - Remote — Develop practical software that has a real impact on the environment, the bottom line of millions of businesses, and the future of energy as we know it.

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

Color Tools and Resources — The team at Smashing Magazine has put together this collection of some useful color tools and resources that they’ve come across.

Cosima Mielke

Salvia-Kit: Beautiful Dashboards Built with Tailwind CSS — Currently includes eight dashboards with each one including a separate template for Next.js, React, Vue, and Nuxt.

Enoch Ndika

Snowflake Generator: Generate a Random or Custom Snowflake Image — One of those things that’s just fun to tweak the settings on and play around with. You can use a button to export as JPG, or just right click the result to download as PNG.

Vivian Wu