#​551 — July 20, 2022 | Read on the web

▶  In and Out of Style — A ~50 minute talk on the fast-paced changes and innovation in CSS, and how the language has managed to stay largely accessible as it has scaled. Is this an inevitable part of the design of CSS? Or has CSS been formed by chance? This video explores just that. (There’s a playlist of videos from CSS Day 2022 - all of which are worth checking out.)

Jeremy Keith

Powerful Image Optimization Tools — Optimizing the size of images can have a bigger impact on performance than all other areas combined. This article looks at various different tools available for reducing the size of images — both browser based and CLI.

Louis Lazaris

Free eBook: Enterprise Angular Everyday — Peter B. Smith draws from his extensive experience in working with clients to give you advice you can use from day one to ensure that you are as successful as you can be in building an efficient Angular team and development strategy.

Kendo UI for Angular sponsor

💡 Minimal Social Markup — Most sites will require some metadata for displaying things nicely across social and messaging apps. Here’s a snippet with the absolute minimum you'll need.

Jens Oliver Meiert useful

Bootstrap 5.2.0 Released — This version of the popular framework is now stable. What to expect? Bug fixes, tons of new CSS variables, updated buttons and inputs, improved documentation, and more.

Mark Otto

The Many Faces of Themeable Design Systems — Design system authority Brad Frost explores how a design architecture can work across multiple brands, various campaigns, redesigns, dark mode, and more.

Brad Frost


📙 Tutorials, Articles & Opinion

Using Grids in Interface Designs — Grids help create cohesive layouts, allowing end users to easily scan and use interfaces. Here’s a look at some common grid structures, how they are used (along with some real-world examples), and how to chose which is best for your project.

Kelley Gordon

▶  Five Useful CSS Properties That Get No Love — Kevin is perhaps our favorite CSS YouTuber right now. Lots of great stuff on his channel.

Kevin Powell

How To Build React Components for Any Front End — The initial setup is straightforward. You place two script tags in the body (the order of the tags is important).

Courier.com sponsor

▶  Be The Browser’s Mentor, Not Its Micromanager — A ~45 minute look at how we can hint the browser, rather than micromanage it by leaning into progressive enhancement, CSS layout, fluid type & space and modern CSS capabilities to build resilient frontends.

Andy Bell

A Guide to Frontend Migrations — Some strategies and best practices to consider when facing the complexity that often comes with the adoption of new tools and frameworks.


A 'Previous Sibling' Selector — Neat technique using the has pseudo-class: p:has(+ hr) a:only-child { }. Demo here (Safari only for now).

Jim Nielsen

It’s Mid-2022 and Browsers (Mostly Safari) Still Break Accessibility via display Properties
Adrian Roselli

Understanding the Performance Impact of Anti-Flicker Snippets
Andy Davies

The Case for Using Sass in 2022


Senior Software Engineer at This Dot Labs (Remote, Worldwide) — Great benefits working in modern tech stacks and amazing clients such as Google, Meta, Twilio, Cloudinary, Roblox, and more.
This Dot Labs

Attend Our July 27th 2022 State of Wage Inequality in Tech Discussion — Join Hired, Blacks in Technology, Ada’s List, Interview Kickstart, and Speak_ for a collaborative panel discussion about Hired’s 2022 Impact of Wage Inequality data report.

🔧 Code, Tools & Resources

Humbleicons: 220+ Simple, Neutral, Carefully Crafted SVG Icons — Searchable via keyword on the website and available in SVG or Figma.

Jiří Zralý

Vite 3.0 ReleasedVite is a frontend development and build tool of the same provenance as Vue.js and is almost unanimously held in high regard. It's certainly worth experimenting with to see if it fits your workflow.

Evan You and Contributors

Unlock Completely Free Access to Stream's Chat and Activity Feed APIs

Stream sponsor

css-browser-support: A JavaScript API to Query CSS Browser Support Data From caniuse.com and MDN — Pass in a string or array of strings for the feature(s) you want to query and it returns an object with all supported browsers.

Stephanie Eckles

Add to Calendar Button: A JavaScript Snippet to Let Users 'Add to Calendar' — The button is pre-styled and it drops down to show options for various calendars – Apple, GCal, iCal, Microsoft 365, Outlook, and Yahoo.

Jens Kuerschner

Rety: Live Coding Without the Stress — We recently mentioned Lea Verou’s ▶️ awesome CSS variables talk – a talk that had some ‘live coding’ sections, but which were orchestrated in advance using Rety, which Lea has now released to us all.

Lea Verou

Code Language Converter: An Online Tool to Convert Code to Other Languages using AI — Not a free tool but a pretty cool one to try out. You get 100 “credits” free which is only worth about two small code snippets.

Code Language Converter:


Signature Pad 4.0.6 – Canvas-based library for drawing smooth signatures.
FicusJS 5.2 – Lightweight functions for developing apps using web components. CSSO 5.0.4 – Minifier that cleans, compresses and restructures.
Uppy 2.13.0 – Powerful file uploader component.
Jarallax 2.0.4 – Parallax scrolling library supporting both images and videos.