Forem: Jane Ori

Customizing the MacOS Terminal with help from AI

Jane Ori — Fri, 06 Mar 2026 14:36:27 +0000

After spending a year traveling the world, I've acquired a new Macbook Air and had to set up my terminal interface again.

I do not normally enjoy this process but I loved it this time.
A continuous conversation with AI (Gemini specifically) lead to every random idea I had becoming realized in my .zshrc file.

There are some goodies in here I suspect you'll enjoy too.

Basic settings and imports

# # # # # # # # # # # # #
# import things we need #
# # # # # # # # # # # # #

# load 'live' hooks to execute things every call,
# load TAB completion
autoload -Uz add-zsh-hook compinit

# # # # # # # # # # # # #
# Enable Tab Completion #
# # # # # # # # # # # # #

# 1. Prevent duplicate entries in paths
typeset -U FPATH PATH
# 2. Add Homebrew to FPATH for even better tab completion (if it's not present already)
FPATH="/opt/homebrew/share/zsh/site-functions:${FPATH}"
# 3. Enable TAB completion
compinit

# # # # # # # # # # # # #
# Toggling Misc options #
# # # # # # # # # # # # #

# make ls pretty
export CLICOLOR=1

Basic aliases

# make the current terminal tab aware of things just installed or changed
alias reload='source ~/.zshrc'

# shortcut to go to my main projects folder
alias pj="cd ~/Desktop/PropJockey"

# Launch Gemini in a frameless chrome window
alias gemini="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --app=https://gemini.google.com/app"

Whenever you modify the .zshrc file, which I did about a hundred times during this, you either have to open a new tab or run the command I've aliased with a simple "reload".

I wound up installing Gemini using Chrome's built in "Install as App" feature which had the added benefit of getting Gemini in my dock. 🤙 Sweet.

Lock Function

One of the first things I do when setting up a mac is turn sleep into hibernate. When I close the lid, I'm done for the night, no reason to sleep.

sudo pmset -a hibernatemode 25

Unfortunately, no matter how you've configured your lock screen settings, after only a minute idle on the lock screen, the mac gets bored and falls asleep, which in my case hibernates it and I have to sit through memory reloading from the harddrive to log back in.

The fix:

First create a shortcut using the Shortcuts app that ships with mac. It's great

Add a new shortcut, search for the lock screen action, add it, name it "LockMac", and you're ready for the script

# Lock the screen without sleeping the system and keep it awake until ctrl + c to quit
# alias lock='shortcuts run "LockMac" && caffeinate -i -d -t 3600'
# ^ great but this is better because I don't have to ctrl + c!
lock() {
  # Start caffeinate in the background, disown it, hide its output, and save its Process ID (PID)
  caffeinate -i -d -t 3600 &>/dev/null &!
  local caff_pid=$!

  shortcuts run "LockMac"

  # Give macOS a bit to register the locked state
  sleep 3

  # The Magic Loop: Poll the Mac's hardware registry. 
  # This specific string ONLY exists while the screen is actively locked.
  while ioreg -n Root -d1 | grep -q "CGSSessionScreenIsLocked"; do
    sleep 2
  done

  # You're back! Kill the caffeinate process silently
  kill $caff_pid 2>/dev/null

  # Print a Bifrost-styled welcome back message
  # print -P "%F{cyan}🛸 Welcome back. Sleep prevention disabled.%f"
}

I always have at least one terminal open so I just type lock and I'm off to the bathroom in my hostel. The mac stays wide awake the whole time so I can simply type my password and continue.

I use this often

Automatic Node & NPM version mismatch warning

One of the things any seasoned node developer has done time and time again is accidentally run their project with the wrong version, or worse, installed packages.

I wanted to prevent that as best as I could so I requested a function that alerts the node version and the version specified in .nvmrc or package.json with pass/fail indicators based on a comparison of the values.

# Checks current versions against .nvmrc or package.json requirements
nvi() {
  # 1. Ensure Node is actually installed
  if ! command -v node &> /dev/null; then
    print -P "%F{red}✘ Node.js is not installed or not in PATH.%f"
    return 1
  fi

  local current_node=$(node -v)
  local current_npm=$(npm -v)
  local req_node=""
  local req_npm=""

  # 2. Look for project requirements (.nvmrc takes priority for node)
  if [[ -f ".nvmrc" ]]; then
    req_node=$(cat .nvmrc | tr -d '\n' | tr -d '\r')
  fi

  # Fallback to package.json engines if it exists
  if [[ -f "package.json" ]]; then
    if [[ -z "$req_node" ]]; then
      # Safely extract engines.node using Node itself
      req_node=$(node -e "try { console.log(require('./package.json').engines.node || '') } catch(e) {}" 2>/dev/null)
    fi
    # Extract engines.npm
    req_npm=$(node -e "try { console.log(require('./package.json').engines.npm || '') } catch(e) {}" 2>/dev/null)
  fi

  # 3. Print Current Versions
  print -P "%F{magenta}Current Node:%f %F{cyan}${current_node}%f"
  print -P "%F{magenta}Current NPM:%f  %F{cyan}v${current_npm}%f"

  # 4. Evaluate and Print Requirements (if they exist)
  if [[ -n "$req_node" || -n "$req_npm" ]]; then
    echo ""
    print -P "%F{242}Project Requirements:%f"

    # Node Requirement Check
    if [[ -n "$req_node" ]]; then
      # Extract just the major version number for a reliable comparison
      local clean_current=$(echo "$current_node" | grep -oE '[0-9]+' | head -1)
      local clean_req=$(echo "$req_node" | grep -oE '[0-9]+' | head -1)

      if [[ "$clean_current" == "$clean_req" || "$current_node" == *"$req_node"* ]]; then
        print -P "%F{green}✔ Node:%f ${req_node}"
      else
        print -P "%F{red}✘ Node:%f ${req_node} (Mismatch detected)"
      fi
    fi

    # NPM Requirement Check
    if [[ -n "$req_npm" ]]; then
      local clean_current_npm=$(echo "$current_npm" | grep -oE '[0-9]+' | head -1)
      local clean_req_npm=$(echo "$req_npm" | grep -oE '[0-9]+' | head -1)

      if [[ "$clean_current_npm" == "$clean_req_npm" || "$current_npm" == *"$req_npm"* ]]; then
        print -P "%F{green}✔ NPM:%f  ${req_npm}"
      else
        print -P "%F{red}✘ NPM:%f  ${req_npm} (Mismatch detected)"
      fi
    fi
  fi
}

Just run nvi (Node Version Information) and we're golden...

...but we could be platinum if we called this automatically when you change directory into one with node expected!

# # # # # # # # # # # # #
# Run nvi automatically #
# # # # # # # # # # # # #

auto_check_node_env() {
  # Check if we are in a folder with Node files
  if [[ -f "package.json" || -f ".nvmrc" ]]; then
    echo "" # Add a blank line for visual breathing room
    nvi
  fi
}
# Attach it to the 'Change Directory' hook
add-zsh-hook chpwd auto_check_node_env

🤌 Great success.

Now every time I cd into the root of one of my node projects, it runs this command so I'll be shown without needing to remember to check. I stopped short of letting it nvm into the "right" version automatically hah

The Beautifully Colorful Path Highlighting and Git Info

First, I installed this color theme called Bifrost:

Then, for the current directory path, I wanted to grey out the roots of the path, highlight the project name by detecting if it's in a git repository, then highlight everything after the project name in a different color.

The end result is the most significant parts being easy to distinguish and effortlessly identified at a glance. I. Love. It.

There's all kinds of other stuff in here like basic git status indicators, the branch, separate counts of staged and unstaged files, etc.

The first part of the prompt is something that is slightly redundant indicating complete vs a failed reason, followed by a completion timestamp of the previous command AND the number of seconds the previous command took (if it was more than one).

A couple line breaks after that and the typical PROMPT shows up.

# # # # # # # # # # # # #
# Meta info of last cmd #
# # # # # # # # # # # # #

# 1. Capture the start time of a command
preexec() {
  timer=${timer:-$SECONDS}
}
# 2. Calculate the difference and format it
calculate_timer() {
  if [[ -n "$timer" ]]; then
    timer_show=$(($SECONDS - $timer))
    if [[ $timer_show -ge 1 ]]; then
        export ELAPSED="%F{yellow}${timer_show}s %f"
    else
        export ELAPSED=""
    fi
    unset timer
  else
    # THE FIX: If no command was run, clear the old time!
    export ELAPSED=""
  fi
}
add-zsh-hook precmd calculate_timer


# # # # # # # # # # # # #
# Best git aware prompt #
# # # # # # # # # # # # #

# look inside the variables every time the PROMPT is printed
setopt PROMPT_SUBST

# Fetch the Mac Display Name
DISPLAY_NAME=$(id -F)

# Define the raw escape codes for Dim and Reset
DIM=$'\e[2m'
RESET=$'\e[22m'
# %{${DIM}%}%F{yellow}%~%f%{${RESET}%}

