Chris Drifte
@drifte.dev
Writing fast code. Living slow life.
💻 Typescript, React, NextJS
⛰️ Climbing, Running, Hiking
💻 Typescript, React, NextJS
⛰️ Climbing, Running, Hiking
TIL you can pass extra parameters to setTimeout. I guess it’s slightly more memory efficient, slightly less readable than the usual arrow function approach.
December 16, 2024 at 11:07 PM
TIL you can pass extra parameters to setTimeout. I guess it’s slightly more memory efficient, slightly less readable than the usual arrow function approach.
Photo taken today from the summit of pedraforca, facing Montserrat in a sea of cloud. Within the next 48 hours this will all be covered in snow.
December 6, 2024 at 4:23 PM
Photo taken today from the summit of pedraforca, facing Montserrat in a sea of cloud. Within the next 48 hours this will all be covered in snow.
December 1, 2024 at 1:21 PM
Sometimes I am delivering features. Sometimes I am coming down from the ridge line of l’Olla de Vallter. Balance in all things.
November 27, 2024 at 5:52 PM
Sometimes I am delivering features. Sometimes I am coming down from the ridge line of l’Olla de Vallter. Balance in all things.
Spending most of my waking life in front of a screen so I can spend the rest in places like this.
November 27, 2024 at 6:12 AM
Spending most of my waking life in front of a screen so I can spend the rest in places like this.
Idea: request data in server components, but timeout after a short period, falling back to a client request.
- Initial load time is limited by the timeout
- If services load correctly, they display without javascript
- If services fail to load, they can be retried multiple times
Thoughts?
- Initial load time is limited by the timeout
- If services load correctly, they display without javascript
- If services fail to load, they can be retried multiple times
Thoughts?
![export async function ServerComponent() {
// attempt to fetch data on the server
// but timeout after a short period
const [serviceOne, serviceTwo] = await Promise.allSettled([
fetchServiceOne({ timeout: 100 }),
fetchServiceTwo({ timeout: 100 }),
]);
return (
<ClientComponent
initialServiceOneData={
serviceOne.status === "fulfilled" ? serviceOne.value : undefined
}
initialServiceTwoData={
serviceTwo.status === "fulfilled" ? serviceTwo.value : undefined
}
/>
);
}
export function ClientComponent({
initialServiceOneData,
initialServiceTwoData,
}: ClientComponentProps) {
// fetch the data in the client if it wasn't provided yet
const serviceOneData = useQuery({
queryFn: () => fetchServiceOne({ timeout: 0 }),
initialData: initialServiceOneData,
});
const serviceTwoData = useQuery({
queryFn: () => fetchServiceOne({ timeout: 0 }),
initialData: initialServiceTwoData,
});
return <>...</>;
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:sztio2ytsl437pxftmcw2hv7/bafkreiaz23lbnud4hzfz3h22plvncb6t7zqx6po6axuabbpv3dg6fhz35u@jpeg)
November 26, 2024 at 9:01 PM
Idea: request data in server components, but timeout after a short period, falling back to a client request.
- Initial load time is limited by the timeout
- If services load correctly, they display without javascript
- If services fail to load, they can be retried multiple times
Thoughts?
- Initial load time is limited by the timeout
- If services load correctly, they display without javascript
- If services fail to load, they can be retried multiple times
Thoughts?
Test your javascript knowledge with this fun puzzle, and then continue to please never use the &&= and ||= operators in production code.
November 25, 2024 at 9:33 PM
Test your javascript knowledge with this fun puzzle, and then continue to please never use the &&= and ||= operators in production code.
Fun fact: this town (pop. 14) has fibre internet and just two digital workers. How long before everyone else realises that WFH can look like this I wonder.
November 25, 2024 at 6:19 AM
Fun fact: this town (pop. 14) has fibre internet and just two digital workers. How long before everyone else realises that WFH can look like this I wonder.
Meanwhile the Duolingo mobile widget is openly threatening…
November 24, 2024 at 10:46 AM
Meanwhile the Duolingo mobile widget is openly threatening…
A little trick I don't see often and would like to see more of: cleaning up multiple event listeners with AbortController
![useEffect(() => {
const controller = new AbortController()
const signal = controller.signal
// ...
window.addEventListener('keydown', handleKeyDown, { signal })
window.addEventListener('keyup', handleKeyUp, { signal })
window.addEventListener('mousedown', handleMouseDown, { signal })
window.addEventListener('mouseup', handleMouseUp, { signal })
return () => {
controller.abort()
}
}, [])](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:sztio2ytsl437pxftmcw2hv7/bafkreiamjyuglmhvw7jdsjhdofud6lydwodpd4vxbaxq3n3dpsvehulkmu@jpeg)
November 24, 2024 at 10:27 AM
A little trick I don't see often and would like to see more of: cleaning up multiple event listeners with AbortController
November in the Spanish Pyrenees
November 23, 2024 at 6:50 PM
November in the Spanish Pyrenees