Wes and Scott talk about the new If statements in CSS, breaking down how they work, why they matter, and when to use them. They explore use cases, syntax quirks, and how this feature pushes CSS closer to true conditional logic—no JavaScript required.
Show Notes
00:00 Welcome to Syntax!
01:30 Brought to you by Sentry.io
02:37 CSS If statements in action
CSS if() functions & reading-flow (in Chrome 137)
CodePen - If with style without attr
09:08 Advanced examples and the attribute function
CodePen - CSS If() Themes
13:43 Mixing If statements with media queries
CodePen - CSS If() Mixed Logic
16:54 Can’t this be done with classes?
18:16 The future of CSS: declarative APIs
CSS Battle LIVE! in Denver | Switch Edition
21:10 Is CSS now a programming language?
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
--------
24:38
910: If Statements in CSS?
Wes and Scott talk about the new If statements in CSS, breaking down how they work, why they matter, and when to use them. They explore use cases, syntax quirks, and how this feature pushes CSS closer to true conditional logic—no JavaScript required. Show Notes 00:00 Welcome to Syntax! 01:30 Brought to you by Sentry.io 02:37 CSS If statements in action CSS if() functions & reading-flow (in Chrome 137) CodePen - If with style without attr 09:08 Advanced examples and the attribute function CodePen - CSS If() Themes 13:43 Mixing If statements with media queries CodePen - CSS If() Mixed Logic 16:54 Can’t this be done with classes? 18:16 The future of CSS: declarative APIs CSS Battle LIVE! in Denver | Switch Edition 21:10 Is CSS now a programming language? 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
--------
24:39
909: Handling and Throwing Errors
Scott and Wes break down how to properly throw, catch, and log errors in JavaScript and TypeScript. They cover client-side and server-side strategies, using tools like Sentry, and how to handle errors without taking down your whole app. Show Notes 00:00 Welcome to Syntax! 01:19 Error terminology. 01:42 Thrown and catching. 03:01 What’s in an error. 04:09 Name and message. 04:42 Stack. 07:12 Node system errors. 07:34 Messages: strings, objects, or custom errors. 08:19 Throwing errors. 12:01 Promise errors. 12:10 Try catch block, .catch(). 14:13 Using awaited-to. 15:10 Finally. 16:29 promise.try() 17:14 Re-throwing errors. Error Cause 18:12 Client-side errors. 18:15 Catching at different levels. 18:51 Displaying errors. 21:59 Transforming server errors into client errors. 24:12 Error boundaries. 25:26 Server errors. 26:10 JSON API. 27:41 HTTP response codes. 30:09 Logging and solving errors. 31:16 Proudly supported by Sentry.io. Logging within Sentry 36:16 TypeScript and errors. 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
--------
39:07
909: Handling and Throwing Errors
We break down how to properly throw, catch, and log errors in JavaScript and TypeScript. They cover client-side and server-side strategies, using tools like Sentry, and how to handle errors without taking down your whole app.
Show Notes
00:00 Welcome to Syntax!
01:19 Error terminology.
01:42 Thrown and catching.
03:01 What’s in an error.
04:09 Name and message.
04:42 Stack.
07:12 Node system errors.
07:34 Messages: strings, objects, or custom errors.
08:19 Throwing errors.
12:01 Promise errors.
12:10 Try catch block, .catch().
14:13 Using awaited-to.
15:10 Finally.
16:29 promise.try()
17:14 Re-throwing errors.
Error Cause
18:12 Client-side errors.
18:15 Catching at different levels.
18:51 Displaying errors.
21:59 Transforming server errors into client errors.
24:12 Error boundaries.
25:26 Server errors.
26:10 JSON API.
27:41 HTTP response codes.
30:09 Logging and solving errors.
31:16 Proudly supported by Sentry.io.
Logging within Sentry
36:16 TypeScript and errors.
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
--------
39:06
908: Storybook Has Evolved w/ Jeppe Reinhold
Wes and Scott talk with Jeppe Reinhold about Storybook 9’s powerful new features—including drastically reduced bloat, seamless Vite integration, and next-level component testing. They dive into visual regression testing, accessibility, performance, and best practices for writing robust, isolated UI components developers can actually enjoy testing and documenting.
Show Notes 00:00 Welcome to Syntax!
01:40 What is Storybook?
03:48 How Storybook makes component design easier
04:41 Vite integration and compatibility with other tools Vite
webpack
RSpack
06:50 Storybook’s significantly smaller bundle size e18e
polka
13:31 Upgrading to Storybook 9
17:34 Testing components with Storybook Vitest
19:51 How do you write a component “story”?
24:29 Brought to you by Sentry.io
24:54 How visual testing works
28:38 How Storybook makes money
29:33 Best practices for component design
32:24 Mocking and testing strategies
34:49 Accessibility testing
40:51 Add-ons and future features
44:43 Storybook’s documentation
46:33 Sick Picks + Shameless plugs
Sick Picks Jeppe: JBL Boombox 3 Wi-Fi
Shameless Plugs Jeppe: chromatic
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
Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.