Collections are coo

A fun benefit of always assuming something in your code is an array or collection, is that when its empty, no worries.

.button {}

This is a default feature of CSS. It beautifully handles an empty set of results, iterating over each match when they do arrive. It's rad, and most CSS selectors work under this assumption; selecting collections.

Javascript can do this empty handling too:

let buttons = []
buttons.forEach(item => console.log(item)) 
// no logs

So can JSX, cuz "it's just Javascript" and .map() is an array method like forEach():

{buttons.map(({text}) => (
  <button>{text}</button>
))}
// no <button>'s

And I'm not trying to wage war on if statements, but they stink.

if (buttons) {
  // do stuff
}

Nothing wrong with if statements, you just need to remember to put them in there, they can stack up, nest, and more… or else the dumb computer will try and do an operation on something that doesn't exist.

We can get all existential now, which I do enjoy:

buttons?.text

Anyway…

My brain thinks its fun to think about how similar CSS can be to other languages and where it's got some really killer features. It's currently back on a kick about how nice it is to work with collections.

Collections everywhere #

VisBug works alot this way under the hood, always assuming the user has selected multiple things or the effects of their change have multiple targets. Taught me alot about systems built on arrays.

document
  .querySelectorAll('.button')
  .forEach(item => 
    console.log(item))

I always have a fun time in that codebase, and it's hard to crash VisBug because of it.

Array hayday #

I feel arrays are most popular in RxJS and Functional Programming. It's something I miss about those styles and tools.

But no one really talks about how CSS is like these.
I guess I have before

Is it apples and oranges and I'm trippin? #

Just look at this comparison of CSS and JS, selecting the same things!

.dark .button {}

let buttons = []
let dark_buttons = buttons.filter(button => 
  button.closest('.dark'))

Peep how powerful and succinct CSS is!

.blog > h2 {
  backgroundColor: hsl(200 100% 90%);
  color: hsl(200 82% 15%);
}

import { assignStyle, directDescendants, byAttr } from './utils.js'

blogs
  .flatMap(directDescendants)
  .filter(byAttr('nodeName', 'h2'))
  .forEach(assignStyle({
    backgroundColor: 'hsl(200 100% 90%)',
    color: 'hsl(200 82% 15%)',
  }))

So yeah, even though it wasn't intuitive for me at first, treating more things as collections or observables that yield values over time, I like the resilience of the code. The way it'll be evaluated and decide on its own not to run the loop. The way it doesn't care.

I like it when code doesn't have to care.

Here's a rant I had about it in 2020.