Colors:

how do we decide where to use custom properties? There are really two cases:
1) whenever we need to use the same value in more than one place (DRY)
2) when we know a value is going to be changed.

Custom Properties:

I already use the css variables methods. They are great. Note we can inline them and avoid a verbose default: var(--btn-color, var(--color-text))

You can think of :has() as a way to query an element about what’s inside it.

This makes our button class very flexible. You can throw about any combination of things inside it, and it will adjust accordingly. Text only, image and text, image only, inputs (like radio buttons), or multiple images with text.

The post of 37signals takes also the sidebar into account. The trigger button can be pure CSS even if the icon in it changes. :has() allow to verify if a button inside an element is disabled too.

Responsive design:

They use one @media breakpoint (max-width: 100ch) for a two column layout.

Using characters as the unit of measure ensures that we get the right behavior no matter which device you’re using and in a number of other scenarios such as multitasking on iPad or even if you simply enlarge the font size past a certain point. Type is the heart of web pages so it makes sense for the layout to respond to it.

Feature enhancements such as hover or touch effects with media queries: @media (any-hover: hover) in combination with (pointer: fine) or (pointer: coarse)

Great stuff and kudos to them 👏

with currently 90% support, this feature can render or hide the content (without taking space in the layout). Note the auto value can optimize the rendering

In comparison with the display: none trick, developers don't need to specify the layout display: flex | grid | block anymore.

About Oauth2

Looks good for a great completion

On the pitfalls of "just doing things." In contrary there are often value in not making new things.

The hardest question you'll ever ask isn’t “How do I do more?” It’s “Why am I doing any of this in the first place?”

Stakeholders are just people and “I trust this person because they often get it right” is more powerful than any theory.

The long-term goal should always be making the system better, so that it can help you get things done rather than get in the way.

1. To start fixing your system by insisting on accountability (to avoid doers degrading it)
2. the system is made of people, and the people are exhausted. A reference to constant meeting and communication.

These are people problems, which can't be solved with technological solutions. Technologies can help and be part of a solution to a real-world problem but without basing it on the needs and experience of the people who are doing the actual work, your process will fail.

I restart the project

Are they useful? I think not. It might be useful, but overall, it's better to read the specifications.

Documents will be available in HTML!

ONVIF is an open industry forum that provides and promotes standardized interfaces
for effective interoperability of IP-based physical security products and services.

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.

Fast, flexible mock API server powered by JSON configuration and a lightweight scripting language (rjscript).

Un champignon se nourrit de radiations. Il peut donc convenir comme isolant aux habitats sur Mars s'il se développe sur 21 cm d'épaisseur. Le champignon est d'autant plus plausible que du plomb est plus complexe à utiliser.

3.6 pour 100 000 comparé à < 1 en Allemagne

New generation of tools:

• Speedy Web Compiler
• ESBuild
• BiomeJS t combines code formatting and linting into a single high-performance JavaScript toolchain.
• Oxc is a collection of Rust-based Javascript tools focusing on linting, formatting and transforming Javascript and typescript tools.
• Fast Node Manager / Mise
• Typescript in Go

Another notable efforts are Turbopack and Turborepo, Bun and Deno.

Contributing becomes less accessible to the majority of JavaScript developers of course. The shift demonstrates other skills in system programming that will drive even more innovative tooling in the coming years

On the GPU.