RSS preview of Adam Argyle

Off To CSS Day 2025

2025-06-02 09:53:53

Off to CSS Day; see ya there‽

Mt Rainier Boat Banjo

2025-05-29 11:58:04

Mt. Rainier in the bg, on a friend's little personal website boat, playin banjo tunes in double C:

Vibe check? This is the way.

3 Unintuitive CSS Layout “Solutions”

2025-05-23 03:51:25

Here are a few of my least favorite, easy to forget, unintuitive CSS layout "solutions":

.wat {
  min-height: 0;
  min-width: 0;
  flex-shrink: 0;
}

Height 0? Wat? Shrink 0? Wat? Theo thinks he likes it. But…

Then there's minmax(min(), 1fr)? Wat?

.uhhhhhh {
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr))
}

Functional programming much?…

Remove intrinsic minimal sizing #

The minimum width of grid and flex children is auto. Setting it explicitly to 0 removes the intrinsic size, unlocking various things.

.example-1 {
  min-height: 0;
  min-width: 0;
}

Study more about it on CSS Tricks by Chris Coyier or from Theo over on YouTube.

Don't squish me #

Often I'll make a flex layout where 1 child should be "pushy" or a dominant space consumer. Works great until a sibling to the pusher goes oval at small viewports, even though a firm height and width are set.

The fix:
Don't squish me, my flex-shrink is 0... which indicates false? which means I don't want to shrink? I am unshrinkable. I have no shrinkability.

.example-2 {
  flex-shrink: 0;
}

So intuitive. Not.

Intrinsically responsive grid columns #

So I don't have this full, triple nested function memorized. I can remember "repeat, auto-fit, minmax" as like the summary of the trick. Which gets me this far:

.example-3 {
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr))
}

But that's not the full snippet I end up using in production. It works great until it's a single column of 10rem minimum width boxes. At which point, they dont go smaller, and so they can cause horizontal overflow in a parent container that's smaller than 10rem.

The fix:
add min(10rem, 100%) in place of 10rem.

.example-3 {
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr))
}

It's extra to write, but it unlocks the "intrinsically responsive grid layout", which behaves as I was hoping all along.

Study more in this post from Evan Minto:

When the container is smaller than 10rem, the minimum value in our minmax() expression is set to the full width of the container, giving us a nice single-column view with no overflow. When the container is larger than 10rem, the minimum value is set to 10rem, so we get a responsive grid with equal tracks of at least 10rem each.

Tag, I'm It

2025-05-12 23:21:30

Killian tagged me in this blog chain letter type thing to answer some questions about blogging. I accept 🙂

Why did you start blogging in the first place? #

My first exploration into blogging was Wordpress, I called it Geek Devigner. I wanted to share about the cross of development and design (devigner). I didn't write on it much, I was still making mostly Flash and jQuery stuff. Needless to say, this wasn't a super popular topic to be blogging about.

Later I wrote posts on Medium or Devto. This was mostly during the JAMstack wave, and I was really intent on optimizing the build systems so Jade was only rendering the render trees that changed all while making my own isomorphic framework. I also like Grunt more than Gulp, so again, this wasn't a super popular topic to be blogging about.

After blogging and writing articles at Google, I wanted to write in my own voice and showcase CSS features while talking about CSS features. I figured most people these days are scrolling cards and like content feeds, so I modelled my site after these interactions and started blogging about CSS, Javascript and HTML stuff consistently for the first time.

What platform are you using to manage your blog and why did you choose it? #

My current site/blog is built on Deno and their Fresh framework. I blogged about it here.

For me it was a decently minimal set of features that Fresh brought while Deno brought a small, safe, web standards focused server.

I wanted to do lots of custom things, so I needed something that wasn't going to be in the way. I wanted to make something server first, a bit more socially integrated than previous static sites I'd built, and to try out islands front-end architecture.

How do you write your posts? #

I write posts in a markdown file with some custom frontmatter. Notes have slightly different frontmatter than blog posts, otherwise they're the same.

I've written all my own adapters for images, code snippets and videos. The images are swapped for a <picture> with optimised sources. The code snippets are rendered server side. Videos are also optimized, given poster images, and other cool stuff.

All of this is done in a code editor. Currently Zed, but often Windsurf, Sublime or VS Code (I flop around alot, but usually go back to Sublime for the nicer text rendering and bootup speeds).

If I need any special examples or interactives, I either write an inline style or script tag, or make a web component.

When do you feel most inspired to write? #

When reading my RSS feed. But, that's not when I write… that's once the kids are asleep.

Do you publish immediately? #

Longer form posts definitely simmer or chill in a branch for a while. Shorter form posts though, those can be authored and published in just a few minutes. I needed to have both opportunities, was important to me that both types of thoughts could be posted to my site.

What are you generally interested in writing about? #

CSS, almost exclusively. However, every once in a while I'll share a JS tip (which is usually CSS adjacent).

What’s your favourite post on your blog? #

There's a few that come to mind, but the winner is Headless, boneless and skinless UI. I liked how the piece came together around Halloween when the content was totally morbib sounding out of context.

Who are you writing for? #

UI and UX engineers, a few designers and other folks who want to stay up to date on CSS. Mostly writing for professionals or experts, but do try to make things minimal to reduce learning friction for everyone.

Any future plans for your blog? #

I've got quite a long list of features in the backlog.

I'd like to add a bunch more "slashers", which are just cool slash pages like /follows and /404. So far I've got /talks, /experiments, /avatar, /toolkit, and /links in the backlog.

I've got the personas already, but I want to give them their own profile pages with all their specific posts. They'd also get their own RSS feeds 😉

The most notable backlog item, is to have Balatro style powerups and "shiny" type effects for the cards on the home feed. Just a little piece of frontmatter that adds a class to the card, then CSS does the rest: makes a post foiled, or cracked, or holographic. Be so fun to make.

Who am I going to tag? #

Maybe you? Anyone out there want to be tagged?

I'll tag you right here.

WebDev Challenge - S2E2

2025-04-29 23:45:22

What could you create if you had 30 minutes to plan and 4 hours to build? Me, Lane Wagner, Sarah Shook, Nikki Meyers, Shashi Lo, and Nick Taylor took on the Web Dev Challenge to find out.

They picked the Napoleon Dynamite thumbnail for Lane and I 🤣

The Challenge #

We lucked out and got a rad one.

Single player, multiplayer, cooperative, competitive, or something totally different — your challenge is to come up with something fun that is played across at least two devices.

Temporal’s workflow tools will allow you to manage sending information between devices dependably.

Lane and I def leaned into the "fun" portion of the challenge.

We chose to try a game that uses the camera video stream API to feed faces to Media Pipe (locally running a face detection machine learning model) to flap a bird's wings in a flappybird-like game.