Syntax - Tasty Web Development Treats

Latest Episodes:

Logging Feb 20, 2023

Show notes

In this Hasty Treat, Scott and Wes talk about the reasons why you should log errors, how it’s not just for debugging, where to save logs, and apps and packages to help with logging.

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:25 Welcome
01:37 Sponsor: Sentry
02:16 What is logging? Why log?
04:59 Logging isn’t just for debugging
08:22 What do we log?
13:34 What not to log
14:58 Development, staging, and production
17:36 Logging bots
19:33 Where to put logs
20:59 How to log
Log Tail
Paper Trail
Sematext Logs
DataDog
Winston
Pino

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

Supper Club × Solid.js with Ryan Carniato Feb 17, 2023

Show notes

In this supper club episode of Syntax, Wes and Scott talk with Ryan Carniato about Solid.JS, SolidStart, how web components work with Solid, why he chose JSX, and what the future of Solid is.

Show Notes

00:37 Welcome
01:38 Who is Ryan Carniato?
@RyanCarniato on Twitter
Ryan on Dev.to
Solid.JS
02:37 Why did you build Solid?
Knockout.JS
Marko JS
09:15 What is Solid?
12:55 What does it mean to compile to vanilla JavaScript?
SolidStart
Tanstack Query
19:39 What are observables and signals?
27:17 How are web components used inside of Solid?
29:38 Why aren’t we using web components more?
32:37 Why would someone pick SolidStart vs Solid?
39:07 Why did you choose JSX?
44:45 How did you build live code examples into documentation?
SolidJS Docs
Solid-Movies.app
47:19 What is Solid.JS built on?
53:36 What is the future of Solid?
00:39 Supper club questions
02:57 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Alice in Borderland

Shameless Plugs

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

Potluck × Native Web Components × JS Class Mixins × Application Secrets Feb 15, 2023

Show notes

In this potluck episode, Scott and Wes talk home electicity, and then answer your questions about native web components, JS class mixins, JavaScript for marketers, managing application secrets, and more!

Sentry - Sponsor

Show Notes

00:10 Welcome
01:09 Sponsor: Sentry
02:18 Electrical house update
Klien Wirestrippers
07:45 Custom Syntax podcast browser
Custom Syntax browser
09:29 When using browser native web components (i.e. extends HTMLElement), should the whole application be wrapped in a component tree similar to how React apps do it?
Deno
Using Web Components with Next or any SSR Framework
16:12 Should I avoid JS/TS class mixins?
21:07 Is it acceptable to have any string value as a value for a CSS custom property?
26:48 Should agencies consider building marketing sites with JS frameworks or is Wordpress still the best option here?
33:56 What are the main things to think about when laying the foundations for an app or project that will hopefully grow into something big?
41:24 Will Javascript skills give me an edge over other local digital marketers?
WordPress
Ghost
46:00 What tool, if any, do you use for publishing packages?
50:19 Do you have any suggestions on how I can find time to code more?
Bit
54:17 how do you both manage your application secrets (API keys, database credentials etc) when deploying to Digital Ocean or Linode?
58:52 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Scott: Physical 100
Wes: Leviton D23LP-2RW Decora Smart Wi-Fi Mini Plug-In Dimmer

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

Save us from Config File Hell Feb 13, 2023

Show notes

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

Supper Club × Qwik framework from Miško Hevery, the Creator of Angular Feb 10, 2023

Show notes

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

Converting JS to TypeScript Feb 08, 2023

Show notes

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

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

Polish and Perf Feb 06, 2023

Show notes

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

Supper Club × Rust In Action with Tim McNamara Feb 03, 2023

Show notes

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

570 Feb 01, 2023

Show notes

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

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

CSS Wishlist Jan 30, 2023

Show notes

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