Sometimes this side-effect is unwanted: say you have a Paint Worklet that draws some random lines underneath an element. If you were to animate the --line-width on hover you don’t want it to draw different lines, but you want to keep the same lines in place, and only adjust their width.
To solve around this, Jake Archibald shows us how to implement mulberry32, which has consistent output no matter how many times you call it:
Computers can’t really do random. Instead, they take some state, and do some hot maths all over it to create a number. Then, they modify that state so the next number seems unrelated to the previous ones. But the truth is they’re 100% related.
If you start with the same initial state, you’ll get the same sequence of random numbers. That’s what we want – something that looks random, but it’s 100% reproducible.
Go check out the demos Jake has built. As per usual these are top-notch, and help explain everything well.
Going beyond Binary Conditions for CSS Calculations, Ana Tudor takes it to a whole new level by introducing the logical operations (and, or, nand, nor, not, and xor) to CSS — all built on top of calc()
Very often, while using switch variables, I wish I could perform logical operations on them. We don’t have functions like not(var(--i)) or and(var(--i), var(--k)) in CSS, but we can emulate these and more with arithmetic operations in a calc() function.
With those extra data-* attributes in place, we can now make good use of [attribute~=value] selectors:
Say we want to select all items that are greater than 8. To do so we select all items where [data-val-gt] contains the value 8. → In CSS: [data-val-gt~=8].
Say we want to select all items that are less than or equal 4. To do so we select all items where [data-val-lte] contains the value 4. → In CSS: [data-val-lte~=4].
Say we want to select all items that are between 5 and 9. To do so we select all items where [data-val-gt] contains the value 5 and [data-val-lt] contains the value 9. → In CSS: [data-val-gt~=5][data-val-lt~=9].
Finding and extracting well-looping segments from a movie requires much attention and patience […] To make things easier I wrote a Python script which automates the task. This post explains the math behind the algorithm and provides a few examples of use.
Fuck yeah, math! Or, as the author states:
Yet another big problem of the Internet era tackled by Mathematics.