977: We built a CSS Challenge platform

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.