Syntax - Tasty Web Development Treats

999: Writing Maintainable CSS

Scott and Wes break down what makes CSS truly manageable—from preventing style leaks and embracing fluid layouts to choosing the right methodology, whether that’s utility CSS, component-scoped styles, or CSS modules. They also dive into practical tips like leveraging CSS variables, layers, scoping, and tooling to keep your stylesheets clean and scalable. SHOW NOTES * 00:00 Welcome to Syntax! * 01:31 Understanding CSS Manageability * 01:44 This CSS doesn’t leak to other parts of website. * 03:41 This CSS is easy to maintain. * 05:54 This CSS is reusable. * 06:10 Global Solutions Instead of Local Solutions. * 07:12 Flexibility and Adaptability in CSS * 09:36 Fluid Typography and Responsive Design * fluid-type [https://fluid-type.tolin.ski/] * 12:09 Variables and Consistency in CSS * 13:40 Brought to you by Sentry.io [https://sentry.io/syntax]. * 14:14 Values vs Variables. * Project Wallace [https://www.projectwallace.com/]. * 18:19 Choosing the Right CSS Methodology * 18:48 Utility CSS and Atomic CSS * 22:35 Exploring StyleX and Other Approaches * Syntax Ep 650 [https://syntax.fm/650]. * 25:14 Panda CSS [https://panda-css.com/]. * 25:37 Component Scoped CSS: A Preferred Approach * 29:08 The Evolution of CSS Modules * 34:03 Global CSS: Best Practices * Josh Comeau’s CSS Reset [https://www.joshwcomeau.com/css/custom-css-reset/]. * Scott’s Graffiti UI [https://graffiti-ui.com/]. * 38:22 Harnessing CSS Variables * 41:33 Understanding CSS Layers * 43:52 The Power of CSS Scoping * 46:16 Enforcing CSS Standards with Tools HIT US UP ON SOCIALS! Syntax: X [https://twitter.com/syntaxfm] Instagram [https://www.instagram.com/syntax_fm/] Tiktok [https://www.tiktok.com/@syntaxfm] LinkedIn [https://www.linkedin.com/company/96077407/admin/feed/posts/] Threads [https://www.threads.net/@syntax_fm] Wes: X [https://twitter.com/wesbos] Instagram [https://www.instagram.com/wesbos/] Tiktok [https://www.tiktok.com/@wesbos] LinkedIn [https://www.linkedin.com/in/wesbos/] Threads [https://www.threads.net/@wesbos] Scott: X [https://twitter.com/stolinski] Instagram [https://www.instagram.com/stolinski/] Tiktok [https://www.tiktok.com/@stolinski] LinkedIn [https://www.linkedin.com/in/stolinski/] Threads [https://www.threads.net/@stolinski] Randy: X [https://twitter.com/randyrektor] Instagram [https://www.instagram.com/randyrektor/] YouTube [https://www.youtube.com/@randyrektor] Threads [https://www.threads.net/@randyrektor]

998: How to Fix Vibe Coding

Wes and Scott talk about making AI coding more reliable using deterministic tools like fallow, knip, ESLint, StyleLint, and Sentry. They cover code quality analysis, linting strategies, headless browsers, task workflows, and how to enforce better patterns so AI stops guessing and starts producing maintainable, predictable code. SHOW NOTES * 00:00 Welcome to Syntax! * Losing two clients in one week [https://x.com/wesbos/status/2044060210503778319] * 04:49 Code quality tools * jscpd.dev [https://jscpd.dev/] * knip.dev [https://knip.dev/] * fallow.tools [https://fallow.tools/] * wallace [https://github.com/projectwallace/wallace-cli] * 14:11 Finding and using components * Storybook AI [https://storybook.js.org/ai] * 17:28 Brought to you by Sentry.io [https://sentry.io/syntax/] * 17:42 Finding bugs * Sentry CLI [https://cli.sentry.dev/] * Spotlight [https://spotlightjs.com/] * 19:55 Formatting and linting * Vite+ [https://viteplus.dev/] * ESLint [https://eslint.org/] * StyleLint [https://stylelint.io/] * clint [https://github.com/stolinski/clint] * 25:41 Headless browsers * agent-browser [https://github.com/vercel-labs/agent-browser] * chrome-devtools-mcp [https://github.com/ChromeDevTools/chrome-devtools-mcp] * Lightpanda [https://lightpanda.io/] * 32:11 Tasks and todos * dex [https://dex.rip/] * beads [https://github.com/gastownhall/beads] * 33:32 Docs * Context7 [https://context7.com/] * 34:22 TanStack Code Mode [https://tanstack.com/blog/tanstack-ai-code-mode] * 36:01 Getting AI to use these tools * 38:18 Sick Picks + Shameless Plugs SICK PICKS * Scott: Leaf Two Razor [https://leafshave.com/products/leaf-two-razor] * Wes: Puzzles [https://www.amazon.com/s?k=puzzles] SHAMELESS PLUGS * Phases.fm Podcast [http://phases.fm/] HIT US UP ON SOCIALS! Syntax: X [https://twitter.com/syntaxfm] Instagram [https://www.instagram.com/syntax_fm/] Tiktok [https://www.tiktok.com/@syntaxfm] LinkedIn [https://www.linkedin.com/company/96077407/admin/feed/posts/] Threads [https://www.threads.net/@syntax_fm] Wes: X [https://twitter.com/wesbos] Instagram [https://www.instagram.com/wesbos/] Tiktok [https://www.tiktok.com/@wesbos] LinkedIn [https://www.linkedin.com/in/wesbos/] Threads [https://www.threads.net/@wesbos] Scott: X [https://twitter.com/stolinski] Instagram [https://www.instagram.com/stolinski/] Tiktok [https://www.tiktok.com/@stolinski] LinkedIn [https://www.linkedin.com/in/stolinski/] Threads [https://www.threads.net/@stolinski] Randy: X [https://twitter.com/randyrektor] Instagram [https://www.instagram.com/randyrektor/] YouTube [https://www.youtube.com/@randyrektor] Threads [https://www.threads.net/@randyrektor]

997: Rating and Roasting Your Projects

Scott and Wes dig into a huge batch of community-submitted projects, from JSON tools and CSS editors to AI agents, view transitions, and everything in between. It’s a rapid-fire showcase of what developers have been building, including picks like Arrow JS, Sugar High, Drift, and a whole lot more. SHOW NOTES * 00:00 Welcome to Syntax! * Wes’ Bluesky Post [https://bsky.app/profile/wesbos.com/post/3miw3owtzps2q] * Wes’ X Post [https://x.com/wesbos/status/2041538003345031631] * 01:20 JSON-Alexander [https://github.com/wesbos/JSON-Alexander]. * 02:43 FFF - Fastest File Search [https://github.com/dmtrKovalenko/fff.nvim]. * 04:44 View Transitions Toolkit [https://chrome.dev/view-transitions-toolkit/]. * 08:06 Agentation [https://www.agentation.com/] and Svelte Agentation [https://sv-agentation.com/]. * 11:21 CSS Studio [https://cssstudio.ai/]. * 13:12 Peon Ping [https://www.peonping.com/] * 14:26 Peekdown [https://peekdown.app/]. * 16:03 Dex [https://dex.rip/]. * 20:22 Content Copilot [https://www.contentcopilot.so/]. * 22:16 Opencode Sentry Monitor [https://github.com/stolinski/opencode-sentry-monitor]. * pi-sentry-monitor [https://github.com/sergical/pi-sentry-monitor]. * 24:56 Arrow JS [https://arrow-js.com/]. * 29:20 Comark [https://comark.dev/]. * 33:19 Silly Software Club [https://www.sillysoftware.club/]. * 34:05 Sugar High [https://github.com/huozhi/sugar-high]. * 36:04 Drift [https://github.com/fiberplane/drift]. * 37:19 Fallow [https://github.com/fallow-rs/fallow]. * 41:20 Edit Mind [https://github.com/IliasHad/edit-mind]. * 44:46 Clint [https://github.com/stolinski/clint]. * 47:18 Honorable mentions. * 47:21 Artemisapp [https://artemisapp.me/]. * 49:53 Open Screen [https://openscreen.vercel.app/]. * 50:14 CanvidHQ [https://www.canvid.com/]. * 52:02 Proxybox Zero [https://pbxz.io/]. HIT US UP ON SOCIALS! Syntax: X [https://twitter.com/syntaxfm] Instagram [https://www.instagram.com/syntax_fm/] Tiktok [https://www.tiktok.com/@syntaxfm] LinkedIn [https://www.linkedin.com/company/96077407/admin/feed/posts/] Threads [https://www.threads.net/@syntax_fm] Wes: X [https://twitter.com/wesbos] Instagram [https://www.instagram.com/wesbos/] Tiktok [https://www.tiktok.com/@wesbos] LinkedIn [https://www.linkedin.com/in/wesbos/] Threads [https://www.threads.net/@wesbos] Scott: X [https://twitter.com/stolinski] Instagram [https://www.instagram.com/stolinski/] Tiktok [https://www.tiktok.com/@stolinski] LinkedIn [https://www.linkedin.com/in/stolinski/] Threads [https://www.threads.net/@stolinski] Randy: X [https://twitter.com/randyrektor] Instagram [https://www.instagram.com/randyrektor/] YouTube [https://www.youtube.com/@randyrektor] Threads [https://www.threads.net/@randyrektor]

996: 10 New CSS and HTML APIs

Wes and Scott talk about the latest CSS and browser features, including the Grid Lines API for masonry layouts, HTML in Canvas, name-only container queries, CSS random, search-text styling, and more. SHOW NOTES * 00:00 Welcome to Syntax! * 00:57 Grid Lines API for masonry-style layouts * Introducing CSS Grid Lanes [https://webkit.org/blog/17660/introducing-css-grid-lanes/] * CSS Grid Lanes browser support [https://caniuse.com/css-grid-lanes] * 03:25 HTML in canvas and next-gen UI effects * @jaffathecake [https://x.com/jaffathecake/status/2039632975831191858] * @mattrothenberg [https://x.com/mattrothenberg/status/2040416074710102300] * 11:30 Name-only container queries for scoped styles * Name-Only Containers: The Scoping We Needed [https://frontendmasters.com/blog/name-only-containers-the-scoping-we-needed/] * 14:37 Brought to you by Sentry.io [https://sentry.io/syntax/] * 15:34 Safari removes haptic feedback workaround * 17:38 CSS random for dynamic values * Rolling the Dice with CSS random() [https://webkit.org/blog/17285/rolling-the-dice-with-css-random/] * 18:49 Styling find-in-page with ::search-text [https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::search-text] * 21:44 Sticky positioning now works in both axes * @una [https://x.com/Una/status/2041215307440652396] * 22:43 Multi-column CSS finally gets usable fixes * Looking at New CSS Multi-Column Layout Wrapping Features [https://css-tricks.com/css-multi-column-layout-wrapping-features/] * 24:41 Border shape improvements and new design options * @una [https://x.com/Una/status/2019502817216503824?s=20] * MadCSS.com [https://madcss.com/] * 27:09 Why MDN demos need to be better * 28:24 Element-scoped view transitions for cleaner animations * @bram.us [https://bsky.app/profile/bram.us/post/3mf4x7sxyc226] HIT US UP ON SOCIALS! Syntax: X [https://twitter.com/syntaxfm] Instagram [https://www.instagram.com/syntax_fm/] Tiktok [https://www.tiktok.com/@syntaxfm] LinkedIn [https://www.linkedin.com/company/96077407/admin/feed/posts/] Threads [https://www.threads.net/@syntax_fm] Wes: X [https://twitter.com/wesbos] Instagram [https://www.instagram.com/wesbos/] Tiktok [https://www.tiktok.com/@wesbos] LinkedIn [https://www.linkedin.com/in/wesbos/] Threads [https://www.threads.net/@wesbos] Scott: X [https://twitter.com/stolinski] Instagram [https://www.instagram.com/stolinski/] Tiktok [https://www.tiktok.com/@stolinski] LinkedIn [https://www.linkedin.com/in/stolinski/] Threads [https://www.threads.net/@stolinski] Randy: X [https://twitter.com/randyrektor] Instagram [https://www.instagram.com/randyrektor/] YouTube [https://www.youtube.com/@randyrektor] Threads [https://www.threads.net/@randyrektor]

995: Next.js Vendor Lock-in No More

In this episode, Scott and Wes sit down with Tim Neutkens and Jimmi Lai from the Next.js team to dig into the new Adapters API, what it takes to run Next.js across platforms like Cloudflare and Netlify, and how caching and infrastructure choices affect performance. They also go deep on TurboPack’s internals, why Next.js doesn’t run on Vite, and the evolution of bundling in the framework. SHOW NOTES * 00:00 Welcome to Syntax! * 01:14 Introduction to Next.js and the Adapter Platform * Next.js Across Platforms [https://nextjs.org/blog/nextjs-across-platforms] * 02:23 The Adapters API: Features and Community Needs * 04:46 Building and Testing the Adapters API * 07:37 Infrastructure Requirements for Next.js Apps * 11:38 Caching Strategies and Performance Optimization * 13:29 The Role of Cache Components in Next.js * 17:21 First Steps of Optimizations. * 19:48 Blessed Adapters and Community Contributions * 22:56 Future Directions and Runtime Support * 25:05 Challenges with Different Runtimes and Debugging * 26:45 Webpack vs. TurboPack: The Evolution of Next.js * 29:45 Why Not Run on Vite? * 32:47 Navigating Bundler Challenges * 36:59 Building TurboPack: Lessons Learned * 41:42 Incremental Compilation and Performance * Episode with ByteDance’s Zack Jackson [https://www.youtube.com/watch?v=aFhysuTUoQY] * 43:50 Framework Comparisons and Performance Metrics * 46:42 Exploring Future Directions for TurboPack * 49:44 TurboPack’s Integration and API Development * 52:50 Standardization in Bundler Tools * 56:52 TurboPack’s Adoption and User Experience * 57:49 Sick Picks + Shameless Plugs SICK PICKS * Tim: Acquired Podcast [https://www.acquired.fm/episodes/the-steve-ballmer-interview] * Jimmy: Hydrangea Coffee [https://hydrangea.coffee/] SHAMELESS PLUGS * Jimmy: nextjs-across-platforms [https://nextjs.org/blog/nextjs-across-platforms] HIT US UP ON SOCIALS! Syntax: X [https://twitter.com/syntaxfm] Instagram [https://www.instagram.com/syntax_fm/] Tiktok [https://www.tiktok.com/@syntaxfm] LinkedIn [https://www.linkedin.com/company/96077407/admin/feed/posts/] Threads [https://www.threads.net/@syntax_fm] Wes: X [https://twitter.com/wesbos] Instagram [https://www.instagram.com/wesbos/] Tiktok [https://www.tiktok.com/@wesbos] LinkedIn [https://www.linkedin.com/in/wesbos/] Threads [https://www.threads.net/@wesbos] Scott: X [https://twitter.com/stolinski] Instagram [https://www.instagram.com/stolinski/] Tiktok [https://www.tiktok.com/@stolinski] LinkedIn [https://www.linkedin.com/in/stolinski/] Threads [https://www.threads.net/@stolinski] Randy: X [https://twitter.com/randyrektor] Instagram [https://www.instagram.com/randyrektor/] YouTube [https://www.youtube.com/@randyrektor] Threads [https://www.threads.net/@randyrektor]