đź‘‹ Hey folks. The Chrome Dev Summit took place last week, as such a fair few of the items this week link to news / articles off the back of that. Thanks for reading!
Chris Brandrick, your editor

Frontend Focus

#​516 — November 10, 2021 | Read on the web

Everything Announced at Chrome Dev Summit 2021 — A roundup of all the key announcements from the 2021 Chrome Dev Summit, with the links you need to find out more. Una Kravets has a succint five-minute recap video here if you'd prefer that.

Rachel Andrew

The Browser Wars — Jay’s excellent long-running Web History series returns, this time with a focus on the fierce browser wars of the late 90s amongst the likes of Microsoft, Netscape, and Mozilla.

Jay Hoffmann

Implementing Batch Editing in an Angular Data Grid the Easy Way — Use this tutorial to learn how to use Kendo UI for Angular to create a Data Grid that allows updates and saves in bulk.

Progress Kendo UI for Angular sponsor

Chrome's New Feature to Record and Replay User Flows — It’s only a preview feature in Canary builds right now, but Chrome is adding a new Recorder panel to its DevTools which lets you record and replay a string of actions on a page (including under simulated slow network conditions). You can also measure the flow and get a performance trace for analysis. Minko Gechev shared a video of it in action over on Twiter.

Jecelyn Yeen (Google)

⚡️ Quick bits:

  • The W3C's Annual Conference also took place last month over five days, and now the full archive of all the breakout sessions is online, complete with slides and video. You're bound to find something worth watching here — I just got done with Uchi Uchibeke's talk on the Web Monetization API.
  • Dev browser Polypane just hit version 7 bringing with it a slew of new features — including a system-wide color picker, prefers-contrast emulation support and live editing of pseudo elements across all viewports.
  • The second alpha of Tailwind CSS version 3 is out if you fancy battle-testing it a bit before the final release.

đź“™ Tutorials, Articles & Opinion

'We Analyzed 425,909 Favicons' — An interesting bit of work here digging into the current favicon ecosystem by fetching and analysing the favicons of the top 100,000 websites. You can see a map of all the favicons fetched here.

Adam, Nathan & Patrick

Eye-Tracking in Mobile UX Research — Explores the latest trends in eye-tracking and how the methodology can be included in the UX researcher’s toolbox.

Mariana Macedo

Put the “Flow” in Your Workflows with Shortcut — Looking for an intuitive white-board style project management tool? Collaboration has never been easier with Shortcut.

Shortcut (formerly Clubhouse.io) sponsor

How to Implement and Style the <dialog> Element — An in-depth look at the native HTML dialog element, showing you how to implement a user-friendly, accessible version on your site.

Christian Kozalla

First Steps with GPT-3 for Frontend Developers — Consider this a beginners guide to OpenAI’s API, easing frontend devs into the world of GPT-3 and giving you a heads-up on all the tools needed to start building AI-powered apps.

Maxime Heckel

A Beginner's Guide to Responsive Images — Includes live demos and code snippets introducing syntax for the srcset and sizes attributes and the <picture> element, for developers getting started with responsive images.

Louis Lazaris beginner

Creating the Effect of Transparent Glass and Plastic with Three.js — The effects you can pull off in the browser nowadays continue to impress me as someone who grew up on 8-bit graphics(!).

Kelly Milligan

Learn Responsive Design — This course is an excellent primer exploring all contemporary aspects of responsive design.

Jeremy Keith beginner

Favicons: How to Make Sure Browsers Only Download the SVG Version
Chris Coyier (via Ĺ ime Vidas)

If HTML and ARIA Don’t Allow It, It’s Probably A Bad Idea
Martin Underhill

Optimizing Resource Loading with Priority Hints
Sohoni, Osmani, Meenan

Native CSS Nesting: What You Need to Know
Sarah Chima Atuonwu

An Introduction to PostCSS
Craig Buckler


Senior Web Developer (Node/ReactJS) - Remote — Millions get inspired and plan adventures with our apps. To help us make komoot.com the place to go to plan outdoor adventures, we’re looking for a one of a kind Web Developer to join our team.

[EU] JavaScript Developer, Preferably with React Knowledge — New hires get a "buddy" who will guide you through the company, code and the process. Newest technologies, development possibilities and satisfaction :)

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

ssshape: An SVG Blob/Organic Shape Generator with Extra Controls — Choose a few random points, then this tool will generate a blob that you can adjust with numerous settings, then copy/export in SVG format. Quite a decent variety of options/outputs here.

Sébastien Noël

Iconsax: 6000 Free Icons in Six Different Styles — This huge collection of icons is available in multiple styles and design-friendly formats. There’s also a React version and an accompanying component framework for Vue.


Automate Domains, DNS, and SSL Certificates with This Special Offer đź‘€

DNSimple sponsor

Compressio: An Open Source Image Compression Tool — Another option for batch image optimization (JPG, PNG, GIF & SVG). Allows 10 images/50MB at a time and includes a quality slider and settings to toggle lossless compression and metadata retention.

Choudhary Abdullah

MiniMasonry.js: Minimalist Dependancy Free Masonry Layout Library