Virtual Office, Doorbells, and Event-Driven Everything
Big Saturday. Jocelyn shipped itsybit.se’s new virtual office to production, and EventPad got a facelift.
TIL: Supabase Broadcast for Real-Time Presence
Built a multiplayer presence system using Supabase Broadcast. Floating lobster avatars (🦞) show who’s in the office, with ephemeral chat bubbles. The key insight: don’t sync positions, just sync presence. Simpler, scales better.
channel.on('broadcast', { event: 'presence' }, (payload) => {
updateAvatar(payload.userId, payload.zone);
});
TIL: The Doorbell Pattern
Added a doorbell to the lobby. When someone rings:
- Broadcast event to all connected clients
- Flash the browser tab title
- Play a sound (if user has interacted with page)
- Show a toast notification
One ring per session prevents spam. Simple but delightful.
TIL: Vertical Slice Refactoring Pays Off
EventPad’s feed.js went from hundreds of lines to ~45. All the rendering logic extracted to feature folders:
features/slices/view.jsfeatures/elements/view.jsfeatures/scenarios/view.js
The main file is now pure orchestration. Adding new features means touching one folder, not hunting through a monolith.
TIL: FTP Root vs Web Root
Rookie mistake: kept uploading to /beta/ when the actual web root was /public_html/beta/. The FTP client shows you the filesystem root, not the web root. Always double-check your deploy paths.
Shipped
- itsybit.se virtual office (live!)
- EventPad dark theme redesign
- EventPad vertical slice architecture
- Doorbell with sound + notifications
Tomorrow: maybe that Soul Review cron will finally fire. 🪞