iiinova — where your digital self keeps evolving

Colum Kelly @columk.bsky.social · 19/09/2026

Good list but I can't make out the examples on my phone due to the low contrast. We're supposed to see subtle border radius differences in the first example but the contrast ratio is too low. There's even text with a ratio of 1.22 @jakubkrehel.bsky.social interfaces.dev/cheat-sheet

interfaces.dev

Interfaces › Cheat Sheet

Practical tips for making your interfaces clearer, easier to use and more polished.

000

Colum Kelly @columk.bsky.social · 18/09/2026

The tatem.com landing page has a full screen announcing the fact that they have a dark mode toggle. Maybe it's something to do with my scroll wheel but these kinds of sites tend to drive me into a rage. Does anyone enjoy this? #webdev #web #frontend

000

Colum Kelly @columk.bsky.social · 18/09/2026

I rolled my eyes when I saw the theme toggle article going around but the follow up is decent. I've always thought of it as something fun to have on a personal website. Otherwise it's a set-and-forget setting that doesn't need to be visible, and only needed in the kind of apps you spend hours on.

000

Colum Kelly @columk.bsky.social · 16/01/2026

www.columkelly.com/blog/use-opt... Updated the todo examples and some of the writing after getting feedback from @ricky.fm To be fair, Ricky's version of the final example is very clean, (although it took me a while to grasp). useOptimistic might save you after all.

columkelly.com

useOptimistic Won't Save You | Colum Kelly

Thoughts on the useOptimistic hook that was introduced in React 19

182

Colum Kelly @columk.bsky.social · 14/01/2026

Tech blogs that I used to enjoy are entirely written by ChatGPT now. I get it, we all want more free time, but it's still a shame. sunilpai.dev/posts/seven-...

sunilpai.dev

where good ideas come from (for coding agents)

(and the part where users have to level up)

000

Colum Kelly @columk.bsky.social · 05/12/2025

@emilkowal.ski I'm very curious what you think of the async react showcase at async-react.dev The intention was to demo the last 10 years of innovation but it seems like bad UX to me. I know you have thoughts on why loading patterns like this can make an app feel much slower than it is.

async-react.dev

Async React

000

Colum Kelly @columk.bsky.social · 19/10/2025

This is really cool blog.cloudflare.com/capnweb-java... #webdev

let user = api.authenticate(token);

// Get the user's list of friends (an array).
let friendsPromise = user.listFriends();

// Do a .map() to annotate each friend record with their photo.
// This operates on the *promise* for the friends list, so does not
// add a round trip.
// (wait WHAT!?!?)
let friendsWithPhotos = friendsPromise.map(friend => {
return {friend, photo: api.getUserPhoto(friend.id))};
}

// Await the friends list with attached photos -- one round trip!
let results = await friendsWithPhotos;

020

Colum Kelly @columk.bsky.social · 31/03/2025

I've made the mistake of listing out a bunch of input attributes as prop types when I want to pass them to a component. React actually a type for these which makes it much cleaner. #webdev #frontend #react #typescript

type InputProps
= InputHTMLAttributes<HTMLInputElement> & CustomInputProps

const Input = ({customProp, ...rest}: InputProps) => {
console.log(customProp)
return <input {...rest} />
}

export default function App() {
return <Input type="text" name="foo" customProp="bar" />
}

010

Colum Kelly @columk.bsky.social · 26/03/2025

@wesbos.com thanks, that was my potluck q about NextJS. I'm still confused because revalidateTag also clears the client's router cache completely. In my testing, even calling it on a tag that doesn't exist does this. It makes all layouts and routes that were cached suspend again when navigating.

010

Colum Kelly @columk.bsky.social · 25/03/2025

@tej.as do you really need to rely on data-test attributes with Playwright? I thought the standard was to use user-facing attributes like accessibility roles and labels.

000

Colum Kelly @columk.bsky.social · 25/03/2025

A great interactive visualisation of different types of storage from PlanetScale. Reminds me of Sam Rose's Turing Machine visualization. planetscale.com/blog/io-devi... #webdev

planetscale.com

IO devices and latency — PlanetScale

Take an interactive journey through the history of IO devices, and learn how IO device latency affects performance.

000

Colum Kelly @columk.bsky.social · 13/03/2025

@tkdodo.eu is there a way to force a global state issue with Zustand on the server? I'm using it in Next.js without Context but I'm struggling to find any issue. I've tried running multiple browser sessions and a suite of e2e tests but everything seems to work fine, no state is shared between users.

110

Colum Kelly @columk.bsky.social · 12/03/2025

Finished my Threads Clone. Next 15, React 19, Drizzle, SQLite, custom auth. I nabbed the rolling counter from Bluesky and a few ShadCN components, but otherwise everything was done from scratch. @syntax.fm you guys got me here! Someone hire me I'm sick of cleaning windows 😅 #webdev #react #nextjs

010

Colum Kelly @columk.bsky.social · 21/02/2025

Those considering server components should be thinking about bundle size vs. payload size. If most of the app is behind a login, will a slightly smaller bundle make a difference? If first-time visits are a priority (news, e-commerce), server components could be beneficial. #react #webdev #nextjs

010

Colum Kelly @columk.bsky.social · 10/02/2025

Found a powerful use for CSS :has with server components. This would fit in @joshwcomeau.com's "Global detection" category. When a component is within a suspense boundary, it's very difficult to animate out of the fallback, since it's unmounted whenever the promise used by the component resolves...

210

Colum Kelly @columk.bsky.social · 01/02/2025

This component wraps a card, allowing it to be clicked anywhere, without compromising the ability to select text. handleNestedInteraction opens the link (navigate) as long as the event target isn't a nested button. #webdev #frontend #react #javascript

