Colum Kelly
@columk.bsky.social
Fullstack Developer | Climbing | Paragliding
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.
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.
useOptimistic Won't Save You | Colum Kelly
Thoughts on the useOptimistic hook that was introduced in React 19
www.columkelly.com
January 16, 2026 at 7:30 PM
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.
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.
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/posts/seven-...
where good ideas come from (for coding agents)
(and the part where users have to level up)
sunilpai.dev
January 14, 2026 at 7:43 PM
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/posts/seven-...
@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.
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
async-react.dev
December 5, 2025 at 7:23 AM
@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.
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.
October 19, 2025 at 6:22 AM
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
#webdev #frontend #react #typescript
March 31, 2025 at 8:16 PM
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
#webdev #frontend #react #typescript
@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.
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.
March 26, 2025 at 6:49 PM
@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.
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.
@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.
March 25, 2025 at 8:20 PM
@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.
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/blog/io-devi...
#webdev
IO devices and latency — PlanetScale
Take an interactive journey through the history of IO devices, and learn how IO device latency affects performance.
planetscale.com
March 25, 2025 at 5:54 PM
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/blog/io-devi...
#webdev
@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.
March 13, 2025 at 8:43 PM
@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.
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
@syntax.fm you guys got me here! Someone hire me I'm sick of cleaning windows 😅
#webdev #react #nextjs
March 12, 2025 at 9:13 PM
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
@syntax.fm you guys got me here! Someone hire me I'm sick of cleaning windows 😅
#webdev #react #nextjs
This is a handy little tool for checking how OG images show up on different sites during local development.
chromewebstore.google.com/detail/kckjj...
#webdev #frontend #seo
chromewebstore.google.com/detail/kckjj...
#webdev #frontend #seo
Localhost Open Graph Debugger - Chrome Web Store
Localhost Open Graph Debugger is a Chrome extension designed to check the Open Graph meta tags on locally hosted websites.
chromewebstore.google.com
March 12, 2025 at 7:26 AM
This is a handy little tool for checking how OG images show up on different sites during local development.
chromewebstore.google.com/detail/kckjj...
#webdev #frontend #seo
chromewebstore.google.com/detail/kckjj...
#webdev #frontend #seo
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
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
February 21, 2025 at 6:30 AM
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...
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...
February 10, 2025 at 8:50 PM
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...
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...
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
#webdev #frontend #react #javascript
February 1, 2025 at 8:29 PM
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
#webdev #frontend #react #javascript
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
Placing the Dropdown within the Dialog is a better solution that will make everything work correctly. #radix #shadcn #webdev #frontend #react
January 29, 2025 at 8:47 PM
January 26, 2025 at 10:32 PM
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
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;
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:kpc5tukpvvbvy556u4ltdltl/bafkreih6uwygv2jxnmt4kzoik6xr4p2pbzughxdrpcgzjiix2zkf5rpdnu@jpeg)
January 26, 2025 at 5:38 AM
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
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()
}, [])](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:kpc5tukpvvbvy556u4ltdltl/bafkreidtj5nnmdqlyq37dulk6mzcunbuo7o7t3r76s7juzytizjnw6zmfu@jpeg)
January 23, 2025 at 6:49 PM
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
#webdev #nextjs #typescript
January 13, 2025 at 6:56 PM
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
#webdev #nextjs #typescript
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
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
January 9, 2025 at 7:00 AM
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
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
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
brew uninstall --cask docker --force
brew uninstall --formula docker --force
brew install --cask docker
brew install docker-compose
#docker
January 8, 2025 at 6:27 PM
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
brew uninstall --cask docker --force
brew uninstall --formula docker --force
brew install --cask docker
brew install docker-compose
#docker