977: We built a CSS Challenge platform
Episode
41 min
Read time
2 min
Topics
Software Development, Science & Discovery, Economics & Policy
AI-Generated Summary
Key Takeaways
- ✓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.
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.
Notable Moment
The team discovered a critical authorization bug hours before launch when the sync engine randomly disconnected users. After combing through logs and Sentry reports, CJ identified that the JWT token expired after fifteen minutes while the cookie lasted longer, causing mid-battle disconnections. They fixed it by extending the JWT expiration rather than rebuilding the sync client instance.
Episode Transcript
We decided to host a major CSS coding battle tournament here on Syntax with 14 of the greatest CSS engineers out there and then two other competitors in that competition, that being Wes and myself, competing in CSS battles. And we've been doing a lot of CSS battles here on Fridays and our, of the three devs videos with CJ, Wes, and I. But we wanted to take it one step further. And so we built our own CSS coding battles platform. So we're gonna be talking all about how that works, the stack, how the stack works itself, what we're using for various components, why it's cool, and we're gonna be diving into some of the challenges that we had getting this thing up and running. Because let me tell you, this has been a massive sprint to build our own platform from scratch just to use for this CSS coding tournament. My name is Scott Tolinski. I'm a developer from Denver. With me as always is West Boss. What's up, Waz? Hey. Excited to talk about this. This has been very fun to work on the last, what, two weeks or so. I joined in about two weeks ago and helped crank out issues, but it's it's a really cool platform. It's all local first, all syncs. It's all fast as heck since Felt. Really cool. Love it. Yeah. I will say it's not local first. And, I I wanna push back on that. But I I do think that's an important part of this distinction here because we'll talk about why it's not local first. We'll talk about the tech. It is using zero sync, which definitely it was a platform that was initially described as being local first. But they've really kind of shifted, that message a little bit because I don't think it really truly falls under that. But I I think you saying it's local first is not a bad thing, Wes. I think that is, how most people might think about this and look about it. So, again, the Mad CSS, March mad CSS tournament, you'll find that exclusively on our YouTube channel here. We have some of the the best competitors, Kevin Powell, Adam Argyle, Adam Wathan, Cassidy Williams, Anya, Kubo. Is that who you said what her last name was? I believe so. I'm not don't don't count me on that. Sorry, Anya. Josh Komu. We have Kyle Cook who's also known as WebDev, Simplified. Julia Miocene, Evan Hong, Bree Hall, Chris Coyer, Jason Langstaff, Shondae Pearson, and Amy Dutton. This thing besides this site being cool as hell, Wes, this tournament Thank you. Yeah. Absolutely..com. Go check it out because this was a really fun site to build. And Yes. We're currently working on a way to pick your own bracket. So before this thing goes live, you're gonna be able to log in to madcss.com and pick a bracket. And if you win, if you get it, if the …
Get the full transcript (7,402 words) + summary by email — free
One-time email with the complete transcript and AI summary of this episode. No account needed.
One email, no spam. We’ll also show you what SignalCast does.
You just read a 3-minute summary of a 38-minute episode.
Get Syntax summarized like this every Monday — plus up to 2 more podcasts, free.
Pick Your Podcasts — FreeKeep Reading
More from Syntax
1037: WebMCP is here (and you should care)
Sep 9 · 56 min
David Senra
Mati Staniszewski on ElevenLabs, Voice AI & Building the Communication Layer for AI
Sep 9
More from Syntax
1036: Cursor & OpenAI Break Up
Sep 7 · 72 min
a16z Podcast
Inside Cursor: The Anatomy of a Generational Startup
Aug 27
Books, tools, and gear mentioned in this episode
SignalCast may earn commission on purchases via these links.
Tools
“The platform uses the File System Access API to let competitors code in their own editors with familiar shortcuts and autocomplete”
“they built a multi-threshold algorithm using SnapDOM to convert HTML to canvas images”
“Iframes with sandbox attributes combined with Content Security Policy headers prevent malicious code execution while allowing Tailwind CSS CDN”
“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.”
“After combing through logs and Sentry reports, CJ identified that the JWT token expired”
“They detail the technical stack using SvelteKit, ZeroSync for real-time synchronization, local file system access, and a custom pixel-diffing algorithm”
“sending only patch messages for updates via WebSocket to a sync server, then replicating to Postgres”
“making the development experience as fast as using Vite locally”
More from Syntax
We summarize every new episode. Want them in your inbox?
Similar Episodes
Related episodes from other podcasts
David Senra
Sep 9
Mati Staniszewski on ElevenLabs, Voice AI & Building the Communication Layer for AI
a16z Podcast
Aug 27
Inside Cursor: The Anatomy of a Generational Startup
a16z Podcast
Aug 10
The Self-Improving Company | Kavak's AI Playbook
The Vergecast
Jun 29
Our vibe coded projects that actually work
a16z Podcast
Apr 20
Rethinking Git for the Age of Coding Agents with GitHub Cofounder Scott Chacon
Explore Related Topics
This podcast is featured in Best Cybersecurity Podcasts (2026) — ranked and reviewed with AI summaries.
Read this week's Software Engineering Podcast Insights — cross-podcast analysis updated weekly.
You're clearly into Syntax.
Every Monday, we deliver AI summaries of the latest episodes from Syntax and 192+ other podcasts. Free for one show.
Start My Monday DigestNo credit card · Unsubscribe anytime