set_surgical_path() {
  local exit_code=$? # capture exit code of previous command

  local repo_root
  # Get the absolute path to the repo root
  repo_root=$(git rev-parse --show-toplevel 2>/dev/null)
  local GIT_INFO="" # Start with a blank slate

  if [[ -n "$repo_root" ]]; then
    local full_path=$(pwd)

    # 1. Everything BEFORE the repo root
    # We take the directory of the repo_root (its parent)
    local parent_dir=$(dirname "$repo_root")
    local prefix="${parent_dir}/"
    prefix="${prefix/#$HOME/~}" # Clean up Home path

    # 2. The Repo folder itself
    local repo_name=$(basename "$repo_root")

    # 3. Everything AFTER the repo root
    # We remove the repo_root path from the full_path
    local suffix="${full_path#$repo_root}"

    # Assemble: Dim Prefix + Bright Repo + Dim Suffix
    DYNAMIC_PATH="%{${DIM}%}%F{white}${prefix}%f%{${RESET}%}"
    DYNAMIC_PATH+="%F{magenta}${repo_name}%f"
    DYNAMIC_PATH+="%F{blue}${suffix}%f"
    # Get the branch name, fallback to short hash if in detached HEAD
    local git_branch=$(git branch --show-current 2>/dev/null || git rev-parse --short HEAD 2>/dev/null)

    # Check for Action States (Merging / Rebasing)
    local git_action=""
    if [[ -f "$repo_root/.git/MERGE_HEAD" ]]; then
      git_action="%F{yellow}(merge)%f "
    elif [[ -d "$repo_root/.git/rebase-merge" || -d "$repo_root/.git/rebase-apply" ]]; then
      git_action="%F{yellow}(rebase)%f "
    fi

    # Check Clean/Dirty Status
    local git_state=""
    local git_status=$(git status --porcelain 2>/dev/null)

    if [[ -z "$git_status" ]]; then
      git_state="%F{green}✔%f" # Perfectly clean
    else
      # Check for staged changes (+) and unstaged/untracked files (*)# Count lines matching staged (column 1) and unstaged/untracked (column 2)
      local staged_count=$(echo "$git_status" | grep -c '^[AMRCD]')
      local unstaged_count=$(echo "$git_status" | grep -c '^.[MD?]')

      # If there are staged files, add the yellow count
      if [[ "$staged_count" -gt 0 ]]; then
        git_state+="%F{yellow}+${staged_count}%f"
      fi

      # If there are unstaged/untracked files, add the red count
      if [[ "$unstaged_count" -gt 0 ]]; then
        # Add a space for readability if we also have staged files (e.g., +2 *3)
        [[ -n "$git_state" ]] && git_state+=" "
        git_state+="%F{red}*${unstaged_count}%f"
      fi
    fi

    # Assemble the final Git string
    GIT_INFO=" on %F{cyan}${git_branch}%f ${git_action}${git_state}"
  else
    # Not in a repo: Show the whole path dimmed
    DYNAMIC_PATH="%{${DIM}%}%F{magenta}%~%f%{${RESET}%}"
  fi

  # Define the Prompt
  # %D{%H:%M:%S} = Hour:Minute:Second
  # %n = username
  # %~ = current directory (shortened)
  # %# = % for users, # for root (I replaced this with: %(!.#.$))
  # %(!.#.$) = # for root, $ for users
  # The %(?.X.Y) syntax means: If last exit code was 0, show X, else show Y ## %(?.%F{green}Completed.%F{red}Stopped)%f

  local nl=$'\n' # ${nl}
  local status_line=""
  if [[ $HISTCMD -ne $LAST_HISTCMD ]]; then
    local status_text=""

    # 2. The Exit Code Skyscraper
    case $exit_code in
      0) status_text="%F{green}Completed" ;;

      # The "Oh, I meant to do that" code
      130) status_text="%F{yellow}Stopped" ;; # SIGINT (Ctrl+C)

      # The "Wait, what just happened?" codes
      126) status_text="%F{magenta}Denied (126)" ;; # Permission denied / Not executable
      127) status_text="%F{magenta}Not Found (127)" ;; # Typo in command name

      # The "Violent Crash" codes
      137) status_text="%F{red}Killed / Out of Memory (137)" ;; # SIGKILL (Often the Out-Of-Memory killer)
      139) status_text="%F{red}Segfault (139)" ;; # SIGSEGV (Memory access violation)
      143) status_text="%F{yellow}Terminated (143)" ;; # SIGTERM (Graceful kill command)

      # The Catch-All for standard script errors
      *) status_text="%F{red}Exit code: ${exit_code}" ;;
    esac

    status_line="${nl}%{${DIM}%}${status_text}%f%{${RESET}%} %F{242}at %D{%H:%M:%S}%f ${ELAPSED}${nl}${nl}"
  fi
  LAST_HISTCMD=$HISTCMD

  local name_path_git="%F{magenta}${DISPLAY_NAME}%f in ${DYNAMIC_PATH}${GIT_INFO}"
  local input_indicator="${nl}%{${DIM}%}%F{yellow}%(!.#.$)%f%{${RESET}%}"

  PROMPT="${status_line}${name_path_git}${input_indicator} "
}

# 4. Tell the surgical path function to run before every prompt
add-zsh-hook precmd set_surgical_path

The final touch

Place a little 👽 Extra Terrestrial emoji in right prompt so I can scroll up the wall of text and find my inputs a little more easily.

# # # # # # # # # # # # #
# A little splash of me #
# # # # # # # # # # # # #

RPROMPT='👽'


# # # # # # # # # # # # #
# This was a triumph. ♫ #
# # # # # # # # # # # # #

# I'm making a note here: Huge success.


# # # # # # # # # # # # #
# Things added by tools #
# # # # # # # # # # # # #

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

Open Contact 👽

Please do reach out if you need help with any of this, have feature requests, or want to share what you've created!

PropJockey	CodePen	DEV Blog	GitHub

Mastodon	LinkedIn	X	Bluesky

My heart is open to receive abundance in all forms, flowing to me in many expected and unexpected ways.

PayPal	Ko-Fi	Venmo

BTC	XRP	ETH

bc1qe...usgn9	rw2ci...nWKQg : 459777128	0x674...beF54

100% CSS: Fetch and Exfiltrate 512 bits of Server-Generated Data Embedded in an Animated SVG

Jane Ori — Fri, 17 Jan 2025 21:41:08 +0000

This is a direct followup to to Getting 32 bit API Response Data in CSS

In CSS, 16 bits of response data, placed both in the intrinsic width and in the intrinsic height, was a huge improvement from not being able to get API response data at all (without JavaScript)...

However, in the days after I figured it out, my mind leaned in one direction:
It would be way more fun if it was 16 bits 32 times instead of just twice.

Packing 512 bits into an SVG for Exfiltration

I was meditating before bed and got struck with another inspired thought -

"What if it was possible for the image document itself to animate its own intrinsic size?"

The usual chain of realizations after an inspired thought each flashed with understanding on how it could be accomplished... I just needed to figure out if such an image type existed.

I grabbed my phone and and searched across all the animated image formats I knew of, seeing if any of them were capable of it. svg, webp, apng, gif, maybe weird video formats? I couldn't find any.

In the morning, something in me said to keep digging at SVG.

I tried embedded CSS, media queries, use'd defs, more use'd defs, diving into the numerous SVG animate docs, trying to trick them, and read up on other ideas and animation related properties - nothing could let me set height or width.

But that last link made me think...

...what about viewBox? I'd have some other hurdles to tackle but... Is that possible to animate?

vvv
IT IS!!
^^^

Sorting out the solution space

Now the problem is, if you don't set width and height attributes on the root svg element then try to use the svg as content on a pseudo, it renders 0px x 0px because it's a vector document and no longer has an intrinsic size.

So I searched and added preserveAspectRatio to it... Still 0x0... but then in my CSS, I pinned the width to 10px and let the preserved aspect ratio of the viewBox determine the height (which I can change with an animation embedded in the SVG) aaand... the html element containing it grew to the expected height.

:3

If there was only one frame, this took my original 32 bits and cut it in half; since only one dimension can be exfiltrated while the other is static.

BUT! Now, my 2nd dimension was time and the first is at the mercy of time, so there's more than enough data to be had.

How exciting!

I learned all I could about how to control the animation in SVGs and whipped up a server side script to generate my first animated SVG:

<?php
  header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return $viewBoxXYWidth . ((string) ($val));
  }, $data, range(1, $datalen));

  $dur = $datalen * 0.33; // total seconds

  $keytimeStep = 1 / ($datalen); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $datalen - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate
      attributeName="viewBox"
      dur="' . $dur . 's"
      fill="freeze"
      begin="0.1s;"
      values="' . $values . '" 
      keytimes="' . $keytimes . '"
      repeatCount="indefinite"
      calcMode="discrete"
    />
  </svg>';
?>

