Syntax - Tasty Web Development Treats

977: We built a CSS Challenge platform

48 snips

Feb 9, 2026

They walk through building a real-time CSS Battle platform and the tech choices that made it possible. They cover sync servers, conflict handling, and how Zero Sync coordinates client mutations. They explain the diffing algorithm, image similarity decisions, and tuning thresholds. They also talk about sandboxing, local filesystem integration, and last-minute bug fixes before launch.

Ask episode

AI Snips

Chapters

Transcript

Episode notes

ANECDOTE

Built A CSS Battle Platform Fast

Scott and Wes decided to host a major CSS coding battle tournament and built a custom platform for it.
The project was a massive sprint to ship a real-time CSS Battle app for Mad CSS.

INSIGHT

SvelteKit + Zero Powers Real Time

SynHax uses SvelteKit plus a server because the app needs both client and server logic.
Zero Sync provides the real-time sync layer that makes the platform feel instant.

ADVICE

Let Users Code Locally, Sync Changes

Let competitors use their local editor and sync the file system to the platform for speed and comfort.
Use the File System Access API to create a local folder and persist the handle in IndexedDB for fast saves.

Get the Snipd Podcast app to discover more snips from this episode