I restart the project

Following https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfire/

More thoughts about utility classes (only utilities and not a core use anymore), :has(),

What fascinated me most was watching the architecture evolve across releases.

Campfire: OKLCH colors, Custom properties for everything, character-based spacing, flat file oranization, View Transitions API
Writebook (2nd): COntainer queries for component-level responsiveness, @starting-style for entrance animations
Fizzy (3rd release): CSS Layers, color-mix() and complex :has() to replace JS.

37Signals share their product codes in Open Source. That's awesome because we can learn from it:

/* Fizzy's layer architecture */
@layer reset, base, components, modules, utilities;

@layer components {
  .btn { /* Always lower specificity than utilities */ }
}

@layer utilities {
  .hide { /* Always wins over components */ }
}

A CSS only spinner under 30 lines of CSS code. "Pure creativity".
A better <mark> that draws a hand-drawn circle around matched terms.
They also created dialog animations in CSS only.

* {
  letter-spacing: clamp(
    -0.05em,
    calc((1em - 1rem) / -10),
    0em
  );
}

How CSS simplify scrollable images with

display: flex;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;

// On the images
scroll-snap-align: center;
 contain: size;
  place-self: stretch;
  object-fit: cover;

:root {
  --w: calc(100vw/1px); /* screen width  */
  --h: calc(100vh/1px); /* screen height */
  /*  The result is an integer without a unit! */
}

A version with better support:

:root {
  --w: calc(100vw/1px); /* screen width  */
  --h: calc(100vh/1px); /* screen height */
  /*  The result is an integer without a unit! */
}

A theme for october :)

The project is available at https://github.com/twomile/js-bats

Let's create a project and benchmark it :D

a:not(:is(:hover, :focus)) {
  text-decoration-color: 
    color-mix(in srgb, currentColor, transparent 75%);
}

Wow! mix-blend-mode: multiply; and the linear-gradient effect are awesome.

A switch input with an Astronaut

A great example of what the popover API can achieve

Country flag code to unicode emoji flag

function getFlagEmoji(countryCode) {
  const codePoints = countryCode
    .toUpperCase()
    .split('')
    .map(char =>  127397 + char.charCodeAt());
  return String.fromCodePoint(...codePoints);
}

During the development of Bear, one of the constraints I created for myself was to do as much as possible using basic HTML components. This means that the only elements that are able to perform a request are and

, and these work pretty well if all you're doing is retrieving and serving content synchronously.

export type Result<T, E> = { ok: true, result?: T } | { ok: false, err: E }

Advantages: everything.
Disadvantages: it creates an object for it.

It is a quick way to test it before using a small library https://shaarli.lyokolux.space/?NJ9Efg

A simple layout for nav with negative margins

:root {
  overscroll-behavior: none;
}

A codepen demo https://codepen.io/michellebarker/pen/vYbrpbX

A search input that expands itself on focus. It animates the width, but it uses CSS grid for the main layout.

How an array was built before Ecmascript v1