(why php?! - because I already had a server I've been paying for for years, set up to run php out the gate.... And even though I've earned a wonderful living knowing JavaScript and node really well, sometimes it's fun to look up every single function, operator, and syntax to progress through something you know you can do without knowing specifics. lol)

Now let's fork my first CodePen from the previous article to see CSS responding to and changing size --vars as the SVG ticks along:

Confirmed! We can read the size change. Like in the previous article, in the end, it'll be using the view-timeline measurement technique instead this tan(atan2()) technique.

It cooks my cpu so we'll want to remove it from content when the exfiltration completes.

Conceptually, how to procedurally exfiltrate 1D + time

The demo above isn't very useful on its own. It reports a copy of the height whenever it's there but we need to save it... and what good is a bunch of 16 bit values if you don't know and can't trust the order?

I know I can accumulate values in CSS with the CPU Hack and mathematically determine which --var gets incoming values updated instead of just holding its previous value, so I won't worry about CSS specifically. How, in general, could we exfiltrate 1D over time?

Sentinel values to the rescue!

The size of the measuring area we use doesn't HAVE to be limited to 16 bits even if I want to limit the data packets themselves to 16 bits. So we can pack some sentinels in there too. css-api-fetch ships with the ability to handle values up to 99999, which is well above 65535 (the 16 bit ceiling).

So what do we need to know?

What problems might we run into?

If two values in our data are the same back-to-back, we need an interruption to know it's two distinct packets. I already decided we'll be aiming for 512 bits, so we need the SVG's animation to have a maximum of 32 16-bit data frames, with sentinel frames in between...

If the CPU is feeling heavy, the SVG animation may appear to skip discrete steps entirely. That means we need some way of always knowing what step we're on. So rather than a single "between data frames" sentinel, let's use the data index (1 based like CSS nth-* selectors) as the sentinel value, making it its own discrete step before the discrete step showing the data for that index.

Sentinel index -> data -> sentinel index -> data ...

That lets us know when it loops too, potentially when we hit sentinel 1.

But how do we know that it didn't skip to a different data frame and accidentally have us record it in the wrong slot?

We need to let it loop and keep going until it's right, and the best way to know if data is correct is a checksum! So we need another data frame, and a sentinel for that value.

Creating the Checksum Algorithm

I could use css-bin-bits to XOR all the data, but it's quite heavy and isn't needed anywhere else - let's settle on an alternative that's simple to do in CSS.

Mathematically, if you take a 16 bit value, divide it by 256 (floor to integer), and take the 16 bit value again modulo by 256, you get the high and low bytes. Add those 8 bit values together and you're at 9 bits. This feels like a reasonable checksum approach, let's circle back to this though.

We don't have to stay in 16 bit range to compute the checksum as long as the final checksum is 16 bits, so let's just sum all (up-to) 32 values.

We've got to be careful about incorrect storage writes due to skipped frames though, so let's add the even index values twice so there's some semblance of order.

That sum, 16 bit values, 32 times, plus an additional 16 times, is about 22 bits. Divide and module 11 bits on each side circling back to the earlier thought, then add those together, giving 12 bits as our checksum response.

Seems reasonable... It's not completely error proof but the SVG would have to be skipping several steps to mess it up in a way to MAYBE generate the same checksum now... In any case, let's also send back the data length and include that in the checksum as well, just by adding it as the last step of our checksum. The max data length (number of 16 bit values we want to handle) is only 32, so adding the length value to the 12 bits doesn't come anywhere near pushing us over 16 bits. Yay!

spoiler: this is what I did but CSS became lossy somewhere around 21 bits so I split it up and effectively did the same algorithm but in smaller chunks at a time. Server side uses the alg exactly as described.

Technically with the setup we've described, it doesn't matter what the order is in the animation as long as each sentinel tells you what index the next frame is supposed to be in the data.

One more thing, let's put the data length value first in the response and add a sentinel for that too (sentinel in the SVG animation before the value, as with the rest of the data).

That's 34 sentinels. The SVG viewBox height can't be 0 and CSS will benefit from allowing 0 to represent no data internally, so let's say we have 35 sentinels with 0 deliberately unused.

All data frames now get embedded in the SVG with 35 added to their value. Length and checksum data values ALSO get 35 added to the viewbox value. viewBox heights in the SVG Animation representing the sentinels will have values 0 to 34 (skipping 0) and each tell us exactly what the next frame in the SVG Animation represents.

CSS side, we just check if the raw measurement is greater than 34, it's data so subtract 35 from it, if it's less than 35, it's a sentinel.

Beginning to Exfiltrate the 512 bits with CSS

After I finished the PHP side to generate the SVG animation as detailed, I thought on specific ways to begin the CSS for this exfiltration process.

Here's the PHP code!

<?php
  header('Content-type: image/svg+xml');

  $data = array(
    400,
    450,
    150,
    20,
    175
  );

  $datalen = count($data);

  $viewBoxXYWidth = '0 0 10 ';

  // add 35 to all the values so we can use 0 to 34 for sentinels. 0 = CSS-side sentinel, 1-32 = data frames, 33 = length, 34 = checksum
  $frames = array_map(function ($val, $index) use ($viewBoxXYWidth) {
      return ($viewBoxXYWidth . ((string) $index) . '; ' . $viewBoxXYWidth . ((string) ($val + 35)));
  }, $data, range(1, $datalen)); // 1 up to 32 = indicator that next frame is the value(+35) for that index(1-based)

  // no matter how many are in the array, '33' indicates the next frame is data length, which is used in the checksum too
  array_unshift($frames, $viewBoxXYWidth . '33; ' . $viewBoxXYWidth . ((string) ($datalen + 35))); // + 35 b/c data
  // unshift so the length is (hopefully) the first value read and a sense of progress can be reported

  $fullsum = 0;

  for ($x = 0; $x <= ($datalen - 1); $x++) {
    // double the odd ones so there's some semblance of order accounted for
    // the odd ones with 0 based index is the even ones on the CSS side
    $fullsum += ($data[$x] + (($x & 1) * $data[$x]));
  }

  $checksum = floor($fullsum / 2048) + ($fullsum % 2048) + $datalen + 35; // + 35 because it's data

  // no matter how many are in the array, '34' indicates the next frame is checksum
  array_push($frames, $viewBoxXYWidth . '34; ' . $viewBoxXYWidth . $checksum);

  $actualNumItems = count($frames) * 2;

  $dur = $actualNumItems * 0.33; // total seconds

  $keytimeStep = 1 / ($actualNumItems); // uniform portion per frame

  $keytimes = implode("; ", array_map(function ($index) use ($keytimeStep) {
      return ($index * $keytimeStep);
  }, range(0, $actualNumItems - 1)));

  $values = implode("; ", $frames); 

  echo '<svg viewBox="0 0 10 100" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg">
    <animate
      attributeName="viewBox"
      dur="' . $dur . 's"
      fill="freeze"
      begin="0.1s;"
      values="' . $values . '" 
      keytimes="' . $keytimes . '"
      repeatCount="indefinite"
      calcMode="discrete"
    />
  </svg>';
?>

There are a few ways to accomplish this in CSS and potentially many more coming with recent spec additions.

My first approach is the easiest conceptually - using a view-timeline for every piece of data and doing the same thing over and over. It was working but I groaned through my progress in displeasure with how gross it was. That'll be nearly 40 animations on :root if I continued.

So I went to sleep.

When I woke up, I laid there several moments looking out the window smiling with that just-woke-up-or-meditated buzzy feeling, then a firehose of thoughts rushed into my head. I rolled over, grabbed my notebook and the closest pen, sat up in bed, and started writing down the algorithm to exfiltrate it with just 6 CSS animations.

Literally solved on paper; This is EXACTLY how it's implemented.

I got up, got on my computer, ignored my previous work, and opened a new CodePen.

I set up the 4 html elements indicated among the chicken scratch there, then flooded the CSS panel with notes around 4 empty class selectors corresponding to them. It won't be on :root now but we can place anything that relies on it inside.

Not a single piece of functionality was added until the notes were copied from the paper and written in more specific detail in CodePen.

When I was done, I just read the notes and started implementing what they said, all the way to the final working result.

(I wrote "20" instead of "35" because I was going to test with 256 bits)

I'll dive into how it works. Because of view-timeline and timeline-scope, you can set data up to flow in in kind of a Klein Bottle shape if you can picture the surface animating and getting sucked into the "hole", back up to the narrow top to poor down over the surface again, gaining size and complexity through dom layers, and then loop back up through the blackhole into the higher consciousness (:root).

It's mostly vertically cyclic (rather than mostly horizontally cyclic or statically cyclic)

Exfiltrating the 512 bits with CSS

The notes we slightly tweaked and made more clear:

256 test -> 512 final

and I added a presentation node inside which is great because I can show the internals too as the algorithm executes.

but here is the final notes without all the implementation and presentation noise. This exactly describes how it all works.

It may not be in good form for an article to have this many details embedded externally but I will be breaking down each chunk to show how it's implemented.

Main Controller

At the top of this structure is 4 timeline values and their animations. So let's just plop those in.

The key piece of data flow that this enables, is it gives us the ability to lift data nested deep in the DOM back up to a host (timeline scope). It's not efficient, so we want to limit how often we do this. Each registered property and it's animation can vertically host a single piece of data. The data's value is determined by the inline or block view position of an element somewhere deep in the structure - we'll get to that part later.

(see the looping example previously embedded above for a clearer picture of the data flow)

The four pieces of data we're lifting here are:

--xfl-cpu-phase - this is a numeric value 0 to 4 that signals what phase of the CPU Hack is currently being executed. (a single 'frame' of the CPU Hack is 4 to 5 CSS render frames, one loop of the phases 'ticks' the CPU Hack) I will demonstrate this more specifically later in this article.

--xfl-raw-data - this hosts the height of the SVG wherever the SVG is in its animation cycle. Our raw data. As said before, if this value is less than 35, this discrete step of the SVG animation is a sentinel value. If it's greater than 34, this discrete step of the SVG animation is our 16 bit value + 35, which corresponds to what the previous sentinel indicated.

--xfl-data-type - this is the most recent sentinel value. This value does not change until the next sentinel is encountered. There is a 1 CSS frame delay from setting --xfl-raw-data to setting this value.

--xfl-data-value - this is the current data value after 35 was subtracted from the raw value, or 0 if we haven't reached this step of the sequence yet. There is a 1 CSS frame delay from setting --xfl-data-type to setting this value.

I've also preemptively wrapped svg-animation-current-state-reporter in a condition that only has functionality and only loads the animated SVG while the process is incomplete. (so all the internals are removed from memory and the heavy animated svg is removed from rendering when we finish)

The keyframe values go from a max value for that piece of data to 0. I'll explain later why these are backwards - look for the image of Uno Reverse cards.

CPU Exfiltrator

Next we set up the basic boilerplate for a CPU Hack

The CPU Hack boilerplate is just following a variable name pattern to set up capture and hoist animations.

If we have 1 integer --xfl\\1 that we want to cycle horizontally (over time), we register it and we set up capture and hoist animations like so:

@keyframes capture {
  0%, 100% {
    --xfl\\1-captured: var(--xfl\\1);
  }
}

@keyframes hoist {
  0%, 100% {
    --xfl\\1-hoist: var(--xfl\\1-captured, 0);
  }
}

Then complete the cyclic assignment on the .cpu-exfiltrator element where the two CPU animations are hosted. I'll do it for just one of the values for now:

  --xfl\\1: calc(
    var(--xfl\\1-hoist, 0) + 1
  );

In Chrome, they won't statically cycle (become the initial value) unless both animations are running at the same time. Which is a FANTASTIC side effect of what's likely an optimization of paused animations setting numeric properties.

Finally, since we're using a new automatic version of the CPU Hack (you don't have to :hover to cycle the phases like in the original hack), we wire in the --xfl-cpu-phase var from previous (hosted on the parent element here, so we can use style queries to respond to it) and control the play state of our animations.

We also output --cpu-next-phase which will later be lifted back to the top and set the next value for --xfl-cpu-phase using its view position and timeline scope.

I've added an additional phase to keep the CPU Hack paused until the SVG Animation measurement has successfully locked in the next --xfl-data-type

  @container style(--xfl-cpu-phase: 4) {
    animation-play-state: paused, paused;
    --cpu-next-phase: calc(
      min(1, var(--xfl-data-type)) * 4
    );
  }

(as it is now, data-type is still always 0 so once next phase is wired in, this will already be looping the CPU Hack. Once we have a data-type sentinel it won't loop until we've cleared it deliberately with the 0 sentinel)

Later, we'll also add the noted condition to prevent CPU phase 1 from starting until data is all in place. That will ensure that between data type (sentinel) being locked in and data value (raw - 35) being locked in, we want to leave the CPU Hack in its capture phase. So it's "ready to be ready" as Abraham Hicks might say.

I'll go ahead and register all the 32 values plus checksum and length that we expect the SVG Animation to report.

Since registration of --xfl\\1 to --xfl\\32 is a big block and the CPU animations are just boilerplate too, I'll move all those to the bottom of the hack setup to be ignored moving forward.

Automatic CPU Hack

This wires the next cpu phase up to the --xfl-cpu-phase value

.cpu-phase-cycle-request0r {
  display: block;
  position: absolute;
  overflow: hidden;
  background: hotpink;
  width: 100px;
  height: 10px;
  bottom: 100vh;
  &::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: calc(25px * var(--cpu-next-phase));
    background: lime;
    view-timeline: --xfl-cpu-phase inline;
  }
}

There's some CSS boilerplate here to make the element be a scroll container and put it off screen. The important part is:

view-timeline: --xfl-cpu-phase inline;

which says where the right edge of this pseudo element falls in its 100px wide parent, wire it up as a "progress" from the left to our animation that moves from 0 to 4... So 25px is 25% complete, which maps to 1 when 25% is between 0 and 4.

image sourced from a google search leading to twitter

TECHNICALLY the animation is 4 to 0 and TECHNICALLY it's measuring from the right edge of the pseudo as view progress towards the right. So 25px wide pseudo is 75% from the right of its 100px wide scroll parent and maps to a value of 1 when 75% is between 4 and 0.

It's easier to understand if you don't cognitively process the reverse reverse math and just accept the end result is a simple progress 0 to 4 because the max value in the animation is 4 (again ignoring that the animation starts at 4).

Let's also write the ready state that holds the CPU in phase 0 until the data is ready. The note is on line 64 of our demos:

Data ready = data-type > 0 && raw-frame-data - 35 === data-value

  --xfl-data-is-ready: calc(
    min(1, var(--xfl-data-type, 0)) *
    (1 - min(1, max(
      (var(--xfl-raw-data, 0) - 35) - var(--xfl-data-value, 0),
      var(--xfl-data-value, 0) - (var(--xfl-raw-data, 0) - 35)
    )))
  );
  @container style(--xfl-cpu-phase: 0) {
    animation-play-state: running, paused;
    --cpu-next-phase: var(--xfl-data-is-ready);
  }

Wait, === in CSS?

These are quite outdated now and I'd do them differently today, written before clamp() was baseline, but I always open this old codepen to mindlessly copy paste numeric comparators when I need them. It'd be a good article to update these and explain them but here you go in the meantime: https://codepen.io/propjockey/pen/YzZMNaz

Reading the SVG Animation

