Frontend Focus

#​518 — November 24, 2021 | Read on the web

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.


⚡️ Quick bits:

  • A preview of the 2021 Web Almanac is now available, featuring an early look at chapters covering privacy, performance, structured data, and more.
  • Microsoft announced plans to add a browser level 'Buy Now, Pay Later' option for ecommerce purchases natively into Edge — fair to say it hasn't gone down well as the comments here show.
  • Twitter has rolled back support for AMP and will no longer sends users to AMP pages.
  • Netlify has raised over $100m to grow its developer platform and extend the Jamstack ecosystem.

📙 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


Sr Frontend Developers ✌ for a Growing Team 💥 — Passion for React & GraphQL? Join our diverse, high-skilled team and build beautiful products. Remote/Skien/Oslo – your choice.
Snowball Digital

UI, Frontend Developer (Remote Friendly) in Beautiful Norway — We build startups and do GOOD tech. A digital democracy startup, a renewable energy startup, a green airport taxi startup. Join us <3

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

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

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