iiinova — where your digital self keeps evolving

Initially, I tried to generate an abstract design through text analysis. I fetched descriptions of every color in a palette and used the descriptions to generate compositions and descriptions. It was not very good.

An abstract design with muted colors and a caption "Ring resonates with the Great Wall's spirit, coastal towns embody intuition and imagination."

100

Sam Littlefair @littlefair.ca · 02/10/2026

Two new updates to color.horse: A "contrast" option to push shades toward the endpoints of the ramps. (Available in the colorhorse npm package as well.) Color schemes encoded in the URL! Share a color scheme with a link: color.horse?a=25009c&b=0...

A screenshot of the colorhorse lightness options with a new "contrast" slider.

000

Sam Littlefair @littlefair.ca · 02/10/2026

Okay, how is this for a personal intro?

Intro on the homepage of my website:

Hi there, I'm Sam. I build tools for making websites (CMSs, SDKs, APIs, SSDs).

I write docs that solve three major problems for SaaS companies:

Repetitive support tickets
LLM hallucinations
Onboarding abandonment
I'm working on a project called Vowel. V1 is a developer-facing static site generator. V2 will be a consumer-facing decentralized social media app. (This website is made with Vowel.)

000

Sam Littlefair @littlefair.ca · 01/10/2026

I just updated my personal website (littlefair.ca) with a new masonry feed with different layouts for photos, articles, reviews, and bluesky posts. @vowel.cc provides the classes you might need and optional default styles, and then you can provide your own styles.css.

A masonry feed on the homepage of my website.

A TUI showing the source markdown for the homepage and the CSS for the homepage.

010

Sam Littlefair @littlefair.ca · 25/09/2026

This is published with the current development version of @vowel.cc. Here's the source code. Vowel extracts metadata (title, breadcrumb, date) and generates the webpage in milliseconds. It publishes to Cloudflare (free hosting) and sends the atproto record to the atmosphere.

Screenshot of blog post source code:

September 25, 2026

Today is the day I put my blog on the atmosphere, powered by Vowel.

000

Sam Littlefair @littlefair.ca · 17/09/2026

You can even use it backwards!! Nest the parent selector inside the child selector 🤯

Using the CSS & nesting selector to style an h1 based on its parent in nested rules.

110

Sam Littlefair @littlefair.ca · 17/09/2026

I'm refactoring the Vowel stylesheets, and my favorite discovery is using the & selector to identify an element inside its own nested rule. Want to style an element *and* children or variants of that element? .parent { &, .child { padding: 5px; /* applies to both parent and child */ } }

A screenshot of CSS showing an a tag styled by visited or not-visited with the & selector.

141

Sam Littlefair @littlefair.ca · 12/09/2026

Help me out! I'm trying to make a thumbnail for color.horse. Which one do you like best? (All randomly generated with colorhorse.)

Color Horse thumbnail in slightly different pink and green

Color Horse thumbnail in orange and yellow

Color Horse thumbnail in magenta and yellow

310

Sam Littlefair @littlefair.ca · 11/09/2026

I've been making little tweaks to color.horse all week. It now has a fixed color palette at the bottom of the screen and I think the design makes better use of the full palette. If you haven't tried it yet, click that "Shuffle Colors" button.

000

Sam Littlefair @littlefair.ca · 09/09/2026

In 2009, my siblings and I took the train from Stockholm to Helsinki. We arrived at the border at 11pm on the last train. Instead of getting a hotel, we stayed up. Around 3am, we got fresh danishes at the back door of a bakery and watched the arctic sunrise. We got the first train out at 6am.

My sister bundled up sitting in a park in Happaranda in the middle of the night

1284

Sam Littlefair @littlefair.ca · 08/09/2026

I personally believe that Renoir is very overrated and was especially inept at painting human children. And so it brings me great joy that art thieves decided to ditch this frog-girl painting.

a horrible renoir painting of a little girl

000

Sam Littlefair @littlefair.ca · 07/09/2026

I generated the colors for the thumbnail image randomly. Here's the secret URL for the thumbnail generator if you want to try it out. Refresh the page for new colors: color.horse/image

Four thumbnails for color.horse tiled in different color themes.

000

Sam Littlefair @littlefair.ca · 04/09/2026

