Modern CSS Code Snippets: Stop writing CSS like it's 2015

https://modern-css.com
https://modern-css.com/color-variants-without-sass-functions (color calc example)
https://news.ycombinator.com/item?id=47025851

what is/why OKLCH: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl

Actors - A Model Of Concurrent Computation In Distributed Systems (1985)

https://news.ycombinator.com/item?id=46851192
https://apps.dtic.mil/sti/tr/pdf/ADA157917.pdf

A foundational model of concurrency is developed in this thesis. We examine issues in the design of parallel systems and show why the actor model is suitable for exploiting large-scale parallelism. Concurrency in actors is constrained only by the availability of hardware resources and by the logical dependence inherent in the computation.

Note: There is bunch of cons to such model, like: memory usage, hard to reason about, hard to debug.

Render Mermaid diagrams as beautiful SVGs or ASCII art

https://github.com/lukilabs/beautiful-mermaid
https://news.ycombinator.com/item?id=46804828

Example diagram.

Guess the square color game

Looking at Magnus evaluating random peoples elo, one of the questions is also what color certain square is. So here is a little game written by ai that lets you practise that.

♘ Guess the square color.

Changelog: Fixed some css issues with scrollers (maybe). History log is now visible in js console (Ctrl+Shift+K in firefox).

The console object provides access to the browser’s debugging console (or terminal in Node. js). It is used to log information, debug code, and interact with the runtime environment during development.

Observation: If you add numbers and the result is even, then the square is black.

a1 = 1 + 1 = 2  = black
e4 = 5 + 4 = 9  = white
h8 = 8 + 8 = 16 = black
d3 = 4 + 3 = 7  = white

Grenland by night

(retrodiffusion.ai)

Ghostty ai Policy

https://gothub.lunar.icu/ghostty-org/ghostty/blob/main/AI_POLICY.md
https://news.ycombinator.com/item?id=46730504

After effects, make background rectangle the same size as text

If my text layer is named ‘text’, then this js will be in the background rectangle ‘Size’:

// Define the text layer to follow
var textLayer = thisComp.layer("text"); // Replace with your text layer name

// Get the size of the text
var textRect = textLayer.sourceRectAtTime(time, false);

// Define padding
var paddingX = 10; // Width padding
var paddingY = 30; // Height padding

// Calculate final size
[textRect.width + paddingX, textRect.height + paddingY]