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

13 May 2026 1004: TanHacked

Recommended: Time to harden your applications.

Cybersecurity threats like the "Shy Halood" worm series exploit supply chain vulnerabilities in GitHub Actions, pnpm, and token theft across NPM, Python, and UIPath ecosystems, emphasizing mitigation through workflow audits, dependency checks, tools like Socket.dev, and stricter package manager practices to counter credential theft and destructive attacks.

11 May 2026 1003: Skills Skills Skills

The discussion covers flexible AI agent tools like Hot Tip Skill, CSS Motion Systems, and Agent Browser, advocating for human-curated content over AI-generated output while emphasizing modular skills for workflow efficiency and the need for human oversight in design and marketing.

6 May 2026 1002: The Real Pricing of LLMs

The podcast highlights rising AI tool costs and accessibility challenges, critiques bloated UI libraries and over-engineered practices, explores cloud billing complexities and security risks, and stresses the importance of lightweight design, creativity, and practical problem-solving over tool dependency.

4 May 2026 1001: Managing Deadlines + Stress

Strategies for managing stress and deadlines in high-pressure work environments include prioritization, systematic task organization, tools like Kanban boards, balancing speed with quality, effective communication, cutting non-essentials, and proactive time management to prevent mistakes, burnout, and enhance efficiency.

27 Apr 2026 999: Writing Maintainable CSS

The text addresses CSS management challenges like global leakage and rigid structures, advocating component-scoped styles, utility-first frameworks (e.g., Tailwind), design systems, BEM, CSS modules, and tools like CSS variables, `@scope`, and `clamp()` to enhance reusability, maintainability, and consistency through balanced flexibility and structure.

More Syntax - Tasty Web Development Treats episodes