2025-08-14 04:26:33
You might be asking yourself, "a CSS talk at a JS conf?". Emphasis on CSS, at JS. WTF?
While that's a decently common thought, it's also decently incriminating!
People be installing React packages to do a single line CSS feature.Scott Tolinski - X
That might be you.
Watch me at CascadiaJS to not be that dork.
2025-07-31 00:35:00
In a world where agents can reason, generate, evaluate, and deploy, you no longer need a large team to build something remarkable. You need two people: one who understands systems and one who understands the user. Better if they’re the same person. Suff Syed - Why I'm Leaving Design
I'll be your huckleberry.
2025-07-30 02:10:45
The browser is Orion, built by Kagi.
On first try it felt like it was taking inspiration from Arc. It's even got the hotkey for copying URLs like Arc (which I use all the time) and the sidebar tabs option. But, unlike Arc, which ships with Zaps and Chrome Extension support, Orion ships with a certain Chrome Extension pre-installed: VisBug!
I always wanted a browser to ship with tools for designers! This is rad!
Here's a preview of what it's like in Orion to use the "Design Tools":
Thanks for the tip Kilian!
2025-07-29 06:42:36
I wanted to take a quick stab at my own LLM chat interface, see how far I could get and how many little details I could squeeze in.
How about that cool new Codepen 2.0 editor?
I kept the demo minimal, no libraries, no frameworks, no build tools; just brick by brick, line by line, articulated details I wanted. Start with some core primitives, then start solving UX problems until the experience is good. There's still a lot more to do! The basic light/dark theme turned out pretty cool tho.
I used a real streaming LLM API, then used View Transitions and Scroll Driven Animations where applicable. I also wanted to learn ReadableStreams and have my own expression of how the UI could work.
On submit, the textarea is given a view transition name with a unique incrementing index, then view transition is called and the same name is given to the new message element that's appended into the chat container.
This creates the morph effect since the old state is the textarea and the new state is the message bubble.
The border shine effect animation draws the eye from the placeholder text to the submit button, while creating a nice sleek design aesthetic.
I used my own technique for it that was wayyy smaller than similar techniques done in popular libraries. The border radius makes the effect tricky to implement, but I've got a handy dandy notebook entry that's got all this laid out for me.
form {
border: 2px solid #0000;
border-radius: 20px;
background:
linear-gradient(var(--bg) 0 0) padding-box,
linear-gradient(130deg,
var(--bg) 45%,
color-mix(in srgb, Canvas, CanvasText 15%),
var(--bg) 55%
) border-box;
background-size: 300%;
animation: shine 6s infinite ease-in-out;
}
The trick is specifying which box on the node to paint into, like padding-box or border-box. While drawing a solid color over the middle / padding-box. Then as the background is animated, the 130deg shine gradient is shown only over the border-box.
There's also a neat little trick in there with color stop positions.
I thought the blinking cursor was cool. It's a throwback to the 80s and also just feels right since the machine is typing back to you.
It's probably been done other places, but of all the little loader thingies I made, this one was the simplest and most effective. High five to iteration.
There's over 100 little decisions in the code that total up to this experience, and I could make 100 more! But… this was only meant to be a short sprint and not something I'm maintaining or looking to make 1000% fantastic.
Thought it was pretty cool for 2 short bursts of work with kids crawling all over me.
2025-07-05 05:20:40
A small sample of UI, code, tools, and design from my 20 professional years of webdev.