What is a CSS Battle and the UI

Scott and Wes break down how they built SynHax, the real-time CSS Battle app powering the upcoming Mad CSS tournament. From SvelteKit and Zero to diffing algorithms, sync conflicts, and a last-minute hackweek glow-up, this one’s a deep dive into shipping ambitious web apps fast.

Show Notes

• 00:00 Welcome to Syntax!
• 00:50 March Mad CSS Tournament.
• 03:19 Brought to you by Sentry.io.
• 03:59 What the heck is a CSS Battle?
• 05:34 The tech stack.
  • 06:30 Svelte Kit.
  • 06:44 Zero Sync.
    • Zero Docs
    • Zero Svelte.
  • 07:32 Drizzle.
  • 07:58 Supabase.
  • 08:23 Graffiti.
  • 10:45 Sync Server.
  • 12:10 Cloudflare Workers.
  • 12:23 Local File System.
• 13:26 How Zero Works.
  • 13:48 Zero Sync Client.
  • 15:39 API server.
• 19:34 Dealing with states and conflicts.
• 24:25 The Hackweek Project.
• 25:29 The Diffing Algorithm.
• 35:22 The bugs.

Hit us up on Socials!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads