Syntax - Tasty Web Development Treats

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]

994: AI Sucks At CSS

In this potluck episode of Syntax, Wes and Scott answer your questions about AI struggles with CSS and design workflows, learning vs relying on AI, debugging web performance, beginner soldering setups, navigating AI-era job interviews, Figma dev mode, modern API choices, and more. SHOW NOTES * 00:00 Welcome to Syntax! * 00:55 Why AI struggles with CSS and design workflows * 10:50 How much AI should you use when learning to code? * 18:41 Debugging performance: tools and team workflows * Ep 585: Fundamentals × What Makes a Website Slow? [https://syntax.fm/show/585/fundamentals-what-makes-a-website-slow] * Ep 874: Fast Apps - Easy Perf Wins [https://syntax.fm/show/874/fast-apps-easy-perf-wins] * Ep 897: Making Your App Feel Faster Than It Really Is [https://syntax.fm/show/897/making-your-app-feel-faster-than-it-really-is] * Ep 972: These Things Make Your App Feel Like Crap on Mobile [https://syntax.fm/show/972/these-things-make-your-app-feel-like-crap-on-mobile] * 23:52 Brought to you by Sentry.io [https://sentry.io/syntax/] * 26:26 Beginner soldering setup and essential tools * 29:54 Preparing for interviews without AI (while jobs require it) * Brendan Falk on AI-native coding interviews [https://x.com/BrendanFalk/status/2033977481724891247] * 35:16 Thoughts on Figma dev mode and design workflows * 39:20 Ice [https://github.com/jordanbaird/Ice] vs Thaw [https://github.com/stonerl/Thaw] menu bar apps * 40:27 Why AI isn’t pushing us toward better APIs * 44:54 Vibe rules, skills, and shipping docs for agents * vibe-rules [https://npmx.dev/package/vibe-rules] * Optimizing Content for Agents [https://cra.mr/optimizing-content-for-agents] * 54:44 Sick Picks + Shameless Plugs SICK PICKS * Scott: Jury Duty [https://www.imdb.com/title/tt22074164/] * Wes: USB Cable Tester [https://amzn.to/40SknUH] SHAMELESS PLUGS * Syntax YouTube Channel [https://www.youtube.com/@syntaxfm] 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]

993: It’s Been A Hell Of Week

Scott and Wes break down a chaotic week in dev news — the Claude Code source leak, a nasty Axios npm supply chain hack, and Railway’s private cache exposure — plus how to keep these nightmare scenarios from hitting your own projects. SHOW NOTES * 00:00 Welcome to Syntax! * 00:55 Claude Code Leaked! * Wes’ X Post [https://x.com/wesbos/status/2038958747200962952?s=20] * Apple Source Code Video [https://www.youtube.com/watch?v=F1RVFlCWPL4&t=351s] * 05:42 Burning through Claude Code token limits. * Reddit Thread [https://old.reddit.com/r/ClaudeAI/comments/1s7mkn3/psa_claude_code_has_two_cache_bugs_that_can/] * 08:57 Axios hacked! * Step Security [https://www.stepsecurity.io/blog/axios-compromised-on-npm-malicious-versions-drop-remote-access-trojan] * pnpm Supply Chain Security [https://pnpm.io/supply-chain-security] * pnpm minimumReleaseAge [https://pnpm.io/settings#minimumreleaseage] * 16:13 Pretext blew up! * Pretext.js Demos [https://pretextjs.dev/pretext-demo] * Wes’ Demo [https://pretextjs.dev/pretext-demo/showcase-face-text] * 27:24 Railway shared private cache. * Railway Incident Report [https://blog.railway.com/p/incident-report-march-30-2026-authenticated-user-data-cached] * 31:54 Sick Picks & Shameless Plugs. SICK PICKS * Scott: Kindle Colorsoft Kids [https://amzn.to/4lYUEnc] * Wes: UGREEN 200W 8-Port GaN USB C Charger Block [https://amzn.to/4dP3jGQ], Wyze Headphones [https://www.wyze.com/products/wyze-headphones] SHAMELESS PLUGS * Scott: Syntax on YouTube [https://www.youtube.com/@syntaxfm] 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]

992: Migrating Legacy Code Just Got Easier

Wes and Scott talk about migrating large codebases with AI — how to plan framework and language moves, establish patterns, handle templating changes, test thoroughly, safely deploy, and more. SHOW NOTES * 00:00 Welcome to Syntax! * 01:46 Why migrate to a new language or framework? * 05:09 How to approach a large code migration * 08:47 Establishing patterns before using AI * 10:35 Moving from pug to JSX * 12:06 Building a detailed migration plan * 15:18 Testing every part of the application * 15:51 Brought to you by Sentry.io [https://sentry.io/syntax/] * 16:58 Deploying and catching issues with Sentry * 19:12 Converting express requests to web standard requests * 19:34 Other codebases that could benefit from AI migrations * 21:36 Sick Picks + Shameless Plugs SICK PICKS * Scott: WisprFlow [https://wisprflow.ai/r?SCOTT2931] * Wes: displayplacer [https://github.com/jakehilborn/displayplacer] SHAMELESS PLUGS * Phases Podcast [https://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]