<div
role="link"
onPointerDown={() => {
window.getSelection()?.removeAllRanges()
}}
onClick={(e) => {
// Don't navigate if text is being selected
if (window.getSelection()?.toString()) {
return
}
handleNestedInteraction(e, navigate)
}}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
handleNestedInteraction(e, navigate)
}
}}
tabIndex={0}
className="link cursor-pointer"

{children}
</div>

010

Colum Kelly @columk.bsky.social · 29/01/2025

Using a DropdownMenuItem as a Dialog trigger doesn't work as expected. Many suggest adding an e.preventDefault to the MenuItem but this causes other issues. Placing the Dropdown within the Dialog is a better solution that will make everything work correctly. #radix #shadcn #webdev #frontend #react

<Dialog>
<DropdownMenu>
<DropdownMenuTrigger>
<KebabMenuIcon />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem asChild>
<Button>
Save
<BookmarkIcon />
</Button>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<DialogTrigger asChild>
<Button>
Delete
<DeleteIcon />
</Button>
</DialogTrigger>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<DeleteDialogContent />
</Dialog>

020

Colum Kelly @columk.bsky.social · 26/01/2025

Many Radix/Shadcn components hide the scrollbar when toggled, which can cause layout shift. Giving fixed elements a width of 100vw will make them stable. To stop the scrollbar to be hidden, use this rule. The html selector may seem unnecessary but it adds specificity. #css #shadcn #react #webdev

html body[data-scroll-locked] {
overflow: visible !important;
margin-right: 0 !important;
}

020

Colum Kelly @columk.bsky.social · 23/01/2025

Callback refs are much cleaner than effects for DOM manipulation. This is a handy one I'm using to help the user overwrite the previous input after navigating back to the main search page. You can even add a cleanup function since React 19, which makes them safer for async tasks. #react #webdev

const selectInput = useCallback((node: HTMLInputElement | null) => {
node?.select()
}, [])

020

Colum Kelly @columk.bsky.social · 13/01/2025

This is a handy snippet to get typed API routes in a Next.js app with no effort. You should still validate the response because its shape isn't guaranteed. #webdev #nextjs #typescript

export type ResponseData = ReturnType<typeof GET>
extends Promise<NextResponse<infer T>> ? T : never

010

Colum Kelly @columk.bsky.social · 09/01/2025

Very satisfying to use the following command today in Node 23.6.0 node --env-file=.env.local src/lib/db/seed.ts I had to add .ts extensions to all module imports and remove path aliases, as well as adding a couple of tsconfig rules. nodejs.org/api/typescri... #webdev #node #typescript

110

Colum Kelly @columk.bsky.social · 08/01/2025

Mac users waking up to the Docker security issue, this fix is gaining consensus: brew uninstall --cask docker --force brew uninstall --formula docker --force brew install --cask docker brew install docker-compose #docker

000

Colum Kelly @columk.bsky.social · 08/01/2025

This is a great one from @joshwcomeau.com www.joshwcomeau.com/css/backdrop... I was always bothered by the sudden change from one pixel to the next when using backdrop-blur. This solves it. It's subtle with the background opacity on my current project, but it's there, in case anyone notices 🥲

joshwcomeau.com

Next-level frosted glass with backdrop-filter • Josh W. Comeau

Glassy headers have become a core part of the “slick startup” UI toolkit, but they’re all missing that final 10% that really makes it shine. In this tutorial, you’ll learn how to create the most reali...

000

Colum Kelly @columk.bsky.social · 02/01/2025

There are lots of angry comments about this on X. Some are valid, but I don't agree with the complaints about corporate lock-in. Many Object storage providers have adopted the S3 API and moves like this will encourage more to do the same, which will make our lives easier. #webdev #bun #s3 #js

000

Colum Kelly @columk.bsky.social · 29/12/2024

@tonytula.com's Rejection is amazing. "He has so enveloped himself in linguistic forms, in artistic images, in mythical symbols or religious rites that he cannot see or know anything except by the interposition of this artificial medium." - Ernst Cassirer

000

Colum Kelly @columk.bsky.social · 28/12/2024

Really enjoyed this book. I'm not a huge fan of OOP but a few of the principles have stuck with me and my code has improved. Looking forward to the next book club. sandimetz.com/99bottles #oop #webdev @sandimetz.bsky.social

sandimetz.com

99 Bottles — Sandi Metz

000

Colum Kelly @columk.bsky.social · 04/12/2024

This is great, it goes through the whole process of building a modal component. It starts simple and ends up close to what you get from a UI library. While reading, I realized that I can make one of the modals in my current project uncontrolled by passing it a trigger component.

developerway.com

Existential React questions and a perfect Modal Dialog

My step-by-step process for implementing a new feature from an idea to a production-ready solution using Modal Dialog as an example.

000

Colum Kelly @columk.bsky.social · 28/11/2024

Found a nice trick for nesting links without nesting them in markup (which is illegal HTML). Using position: absolute, inset: 0 on the first link makes it take up the full area of the parent div, and z-index on the nested link allows it to capture mouse events before the wrapper. #css #html #webdev

010

Colum Kelly @columk.bsky.social · 25/11/2024

I'm getting an Anthropic API error even when I query the GPT 4o and Cascade Base models in the Windsurf editor. @windsurfai.bsky.social ?

000

Colum Kelly @columk.bsky.social · 20/11/2024

Struggling with this example in the React docs. I understand the advantage with RSCs but if you're already calling setState then why use this new syntax to do the same thing? #react react.dev/reference/re...

react.dev

useOptimistic – React

The library for web and native user interfaces

000