This is initially VERY similar to the CPU Exfiltrator section because it's the same technique, measuring and moving data from here up the DOM to where it's hosted (scope).

We'll be measuring and reporting the last 3 values for the base element we set up initially.

On ::before we'll render the SVG and set --xfl-raw-data using block view position which is the measurement of the animated SVG's height. (remember, we'll pin the width to 10px)

On ::after we'll set --xfl-data-type inline (sentinel values 0 to 34) and --xfl-data-value block (16 bit values).

The parent will need to be wide enough to render the SVG (at least 10px) and accurately provide measurements for the sentinel values (0 to 34).

The parent will also need to be tall enough to measure 16 bit values (+ 35). Since we set a max value in the first step of 100k, we'll just use that even though it's about 30% bigger than we need.

And move it off screen to the top and left so it doesn't cause scrollbars.

Therefore,

.svg-animation-current-state-reporter

gets

  position: absolute;
  background: rgba(255, 0, 0, 0.5);
  width: 34px;
  /* --xfl-data-type keyframes are 34 to 0 b/c max data-type = 34 */
  height: calc(var(--xfl-max) * 1px);
  bottom: calc(var(--xfl-max) * 1px + 100vh);
  left: calc(-100vw - 100px);
  overflow: hidden;
  font-size: 0px!important;
  line-height: 0px!important;
  margin: 0px;
  padding: 0px;

and before becomes

    &::before {
      content: url('http://css-api.propjockey.io/api.svg.php?');
      position: absolute;
      background: lime;
      left: 0px;
      top: 0px;
      width: 10px!important;
      --height: 2135px;
      font-size: 0px!important;
      line-height: 0px!important;
      view-timeline: --xfl-raw-data block;
    }

and ::after gets

  position: absolute;
  width: 1px;
  height: 1px;
  left: calc(
    var(--TODO_SENTINEL_VALUE, 0) * 1px - 1px
  );
  top: calc(
    var(--TODO_DATA_VALUE, 0) * 1px - 1px
  );
  background: black;
  view-timeline: --xfl-data-type inline, --xfl-data-value block;

Essentially the storage medium here for these after values is the view position of a 1px square pseudo against its parent scroll container. We subtract 1px in the left and top calcs because the pseudo itself is 1x1 and we want it to report 0 when the corresponding value is 0.

This is all very similar to what was done previously.

There are several complexities to how we calculate what these values should be, as the note indicates:

/* there's 4 stages here
// 1) cpu tells us to reset to 0s
// 2) cpu is in phase 0 (capture running) and stays until these stages finish
//   a. if svg animation frame (based on raw) is type, set type else use prev
//   3. if svg animation frame (based on raw) is data, set data else use prev
// 4) CPU is executing, our job is to hold prev values and ignore the SVG ani
*/

The key to understanding how to solve this is that any comparator value is set to either 0 or 1. 1 if it's true, 0 if it's false. Then multiply it by some value. If it's false, the result stays 0, otherwise it becomes whatever the value is.

Ana Tudor goes into great depth of how this idea works here

Then, if we do that comparison twice, with a different or opposite comparison for the second value, and add them together (Ensuring at most one of the comparators is 1) then the addition of two of them is just saying "else if".

if not ready * use the old value + else
if is ready * use this new value

This is how we hold onto the sentinel value through the duration of the SVG Animation's discrete step for the value after the type has already been reported.

The CSS code implementing it begins on line 191 here, just above the big block of --xfl\\... property registrations we put towards the bottom
@property --xfl\\1 { syntax: "<integer>"; initial-value: 0; inherits: true; }
...
and it contains additional notes:

Setting specific CSS --var values (addressed assignments)

The logic we just touched on is exactly the same concept we use for all of the --xfl\\1, 2, 32 values.

  --xfl-set\\1: calc(
    (1 - min(1, max(
      1 - var(--xfl-data-type, 0),
      var(--xfl-data-type, 0) - 1
    ))) * var(--xfl-data-is-ready)
  );
  --xfl\\1: calc(
    var(--xfl-set\\1) * var(--xfl-data-value, 0) +
    (1 - var(--xfl-set\\1)) * var(--xfl\\1-hoist, 0)
  );

You read --xfl-set\\1 as if --xfl-data-type gte 1 use --xfl-data-is-ready with an implied else 0

--xfl-data-is-ready was established earlier as a flag holding us in phase 0 until it's time to flip to phase 1.

That means our condition is && logic. Both flags must be 1 to pass.

Then you continue to read --xfl\\1 as if --xfl-set\\1 use --xfl-data-value (the current SVG Animation value) else if NOT --xfl-set\\1 use --xfl\\1-hoist (the previous value the CPU hack was holding for --xfl\1)

This is highly repetitive, and describes almost the entirety of the rest of this exfiltration.

The final steps are running basic calc() and mod() math to build the checksum as described earlier, then adding if the computed checksum === the checksum embedded in the SVG Animation to the CPU Hack so we know when it's complete. All more of the same.

So now it's time. :)

Presenting: The CSS Animated SVG Exfiltration Hack

Because I wanted to show each and every piece of this hack one value per element, the presentation for this is obnoxiously heavy. Over 2000 lines of HTML and over 400 lines of CSS. Plus I'm using css-bin-bits to convert each register to binary, etc.

(Click rerun in the bottom right of the codepen frame to see it happen in real time!)

No JavaScript!

Open Contact 👽

Please do reach out if you think this is neat and wish to learn more! Always happy to answer questions.

PropJockey.io	CodePen	DEV Blog	GitHub	Mastodon

🦋@JaneOri.PropJockey.io

𝕏@Jane0ri

100% CSS:
's border knockout behavior for any element !

Jane Ori — Wed, 08 Jan 2025 06:31:03 +0000

Legend has it, there will come a day when the beautiful fieldset border knockout effect will be possible with any html element.

And I have great news: In Chrome, that day is today!

Fieldset? Legend?

If you're unfamiliar, here's the border knockout effect on a fieldset with a legend:

fieldset legend examples in a slightly modified screenshot from VanillaHTML

The width of the legend (title) is clipping a hole in the border of the fieldset automatically.

While technically possible to just use <fieldset> and <legend> anywhere, it's generally not recommended to use a <fieldset> outside of a <form> and without any <input> elements inside of it, as the primary purpose of a fieldset is to semantically group related form inputs. Using it in unrelated contexts goes against its intended meaning and can negatively impact accessibility for screen readers.

Fieldset border legend knockout behavior anywhere

This is not trivial to accomplish so I hid every bit of the complexity that I could to make it as close to trivial to replicate:

@import the fieldset-legend utility in your css.
Add the fieldset-legend class to the wrapper
Set the --fl-left property to any <length-percentage> value (even negative values if you wish)

And the library will position the :first-child so it's vertically centered with the top of the element and knock out the stuff behind it!

To create a gap around the title, add padding to the :first-child however you want to.

The biggest gotcha here is you can't put plain text nodes directly in the fieldset-legend wrapper, text has to be nested inside of their own elements.

Also, technically fieldset's border knockout doesn't sink to the bottom of the legend element and clip the background too, like it does above.

If you prefer the knockout to only sink through the border, you can provide an additional <length> property, --fl-sink and set it equal to your border width:

Does it do anything else?

It does!

`--fl-left` alternatives

Instead of --fl-left, you could instead use --fl-center.
If you set --fl-center to 0px, the title will be centered horizontally along the top edge.
If you set it to -10px, it will be offset to the left of center by 10px.
Set it to 15px and it will shift right of center by 15px.

Instead of --fl-left or --fl-center, you could also use --fl-right with the expected behavior.

All 3 of these are <length-percentage> and can be positive, 0px, or negative.

`--fl-top` option

By default, the title element is vertically centered with the top edge of the outer element. Setting --fl-top to a negative <length> lifts it, and to a positive length drops it.

By default, the bottom edge of the title is how far down the knockout sinks into the element, so remember you can control that as well with --fl-sink described previously!

The fieldset-legend container also automatically applies a margin-top to cover the height of the title poking above the element. The rule setting this has 0 specificity so it can easily be overwritten if you prefer another value.

Title as `:first-child` alternatives

It may be important for you to place other elements, such as screenreader-only page jumps, prior to the title inside the fieldset-legend container.

Place a class fieldset-legend-title on any ONE of the direct descendants of your fieldset-legend element and the library will lift that element to the same desired position at the top, leaving :first-child alone.

`fieldset-legend` uses the `::before` pseudo

You can make it use the ::after pseudo instead, just change the class name from fieldset-legend to fieldset-legend-after

`fieldset-legend` no pseudo?

This is advanced usage but...

You can inset: 0px; an element inside the wrapper, customize it however you want, and use fieldset-legend-custom instead of fieldset-legend or fieldset-legend-after.

This drops all of the library's clipping and gives you a custom mask to use anywhere inside of the fieldset-legend-custom element.

For example, if you wanted to use this with your favorite sci-fi shaping library, augmented-ui:

Fallback behavior

The limiting feature support required to use this utility is timeline-scope.

Container style queries are also required.

This is what the first demo in this article looks like in non-Chrome browsers:

It applies the same mechanical styling to minimize differences, such as a non-static position and isolation: isolate; but most notably, it moves the title back inline and does two !important things:

The title color becomes currentColor - the content behind the title switches from the body to the inside of your fieldset-legend container, which may have a very different background. Using currentColor ensures the content is readable because the rest of the content in your not-a-fieldset is likely already set appropriately.
Along the same lines, I can't know if your title element already had its own background (though if it did, you don't need this utility to position it over the border) so the background is forced to transparent, ensuring currentColor on the fieldset-legend's background, which in most cases will already be readable.

To determine specific fallback behavior, you can set
--fl-fallback-title-color and --fl-fallback-title-background which will be used in place of currentColor or transparent in the event it is rendered somewhere without support.

And this is what the custom demo above looks like in browsers that don't support fieldset-legend:

Further fallback support

If you know how to use my old Space Toggle technique, the library also provides:

--fl-supported, which will be a space when supported and initial when not supported

and

--fl-not-supported, which is the opposite.

Open Contact 👽

Please do reach out if you need help with any of this, have feature requests, or want to share what you've created!

PropJockey.io	CodePen	DEV Blog	GitHub	Mastodon

🦋@JaneOri.PropJockey.io

𝕏@Jane0ri

GETting your IP Address with CSS - and other 32 bit API responses - without JavaScript!

Jane Ori — Mon, 06 Jan 2025 18:30:13 +0000

Just over a week ago while scrolling YouTube shorts after work on a Friday, looking for something to want, this 35 second video stopped me and took 100% of my attention

After one and a half playthroughs, I paused it, tilted my head back and stared off into space as ideas rushed into my mind.

"I could make Chess in CSS with the CPU Hack."

"Could I connect it to that tablebase without JS?"

"The only way CSS can reach out to a server is with background ima---!!!

It can also use url() as content on a pseudo element, which can resize the parent, then inset: 0px an absolute position container inside of it and I can measure that with tan(atan2()) aaand that's my GET request's response data...

If the element resizes based on that content, it would be useful to have it off screen to avoid causing scrollbars - plus better DX for anyone using would if it didn't need a weird one-off setup that you had to build inside of... So how do I get the data out --

