In this episode of Syntax, Wes and Scott talk about HTML fundamentals — from basic structure and semantics to practical tips for better accessibility and SEO. They also discuss the difference between block and inline elements, form functionalities, HTML5 elements like dialog and canvas, and more.

• 00:00 Welcome to Syntax!
• 02:33 Brought to you by Sentry.io
• 03:25 Why HTML is important
• 06:52 Semantic vs non-semantic
• 07:58 The basic structure of an HTML page
  • HTML elements reference
  • The Main element
• 08:45 Doctype
• 15:24 Nav
• 18:47 Section
• 20:41 Aside
• 22:09 Article
• 22:54 Span
• 27:18 Why use a span when you have a div and a paragraph tag?
• 29:29 Figure and Caption
• 31:16 Fieldset
• 31:53 UL vs OL
• 32:44 DFN
  • The Definition element
• 34:16 Form
• 36:56 Button vs Anchor
• 38:22 Headings
  • 674 - A11y Treats - Heading Design
• 40:21 Output
  • The Output element
• 41:46 Dialog
• 42:04 Tables
• 44:03 Media
  • media-chrome
• 45:06 Canvas
  • https://githubuniverse.com/
  • https://maximeheckel.com/
• 46:07 On graphics programming
• 47:38 Search
  • 354 - The Surprisingly Exciting World of HTML Elements
• 48:27 Sick Picks + Shameless Plugs

• Scott: 2Pack Traditional Natural Bamboo Wok Brushes
• Wes: Logitech MX Master 3S

• Syntax YouTube Channel
• The Easiest Way to Infinite Scroll with React | Full Example

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

In this episode of Syntax, Wes and Scott talk about CSS’ new scroll-driven animations, its implementation, uses, and potential pitfalls. They also discuss animation-timeline and animation-range, and how they can be utilized to control animations based on scroll positions.

• 00:00 Welcome to Syntax!
• 00:46 Brought to you by Sentry.io.
• 01:35 Scroll-driven animations.
  • Syntax 695: 5 New CSS Features You Should Know
  • Scroll-driven animations demos and tools.
• 04:13 @keyframes.
• 05:22 animation-timeline.
• 11:35 animation-range.
• 08:49 View-based timelines.
• 17:45 Neat uses: Dave Rupert on styling :stuck.

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

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!

• 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.

• Una: Logitech MX Master 3
• Adam: Teenage Engineering K.O. II

• Una: Una.im
• Adam: The CSS Podcast

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

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.

• 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.

• Scott: Cascadia
• Wes: Roborock Qrevo

• Scott: YouTube Channel

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

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.

• 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().

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

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.

• 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

• Francesco: daily. dev

• Francesco: Francesco's YouTube Channel

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

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!

• 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

• Scott: Loop Quiet Ear Plugs
• Wes: Gecko’s Toes Water Hose Rack

• Scott: Syntax YouTube Channel

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

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.

• 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

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

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.

• 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.

• Alex: Coffee, James Hoffmann YouTube Channel.

• Alex: Dom Events.

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

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.

• 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.

• Scott: Thermacell.
• Wes: Nerf Guns

• Wes: Syntax.fm.

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads