My Blogspot in 2011: Ranting Devigner

• see what tech articles I was reading ^lol
• dev and design rants I was making ^{also lol}

Devigner = Designer + Developer
Before "Design Engineer" was coo

Kevin Powell tries out Prop For That, makin it look so slick and easy 🫶

Watch on YouTube

the maximum value for a CSS length in a layout context. #randomCSSfacts

Bramus on Masto

Ep #250
Live at React Miami with Christina Martinez

Robbie, Christina and I chat fun coding experiments, personifying agents, OpenClaw, hot takes and a little bit of whatnot.

⤷ whiskey.fm · youtube · spotify · apple

CSS infinity (and -infinity!) solve some pretty specific problems elegantly, but can also just be plain fun to use.

Showing support for infinity, -infinity, NaN, pi, and e

Lets spur creative CSS juices with infinity and follow a couple use cases.

Basics and gotchas #

infinity and -infinity need to always be wrapped in calc().

If you want it to represent a dimension, it also needs to be multiplied by a unit like:

div {
  border-radius: calc(infinity * 1px);
  z-index: calc(infinity);
}

Not quite limited to calc() too, you can use it with other calc()-like scenarios like clamp(), min(), max(), etc, which we'll dig into a bit 🤘🏻

1. Circles and Pills #

Before infinity, I would have used scientific notation like 1e9px (which is 1000000000px) to create a "big enough" radius for circles and pills at any size.

But with infinity..!?

.radius-full {
  border-radius: calc(infinity * 1px);
}

2. Perma-state #

Setting duration calc(infinity * 1s) makes an animation/transition so long that it appears to be frozen ⛄️

Hover over those boxes and the duration will be pinned to happen over infinity seconds, sticking the state for the duration of the page's life.

I like how the duration of your hover is permanently made visible too. Visible millisecond duration via background color.

3. z-index #

Need to beat z-index: 999999999 or something?

.tippy-top-of-stacking-context {
  z-index: calc(infinity)
}

This will max out at the largest int a browser allows: 2147483647. Speaking of that number, you can see it by using counters like this:

.css-max-int {
  counter-reset: cssInt calc(infinity);

  &::after {
    content: counter(cssInt);
  }
}

See!

4. To infinity and beyond #

Use calc(infinity * 1px) to remove the floor or ceiling of a clamp.

div {
  inline-size: clamp(
    calc(-infinity * 1px), /* no floor */
    100%, 
    calc(infinity * 1px)   /* no ceiling */
  );
}

5. Freeze view transitions #

Make view transitions never complete.

::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: calc(infinity * 1s);
}

The ::view-transition tree stays in the devtools DOM, giving you an opportunity to inspect or tweak.

You can also freeze and inspect animations using the Animations panel in devtools.

6. Responsive radius #

Another scenario where I would have reached for making a large number with scientific notation, is a responsive border radius.

.viewport-responsive-radius {
  border-radius: clamp(0px, (100vi - 100%) * infinity, 20px);
}

.container-responsive-radius {
  border-radius: clamp(0px, (100cqi - 100%) * infinity, 20px);
}

If the elements inline-size is less than 100vi, the radius will be 0. If it's greater than 100vi, the radius will be 20px.

There are a set of these available in Open Props.

7. Bools #

Clamp an arbitrary number down to exactly 0 or 1, then use it:

.flippy {
  --solo: clamp(0, (2 - sibling-count()) * infinity, 1);
  --crowded: clamp(0, (sibling-count() - 5) * infinity, 1);

  flex-grow: calc(1 - var(--solo));
  font-size: calc(1rem - var(--crowded) * 0.125rem);
}

One variable now can drive color, offset, opacity, gaps, whatever.

8. Backdrop #

You can use the spread feature of box-shadow to create a non-interactive backdrop:

.backdrop {
  box-shadow: 0 0 0 calc(infinity * 1px) #0005;
}

Paint past the "entire viewport".

9. Scroll Trigger #

Trigger a scroll driven transition in, and never transition out.

.nav-title {
  timeline-trigger-activation-range-end: calc(infinity * 1px);
}

.product-title {
  animation: slide-and-fade 150ms ease both;
  animation-trigger: play-forwards play-backwards;
}

