iiinova — where your digital self keeps evolving

Bali Balo @bali.balo.cool · 26/08/2026

It's been mentioned by other people, but my favourite use-case is to represent some kind of time/progress usable in some other calculations. Used that for a little physics-based thingy a while back codepen.io/bali_balo/pe...

codepen.io

CSS Physics

The recent addition of mathematical functions to CSS, as well as @property rules allow advanced animations. This is a small proof of concept testing ...

010

Bali Balo @bali.balo.cool · 16/06/2026

I never omit them (unless I'm in an existing codebase that does it) because it's a nice indication that the statement is over, but also I hate relying on whitespace for anything, although admittedly newlines are fairly safe. I have stronger feelings about "off-side rule" languages like Python

010

Bali Balo @bali.balo.cool · 07/03/2026

Awesome, thanks for the quick fix !

000

Bali Balo @bali.balo.cool · 06/03/2026

@codepen.io @chriscoyier.net got access to CodePen 2.0, looks dope ! One small piece of early feedback: even with my indentation set as "tabs", both my tab key and the auto-indent seem to insert spaces.

100

Bali Balo @bali.balo.cool · 11/11/2025

Ooh this looks nice ! Could be a cool "magic trick" to have the card change suit while facing away (I don't have an iPhone to test sorry)

100

Bali Balo @bali.balo.cool · 04/11/2025

Not to be confused with Caesarean Bear, Open Heart Surgery Bear, and... Krang?

120

Bali Balo @bali.balo.cool · 13/09/2025

Also disclaimer: not 100% sure it follows the spec in every edge case, but it should for most things

000

Bali Balo @bali.balo.cool · 13/09/2025

@chriscoyier.net You mentioned you'd like a tool to view CSS linear() (not to generate but to view/edit them) Just made this if that helps: codepen.io/bali_balo/pe... It's just a quick thing, not very clean (both the code & UX) but should work, you can paste values with or without linear()

codepen.io

CSS linear() visualizer

...

231

Bali Balo @bali.balo.cool · 17/07/2025

For tooltips specifically I managed to use a hacky way with 2 anchor names and flip on the tip itself: codepen.io/bali_balo/pe... (you can click the button then use the handle above it to move it towards the other edges and make the tooltip flip) But a cleaner way would be more than welcome!

020

Bali Balo @bali.balo.cool · 06/07/2025

Depends what we consider bad I guess: I don't think Brainfuck would be used for any serious application (and could probably be described as ugly), but it's good at being a meme language.

000

Bali Balo @bali.balo.cool · 04/07/2025

Oh that is great ! Nice one

010

Bali Balo @bali.balo.cool · 04/07/2025

Spatial Navigation (drafts.csswg.org/css-nav-1/) sounds like it would work quite well here, if it's ever picked back up and there is somehow a way to enable it via HTML/CSS (the scroll-driven animation trick is amazing too but this would avoid relying on the magic 40px value)

120

Bali Balo @bali.balo.cool · 26/06/2025

Cool one ! I had been playing with these before and some reason "center" always causes the next fallback to be used, whereas "span-all" has a bug with scroll (at least in Chrome): codepen.io/bali_balo/pe...

codepen.io

Anchor positioning with scroll

When an anchored popover element using `span-all` in the block direction is shown while the page is scrolled down, the target is offset (displayed in t...

000

Bali Balo @bali.balo.cool · 23/06/2025

Awesome ! Cool animation and well explained. Wanted to give a go at an alternative version using masks (it ended up a bit trickier than expected) codepen.io/bali_balo/pe...

codepen.io

Julia's squares

Gave a go at my own version of [Julia Miocene](https://codepen.io/miocene)'s [Recursive Squares](https://codepen.io/miocene/pen/dPoQGVx) animation, but...

011

Bali Balo @bali.balo.cool · 22/06/2025

Did you know? You can create buttons in your console logs (kind of): just use a getter console.log({ get button() { /* run action here */ return 'ok'; } }) Also handy for snippets, if they need to run interruptible actions, like in the video below

030

Bali Balo @bali.balo.cool · 23/05/2025

Update: the more I looked at it the more it seemed obvious that this was a bug. I've now reported it here issues.chromium.org/issues/41971...

000

Bali Balo @bali.balo.cool · 22/05/2025

position-area: center inline-end works no matter the scroll but is considered overflowing (not sure why but seems somewhat similar to nerdy.dev/why-isnt-my-... by @nerdy.dev) and therefore uses the next fallback, in my case top-aligned

nerdy.dev

Why isn't my `position-try-fallback` working in small spaces? · October 12, 2024

Learn from my anchor() and position-area mistakes.

100

Bali Balo @bali.balo.cool · 22/05/2025

position-area: span-all inline-end mostly does what I want, but weird: if shown after the page is scrolled, the target is positioned where it would be without the scroll offset (but scrolling while it is already shown keeps it in the right position)

Screenshot of the issue: on a scrolled page, the first tooltip is not aligned with its anchor at all. The second tooltip aligned with the top of its anchor instead of centered as explained in the following post

100

Bali Balo @bali.balo.cool · 22/05/2025

Is anyone familiar with CSS anchor positioning and willing to help? This feels like a bug but not sure. codepen.io/bali_balo/pe... (Chrome/Edge only) Basically I want my target centered to the right of my anchor (with fallbacks: if the target is tall and doesn't fit, try to shift it down or up)

codepen.io

Anchor positioning with scroll

When an anchored popover element using `span-all` in the block direction is shown while the page is scrolled down, the target is offset (displayed in t...

120

Bali Balo @bali.balo.cool · 02/04/2025

Dancing Dots codepen.io/bali_balo/pe... via @codepen.io

041

Bali Balo @bali.balo.cool · 01/04/2025

Red Ripple Yellow Ripple codepen.io/bali_balo/pe... via @codepen.io

020

Bali Balo @bali.balo.cool · 17/11/2024

Oh I remember playing hidden in plain sight on xbox 360 many years ago, super fun ! Didn't realize it became available on other platforms, that's great

010