Frontend Focus

#​519 — December 1, 2021 | Read on the web

Creating Generative Patterns with the CSS Paint API — A detailed look at how to use the Paint API to create three generative patterns that could be used to add a touch of character to a range of websites/apps. The results here are rather lovely.

George Francis

Videos From the 'State of the Browser 2021' Event — All of the videos from last week’s State of the Browser event are now online, including Rachel Andrew’s talk on how CSS has evolved and what’s coming next.

London Web Standards

Put the “Flow” in Your Workflows with Shortcut — Whether you're a startup that iterates quickly by giving engineers a free pallet of Red Bull, or a large org that has strict ship dates to hit, Shortcut is the ideal solution for task management, bug tracking, iteration planning, and reporting.

Shortcut sponsor

Modern CSS in a Nutshell — If you (or someone you know) are feeling a bit out of touch with modern CSS development then this is brief, high-level overview of the current state of CSS is worth checking. You may be surprised at how much you can now do with vanilla CSS.

Scott Vandehey

What's New in DevTools in Chrome 97 — This update (now in Canary) has a new Recorder panel in which you can record, replay and audit user flows, the ability to refresh the device list in Device Mode, Autocomplete during Edit as HTML, and more.

Chrome Developers

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

A Handy Little System for Animated Entrances in CSS — Neale has created a set of CSS utilities for animating elements as they enter into view. This post explains how the animations work, and how to apply them whilst respecting user preferences.

Neale Van Fleet

▶  Bringing Bounce and Elastic Easing to CSS — Animating with CSS is neat, but achieving a bouncing or elastic easings effect isn’t easy. In this video Jake and Surma look at a new proposal that allows you to define all kinds of easings.

Google Chrome Developers

Switching from Interaction Design Tools to SwiftUI — Learn interaction prototyping and up your skills with SwiftUI, Apple’s declarative approach for building interfaces.

Stream sponsor

▶  Smashing Podcast: Is The Web Dead? — Obviously not, but have changes to best practises negatively impacted the web? Drew McLellan talks to expert Chris Ferdinandi to try and find out.

Drew McLellan podcast

'Firefox is the Only Alternative' — “As it stands today we have a browser duopoly (Chrome and Safari) and pretty much a monopoly outside of Apple’s walled garden”.

Bozhidar Batsov opinion

When Is It “Right” to Reach for contain and will-change in CSS?
Chris Coyier

94% of the Largest E-Commerce Sites Are Not Accessibility Compliant
Alex Krzyminski


Senior Software Engineer (Frontend, Remote) — We’re hiring a software engineer to join our team working on PSPDFKit for Web. We are building a modern PDF SDK with technologies like React, TypeScript, and WebAssembly.

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.

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

Project Wallace: An Online CSS Analyzer — The main product isn’t free, but this CSS analyzer is free to use. Just enter a URL and this tool will show you various stats on the page’s CSS (lines, selectors, declarations, complexity, etc).

Bart Veneman

▶  Three Awesome Tools for a Better Front-End Dev Experience — Kevin takes a look at tools out there to make your developer life a little bit easier.

Kevin Powell

Want to Transfer a Domain with No Downtime? 👀 Our Handy Checklist 👉

DNSimple sponsor

30 Seconds of Knowledge: A Chrome Extension That Shows Programming Tips on Your New Tab Page

Stefan Petrovic

Tiny UI Toggle: A JS/CSS Utility to Build Toggle-able Page ComponentsSee examples here. Lets you build a wide variety of UI components including dropdowns, dialogs, tabs, accordions, and more.

Nigel O Toole

Atmos: Create UI Color Palettes with Ease — Lets you select a palette randomly, by color family, or by “Meaning”, which allows you to select generate the palette from a few category keywords. It's free whilst in beta.

Vojtěch Vidra

Xtend UI: A Library of Tailwind Components Enhanced by Vanilla JavaScript — Sort of like Bootstrap’s interactive components, but for Tailwind. Includes lots of components and themes under various categories, along with React versions of each.

Riccardo Caroli