Colum Kelly
@columk.bsky.social
Fullstack Developer | Climbing | Paragliding
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
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 🥲
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 🥲
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...
www.joshwcomeau.com
January 8, 2025 at 7:49 AM
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 🥲
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 🥲
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
January 2, 2025 at 1:39 AM
@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
"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
December 29, 2024 at 7:34 AM
@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
"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
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/99bottles
#oop #webdev @sandimetz.bsky.social
99 Bottles — Sandi Metz
sandimetz.com
December 28, 2024 at 10:21 PM
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/99bottles
#oop #webdev @sandimetz.bsky.social