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.
<h3 class="code-line">
<a></a>Show Notes</h3>
<ul>
<li class="has-line-data">
<a href="#t=00:00">00:00</a> Welcome to Syntax!</li>
<li class="has-line-data">
<a href="#t=00:50">00:50</a> <a href="https://madcss.com/">March Mad CSS</a> Tournament.</li>
<li class="has-line-data">
<a href="#t=03:19">03:19</a> Brought to you by <a href="https://sentry.io/syntax">Sentry.io</a>.</li>
<li class="has-line-data">
<a href="#t=03:59">03:59</a> What the heck is a CSS Battle?</li>
<li class="has-line-data">
<a href="#t=05:34">05:34</a> The tech stack.
<ul>
<li class="has-line-data">
<a href="#t=06:30">06:30</a> Svelte Kit.</li>
<li class="has-line-data">
<a href="#t=06:44">06:44</a> Zero Sync.
<ul>
<li class="has-line-data"><a href="https://zero.rocicorp.dev/">Zero Docs</a></li>
<li class="has-line-data">
<a href="https://github.com/stolinski/zero-svelte">Zero Svelte</a>.</li>
</ul>
</li>
<li class="has-line-data">
<a href="#t=07:32">07:32</a> <a href="https://orm.drizzle.team/docs/overview">Drizzle</a>.</li>
<li class="has-line-data">
<a href="#t=07:58">07:58</a> <a href="https://supabase.com/">Supabase</a>.</li>
<li class="has-line-data">
<a href="#t=08:23">08:23</a> <a href="https://graffiti-ui.com/">Graffiti</a>.</li>
<li class="has-line-data">
<a href="#t=10:45">10:45</a> Sync Server.</li>
<li class="has-line-data">
<a href="#t=12:10">12:10</a> Cloudflare Workers.</li>
<li class="has-line-data">
<a href="#t=12:23">12:23</a> Local File System.</li>
</ul>
</li>
<li class="has-line-data">
<a href="#t=13:26">13:26</a> How Zero Works.
<ul>
<li class="has-line-data">
<a href="#t=13:48">13:48</a> Zero Sync Client.</li>
<li class="has-line-data">
<a href="#t=15:39">15:39</a> API server.</li>
</ul>
</li>
<li class="has-line-data">
<a href="#t=19:34">19:34</a> Dealing with states and conflicts.</li>
<li class="has-line-data">
<a href="#t=24:25">24:25</a> The Hackweek Project.</li>
<li class="has-line-data">
<a href="#t=25:29">25:29</a> The Diffing Algorithm.</li>
<li class="has-line-data">
<a href="#t=35:22">35:22</a> The bugs.</li>
</ul>
<h3 class="code-line">
<a></a>Hit us up on Socials!</h3>
Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href="https://www.instagram.com/syntax_fm/">Instagram</a> <a href="https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href="https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a>
Wes: <a href="https://twitter.com/wesbos">X</a> <a href="https://www.instagram.com/wesbos/">Instagram</a> <a href="https://www.tiktok.com/@wesbos">Tiktok</a> <a href="https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href="https://www.threads.net/@wesbos">Threads</a>
Scott: <a href="https://twitter.com/stolinski">X</a> <a href="https://www.instagram.com/stolinski/">Instagram</a> <a href="https://www.tiktok.com/@stolinski">Tiktok</a> <a href="https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href="https://www.threads.net/@stolinski">Threads</a>
Randy: <a href="https://twitter.com/randyrektor">X</a> <a href="https://www.instagram.com/randyrektor/">Instagram</a> <a href="https://www.youtube.com/@randyrektor">YouTube</a> <a href="https://www.threads.net/@randyrektor">Threads</a>

<description>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</description>

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

Syntax - Tasty Web Development Treats

977: We built a CSS Challenge platform

977: We built a CSS Challenge platform

Description