I've known how to lift data to :root since the CPU Hack since it already does that on a much smaller scale but never had a reason to try..."

Then I paused as my eyes darted around without any awareness of my physical surroundings, looking for edge cases among the components I've assembled - "What can't be done here?"

...

"I'd have to @container style(--x: N) wrap my urls so gamestate can choose what ones to use but I'd only have a hardcoded list of possible endpoints until we get url() param()...
AH WAIT! I could also generate the necessary request url and prompt the player to SMEAR it into the page, shrouded as the UI to confirm their move..."

I leaned back and splayed my fingers and palms, panning my eyes across the room slowly as excitement built inside me.

"16 bits on the width and 16 bits on the height is huge but well within possible..."

"I think that's it! I can do it!"

The rest of this plot exposition isn't directly relevant, but I'm enjoying the moment so I'll leave the writing here for anyone reading along

So I started building my chess board in CodePen, where all my ideas start their journey into realization.

"I guess it's time to learn Chess so I know how to build the API request and to determine if ~32 bits was enough response data for it to communicate the CPU move..."

I played Chess briefly back in my teenage IRC-loving, game hacking days and quit at the end of a losing streak with hysterical laughter when I devised a way to cheat every move of a match and still lost. (I made my friend go first then used the move he wrote in IRC against the "expert" computer player in the chess game I downloaded, then communicated to him what the CPU did as my move.)

I was COMPLETELY oblivious to how much of Chess I knew absolutely nothing about.

I searched for existing APIs I could just wrap, assuming I'll generate an image on my server use the height/width as the response data. I quickly found chess-api.com which can respond with a next move given "FEN" as input.

I learned FEN, which lead to even more discovery of how much I didn't know about Chess. I knew I could generate the SMEAR Hack to build the gamestate in FEN format, and most importantly, I measured that I could indeed bitpack the important response data move: "b7b8q" into 32 bits. (It's an 8x8 board and I know where everything is, not much fundamentally has to be provided in the response.)

Now, I know with more certainty I can program Chess against a CPU Player in 100% CSS.

I also knew at that moment, I should definitely rewatch The Queen's Gambit because I absolutely loved it and can't wait to pick up on new details.

The universe is talking to me and I'm putting the excitement into action to keep the loop flowing.

Time to test the CSS API URL GET ALL CAPS TRAIN idea and see if it works.

Demoing the basics

First, establish appropriate background noise for this endeavor, The Queen's Gambit.

Next, confirm measuring an image.

Easy enough! Just make sure all the content inside stays absolute so it doesn't change the size of the container holding the image.

Throw in a test for changing what URL we GET...

Proof of concept confirmed, next leg of this journey was lifting the response data to :root so I can make all the setup invisible and at least 65535px off screen to the top and left.

I knew this was going to be heavy, esoteric CSS+HTML and I make things that help people make things, so right from the start, I built this with the intention of making it an easy-to-use library.

In version 1, Copy plop some specific (bulky) HTML in your page with a handful of options built in to make the requests and do the :root lift for you.

Import the library and specify the API endpoint from your CSS,