I am going to frame this and put it on my wall. I shrank cloudflare-pages-deploy by 98%! That makes it a much more viable option if you're looking for a way to publish your Cloudflare Pages site programmatically.

Screenshot of a package on npmx showing a notice that reads "Package size decreased since v0.1.1. Install size reduced by 98%."

4345

Sam Littlefair @littlefair.ca · 25/08/2026

I was going absolutely insane yesterday because this comment in the Svelte codebase was breaking my client bundle by closing my <script> tag early. I had to figure out why (a) my JavaScript was erroring and (b) my webpage was rendering `{#each ['🙈', '🙉', '🙊'] as monkey}`.

A screenshot of the Svelte codebase with a long explanatory comment that includes a demo Svelte component with a `<script>` element in it.

130

Sam Littlefair @littlefair.ca · 19/08/2026

Feels like you should probably repurpose it for targeted sales to people who are the forward half of a two-person equine halloween costume.

001

Sam Littlefair @littlefair.ca · 11/08/2026

"Why do you say you need a site reliability engineer?"

Job posting for a site reliability engineer where the title of the posting is malformed as "site rea"

100

Sam Littlefair @littlefair.ca · 06/08/2026

Playing with this a little bit.

010

Sam Littlefair @littlefair.ca · 06/08/2026

Gotta consider the edge cases.

A select with the options "light", "dark", "system", "Follow Mercury diurnal cycle", "Follow Venus diurnal cycle", "Follow Mars diurnal cycle", "Follow Jupiter diurnal cycle"

1230

Sam Littlefair @littlefair.ca · 31/07/2026

I did some portraits of my sister with her best friend and her dog on @harmanphoto.co.uk's new film, Phoenix II, and wow this film has beautiful texture. These are completely unedited. Shot on an inexpensive Canon EOS 35mm camera with an EF 50mm 1.4 lens and developed by Gulabi in Glasgow.

Two young women laying in the grass with a dog between them. One is kissing the dog.

Two young women lying in the grass with a dog between them.

030

Sam Littlefair @littlefair.ca · 29/07/2026

Lately I've been thinking more about the Atmosphere logo, and I think a kite could be a nice fit 🪁 It says "atmosphere" and "transfer." And if you add a key then it also says "authentication" with a classic reference to electricity, innovation, and (maybe most appropriate) lightning rods.

100

Sam Littlefair @littlefair.ca · 26/07/2026

Okay so then when we say “bread stick,” would the most accurate French translation be “baguette”?

110

Sam Littlefair @littlefair.ca · 22/07/2026

It seems a little wild that we obsess over JavaScript frameworks with "client-side rendering" when we get so much of that for free with CSS.

A CSS stylesheet showing extensive computation of properties using CSS variables and calculations.

020

Sam Littlefair @littlefair.ca · 13/07/2026

Bonus: You can now add captions to images!

Text editor showing an image with a caption in markdown.

Screenshot of a website rendered with Vowel, showing the figure element with an image caption.

020

Sam Littlefair @littlefair.ca · 13/07/2026

Vowel will now create resized versions of all of your images in WebP and AVIF and generate an optimized <picture> element to display them. Just add a full-res image to your project and link it with normal markdown. It even works for popular image CDNs! (Thank you Unpic / @mk.gg)

Screenshot of the Vowel homepage with the devtools inspector open on an image, revealing a <picture> element with responsive URLs.

Screenshot of the Vowel homepage with the devtools inspector open on an image, revealing a <picture> element with responsive CDN URLs.

Screenshot of a text editor with the markdown of the Vowel homepage, showing the markup for two images — one hosted locally and one hosted on a CDN.

240

Sam Littlefair @littlefair.ca · 03/07/2026

Oh sorry I wasn’t proposing a logo for the networking protocol called Atmosphere. I was proposing a logo for the esoteric philosophers’ secret guild called Atmosphere.

Meme of an alchemist with caption “startup to turn earth into gold failed. secure seed funding to turn air into gold.”

011

Sam Littlefair @littlefair.ca · 29/06/2026

