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

15 Jun 2026 1012: Who Decides What Ships on the Web?

A personal sunburn story during California filming segues into detailed discussions on web standards, Jake Archibalds work on APIs and Firefox development, image codec debates, API design challenges, and broader issues of web centralization, privacy, and balancing innovation with standardization.

8 Jun 2026 1011: tmux + Terminal Maxxing with Ben Vinegar

Terminal-based AI agent management via Tmux and Tailscale, Modem AI's automated non-coding product tasks with human oversight, safety measures for autonomous agents, and balancing UI efficiency with isolated environments and cross-platform feedback aggregation.

1 Jun 2026 1009: 54% AI-Generated and Climbing State of AI

A survey highlights rising AI adoption in web development, with 18% of developers using AI to write 75% of their code, mixed perceptions of its quality, prominence of ChatGPT and emerging tools like Claude/Gemini, enterprise integration trends, challenges like tool costs and unclear "local model" misconceptions, and ongoing debates about job displacement, creativity, and software quality.

27 May 2026 Diffs, Trees, and VS Code 2.0

The text explores the development of code editing tools like diffs and trees for AI-driven code review, challenges with GitHub's performance, introduces scalable solutions like Code Storage, and emphasizes optimizations such as virtualization, GPU acceleration, and AI delegation to handle large-scale code processing efficiently.

25 May 2026 1007: 8 Tech Choices to Lock In Before Agentmaxxing

Establishing a clear foundation through meticulous planningdefining schemas, using TypeScript types, organizing routing/authentication upfront, and standardizing UI/CSSprevents long-term complexity, avoids AI-generated clutter, and ensures scalable, coherent development.

More Syntax - Tasty Web Development Treats episodes