Discover how we enhanced our development process for the Daylight project, from debugging tips to performance boosts maintaining a clean codebase.
Welcome back to our Daylight blog series! If you liked our first post on creating those soft and warm shadows, hold on to your seat. In this second part, we will share with you how we enhanced our dev experience for the Daylight project. We’ll talk about all sorts of topics, from the debugging experience to how we managed to keep the project smooth and clean, keeping an organized codebase. Let’s dive in 🫡
Welcome back to our Daylight (opens in a new tab) blog series! If you liked our first post on creating those soft and warm shadows, hold on to your seat. In this second part, we will share with you how we enhanced our dev experience for the Daylight project.
If there's one golden rule we've learned, it would be to ensure quick and solid progress: you should STOP guessing. You need tools that give you detailed, quick, and accurate information to help you understand what's happening, confirming your suspicions or proving you wrong.
“A Basecamp studio isn't just a space—it's a sanctuary where raw ideas take shape, echoing louder than self-doubt. It's where creativity flows without limits, mistakes become lessons”
The OffscreenCanvas API offers a way to detach the canvas context rendering steps from the main thread, resulting in significant performance boosts depending on your use-case. Or it leaves more room on the main thread reserved for magic, depending on how you see it.
We have a bunch of canvases for Image sequences, WebGL, and noise overlay. Some of them don’t need to be document-synchronized, and some of them do. We needed a way to quickly set them up without caring about resizing, device pixel ratio, offscreen setup, and state management. React hooks are your friends here.
"use client"
import { importAfterInteractive } from '~/components/dynamic'
import heroPlaceholder from './hero-placeholder.webp'
const HeroPlayer = importAfterInteractive(() => import('./hero-player'), {
placeholder: () => (
<Image fill sizes="100vw" src={heroPlaceholder} />
)
})
export const Hero => (
<div>
<HeroPlayer />
</div>
)
