fixi; attr(); CSS Flexbox Playground

I don’t know about y’all, but I’m scrounging for every distraction I can muster to avoid tapping on a tab that might take me to a news site.

So, we’ve got some resources you can poke at, and with, to help keep your mind off of gestures wildly, and — perhaps — even pick up a new skill or two.

TL;DR

(This is an AI-generated summary of today’s Drop using Ollama + llama 3.2 and a custom prompt.)

• Fixi.js is a minimalist hypermedia control framework using modern JavaScript features, with just six HTML attributes and nine events, packaged in only 3,479 bytes (https://github.com/bigskysoftware/fixi)
• Chrome 133’s enhanced attr() function now supports parsing attribute values into specific CSS data types and works with any CSS property, enabling dynamic styling based on HTML attributes (https://developer.chrome.com/blog/advanced-attr)
• The CSS Flexbox Playground provides an interactive environment for experimenting with flexbox properties in real-time, offering immediate visual feedback and generated CSS code (https://www.flexbox.fun)

fixi

Fixi.js represents a minimalist approach to hypermedia controls, offering a lightweight alternative to more complex libraries. It has six HTML attributes, nine events, and two properties, making it super compact with an uncompressed size of just 3,479 bytes.

The framework uses modern JavaScript features including async functions, the fetch() API, and MutationObserver for DOM monitoring. Its design philosophy is to be as minimal as possible without sacrificing utility. Unlike more comprehensive solutions, fixi.js intentionally omits features like request queueing, extended selector support, and CSS transitions.

The system processes DOM elements through three primary mechanisms: DOM element processing, HTTP request handling, and HTML content swapping. When initialized, fixi establishes a MutationObserver to monitor new content additions and processes existing fixi-powered elements marked with the fx-action attribute.

HTTP requests are managed through the fetch() API, with method determination via the fx-method attribute. The framework includes the FX-Request header by default, and form values are automatically included when elements are within or associated with forms.

The framework also implements a complete event system including initialization events (fx:init, fx:inited, fx:process) and fetch-related events (fx:config, fx:before, fx:after, fx:error, fx:finally, fx:swapped). These events provide granular control over the request lifecycle and content processing.

Installation is easy and supports vendoring, with the recommended approach being direct file copying into projects. The framework can be acquired via curl or direct download, and while a CDN option exists through JSDelivr, it’s notably not distributed through NPM.

<button fx-action="/demo" fx-method="GET" 
        fx-target="#output" fx-swap="innerHTML" 
        fx-trigger="click">
    Get Content
</button>
<output id="output" fx-ignore>--</output>

In case you’re wondering “why?”, there are plenty of use cases for fixi.

It’s perfect for a streamlined implementation for inline editing. Just place a button within a content div. When clicked/tapped, it can fetch and replace the static content with an editable form. The code remains remarkably simple:

<div id="profile-section">
    <div>Name: Sarah Smith</div>
    <div>Email: sarah@example.com</div>
    <button fx-action="/edit/profile" fx-target="#profile-section">
        Edit Profile
    </button>
</div>

We can also use it to make an efficient search interface. fixi has solid debouncing capabilities, which we can use to have the search input automatically trigger requests after a brief pause in typing, updating results without page refreshes:

<input type="search" 
       fx-action="/search" 
       fx-trigger="input" 
       fx-target="#search-results" 
       ext-fx-debounce="200">
<div id="search-results"></div>

One further possibility is lazy loading of content. With fixi‘s initialization events, we can have content load automatically when a container becomes visible, which will improve initial page load performance:

<div fx-action="/api/content" 
     fx-trigger="fx:inited" 
     fx-swap="innerHTML">
    Loading your personalized content...
</div>

There’s tons more potential, and I’ll do my best to mock up some examples over the weekend.

attr()

Chrome 133, set to release on February 4, 2025, introduces an enhanced version of the CSS attr() function. This upgrade significantly expands the functionality of attr() beyond its traditional use with the content property, allowing it to work with any CSS property while supporting various data type parsing capabilities.

The new implementation allows attr() to parse attribute values into specific CSS data types. For example:

div {
   color: attr(data-clr type(<color>), red);
}

This code demonstrates how attr() can now parse a data-clr attribute into a color value, with a fallback to red if the attribute is not present.

The enhanced attr() function proves particularly useful for View Transitions, enabling dynamic view-transition-name assignment:

.card[id] {
  view-transition-name: attr(id type(<custom-ident>), none);
  view-transition-class: card;
}

Here’s how the basic color parsing works in practice:

<style>
  div {
     color: attr(data-clr type(<color>), red);
  }
</style>
<div data-clr="blue">My text color is blue</div>
<div>My text color is red (the fallback value)</div>

This upgrade is a nice enhancement to CSS’s attribute handling capabilities. It gives us more flexible ways to use HTML attributes within their CSS declarations.

Read more about it here and keep the MDN reference handy so you know when some of the fancier features are availble for more than just bleeding-edge Chromium kit.

CSS Flexbox Playground

Flexbox is a one-dimensional layout system that makes designing flexible, responsive layouts straightforward and predictable. It lets us arrange elements in rows or columns while automatically handling space distribution and alignment.

The flexbox model operates on two primary axes: the main axis and cross axis. The main axis runs in the direction specified by flex-direction (defaulting to row), while the cross axis runs perpendicular to it. When you declare display: flex on a container, its child elements automatically become flex items that can be manipulated using various flex properties.

The parent element (flex container) can control layout through several essential properties:

• justify-content manages space distribution along the main axis
• align-items handles alignment across the cross axis
• flex-direction determines the primary axis orientation

Individual flex items can be fine-tuned using:

• flex-grow determines how items expand to fill available space
• flex-shrink controls how items contract when space is limited
• flex-basis sets the initial main size of an item

The CSS Flexbox Playground (GH) provides an interactive environment to experiment with these properties in real-time. It offers immediate visual feedback as you adjust various flex properties, making it an excellent tool for understanding how flexbox behaviors interact. You can manipulate controls to see how different property combinations affect layout, then copy the generated CSS code for use in your own projects.

What I truly appreciate about the site is that it is wonderfully uncomplicated, and the HTML/JS/CSS single-page source is easy on the eyes and very grokable.

Modern browsers have robust support for flexbox, with compatibility extending back several versions:

FIN

Remember, you can follow and interact with the full text of The Daily Drop’s free posts on:

• 🐘 Mastodon via @dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev
• 🦋 Bluesky via https://bsky.app/profile/dailydrop.hrbrmstr.dev.web.brid.gy

Also, refer to:

• this post, and
• this post

to see how to access a regularly updated database of all the Drops with extracted links, and full-text search capability. ☮️