More Syntax - Tasty Web Development Treats episodes

977: We built a CSS Challenge platform thumbnail

977: We built a CSS Challenge platform

Published 9 Feb 2026

Duration: 2466

A real-time coding battle platform called "Mad CSS March" is being developed, featuring a comparison tool and live updates, with a tournament scheduled to start in early March.

Episode 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 diff...

Overview

The podcast details the creation of "Mad CSS March," a custom CSS coding battle platform that allows users to compete in real-time by comparing their code to predefined targets and tracking their progress relative to competitors. The platform is built using SvelteKit, Zero Sync, Drizzle, and PostgreSQL, enabling fast and offline-capable coding through integration with the local file system and real-time updates. A key component of the platform is a diffing algorithm developed with Snapdom, which evaluates how closely user-generated CSS matches the target, using thresholds, color weighting, and overlay tools to ensure precise comparison results.

Additional features discussed include a referee view for monitoring the competition, a progress spire to visually represent user advancement, and a no-JavaScript tab system with tooltips for improved usability. The development process encountered several challenges, such as bugs in the sync engine, implementing authentication, and maintaining consistent visual fidelity across different environments, which required multiple iterations and thorough testing to resolve. The tournament is set to launch in early March, featuring five YouTube videos where participants can engage with the competition in real-time, track their progress, and view code differences as they occur.

Recent Episodes of Syntax - Tasty Web Development Treats

30 Mar 2026 991: Vites bet on Cloudflare (VOID Framework)

Void is a full-stack JavaScript framework integrated with Cloudflare, offering databases, authentication, and frontend flexibility with React/Svelte/Solid, but faces vendor lock-in concerns, database portability challenges, and trade-offs between Cloudflare ecosystem convenience and platform flexibility.

25 Mar 2026 990: Vite Is Taking Over (Vite+)

Vite+ is an open-source JavaScript toolchain unifying bundlers, linters, and task runners through streamlined configuration, Rust-based Oxlint/Oxformat, and efficiency-focused features like caching and simplified CLI commands, aiming to reduce workflow fragmentation and developer overhead.

23 Mar 2026 989: State of JS 2025

Recommended: Notes from the wisdom of the crowd of JavaScript developers.

Recent JavaScript/web dev trends highlight AI integration over new language features, shifting library preferences (React/Angular decline vs. Solid/Playwright rise), performance-focused tools like Vitest and Node.js, and growing emphasis on simplicity, observability, and hybrid development approaches.

18 Mar 2026 988: Cloudflares Next.js Slop Fork

Cloudflare's vNext, a Vite-based Next.js fork, leveraged AI for rapid prototyping and iterative feedback to address porting challenges, while exploring AI's transformative potential in development workflows and framework transitions.

16 Mar 2026 987: Remote Coding Agents

Remote coding agents offer flexibility and productivity by enabling task execution from any device, but face challenges like cost, complexity, and efficiency trade-offs, with potential use cases beyond coding requiring human oversight.

More Syntax - Tasty Web Development Treats episodes