@import url(https://unpkg.com/css-api-fetch@1/api-fetch.css);

@container style(--api-id: 1) {
  .api-fetch { --api-fetch: url(https://css-api.propjockey.io/ip-address.php); }
}

And the data will be on :root for the rest of your app once it's ready.

But it gets better, fast!

First Public Demonstration, Chrome Only, :root

GETting a user's IP Address with CSS.

I'm not going to go into super specific implementation details in this post of how exactly that CSS+HTML lifts the data to :root in that original public demo because a couple of CSS loving friends pointed me in a much easier direction I hadn't learned about!

but I will put this quick summary here for anyone interested

:root:has(.specific-element:hover) { ..state... }

If the specific-element descendant knows it's :hover, it can change to put a different element on top of where it currently is which causes the next element to be hovered, then :root:has(...:hover) changes its state based on that element too, in a loop.

The CPU Hack lets us accumulate the state as different elements are :hover'd.

So if the data we want to lift is '512', we can sequence 'thousands', 'hundreds', 'tens', and 'ones', telling the child to present an element 0 to 9 representing the value it's holding in that position.

.api-transfer-value-0:hover, ...5:hover, 1, 2.

Child knows what numeric position we're asking for because state cascades, :has() lifts the value because the child presented the corresponding digit for us to :hover and read at :root.

The CPU Hack accumulates it into one value then tells the child to stop reporting after the ones position is saved.

The HTML in the demo linked above reveals a bit of what setup is required for that. The CSS code for it is here in v1 of css-api-fetch.

Second Public Demonstration - Cross Browser, no :root

The only difference here is that I don't lift it to :root and instead leave it in the container, DX requires you to wrap all of your content that needs access to the data in an absolutely positioned element inside of the hack's context.

In my original exposition I mentioned that I wanted to avoid this scenario, but it's cross browser and it has its uses too. Plus, it's not like you can't build your whole app inside the specific html setup.

You can see in the HTML tab just how much less effort is involved in there.

Just 4 specific nested html elements are required in the cross-browser version, then you build anything you want using your response data inside of that.

Third Public Demonstration - Chrome Only, :root, trivial

Kizu mentioned it might be possible to simplify so I went digging, then after not quite putting the dots together, T. Afif showed a possible way in that direction, I learned a ton from that article but was unsatisfied with the division and precision loss so I dove into the articles and amazing tools Bramus made and came up with a variation that satisfied my use cases.

As you can see in the CodePen's HTML the setup is so simple it's literally one line of HTML to fetch and your response data is on :root. In this case I used a second element to present the data too. AMAZING!

I packaged it up for a v3 release making all the handoff mindless, putting the measuring stuff off screen already set up since it's not important.

I posted about the release, then T. Afif linked a different article demonstrating a similar view-timeline configuration for measuring that I worked out for this - without the division! :)

I highly recommend reading all the work I've linked above, there's some exciting, talented CSS people sharing their ideas -- and knowing something is possible opens entire worlds of cool ideas!

What is `css-api-fetch` doing?

Importing css-api-fetch and adding a single line of html, you can fairly easily do API requests in your CSS and not have to consider the complexity of view-timeline yourself. I made it so you don't have to think about it, but for the curious, here's the concept and setup the library uses internally:

Two animations setting a --ints from the max values your API will respond with to 0
host (scope) the animations and their timelines on :root
create a measuring element sized to the max values your API will respond with, with non-static position, overflow hidden, etc to make it suitable for reading view/scroll positions.
Throw it absolute offscreen to the top left so it doesn't cause scrollbars on your app.
load the image url() inside of a nested size container's pseudo element's content and set view-timelines for both inline and block corresponding to the animations in step 1&2.
The animations now report the size of the image to the whole document

Here's a demonstration of all 6 of the steps above, step 4 is commented out so you can see it. We'll use Lorem Picsum to emulate specific height & width api responses easily.

That's the fundamentals but the library sets up 4 separate API request/responses that you can use simultaneously without knowing how it works.

What's `css-bin-bits`?

All 3 of the public releases have demonstrations that use a library I made ages ago, css-bin-bits that makes it super easy to do bitwise operations on 16 bit integers in 100% CSS and you don't usually have to write any calc() yourself - the library takes care of it all. For the 32 bit IP Address, using css-bin-bits I was able to limit the size of the image to exactly 16 bits on a single dimension.

Without bitpacking the 32 bit IP Address into two 16 bit values, T. Afif demonstrates you could use a 255255px by 255255px measuring container and split the response data out with decimal math - skipping css-bin-bits. css-api-fetch supports you setting any maximum, shipping with 99999 as the default maximum, much more than 16 bits (65535), but not quite 255255 lol.

How do you set up an API to respond with data in the image?

The lightest and most trivial way to pack data into the width and height of an image is to make the server respond with a bare-minimum SVG.

Here's how the IP address is packed and served in PHP, for example:

<?php
  header('Content-type: image/svg+xml');

  $adr = $_SERVER['REMOTE_ADDR'] ?: '255.255.255.255';
  $hex = str_pad(implode(array_map('dechex', explode('.', preg_replace('/[^\d\.]/', '', $adr), 4))), 8, '0', STR_PAD_LEFT);
  /* rx returns first 4 hex chars, removing up to 3 leading 0's */
  $width = hexdec(preg_replace('/(^0{0,3})|(.{4}$)/', '', $hex) ?: '0');
  /* rx returns the last 4 hex chars, removing up to 3 leading 0's */
  $height = hexdec(preg_replace('/^.{4}0{0,3}/', '', $hex) ?: '0');

  echo '<svg xmlns="http://www.w3.org/2000/svg" width="' . $width . 'px" height="' . $height . 'px"></svg>';
?>

The API requests you set up could easily accomplish a handful of low hanging fruit that CSS can't otherwise do without JavaScript

RNG
Current Time
TimeZone
Country Code
Operating System
or connection to any other api if you wrap it - such as chess-api

What comes next?

Chess?!

Not yet! Plus, Lilian has already made Chess in CSS!

// Detect dark theme var iframe = document.getElementById('tweet-1838643820428165565-495'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1838643820428165565&theme=dark" }

I'm not sure how it works or if there's a publicly available demo, but I'm sure she'd answer any questions! :)

For now, my excitement is focused elsewhere......

I want more than 32 bits per request.

I want 512 bits per request.

No JavaScript.

Open Contact 👽

Please do reach out if you need help with any of this, have feature requests, want to share what you've created, or wish to learn more.

PropJockey.io	CodePen	DEV Blog	GitHub	Mastodon

🦋@JaneOri.PropJockey.io

𝕏@Jane0ri

CSS Type Casting to Numeric: tan(atan2()) Scalars

Jane Ori — Mon, 09 Oct 2023 05:48:34 +0000

In current browser implementations of CSS, you cannot divide by length types; calc(100vw / 5px) does not work. It will eventually because it's in the spec, and with enough support it may happen soon. But for now, no way to produce scalars based on size.

With, technically, one up-and-coming exception, atan2().

atan2() accepts 2 params, effectively the slope, rise over run, y divided by x, atan2(height, width) and returns the angle from the bottom of the slope looking to the top.

Then, did you know? tan(atan2(height, width)) is the scalar <number> between the two dimensions.

No, I did not know that; is that true?

That's right... One could scale all kinds of dimensions, using simple trigonometry functions.

Really...?

If one were so inclined.

tan(atan2()) is just a scalar

No need to dive into normal trig things; pretty graphs, maps, and geometric art, etc.

Fundamentally, tan(atan2()) is just a scalar between two dimensions.

For this article I'll focus on identity scaling as a means to typecast into a numeric value but there are many ways to use this and compare any two dimensions now.

Screensize

One thing many people want is the ability to have the numeric pixel width (or height) of the viewport to find the aspect-ratio or do other calcs down the line.

I solved screensize in 100% CSS previously with a binary search using The CPU Hack but I realized today it's so much easier and faster with tan(atan2()):

What is the numeric pixel value of 100vw?

should be as easy as

:root {
  --px-width: tan(atan2(100vw, 1px));
}

but atan2 is super buggy in browsers right now. (mixing vw and px was intended to work)

Chrome returns 100 in this case, which is strange/undesirable.

Firefox returns 0 in this case because of the mixed units failing. If both are vw or both are px, Firefox correctly returns 100.

Safari seems to always return 0 from tan(atan2(Y, X)) for any Y and any X. With or without units, mixed or matching. (edit: Unless you wrap it in calc())

So for now we first need 100vw as NNNpx, which is easy in CSS because that's what happens automatically if you register a var as <length> then set it to a value like --100vw: 100vw

@property --100vw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

Now this works in Chrome exactly as hoped:

:root {
  --100vw: 100vw;
  --px-width: tan(atan2(var(--100vw), 1px));
}

--px-width is the width of the screen as a, usually integer, number

here it is live including one for 100vh too:

get font-size and more

You can use this same idea for any container query units, calc sizes containing mixed units, find out the px size of rem, anything you want. Just register a length, set its value, and convert to numeric px with tan(atan2()).

Easy peasy! Potentially super useful.

Works with <time> too

:root::after {
  --ms: tan(atan2(12s + 1ms, 1ms));
  counter-reset: val var(--ms);
  content: "Numeric ms value of 12s + 1ms is: " counter(val);
  /* counter prints 12001 */
}

That's all numeric typecasting identity scalars, and it's fun to think about all the ways you can mix calcs now, but there's even more cool stuff tan-atan2 can-a-can-do, perhaps for a future article ~

The Trig (update)

The trig behind this isn't necessary to know to use it, but I had a couple questions come up in private about it:

tan( angle ) is a function that takes an angle then produces a result that's equal to "opposite over adjacent" - the height divided by the width of a right triangle:

atan( ratio ) is a function that takes the value of height divided by width and returns the angle; the inverse of tan().

atan2( Y, X ) is a programming language's adaptation of atan() that takes the height (Y) and width (X) as separate arguments instead of dividing them before passing, then returns the same thing atan would have.

So what this trick is doing is kind of silly in most worlds (and probably why nobody pointed it out sooner) because we're using two trig functions instead of division that calc() implementations can't do yet.

atan2( Height, Width ) = angle from the picture above

tan( angle ) = Height / Width from the picture above

tan( atan2( Height, Width ) ) = Height / Width

@property --MyFullInlineSize {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}
@property --MyEm {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}
div.in-a-container {
  --MyFullInlineSize: 100cqi;
  --MyEm: 1em;
  --MyNumEmsWide: tan(atan2(
    var(--MyFullInlineSize),
    var(--MyEm)
  ));
  --MyNumPxWide: tan(atan2(
    var(--MyFullInlineSize),
    1px
  ));
}

The End

If you think this is useful, fun, or interesting, it's the kind of thing I do in my free time! So please do consider following me around the web:

PropJockey.io	CodePen	DEV Blog	GitHub	Mastodon

and 𝕏@Jane0ri

👽💜
// Jane Ori

PS: I've been laid off recently and am looking for a job!

https://linkedin.com/in/JaneOri

Over 13 years of full stack (mostly JS) engineering work and consulting, ready for the right opportunity!

[CSS Fix] When justify-content: space-evenly overflows, un-center the content

Jane Ori — Tue, 26 Sep 2023 14:42:27 +0000

Bramus has shown us a clever scroll animation based Space Toggle that allows our styles to respond based on weather the element can scroll or not.

https://www.bram.us/2023/09/16/solved-by-css-scroll-driven-animations-detect-if-an-element-can-scroll-or-not/

Pop over there to see how it works, continue here to see how I've used it ~

When we use space-evenly

When content spans the full width of your page in columns, like itineraries, house banners, etc,
justify-content: space-evenly; is subjectively the best looking layout for it.

(that's .justify-evenly if you tailwind)

What space-evenly breaks

If a column section is set to space-evenly but the code allows more columns to be added and scrolled horizontally, you'd probably expect overflow-x: auto; to do it well.

Here's 7 columns with overflow-x: auto; and the same code as shown previously:

At least 1.7 columns are totally inaccessible, scrolled off to the left in the unreachable negative scroll positions.

Why space-evenly breaks on overflow

This answer on stackoverflow does a great job explaining the 'why':

I found the CSS specs describe a "fallback alignment" in case the spacing cannot be applied. For space-between this is start whereas for space-evenly this is center, unfortunately. This explains the observed overlap difference.

Nevertheless, the spec also mentions

A future level of this module may allow the fallback alignment to be specified explicitly.

so perhaps with time we may be able to set the fallback to start.

Until that time I've found a workaround: set min-width on the container. To avoid excessive width, wrap the container in a scrolling parent element. Demo here.

author: Paul

Where is the CSS-Only fix to space-evenly overflows?!

It starts in this article from Bramus, then adapting his Space Toggle into our solution, we create a class to replace .justify-evenly here:

@keyframes detect-scroll {
  from, to { --can-scroll: ; }
}
.justify-evenly-until-scroll {
  --start-if-can-scroll: var(--can-scroll) start;
  justify-content: var(
    --start-if-can-scroll, space-evenly
  );
  animation: detect-scroll linear;
  animation-timeline: scroll(self inline);
}

Making a note here, huge success - and we added inline to the animation-timeline: scroll(self inline) to make it respond to horizontal scroll instead.

Swap .justify-evenly in the html with our new .justify-evenly-until-scroll and you get:

Hooray!

Who am I?

If you think this is useful, fun, or interesting, it's the kind of thing I do in my free time! So please do consider following me here, on CodePen, and on X as well!

👽💜
// Jane Ori

PS: I've been laid off recently and am looking for a job!

https://linkedin.com/in/JaneOri

Over 13 years of full stack (mostly JS) engineering work and consulting, ready for the right opportunity!

PropJockey.io	CodePen	DEV Blog	GitHub	X

UPDATE:

Wait? Nope! Continue, but, heads up:

Bramus (and someone privately) informed me of a new feature with a slight superset of browser support over animation scroll():

justify-content's safe keyword

https://drafts.csswg.org/css-align-3/#overflow-values

It currently works with justify-content: center safe; but if you specifically want space-evenly (I do!), this hack is currently the only working solution.

All the previous demos use grid, here it is with flex, first using space-evenly safe which doesn't do anything yet. Then, further down, same hack as used on the grid demos above, also works on flex.

Thank you!

Expert CSS: The CPU Hack

Jane Ori — Sun, 17 Sep 2023 03:33:01 +0000

A "CPU Hack" implies unlocking the ability for continuous crunching of data and re-evaluation of state.

For example, if cyclic vars didn't automatically fail to invalid (initial) state in CSS, this would continuously increment the value of --frame-count here:

body {
  --input-frame: var(--frame-count, 0);
  --frame-count: calc(var(--input-frame) + 1);
}

Spoiler alert: You actually can do this in CSS, without ever touching JS, I'll show you how!

The 5 Observables

First, let's establish a handful of observations of advanced CSS animation usage so the final demonstration isn't entirely unexpected.

Not directly related to "The 5 Observables"

1. Animation State Rules Over All (almost)

The property assignments set by Animation State trump all Selector State property assignments.

body background is always hotpink in this example:

  body {
    animation: example 1s infinite;
    --color: blue;
    background: var(--color);
  }
  body:hover {
    --color: green;
  }
  body:has(div:hover) {
    --color: red;
  }
  @keyframes example {
    0%, 100% { --color: hotpink; }
  }

This is (partially) why Animation State is not allowed to alter properties that control animations. As in, you cannot^[1] animate the value of animation-play-state.

(otherwise, once started, a self-setting animation could only be stopped by JS removal of the element it lives on since the animation could set its own animation value and stay alive no matter what other selector states tried to stop it.^[2])

Paused animations are no exception; whatever the value is when it's paused still trumps other states.

[1] Technically there's an unrelated hack that allows this, dealing with inheritance and invalid compute states, but the animation-frame timing of that hack is unreliable for CPU ticking.

[2] This is what went wrong with Ultron.

2. Property Assignments in a Keyframe Can Use var()

body {
  animation: example 1s infinite;
  --color: blue;
}
body:hover {
  --color: green;
}
body:has(div:hover) {
  --color: red;
}
@keyframes example {
  0%, 100% { background: var(--color); }
}

In this example, the background color is blue by default, green if hovering, or red if hovering specifically within a div. The color changes as the user interacts.

3. --var Assignments on Keyframe Results are Cached

We can test this by adding a little indirection to the background color assignment:

body {
  animation: example 1s infinite;
  --color: blue;

  background: var(--bg);
}
body:hover {
  --color: green;
}
body:has(div:hover) {
  --color: red;
}
@keyframes example {
  0%, 100% { --bg: var(--color); }
}

No matter what, the background is always blue because it first evaluated as blue and changes to --color are not re-computed.

Even if the animation is paused, the cached value does not change when states in the background change.

(paused animations use the cached value)

4. Changing An Animation Property Breaks The Cache

By altering the animation-duration while the user :hovers, the animation cache is recomputed.

body {
  animation: example 1s infinite;
  --color: blue;
  background: var(--bg);
}
body:hover {
  --color: green;
  animation-duration: 2s;
}
body:has(div:hover) {
  --color: red;
  animation-duration: 3s;
}
@keyframes example {
  0%, 100% { --bg: var(--color); }
}

The end result here is exactly the same as in #2 above; the background color is blue by default, green if hovering, or red if hovering specifically within a div.

Note: Safari has a bug where it does NOT recompute the cache when an animation property changes, so we've entered Chrome-only territory (firefox can't animate --vars yet)

If we "changed" the animation-duration to 1s, it would not technically change, and the cache does not recompute.

You begin to get interesting behavior if both :hover states use the same value that's different from the default state.

body {
  animation-duration: 1s;
}
body:hover {
  animation-duration: 2s;
}
body:has(div:hover) {
  animation-duration: 2s;
}

Let's show this one live:

depending on where your mouse enters the screen (from the top vs bottom), you'll get different colors that "lock" to one or the other until you mouse out.

5. Two Animations

What if instead of pseudo selector state changing the value of --color, we made another animation that changed it?

Our example animation still sets --bg based on --color, so we can expect it to still have the same caching behavior.

Changing an animation property of our example animation should also, still, cause it to recompute its cache.

So, finally, the example animation should accept whatever the current --color value is from another animation and cache it with its state.

Here's what that would look like:

body {
  animation: color 3s step-end infinite,
    example 1s infinite;

  background: var(--bg);
}
body:hover {
  animation-play-state: running, paused;
}
div::after {
  content: "color preview";
  background: var(--color);
}

@keyframes color {
  0%, 33% { --color: blue; }
  33%, 67% { --color: green; }
  67%, 100% { --color: red; }
}
@keyframes example {
  0%, 100% { --bg: var(--color); }
}

Note: Even though we're pausing the example animation on :hover, that still constitutes a change from the default running state so it re-computes and pauses in the same CSS paint frame.

and here's what it feels like:

The bg locks to whatever it was when you entered, then re-computes and re-locks to whatever it is when you leave.

Persistence! NEAT!

The CPU Hack Begins

The previous information implies something extremely interesting; grabbing the cached value from an animation does not recompute it, so it shouldn't cause an invalid cyclic state if the source of the cached value is one step removed.

Double capture, compute once, manage the timing... Should be possible.

We have the example animation conditionally capturing the value from either normal selector states or from another animation.

Let's imagine it's capturing a number instead of a color, like the --frame-count from the opening of this article.

And we'll rename it from example to capture.

body {
  animation: capture 1s infinite;

  --input-frame: 0;
  --frame-count: calc(var(--input-frame) + 1);
}
@keyframes capture {
  0%, 100% { --frame-captured: var(--frame-count); }
}

Wouldn't it be great if we could set --input-frame to that --frame-captured value?

We know that doing it directly would be cyclic because all 3 of these assignments exist in the same frame:

--input-frame = --frame-captured
--frame-count = --input-frame + 1
--frame-captured = --frame-count

If we capture the captured value though and make sure both captures aren't running at the same time, the capture-capture could hoist that value back to --input-frame...

Let's try. We'll call the captured capture hoist.

Also, since we don't want them ever running at the same time (because that would definitely be cyclic), let's start them off paused to be safe.

body {
  animation: hoist 1ms infinite,
    capture 1ms infinite;
  animation-play-state: paused, paused;

  --input-frame: var(--frame-hoist, 0);
  --frame-count: calc(var(--input-frame) + 1);
}
body::after {
  counter-reset: frame var(--frame-count);
  content: "--frame-count: " counter(frame);
}
@keyframes hoist {
  0%, 100% { --frame-hoist: var(--frame-captured, 0); }
}
@keyframes capture {
  0%, 100% { --frame-captured: var(--frame-count); }
}

Now, in order to test this, we also want to set up some dom that we can hover in a specific order to trigger the animation-play-state in the right order. No gaps between the elements and we'll give them classes phase-0, etc

The first phase is definitely capturing the original output. So we'll keep hoist paused and let our old friend capture run first:

body:has(.phase-0:hover) {
  animation-play-state: paused, running;
}

We can stop hovering that element to pause both, which will capture --frame-count, or we can go ahead and set up another element to explicitly do that:

body:has(.phase-1:hover) {
  animation-play-state: paused, paused;
}

And, finally? The moment of truth, test if we can run hoist while capture is paused, which should give us enough room to avoid the cyclic dependency and plop that output back that the top as input... which should give us our first 2

body:has(.phase-2:hover) {
  animation-play-state: running, paused;
}

Here it is live, :hover the cursor from top to bottom to complete a loop:

The CPU Hack

Eureka!

We could make the user pet the dom with their cursor all day orrrr we could move the dom under the cursor the moment it needs to be to automatically trigger :hover

Let's figure that out!

We'll need hovering .phase-0 to automatically "goto" .phase-1, then hovering that will "goto" .phase-2...

And then hovering .phase-2 needs to return to a paused, paused state to avoid any single frame running a compute for both animations at the same time.

Remember: playing or pausing an animation causes it to re-compute on that frame, so changing from running, paused straight to paused, running is actually, for one frame, running both at the same time.

So we need to "goto" a state that will then "goto" .phase-0. Since .phase-1 is paused, paused and "goto" 2, we'll duplicate it and make the new .phase-3 also pause both but "goto" 0 instead.

Let's add this CSS to what we had:

body:has(.phase-3:hover) {
  animation-play-state: paused, paused;
}

And we'll use this for the HTML:

<ol class="cpu">
  <li class="phase-0"></li>
  <li class="phase-1"></li>
  <li class="phase-2"></li>
  <li class="phase-3"></li>
</ol>

Here's a recap of each phase if interested

.phase-0 (hoist paused, capture running)
1. Hoist Value is Frozen
2. Assign Captured = Output Value
3. GOTO .phase-1
.phase-1 (hoist paused, capture paused)
1. Hoist Value is Frozen
2. Assign Captured Value = Output Value
3. Freeze Captured (at the end of this css paint frame)
4. GOTO .phase-2
.phase-2 (hoist running, capture paused)
1. Captured Value is Frozen
2. Assign Hoist Value = Captured Value
3. GOTO .phase-3
.phase-3 (hoist paused, capture paused)
1. Captured Value is Frozen
2. Assign Hoist Value = Captured Value
3. Freeze Hoist (at the end of this css paint frame)
4. GOTO .phase-0

Next, we'll style this .cpu element so each of its children take up its whole area when their width becomes 100%, z-stacked on top of each other in dom order.

.cpu { position: relative; list-style: none; }
.cpu > * {
  position: absolute;
  inset: 0px;
  width: 0px;
}
.cpu > .phase-0 { width: 100%; }
.cpu > .phase-0:hover + .phase-1 { width: 100%; }
.cpu > .phase-1:hover + .phase-2 { width: 100%; }
.cpu > .phase-2:hover + .phase-3 { width: 100%; }

This should be the final piece; each phase triggers the next and they'll only happen for one CSS Paint Frame each. Let's see it live!

Note: we also needed to register the output var (--frame-count) or else it will suddenly stop working at 100 because of calc() technically becoming nested each iteration. Casting it to integer prevents this and is much more efficient. The demo above has the @property code included.

Also, technically, one small cleanup you could make:

Drop the --input-frame var, just --frame-hoist directly, it's cleaner.

The Rest of the Owl

So you have a CPU in CSS. What can you do with it?

100% CSS Compute Integer --width and --height of the Screen

100% CSS Image-Mouse-Coordinate Zoom on Hover

100% CSS Conway's Game of Life Simulator - Infinite Generations, 42x42

100% CSS Breakout, play it here:

The End!

If you think this is useful, fun, or interesting, it's the kind of thing I do in my free time! So please do consider following me here, on CodePen, and on X as well!

👽💜
// Jane Ori

PS: I've been laid off recently and am looking for a job!

https://linkedin.com/in/JaneOri

Over 13 years of full stack (mostly JS) engineering work and consulting, ready for the right opportunity!

CSS Light/Dark Mode Implementation WITHOUT Duplicating Vars

Jane Ori — Wed, 06 Sep 2023 18:14:52 +0000

A common perspective on the challenges behind implementing light mode and dark mode toggles in CSS is that it seemingly requires duplicating your --var declarations in order to set up the classes.

It doesn't - and it's an easy pattern to implement!

A brief history

As an example, this article from Bramus in May 2022 states the common perspective outright:

Though it was broadly accepted as truth back when that article was written, there were ways around duplicating^[1] the actual theme color value, which is the bulk of the concern. But... those approaches also left room for improvement.

That improvement was found, and worked in all browsers^[2] - except Safari - until Safari 16.4, around March 2023 when it began working everywhere!

PS: Bramus is great, follow him!

The Desired API

First, the biggest ask from the community is that we can do this all from an actual media preference, without a checkbox hack or making JS toggle a class on load to flip the state, and that work is underway now!

// Detect dark theme var iframe = document.getElementById('tweet-1699185089718984930-250'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1699185089718984930&theme=dark" }

In the meantime, and even after that's implemented, it's also really nice to have the flexibility of classes that manage it in addition to the preference.

Here is the api:

dark by default
@media (prefers-color-scheme: light) light on root and descendants by preference
.theme-preferred render this node (& desc.) based on the default root preference
.theme-not-preferred render this node (& desc.) as the opposite of the default root preference
.theme-dark render this node (& desc.) in dark
.theme-light render this node (& desc.) in light

Then, additionally, mix and match that api. Any section or element, no matter the parents or preference, you can toggle by flipping preference or by managing light/dark directly.

For example, this would render exactly as expected:

<div class="theme-dark">
  <span>render dark</span>
  <div class="theme-light">render light</div>
</div>

as would this:

<main class="theme-preferred">
  preferred theme here even if body or html changed it
  <div class="theme-light">light</div>
  <div class="theme-dark">dark</div>
  <section class="theme-not-preferred">
    render the opposite of the preference
    <div class="theme-preferred">render the preference</div>
    <div class="theme-light">light</div>
    <div class="theme-dark">dark</div>
  </section>
</main>

The DRY Implementation

If you are unfamiliar with Space Toggles, this setup can be copy pasted without any technical knowledge; you don't have to use them after initial setup.

Just following the pattern will enable you to take full advantage of it!

If you ARE interested, you can read about space toggles here from when I first invented the idea or google it for the many articles and talks that have come out about them since then!

In short, you're adding a light switch to other values. If the switch is a space (on), the value next to it is used, if it was initial (off) then the value isn't used and the fallback takes its place when it's referenced.

(And yep, it is spec!)

Boilerplate

First, copy paste this exactly as it is. No matter how many variables you need to toggle between themes, this engine never changes and does all the work:

.theme-not-preferred,
.theme-light {
  --media-prefers-light: ;
}
.theme-preferred,
.theme-dark {
  --media-prefers-light: initial;
}
@media (prefers-color-scheme: light) {
  :root:not(.theme-dark):not(.theme-not-preferred),
  .theme-preferred {
    --media-prefers-light: ;
  }
  .theme-not-preferred {
    --media-prefers-light: initial;
  }
}

This sets up a --media-prefers-light space toggle that flips in accordance with our desired API described previously. (Media settings and space toggles were made for each other; check out css-media-vars for a whole collection of them and the huge improvements they offer!)

Your theme values

Next, we'll set up just 3 theme-dependent variables to establish the pattern:

:root,
.theme-preferred,
.theme-not-preferred,
.theme-light,
.theme-dark {
  /* const maybe_light_val = lightTog && YourLightValue: */
  --theme_0_light: var(--media-prefers-light) 0 0% 100%;
  --theme_1_light: var(--media-prefers-light) 0 0% 0%;
  --theme_2_light: var(--media-prefers-light) hotpink;
  --theme_scheme: var(--media-prefers-light) light;

  /* const theme-var = maybe_light_val || YourDarkValue: */
  --theme-0: var(--theme_0_light, 0 0% 0%);
  --theme-1: var(--theme_1_light, 0 0% 100%);
  --theme-2: var(--theme_2_light, rebeccapurple);
  color-scheme: var(--theme_shceme, dark);
}

You won't use the light vars like --theme_1_light directly anywhere else, they're only meant as internal vars (hence underscore naming convention) for setting up the vars you actually want to use everywhere, --theme-1 etc.

Usage

Finally, all you have to do is use the theme variables wherever you want in your CSS:

.my-info-box-component {
  background: hsl(var(--theme-0));
  color: hsl(var(--theme-1));
  border: 1px solid var(--theme-2);
  padding: 1rem;
}

Then it works in your HTML in all the api scenarios as expected:

<aside class="my-info-box-component">
  My border is:<br>
  - `hotpink` with light mode preference<br>
  - `rebeccapurple` with dark mode preference.
</aside>

and:

<aside class="my-info-box-component theme-not-preferred">
  My border is:<br>
  - `rebeccapurple` with light mode preference<br>
  - `hotpink` with dark mode preference.
</aside>

and this:

<section class="theme-not-preferred">
  ...
  <aside class="my-info-box-component">
    My border is:<br>
    - `rebeccapurple` with light mode preference<br>
    - `hotpink` with dark mode preference.
  </aside>
  ...
  <aside class="my-info-box-component theme-preferred">
    My border is:<br>
    - `hotpink` with light mode preference<br>
    - `rebeccapurple` with dark mode preference.
  </aside>
</section>

and of course these too:

<aside class="my-info-box-component theme-dark">
  My border is `rebeccapurple`
</aside>

<section class="theme-dark">
  <div>
    ...
    <div>
      ...
      <div>
        ...
        <aside class="my-info-box-component">
          My border is `rebeccapurple`
        </aside>
        ...
      </div>
      ...
    </div>
    ...
  </div>
</section>

Scenario Tests / Demo CodePen

The End!

If you think this is useful, it's the kind of thing I do for fun all the time! So please do consider following me here and on X as well!

👽💜
// Jane Ori

PS: I've been laid off recently and am looking for a job!

https://linkedin.com/in/JaneOri

Over 13 years of full stack (mostly JS) engineering work and consulting, ready for the right opportunity!

[1] "ways around duplicating" - You did have to duplicate some variable work if you want a Space Toggle powered API like the one demonstrated in this article, but the primary concern could be avoided; no duplication of the actual theme color values is necessary. DRY Theme color values, version that works in all browsers

[2] improved version that "worked in all browsers except Safari" - The method described in this article worked in FireFox and Chrome for many years BUT because Safari technically had it right according to the CSS spec, FF & Chrome "fixed it" in coordination with each other (so all 3 major browsers were in harmony), then in response I filed an issue to change the spec, successfully got all parties to agree (and break harmony again), the CSS Spec changed to describe the previous behavior as the new spec, FF and Chrome reverted to the previous behavior in step, aaand Safari updated later, resulting in a new, improved, harmony!

The New Tailwind Plugin You'll Want On Every Responsive Project

Jane Ori — Mon, 24 Apr 2023 03:49:47 +0000

Web designs are often polished & delivered, targeting just your largest mobile, tablet, and desktop view widths.

In the gap between design handoff and dev implementation, there's a lot of squishing that has to happen to the desktop design until it breaks into the smaller tablet layout.

Headers wrap, layout stretches vertically, designers weep, developers can't reasonably do much to help.

Until now...

fluid-text-plugin was published earlier today on GitHub and NPM

Just one Tailwind* utility class and you can specify fluid font sizes that maintain well designed headers no matter what size the screen is at. The fluid-text-plugin even uses your custom breakpoints automatically with zero additional setup.

* also works with UnoCSS and as a standalone utility function when no build system is available.

I suspect this one will get a lot of traction as it makes a well known issue, encountered on almost every project, near-trivial to fix.

Not bad for a little weekend project 🎉
Hope it helps you!

Will you be using it? 💜

CSS-Only Type Grinding: Casting Tokens (sm|md|etc) into Useful CSS Values

Jane Ori — Mon, 03 Oct 2022 21:19:29 +0000

Ready for brand new CSS magic?

If you're writing a sharable component or library and want to provide your dev users an API that has CSS options like:

--size: sm; | --size: md; | --size: lg;

it's actually possible to do in CSS, without involving JS, a build system, or Style/Container Queries thanks to a new technique I've named "Type Grinding."

Type Grinding allows your design tokens (keywords, or “<custom-ident>” values) written in your CSS to be transformed into any other values - like width, padding, color, etc - without relying on anything outside of CSS.

The current global user support is 72.77% according to caniuse - specifically chromium based browsers.

How does it work?!

The company I work for, Bitovi, is super supportive and allowed me to drop what I was working on to write an article about this instead! So over on the company blog, I'll be destructuring the CSS involved here to teach how it works, bring awareness to what's possible, and hopefully empower you to do it yourself!

Please take a look - I would LOVE to see what you do with it!

Happy to answer questions below, on Twitter, or in the comments at the full blog post!

Thank you! 👽💜

Share your ideas that never made it to production

Jane Ori — Sun, 17 Jul 2022 19:57:41 +0000

Got any ideas buried in your git history that never made it to production?

Give it a chance in the spotlight; Throw it in a codepen or just talk about it in the comments below!

Here's my contribution:

Prior to the launch of augmented-ui v1.0.0 in 2019, early builds of the website's introductory animation also featured this 3D CSS animation behind it. The background animation was removed for performance reasons but still exists in the commit history. 💜

Hopefully this codepen helps give life to the idea that couldn't make it to production ~

// Jane Ori

The CSS SMEAR hack

Jane Ori — Tue, 12 Jul 2022 12:57:26 +0000

The SMEAR technique enables infinite generations of simulations, games, or other CSS experiments to happen without any JS and without revealing the sauce to the User.

SMEAR stands for Shrouded Markup Editing And Regeneration - a description of what happens to advance the application state to the next generation without JS. The smearing gesture itself has to be more deliberate and slower than a swipe, and is where the name SMEAR actually comes from. Forcing SMEAR into an acronym happened after the fact as a terrible joke.

The SMEAR hack is somewhat involved in the details, so to navigate that complexity, let's walk backwards from the checkers demo and reveal the work one layer at a time.

!But first! Go hands-on with the SMEAR if you'd like (Chrome and Safari - desktop only) by selecting a front-row checker, then select a direction to move it in, then SMEAR to confirm:

Shrouded? What is the SMEAR hack doing?

The big reveal is right here in our first layer:

SMEAR is a drag-drop.

Code (CSS in this case) is on the right, and the user drags it into a contenteditable element (Style tag display block, contenteditable plaintext-only in this case) on the left.

We make the CSS and the style tag invisible to the user and put a fake call-to-action pseudo element in place for the user to seemingly-but-not-really interact with.

The last key at this layer is that the element with our code (shrouded markup) has user-select: all; so any interaction selects all of the code automatically and the drag action begins immediately.

Here's an unshrouded bare bones demo of what's happening:

user-select: almost-all; How to change the code each generation

In order for the patch to be regenerated from our current state, we have to include markup that can programmatically represent any possible patch.

If we could somehow allow users to select pseudo element content, it would be much easier to generate the next generation's state from CSS. As it is now though, we have to omit the elements that don't apply to the next generation from a superset.

There are a few ways to omit text from the user-select: all;

user-select: none; is surprisingly not one of them because it still copies the seemingly unselected text. Probably a bug.

display: none; works but if your patch state is derived from an animation, you cannot set display to none. (Spoiler: we need to change our generated code from an animation hack)

visibility: hidden; works and can be set from an animation. Yay!

The state of our patched code will come down to math - like showing the win screen when the opposite player's total sum/count of pieces on the board is 0. So we need to cast an integer from a calc() to visibility: hidden;, which requires an animation.

@keyframes markupToggler { from { visibility: hidden; } }

and

animation: markupToggler 1ms linear both var(--condition, 0);

If --condition is 0, animation applies the from state, if --condition is 1, the animation stops applying the from state.

Here's what that looks like in action: note the content of our CSS patch regenerates every time we SMEAR and shows the opposite state.

This animation can be reused on any element, just set the --condition variable to a calc (or min/max/clamp/etc) that becomes 0 or 1 and you're good to go.

Forcing new code to the bottom of the style element

There are a number of ways to prevent the user from dragging code into the middle of existing code (something which you may have done while interacting with the previous demo?) but the most reliable I've used (which could be trimmed down or done differently) is just adding this:

style.shrouded-markup::before {
  content: "";
  display: block;
  margin-bottom: -999999vh;
}
style.shrouded-markup::after {
  content: "\A\A\A\A";
  display: block;
}

Shrouding Reality

The only important gotcha here is that you'll want your fake call-to-action element to be on the ::before pseudo specifically, not ::after.

What's next?

Maybe a follow up article if there's interest!

How to user-select: all; on contenteditable elements (you can!) and
using a textarea and reset button (JS not required) to empty cache.

The End!

If you think this idea/trick is neat, it's the kind of thing I do all the time! So please do consider following me here and on twitter as well!

💜
// Jane Ori

Forem: Jane Ori

Customizing the MacOS Terminal with help from AI

Basic settings and imports

Basic aliases

Lock Function

Automatic Node & NPM version mismatch warning

The Beautifully Colorful Path Highlighting and Git Info

The final touch

Open Contact 👽

My heart is open to receive abundance in all forms, flowing to me in many expected and unexpected ways.

100% CSS: Fetch and Exfiltrate 512 bits of Server-Generated Data Embedded in an Animated SVG

Packing 512 bits into an SVG for Exfiltration

Sorting out the solution space

Conceptually, how to procedurally exfiltrate 1D + time

Creating the Checksum Algorithm

Beginning to Exfiltrate the 512 bits with CSS

Exfiltrating the 512 bits with CSS

Main Controller

CPU Exfiltrator

Automatic CPU Hack

Wait, === in CSS?

Reading the SVG Animation

Setting specific CSS --var values (addressed assignments)

Presenting: The CSS Animated SVG Exfiltration Hack

Open Contact 👽

100% CSS: 's border knockout behavior for any element !

Fieldset? Legend?

Fieldset border legend knockout behavior anywhere

Does it do anything else?

--fl-left alternatives

--fl-top option

Title as :first-child alternatives

fieldset-legend uses the ::before pseudo

fieldset-legend no pseudo?

Fallback behavior

Further fallback support

Open Contact 👽

GETting your IP Address with CSS - and other 32 bit API responses - without JavaScript!

Demoing the basics

First Public Demonstration, Chrome Only, :root

Second Public Demonstration - Cross Browser, no :root

Third Public Demonstration - Chrome Only, :root, trivial

What is css-api-fetch doing?

What's css-bin-bits?

How do you set up an API to respond with data in the image?

What comes next?

Open Contact 👽

CSS Type Casting to Numeric: tan(atan2()) Scalars

tan(atan2()) is just a scalar

Screensize

get font-size and more

The Trig (update)

The End

[CSS Fix] When justify-content: space-evenly overflows, un-center the content

When we use space-evenly

What space-evenly breaks

Why space-evenly breaks on overflow

Where is the CSS-Only fix to space-evenly overflows?!

Who am I?

Wait? Nope! Continue, but, heads up:

Expert CSS: The CPU Hack

The 5 Observables

1. Animation State Rules Over All (almost)

2. Property Assignments in a Keyframe Can Use var()

3. --var Assignments on Keyframe Results are Cached

4. Changing An Animation Property Breaks The Cache

5. Two Animations

The CPU Hack Begins

The CPU Hack

The Rest of the Owl

The End!

CSS Light/Dark Mode Implementation WITHOUT Duplicating Vars

A brief history

The Desired API

The DRY Implementation

Boilerplate

Your theme values

Usage

Scenario Tests / Demo CodePen

The End!

100% CSS:
's border knockout behavior for any element !

`--fl-left` alternatives

`--fl-top` option

Title as `:first-child` alternatives

`fieldset-legend` uses the `::before` pseudo

`fieldset-legend` no pseudo?

What is `css-api-fetch` doing?

What's `css-bin-bits`?