977: We built a CSS Challenge platform

What It Covers

Scott Tolinski and Wes Bos built a custom CSS coding battle platform from scratch in two weeks for their March Madness-style tournament featuring 14 top CSS engineers. They detail the technical stack using SvelteKit, ZeroSync for real-time synchronization, local file system access, and a custom pixel-diffing algorithm to objectively score CSS recreations.

Key Questions Answered

• •Real-time sync architecture: ZeroSync provides instant data synchronization by storing data locally in IndexedDB, sending only patch messages for updates via WebSocket to a sync server, then replicating to Postgres. This architecture eliminates polling and makes all changes appear instantly across all connected clients without full data transfers, achieving meteor-like reactivity.
• •Local development workflow: The platform uses the File System Access API to let competitors code in their own editors with familiar shortcuts and autocomplete rather than browser text boxes. Changes save directly from VS Code to the local file system, triggering mutations that sync in real-time, making the development experience as fast as using Vite locally.
• •Custom diffing algorithm: After testing six to seven approaches including vectorization and SSIM, they built a multi-threshold algorithm using SnapDOM to convert HTML to canvas images. The system punches out background colors, weights opacity differences less heavily, and uses color-coded diff visualization where red indicates significant pixel differences requiring attention versus minor green and blue variations.
• •Security sandboxing: Iframes with sandbox attributes combined with Content Security Policy headers prevent malicious code execution while allowing Tailwind CSS CDN. The CSP restricts inline JavaScript and limits script loading to one specific Tailwind URL, solving the problem of competitors potentially injecting scripts that would execute on other participants' machines during battles.
• •Auth and permissions refactor: ZeroSync 2.5 moved from handling auth in the sync server schema to standard API routes in the main application. This change allows developers to use existing authentication middleware and pass user context to ZeroSync, making it easier to incrementally adopt the sync engine in existing applications with established auth systems.