Syntax - Tasty Web Development Treats

In this Hasty Treat, Scott and Wes talk about what you can do to better organize your config files. Show Notes 00:21 Welcome 02:20 Electric car ski tripping 05:01 Why config files? 07:47 Custom Vite config files Wes’ Vite config define: { __VERSION__: JSON.stringify(process.env.npm_package_version), }, 11:16 Node has failed us 13:30 Cosmic config Cosmiconfig 16:46 File nesting 21:01 Standardize on a format Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

13 Feb 202324min

In this supper club episode of Syntax, Wes and Scott talk with Miško Hevery about why developers should check out Qwik, the benefits of lazy loading, sharing state between components, and other Builder.io projects like Partytown and Mitosis. Show Notes 00:35 Welcome 01:19 Guest intro Miško Hevery @MHevery 01:58 What is Resumability? 05:06 What is Qwik? Qwik Qwik City 07:03 Why would you want to make a component resumable? 12:08 Qwik code can be lazy loaded 15:28 How is server side rendering handled? 18:12 How does Vite help? 22:40 A bit more about hydration 31:03 How does the server collection information? 32:11 How do you share state between components? 34:45 How is data fetching handled? 37:47 Why are you using JSX? 41:53 Dealing with components in other frameworks Mitosis 49:21 What is Partytown? Partytown 54:30 Supper Club questions ××× SIIIIICK ××× PIIIICKS ××× Thinking Fast and Slow Shameless Plugs Builder.io Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

10 Feb 20231h 7min

In this episode of Syntax, Wes and Scott talk about their respective processes for converting JavaScript to TypeScript in their projects, why you might want to, and tooling for moving to TypeScript. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:10 Welcome 00:36 Sponsor: Sentry 02:23 Electrical updates 08:16 Moving to TypeScript 09:34 What are you doing with GraphQL? GraphQL Codegen 11:35 Why move to TypeScript? 12:00 Refactoring is easier 14:58 Better DX 18:42 Adding a tsconfig.json file 22:43 Figure out your tooling 23:50 Type Checker 25:13 MongoDB to TypScript Generator 26:44 Eslint-Typescript 28:03 Deprank Deprank 29:18 Refactor and rename to .ts 32:40 Typing your code 43:04 Utilities and unions 46:11 Where do you put your types? 49:29 Typing Dependencies Definitely Typed Raycast Search npm 54:26 Global types 01:08 Now what? 03:58 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Elegrp USB C Walloutlet Wes: Barrina Shop Lights Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Tutorials Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

8 Feb 20231h 12min

In this Hasty Treat, Scott and Wes talk through quick tips to improve performance of your website, and the tools available to help diagnose and fix perf issues. Show Notes 00:25 Welcome 00:50 Polish And Perf explained 02:05 What kinds of tools are available to improve performance Lighthouse in Chrome PageSpeed 09:32 Identify route caching and http caching 14:25 Partytown Partytown 15:19 Unnecessary network calls Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

6 Feb 202321min

In this supper club episode of Syntax, Wes and Scott talk with Tim McNamara, author of Rust in Action about what Rust is, how to get started learning Rust, and ideas of good projects to begin learning Rust with. Show Notes 00:37 Welcome 01:26 Guest introduction Rust in Action Tim on Twitter Tim on YouTube 03:51 What was it like to write a book on Rust? 07:52 What drew you to Rust? 13:01 The approachability of Rust 21:41 What’s a good introductory project with Rust? 25:15 Why would someone learn Rust? It’s time to try WASM 40:23 What is a crate and cargo in Rust? 44:17 Running Rust in various places 50:53 Should the average web developer try Rust? 52:13 Supper club questions 54:17 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× kokako Shameless Plugs Tim McNamara - How to learn Rust Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

3 Feb 202358min

In this episode of Syntax, Wes and Scott talk through what ESM is, and why you want to move your projects to ESM. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 00:10 Welcome 00:51 Sponsor: Sentry 02:32 Our experiences with ESM 06:54 Why ESM? 11:42 Top Level Await 16:16 Assert Import type eventually Scott’s Vite chunk import map 21:00 Converting code to ESM 27:22 .JS on end of files 32:12 Imports and exports 37:52 TypeScript 40:24 Bundling / Transpiling Vite Node 43:42 Dependencies Sindre thread 45:16 Publishing 53:25 SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Scott: Egg dispenser Wes: Pure Cinema Podcast Shameless Plugs Scott: LevelUp Tutorials Wes: Wes Bos Tutorials Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

1 Feb 20231h 1min

In this Hasty Treat, Scott and Wes talk through their wishlist for CSS in 2023 including mixins, range selectors, fit text, robust color functions, overflown, and more. Show Notes 00:26 Welcome 01:09 Snow skate update 03:01 Mixins 05:06 Range selector 09:36 :first-of-column :last-of:column / row Ability to target items in nth-row of autofilled, implicit grid 11:43 Fit Text 13:34 Overflow-x, overflow-y control 15:36 Full support for CSS with Inline Styles 16:24 nth-of-found() 18:18 Robust Color functions 22:19 resize: both but no overflow or scroll 23:39 Animate height auto 23:57 Full attr() support 25:07 CSS References CSS References 26:59 overflown + :stuck 28:56 Multi-line selectors 30:35 Container Queries - select the container itself 32:04 :is-scrolled - select a container when it’s scrolled Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

30 Jan 202335min

In this supper club episode of Syntax, Wes and Scott talk with Caleb Porzio about Livewire, Alpine.js, what is it with PHP devs making cool stuff, TypeScript thoughts, and more. Show Notes 00:36 Welcome 01:05 Buffalo and Canada History of Target in Canada 06:23 Who is Caleb Porzio? @CalebPorzio on Twitter 09:26 What is Livewire? Livewire Alpine.js HotWired 12:58 Are these MVC frameworks? 18:11 What is the process behind the scenes? 20:36 How does Hotwire handle rendering? 25:38 What is Alpine.js? 33:19 Why are PHP devs making interesting things? Laravel Tailwind 40:32 What is a nextTick in JavaScript? Microtask Guide 46:20 TypeScript thoughts 48:05 Server side rendering? Morph 49:25 Supper Club questions Ergodox Keyboards Glove 80 Keyboards Natty Theme MonoLisa 59:40 ××× SIIIIICK ××× PIIIICKS ××× ××× SIIIIICK ××× PIIIICKS ××× Ugmonk Analog Shameless Plugs Make VS Code Awesome Alpine.js Livewire Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

27 Jan 20231h 5min