Frontend Focus

#​512 — October 13, 2021 | Read on the web

The State of CSS Survey — This year's State of CSS survey is now open. It's well worth taking a few minutes to fill it out and share your thoughts. The results will highlight the latest CSS trends, and always makes for an interesting read. Last year reiterated the rise of Grid, how more folks are using VS Code, and just how little love Print stylesheets get. Sacha outlines what's new in this year's questionnaire here.

Raphaël Benitte & Sacha Greif

The Case for 'Developer Experience' — In a world of ‘no code’, SaaS, and APIs, Jean presents a considered take on the evolving developer experience, and embracing the messy reality of the tech stack.

Jean Yang

Consent Management Without Endless Configurations — Transcend Consent ensures nothing is tracked without user consent, without sacrificing site performance or UX. The only solution that is fully compliant across all 200+ tracking technologies – all in a lightweight, 30KB bundle.

Transcend sponsor

RenderingNG: An Architecture That Makes and Keeps Chrome Fast for The Long Term — Highlights the long-term rendering journey of Chrome over the past eight years.

Chris Harrelson (Google)

How to Win at CORS — Jake, developer advocate at Google, outlines all he knows about Cross-Origin Resource Sharing (CORS) in an effort to help make sense of things. There’s a demo/playground here to help illustrate things.

Jake Archibald

Lots to See in Firefox 93 — ...including AVIF image format support. Here’s the full developer rundown.

Ruth John (Mozilla)

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Safe DOM Manipulation (in the Future) with the Sanitizer API — The new Sanitizer API (edited by developers from both Google and Mozilla) aims to build a robust processor for arbitrary strings to be safely inserted into a page. Something to look forward to.

Jack J (Google)

Myths About Web Accessibility — A collection debunking some common web accessibility misconceptions or myths (such as accessibility being difficult, expensive, etc).

Alvaro Montoro

Shortcut Puts the Agile in Agile and the “Can” in Kanban — Shortcut is made for developers and PMs, providing speedy task management, reporting, and collaboration. Try it today.

Shortcut (formerly sponsor

My Challenge to the Web Performance Community — A subtle set of guidelines for how we talk about web performance optimizations.

Philip Walton

Practical Frontend Philosophy — General thoughts on how to think about frontend development: “Zoomed out, the frontend is just a data pipeline, conveying data from computers to humans”.

Jared Gorski

The Autofill Dark Pattern — Explores how different browsers implement the autofill feature, allowing for a dark pattern that lets developers get users’ personal data without their permission.

Alvaro Montoro

How to Create a CSS Typewriter Effect — I think this effect can be a little overdone, but this is a particularly simple way to pull it off.

Matt Nikonorov

Hardware and The Web: The Balance Between Usefulness, Security & Privacy
Niels Leenheer

The Options for 'Password Revealing' Inputs
Chris Coyier


Sr. Frontend-Focused Engineer (Remote in Germany) — You love developing digital products that solve true customer problems? Join us to reinvent business insurances. #React #GraphQL

(Senior) Frontend-Entwickler*in — Als Frontend-Entwickler*in wirst du in interdisziplinären Teams Frontend-Features entwickeln und Kampagnen vorantreiben sowie die bestehende Plattform betreuen und optimieren.
Mein Grundeinkommen e.V.

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

Doodle Ipsum: The Lorem Ipsum of Illustrations — In terms of placeholder services, this is a little different. Includes an easy-to-use API to add artsy, doodle-based placeholder illustrations in various categories.


AnyWebP: Online Tool to Bulk Convert WebP to JPG/PNG/ICO — You can convert to and from WebP format, all done client-side with no data sent to the server.


Build Internal Tools in Minutes with Retool, Where Visual Programming Meets the Power of Real Code

Retool sponsor

Cash — A Tiny jQuery Alternative — This absurdly small jQuery alternative isn’t new, but Chris Coyier recently put it back on our radar. 6 KB minified and gzipped.

Fabio Spampinato

Animated Backgrounds: A Gallery of Animated Backgrounds Built with CSS & JS — Clearly not the best option performance-wise, so use these very sparingly! All backgrounds are sourced from various CodePen demos by different users.

Prakhar Tripathi

Actionable Color Palettes: 30+ Hand Curated Color Palettes
Csaba Kissi

DOM Treemap: Chrome Extension to Explore The Distribution of DOM Nodes in The Document Tree
Der Schepp

github-code-font-changer: A Chrome Extension to Change and Customize the Default GitHub Code Viewer Font
El Amrani Chakir