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

? Tutorials, Articles & Opinion

?  A Look at WordPress 5.9 — This next version of WordPress is expected to land in early 2022, but here’s an overview of what to expect, including new design tools, user experience enhancements, and more.

Kelly Hoffman

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

Control Layout in a Multi-Directional Website

Alaa Abd El-Rahim

A Clever ‘Sticky Footer’ Technique

Chris Coyier

? Code, Tools and Resources

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

Uptime Calculator: How Much Downtime Corresponds to 99.9 % Uptime

Uptime Is

Netlify Drop: Drag & Drop A Folder with Your Site’s HTML, CSS, and JS Files and Get a Shareable Link

netlify

Regex Learn: An Interactive Course to Learn Regular Expresions Step by Step, From Zero to Advanced

Aykut Karda?