I noticed that I had misconfigured the dark mode variables for @vowel.cc's default stylesheet, so I went in to fix them and did a little restyling. I think it's feeling fairly slick if I do say so myself. (I generated the color scheme programmatically with a little app I've been developing.)

Dark mode screenshot of the Vowel homepage

081

Sam Littlefair @littlefair.ca · 28/06/2026

So it turns out two atmosphere projects have already started using 🜁 in their logos, so maybe there is some synchronicity around this. @alt.gov.jabsco.xxx.irs.crs.icp.war.hq.69.mkv.part.parody.fda.info.fbi.cia.fyi @vayumandala.com

120

Sam Littlefair @littlefair.ca · 26/06/2026

We take it in turns to act as a sort of executive officer for the week.

Screenshot of a serf in Monty Python's Holy Grail.

020

Sam Littlefair @littlefair.ca · 25/06/2026

Since it's just a Unicode glyph, you could render it in the style of any font. (And if it gained usage some type foundries might create their own glyphs for it.) These are some mockups combining "Δ" and "—".

The alchemical symbol for air (a triangle with a horizontal line across it) rendered in eight different font styles.

190

Sam Littlefair @littlefair.ca · 24/06/2026

After thinking about this question all weekend, I think my favorite candidate is the alchemical symbol for air: 🜁 It’s connotes both atmosphere and “transfer”. It’s a standard Unicode character. It references a capital “A.” And it’s very simple, which feels appropriate for a protocol, like 🌐 or 🛜.

The alchemical symbol for air, a triangle pointing up crossed by a horizontal line.

1925129

Sam Littlefair @littlefair.ca · 19/06/2026

Okay who approved the .js TLD?

Screenshot of a document with "Node.js" automatically linked to https://node.js

100

Sam Littlefair @littlefair.ca · 16/06/2026

I just improved hot reloading in @vowel.cc, so now file creations and deletions should load instantly. And oh it feels so snappy.

111

Sam Littlefair @littlefair.ca · 11/06/2026

Last night was his first full-length test screening and we watched "Best in Show" (2000). No matter how many times I watch this movie, I'm still never prepared for how funny it is.

Screencap of Jennifer Coolidge as Sherri Ann Cabot in "Best in Show", sitting next to her husband, with the caption "We both have so much in common. We both love soup."

Screenshot of Parker Posie in as Meg Swan in "Best in Show" standing with her dog with the caption "God, Hamilton, if she doesn't get her toy she's gonna flip out!"

010

Sam Littlefair @littlefair.ca · 11/06/2026

My brother just started a outdoor movie theatre, trading on nostalgia for the VCR era. So I made him a VCR-menu themed website, using the Analog Mono font by @gleeson.dev: parkvideo.ca. I had a lot of fun creating static and scan lines with CSS. Built with @vowel.cc of course.

My brother setting up his outdoor projector in a park with Halifax's MacKay bridge in the background.

A screenshot of a website styled to look like a VCR menu.

3172

Sam Littlefair @littlefair.ca · 09/06/2026

I just updated cloudflare-pages-deploy on npm. npmx.dev/package/clou... It extracts the deploy logic from the Cloudflare Wranglers CLI into a JavaScript SDK so you can programmatically deploy to @cloudflare.social Pages. If it' might be useful to you, slap a ❤️ on it on @npmx.dev.

Code snippet demonstrating usage of cloudflare pages deploy.

391

Sam Littlefair @littlefair.ca · 08/06/2026

Logo reveal!!! My friend, the wonderful designer Megumi Yoshida, created a logo for @vowel.cc, and I think it is so beautiful. She used origami as the inspiration to create something that feels light and energetic — the way a blog should feel.

1131

Sam Littlefair @littlefair.ca · 02/06/2026

I feel so lucky to have an amazing designer working on the branding for vowel.cc (Megumi Yoshida, art director of @lionsroar.com). Watch out for the logo reveal tomorrow.

010

Sam Littlefair @littlefair.ca · 01/06/2026

> [!TIP] > > Vowel now has GFM alerts 😉 Try them out at vowel.cc

A screenshot of the Vowel documentation webpage with a "warning" box.

000

Sam Littlefair @littlefair.ca · 31/05/2026

Glad to see Google still maintains high standards for YMYL (“your money or your life”).

Google AI overview for the search “how much money can i make from ymyl?”

response (part one):

Income from YMYL (Your Money or Your Life) ranges from $SUl/month for new sites to $10,000 to $50, 000 +/month for established sites. •

Earnings vary based on your monetization strategy:
• Display Ads: $8 to $30 per 1,000 views.
• Affiliate Marketing: $15 to $80 per
1,000 views.
• Lead Generation / Consulting: Flat monthly retainers (e.g., $1, 000/month per client).

response part 2:

Because these niches (e.g., finance, medical, law) directly impact a person's well-being, Google requires high E-E-A-T (Experience, Expertise, Authoritativeness, and Trustworthiness to rank. Content must feature clear bylines from experts, citations, and up-to-date fact-checking.
If you want, I can help you:
• Decide between ads, affiliates, or lead generation
• Provide strategies to build E-E-A-T in your specific YMYL niche
• Estimate a timeline for traffic and growth
Let me know what you'd like to focus on first.

300

Sam Littlefair @littlefair.ca · 31/05/2026

YMYL is Google’s policy that search results that relate to health or finances should be held to the highest standards or accuracy and authority.

Google AI overview for the search “how many ps are in ‘your money or your life’ and how does that affect google’s stock value?”

AI response:

There are 2 "p"s in YMYL (which stands for “Your Money or Your Life").
YMYL is a classification in Google's Search Quality Rater Guidelines for topics that can impact a user's health, financial stability, or safety. Content about health and personal finance requires higher E-E-A-T (Experience, Expertise, Authoritativeness, and Trustworthiness) to rank highly.
How this affects Google's stock value:
YMYL updates don't impact Google's financial performance overnight. Instead, they protect the integrity of the search…

110

Sam Littlefair @littlefair.ca · 24/05/2026

Last month I bought this teak coffee table for $30 on Facebook marketplace. I disassembled it, sanded it, oiled it, waxed it, redoweled it, and put it back together. I may never be so proud of anything else I do. (Dog for scale.) (Dog is either a very large small dog or a very small large dog.)

A photo of a teak coffee table from Facebook marketplace with an Orange-hued finish.

A photo of the refinished coffee table with a rich brown finish.

The same coffee table with a dog napping beside it.

040

Sam Littlefair @littlefair.ca · 15/05/2026

Yo watch this space 😁

Screenshot of a launch checklist with the following items:

- [ ] Fixes
- [ ] Global nav sublinks
- [ ] Hot reload
- [ ] File handling
- [ ] CSS prefixing
- [ ] Homepage in global nav
- [ ] Metadata in header
- [ ] Page list sort
- [ ] Metafiles
- [ ] Robots.txt
- [ ] Sitemap.xml
- [ ] RSS
- [ ] 404.html
- [ ] Markup
- [ ] Image as figure
- [ ] Admonitions
- [ ] Heading anchors
- [ ] GFM emoji
- [ ] Mermaid
- [ ] Slogan
- [ ] TOC
- [ ] Non-urgent fixes / improvements
- [ ] Compare metadata on file update
- [ ] Prune/cleanup step
- [ ] Dependency type (file, settings, folder)
- [ ] New systems
- [ ] Tags
- [ ] External links
- [ ] Syntax highlighting
- [ ] Social links

000

Sam Littlefair @littlefair.ca · 24/03/2026

My reaction on realizing there’s a troll emoji

Meme of professor quirrel running into the hogwarts dining hall yelling “troll in the Unicode consortium character standard”

010

Sam Littlefair @littlefair.ca · 27/02/2026

Did you know? The branding for @vite.dev is so iconic that the framework's original logo was included in Yasaburo Kuwayama's book, "Trademarks and Symbols of the World Volume 2," published in 1987.

1440

Sam Littlefair @littlefair.ca · 25/02/2026

Want to deploy a website to Cloudflare Pages from your JavaScript codebase? I extracted the Cloudflare Pages deploy logic from the Cloudflare CLI so you can deploy a website with a single function call: www.npmjs.com/package/clou...

Code snippet showing module usage (see npm package for more detail)

000

Sam Littlefair @littlefair.ca · 24/02/2026

Incredible. Here's CSS styling a table with a dynamic number of rows and columns to apply a color spectrum, perfectly balanced by hue and shade, to the backgrounds of the cells using sibling-index() and computed LCH colors. Two lines of CSS. Repl: svelte.dev/playground/d...

0110

Sam Littlefair @littlefair.ca · 11/02/2026

Weird. Last night I asked it to do a relatively basic dice probability, assuming it would do a quick calculation. Instead it tallied all possibilities one by one, getting stuck in repeated error/correction loops. It ran like this for five minutes.

000