CSS Has 239 Different Ways To Make Something Blue; Rethinking Async Loops In JavaScript; Inedible Popovers

Making up for no Monday Drop with a Wednesday one, solely focused on some core web basics.

TL;DR

(This is an LLM/GPT-generated summary of today’s Drop. This week, I’m (still) playing with Ollama’s “cloud” models for fun and for $WORK (free tier, so far), and gave gpt-oss:120b-cloud a go with the Zed task. Even with shunting context to the cloud and back, the response was almost instantaneous. They claim to now keep logs, context, or answers, but I need to dig into that a bit more.)

• CSS can represent the identical blue color in 239 syntactically different ways, exposing the language’s accumulated redundancy and legacy options (https://dylanbeattie.net/2025/07/30/css-has-239-different-ways-to-make-something-blue.html)
• The article explains why using await inside loops often hurts performance, and provides clear patterns for sequential, parallel, throttled, and error‑tolerant async processing (https://allthingssmitty.com/2025/10/20/rethinking-async-loops-in-javascript/)
• The HTML Popover API offers a native, lightweight solution for tooltips, menus, and overlays with automatic stacking, accessibility responsibilities, and modes like “auto,” “hint,” and “manual” (https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)

CSS Has 239 Different Ways To Make Something Blue

Dylan Beattie went down a wonderfully ridiculous rabbit hole exploring how complicated CSS has become. He discovered 239 valid ways to specify the color blue. No, not different shades of blue, but literally the same color written 239 different ways. O_O

This mess of options comes from CSS inheriting ideas from decades of other fields: mechanical typesetting, print design, digital graphics, early web tinkering, and today’s device quirks. Over time, all those influences piled up into a system with layers of redundancy.

There are multiple color models: named colors like blue, hex codes of varying lengths (#00f, #0000ff, etc.), rgb() and hsl() formats, and newer ones like hwb(), lab(), lch(), oklab(), and oklch(). Even hue angles get creative—CSS reuses rotation units, so you can use degrees, radians, gradians, or turns. Transparency adds more options, with alpha values written as either / 100% or / 1.0.

In practice, almost everyone just uses hex codes. Without angle unit reuse, those 239 variations shrink to about 40–50. Standardize transparency and it drops to around 20. LAB and LCH formats are barely seen in production.

So yes, you can just write color: blue. Or, you can flex with something like color: oklch(0.452 0.31 292grad / 100%);, which renders the exact same color and makes you look like you’ve transcended sanity.

The whole thing perfectly captures why CSS drives most normal folks bonkers: decades of “logical” standards colliding into one gloriously over-engineered language.

You can get the blues at ” A Kind of Blue“.

Rethinking Async Loops In JavaScript

This post dives into a common JavaScript headache: why using await inside loops often leads to unexpected or inefficient behavior. I still get tripped up on this every so often, so I’ve made sure to put this link in my Raindrp.io store. The article is concise and crafted well, so you can 100% just head over there. Let me briefly try to convince the folks who didn’t just do that to do so.

When you drop an await into a for loop, each async call waits for the previous one to finish, which slows things down if the operations don’t depend on each other. The author breaks down why using await inside methods like map() or forEach() doesn’t work the way most of us (at least on the surface) expect, and how Promise.all() can be risky since it stops everything if just one promise fails.

They offer a simple way to decide which async pattern fits our needs—go sequential if order matters, parallel if speed matters, use safer or error-tolerant approaches when reliability matters, and apply throttling when we have to respect rate limits.

The article includes clear code examples, safer alternatives to Promise.all(), and a comparison of concurrency options that make it easier to choose the right approach for any use case. So, check out (and bookmark) the full article for the complete explanations and examples.

Inedible Popovers

The HTML Popover API is a built-in, well-supported, modern browser feature for showing small overlays like menus, tooltips, (cats) or teaching UIs without relying on third-party libraries. You can create a popover using the popover attribute, which handles a boatload of logic for us, such as layering, focus management, accessibility hooks, and closing when one clicks outside or press ESC.

Here’s a minimal example:

<button popovertarget="mypopover">Toggle popover</button>
<div id="mypopover" popover>Popover content</div>

Popovers automatically appear on the browser’s top layer, which means they always sit above other content without z-index hacks. They can be dismissed by default (“auto”), behave as lightweight hints (“hint”), or require manual control (“manual”), depending on your needs.

The top layer is an isolated stacking context managed by the browser, ensuring predictable rendering order. Positioning popovers relative to their trigger can be tricky because they live outside normal DOM flow. CSS Anchor Positioning — which is not fully baked yet by any measure — will eventuall fully address this by letting us position elements relative to other elements even when they’re in different layers.

One important note: the Popover API doesn’t enforce specific accessibility semantics. We’re responsible for ensuring screen reader support and expected keyboard behavior for our use cases. This flexibility was intentional, since popovers can serve many different UI patterns.

Tap on the “cat” link, above, to see a larger-but-still minimal example (that uses a Drop fav simple.css to make it easy on the eyes with zero effort).

FIN

Remember, you can follow and interact with the full text of The Daily Drop’s free posts on:

• 🐘 Mastodon via @dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev
• 🦋 Bluesky via https://bsky.app/profile/dailydrop.hrbrmstr.dev.web.brid.gy

☮️