…

Syntax - Tasty Web Development Treats

…

Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

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.

#673

Tauri Vs Electron - Desktop Apps with Web Tech

In this Hasty Treat, Scott and Wes talk about the building desktop apps using Electron vs Tauri. <a id= "Show_Notes_2"></a>Show Notes --- [00:26] (#t=00:26) Welcome --- [00:55] (#t=00:55) Syntax Brought to you by Sentry --- [01:15] (#t=01:15) Check my hair app --- [Tauri Apps] (https://tauri.app/) --- [Electron] (https://www.electronjs.org/) --- <a href= "https://apps.apple.com/us/app/hand-mirror/id1502839586?mt=12">Hand Mirror on the Mac App Store</a> --- <a href= "https://github.com/SoFriendly/2fhey">SoFriendly/2fhey</a> --- [04:19] (#t=04:19) What is Tauri? --- [08:23] (#t=08:23) The experience of writing apps in Electron vs Tauri --- [16:17] (#t=16:17) Electron Forge --- [20:02] (#t=20:02) Building the same app in Electron vs Tauri <a id="Tweet_us_your_tasty_treats_16"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets --- [Wes Bos on Bluesky] (https://bsky.app/profile/wesbos.com) --- [Scott on Bluesky] (https://bsky.app/profile/tolin.ski) --- [Syntax on Bluesky] (https://bsky.app/profile/syntax.fm) ... Read more

Yesterday

28 MINS

28:46

Yesterday

#672

Anxiety and Uncertainty with Dr. Courtney Tolinski

In this supper club episode of Syntax, Wes and Scott talk with Dr. Courtney Tolinski about signs and symptoms of anxiety, what the long term effects are of anxiety, how to know if you need help, and what kinds of things you can do to deal with anxiety and uncertainty. <a id= "Show_Notes_2"></a>Show Notes --- [00:35] (#t=00:35) Welcome --- [01:11] (#t=01:11) Syntax Brought to you by Sentry --- [02:23] (#t=02:23) Introducing Dr. Courtney Tolinski --- <a href= "https://syntax.fm/show/236/mental-health-and-dev-ft-dr-courtney-tolinski-depression-anxiety-imposter-syndrome-focus-motivation-burnout"> Mental Health and Dev ft Dr. Courtney Tolinski - Depression, Anxiety, Imposter Syndrome, Focus, Motivation, Burnout — Syntax Podcast 236</a> --- <a href= "https://syntax.fm/show/532/supper-club-coding-with-adhd-with-dr-courtney-tolinski"> Supper Club × Coding with ADHD with Dr. Courtney Tolinski — Syntax Podcast 532</a> --- [04:13] (#t=04:13) What is anxiety? --- [06:44] (#t=06:44) Is there a difference between anxiety and just not wanting to do something? --- [08:58] (#t=08:58) What kinds of physical symptoms are there? --- [15:43] (#t=15:43) What are the longer term effects of anxiety? --- [17:34] (#t=17:34) How do you know if you need help with anxiety? --- [21:05] (#t=21:05) What can I do to solve my anxiety? --- [Psychology Today Canada: Health, Help, Happiness + Find a Therapist] (https://www.psychologytoday.com/ca) --- [Obsidian - Sharpen your thinking] (https://obsidian.md/) --- [How We Feel] (https://howwefeel.org/) --- <a href= "https://www.macrumors.com/2023/09/13/ios-17-features-coming-later-this-year/"> Apple Reveals More iOS 17 Features Not Available Until Later This Year - MacRumors</a> --- [Meditation and Sleep Made Simple - Headspace] (https://www.headspace.com/) --- [Bearable Symptom Tracker, Mood Journal, & Health App] (https://bearable.app/) --- [BreathingApp — Personal breathing trainer for a better health] (https://breathingapp.com/) --- [30:15] (#t=30:15) How can we recognize anxiety triggers? --- [33:26] (#t=33:26) What advice do you have for dealing with uncertainty? --- [37:54] (#t=37:54) How can I deal with keeping up with everything and feeling like I’m falling behind? --- [43:02] (#t=43:02) Navigating big life decisions --- [51:39] (#t=51:39) Supper Club questions --- [Being Well Podcast with Dr. Rick Hanson and Forrest Hanson] (https://www.rickhanson.net/being-well-podcast/) --- <a href= "https://podcasts.apple.com/us/podcast/celebrity-book-club-with-steven-lily/id1547360770"> Celebrity Book Club with Steven & Lily on Apple Podcasts</a> --- [Criminality] (https://www.criminalityshow.com/) --- [58:01] (#t=58:01) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__32"></a>××× SIIIIICK ××× PIIIICKS ××× --- <a href= "https://www.amazon.com/Fullstar-Mini-Vegetable-Chopper-Container/dp/B0BHSXFTGH?crid=8WWJNGJIIFI4&keywords=fullstar+vegetable+chopper&qid=1694728241&sprefix=fullstar+veg,aps,126&sr=8-6&th=1"> Fullstar Compact Vegetable Chopper - Vegetable Cutter, Food Chopper, Veggie Chopper, Onion Chopper, Vegetable Chopper With Container, Vegetable Slicer, Vegetable Cutter, Mandoline Slicer (6 Inserts): Home & Kitchen</a> <a id="Shameless_Plugs_36"></a>Shameless Plugs --- [Learning Differently (@learning.differently) • Instagram photos and videos] (https://www.instagram.com/learning.differently/) --- [Zarlengo Foundation Learning Evaluation Center| Denver, Colorado] (https://learningevaluationcenter.org/) <a id="Tweet_us_your_tasty_treats_41"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets --- [Wes Bos on Bluesky] (https://bsky.app/profile/wesbos.com) --- [Scott on Bluesky] (https://bsky.app/profile/tolin.ski) --- [Syntax on Bluesky] (https://bsky.app/profile/syntax.fm) ... Read more

22 Sep 2023

1 HR 01 MINS

1:01:52

22 Sep 2023

#671

The Svelte + SvelteKit Show

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. <a id= "Show_Notes_2"></a>Show Notes --- [00:10] (#t=00:10) Welcome --- [01:12] (#t=01:12) Syntax Brought to you by Sentry --- [02:11] (#t=02:11) What is Svelte vs SvelteKit --- [From React To SvelteKit — Syntax Podcast 390] (https://syntax.fm/show/390/from-react-to-sveltekit) --- <a href= "https://syntax.fm/show/173/hasty-treat-wes-and-scott-look-at-svelte-3"> Hasty Treat - Wes & Scott Look At Svelte 3 — Syntax Podcast 173</a> --- [Svelte • Cybernetically enhanced web apps] (https://svelte.dev/) --- [SvelteKit • Web development, streamlined] (https://kit.svelte.dev/) --- [05:59] (#t=05:59) Templating in Svelte --- [18:20] (#t=18:20) Data fetching in SvelteKit --- [25:23] (#t=25:23) Actions --- [28:58] (#t=28:58) State --- [32:41] (#t=32:41) Binding values --- [36:18] (#t=36:18) Hooks --- [37:25] (#t=37:25) Request handlers --- <a href= "https://svelte.dev/docs/special-elements#svelte-window">Special elements • Docs • Svelte</a> --- <a href= "https://github.com/syntaxfm/website/blob/v2/src/actions/anchor.ts"> website/src/actions/anchor.ts at v2 · syntaxfm/website</a> --- <a href= "https://github.com/syntaxfm/website/blob/v2/src/actions/click_outside.ts"> website/src/actions/click_outside.ts at v2 · syntaxfm/website</a> --- [39:23] (#t=39:23) Svelte Actions --- [42:26] (#t=42:26) Popover API --- [45:33] (#t=45:33) Routing --- [47:22] (#t=47:22) Layouts --- [50:08] (#t=50:08) Styling --- [57:09] (#t=57:09) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__28"></a>××× SIIIIICK ××× PIIIICKS ××× --- Scott: <a href= "https://www.amazon.com/dp/B0BZSD2L1W?linkCode=sl1&linkId=3c99452f2f410bd473c91749cfa27a6f&language=en_US"> Aqara Smart Lock U100</a> --- Wes: <a href= "https://www.amazon.ca/dp/B07QXKNDSW?crid=23KX82S9DQKYG&keywords=bose+wc35+ear+pads+flower&sprefix=bose+wc35+ear+pads+flower,aps,105&th=1&language=en_US&sr=8-18&linkCode=gs2&linkId=5d4c231bde102d4022499ff9ea813b91&tag=isi777-20"> Headphones Replacement Ear Pads,Compatible for Bose Quietcomfort QC15 QC25 QC35 35 ii-(Black Floral)</a> <a id="Shameless_Plugs_33"></a>Shameless Plugs --- Scott: [Sentry] (https://sentry.io) --- Wes: [Wes Bos Tutorials] (https://wesbos.com/courses) <a id="Tweet_us_your_tasty_treats_38"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets --- [Wes Bos on Bluesky] (https://bsky.app/profile/wesbos.com) --- [Scott on Bluesky] (https://bsky.app/profile/tolin.ski) --- [Syntax on Bluesky] (https://bsky.app/profile/syntax.fm) ... Read more

20 Sep 2023

1 HR 02 MINS

1:02:39

20 Sep 2023

#670

Hacking the Tonal - Proxying, Intercepting + Debugging Traffic?

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! <a id= "Show_Notes_2"></a>Show Notes --- [00:25] (#t=00:25) Welcome --- [01:55] (#t=01:55) Syntax Brought to you by Sentry --- [02:17] (#t=02:17) Scott’s story of wanting to intercept data --- [Tonal] (https://www.tonal.com/) --- [06:36] (#t=06:36) Other examples --- [08:38] (#t=08:38) Different types of traffic --- [14:52] (#t=14:52) TCP vs UDP --- [16:07] (#t=16:07) Why would you want to run a proxy? --- [24:20] (#t=24:20) Applications to use --- [Charles Web Debugging Proxy • HTTP Monitor / HTTP Proxy / HTTPS & SSL Proxy / Reverse Proxy] (https://www.charlesproxy.com/) --- [Proxyman · Native, Modern Web Debugging Proxy · Inspect network traffic from Mac, iOS, Android devices with ease] (https://proxyman.io/) --- [Intercept, debug & mock HTTP with HTTP Toolkit] (https://httptoolkit.com/) --- [mitmproxy - an interactive HTTPS proxy] (https://mitmproxy.org/) --- [Wireshark · Go Deep] (https://www.wireshark.org/) --- <a href= "https://www.obdev.at/products/littlesnitch/index.html">Little Snitch</a> --- <a href= "https://docs.telerik.com/fiddler-everywhere/capture-traffic/capturing-modes"> Capturing Modes - Fiddler Everywhere</a> --- <a href= "https://twitter.com/Hacksore/status/1661369171534393348">Hacksore on Twitter</a> --- <a href= "https://programmingwithstyle.com/posts/howihackedmycar/">How I Hacked my Car :: Programming With Style</a> <a id="Tweet_us_your_tasty_treats_23"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets --- [Wes Bos on Bluesky] (https://bsky.app/profile/wesbos.com) --- [Scott on Bluesky] (https://bsky.app/profile/tolin.ski) --- [Syntax on Bluesky] (https://bsky.app/profile/syntax.fm) ... Read more

18 Sep 2023

35 MINS

35:32

18 Sep 2023

#669

Supper Club × How To Get Your First Dev Job With Stuart Bloxham

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. <a id= "Show_Notes_2"></a>Show Notes --- [00:36] (#t=00:36) Welcome --- [Stuart Bloxham on GitHub] (https://github.com/sbloxy123) --- <a href= "https://www.linkedin.com/in/stuart-bloxham-a36197121/?originalSubdomain=uk"> Stuart Bloxham on LinkedIn</a> --- [02:09] (#t=02:09) How did you decide to be a web developer? --- [08:22] (#t=08:22) Did you have clarity when your kid was born? --- [10:20] (#t=10:20) What was the interview process like? --- [18:25] (#t=18:25) What and how did you learn? --- [20:28] (#t=20:28) What’s the state of bootcamps in 2023? --- [22:03] (#t=22:03) How important have soft skills been? --- [25:14] (#t=25:14) How do you know when you’re ready to apply for a job? --- [35:24] (#t=35:24) Do you like coding? --- [37:49] (#t=37:49) How did you find the time to make it all work? --- [41:42] (#t=41:42) How did you deal with burnout? --- [43:06] (#t=43:06) Supper Club questions --- [45:34] (#t=45:34) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__20"></a>××× SIIIIICK ××× PIIIICKS ××× --- <a href= "https://en.wikipedia.org/wiki/Flowerhorn_cichlid">Flowerhorn cichlid</a> <a id="Shameless_Plugs_24"></a>Shameless Plugs --- [Stuart Bloxham’s Portfolio] (https://www.stuartbloxham.tech/) <a id="Tweet_us_your_tasty_treats_28"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets --- [Wes Bos on Bluesky] (https://bsky.app/profile/wesbos.com) --- [Scott on Bluesky] (https://bsky.app/profile/tolin.ski) --- [Syntax on Bluesky] (https://bsky.app/profile/syntax.fm) ... Read more

15 Sep 2023

48 MINS

48:27

15 Sep 2023

#668

Hackweek Projects - Realtime Markdown Editor and a Hardware Recording Button

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. <a id= "Show_Notes_2"></a>Show Notes --- [00:11] (#t=00:11) Welcome --- [00:57] (#t=00:57) What is a hack week? --- [01:55] (#t=01:55) Syntax Brought to you by Sentry --- [03:42] (#t=03:42) Scott’s project: a multiplayer editor --- [Liveblocks | Collaborative experiences in days, not months] (https://liveblocks.io/) --- [PartyKit | Everything is better with friends] (https://www.partykit.io/) --- [BlockNote - Javascript Block-Based text editor | BlockNote] (https://www.blocknotejs.org/) --- [Dev toolkit for building collaborative editors – Tiptap] (https://tiptap.dev/) --- <a href= "https://github.com/microsoft/monaco-editor">microsoft/monaco-editor: A browser based code editor</a> --- <a href= "https://github.com/syntaxfm/hackweek-md-multiplayer-editor">syntaxfm/hackweek-md-multiplayer-editor: Sentry.io Hackweek Submisison - A multiplayer editor for .md files that comits directly to GitHub</a> --- [Convex | The fullstack TypeScript development platform] (https://www.convex.dev/) --- [The Everything App] (https://anytype.io/) --- [13:57] (#t=13:57) Multiplayer is so much easier --- [19:56] (#t=19:56) Wes’ project: A recording button --- [Oracle VM VirtualBox] (https://www.virtualbox.org/) --- [Run Windows on Mac – Parallels Desktop 19 Virtual Machine for Mac] (https://www.parallels.com/ca/pd/general/) --- <a href= "https://karabiner-elements.pqrs.org/">Karabiner-Elements</a> --- [folivora.ai - Great Tools for your Mac!] (https://folivora.ai/) --- [Home Assistant] (https://www.home-assistant.io/) --- <a href= "https://unity.com/pages/pro-free-trial?&&&&gad=1">The World’s Leading 2D and 3D Platform | Unity Pro Free Trial</a> --- [SendCutSend | Online Laser Cutting and Waterjet Cutting] (https://sendcutsend.com/) --- [blender.org - Home of the Blender project - Free and Open 3D Creation Software] (https://www.blender.org/) --- [42:31] (#t=42:31) Learning to skateboard --- [43:59] (#t=43:59) F1 documentary follow up --- [45:30] (#t=45:30) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__30"></a>××× SIIIIICK ××× PIIIICKS ××× --- Scott: <a href= "https://github.com/waydabber/BetterDisplay">BetterDisplay: Unlock your displays on your Mac!</a> --- Wes: <a href= "https://www.amazon.com/LOVIMAG-Magnetic-Hanging-Magnets-Refrigerator/dp/B0CBTZ78Q4?crid=19L2TLC6SKOWL&keywords=100lb+magnet+hooks&qid=1693326610&sprefix=100lb+magnet+hooks,aps,109&sr=8-4&th=1"> LOVIMAG Magnetic Hooks Heavy Duty</a> <a id="Shameless_Plugs_35"></a>Shameless Plugs --- Scott: [Syntax on TikTok] (https://www.tiktok.com/@syntaxfm) --- Wes: [@WesBos on X.com] (https://twitter.com/wesbos) <a id="Tweet_us_your_tasty_treats_40"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets --- [Wes Bos on Bluesky] (https://bsky.app/profile/wesbos.com) --- [Scott on Bluesky] (https://bsky.app/profile/tolin.ski) --- [Syntax on Bluesky] (https://bsky.app/profile/syntax.fm) ... Read more

13 Sep 2023

51 MINS

51:26

13 Sep 2023

#667

CSS Nesting is Here!

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? <a id= "Show_Notes_2"></a>Show Notes --- [00:24] (#t=00:24) Welcome --- [02:31] (#t=02:31) What’s up with CSS nesting? --- <a href= "https://twitter.com/wesbos/status/1696201171587809761">"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 👇</a> --- [04:10] (#t=04:10) How does CSS nesting work? --- [09:23] (#t=09:23) What the ampersand does in nesting --- [21:05] (#t=21:05) It works with media queries --- [25:29] (#t=25:29) How does it work on all the browsers? --- [29:32] (#t=29:32) Lightning CSS --- [Lightning CSS] (https://lightningcss.dev/) <a id="Tweet_us_your_tasty_treats_14"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets --- [Wes Bos on Bluesky] (https://bsky.app/profile/wesbos.com) --- [Scott on Bluesky] (https://bsky.app/profile/tolin.ski) --- [Syntax on Bluesky] (https://bsky.app/profile/syntax.fm) ... Read more

11 Sep 2023

31 MINS

31:07

11 Sep 2023

#666

Supper Club × What's New With Astro with Fred Schott

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. <a id= "Show_Notes_2"></a>Show Notes --- [00:35] (#t=00:35) Welcome 3x guest Fred Schott! --- <a href= "https://syntax.fm/show/580/supper-club-astro-2-0-with-fred-schott"> Supper Club × Astro 2.0 with Fred Schott — Syntax Podcast 580</a> --- [Pika Pkg — Syntax Podcast 212] (https://syntax.fm/show/212/pika-pkg) --- [05:11] (#t=05:11) What is Astro? --- [07:37] (#t=07:37) What’s new in Astro v3? --- [Astro 3.0 | Astro] (https://astro.build/blog/astro-3/) --- [14:18] (#t=14:18) Behind the scenes improvements in Astro v3 --- [18:17] (#t=18:17) HMR Enhancements --- [20:10] (#t=20:10) What’s the hosting partner deal with Vercel? --- <a href= "https://astro.build/blog/vercel-official-hosting-partner/">Vercel: Our Official Hosting Partner | Astro</a> --- [28:04] (#t=28:04) Docs template Starlight announcement --- [Starlight 🌟 Build documentation sites with Astro] (https://starlight.astro.build/) --- [31:28] (#t=31:28) How often do you release updates? --- [33:47] (#t=33:47) Marketing open source --- [Time to suit up | Astro Shop] (https://shop.astro.build/) --- [SvelteKit • Web development, streamlined] (https://kit.svelte.dev/) --- [36:18] (#t=36:18) Making major version numbers less scary --- [40:04] (#t=40:04) Does Astro use Vite? --- [Vite | Next Generation Frontend Tooling] (https://vitejs.dev/) --- [42:01] (#t=42:01) Is it different working on a framework than a tool like Snowpack? --- [43:53] (#t=43:53) Thoughts on cloud text editors --- [Project IDX] (https://idx.dev/) --- [47:02] (#t=47:02) How do you keep up to date? --- [48:43] (#t=48:43) Do you write in TypeScript? --- [51:31] (#t=51:31) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__30"></a>××× SIIIIICK ××× PIIIICKS ××× --- [Factorio] (https://www.factorio.com/) <a id="Shameless_Plugs_34"></a>Shameless Plugs --- [Astro (@astrodotbuild)] (https://twitter.com/astrodotbuild) <a id="Tweet_us_your_tasty_treats_38"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets --- [Wes Bos on Bluesky] (https://bsky.app/profile/wesbos.com) --- [Scott on Bluesky] (https://bsky.app/profile/tolin.ski) --- [Syntax on Bluesky] (https://bsky.app/profile/syntax.fm) ... Read more

08 Sep 2023

55 MINS

55:13

08 Sep 2023

#665

Potluck × Soft Skills × Release Notes × Headless CMS × Organizing Code × Inet CSS?

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! <a id= "Show_Notes_2"></a>Show Notes --- [00:11] (#t=00:11) Welcome --- [01:42] (#t=01:42) Scott’s butt pincher --- <a href= "https://en.wikipedia.org/wiki/Affenpinscher">Affenpinscher</a> --- [06:08] (#t=06:08) You keep missing my favorite thing about Civet --- [Civet] (https://en.wikipedia.org/wiki/Civet) --- [07:31] (#t=07:31) What soft skills can I learn to help me in my career? --- <a href= "https://css-tricks.com/hmtl-css-and-js-in-an-add-ocd-bi-polar-dyslexic-and-autistic-world/"> HTML, CSS and JS in an ADD, OCD, Bi-Polar, Dyslexic and Autistic World | CSS-Tricks - CSS-Tricks</a> --- [12:42] (#t=12:42) Have you thought about release notes or a what’s new section? --- <a href= "https://www.conventionalcommits.org/en/v1.0.0/">Conventional Commits</a> --- <a href= "https://medium.com/jobtome-engineering/how-to-generate-changelog-using-conventional-commits-10be40f5826c"> How to generate Changelog using Conventional Commits | by Riccardo Canella | Jobtome Engineering | Medium</a> --- [15:57] (#t=15:57) Can you explain headless CMS and what the use-cases/implementations are? --- [19:24] (#t=19:24) Any suggestions for dealing with web components and the client’s tracking scripts --- <a href= "https://www.webperf.tips/tip/understanding-flamegraphs/">How to Read Flamegraphs 🔥</a> --- [Chromium F12 Profiler: The Main Thread Pane] (https://www.webperf.tips/tip/main-profiler-pane/) --- <a href= "https://github.com/bluesky-social/atproto/issues/915#issuecomment-1539112436"> Agent Creation has a large CPU time · Issue #915 · bluesky-social/atproto</a> --- [25:27] (#t=25:27) Why do we need .d.ts files in TypeScript? --- [30:15] (#t=30:15) What is inset in CSS? --- <a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/inset">inset - CSS: Cascading Style Sheets | MDN</a> --- [35:06] (#t=35:06) Is there a way to use AI/chat gpt to more quickly and easily understand technical documentation? --- [Anthropic \ Home] (https://www.anthropic.com/) --- [Getting Started 🚀 Astro Documentation] (https://docs.astro.build/en/getting-started/) --- <a href= "https://gptstore.ai/plugins/askthecode-dsomok-online">ChatGPT Plugin - AskTheCode | GPTStore.ai</a> --- [ChatGPT Plugin - Scraper | GPTStore.ai] (https://gptstore.ai/plugins/api-gafo-tech) --- <a href= "https://tanstack.com/query/v4/docs/react/overview">Overview | TanStack Query Docs</a> --- <a href= "https://openai.com/blog/custom-instructions-for-chatgpt">Custom instructions for ChatGPT</a> --- [40:59] (#t=40:59) why is the following true: the string “undefined”.includes(undefined)? --- [43:27] (#t=43:27) How do you organize your code directories? --- [48:50] (#t=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] (#t=54:32) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__34"></a>××× SIIIIICK ××× PIIIICKS ××× --- Scott: [Surge power bar] (https://amzn.to/3YMdzpR) --- Wes: [Little Hippo Alarm] (https://amzn.to/3EqvxVH) <a id="Shameless_Plugs_39"></a>Shameless Plugs --- Scott: [Sentry] (https://sentry.io) --- Wes: [Wes Bos Tutorials] (https://wesbos.com/courses) <a id="Tweet_us_your_tasty_treats_44"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets --- [Wes Bos on Bluesky] (https://bsky.app/profile/wesbos.com) --- [Scott on Bluesky] (https://bsky.app/profile/tolin.ski) --- [Syntax on Bluesky] (https://bsky.app/profile/syntax.fm) ... Read more

06 Sep 2023

1 HR 00 MINS

1:00:29

06 Sep 2023

#664

JavaScript Closures & Scope Explained

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. <a id= "Show_Notes_2"></a>Show Notes --- [00:10] (#t=00:10) Welcome --- [01:49] (#t=01:49) Being tired --- <a href= "https://www.theredrocksamphitheater.com/events/the-strokes-weyes-blood/"> The Strokes & Weyes Blood Tickets | 14th August | Red Rocks Amphitheatre</a> --- [05:08] (#t=05:08) Landscaping --- [10:53] (#t=10:53) Gym updates --- [23:01] (#t=23:01) House projects --- [28:39] (#t=28:39) Why are search engines so awful these days? --- [39:20] (#t=39:20) Internet routing --- [45:17] (#t=45:17) Linus Tech Tips ethics and issues --- [48:29] (#t=48:29) Rewiring a kid’s ATV --- [50:49] (#t=50:49) What we’re watching --- [The Stronger By Science Podcast] (https://sbspod.com/) --- [Watch Full Swing | Netflix Official Site] (https://www.netflix.com/ca/title/81483353) --- [Break Point | Official Trailer | Netflix] (https://www.youtube.com/watch?v=sWBqn8fdhWs) --- [Watch Formula 1: Drive to Survive | Netflix Official Site] (https://www.netflix.com/ca/title/80204890) --- [58:37] (#t=58:37) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__21"></a>××× SIIIIICK ××× PIIIICKS ××× --- Scott: [The First Cat in Space Ate Pizza] (https://amzn.to/3OtmJ5S) --- Wes: Steam cleaner <a id="Shameless_Plugs_26"></a>Shameless Plugs --- Scott: [Sentry] (https://sentry.io) --- Wes: [Wes Bos Tutorials] (https://wesbos.com/courses) <a id="Tweet_us_your_tasty_treats_31"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets --- [Wes Bos on Bluesky] (https://bsky.app/profile/wesbos.com) --- [Scott on Bluesky] (https://bsky.app/profile/tolin.ski) --- [Syntax on Bluesky] (https://bsky.app/profile/syntax.fm) ... Read more

04 Sep 2023

24 MINS

24:18

04 Sep 2023

#663

Supper Club × Shipping ESM with Mark Erikson

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. <a id= "Show_Notes_2"></a>Show Notes --- [00:36] (#t=00:36) Welcome --- [01:45] (#t=01:45) Introducing Shipping ESM with Mark Erikson --- [Mark Erikson (@acemarke)] (https://twitter.com/acemarke) --- [Wes Bos on Twitter: “publishing packages that work in esm and cjs is such a nightmare. I’ve run into so many issues today and took forever to get the proper package.json exports. I can’t wait until we’re 100% esm. I think I have every single combo covered.”] (https://twitter.com/wesbos/status/1610385221324619780) --- [Mark’s Dev Blog] (https://blog.isquaredsoftware.com/) --- <a href= "https://blog.isquaredsoftware.com/2023/08/esm-modernization-lessons/"> Blogged Answers: My Experience Modernizing Packages to ESM</a> --- <a href= "https://blog.isquaredsoftware.com/2020/08/greatest-hits/">Greatest Hits: The Most Popular and Most Useful Posts I’ve Written</a> --- <a href= "https://github.com/arethetypeswrong/arethetypeswrong.github.io">arethetypeswrong.github.io: Tool for analyzing TypeScript types of npm packages</a> --- [publint] (https://publint.dev/) --- [07:01] (#t=07:01) How did we get to this space in modules? --- [16:30] (#t=16:30) How do you deal with permutations? --- [22:13] (#t=22:13) Do bundlers get in the way or helping? --- [26:16] (#t=26:16) Are default imports useful? --- [30:35] (#t=30:35) Are the types wrong errors --- [33:41] (#t=33:41) Has TypeScript made this easier? --- [37:56] (#t=37:56) What’s your tool stack for building? --- [39:32] (#t=39:32) How do you test? --- [41:35] (#t=41:35) Will we ever stop bundling? --- [48:03] (#t=48:03) What about source maps? --- [52:32] (#t=52:32) Supper Club Questions --- [What is Windows Subsystem for Linux] (https://learn.microsoft.com/en-us/windows/wsl/about) --- <a href= "https://marketplace.visualstudio.com/items?itemName=graf009.Eagle-Oceanic-Next"> Eagle Oceanic Next</a> --- [DroidSansMono NF Font] (https://eng.m.fontke.com/font/24637914/) --- [55:18] (#t=55:18) React Types has more downloads than React? --- [59:42] (#t=59:42) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__30"></a>××× SIIIIICK ××× PIIIICKS ××× --- [Shirley Wu—Taking up space (Keynote, Outlier 2023)] (https://www.youtube.com/watch?v=zF7mSTVwVs0) <a id="Shameless_Plugs_34"></a>Shameless Plugs --- [Replay (@replayio)] (https://twitter.com/replayio) --- [Replay - The time-travel debugger from the future.] (https://www.replay.io/) <a id="Tweet_us_your_tasty_treats_39"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets --- [Wes Bos on Bluesky] (https://bsky.app/profile/wesbos.com) --- [Scott on Bluesky] (https://bsky.app/profile/tolin.ski) --- [Syntax on Bluesky] (https://bsky.app/profile/syntax.fm) ... Read more

01 Sep 2023

1 HR 08 MINS

1:08:44

01 Sep 2023

#662

Anything but Coding - Landscaping, Fitness, and more!

30 Aug 2023

1 HR 05 MINS

1:05:36

30 Aug 2023

#661

OG Image Options

In this Hasty Treat, Scott and Wes talk about OG images, interesting ways you can work with them, and ways you can work dynamically with them. <a id= "Show_Notes_2"></a>Show Notes --- [00:11] (#t=00:11) Welcome --- [02:18] (#t=02:18) What are OG images? --- [06:19] (#t=06:19) Testing OG images --- [Polypane, The browser for ambitious web developers] (https://polypane.app/) --- [Meta Tags — Preview, Edit and Generate] (https://metatags.io/) --- [Sharing Debugger - Meta for Developers] (https://developers.facebook.com/tools/debug/) --- [Card Validator | Twitter Developers] (https://cards-dev.twitter.com/validator) --- [08:27] (#t=08:27) Creating an OG image --- [vercel/satori: Enlightened library to convert HTML and CSS to SVG] (https://github.com/vercel/satori) --- <a href= "https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation"> Open Graph (OG) Image Generation | Vercel Docs</a> --- <a href= "https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images"> Introducing OG Image Generation: Fast, dynamic social card images at the Edge – Vercel</a> --- [09:41] (#t=09:41) Dynamically generating OG images --- <a href= "https://wesbos.com/thumbnail?thumbnail=/static/0005c028a536c87975eb84ae3d32ae57/aeron.jpg&title=Uses&url=https://wesbos.com/uses"> wesbos.com/thumbnail/?thumbnail=%2Fstatic%2F0005c028a536c87975eb84ae3d32ae57%2Faeron.jpg&title=Uses&url=https%3A%2F%2Fwesbos.com%2Fuses</a> --- [21:16] (#t=21:16) Using Puppeteer --- [Puppeteer | Puppeteer] (https://pptr.dev/) --- <a href= "https://developers.cloudflare.com/browser-rendering/platform/puppeteer/"> Puppeteer · Browser Rendering docs</a> --- <a href= "https://cloudinary.com/ip/gr-sea-gg-brand-home-base?campaignid=18164753405&adgroupid=144188713167&keyword=cloudinary&device=c&matchtype=e&adposition=&gad=1"> Cloudinary - Image and Video Upload, Store ad Monetization</a> --- [Fast and reliable end-to-end testing for modern web apps | Playwright] (https://playwright.dev/) --- [28:47] (#t=28:47) Canva API --- [Build The Tools Behind Great Design | Canva Developers] (https://www.canva.com/developers/) <a id="Tweet_us_your_tasty_treats_25"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets --- [Wes Bos on Bluesky] (https://bsky.app/profile/wesbos.com) --- [Scott on Bluesky] (https://bsky.app/profile/tolin.ski) --- [Syntax on Bluesky] (https://bsky.app/profile/syntax.fm) ... Read more

28 Aug 2023

29 MINS

29:49

28 Aug 2023

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists