Syntax - Tasty Web Development Treats

Latest Episodes:

The Svelte + SvelteKit Show Sep 20, 2023

Show notes

In this episode of Syntax, Wes reviews his experience building with Svelte and SvelteKit including templating, data fetching, actions, managing state, request handlers, and more.

Show Notes

00:10 Welcome
01:12 Syntax Brought to you by Sentry
02:11 What is Svelte vs SvelteKit
From React To SvelteKit — Syntax Podcast 390
Hasty Treat - Wes & Scott Look At Svelte 3 — Syntax Podcast 173
Svelte • Cybernetically enhanced web apps
SvelteKit • Web development, streamlined
05:59 Templating in Svelte
18:20 Data fetching in SvelteKit
25:23 Actions
28:58 State
32:41 Binding values
36:18 Hooks
37:25 Request handlers
Special elements • Docs • Svelte
website/src/actions/anchor.ts at v2 · syntaxfm/website
website/src/actions/click_outside.ts at v2 · syntaxfm/website
39:23 Svelte Actions
42:26 Popover API
45:33 Routing
47:22 Layouts
50:08 Styling
57:09 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Scott: Sentry
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
Wes Bos on Bluesky
Scott on Bluesky
Syntax on Bluesky

Hacking the Tonal - Proxying, Intercepting + Debugging Traffic? Sep 18, 2023

Show notes

In this Hasty Treat, Scott and Wes talk about how you can intercept and debug traffic going out from your computer or other internet connected devices in your home, or your garage!

Show Notes

00:25 Welcome
01:55 Syntax Brought to you by Sentry
02:17 Scott’s story of wanting to intercept data
Tonal
06:36 Other examples
08:38 Different types of traffic
14:52 TCP vs UDP
16:07 Why would you want to run a proxy?
24:20 Applications to use
Charles Web Debugging Proxy • HTTP Monitor / HTTP Proxy / HTTPS & SSL Proxy / Reverse Proxy
Proxyman · Native, Modern Web Debugging Proxy · Inspect network traffic from Mac, iOS, Android devices with ease
Intercept, debug & mock HTTP with HTTP Toolkit
mitmproxy - an interactive HTTPS proxy
Wireshark · Go Deep
Little Snitch
Capturing Modes - Fiddler Everywhere
Hacksore on Twitter
How I Hacked my Car :: Programming With Style

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
Wes Bos on Bluesky
Scott on Bluesky
Syntax on Bluesky

Supper Club × How To Get Your First Dev Job With Stuart Bloxham Sep 15, 2023

Show notes

In this supper club episode of Syntax, Wes and Scott talk with Stuart Bloxham about how he learned to code, what his interview process was like when applying for a job, how he found the time to make it all work, and his thoughts on bootcamps and ways to learn.

Show Notes

00:36 Welcome
Stuart Bloxham on GitHub
Stuart Bloxham on LinkedIn
02:09 How did you decide to be a web developer?
08:22 Did you have clarity when your kid was born?
10:20 What was the interview process like?
18:25 What and how did you learn?
20:28 What’s the state of bootcamps in 2023?
22:03 How important have soft skills been?
25:14 How do you know when you’re ready to apply for a job?
35:24 Do you like coding?
37:49 How did you find the time to make it all work?
41:42 How did you deal with burnout?
43:06 Supper Club questions
45:34 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Flowerhorn cichlid

Shameless Plugs

Stuart Bloxham’s Portfolio

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
Wes Bos on Bluesky
Scott on Bluesky
Syntax on Bluesky

Hackweek Projects - Realtime Markdown Editor and a Hardware Recording Button Sep 13, 2023

Show notes

In this episode of Syntax, Wes and Scott review the projects they built during Sentry’s Hackweek: a realtime Markdown multiplayer editor, and a hardware recording button.

Show Notes

00:11 Welcome
00:57 What is a hack week?
01:55 Syntax Brought to you by Sentry
03:42 Scott’s project: a multiplayer editor
Liveblocks | Collaborative experiences in days, not months
PartyKit | Everything is better with friends
BlockNote - Javascript Block-Based text editor | BlockNote
Dev toolkit for building collaborative editors – Tiptap
microsoft/monaco-editor: A browser based code editor
syntaxfm/hackweek-md-multiplayer-editor: Sentry.io Hackweek Submisison - A multiplayer editor for .md files that comits directly to GitHub
Convex | The fullstack TypeScript development platform
The Everything App
13:57 Multiplayer is so much easier
19:56 Wes’ project: A recording button
Oracle VM VirtualBox
Run Windows on Mac – Parallels Desktop 19 Virtual Machine for Mac
Karabiner-Elements
folivora.ai - Great Tools for your Mac!
Home Assistant
The World’s Leading 2D and 3D Platform | Unity Pro Free Trial
SendCutSend | Online Laser Cutting and Waterjet Cutting
blender.org - Home of the Blender project - Free and Open 3D Creation Software
42:31 Learning to skateboard
43:59 F1 documentary follow up
45:30 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Scott: Syntax on TikTok
Wes: @WesBos on X.com

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
Wes Bos on Bluesky
Scott on Bluesky
Syntax on Bluesky

CSS Nesting is Here! Sep 11, 2023

Show notes

In this Hasty Treat, Scott and Wes talk about the arrival of CSS nesting. What is CSS nesting? How does CSS nesting work? And does it work in all browsers?

Show Notes

00:24 Welcome
02:31 What’s up with CSS nesting?
"CSS Nesting just landed in Firefox 117 which puts it at 100% browser support! You can start using it today — here are 11 examples on how it works 👇
04:10 How does CSS nesting work?
09:23 What the ampersand does in nesting
21:05 It works with media queries
25:29 How does it work on all the browsers?
29:32 Lightning CSS
Lightning CSS

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
Wes Bos on Bluesky
Scott on Bluesky
Syntax on Bluesky

Supper Club × What's New With Astro with Fred Schott Sep 08, 2023

Show notes

In this supper club episode of Syntax, Wes and Scott talk with Fred Schott all things Astro with the announcement of Astro version 3, marketing open source projects, Starlight docs, keeping up to date, and making major version numbers less scary.

Show Notes

00:35 Welcome 3x guest Fred Schott!
Supper Club × Astro 2.0 with Fred Schott — Syntax Podcast 580
Pika Pkg — Syntax Podcast 212
05:11 What is Astro?
07:37 What’s new in Astro v3?
Astro 3.0 | Astro
14:18 Behind the scenes improvements in Astro v3
18:17 HMR Enhancements
20:10 What’s the hosting partner deal with Vercel?
Vercel: Our Official Hosting Partner | Astro
28:04 Docs template Starlight announcement
Starlight 🌟 Build documentation sites with Astro
31:28 How often do you release updates?
33:47 Marketing open source
Time to suit up | Astro Shop
SvelteKit • Web development, streamlined
36:18 Making major version numbers less scary
40:04 Does Astro use Vite?
Vite | Next Generation Frontend Tooling
42:01 Is it different working on a framework than a tool like Snowpack?
43:53 Thoughts on cloud text editors
Project IDX
47:02 How do you keep up to date?
48:43 Do you write in TypeScript?
51:31 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Factorio

Shameless Plugs

Astro (@astrodotbuild)

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
Wes Bos on Bluesky
Scott on Bluesky
Syntax on Bluesky

Potluck × Soft Skills × Release Notes × Headless CMS × Organizing Code × Inet CSS? Sep 06, 2023

Show notes

In this potluck episode of Syntax, Wes and Scott answer your questions about learning soft skills, using release notes, headless CMS, dealing with web components and scripts, what inet is, better ways to use ChatGPT, and more!

Show Notes

00:11 Welcome
01:42 Scott’s butt pincher
Affenpinscher
06:08 You keep missing my favorite thing about Civet
Civet
07:31 What soft skills can I learn to help me in my career?
HTML, CSS and JS in an ADD, OCD, Bi-Polar, Dyslexic and Autistic World | CSS-Tricks - CSS-Tricks
12:42 Have you thought about release notes or a what’s new section?
Conventional Commits
How to generate Changelog using Conventional Commits | by Riccardo Canella | Jobtome Engineering | Medium
15:57 Can you explain headless CMS and what the use-cases/implementations are?
19:24 Any suggestions for dealing with web components and the client’s tracking scripts
How to Read Flamegraphs 🔥
Chromium F12 Profiler: The Main Thread Pane
Agent Creation has a large CPU time · Issue #915 · bluesky-social/atproto
25:27 Why do we need .d.ts files in TypeScript?
30:15 What is inset in CSS?
inset - CSS: Cascading Style Sheets | MDN
35:06 Is there a way to use AI/chat gpt to more quickly and easily understand technical documentation?
Anthropic \ Home
Getting Started 🚀 Astro Documentation
ChatGPT Plugin - AskTheCode | GPTStore.ai
ChatGPT Plugin - Scraper | GPTStore.ai
Overview | TanStack Query Docs
Custom instructions for ChatGPT
40:59 why is the following true: the string “undefined”.includes(undefined)?
43:27 How do you organize your code directories?
48:50 Is there any good reason in 2023 why we should still be loading JS files with all our script tags at the bottom of the body element?
54:32 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Scott: Surge power bar
Wes: Little Hippo Alarm

Shameless Plugs

Scott: Sentry
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
Wes Bos on Bluesky
Scott on Bluesky
Syntax on Bluesky

JavaScript Closures & Scope Explained Sep 04, 2023

Show notes

In this episode of Syntax, Wes and Scott talk about concerts, getting tired because of being old, landscaping, spinning on your head, gym updates, awful search engines and awful ethics for YouTubers, rewiring old engines, and what’s being streamed.

Show Notes

00:10 Welcome
01:49 Being tired
The Strokes & Weyes Blood Tickets | 14th August | Red Rocks Amphitheatre
05:08 Landscaping
10:53 Gym updates
23:01 House projects
28:39 Why are search engines so awful these days?
39:20 Internet routing
45:17 Linus Tech Tips ethics and issues
48:29 Rewiring a kid’s ATV
50:49 What we’re watching
The Stronger By Science Podcast
Watch Full Swing | Netflix Official Site
Break Point | Official Trailer | Netflix
Watch Formula 1: Drive to Survive | Netflix Official Site
58:37 SIIIIICK ××× PIIIICKS ×××

××× SIIIIICK ××× PIIIICKS ×××

Scott: The First Cat in Space Ate Pizza
Wes: Steam cleaner

Shameless Plugs

Scott: Sentry
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
Wes Bos on Bluesky
Scott on Bluesky
Syntax on Bluesky

Supper Club × Shipping ESM with Mark Erikson Sep 01, 2023

Show notes

In this supper club episode of Syntax, Wes and Scott talk with Mark Erikson about his work in helping others understand shipping ESM, how to deal with permutations, whether default imports are helpful, whether TypeScript has made it easier, and what Mark’s tool stack is for building.

Show Notes