812: CSS 4, 5, and 6! With Google’s Una and Adam
In this episode of Syntax, Wes and Scott talk with Una Kravetz and Adam Argyle from Google Chrome about the evolution of CSS, new features, and the push toward more advanced UI capabilities on the web. They discuss the introduction of CSS versioning, exciting new properties like text-box-trim, state queries, and scroll state functionalities, select, and more! Show Notes 00:00 - Welcome to Syntax!. 01:43 - Brought to you by Sentry.io. 02:19 - The evolution of CSS. 04:07 - CSS versioning and spec levels. CSS RFC. 17:49 - Use-cases for allow-discrete. 20:34 - State queries. 24:19 - Where does the baseline data come from? 25:17 - Will the RFC become official? The latest in Web UI (Google I/O ‘24). 27:33 - New features Una is excited about. 29:44 - Select. https://open-ui.org/components/customizableselect. https://codepen.io/argyleink/pen/YzoEPOG. 38:31 - New features Adam is excited about. 39:24 - text-box-trim. 40:59 - State queries. 54:56 - Sick Picks + Shameless Plugs. Sick Picks Una: Logitech MX Master 3 Adam: Teenage Engineering K.O. II Shameless Plugs Una: Una.im Adam: The CSS Podcast Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads
23 Aug 20241h 2min
811: NodeJS Evolves
In this episode of Syntax, Wes and Scott talk about the latest features in Node.js, including native support for TypeScript, .env parsing, a built-in test runner, watch mode, SQLite integration, glob support, and top-level await. They also discuss some wishlist items, and experimental features like WebSocket support and the require module. Show Notes 00:00 Welcome to Syntax! 01:13 Brought to you by Sentry.io. 01:37 Node.js new features. Deno. Bun. 02:51 TypeScript. tsx. swc/wasm-typescript. 10:03 SQLite v22.5. 14:35 .env support. 16:24 Test runner. Jest. 19:42 Watch Mode. nodemon. 21:22 Glob support. 22:48 Top-Level Await. Top-level await is a footgun. 26:40 Experimental require module. Default ESM Detection. Web request standards. HonoJS. 29:39 Experimental WebSocket support. 30:13 Async local storage. 31:43 Single file executables. 32:46 Wishlist. 32:54 Hot reload. 34:20 Window shim. globalThis. 35:30 Better server. 35:56 Better terminal integration. NIM. styleText. chalk. warp. 41:36 Twitter responses. Coolify. n. 46:54 Sick Picks + Shameless Plugs. Sick Picks Scott: Cascadia Wes: Roborock Qrevo Shameless Plugs Scott: YouTube Channel Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads
21 Aug 202455min
810: Effortless Light and Dark Mode × Theme Styling
In this episode of Syntax, Wes and Scott talk about the latest CSS theming properties and techniques for better controlling light and dark modes, as well as creating comprehensive color systems for applications and websites. Make sure to check out the video version of this episode for practical code examples, and explanations of light/dark function, CSS variables, meta tags for theme colors, accent color, color mix, and upcoming features like style queries and color contrast. Show Notes 00:00 Welcome to Syntax! 01:36 Brought to you by Sentry.io. 03:45 theme-color. 10:12 color-scheme. 15:14 light-dark(). 17:44 How to force light or dark mode. 23:03 Live debugging box-shadow. 28:05 color-mix(). 29:53 accent-color. 31:27 Relative color syntax. 35:49 Style queries and color-contrast(). Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads
19 Aug 202437min
809: How To Stay Up To Date with Daily.dev’s Francesco Ciulla
In this episode of Syntax, Scott and Wes talk with Daily.dev’s Francesco Ciulla about the platform's history, community features, and significant growth. They dive into the core ideas behind daily.dev, including its personalized feed for developers, new features like squads, community contributions, and tech stack. Francesco also shares his passion for Rust, and highlights the importance of content creation in the ever-evolving tech landscape. Show Notes 00:00 Welcome to Syntax! 00:36 Brought to you by Sentry.io 01:24 Overview and features of daily.dev 07:05 daily.dev's origin story 10:06 How Product Hunt fueled initial growth 12:21 Monetization and business model 13:53 Content and user experience Syntax Squad 22:21 Written content vs video content 24:29 Tech stack Terraform Pulumi React Vercel Fastify Postgres Go 25:37 Building a positive community 30:32 Moderation and tagging 35:03 Francesco's favorite place to publish right now 36:56 Quadrupling down on Rust Rust 39:38 Francesco's favorite Rust framework Actix 41:18 Sick Picks & Shameless Plugs Sick Picks Francesco: daily. dev Shameless Plugs Francesco: Francesco's YouTube Channel Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads
16 Aug 202445min
808: The Future of JavaScript Frameworks × Building Auth × DB Design Tips, and more!
In this potluck episode of Syntax, Wes and Scott answer your questions about the future of JavaScript frameworks, building custom authentication systems, limiting API access, using Caddy server proxy for local development, component props in JSX, structuring a relational database, and more! Show Notes 00:00 - Welcome to Syntax! 01:48 - Brought to you by Sentry.io 04:37 - The future of JavaScript frameworks 09:09 - How to use Caddy for local development SvelteKit Vite 14:27 - When to use an API Strapi 17:38 - Where does Scott get his amazing t-shirts? Sentry.shop Syntax Snack Pack 21:33 - Best screwdriver for kids toys PicQuic Sixpac Plus LTT Screwdriver 24:31 - Strategies for database design MongoDB Prisma 30:21 - Do we need frameworks? 796 - Do We Need JS Frameworks × Are You Over-Engineering? × Webview vs Native Frontend Masters 32:19 - Best tech stack for building a basic login system 336 - How To Build Your Own Auth 37:56 - Syntax video episodes 40:25 - Component props in JSX 45:26 - Sick Picks & Shameless Plugs Sick Picks Scott: Loop Quiet Ear Plugs Wes: Gecko’s Toes Water Hose Rack Shameless Plugs Scott: Syntax YouTube Channel Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads
14 Aug 202452min
807: CSS Components: Tailwind, Panda, Scoped, Modules, Classes, Variables, CSS-in-JS and Sprinkles!
In this episode of Syntax, Wes and Scott talk about CSS components, including class-based components, CSS modules, scoped CSS, utility CSS, and CSS-in-JS strategies. They share their thoughts, what differentiates these approaches, and why you may (or may not) want to use them. Show Notes 00:00 - Welcome to Syntax! 01:30 - Brought to you by Sentry.io. 02:11 - What makes a good CSS component system? 07:54 - Component vs part of a component 13:26 - CSS Modules 15:56 - Scoped CSS @scope - (82% support!) ff behind flag https://developer.mozilla.org/en-US/docs/Web/CSS/@scope 21:07 - How is Panda different from style components? Panda StyleX 00:00 - Utility CSS TailwindCSS Uno 31:08 - Utility Sprinkles 34:13 - CSS variables open-props.style Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads
12 Aug 202437min
806: The King of Drag and Drop: Alex Reardon
Scott and Wes talk with Alex Reardon from Atlassian about developing drag-and-drop libraries, specifically the challenges with creating efficient and accessible drag-and-drop functionalities for the web. They also explore what it takes to build and implement a system that works seamlessly across various frameworks. Show Notes 00:00 Welcome to Syntax! 01:18 Brought to you by Sentry.io. 01:51 What Alex does at Atlassian react-beautiful-dnd Pragmatic drag and drop 04:38 What makes drag and drop tricky. 06:38 Use-cases. 10:54 What security is in place? 12:30 How to make it feel native. 19:20 Is the drag and drop spec ongoing? 20:03 How do you build this headless? 21:33 How does drag and drop work with frameworks? 23:48 Making drag and drop feel the same across mobile and desktop. 26:09 What’s the key to really good drag performance? 29:58 How do you make drag and drop accessible? 34:57 Pragmatic drag and drop code vs application code. Shoelace shadcn 40:00 How does testing work? Playwright Cypress 43:15 Internal adoption at Atlassian. 44:27 Working on high-impact projects. 49:15 Versioning and internal adoption at Atlassian. 51:29 Sick Picks + Shameless Plugs. Sick Picks Alex: Coffee, James Hoffmann YouTube Channel. Shameless Plugs Alex: Dom Events. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads
9 Aug 202455min
805: We React to State of React Survey
Scott and Wes serve up their reaction to the “State of React 2023” survey results, discussing the main API pain points like forwardRef and memo. They also explore the latest on state management, hooks pain points, and exciting new libraries in the React ecosystem. Show Notes 00:00 Welcome to Syntax! 01:41 Brought to you by Sentry.io. 02:28 The State of React 2023. 03:11 The Main API Painpoints. 04:31 forwardRef. 05:27 memo. 06:39 Context API. 07:18 StrictMode. 08:45 Double rendering. 09:36 State management. 11:58 Hooks Pain Points. 12:11 useEffect. 12:33 Dependency arrays. 13:11 New API Pain Points. 13:19 React Server Components. 14:40 Taint API. 15:19 Libraries. 17:02 Jotai. 17:45 Apollo Client. 19:05 Redux. 20:57 Redwood. 21:26 React Aria. 21:55 Astro. 22:04 The most negative. 23:35 Component Libraries. 25:50 Other Component Libraries. 25:53 Mantine. 27:47 Details element. Tolin.ski/demos. 28:59 Honorable mentions. 29:07 Animations. 29:28 Data Visualization. 31:26 CSS Tools and Libraries. 33:14 Styled Components. 34:16 Meta Frameworks. 38:50 Hosting. 40:08 Other Services. 40:45 Back-end language trivia. 43:00 State management. 43:40 Data Loading. 44:08 Other Tools. 44:09 Testing Libraries. 44:45 React Renderers. 47:58 Podcasts, thank you! 48:14 Sick Picks & Shameless Plugs. Sick Picks Scott: Thermacell. Wes: Nerf Guns Shameless Plugs Wes: Syntax.fm. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads
7 Aug 202456min
