…

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.

#864

862: Svelte 5 Is Here!

Is Svelte becoming React? Scott and Wes explore the exciting updates in Svelte 5, including Runes, Snippets, odd font choices, and performance benchmarks, while discussing custom event updates, migration tips, and potential performance gains. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! ------ [Scott’s Svelte5 Overview] (https://youtu.be/8DQailPy3q8?si=EHDGByYwUpPrZHSV) . --- [01:27] (#t=01:27) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [02:06] (#t=02:06) What’s new in [Svelte 5] (https://svelte.dev/blog/svelte-5-is-alive) ? ------ [02:13] (#t=02:13) <a href= "https://svelte.dev/docs/svelte/what-are-runes">Runes</a>. --------- [04:47] (#t=04:47) <a href= "https://svelte.dev/docs/svelte/$state">$state</a> --------- [07:00] (#t=07:00) $state.snapshot --------- [11:47] (#t=11:47) <a href= "https://svelte.dev/docs/svelte/$derived">$derived</a> --------- [12:46] (#t=12:46) $derived.buy --------- [15:41] (#t=15:41) <a href= "https://svelte.dev/docs/svelte/$effect">$effect</a> --------- [17:24] (#t=17:24) $effect.pre --------- [18:05] (#t=18:05) $effect use cases. --------- [22:20] (#t=22:20) <a href= "https://svelte.dev/docs/svelte/$props">$props</a> --------- [24:57] (#t=24:57) <a href= "https://svelte.dev/docs/svelte/$bindable">Binding state</a>. --------- [27:15] (#t=27:15) <a href= "https://svelte.dev/docs/svelte/$inspect">$inspect</a> ------------ <a href= "https://github.com/stolinski/vscode-wrap-svelte">vsode-wrap-svelte</a>. --------- [28:46] (#t=28:46) $inspect(…).with ------ [30:42] (#t=30:42) <a href= "https://svelte.dev/docs/svelte/snippet">Snippets</a>. ------ [34:22] (#t=34:22) Events now onclick instead of on:click. ------ [36:09] (#t=36:09) Custom events now just props instead of createEventDispatcher. --- [36:31] (#t=36:31) Serif Font on [website] (https://svelte.dev/) . --- [40:01] (#t=40:01) Performance. ------ <a href= "https://krausest.github.io/js-framework-benchmark/2024/table_chrome_130.0.6723.58.html"> Benchmarks Doc</a>. ------ <a href= "https://x.com/BenjaminMcCann/status/1825927135393177994">Benjamin McCann Tweet</a>. --- [46:41] (#t=46:41) Is Svelte becoming React? --- [49:21] (#t=49:21) <a href= "https://svelte.dev/docs/svelte/v5-migration-guide">Migration</a>. --- [51:41] (#t=51:41) What’s next and wish list for Svelte. --- [57:12] (#t=57:12) Sick Picks & Shameless Plugs. <a id="Sick_Picks_33"></a>Sick Picks --- Scott: [Dragon Quest 3] (https://amzn.to/3CK2kHH) . --- Wes: [Dresscode.dev] (https://dresscode.dev/) . <a id="Shameless_Plugs_38"></a>Shameless Plugs --- Scott: [Syntax on YouTube] (https://youtube.com/@syntaxfm) . <a id="Hit_us_up_on_Socials_42"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

18 Dec 2024

1 HR 00 MINS

1:00:45

18 Dec 2024

#863

861: Local Data: Sqlite, LocalStorage, Session, Cookies and IndexDB

Scott and Wes dive into the world of local data storage, breaking down the pros and cons of Sqlite, LocalStorage, SessionStorage, Cookies, and IndexedDB. They cover real-world use cases like user settings, offline data, and auth tokens, while sharing their favorite tools and strategies for keeping your data fast and secure. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:30] (#t=00:30) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [01:43] (#t=01:43) Why store data locally. ------ [01:55] (#t=01:55) User preferences and settings. ------ [02:50] (#t=02:50) Not logged in state (shopping carts, etc). ------ [03:30] (#t=03:30) Data for faster loading. ------ [03:51] (#t=03:51) Privacy concerns. ------ [04:25] (#t=04:25) Large files or drafts. ------ [05:50] (#t=05:50) Auth tokens. --- [07:08] (#t=07:08) Where to store data. ------ [07:11] (#t=07:11) Cookies. ------ [07:48] (#t=07:48) Local storage. ------ [09:15] (#t=09:15) Session storage. ------ [10:35] (#t=10:35) <a href= "https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a>. --- [12:15] (#t=12:15) <a href= "https://github.com/byojs/storage">BYOJS Storage</a>. --- [13:41] (#t=13:41) SQlite via WASM. --- [14:12] (#t=14:12) Penalties of SQLite in browser via WASM. --- [15:29] (#t=15:29) <a href= "https://github.com/electric-sql/pglite">PGLite</a>. --- [16:23] (#t=16:23) Dealing with migrations. --- [16:55] (#t=16:55) The advantages of the approach. --- [18:42] (#t=18:42) <a href= "https://dexie.org/">Dexie</a>. --- [19:59] (#t=19:59) Patch messages. --- [21:25] (#t=21:25) A few options. ------ <a href= "https://tinybase.org/guides/the-basics/architectural-options/">TinyBase Docs</a>. ------ [Local First Web] (https://localfirstweb.dev/) . <a id="Hit_us_up_on_Socials_30"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

16 Dec 2024

24 MINS

24:58

16 Dec 2024

#862

860: Module Federation Microfrontends with ByteDance’s Zack Jackson

Wes and Scott talk with Zack Jackson about Module Federation, and the innovative ways it streamlines collaboration across large teams and complex applications. Zack also dives into simplifying microfrontends, optimizing builds with Rspack, and his work at ByteDance. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:48] (#t=00:48) Zach background and role at ByteDance --- [03:10] (#t=03:10) ByteDance’s web and native apps ------ <a href= "https://hbr.org/2022/02/how-bytedance-became-the-worlds-most-valuable-startup"> How ByteDance Became the World’s Most Valuable Startup</a> ------ [Lynx] (https://github.com/bytedance/lynx-llm) ------ [ByteDance GitHub] (https://github.com/bytedance) ------ [Coze] (https://www.coze.com/) ------ [Lark] (https://www.larksuite.com/) ------ [MarsCode] (https://www.marscode.com/) --- [06:48] (#t=06:48) What is Module Federation? ------ [Zephyr Cloud] (https://www.zephyr-cloud.io/) --- [15:49] (#t=15:49) Evolution from V1 to V2 of Module Federation --- [24:47] (#t=24:47) When to consider Module Federation --- [29:46] (#t=29:46) How would you publish a utils package in Module Federation? --- [32:59] (#t=32:59) How would you do a major upgrade? --- [36:36] (#t=36:36) Brought to you by [Sentry.io] (https://sentry.io) --- [37:01] (#t=37:01) Who owns the update process? --- [39:40] (#t=39:40) Handling multiple frameworks --- [42:10] (#t=42:10) ModernJS and Meta frameworks ------ [ModernJS] (https://modernjs.dev/) ------ [Rspress] (https://rspress.dev/) --- [47:20] (#t=47:20) Does ByteDance have its own JavaScript runtime? ------ [NAPI] (https://nodejs.org/api/n-api.html) --- [50:02] (#t=50:02) Why Zack built Rspack ------ [Rspack] (https://rspack.dev/) ------ [Rsbuild] (https://rsbuild.dev/) --- [58:15] (#t=58:15) The future of Rspack and custom bundlers ------ [Unpack] (https://github.com/hardfist/unpack) --- [01:04:24] (#t=01:04:24) Module Federation’s major features --- [01:07:29] (#t=01:07:29) Sick Picks & Shameless Plugs <a id="Shameless_Plugs_35"></a>Shameless Plugs --- Zack: ------ [Zephyr Cloud] (https://www.zephyr-cloud.io/) ------ [Midscene.js] (https://midscenejs.com/) <a id="Hit_us_up_on_Socials_41"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

13 Dec 2024

1 HR 10 MINS

1:10:38

13 Dec 2024

#861

859: Streaming Video in 2025

Scott and Wes break down the tech behind video streaming for the web, from transcoding and variants to CDN and access control. They also share insights on tools like Mux, Cloudflare Stream, and ffmpeg, plus tips for managing bandwidth, hosting, and costs. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:50] (#t=00:50) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [01:15] (#t=01:15) The history of video streaming. --- [02:10] (#t=02:10) How video streaming works: The Tech. --- [03:54] (#t=03:54) How video streaming works: Transcoding. --- [06:37] (#t=06:37) How video streaming works: Variants. ------ <a href= "https://github.com/wesbos/R2-video-streaming">ffmpeg</a>. ------ [Wes’ R2-video-streaming] (https://github.com/wesbos/R2-video-streaming) . ------ <a href= "https://github.com/wesbos/R2-video-streaming/blob/main/transcode.ts"> Wes’ Transcoding</a>. ------ [YT-DL] (https://github.com/ytdl-org/youtube-dl) . ------ [YT-DLP] (https://github.com/yt-dlp/yt-dlp) . --- [13:13] (#t=13:13) Dynamic ad insertion. --- [14:29] (#t=14:29) Bandwidth and hosting. ------ [Mux] (https://www.mux.com/) . --- [18:03] (#t=18:03) <a href= "https://www.cloudflare.com/">Cloudflare</a>. --- [19:13] (#t=19:13) The costs. ------ [Wes Bos Tweet Cloudflare TOS] (https://x.com/wesbos/status/1852398973769613727) . ------ <a href= "https://x.com/steve_tenuto/status/1854919704483434763">Steve Tenuto tweet</a>. --- [25:39] (#t=25:39) Media players. ------ [Media Chrome] (https://www.media-chrome.org/docs/en/get-started) . --- [29:42] (#t=29:42) CDN. --- [32:04] (#t=32:04) Access control. --- [33:35] (#t=33:35) Solutions. ------ [Mux] (https://www.mux.com/) . ------ [Cloudflare Stream] (https://developers.cloudflare.com/stream/) . ------ [Bunny.net Stream] (https://bunny.net/stream/) ------ [AWS Media Convert] (https://aws.amazon.com/mediaconvert/) . ------ [Cloudinary] (https://cloudinary.com/) . ------ [Bitmovin] (https://bitmovin.com/) . --- [41:55] (#t=41:55) Some other features. --- [45:47] (#t=45:47) Sick Picks & Shameless Plugs. <a id="Sick_Picks_37"></a>Sick Picks --- Scott: [Anker MagGo] (https://amzn.to/3CquTcZ) . --- Wes: <a href= "https://appahead.studio/apps/polycapture/">PolyCapture</a>. <a id="Shameless_Plugs_42"></a>Shameless Plugs --- Scott: [Syntax on YouTube] (www.youtube.com/@syntaxfm) . <a id="Hit_us_up_on_Socials_46"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

11 Dec 2024

51 MINS

51:22

11 Dec 2024

#860

858: How to Go Deeper With Your Learning

Want to level up your web dev game? Scott and Wes share their top tips for going deeper with your learning—covering everything from reading the docs and source code to finding mentorship and engaging with the community. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [02:48] (#t=02:48) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [03:54] (#t=03:54) How do you go deeper? --- [04:23] (#t=04:23) Pick a project and build it. --- [06:36] (#t=06:36) Read the docs. ------ [Svelte Docs] (https://svelte.dev/docs) . --- [09:07] (#t=09:07) Read the source. --- [11:19] (#t=11:19) Consume content: blogs, conference talks, etc. ------ [Dot Conferences on YouTube] (https://www.youtube.com/@dotconferences) . ------ [GitNation JavaScript Conferences] (https://www.youtube.com/@JavaScriptConferences) . --- [16:24] (#t=16:24) Discord and Reddit. --- [19:31] (#t=19:31) Get mentorship and ask questions. <a id="Hit_us_up_on_Socials_17"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

09 Dec 2024

24 MINS

24:31

09 Dec 2024

#859

857: How to Look and Sound Good at $10, $100 and $1000 With Producer Randy

Wes and Scott talk with Syntax Producer Randy Rektor. From mastering mic technique to lighting hacks and choosing the right camera, they discuss the best ways to upgrade your audio and video setup on any budget. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [03:01] (#t=03:01) Brought to you by [Sentry.io] (https://sentry.io) --- [04:14] (#t=04:14) Understanding signal-to-noise ratio --- [06:48] (#t=06:48) Using de-noise ------ <a href= "https://www.izotope.com/en/products/rx/features/voice-de-noise.html"> iZotope Voice De-noise</a> --- [09:12] (#t=09:12) The importance of mic technique --- [10:28] (#t=10:28) Dealing with electrical noise --- [11:15] (#t=11:15) The proximity effect --- [13:01] (#t=13:01) Sound treatment vs sound proofing ------ <a href= "https://www.omnicalculator.com/physics/sound-wavelength">Sound Wavelength Calculator</a> ------ <a href= "https://syntax.fm/show/516/wes-new-soundproof-office">Syntax 516: Wes’ New Soundproof Office</a> ------ [Studiobricks] (https://studiobricks.com) ------ [Randy’s Studiobricks video] (https://www.youtube.com/watch?v=xHTeXmpjFW4) ------ [GIK Acoustics] (https://www.gikacoustics.com/) --- [23:33] (#t=23:33) Do egg crates work for sound treatment? --- [25:22] (#t=25:22) USB mics vs XLR mics ------ <a href= "https://www.shure.com/en-US/products/microphones/mv6">Shure MV6</a> ------ <a href= "https://syntax.fm/show/845/are-companies-hiring-state-of-the-dev-job-market-with-taylor-desseyn"> Syntax 845: Are Companies Hiring? State of the Dev Job Market With Taylor Desseyn</a> --- [27:06] (#t=27:06) Video composition --- [30:18] (#t=30:18) How to improve your lighting --- [35:37] (#t=35:37) Choosing the right camera --- [36:58] (#t=36:58) The importance of codecs and bitrates --- [38:14] (#t=38:14) What to look for in a webcam --- [38:50] (#t=38:50) Randy’s packages for $50, $150 and $500-$1000 budgets --- [40:02] (#t=40:02) The $50 package/selecting your mic ------ [Feelworld PM1] (https://www.amazon.com/gp/aw/d/B0CNVRT9BD) ------ [Fifine K688] (https://www.amazon.com/gp/aw/d/B0B8SNVK5K) ------ <a href= "https://www.target.com/p/desktop-microphone-heyday-8482-stone-white/-/A-81505897"> heyday Stone White Desktop Mic</a> --- [43:53] (#t=43:53) The $150 package ------ <a href= "https://www.amazon.com/stores/page/29362031-33B6-40AC-BC40-7017597AB1E3"> Neewer lights</a> --- [45:32] (#t=45:32) The $500-$1000 package ------ <a href= "https://www.shure.com/en-US/products/microphones/mv6">Shure MV6</a> ------ <a href= "https://www.amazon.com/Insta360-Link-Tracking-Noise-Canceling-Streaming/dp/B0DDTH3HX8"> Insta360 Link 2</a> ------ <a href= "https://www.amazon.com/Insta360-Link-2C-Noise-Canceling-Streaming/dp/B0DDTGY8FG"> Insta360 Link 2c</a> ------ <a href= "https://www.amazon.com/Elgato-Cam-Link-Broadcast-Camcorder/dp/B07K3FN5MR"> Elgato Cam Link 4k</a> ------ [Sonay a6000] (https://amzn.to/3O3KOjJ) --- [51:07] (#t=51:07) Mic stand recommendations ------ [VIVO] (https://amzn.to/3Z2t1jd) --- [56:50] (#t=56:50) Sick picks & Shameless Plugs <a id="Sick_Picks_44"></a>Sick Picks --- Randy: <a href= "https://www.tiktok.com/@etymologynerd/video/7361455644374732078?is_from_webapp=1&sender_device=pc&web_id=7433832206571292166"> etymologynerd on TikTok</a> <a id="Shameless_Plugs_48"></a>Shameless Plugs --- Randy: [Randy’s YouTube Channel] (https://www.youtube.com/@randyrektor) <a id="Hit_us_up_on_Socials_52"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

06 Dec 2024

58 MINS

58:53

06 Dec 2024

#858

856: Loading UIs, Rust Webpack, New Cookie Types, Conference Talks + More

Scott and Wes dive into your questions on Hono and SvelteKit, partitioned cookies, redirect codes, and using Rspack instead of Vite. Plus, they share insights on quoting projects, interview best practices, and whether you should slow down those speedy loading spinners. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:50] (#t=00:50) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [02:23] (#t=02:23) Apple developer accounts and certificates. --- [06:58] (#t=06:58) Hono, SvelteKit, and using them together. --- [11:14] (#t=11:14) Rspack & Rsbuild over Vite? ------ [Rspack] (https://rspack.dev/) , <a href= "https://rsbuild.dev/">Rsbuild</a>. ------ [Rolldown] (https://rolldown.rs/) , <a href= "https://rollupjs.org/">Rollup</a>. ------ [oxc] (https://github.com/oxc-project/oxc) . ------ [Turborepo] (https://turbo.build/) . --- [21:01] (#t=21:01) Quoting projects without seeing under the hood. --- [25:26] (#t=25:26) HTTP cookies, partitioned cookies, and chips. ------ <a href= "https://developer.mozilla.org/en-US/docs/Web/Privacy/Privacy_sandbox/Partitioned_cookies"> Partitioned Cookies</a>. --- [30:29] (#t=30:29) Redirect codes; 301, 302, 303, 307 ------ <a href= "https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/418">418 I’m a teapot</a>. --- [36:22] (#t=36:22) Gaining inspiration for talks and posts. --- [40:02] (#t=40:02) My loading state is too fast! Should I use setTimeout? ------ <a href= "https://developer.mozilla.org/en-US/docs/Web/API/Window/setTimeout"> setTimeout Docs</a>. --- [42:29] (#t=42:29) Interviews and landing the job. --- [49:50] (#t=49:50) Sick Picks & Shameless Plugs. <a id="Sick_Picks_24"></a>Sick Picks --- Scott: Stainless Steel Cookware. --- Wes: [Dim Lightbulbs] (https://amzn.to/4fVmsoS) , <a href= "https://www.tiktok.com/@steelpan.guy?lang=en">steelpan.guy on TikTok</a>. <a id="Shameless_Plugs_29"></a>Shameless Plugs --- Scott: [Potluck Submissions] (https://syntax.fm/potluck) . --- Wes: [Syntax on YouTube] (www.youtube.com/@syntaxfm) . <a id="Hit_us_up_on_Socials_35"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

04 Dec 2024

56 MINS

56:01

04 Dec 2024

#857

855: Fast Websites: The New Speculation Rules API

Scott and Wes dive into the Speculation Rules API and why it’s a game-changer for building blazing-fast websites. They break down how pre-loading, prefetching, and pre-connecting work together to boost performance while weighing the costs for both users and developers. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:49] (#t=00:49) Pre-loading, prefetching, and pre-connecting. ------ <a href= "https://csswizardry.com/2024/08/cache-grab-how-much-are-you-leaving-on-the-table/"> CSS Wizardy</a>. ------ <a href= "https://github.com/csswizardry/csswizardry.github.com/commit/77285ba766bf94aed2a9fc66e10c91cef57d9f0a#diff-907a69846a1f6b238f1c43199984197d12c7eab26f3c3adcd45d628b26644950R72"> CSS Wizardy on GitHub</a>. --- [02:06] (#t=02:06) Brought to you by [Sentry.io] (www.syntax.fm/syntax) . --- [03:16] (#t=03:16) Benefits of pre-loading, prefetching, and pre-connecting? --- [07:02] (#t=07:02) The Speculation Rules API. ------ <a href= "https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API"> mdn web docs</a>. --- [08:20] (#t=08:20) Isn’t that expensive? --- [08:53] (#t=08:53) Eagerness of the Speculation Rules API. --- [09:55] (#t=09:55) What is the cost for the site? --- [14:42] (#t=14:42) What is the cost for the user? --- [15:49] (#t=15:49) Next Master. ------ <a href= "https://github.com/ethanniser/NextFaster?tab=readme-ov-file#compute-and-caching"> Next Master</a>. --- [18:07] (#t=18:07) The current prevalence. <a id="Hit_us_up_on_Socials_20"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

02 Dec 2024

24 MINS

24:10

02 Dec 2024

#856

854: Animating the Web With Matt Perry: Exploring motion.dev

Wes and Scott talk with Matt Perry, the creator of Motion (formerly Framer Motion). Matt discusses building intuitive tools, transitioning Motion to open source, and the future of web animation. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:15] (#t=01:15) The Framer Motion story ------ [Motion] (https://motion.dev) --- [05:16] (#t=05:16) What’s the status of Framer Motion today? --- [09:08] (#t=09:08) What tech is Motion built on? --- [13:40] (#t=13:40) Is Motion entirely WAAPI? --- [16:06] (#t=16:06) Why hasn’t the Web Animation API gained more traction? --- [17:46] (#t=17:46) Does Matt design his demos? --- [19:25] (#t=19:25) Performance and testing --- [25:34] (#t=25:34) Brought to you by [Sentry.io] (https://sentry.io) --- [28:10] (#t=28:10) Have other animation libraries influenced Motion? ------ [Svelte] (https://svelte.dev/) ------ [GSAP] (https://gsap.com/) ------ [Anime.js] (https://animejs.com/) --- [31:49] (#t=31:49) Micro-Optimizations in JS --- [36:02] (#t=36:02) How do you test frame rates? --- [38:03] (#t=38:03) Graphics programming and shaders ------ [Maxime Heckel] (https://maximeheckel.com/) ------ [Maxime’s blog] (https://blog.maximeheckel.com/) --- [39:58] (#t=39:58) What is the future of Motion? --- [41:42] (#t=41:42) What’s the difference between layout animations and the <a href= "https://vuejs.org/guide/built-ins/transition">Vue Transition API</a>? --- [46:35] (#t=46:35) Sick Picks & Shameless Plugs <a id="Sick_Picks_27"></a>Sick Picks --- Matt: ------ [Grime music] (https://en.wikipedia.org/wiki/Grime_music) ------ [P Money] (https://en.wikipedia.org/wiki/P_Money) ------ [Ghetts] (https://en.wikipedia.org/wiki/Ghetts) <a id="Shameless_Plugs_34"></a>Shameless Plugs --- Matt: ------ [Motion.dev] (https://motion.dev) ------ [Sponsor Motion] (https://motion.dev/sponsor) <a id="Hit_us_up_on_Socials_40"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

29 Nov 2024

50 MINS

50:14

29 Nov 2024

#855

853: The State of Frontend

Scott and Wes dive into the State of Frontend 2024 Survey, breaking down the latest trends, tools, and frameworks shaping the developer ecosystem. Tune in as they react to hot takes on frameworks, state management, hosting, and what’s next for frontend devs! <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:53] (#t=00:53) Brought to you by [Sentry.io] (http://Sentry.io) . --- [01:15] (#t=01:15) About the survey. ------ Follow along! [State of Frontend Survey] (https://tsh.io/state-of-frontend/) --- [02:10] (#t=02:10) Frameworks. --- [06:15] (#t=06:15) Rendering frameworks. --- [07:35] (#t=07:35) State management. --- [09:14] (#t=09:14) Other libraries. ------ [Just: Dependency-free Utilities] (https://anguscroll.com/just/) . --- [13:34] (#t=13:34) Data. ------ <a href= "https://syntax.fm/show/453/why-do-people-still-use-axios-over-fetch"> Syntax Episode 453</a>. ------ <a href= "https://syntax.fm/show/833/next-gen-fullstack-react-with-tanstack"> Syntax Episode 833</a>. --- [16:39] (#t=16:39) Hosting. ------ [AWS Amplify] (https://docs.amplify.aws/) . --- [19:51] (#t=19:51) Continuous Integration. --- [21:30] (#t=21:30) Micro-frontends. --- [23:25] (#t=23:25) Package Managers. ------ [pnpm Link Workspace Packages] (https://pnpm.io/npmrc#link-workspace-packages) . ------ [Corepack] (https://nodejs.org/api/corepack.html) . --- [28:35] (#t=28:35) JS Runtimes. --- [29:47] (#t=29:47) Typescript. --- [33:13] (#t=33:13) Browser Technologies. --- [35:05] (#t=35:05) What is app property? --- [38:20] (#t=38:20) Progressive Web Apps. --- [40:11] (#t=40:11) Styling tools. --- [43:17] (#t=43:17) Testing. --- [45:39] (#t=45:39) Code editors. --- [49:02] (#t=49:02) Build tools. --- [49:17] (#t=49:17) Linting tools. --- [50:26] (#t=50:26) Operating systems. --- [51:17] (#t=51:17) The future trends. --- [54:14] (#t=54:14) Sick Picks + Shameless Plugs. <a id="Sick_Picks_37"></a>Sick Picks --- Scott: [Candle Warmer] (https://amzn.to/3YCXoLZ) . --- Wes: <a href= "https://apps.apple.com/us/app/flighty-live-flight-tracker/id1358823008"> Flighty iOS App</a>. <a id="Shameless_Plugs_42"></a>Shameless Plugs --- Scott: [Syntax on Bluesky] (https://bsky.app/profile/syntax.fm) <a id="Hit_us_up_on_Socials_46"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

27 Nov 2024

1 HR 00 MINS

1:00:56

27 Nov 2024

#854

852: Cloudflare Tunnels

Explore the power of Cloudflare Tunnels with Scott and Wes as they break down this essential tool for secure remote server access. Learn how to establish and configure tunnels safely, integrate public webhooks with services like Snipcart and Apple Pay, and master the security practices that keep your connections protected. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:17] (#t=01:17) Brought to you by [Sentry.io] (www.sentry.io/syntax) . --- [02:09] (#t=02:09) How do Cloudflare Tunnels work? ------ [03:52] (#t=03:52) Publicly exposed webhooks. ------ [04:09] (#t=04:09) Apple Pay. ------ [04:40] (#t=04:40) <a href= "https://snipcart.com/">Snipcart</a>. --- [04:54] (#t=04:54) Accessing servers when away. ------ [Jellyfin] (https://jellyfin.org/) , <a href= "https://www.home-assistant.io/">Home Assistant</a>. --- [07:47] (#t=07:47) How to set up Cloudflare Tunnels. --- [10:00] (#t=10:00) Security risks. ------ <a href= "https://www.cloudflare.com/en-ca/zero-trust/products/access/">Cloudflare Access & Zero Trust</a>. <a id="Hit_us_up_on_Socials_16"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

25 Nov 2024

19 MINS

19:01

25 Nov 2024

#853

851: The Future of VS Code and Copilot

Wes and Scott talk with Cassidy Williams and Harald Kirschner about exciting new features in VS Code and GitHub Copilot, including custom instructions, UI/UX improvements, and the future of AI and Copilot within different editors. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:32] (#t=00:32) Cassidy’s keynote at [GitHub Universe] (https://githubuniverse.com/) --- [03:23] (#t=03:23) New Copilot features --- [04:55] (#t=04:55) Use cases for prompt engineering --- [09:20] (#t=09:20) UI and UX enhancements --- [19:18] (#t=19:18) <a href= "https://github.blog/news-insights/product-news/introducing-github-copilot-extensions/"> Copilot Extensions</a> --- [20:38] (#t=20:38) Brought to you by [Sentry.io] (https://sentry.io) --- [21:26] (#t=21:26) Multi-line suggestions? --- [27:00] (#t=27:00) How do you develop new ideas in this space? ------ [GitHub Next] (https://githubnext.com/) --- [35:42] (#t=35:42) Copilot in Xcode ------ <a href= "https://github.blog/changelog/2024-10-29-github-copilot-code-completion-in-xcode-is-now-available-in-public-preview/"> GitHub Copilot code completion in Xcode is now available in public preview</a> --- [39:16] (#t=39:16) VS Code experimental features ------ [@code] (https://x.com/code) <a id="Hit_us_up_on_Socials_19"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

22 Nov 2024

42 MINS

42:12

22 Nov 2024

#852

850: Manage State in JavaScript Like a Pro!

Scott and Wes serve up state management in JavaScript, breaking down key concepts like reactive state, state updaters, and global vs local state. They also explore various approaches and libraries, mutation-based state, and tools like Zustand and xState, to help you manage state like a pro. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:22] (#t=01:22) Brought to you by [Sentry.io] (https://opensourcepledge.com/) . --- [03:10] (#t=03:10) What is state? --- [03:29] (#t=03:29) Common state jargon. ------ [03:48] (#t=03:48) Reactive State. ------ [04:14] (#t=04:14) Store. ------ [04:46] (#t=04:46) Immutable vs Mutable State. ------ [05:53] (#t=05:53) State updaters. ------ [06:15] (#t=06:15) Signals. --------- [Solid.js Signal Docs] (https://docs.solidjs.com/concepts/signals) . ------ [06:49] (#t=06:49) Observables. ------ [07:07] (#t=07:07) UI is a function of state. ------ [08:39] (#t=08:39) State Machine. ------ [10:58] (#t=10:58) Binding state. ------ [11:36] (#t=11:36) Global vs local. ------ [11:49] (#t=11:49) Computed State, derived state, selector state. --- [12:41] (#t=12:41) Approaches to state management. ------ [12:52] (#t=12:52) Reducer based. ------ [16:39] (#t=16:39) Mutation based state. ------ [21:17] (#t=21:17) Atom based state. --- [25:15] (#t=25:15) Ways to hold state. ------ [25:17] (#t=25:17) Holding state in an object. ------ [27:38] (#t=27:38) Holding state in the URL. --------- [Syntax Shows] (https://syntax.fm/shows?perPage=20) . ------ [29:34] (#t=29:34) Holding state in IndexedDB, local storage, and cookies. ------ [32:16] (#t=32:16) Holding state with FormData. ------ [33:56] (#t=33:56) Holding state with Signals. --------- [Signals Proposal] (https://github.com/tc39/proposal-signals) . ------ [37:27] (#t=37:27) Holding state with the server database. --- [38:55] (#t=38:55) Global State vs Component State. ------ [Habit Path] (https://habitpath.io/landing) . --- [40:39] (#t=40:39) Sharing state. ------ [42:58] (#t=42:58) State libraries. ------ [45:26] (#t=45:26) <a href= "https://zustand-demo.pmnd.rs/">Zustand</a>. ------ [50:24] (#t=50:24) <a href= "https://jotai.org/">Jotai</a>. ------ [51:50] (#t=51:50) <a href= "https://xstate.js.org/">xState</a>. ------ [54:56] (#t=54:56) <a href= "https://easy-peasy.vercel.app/">Easy Peasy</a>. ------ [55:24] (#t=55:24) <a href= "https://pinia.vuejs.org/">Pinia</a>. ------ [56:01] (#t=56:01) <a href= "https://tanstack.com/query/latest">TanStack Query</a>. --- [57:02] (#t=57:02) Sick Picks + Shameless Plugs. <a id="Sick_Picks_45"></a>Sick Picks --- Scott: [Cremo Mens Body Wash] (https://amzn.to/3BTspDv) , [Bentgo Adult] (https://amzn.to/4fdYe8r) . --- Wes: [Adult Bento Box] (https://amzn.to/4fbRTdz) . <a id="Shameless_Plugs_50"></a>Shameless Plugs --- Wes: [Syntax on YouTube] (www.youtube.com@syntaxfm) . <a id="Hit_us_up_on_Socials_55"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

20 Nov 2024

1 HR 02 MINS

1:02:00

20 Nov 2024

#851

849: How to Pick a JS Package

You’ve got a project, and you need the right tool—but how do you know if that JavaScript package is the one? Scott and Wes guide you through finding and validating packages, from checking NPM to scoping out social proof, so you can pick tools you can trust. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:29] (#t=00:29) Brought to you by [Sentry.io] (https://sentry.io/syntax) . ------ [Take The Pledge] (https://opensourcepledge.com/) --- [01:44] (#t=01:44) How to find a JS package. ------ [02:56] (#t=02:56) Searching via [NPM] (https://www.npmjs.com/) . ------ [03:28] (#t=03:28) Searching via [Socket.dev] (https://socket.dev/) . ------ [06:02] (#t=06:02) Searching via [Reddit] (https://www.reddit.com/) . ------ [06:24] (#t=06:24) Searching via [Perplexity] (https://www.perplexity.ai/) . ------ [08:31] (#t=08:31) Searching via Google autocomplete. ------ [09:25] (#t=09:25) Searching via Awesome repo. ------ [09:51] (#t=09:51) Searching via social networks. ------ [10:47] (#t=10:47) Searching via established projects. --- [11:19] (#t=11:19) Evaluating the quality of a package. ------ [12:02] (#t=12:02) Validating via GitHub Issues. --------- <a href= "https://github.com/niklasvh/html2canvas">html2canvas</a>. ------ [13:58] (#t=13:58) Are there types? ------ [15:16] (#t=15:16) Validating via Socket. ------ [16:15] (#t=16:15) Validating via <a href= "https://bundlephobia.com/package/zustand@5.0.0">Bundlephobia</a>. ------ [17:15] (#t=17:15) Validating via the docs. ------ [17:55] (#t=17:55) Validating via GitHub Search. ------ [18:14] (#t=18:14) Validating via GitHub Insights. --------- <a href= "https://github.com/pmndrs/zustand/network/dependents">GitHub Network Dependents</a>. ------ [20:19] (#t=20:19) Validating via the package.json file. --------- [Syntax Episode 563] (https://syntax.fm/563) . <a id="Hit_us_up_on_Socials_29"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

18 Nov 2024

22 MINS

22:18

18 Nov 2024

#850

848: Web Components Can’t Save Us with Scott Jehl

Scott and Wes talk with Scott Jehl about the benefits, challenges, and use cases of web components, particularly in design systems and performance. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:55] (#t=00:55) Scott’s background and career ------ <a href= "https://abookapart.com/products/responsible-responsive-design">Responsible Responsive Design</a> ------ [Webpagetest.org] (https://www.webpagetest.org/) --- [06:46] (#t=06:46) An overview of web components --- [09:06] (#t=09:06) Why should people care about web components? --- [13:16] (#t=13:16) Should you write your own web components? --- [14:39] (#t=14:39) Reactivity in web components --- [15:56] (#t=15:56) <a href= "https://github.com/WICG/webcomponents/blob/gh-pages/proposals/DOM-Parts.md"> DOM parts</a> --- [18:23] (#t=18:23) Styling web components --- [22:08] (#t=22:08) Brought to you by [Sentry.io] (https://sentry.io) --- [22:33] (#t=22:33) CSS custom properties ------ [Mux Player Customizer] (https://player.style/) --- [24:28] (#t=24:28) Responsive video --- [28:27] (#t=28:27) The polyfill use case --- [30:55] (#t=30:55) Shadow DOM challenges --- [36:04] (#t=36:04) Web components in design systems --- [41:58] (#t=41:58) How are people using web components? --- [43:25] (#t=43:25) Web components and server-side rendering --- [45:00] (#t=45:00) Scott’s thoughts on build tools --- [47:33] (#t=47:33) Sick Picks & Shameless Plugs <a id="Sick_Picks_26"></a>Sick Picks --- Scott: [Enhance] (https://enhance.dev/) <a id="Shameless_Plugs_30"></a>Shameless Plugs --- Scott: ------ [Squarespace is hiring] (https://www.squarespace.com/about/careers) ------ [Web Components Demystified] (https://scottjehl.com/learn/webcomponentsdemystified/) - Get 30% off with coupon code “syntax” ------ [Web Components Community Group] (https://github.com/w3c/webcomponents-cg) <a id="Hit_us_up_on_Socials_37"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

15 Nov 2024

51 MINS

51:19

15 Nov 2024

#849

847: Syntax Holiday Gift Guide

Scott and Wes are back with their annual Syntax Holiday Gift Guide! They’ve curated the best gadgets, tools, games, and even kitchen essentials for the dev in your life — plus a few treats anyone would love to unwrap. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:46] (#t=00:46) Brought to you by [Sentry.io] (http://Sentry.io) . ------ [Open Source Pledge Members] (https://opensourcepledge.com/members/) . --- [01:59] (#t=01:59) Syntax holiday gift guide. --- [02:25] (#t=02:25) Our absolute favorites. ------ [Leatherman Arc] (https://amzn.to/3NCxBOE) . ------ [Peak Design Everyday] (https://amzn.to/4eSis84) . ------ [1.5 KG of Maldon] (https://amzn.to/3BVE194) , <a href= "https://amzn.to/48eDKu7">Salt Cellars</a>. ------ [Anker Cube] (https://amzn.to/4fhBNiV) . ------ [Anker MagGo] (https://amzn.to/48VbCfW) . ------ [Theragun] (https://amzn.to/3UfSses) , <a href= "https://amzn.to/4dYOPke">Off-Brand Massage Gun</a>. ------ Subscription to [Cursor] (https://www.cursor.com/) , [Claude] (https://claude.ai/) , <a href= "https://chatgpt.com/">ChatGPT</a>. ------ [Syntax Swag] (https://sentry.shop/) . --- [13:33] (#t=13:33) Our (Scott’s) top games. ------ <a href= "https://store.steampowered.com/app/427520/Factorio/">Factorio</a>. ------ [Cascadia] (https://amzn.to/3AhtrZt) . ------ [Azul] (https://amzn.to/48fmqoA) . ------ <a href= "https://store.steampowered.com/steamdeck">SteamDeck</a>. --- [19:01] (#t=19:01) Gifts under $30. ------ Braided USB-C Cables ------ [Right Angle Thunderbolt] (https://amzn.to/4exv7w2) . ------ [Battery Daddy] (https://amzn.to/3YAJ6N7) . ------ <a href= "https://www.amazon.com/PopSockets-Compatible-Included-Wireless-Charging/dp/B0CDFCWYNT/?tag=leveluptuts01-20"> MagSafe Popsocket</a>. ------ <a href= "https://www.amazon.ca/Limited-Nutmeg-Herbal-Moisturizing-Lotion/dp/B0CCQV56HH?tag=webo080-20"> Hempz Apple Cider + Nutmeg Hand Lotion</a>. ------ [Mens Cremo Body Wash] (https://amzn.to/3YxHq6L) . --- [27:50] (#t=27:50) Clothing gifts. ------ <a href= "https://www.uniqlo.com/us/en/men/bottoms/jeans/selvedge">Uniqlo Stretch Selvedge Denim</a>. ------ [Naked and Famous Selvedge Denim] (https://www.nakedandfamousdenim.com/) . ------ [Scott DU/ER Jeans] (https://shopduer.com/collections/mens-stretch-jeans) . ------ Wool Toque ------ Anything from [Huckberry] (https://huckberry.com/) . --- [35:02] (#t=35:02) Desk item gifts. ------ <a href= "https://www.logitech.com/en-us/products/mice/mx-master-3s.html">MX3s Master Mouse</a> ------ <a href= "https://www.target.com/p/7oz-navy-exterior-painted-glass-with-glass-lid-introvert-candle-blue-opalhouse-8482/-/A-87674088#lnk=sametab"> Target Candles</a> ------ <a href= "https://www.amazon.ca/gp/product/B0BZ7ZDVRW/?tag=webo080-20">Candle Melter Wax</a>. ------ Laptop Stand --------- [Rain Design mStand] (https://www.raindesigninc.com/mstand.html) . --------- Any Foldable Amazon Stand ------ [Desk Treadmill] (https://amzn.to/3NBKJDI) . ------ [Insta360 Link 2] (https://www.insta360.com/product/insta360-link2) . ------ [Small Rig Rotatable Collar Mount] (https://amzn.to/3Ulk1TD) . ------ [Thermal Printer] (https://amzn.to/4dVx1Gr) . ------ Cable Management Straps + Clips ------ [Mini Tripod] (https://amzn.to/3AcMvIr) . ------ [Super Clamp] (https://amzn.to/4dYeXMb) . ------ [Fishskyn] (https://fishskyn.com/) . --- [45:02] (#t=45:02) Kids gifts. ------ [Yoto Player] (https://amzn.to/4dYeXMb) . ------ [Toniebox] (https://amzn.to/3A9RWb0) . ------ [First Cat in Space] (https://amzn.to/3YeYGfU) . ------ [Bathbombs] (https://amzn.to/48NhUxT) . ------ [Kahn Academy Kids App] (https://learn.khanacademy.org/khan-academy-kids/) . ------ [Codespark] (https://codespark.com/) . --- [51:11] (#t=51:11) Kitchen gifts. ------ [Carbon Steel Frying Pan] (https://amzn.to/3UiTXIY) . ------ [Viral Egg Cooker] (https://amzn.to/3Yw3sXH) . ------ [Glass Straws] (https://amzn.to/4f5u7QM) . ------ [Danish Whisk] (https://amzn.to/4hfryNG) . ------ [Oxo Salt + Pepper Grinders] (https://amzn.to/3YflmfZ) . ------ [Paper Wheels] (https://amzn.to/4fflVNO) . ------ [Whetstone] (https://amzn.to/3UkCsIl) . ------ [WÜSTHOF Nakiri Knife] (https://amzn.to/4ffmqHG) . ------ [Carbon Knife Co] (https://carbonknifeco.com/) . ------ [Can Tumbler Glasses] (https://amzn.to/4hc5jIv) . ------ [Squirrel Rice Paddle] (https://amzn.to/3Yyq4qw) . ------ [OTOTO Splatypus Jar Spatula] (https://amzn.to/48lR6ou) . --- [59:02] (#t=59:02) Eatables. ------ Hot Sauce: --------- [Truff Hot Sauce] (https://amzn.to/4dRHeUB) . --------- [Secret Aardvark] (https://amzn.to/4e2eoRk) . --------- [Cholula Gift Pack] (https://amzn.to/4he7Phq) . --------- [Laoganma Chili Crisp] (https://amzn.to/3YyBb2Q) . --------- [Merfs] (https://amzn.to/40gtj7g) . ------ [Bachan’s Japanese BBQ Sauce] (https://amzn.to/3NzcPPZ) . --- [01:00:51] (#t=01:00:51) Smart home gifts. ------ Smart Dimmers ------ <a href= "https://www.espressif.com/en/products/socs/esp32">ESP32</a> + [WS2815 LED Strips] (https://www.aliexpress.com/item/32961181562.html) --- [01:03:06] (#t=01:03:06) Shameless Plugs. <a id="Shameless_Plugs_84"></a>Shameless Plugs --- Scott: [Syntax on YouTube] (www.youtube.com/@syntaxfm) <a id="Hit_us_up_on_Socials_89"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

13 Nov 2024

1 HR 03 MINS

1:03:41

13 Nov 2024

#848

846: Talking EVs: Range Anxiety, Charging, and Tech

Scott and Wes unpack their experiences as electric car owners, sharing the highs and lows of making the switch. From range anxiety to charging infrastructure and cost savings, they talk about everything from the tech perks to the unexpected challenges of driving electric. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [02:11] (#t=02:11) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [03:14] (#t=03:14) What cars and how long have we had them. ------ <a href= "https://www.hyundai.com/uk/en/models/new-ioniq5.html">Hyundai IONIQ 5</a>. ------ [Tesla Model Y Long Range] (https://ts.la/wes189166) . --- [10:41] (#t=10:41) Range and dealing with range anxiety. --- [11:45] (#t=11:45) The <a href= "https://www.epa.gov/">EPA</a> specs. --- [12:24] (#t=12:24) Things that affect range. --- [14:46] (#t=14:46) Charging. --- [17:52] (#t=17:52) <a href= "https://www.transportation.gov/rural/ev/toolkit/ev-basics/charging-speeds"> Charging levels</a>. ------ [17:56] (#t=17:56) Level 1 charging. ------ [19:01] (#t=19:01) Level 2 charging. ------ [19:39] (#t=19:39) Level 3 charging. ------ [20:10] (#t=20:10) <a href= "https://chargehub.com/en/electric-car-charging-guide.html">Charging standards</a>. --- [21:51] (#t=21:51) Electric car pricing. --- [25:56] (#t=25:56) <a href= "https://www.sciencedirect.com/science/article/abs/pii/B9780123973146000115"> Regenerative braking</a>. --- [27:27] (#t=27:27) General maintenance. --- [29:04] (#t=29:04) Pricing and expenses. --- [31:48] (#t=31:48) Machine Gun Kelly Effect. --- [36:46] (#t=36:46) Would you go completely electric? --- [38:46] (#t=38:46) Electric-only tech. --- [40:57] (#t=40:57) Buying a new EV. --- [42:21] (#t=42:21) Edison Motors [website] (https://www.edisonmotors.ca/) , <a href= "https://www.tiktok.com/@_edison.motors?lang=en">TikTok</a>. <a id="Hit_us_up_on_Socials_28"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

11 Nov 2024

44 MINS

44:06

11 Nov 2024

#847

845: Are companies hiring? State of the dev job market with Taylor Desseyn

Scott and Wes talk with Taylor Desseyn about the shifting developer job market. Taylor shares practical tips for standing out, building genuine connections, and finding opportunities in a competitive hiring landscape. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:38] (#t=01:38) Meet Taylor Desseyn --- [03:51] (#t=03:51) Is the dev job market as bad as it seems? --- [06:47] (#t=06:47) How to stand out when applying for a dev job? --- [11:03] (#t=11:03) Who is getting hired? --- [14:16] (#t=14:16) What tech/languages are companies hiring for right now? --- [16:37] (#t=16:37) Is there less work? --- [20:10] (#t=20:10) The small things that get you hired --- [24:19] (#t=24:19) What to do when you get laid off --- [27:42] (#t=27:42) Brought to you by [Sentry.io] (http://Sentry.io) --- [28:07] (#t=28:07) How to make yourself more appealing to employers --- [32:39] (#t=32:39) Networking tips and tricks --- [39:01] (#t=39:01) Remote work and office return trends --- [40:58] (#t=40:58) Why you should negotiate carefully --- [43:38] (#t=43:38) What’s the most important thing right now for getting hired? --- [45:48] (#t=45:48) Should devs understand stakeholders and business goals? --- [46:42] (#t=46:42) Creating a good resume --- [52:00] (#t=52:00) Sick Picks & Shameless Plugs <a id="Sick_Picks_23"></a>Sick Picks --- Taylor: <a href= "https://www.target.com/p/desktop-microphone-heyday-8482-stone-white/-/A-81505897"> heydey mic</a> --- [Randy Rektor’s YouTube Channel] (https://www.youtube.com/@randyrektor) <a id="Shameless_Plugs_28"></a>Shameless Plugs --- Taylor: ------ [Torc] (https://torc.dev) ------ <a href= "https://podcasts.apple.com/us/podcast/guidance-counselor-2-0/id1256154656"> Guidance Counselor 2.0</a> <a id="Hit_us_up_on_Socials_34"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

08 Nov 2024

57 MINS

57:05

08 Nov 2024

#846

844: TypeScript, Branded Types, Streaming vs Polling + More

Scott and Wes serve up listener questions on everything from SvelteKit’s limits and the quirks of branded types in TypeScript to handling email queues and secure token storage in cookies. Plus, they get into app security, the evolution of checkout flows, and why QA teams can actually be game-changers for dev teams. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:50] (#t=00:50) Catching up. --- [01:52] (#t=01:52) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [02:56] (#t=02:56) What are the limitations of SvelteKit? --- [06:41] (#t=06:41) Svelte 5 updates. --- [07:53] (#t=07:53) Branded types in TypeScript. ------ <a href= "https://egghead.io/blog/using-branded-types-in-typescript">EggHead.io Blog</a>. --- [11:56] (#t=11:56) Queue applications and a ‘poor man’s queue’. --- [17:20] (#t=17:20) The real value of a functional QA team. --- [21:34] (#t=21:34) Invoker commands. ------ <a href= "https://open-ui.org/components/invokers.explainer/">Invokers Explained</a>. ------ [Denver Script Talk] (https://www.youtube.com/watch?v=K7lgOnO89mE) . --- [26:29] (#t=26:29) Growing security and permissions concerns. ------ [Little Snitch] (https://obdev.at/products/littlesnitch/index.html) . --- [33:03] (#t=33:03) Stripe vs PayPal in 2024. --- [38:24] (#t=38:24) Christmas gift guide. --- [38:39] (#t=38:39) Websockets vs streams vs polling. --- [41:04] (#t=41:04) Storing access and refresh tokens in a cookie. --- [45:41] (#t=45:41) Shipping with TypeScript errors. --- [49:34] (#t=49:34) Sick Picks + Shameless Plugs. <a id="Sick_Picks_25"></a>Sick Picks --- Scott: [The Black Stuff Deodorant] (https://theblackstuff.com/) . --- Wes: [Apple Watch Charging Brick] (https://amzn.to/409anar) . <a id="Shameless_Plugs_30"></a>Shameless Plugs --- Scott: [Syntax on YouTube] (https://www.youtube.com/@syntaxfm) . <a id="Hit_us_up_on_Socials_35"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

06 Nov 2024

56 MINS

56:22

06 Nov 2024

#845

843: Copilot Kills Cursor? Reacting to Github Universe Keynote

Scott and Wes react to the big GitHub Universe announcements, recorded live at GitHub Universe. They dive into Copilot’s new features, exploring how its advancements stack up against Cursor AI in the battle for the ultimate AI-driven developer tool. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:12] (#t=01:12) Our Syntax Meetup. --- [02:54] (#t=02:54) AI is everywhere. --- [03:22] (#t=03:22) Sherlocking and jockeying for position. --- [04:49] (#t=04:49) GitHub Copilot introduces alternative LLMs. ------ [GitHub Copilot] (https://github.com/features/copilot) --- [06:31] (#t=06:31) New tools are build upon existing LLMs. --- [09:14] (#t=09:14) VSCode reclaiming ground from Cursor. ------ [Cursor] (https://www.cursor.com/) --- [10:31] (#t=10:31) The new features. ------ [10:34] (#t=10:34) Multi-file editing. ------ [10:54] (#t=10:54) Use-cases for multi-file editing. ------ [12:58] (#t=12:58) Multi-model selection. ------ [13:05] (#t=13:05) Repo indexing. ------ [13:50] (#t=13:50) <a href= "https://docs.github.com/en/copilot/customizing-copilot/adding-custom-instructions-for-github-copilot"> Copilot instructions</a>. ------ [14:34] (#t=14:34) Examples of <a href= "https://github.com/PatrickJS/awesome-cursorrules">Cursor rules</a>. ------ [16:39] (#t=16:39) No mention of multiple-line suggestions. ------ [18:02] (#t=18:02) Multi-file edit? ------ [20:26] (#t=20:26) <a href= "https://githubnext.com/projects/copilot-for-pull-requests">Code review</a>. ------ [22:36] (#t=22:36) <a href= "https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github"> GitHub Pull Requests plugin</a>. ------ [24:34] (#t=24:34) Investing in AI ‘big bets’. ------ [26:29] (#t=26:29) Scott’s mysterious YouTube unreleased feature. ------ [27:11] (#t=27:11) 3-minute YouTube shorts. --------- <a href= "https://www.tiktok.com/@wesbos/video/7427155762322951430?is_from_webapp=1&sender_device=pc&web_id=7430878331563820587"> Wes’ TikTok</a>. ------ [28:29] (#t=28:29) <a href= "https://github.com/marketplace">GitHub Marketplace</a>. ------ [32:18] (#t=32:18) <a href= "https://githubnext.com/projects/copilot-workspace/">Copilot Workspace</a>. ------ [34:53] (#t=34:53) Copilot Workspace features yet to come. ------ [36:25] (#t=36:25) <a href= "https://githubnext.com/projects/github-spark">GitHub Spark</a>. --------- [Bolt.new] (https://bolt.new/) . --- [42:44] (#t=42:44) Final thoughts on Copilot vs Cursor. --- [44:03] (#t=44:03) What products do you think are in trouble? --- [50:26] (#t=50:26) Sick Picks & Shameless Plugs. <a id="Sick_Picks_37"></a>Sick Picks --- Scott: [Waymo] (https://waymo.com/) . --- Wes: [Waymo] (https://waymo.com/) . <a id="Hit_us_up_on_Socials_42"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

04 Nov 2024

55 MINS

55:07

04 Nov 2024

#844

842: There's Python in my JavaScript! with Andrea Giammarchi

Scott and Wes talk with Andrea Giammarchi (aka WebReflection) about his projects, including LinkDOM and PyScript, and the exciting future of running Python in the browser via WebAssembly. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:04] (#t=01:04) Andrea’s background and early work ------ <a href= "https://github.com/WebReflection/linkedom">LinkDOM</a> --- [07:25] (#t=07:25) Brought to you by [Sentry.io] (https://sentry.io) --- [09:56] (#t=09:56) <a href= "https://pyscript.com/">Pyscript</a> --- [14:31] (#t=14:31) Why run <a href= "https://www.python.org/">Python</a> in the browser? --- [20:17] (#t=20:17) Using <a href= "https://webassembly.org/">WebAssembly</a> to run different languages in JS --- [23:33] (#t=23:33) The advantages of WebAssembly --- [25:55] (#t=25:55) What excites Andrea about WASM ------ <a href= "https://es.discourse.group/t/proposal-esx-as-core-js-feature/1511"> Proposal: ESX as core JS feature</a> --- [31:10] (#t=31:10) What is <a href= "https://github.com/WebAssembly/WASI">WASI</a>? --- [32:21] (#t=32:21) Andrea’s experience with IOT and microcontrollers --- [35:35] (#t=35:35) How can the JS ecosystem be improved? --- [38:07] (#t=38:07) Should we have reactivity in the browser? ------ [Signals] (https://github.com/WebReflection/signal) --- [41:06] (#t=41:06) Andrea’s thoughts on server-side APIs --- [43:43] (#t=43:43) Andrea’s thoughts on [TypeScript] (https://www.typescriptlang.org/) --- [49:13] (#t=49:13) Sick Picks & Shameless Plugs <a id="Sick_Picks_23"></a>Sick Picks --- Andrea: <a href= "https://www.espressif.com/en/products/socs/esp32">ESP32</a> <a id="Shameless_Plugs_27"></a>Shameless Plugs --- Andrea: [Andrea’s X / Twitter] (https://x.com/WebReflection) <a id="Hit_us_up_on_Socials_31"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

01 Nov 2024

53 MINS

53:45

01 Nov 2024

#843

841: Spooky Web Dev Horror Stories - PART 2

Scott and Wes continue to share hair-raising developer horror stories submitted by listeners. From accidentally severing access to crucial databases to a limitless coupon code that cost millions, these tales will have you on the edge of your seat. Tune in for more wild mishaps, close calls, and hard-learned lessons from the dark side of coding. You won’t want to miss this second round of spooky web dev stories! <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:49] (#t=00:49) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [01:32] (#t=01:32) ‘Monkey Business’ --- [03:21] (#t=03:21) ‘Spooky Integration Bug’ --- [06:25] (#t=06:25) ‘Worst Case Wake Up’ --- [08:57] (#t=08:57) ‘Severed Trunk and Missing Backups’ --- [11:21] (#t=11:21) ‘Brute Force Too Brutal’ --- [12:30] (#t=12:30) ‘A Dorm Room Bee Movie’ --- [15:46] (#t=15:46) ‘No Goats’ --- [16:45] (#t=16:45) ‘Pokémon Problems’ --- [18:08] (#t=18:08) ‘Late Night’ --- [22:21] (#t=22:21) ‘Bootcamp Bungle’ --- [26:19] (#t=26:19) ‘Film School F*** Up’ --- [30:26] (#t=30:26) ‘AWS Clusterf***’ --- [31:26] (#t=31:26) ‘Limitless Coupon Disaster’ ------ [Episode #451] (https://syntax.fm/451) , <a href= "https://syntax.fm/609">Episode #609</a>. --- [33:55] (#t=33:55) ‘Ruined Vacation’ --- [35:47] (#t=35:47) ‘Console.swear’ --- [37:28] (#t=37:28) ‘Another Coupon Disaster’ --- [40:46] (#t=40:46) ‘The Doctor’ ------ [Wes’ Burner List] (https://github.com/wesbos/burner-email-providers) . --- [43:01] (#t=43:01) ‘Marketing Nightmare’ --- [45:10] (#t=45:10) What did we learn this year? ------ [45:12] (#t=45:12) You need processes. ------ [48:42] (#t=48:42) Ask for help. ------ [49:44] (#t=49:44) Dry-run queries + soft delete. ------ [51:14] (#t=51:14) Code reviews. --------- [Episode #830] (https://syntax.fm/830) . ------ [52:11] (#t=52:11) Version control. --- [53:58] (#t=53:58) Sick Picks + Shameless Plugs. <a id="Sick_Picks_35"></a>Sick Picks --- Scott: [Nobody Wants This] (https://www.imdb.com/title/tt26933824/) . --- Wes: [Truffle Hot Sauce] (https://www.truff.com/) . <a id="Shameless_Plugs_40"></a>Shameless Plugs --- Scott: [syntax.fm] (https://syntax.fm) . --- Wes: [syntax.fm/spooky] (https://syntax.fm/spooky) . <a id="Hit_us_up_on_Socials_45"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

30 Oct 2024

58 MINS

58:05

30 Oct 2024

#842

840: Spooky Web Dev Horror Stories - PART 1

Scott and Wes unpack the spookiest web dev stories submitted by listeners in this episode. From forgotten MX records to infinite loops, these real-life coding horrors will have you double-checking your WHERE clauses and git backups. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:39] (#t=00:39) Brought to you by [Sentry.io] (https://sentry.io/syntax) . --- [00:48] (#t=00:48) What is Spooky Stories? ------ [Submit a story] (https://syntax.fm/spooky) . --- [02:45] (#t=02:45) ‘Needs a Coffee’ --- [04:43] (#t=04:43) ‘Deleting Github’ ------ <a href= "https://twitter.com/defunkt/status/1719421402867204537">Defunkt X Post</a>. --- [07:42] (#t=07:42) ‘Rejected’ --- [09:08] (#t=09:08) ‘Infinite Loop’ --- [09:26] (#t=09:26) ‘MySqueeel Horror’ --- [11:02] (#t=11:02) ‘Pet Company’ --- [12:09] (#t=12:09) ‘Git Corrupted’ --- [12:57] (#t=12:57) ‘Circular Horror’ --- [14:25] (#t=14:25) ‘The Haunting of the Forgotten MX Records’ <a id="Hit_us_up_on_Socials_19"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

28 Oct 2024

17 MINS

17:17

28 Oct 2024

#841

839: Prisma ORM: Local First, Typed SQL Queries and Serverless with Søren Bramer Schmidt

Scott and Wes talk with Søren Bramer Schmidt, Founder and CEO of Prisma, about database best practices, including the latest developments in serverless, local-first, and typed SQL solutions. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [02:55] (#t=02:55) Søren’s thoughts on GraphQL --- [03:53] (#t=03:53) Brought to you by [Sentry.io] (https://sentry.io) --- [06:57] (#t=06:57) Common database mistakes --- [08:52] (#t=08:52) Prisma’s stability and user experience --- [10:42] (#t=10:42) Typed SQL and advanced querying ------ <a href= "https://www.prisma.io/blog/announcing-typedsql-make-your-raw-sql-queries-type-safe-with-prisma-orm"> Announcing TypedSQL: Make your raw SQL queries type-safe with Prisma ORM</a> ------ [Prisma Optimize] (https://www.prisma.io/data-platform/optimize) --- [20:47] (#t=20:47) Serverless challenges and solutions ------ [Prisma Accelerate] (https://www.prisma.io/data-platform/accelerate) --- [27:11] (#t=27:11) Cloudflare’s potential to dethrone AWS --- [29:13] (#t=29:13) Prisma and local-first development ------ [Prisma & Expo: A Better Path to Local-First Apps | App.js Conf 2024] (https://www.youtube.com/watch?v=keZYUjAYSJM) --- [35:30] (#t=35:30) Making local-first development mainstream --- [40:10] (#t=40:10) Challenges with async --- [42:43] (#t=42:43) Søren’s thoughts on [Drizzle] (https://orm.drizzle.team/) --- [43:41] (#t=43:41) Søren’s favorite database --- [47:21] (#t=47:21) The read your writes problem --- [48:58] (#t=48:58) Prisma hosted Postgres --- [51:44] (#t=51:44) Sick Picks & Shameless Plugs <a id="Sick_Picks_25"></a>Sick Picks --- Søren: [Cursor] (https://www.cursor.com/) <a id="Shameless_Plugs_29"></a>Shameless Plugs --- Søren: ------ 1: <a href= "https://www.prisma.io/blog/prisma-optimize-early-access">Prisma Optimize</a> ------ 2: Prisma Postgres (coming soon) <a id="Hit_us_up_on_Socials_35"></a>Hit us up on Socials! Syntax: [X] (https://twitter.com/syntaxfm) <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> [Threads] (https://www.threads.net/@syntax_fm) Wes: [X] (https://twitter.com/wesbos) <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: [X] (https://twitter.com/stolinski) <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: [X] (https://twitter.com/randyrektor) <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a> ... Read more

25 Oct 2024

54 MINS

54:52

25 Oct 2024

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists

#864

862: Svelte 5 Is Here!

#863

861: Local Data: Sqlite, LocalStorage, Session, Cookies and IndexDB

#862

860: Module Federation Microfrontends with ByteDance’s Zack Jackson

#861

859: Streaming Video in 2025

#860

858: How to Go Deeper With Your Learning

#859

857: How to Look and Sound Good at $10, $100 and $1000 With Producer Randy

#858

856: Loading UIs, Rust Webpack, New Cookie Types, Conference Talks + More

#857

855: Fast Websites: The New Speculation Rules API

#856

854: Animating the Web With Matt Perry: Exploring motion.dev

#855

853: The State of Frontend

#854

852: Cloudflare Tunnels

#853

851: The Future of VS Code and Copilot

#852

850: Manage State in JavaScript Like a Pro!

#851

849: How to Pick a JS Package

#850

848: Web Components Can’t Save Us with Scott Jehl

#849

847: Syntax Holiday Gift Guide

#848

846: Talking EVs: Range Anxiety, Charging, and Tech

#847

845: Are companies hiring? State of the dev job market with Taylor Desseyn

#846

844: TypeScript, Branded Types, Streaming vs Polling + More

#845

843: Copilot Kills Cursor? Reacting to Github Universe Keynote

#844

842: There's Python in my JavaScript! with Andrea Giammarchi

#843

841: Spooky Web Dev Horror Stories - PART 2

#842

840: Spooky Web Dev Horror Stories - PART 1

#841

839: Prisma ORM: Local First, Typed SQL Queries and Serverless with Søren Bramer Schmidt