A Guide To Modern CSS Colors with RGB, HSL, HWL, LAB and LCH — A detailed look at the best ways to handle colors in CSS today, plus some tips for using them in a design system, and what to expect from colors on the web in the not-too-distant future.

Michelle Barker

'My Custom CSS Reset' — In this meticulous post Josh outlines the rationale behind his own, custom CSS reset — detailing each rule, what it does, and why you may want to use it. “In the past, I’d use a typical CSS reset, but times have changed, and I believe I have a better set of global styles!”

Josh W. Comeau

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 (formerly Clubhouse) sponsor

Chrome 97: WebTransport, New Array Static Methods and More — Version 97 of Chrome is now in beta. This release features support for the font-synthesis CSS property — which controls whether user agents are allowed to synthesize oblique, bold and small-caps fonts when a font family lacks such faces. The Chrome team is also thinking about what happens when it reaches Chrome 100.

Google

Adding a Dyslexia-Friendly Mode to a Website — With just a little CSS we can adapt our designs to be more accommodating for people with dyslexia. This article explores those techniques by adding a dyslexia-friendly mode to an existing design.

John C Barstow

Develop a Faster Way to Work. Build Internal Tools, Remarkably Fast — Custom dashboards, admin panels, CRUD apps—build any internal tool faster in Retool. Get started for free today.

Retool sponsor

The Endless Search for "Here" in the Unhelpful "Click Here" Button — Explains how “click the button below” can be confusing to those who use the web in different ways. What if you’re using a screen reader? What if there’s no ‘click’ on your device?

Eric Bailey

Various Ways to Include Comments On Your Static Site — An overview of different techniques to implement comments using a static site generator.

Darek Kay

Fractional SVG Stars with CSS — How to go about creating a rating component with stars that support fractional values.

Samuel Kraft

Lorem Faces: Free AI-Generated Faces for Mockups, Avatars, Designs, etc. — Handy, assuming you’re not weirded out by computer-generated photos of people that don’t exist. :)

lorem faces

UnoCSS: The Instant On-Demand Atomic CSS Engine — There’s a playground and the author explains the tool in this blog post. In a nutshell, this is intended to improve on tools like Tailwind, Windi, etc.

Anthony Fu

SVGcode: A PWA to Convert Raster Images to SVG Vector Graphics — Convert color or monochrome bitmap images (PNG, JPG, JPEG, WEBP, AVIF, GIF,…) to color or monochrome vector images (SVG). You can take it for a spin here.

Thomas Steiner

Want to Avoid DNS Downtime? 👀 Check Out Our 5-Step Checklist Now 👉

DNSimple sponsor

Tagify 4.9: An Elegant Input Component for Tags — The polished demos show a lot of effort has been put in here. GitHub repo.

Yair Even-Or

Tailwind Typography: A Tailwind Plugin to Add Beautiful Typographic Defaults to any HTML — Use this if you’re annoyed that Tailwind removes default styling on basic elements like h1, h2, etc. You can apply this to a full section (e.g. an article element) via a “prose” class.

Tailwind Labs

Automa: Automating Your Browser by Connecting Blocks — A Chrome extension for automating jobs such as taking a screenshot, scraping data, auto-filling forms, etc. Can also run on a schedule.

Ahmad Kholid