Though you'll see in the demo I use scroll 100% which is a specced way that feels closer to the intent I was going for, in that I wanted the range end to be the end of the scroll area.

Try it:

Also, just for funsies to share, here's the scroll driven version of the same navbar effect. Doesn't use infinity, but fun to try and compare scroll-triggered vs scroll-driven animation.

Thats all #

Hope you found that interesting!

Comment with your own creative uses of infinity?

Ep #249
Live at React Miami with Joel Hooks

Robbie, Joel and I chat about Pi, OpenClaw, JoelClaw, YOLO mode, AGI, custom harnesses and a little bit of whatnot.

⤷ whiskey.fm · youtube · spotify · apple

Ep #248
Live at React Miami with guests Jason Lengstorf, Kent C. Dodds, Tanner Linsley and Francesco Ciulla

Robbie and I chat with 4 guests in 1 episode!

Topics span things like Lambo's, MCP vs OpenClaw, agents building agents, polymorphic UI libraries, SDD + state machines, how Prolog is the most hated programming language, and whatnot.

⤷ whiskey.fm · youtube · spotify · apple

Presented by GitKraken and Clerk

Ep #247
Live at React Miami with guest Ken Wheeler

Robbie, Ken and I chat about proxies, pranks, survival bags, agent swarms and Ramon the 420 IQ Gorilla.

⤷ whiskey.fm · youtube · spotify · apple

Announcing Prop For That, a JS library that backfills what CSS doesn't provide us yet (and maybe never will).

I'm done waiting for CSS to catch up to all the valuable information JS knows and done watching folks write the same little JS to just write a custom property to a component.

Here's a basic example taking the value from a range slider to draw a nice gradient that fills up the slider:

import 'prop-for-that/auto'
// or import 'https://esm.sh/prop-for-that/auto'

<input type="range" data-props-for="range" min="0" max="100" value="40" />

input[type="range"] {
  background: linear-gradient(
    to right in oklab,
    var(--theme) calc(var(--live-value-pct) * 100%),
    var(--track) 0
  );
}

codepen · docs example · codepen collection

Why? #

It's super common to need a few lines of JS for a simple thing like:

• the value of the color input
• the mouse pointer position
• the size of the scrollbar
• the colors present in an image or video
• the battery level
• an element's visibility
• etc

With Prop For That, you just declaratively specify on any element the props you want, and live props show up.

There's an imperitive API too, but the data attribute path is the slickest

Everything is a plugin that loads only if you need it too, ultimately putting you right where you wanted to be: creating something sick in CSS using dynamic information without wiring up some dorky JS.

What kind of props? #

My talk at CSS Day was an enumeration of all the ways CSS can adapt to users, contexts, pages, etc… which made me hyper aware of all the ways CSS couldn't adapt without JS.

Here's a flat list of all the live props currently supported by the library:

1. Pointer x/y in the window
2. Pointer x/y inside/local to an element
3. Viewport pixel height/width values
4. Visual viewport information
5. Element size information
6. Element visibility
7. Scrollbar and thin scrollbar sizes
8. Input element values
9. Input element dirty, touched, pristine, etc
10. Select element value, index, count, etc
11. Colors from an image or gradient (average, accent, light, dark, etc)
12. Colors occuring in a video
13. Video progress
14. Image loaded or broken + natural h/w
15. Clock time
16. FPS
17. Online/offline status
18. Page focused/visible
19. Scroll velocity
20. Accelerometer and device tilt/orientation
21. Geolocation
22. DPR, CPU cores, memory
23. Page navigation type (reload, back, etc)

And a few Chromium only props:

1. Network status like type, speed, save data, etc
2. Battery status
3. CPU pressure

Style Queries #

Style Queries being in all major browsers marks an important milestone for CSS, and made this library much more viable.

Using Prop For That with Style Queries looks like this:

import 'https://esm.sh/prop-for-that/auto'

<form data-props-for="form-state">
  <input name="name" required>
  <input name="email" type="email" required>
  <button type="submit">Save</button>
</form>

@container style(--live-all-valid: 1) {
  …
}

Bye noise #

Import, add attribute(s), have CSS fun.

Go make cool shit and share it with me 🤘🏻💀