hsl & rgb had an update:

• hsla is replaced by hsl
• units are now optional when we’re using the space separated syntax

Relative colours
They can be created by mixing colors: rgb( from [#ff0000](https://shaarli.lyokolux.space/./add-tag/ff0000) r g b / 0.5) tells the browser to create an rgb color, from#ff0000 where each hexadecimal is assigned to the variables r, g, b with 50% transparency. Note h s l can be used as notation.

So here is how to plug transparency to a color: rgb(from var(--color-primary) h s l / 0.75);.

Quickwins:

• add transparency
• use lighter and darker versions of a base color in hsl: --base-light: hsl(from var(--base) h s 75%);. See a one color toast notification: https://codepen.io/piccalilli/pen/XJXMgEB/64c4f56702893dc64d9cd4dc564f5e0e
• using calc (a later post)

Light and dark mode handling
light-dark() allow to define two variants of the color for the dark and light theme, if color-scheme: light dark; is activated. color-scheme can also deactivate it.

Colour spaces
They can be defined, so the browser does a good job of filling in those in-between colours, and sometimes, it falls flat a little. The trick was to add one or two colors in-between. Using the oklch as colour space is better though. The color spaces have to be tried manually though: lch and oklch, lab and oklab, hwb, xyz.
To have rainbow, one can use longer hue as for example linear-gradient(in hsl longer hue 90deg, var(--color-1), var(--color-2));. increasing or decreasing exists too.

As a quick aside, the range of colours in a given space is called its (wide or narrow) gamut.

display-p3 is one reference of a colour space. The chrome color picker also show the limitations of sRGB in display-p3 :)

Part two: https://shaarli.lyokolux.space/shaare/6L19_A

assert!() use in const expression are a great way to ensure safe type casting

Even if you don’t use yt-dlp, the idea still applies: when you find yourself copy-pasting configuration and options, turn it into a standalone tool. It keeps your projects cleaner and more consistent, and your future self will thank you for it

Alexwlchan also made a resize image tool https://alexwlchan.net/2024/create-thumbnail/

HTMX filled me with so much joy when I started using it. But I haven’t felt like I lost anything since switching to Datastar. In fact, I feel like I’ve gained so much more.

If you’ve ever felt the joy of using HTMX, I bet you’ll feel the same leap again with Datastar. It’s like discovering what the web was meant to do all along.

<output> is currently underused in so many SPAs and apps, because it announces

Usages:

1. Circular menus or item lists
2. Wavy layouts (DNA strands, wave)

Fancy animations

Some clock display. See https://time.r0b.io/

ImageGallery - PhotoSwipe-powered image gallery with lightbox
AcademicReference - Academic citation system with tooltips
AnchorHeading - Linkable headings with clipboard functionality
Backlinks - Content relationship system
LinkPeek - Link preview system
SocialShare - Social sharing with clipboard
StructuredData - SEO schema generation
Image - Shared image pipeline (Astro assets + Unpic)

Use them as much as possible.
Exceptions are physical placement (anchor, ...)

Another CSS reset

How to store the traits related to an object? Typetag use a type property in JSON format and integrates with serde.

The parsers are different in JS, Python, Go and Java.

Number are not precise:

• MAX_SAFE_INTEGER limits the number. Twitter had to use an `id_str.
• decimal precision is unreliable (in JS) --> always use dedicated decimal types (Python’s Decimal, Java’s BigDecimal, JavaScript’s decimal libraries)
• UTF-8 encoding in JSON allow single unicode code points or composed ones. Use .normalize("NFC") for JS strings.
• the object key order should be alphabetically in JSON.
• Different languages handle absence of values (undefined, null or a missing property) differently.
• No time format is official, so it's always custom:

  {
  "iso_string": "2023-01-15T10:30:00.000Z",
  "unix_timestamp": 1673780200,
  "unix_milliseconds": 1673780200000,
  "date_only": "2023-01-15",
  "custom_format": "15/01/2023 10:30:00"
  }

• Different parsers fail differently on malformed JSON.

The twitter example is only one. There is also postgres that stores the format as JSON and JSONB (normalized).
MongoDB uses an extended JSON format.

Workarounds:

• Use Schema Validation!
• custom normalisation function#:~:text=Normalize%20Data%20Types%3A%20Ender%E2%80%99s%20Data%20Normalization%20Game)
• Tests! Numeric Precision Tests, Unicode and String Handling, Date and Time Consistency, Error Handling Uniformity, Cryptographic Consistency, Performance and Memory Behavior

A toolkit to bootstrap an application

#define MAKE_U32_FROM_TWO_U16(high, low) ( ((uint32_t)(high) << 16) | ((uint32_t)(low) & 0xFFFF) )

With box-shadow and a reset for outline.

If I want to develop fluid type calculations that adapt to local context, I’ll use em and cqi (container inline size) values. If I want my calculations to remain consistent across the entire page, I’ll use rem and vi (viewport inline size) calculations. In either case, I’ll define those values on body or other elements – so that 1rem always refers to the result of our initial negotiation, and doesn’t take on more complex meaning.

For spacing on the y-axis, the line-height (lh) unit is great or the rlh (root line-height). The x-axis can be handled with the vi or cqi units.

The right units for any situation are the ones that express most clearly what we mean – and sometimes what we mean requires a combination of units.

There’s no best unit, no best layout mode, and no best selector. When we use the entire language, we have more tools for clearly expressing our goals.

See Poetic CSS Architecture