Podurama logo

 Podurama

 

Home

 

Trending

 

Personal

 

Your Podcasts

 

New Episodes

 

My Files

 

Favourite Episodes

 

Tags (Folders)

 

Recently Played

 

Bookmarks

 

Followed Playlists

YOUR PLAYLISTS

Syntax - Tasty Web Development Treats podcast

…

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.

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.

 

All

Progress

Duration

Release Date

#762

760: Pro VSCode Setups

Join Scott and Wes as they dish out the juiciest VSCode secrets for coding like a boss (or a Tolinski)! From speedy navigation to must-have extensions and the sickest themes, get ready to level up your coding game. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:47] (#t=00:47) Brought to you by [Sentry.io] (https://www.sentry.io/syntax) . --- [01:44] (#t=01:44) A recording bug. --- [03:18] (#t=03:18) VSCode versions. --- [05:59] (#t=05:59) Tabs or no tabs. --- [10:32] (#t=10:32) Navigation tips. --- [11:35] (#t=11:35) Mouse and trackpad input. --- [13:43] (#t=13:43) Move, select and expand by --- [19:07] (#t=19:07) Interface tips. --- [19:17] (#t=19:17) Sidebars. --- [24:23] (#t=24:23) Sticky headers. --- [26:21] (#t=26:21) Activity bar. --- [30:30] (#t=30:30) Show or hide? --- [31:35] (#t=31:35) Profiles. --- [32:43] (#t=32:43) Keyboard Shortcuts. --- [32:49] (#t=32:49) Renaming. --- [34:32] (#t=34:32) Extensions. ------ [34:45] (#t=34:45) <a href= "https://marketplace.visualstudio.com/items?itemName=jkjustjoshing.vscode-text-pastry"> Text pastry</a>. ------ [36:43] (#t=36:43) <a href= "https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments"> Better comments</a>. ------ [39:03] (#t=39:03) <a href= "https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag"> Auto rename tag</a>. ------ [40:02] (#t=40:02) <a href= "https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case"> Change case</a>. ------ [40:25] (#t=40:25) <a href= "https://marketplace.visualstudio.com/items?itemName=earshinov.permute-lines"> Permute lines</a>. ------ [41:26] (#t=41:26) <a href= "https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils"> File utils</a>. ------ [43:20] (#t=43:20) <a href= "https://marketplace.visualstudio.com/items?itemName=richie5um2.vscode-sort-json"> Sort JSON objects</a>. ------ [43:50] (#t=43:50) <a href= "https://marketplace.visualstudio.com/items?itemName=qwtel.sqlite-viewer"> SQLite viewer</a>. ------ [44:29] (#t=44:29) <a href= "https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker"> Spell checker</a>. ------ [45:42] (#t=45:42) <a href= "https://marketplace.visualstudio.com/items?itemName=drcika.apc-extension"> APC</a>. --- [49:19] (#t=49:19) Themes. --- <a href= "https://marketplace.visualstudio.com/items?itemName=SyntaxFM.syntaxfm"> Syntax Theme</a> --- [53:05] (#t=53:05) Final tricks. --- <a href= "https://marketplace.visualstudio.com/items?itemName=WooodHead.vscode-wrap-console-log-simple"> Log Wrapper</a> --- [57:44] (#t=57:44) What about the AI stuff? --- [01:00:10] (#t=01:00:10) Sick Picks & Shameless Plugs. <a id="Sick_Picks_38"></a>Sick Picks --- Scott: [Flicker Free Ultra Definition Phillips Bulbs] (https://amzn.to/3TL1SNY) . --- Wes: <a href= "https://www.amazon.ca/IRIS-USA-Inc-CNL-5-Storage/dp/B07DFBSTFR">Clear Shoe Box Organizers</a>. <a id="Shameless_Plugs_43"></a>Shameless Plugs --- Scott: [Syntax Newsletter] (https://syntax.fm/snackpack) . <a id="Hit_us_up_on_Socials_47"></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

Yesterday

1 HR 05 MINS

1:05:36

Yesterday

#761

759: How to Easily Explore Coding Ideas

Scott and Wes serve up top tools and tricks for rapid idea execution, from JavaScript services like Valtown and Observable to database solutions including LowDB and Google Sheets integration. Get ready to streamline your development ideation process with these tasty insights! <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [02:16] (#t=02:16) Brought to you by [Sentry.io] (https://www.sentry.io/syntax) . --- [03:14] (#t=03:14) JavaScript Services. ------ [03:43] (#t=03:43) <a href= "https://www.val.town/">Valtown</a>. ------ [05:44] (#t=05:44) <a href= "https://observablehq.com/">Observable</a>. ------ [06:35] (#t=06:35) <a href= "https://jbook.qiushiyan.dev/">Notebooks</a>. ------ [08:23] (#t=08:23) <a href= "https://docs.deno.com/runtime/manual/tools/jupyter">Deno Juypter Notebooks</a>. ------ [09:51] (#t=09:51) <a href= "https://svelte.dev/repl/hello-world?version=4.2.15">Svelte Repl</a>. ------ [10:32] (#t=10:32) Playgrounds: TypeScript, Tailwind, etc… --- [11:05] (#t=11:05) CSS Services. ------ [11:10] (#t=11:10) <a href= "https://codepen.io/">CodePen</a>. --- [13:14] (#t=13:14) Full stack services. --- [13:47] (#t=13:47) Your own stack. Hot Tips & Cool Treats. ------ [Wes’s Hot Tips] (https://github.com/wesbos/hot-tips/) . ------ [Scott’s Cool Treats] (https://github.com/stolinski/cool-treats) . ------ [21:01] (#t=21:01) <a href= "https://bun.sh/docs/api/file-system-router">Bun file routing</a>. ------ [24:25] (#t=24:25) Tooling and tips. --- [26:30] (#t=26:30) Database. ------ [26:51] (#t=26:51) Write to a file. ------ [27:40] (#t=27:40) <a href= "https://github.com/typicode/lowdb">LowDB</a>. ------ [29:00] (#t=29:00) <a href= "https://orm.drizzle.team/docs/get-started-sqlite">SQLite + Drizzle</a>. ------ [29:40] (#t=29:40) Google Sheets. ------ [30:06] (#t=30:06) <a href= "https://sheetdb.io/">Sheet DB</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

22 Apr 2024

31 MINS

31:38

22 Apr 2024

#760

758: Web Awesome with Konnor Rogers + Cory LaViska

Font Awesome is back with Web Awesome, an open source library of web components that will work with any framework because it’s based on standards. Today on Syntax we have Konnor Rogers and Cory LaViska here to talk all things Web Awesome. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:47] (#t=00:47) Brought to you by [Sentry.io] (https://www.sentry.io/syntax) . --- [02:49] (#t=02:49) What is Shoelace? --- [07:21] (#t=07:21) What is Font Awesome? --- [08:07] (#t=08:07) Font Awesome is getting into Web Components? --- [11:35] (#t=11:35) What is Shoelace’s relationship with Web Awesome? --- [13:33] (#t=13:33) Is the idea to make it quick to get up and running? --- [15:46] (#t=15:46) What is the autoloader? --- [16:29] (#t=16:29) Where does Web Awesome fit in the ecosystem? --- [18:13] (#t=18:13) What does the styling game look like? --- [20:33] (#t=20:33) What is Part in CSS? --- <a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Part mdn web docs</a> --- [22:06] (#t=22:06) The reason we’re so stoked with Web Components. --- [23:32] (#t=23:32) Custom elements are a natural progression. --- [24:51] (#t=24:51) What are your thoughts on Open UI initiatives? --- [Floating UI] (https://floating-ui.com/) --- [Close Watcher] (https://github.com/WICG/close-watcher) --- [Can I Use] (https://caniuse.com/mdn-api_closewatcher) --- [27:40] (#t=27:40) Wes’ escape key conundrum. --- [30:21] (#t=30:21) A bug on the Syntax site. --- [31:19] (#t=31:19) Let’s talk about <a href= "https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=nav_search&result=project&term=webawesome"> Kickstarter</a>. --- [35:24] (#t=35:24) Do you know what premium inputs will be available in Web Awesome? --- [36:12] (#t=36:12) Rich text editor. --- [40:18] (#t=40:18) Setting goals. --- [41:48] (#t=41:48) Kickstarter giveaways. --- [42:47] (#t=42:47) Have you tried drag and drop? --- <a href= "https://github.com/atlassian/pragmatic-drag-and-drop">Pragmatic Drag and Drop</a> --- [44:57] (#t=44:57) The layout component. --- [48:50] (#t=48:50) What are your favorite components? --- [50:29] (#t=50:29) Sick Picks + Shameless Plugs. <a id="Sick_Picks_35"></a>Sick Picks --- Konnor: [Enhance.dev] (https://enhance.dev/) , <a href= "https://extism.org/">Extism.org</a> --- Cory: [Lit.dev] (https://lit.dev/) <a id="Shameless_Plugs_40"></a>Shameless Plugs --- Cory: <a href= "https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=nav_search&result=project&term=webawesome"> Kickstarter</a> --- Konnor: Everyone involved in open UI <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

19 Apr 2024

1 HR 01 MINS

1:01:07

19 Apr 2024

#759

757: Potluck: Is Gatsby Dead? Shadow Dom, AI Summaries, Self Hosting + More

Scott and Wes serve up answers to community questions, from navigating Light DOM vs. Shadow DOM to diving into tools for data extraction. Plus, they dish out insights on Gatsby in 2024, utilizing JavaScript ‘wheel events’, and explore the possibilities of hosting a website at home. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:51] (#t=00:51) Brought to you by [Sentry.io] (www.sentry.io/syntax) . --- [01:17] (#t=01:17) When should I use Light DOM or Shadow DOM? --- [03:43] (#t=03:43) Do you know of any good tools for extracting data/content from Markup/HTML? --- [LinkeDOM on GitHub] (https://github.com/WebReflection/linkedom) --- [08:29] (#t=08:29) Wanted to ask you guys your opinion on the state of Gatsby in 2024. --- [LocalFirst.fm] (https://www.localfirst.fm/5) --- <a href= "https://twitter.com/vitorsalmeida_/status/1771260380490190934?s=20"> MeteorJS UI Updates</a> --- [15:05] (#t=15:05) Please get the Goodhertz creator on the pod! Would be a great show. --- [Goodhertz Audio Software] (https://goodhertz.com/) --- [16:34] (#t=16:34) Effects that involve the JavaScript ‘wheel’ event. --- [Runway.com] (https://runway.com/) --- [GSAP Animate Anything] (https://gsap.com/) --- <a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations"> CSS Scroll-Driven Animations</a> --- [23:15] (#t=23:15) Best tool for rapidly creating UI from the ground up. --- [Episode 751] (https://syntax.fm/751) --- <a href= "https://www.thinkmill.com.au/open-source">Thinkmill.com</a> --- [27:44] (#t=27:44) Wes, what’s with your frame rate? --- <a href= "https://twitter.com/wesbos/status/1775725925662966192">Frame Rate Testing Results on X</a> --- [32:31] (#t=32:31) Is there any way to host a whole website setting on my PC at home? --- [CJ and Self-Host 101] (https://www.youtube.com/watch?v=Q1Y_g0wMwww) --- [Hetzner.com] (https://www.hetzner.com/) --- <a href= "https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/get-started/"> Cloudflare Docs Create a Tunnel</a> --- [36:52] (#t=36:52) Offline functionality like saving data and syncing data to database? --- [Episode 739] (https://syntax.fm/739) --- [Local-First Web Development] (https://localfirstweb.dev/) --- <a href= "https://www.youtube.com/playlist?list=PLLnpHn493BHHYdXYkKd30aDdN-RfsM_W2"> Syntax Side Dish Explainer Playlist</a> --- [39:41] (#t=39:41) Creating a GPT-like tool that can listen to long audio files. --- <a href= "https://platform.openai.com/docs/guides/speech-to-text">OpenAI Speech to Text</a> --- <a href= "https://github.com/Vaibhavs10/insanely-fast-whisper">Insanely Fast Whisper</a> --- [Deepgram] (https://deepgram.com/) --- [43:51] (#t=43:51) Sick Picks. <a id="Sick_Picks_37"></a>Sick Picks --- Scott: [Hair Powder] (https://amzn.to/4apx5Ni) --- Wes: [Mini Grease Gun] (https://amzn.to/4cwWGG4) <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

17 Apr 2024

48 MINS

48:42

17 Apr 2024

#758

756: CSS Is Getting Mixins + Functions

Scott and Wes chomp through CSS Mixins and Functions, discussing the latest features making their way into CSS. From Tailwind-like classes to fluid typography, join us as we explore the possibilities and practical applications of these new tools. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:24] (#t=01:24) Brought to you by [Sentry.io] (www.sentry.io/syntax) --- [03:00] (#t=03:00) CSS Is getting Functions and Mixins! --- [CSS Mixins and Functions Explainer] (https://css.oddbird.net/sasslike/mixins-functions/) --- <a href= "https://github.com/w3c/csswg-drafts/issues/9350#issuecomment-1939628591"> CSS Working Group Discussion</a> --- [06:19] (#t=06:19) Functions and mixins, how are they different? --- [07:26] (#t=07:26) Don’t get hung up on the syntax, or maybe do. --- [09:12] (#t=09:12) CSS Functions. --- [12:02] (#t=12:02) Some use-cases. --- [15:58] (#t=15:58) CSS Mixins. --- [16:31] (#t=16:31) Tailwind-like classes. --- [17:53] (#t=17:53) Tailwind-like arbitrary syntax. --- [20:08] (#t=20:08) Fluid typography. --- [21:13] (#t=21:13) Let’s talk about logic. <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

15 Apr 2024

25 MINS

25:41

15 Apr 2024

#757

755: Chrome Extensions and Ad Blockers VS Google with Oliver Dunk

We were wrong, Manifest V3 is a big deal. Scott and Wes sit down with Oliver Dunk from Google to dive into the intricate world of Chrome Extensions development. From dissecting Manifest V3 to exploring the evolving landscape of browser security and extension reviews, this conversation covers the present and future of browser customization. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:32] (#t=00:32) Who is Oliver Dunk? --- [02:00] (#t=02:00) Brought to you by [Sentry] (www.sentry.io/syntax) . --- [03:17] (#t=03:17) Manifest V3. --- [08:59] (#t=08:59) How many rules can you add? --- [09:56] (#t=09:56) What even is a rule? --- [10:52] (#t=10:52) Is Google trying to kill ad blockers? --- [13:56] (#t=13:56) What are the bad guys doing with Chrome extensions? --- [15:17] (#t=15:17) Can a browser extension access HTTP-only cookies? --- [16:06] (#t=16:06) Is Chrome reviewing all of these extensions? --- [19:06] (#t=19:06) Is there a way to side-step Google’s review process? --- <a href= "https://www.reddit.com/r/uBlockOrigin/comments/17as8o8/the_real_threat_of_manifest_v3/"> Reddit Thread, The real threat of Manifest V3</a> --- [20:32] (#t=20:32) Do you see the negative chatter? --- [21:18] (#t=21:18) Service workers - how do do you access the DOM? --- [23:32] (#t=23:32) Do you think we’ll see more DOM APIs in service workers? --- [25:58] (#t=25:58) Do you have a favorite Chrome extension? --- [28:33] (#t=28:33) Has Google ever explored something comparable to Boost? --- <a href= "https://developer.chrome.com/docs/extensions/reference/api/sidePanel"> SidePanel</a> --- [33:09] (#t=33:09) Let’s talk about the development stack. --- [35:54] (#t=35:54) 1Password and Chrome. --- [38:39] (#t=38:39) What is the best way to debug an extension? --- [YouTube Chrome for Developers] (https://www.youtube.com/watch?v=Ta-YTDhiBIQ) --- [40:33] (#t=40:33) Manifest V3 and the web request blocking API. --- [41:57] (#t=41:57) Known tracking payloads. --- [44:04] (#t=44:04) Do you think there is a path forward that makes ad-block developers happy? --- [44:45] (#t=44:45) Do you run an ad blocker? --- [45:20] (#t=45:20) Whitelisting and opt-ins. --- [46:38] (#t=46:38) What’s your tech setup? --- [47:18] (#t=47:18) What do you do to stay up to date? --- [47:51] (#t=47:51) Sick Picks + Shameless Plugs. --- [51:47] (#t=51:47) Wait, is Safari adopting V3 as well? <a id="Sick_Picks_36"></a>Sick Picks --- Oliver: [Defunctland YouTube] (https://www.youtube.com/@Defunctland) , [LEMMiNO YouTube] (https://www.youtube.com/@LEMMiNO) <a id="Shameless_Plugs_40"></a>Shameless Plugs --- Oliver: <a href= "https://developer.chrome.com/docs/extensions/get-started">Chrome Extensions Getting Started</a>, <a href= "https://play.web-extensions.dev/">WebExtension Playground</a> <a id="Hit_us_up_on_Socials_44"></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

12 Apr 2024

54 MINS

54:04

12 Apr 2024

#756

754: How to Level Up Your Web Development Career

Ready to level up your career in web development? Join Wes and Scott as they discuss techniques and best practices for advancing in the field. From mastering technical skills to navigating workplace dynamics, this episode offers actionable advice to help you thrive in your career. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:17] (#t=00:17) How can a front-end developer advance in their career? --- [01:10] (#t=01:10) Brought to you by [Sentry] (https://sentry.io/syntax) . --- [01:30] (#t=01:30) Syntax newsletter. --- [Snack Pack] (https://syntax.fm/snackpack) --- [02:02] (#t=02:02) How do you get better at being a developer? ------ [02:22] (#t=02:22) Asking questions. ------ [08:09] (#t=08:09) Get your hands dirty. ------ [Hot Tips] (https://github.com/wesbos/hot-tips) , <a href= "https://github.com/stolinski/cool-treats">Cool Treats</a> ------ [14:07] (#t=14:07) Share what you know. ------ [17:35] (#t=17:35) Target your skills for what is needed. ------ <a href= "https://twitter.com/RyanCarniato/status/1768409228451217800">Ryan Carniato Tweet</a> ------ [Episode 577] (https://syntax.fm/577) ------ <a href= "https://twitter.com/justinfagnani/status/1769856091540857035">Justin Fagnani Tweet</a> ------ [Episode 595] (https://syntax.fm/595) ------ [21:12] (#t=21:12) Get out of your comfort zone. --- [26:55] (#t=26:55) Getting a better job. ------ [27:27] (#t=27:27) Understand the stakeholders. ------ [29:18] (#t=29:18) Find the metric the business cares about and do that. ------ [30:01] (#t=30:01) Make an impression as being the person that gets things done fast and reliably. ------ [31:47] (#t=31:47) Improve communications. ------ [35:04] (#t=35:04) Be the person they want to have in meetings. ------ [37:44] (#t=37:44) Use systems and tools to help your deficiencies. ------ [39:01] (#t=39:01) Dress to impress. ------ [39:32] (#t=39:32) Care. ------ [39:40] (#t=39:40) Cut the cynicism. ------ [Energy Vampire] (https://www.calm.com/blog/energy-vampire) ------ [42:16] (#t=42:16) Don’t put bad stuff out into the world publicly. ------ [44:29] (#t=44:29) Get your camera + mic dialed in. --- [46:23] (#t=46:23) Leveling up at life. ------ [46:32] (#t=46:32) Take care of your shit. ------ [47:40] (#t=47:40) Exercise. ------ [Episode 748] (https://syntax.fm/748) ------ [47:57] (#t=47:57) Eat well. ------ [48:22] (#t=48:22) Sleep as much as you can. ------ [48:26] (#t=48:26) Clean your workspace. ------ [49:17] (#t=49:17) Learn new skills. ------ [49:31] (#t=49:31) Take care of yourself. ------ [Habit Path] (https://habitpath.io/landing) --- [54:09] (#t=54:09) Sick Picks. <a id="Sick_Picks_45"></a>Sick Picks --- Scott: [Zeiss Lens Care Pack] (https://amzn.to/43nBsq4) --- Wes: [Woosh Screen Cleaner] (https://amzn.to/49XQi8Z) <a id="Hit_us_up_on_Socials_50"></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

10 Apr 2024

57 MINS

57:17

10 Apr 2024

#755

753: Cache Ruins Everything Around Me

Scott and Wes dive into the cache problem, tackling user-specific data and caching security. From marketing A/B testing to content negotiation, they explore various challenges and solutions, including different URL/query parameters, edge logic, and client-side caching. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:22] (#t=01:22) Syntax is on <a href= "www.youtube.com/@syntaxfm">YouTube</a>. --- [02:16] (#t=02:16) Let’s talk about the cache problem. --- [03:33] (#t=03:33) User-specific data and caching security. --- [06:27] (#t=06:27) Why might this pop up? ------ [06:29] (#t=06:29) Marketing A/B testing - cookie based. ------ [06:55] (#t=06:55) User-selected features - such as themes. ------ [06:58] (#t=06:58) Language or geo-based items - accept language. ------ [07:11] (#t=07:11) Images - WebP for some browsers, jpg for others. ------ [07:45] (#t=07:45) JSON/HTML based on accept header. ------ [08:17] (#t=08:17) Different encoding. --- [08:26] (#t=08:26) <a href= "https://developer.mozilla.org/en-US/docs/Web/HTTP/Content_negotiation"> Content negotiation</a>. --- [08:54] (#t=08:54) The solutions. ------ [09:04] (#t=09:04) Provide different URLs/Query parameter. ------ [11:19] (#t=11:19) Don’t cache the page, cache the data based on query. ------ [15:01] (#t=15:01) Implement a “Cache Key” - one render for every option. ------ <a href= "https://www.netlify.com/blog/netlify-cache-key-variations/">Netlify</a> ------ <a href= "https://www.fastly.com/blog/getting-most-out-vary-fastly">Fastly</a> ------ <a href= "https://developers.cloudflare.com/cache/how-to/cache-keys/">Cloudflare</a> ------ [18:17] (#t=18:17) Use edge logic. ------ [19:52] (#t=19:52) Just do it client-side. <a id="Hit_us_up_on_Socials_26"></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 Apr 2024

24 MINS

24:07

08 Apr 2024

#754

752: React vs Vue vs Angular with Corbin Crutchley

Which framework is best? Join Scott and Wes as they chat with Corbin Crutchley, author of the “Framework Field Guide”, diving into the world of frameworks, metaframeworks, and tips to stay up-to-date on the latest trends in web development. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:48] (#t=00:48) Who is Corbin Crutchley? --- [02:08] (#t=02:08) Brought to you by [Sentry.io] (www.sentry.io/syntax) . --- [02:32] (#t=02:32) Hilton, like the hotel? --- [05:57] (#t=05:57) What is the best framework? --- [07:23] (#t=07:23) How do you compare these frameworks? --- [10:00] (#t=10:00) Do you feel like the metaframeworks are comparable? --- [11:02] (#t=11:02) Exciting announcements from [ng-conf] (https://ng-conf.org/) ? --- [11:42] (#t=11:42) Are Wiz and Angular merging? --- [14:17] (#t=14:17) Angular signals and Vue comparison. --- [PreactJS Signals] (https://preactjs.com/guide/v10/signals/) --- [17:53] (#t=17:53) Adding signals to vanilla JavaScript and browsers. --- [21:02] (#t=21:02) What is derived state? --- [23:11] (#t=23:11) How can we store state within these different frameworks? --- [24:37] (#t=24:37) Passing children. --- [26:40] (#t=26:40) Which has the best implementation for passing children? --- [28:52] (#t=28:52) What’s the approach for building framework agnostic components? --- [TanStack Store] (https://tanstack.com/store/latest) --- [30:31] (#t=30:31) How much of it is framework specific? --- [31:35] (#t=31:35) Headless or DOM-based? --- [32:48] (#t=32:48) What are the best practices for writing this? --- [35:28] (#t=35:28) What’s the biggest framework pain point? --- [36:21] (#t=36:21) Is there a language that requires significantly more code? --- [38:52] (#t=38:52) What about Web Components? --- [39:58] (#t=39:58) Your book is free? --- <a href= "https://unicorn-utterances.com/collections/framework-field-guide">Framework Field Guide</a> --- Shout-out [Eduardo Pratti] (https://twitter.com/edpratti) and [Kevin Aguilar] (https://twitter.com/kevttob) . --- [42:42] (#t=42:42) What’s the process of writing a book like this? --- [45:44] (#t=45:44) Not a physical book? --- [46:17] (#t=46:17) Walk us through the tech stack. --- [48:27] (#t=48:27) Supper Club Questions. --- [48:33] (#t=48:33) What text editor, theme and font do you use? --- [49:53] (#t=49:53) What terminal and shell do you use? --- [50:19] (#t=50:19) How do you stay up to date? --- [53:39] (#t=53:39) Do you have advice for beginners? --- [55:26] (#t=55:26) Sick Picks + Shameless Plugs. <a id="Sick_Picks_41"></a>Sick Picks --- Corbin: [Shiki Syntax Highlighter] (https://shiki.style/) <a id="Shameless_Plugs_45"></a>Shameless Plugs --- Corbin: <a href= "https://unicorn-utterances.com/collections/framework-field-guide">Framework Field Guide</a> <a id="Hit_us_up_on_Socials_49"></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

05 Apr 2024

57 MINS

57:37

05 Apr 2024

#753

751: UI Components: ShadCN, Tailwind UI, Headless, React Aria, Radix UI

Scott and Wes explore UI Components, discussing functionality, styling, accessibility, and theming. From headless components to styled starters, they share valuable insights to elevate your UI game. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [02:39] (#t=02:39) We’re on YouTube. --- [03:14] (#t=03:14) The four categories of UI libraries or frameworks. --- [03:46] (#t=03:46) What does a UI component need to do? ------ [04:14] (#t=04:14) Must be functional. ------ [06:20] (#t=06:20) They must fit styling. ------ [06:33] (#t=06:33) They must be accessible. ------ [08:09] (#t=08:09) “Internationalizationable.” ------ [09:29] (#t=09:29) They must handle theming and variants. --- [10:05] (#t=10:05) A few common UI components. ------ [10:14] (#t=10:14) Date Pickers. ------ [12:10] (#t=12:10) Dropdowns. ------ [13:21] (#t=13:21) Toast message. ------ [Svelte French Toast] (https://svelte-french-toast.com/) ------ [15:11] (#t=15:11) Some honorable mentions. --- [16:10] (#t=16:10) Headless components. ------ [18:54] (#t=18:54) <a href= "https://react-spectrum.adobe.com/react-aria/">React Aria</a>. ------ <a href= "https://react-spectrum.adobe.com/react-aria/interactions.html">Behavior</a>, <a href= "https://react-spectrum.adobe.com/react-aria/accessibility.html">Accessibility</a>, <a href= "https://react-spectrum.adobe.com/react-aria/internationalization.html"> Internationalization</a> ------ [19:34] (#t=19:34) <a href= "https://www.radix-ui.com/primitives">Radix UI Primitives</a>. ------ [20:16] (#t=20:16) <a href= "https://github.com/downshift-js/downshift">Downshift JS</a>. ------ [21:29] (#t=21:29) <a href= "https://tanstack.com/table/latest">Tanstack Table and Forms</a>. --- [26:00] (#t=26:00) Unstyled components. ------ [28:04] (#t=28:04) <a href= "https://shoelace.style/">Shoelace</a>. ------ [32:47] (#t=32:47) <a href= "https://react-spectrum.adobe.com/react-aria/components.html">React Aria Components</a>. ------ [33:00] (#t=33:00) <a href= "https://headlessui.com/">Headless UI</a>. ------ [33:04] (#t=33:04) <a href= "https://www.radix-ui.com/">Radix UI</a>. ------ [37:12] (#t=37:12) <a href= "https://mui.com/base-ui/getting-started/">Base UI</a>. --- [38:23] (#t=38:23) What’s up with Google’s design? --- [40:22] (#t=40:22) Styled Starters. ------ <a href= "https://react-spectrum.adobe.com/react-aria/getting-started.html#starter-kits"> React Aria Components Starter</a> ------ [ShadCN] (https://ui.shadcn.com/) ------ <a href= "https://tailwindcss.com/blog/introducing-catalyst">Tailwind Catalyst</a> ------ [MeltUI] (https://melt-ui.com/) --- [47:50] (#t=47:50) What is the process for overriding with custom elements. --- [51:10] (#t=51:10) UI Kits and Design Systems. --- [53:06] (#t=53:06) Some things to consider. --- [JS Nation] (https://jsnation.com/) --- [55:41] (#t=55:41) A few more options to consider. ------ <a href= "https://github.com/mui/material-ui/tree/master/packages/pigment-css-react"> Pigment CSS</a> ------ [Base UI] (https://mui.com/base-ui/getting-started/) ------ [Shoelace] (https://shoelace.style/) ------ [BaseLayer] (https://www.baselayer.dev/) ------ [JollyUI] (https://www.jollyui.dev/) ------ [DraftUI] (https://draft-ui.com/) ------ [Radix UI] (https://www.radix-ui.com/) ------ [PenguinUI] (https://www.penguinui.com/) ------ <a href= "https://tailwindcss.com/blog/introducing-catalyst">Tailwind CSS</a> ------ [TailwindUI] (https://tailwindui.com/) ------ [VerveUI] (https://verveui.pro/) ------ [DaisyUI] (https://daisyui.com/) ------ [ChakraUI] (https://chakra-ui.com/) ------ [Flowbite] (https://flowbite.com/) ------ [FloatingUI] (https://floating-ui.com/) ------ [Downshift JS] (https://github.com/downshift-js/downshift) ------ [Mantine] (https://mantine.dev/) --- [59:02] (#t=59:02) Sick Picks & Shameless Plugs. <a id="Sick_Picks_61"></a>Sick Picks --- Wes: <a href= "https://www.costco.ca/ontel-battery-daddy-180-battery-organizer-and-storage-case-with-tester.product.4000032542.html"> Battery Daddy</a> --- Scott: [Lazy Susan] (https://amzn.to/49XFo3n) , <a href= "https://amzn.to/4akUWxW">Rechargeable Batteries</a>, <a href= "https://amzn.to/3vgX6zI">Charger</a> <a id="Shameless_Plugs_66"></a>Shameless Plugs --- Scott: [Syntax on YouTube] (www.youtube.com/@syntaxfm) <a id="Hit_us_up_on_Socials_70"></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

03 Apr 2024

1 HR 06 MINS

1:06:02

03 Apr 2024

#752

750: New CSS and JavaScript You Should Be Using

Get stoked, jQuery 1.2 is here! Join Scott and Wes as they discuss jQuery Mobile, slicing PSD files, CSS rounded corners, CoffeeScript features, WordPress 2.3, and the rise of Skeuomorphism, shaping the landscape of web development this year. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:16] (#t=01:16) Brought to you by [Sentry.io] (www.sentry.io/syntax) . --- [02:17] (#t=02:17) jQuery 1.2 released! --- [07:38] (#t=07:38) jQuery Mobile. --- [09:34] (#t=09:34) Skeuomorphism. --- [10:25] (#t=10:25) How do you slice up your .PSDs? --- <a href= "https://haizdesign.com/photoshop/slicy-by-macrabbit-review/">Slicy By MacRabbit</a> --- [12:34] (#t=12:34) Cufon, new font method. --- [14:06] (#t=14:06) CSS rounded corners. --- [CSS3Please] (https://css3please.com/) --- [15:17] (#t=15:17) Coda Tip. --- [16:48] (#t=16:48) Top 5 CoffeeScript Features. --- [18:44] (#t=18:44) Conference Talks to Spotlight. --- [BatmanJS, your new favorite JavaScript superhero] (https://batmanjs.org/) --- [20:35] (#t=20:35) WordPress 2.3! --- [21:15] (#t=21:15) PHP 5.2.0 --- [PHP 5.2.0 Release Announcement] (https://www.php.net/releases/5_2_0.php) --- [21:53] (#t=21:53) Sponsored by Media Temple. <a id="Hit_us_up_on_Socials_23"></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 Apr 2024

24 MINS

24:24

01 Apr 2024

#751

749: Coding Shopify with Anne and Trudy of Design Packs

Scott and Wes are joined by special guests Trudy MacNabb and Anne Thomas from Design Packs, diving into the nitty-gritty of Shopify design. Tune in as they dissect the pros and cons, challenges, and unveil their daily toolkit for crafting stunning Shopify websites. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:59] (#t=00:59) Who is Anne Thomas? --- [02:30] (#t=02:30) Who is Trudy MacNabb? --- [04:06] (#t=04:06) Shopify themes, how does one build a theme? --- [05:34] (#t=05:34) Do you have enough control with LiquidJS? --- [07:52] (#t=07:52) Changing components of a liquid template. --- [08:58] (#t=08:58) LiquidJS improving their dev tools. --- [09:29] (#t=09:29) LiquidJS email marketing. --- [10:32] (#t=10:32) Can you make your own LiquidJS methods? --- [Too Many Tabs] (https://toomanytabs.xyz/) --- [11:34] (#t=11:34) How would you create a theme from scratch using modern tools? --- [13:30] (#t=13:30) What about local dev and live reload? --- [Shopify Tools CLI] (https://shopify.dev/docs/themes/tools/cli) --- [15:17] (#t=15:17) Is Shopify improving? --- [17:13] (#t=17:13) What do you hate about Shopify themes? --- [Shopify Tools Theme Kit] (https://shopify.dev/docs/themes/tools/theme-kit) --- [18:59] (#t=18:59) Have you used Hydrogen? --- [Shopify Hydrogen] (https://hydrogen.shopify.dev/) --- [20:09] (#t=20:09) Headless has sacrifices. --- [22:02] (#t=22:02) Are people building full websites in Shopify? --- [23:56] (#t=23:56) Apps and integrations. --- [25:56] (#t=25:56) Are people creating businesses around these integrations? --- [29:16] (#t=29:16) What are design packs? --- [31:26] (#t=31:26) Do you run your own servers? --- [31:57] (#t=31:57) How does billing work with clients? --- [33:18] (#t=33:18) Apps being ‘Sherlocked’. --- [‘Sherlocking’ Explained] (https://thehustle.co/sherlocking-explained) --- [35:21] (#t=35:21) Where is the data stored? --- [36:35] (#t=36:35) Can you make a custom UI? --- [38:40] (#t=38:40) What are the downsides of building apps on Shopify? --- [39:17] (#t=39:17) Are you expected to maintain versions? --- [40:46] (#t=40:46) Do you manage all the support independently? --- [42:01] (#t=42:01) How do you match with their existing themes? --- [43:54] (#t=43:54) What are the most popular blocks? --- [45:17] (#t=45:17) Does Shopify provide bundlers or compilers? --- [46:47] (#t=46:47) Shopify moving to blocks. --- [47:38] (#t=47:38) Living as a digital nomad. --- [Syntax Episode 586 on Nomad Developing] (https://syntax.fm/586) --- [49:48] (#t=49:48) A new app Anne and Trudy launched. --- [51:35] (#t=51:35) Limited by block size. --- [54:08] (#t=54:08) Sick Picks + Shameless Plugs. <a id="Sick_Picks_46"></a>Sick Picks --- Trudy: [Bar of Shampoo] (https://theblacktravelbox.com/) --- Anne: [Alie Ward Ologies Podcast] (https://www.alieward.com/ologies) <a id="Shameless_Plugs_51"></a>Shameless Plugs --- Trudy: 25% off using SYNTAX25 at <a href= "https://design-packs.com/">Design Packs</a> <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

29 Mar 2024

58 MINS

58:16

29 Mar 2024

#750

748: Fitness Will Make You a Better Developer

Level up your coding game -and your gains! Today, Scott and Wes weigh in on the importance of physical fitness for developers, covering motivation, diet, lifting basics, routines, and swole-inducing supplements. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:14] (#t=01:14) Brought to you by [Sentry.io] (www.sentry.io/syntax) . --- [03:10] (#t=03:10) A very quick disclaimer. --- [03:32] (#t=03:32) A brief view of our fitness history. --- [06:19] (#t=06:19) Why is fitness important for developers? --- [09:12] (#t=09:12) Setting your goals. --- [13:06] (#t=13:06) Getting started with fitness. ------ [13:13] (#t=13:13) Body-weight. ------ [13:58] (#t=13:58) Stretching. ------ [16:47] (#t=16:47) Fun activities that don’t feel like workouts. ------ [17:48] (#t=17:48) Lifting weights. ------ [Stronglifts] (https://stronglifts.com/) ------ <a href= "https://www.reddit.com/r/StartingStrength/">StartingStrength</a> --- [25:47] (#t=25:47) Home gym gear. --- [Rogue Stall Bar] (https://www.roguefitness.com/rogue-stall-bar-3-0) --- [37:14] (#t=37:14) Fitness programs. --- [40:53] (#t=40:53) I guess we have to talk about diet. --- [MacroFactorApp] (https://macrofactorapp.com/) --- [46:37] (#t=46:37) Motivation. --- [47:42] (#t=47:42) Supplements. --- [BulkSupplements.com Creatine] (https://www.amazon.com/dp/B0B9HWN8S9) --- [51:23] (#t=51:23) Sick Picks. <a id="Sick_Picks_27"></a>Sick Picks --- Wes: [Wikday Pull Up Bands] (https://amzn.to/3wSduqM) --- Scott: [Booty Bands] (https://amzn.to/4abKzMy) <a id="Hit_us_up_on_Socials_32"></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 Mar 2024

55 MINS

55:21

27 Mar 2024

#749

747: Middleware Explained

Join Wes and Scott for a hasty episode of Syntax as they unpack the power of middleware for developers, covering caching, authentication, A/B testing, error handling, and user redirection in a quick, punchy rundown to supercharge your backend skills! <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:41] (#t=00:41) <a href= "www.youtube.com/@syntaxfm">Syntax on YouTube</a>. --- [01:28] (#t=01:28) What is middleware? --- [05:04] (#t=05:04) Some real-world examples of middleware. ------ [05:10] (#t=05:10) Authentication. ------ [07:44] (#t=07:44) Redirecting users to a specific instance. ------ [08:28] (#t=08:28) Logging + statistics. ------ [09:41] (#t=09:41) Debugging. ------ [10:00] (#t=10:00) Timers. ------ [10:46] (#t=10:46) A/B testing. ------ [11:59] (#t=11:59) Error handling + logging. ------ [12:23] (#t=12:23) Caching. ------ [13:02] (#t=13:02) Multi-tenant applications. --- [15:08] (#t=15:08) Where does it run? --- [18:07] (#t=18:07) What are the limitations? --- [21:52] (#t=21:52) Next.js middleware is one file only. --- <a href= "https://nextjs.org/docs/app/building-your-application/routing/middleware"> NextJS Middleware</a> --- [23:35] (#t=23:35) Sveltekit solution. --- [Sveltekit Hooks] (https://kit.svelte.dev/docs/hooks) --- [24:31] (#t=24:31) Connect style. --- [Fastify Express] (https://github.com/fastify/fastify-express) --- [Fastify Middle] (https://github.com/fastify/middie) --- [25:28] (#t=25:28) One last thing, NPM Installing. <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

25 Mar 2024

27 MINS

27:45

25 Mar 2024

#748

746: Infrastructure for TS Devs: Kubernetes, WASM and Containers with David Flanagan

Deploy your own tech stack: Wes and Scott are joined by Kubernetes expert David Flanagan to be schooled on how Kubernetes, Docker and even WASM containers work. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:55] (#t=01:55) Should developers know how to run their own servers? --- [04:57] (#t=04:57) What is “bare metal”? --- [11:49] (#t=11:49) What the hell is Kubernetes? --- [12:25] (#t=12:25) Why would somebody need Kubernetes? --- [15:37] (#t=15:37) Using Kubernetes to spin up different instances on cloud providers. --- [etcd] (https://etcd.io/) --- [16:43] (#t=16:43) Kubernetes managing traffic spikes. --- [18:46] (#t=18:46) How much downtime can you handle? --- [22:11] (#t=22:11) What exactly is a container? --- [24:06] (#t=24:06) What containers do you prefer? --- [Docker] (https://www.docker.com/) --- [Containerd] (https://containerd.io/) --- [25:28] (#t=25:28) Some additional terminology. --- [OCI Open Container Initiative] (https://opencontainers.org/) --- [26:43] (#t=26:43) What about WASM? --- [WASM WebAssembly] (https://webassembly.org/) --- [29:31] (#t=29:31) Building a Docker container. --- [31:11] (#t=31:11) Why would someone want to use a WebAssembly container? --- [32:12] (#t=32:12) Are people shipping this technology? --- [33:36] (#t=33:36) What functions would you put in WASM? --- [36:57] (#t=36:57) How does someone make a WASM image? --- [39:22] (#t=39:22) A little more about Spin. --- [Fermyon Spin] (https://www.fermyon.com/blog/introducing-spin) --- [39:56] (#t=39:56) What type of processors are used in these servers? --- [42:27] (#t=42:27) What are home servers running on? --- <a href= "https://www.kickstarter.com/projects/turingpi/turing-pi-cluster-board"> Turing Pi 2</a> --- [Daniel Mangum] (https://danielmangum.com/) --- [Universal Blue] (https://universal-blue.org/) --- [46:40] (#t=46:40) How should someone get started with Kubernetes? --- [Kubernetes.io] (https://kubernetes.io/) --- [Rawkode YouTube] (https://www.youtube.com/@RawkodeAcademy) --- [Kubesimplify] (https://kubesimplify.com/) --- [Learnk8s] (https://learnk8s.io/) --- [48:51] (#t=48:51) Infrastructure as code. --- [CDK for Terraform] (https://developer.hashicorp.com/terraform/cdktf) --- [GraalVM] (https://www.graalvm.org/) --- [55:19] (#t=55:19) Sick Picks & Shameless Plugs. <a id="Sick_Picks_43"></a>Sick Picks --- David: ------ [Golem.cloud] (https://www.golem.cloud/) ------ [Restate.dev] (https://restate.dev/) <a id="Shameless_Plugs_49"></a>Shameless Plugs --- David: ------ [Rawkode YouTube] (https://www.youtube.com/@RawkodeAcademy) <a id="Hit_us_up_on_Socials_54"></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 Mar 2024

59 MINS

59:08

22 Mar 2024

#747

745: Modern JS Toolchains (Biome, Oxc + More)

Wes and Scott dive deep into the world of JavaScript toolchains, exploring everything from linters and compilers to transpilers and formatters. Tune in as they shed light on cutting-edge technologies like Biome, UnJS, and Ezno that are shaping the future for developers. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:37] (#t=01:37) Syntax is on <a href= "www.youtube.com/@syntaxfm">YouTube</a>. --- [02:09] (#t=02:09) Do we really need tooling? --- [04:02] (#t=04:02) Popular tools are predominantly plug and play. --- [06:15] (#t=06:15) What can tooling do for us? --- [07:16] (#t=07:16) The tools in today’s workflow. ------ [07:21] (#t=07:21) Linters. ------ [11:29] (#t=11:29) Compilers and transpilers. ------ [13:30] (#t=13:30) Formatters. ------ [16:18] (#t=16:18) Tokenizers and Parsers. ------ [16:46] (#t=16:46) Bundlers. ------ [17:59] (#t=17:59) Macros. --- [20:26] (#t=20:26) The new tools in the space. ------ [20:47] (#t=20:47) <a href= "https://biomejs.dev/">Biome</a>, one toolchain for your web project. ------ [28:27] (#t=28:27) <a href= "https://oxc-project.github.io/">Oxc</a>, the JavaScript oxidation compiler. ------ [33:01] (#t=33:01) <a href= "https://docs.deno.com/runtime/manual/tools/formatter">Deno</a>, code formatting. ------ [34:13] (#t=34:13) <a href= "https://esbuild.github.io/">ESBuild</a>, an extremely fast bundler for the web. ------ [34:37] (#t=34:37) <a href= "https://github.com/rolldown/rolldown">Rolldown</a>, fast Rust-based bundler for JavaScript. ------ [38:34] (#t=38:34) <a href= "https://github.com/kaleidawave/ezno">Ezno</a>, TypeScript type checker. ------ [40:24] (#t=40:24) <a href= "https://unjs.io/">UnJS</a>, Unleash JavaScript’s Potential. ------ [41:45] (#t=41:45) <a href= "https://lightningcss.dev/">Lightning CSS</a>, CSS parser, transformer, bundler, and minifier. --- [42:31] (#t=42:31) Is JavaScript good enough to handle these tools? --- [43:26] (#t=43:26) Sick Picks + Shameless Plugs. <a id="Sick_Picks_28"></a>Sick Picks --- Scott: <a href= "https://www.youtube.com/watch?v=fcq0pwr0IKg">Shinobi-Geddon: The 1980s Ninja Craze</a> --- Wes: [Bachans Japanese Barbecue Sauce] (https://bachans.com/collections/all-products) <a id="Shameless_Plugs_33"></a>Shameless Plugs --- Scott: [Syntax on YouTube] (www.youtube.com/@syntaxfm) <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

20 Mar 2024

47 MINS

47:52

20 Mar 2024

#746

744: Docker For Developers

Join Scott and CJ on a rapid-fire journey through Docker. From unraveling containerization to practical advice on incorporating Docker into your workflow, this quick-paced episode has everything you need to navigate the world of container technology. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:19] (#t=01:19) Brought to you by [Sentry.io] (www.sentry.io/syntax) . --- [02:20] (#t=02:20) Easily reproducible environments. --- [02:57] (#t=02:57) Containerization technology. --- <a href= "https://en.wikipedia.org/wiki/Containerization_(computing)">Containerization</a> --- <a href= "https://en.wikipedia.org/wiki/OS-level_virtualization">OS-level Virtualization</a> --- [04:42] (#t=04:42) Docker is brand name containerization, there are others. ------ [Podman] (https://podman.io/) ------ [Containerd] (https://containerd.io/) ------ [Buildah] (https://buildah.io/) ------ [LXD] (https://canonical.com/lxd) --- [05:26] (#t=05:26) Why would a web developer want to use Docker? --- [08:19] (#t=08:19) How do you get started with Docker? ------ [Download Docker Desktop] (https://www.docker.com/products/docker-desktop/) ------ [Start With Docs] (https://docs.docker.com/guides/get-started/) ------ [Docker 101] (https://www.docker.com/101-tutorial/) --- [09:14] (#t=09:14) How does Docker work? --- [Docker Sentry] (https://hub.docker.com/r/getsentry/sentry) --- [Docker Registry] (https://docs.docker.com/registry/) --- [Docker Layers] (https://docs.docker.com/build/guide/layers/) --- [16:46] (#t=16:46) Adding Docker to an existing project. --- <a href= "https://github.com/CodingGarden/listd/blob/main/Dockerfile">SvelteKit Dockerfile</a> --- <a href= "https://github.com/CodingGarden/entropychat.app/blob/master/server/Dockerfile"> Node.js / Express</a> --- <a href= "https://github.com/CodingGarden/twitch-team-shoutout-bot/blob/master/Dockerfile"> CLI Runner Twitchbot</a> --- <a href= "https://github.com/CodingGarden/AMA/blob/master/2023-02-08/look-at-php/Dockerfile"> Development PHP / Mongodb Dockerfile</a> --- [21:37] (#t=21:37) What is Docker Compose? --- [Docker Compose] (https://docs.docker.com/compose/) --- [22:50] (#t=22:50) What are some ‘gotchas’ or things to look out for when setting up a project? --- <a href= "https://github.com/CodingGarden/entropychat.app/blob/master/server/Dockerfile"> Coding Garden Example</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> CJ: [X] (https://twitter.com/coding_garden) <a href= "https://www.instagram.com/coding.garden/">Instagram</a> <a href= "https://www.tiktok.com/@coding.garden">Tiktok</a> <a href= "https://www.twitch.tv/codinggarden">TwitchTV</a> <a href= "https://www.youtube.com/@CodingGarden">YouTube</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 Mar 2024

25 MINS

25:43

18 Mar 2024

#745

743: JavaScript Figma Plugins & Working at GitHub With Cameron McEfee

Wes and Scott welcome Cameron McEfee, a seasoned creative director whose journey spans GitHub, <a href= "http://Sentry.io">Sentry.io</a>, and the innovative realm of JavaScript plugins with his creation, GuideGuide. Cameron explores plugin building, iterating on the iconic Octocat for GitHub, and shedding light on the multifaceted roles of a creative director. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:06] (#t=01:06) Who is Cameron McEfee? --- [03:00] (#t=03:00) What does a Creative Director do? --- [09:47] (#t=09:47) In a creative and collaborative field, how do you deal with hurt feelings? --- [12:32] (#t=12:32) Experiences at GitHub (404/500 pages). --- [15:35] (#t=15:35) Who is responsible for all the Octocat variations? --- [GitHub Octodex] (https://octodex.github.com/) --- [17:18] (#t=17:18) Did you ever get in trouble for using famous IP? --- [21:07] (#t=21:07) Working at <a href= "www.sentry.io/syntax">Sentry.io</a>. --- [25:08] (#t=25:08) What is your illustration process? --- [27:04] (#t=27:04) What is GuideGuide? --- [GuideGuide] (https://guideguide.me/) --- [Moo Tokenizer/Lexer] (https://github.com/no-context/moo) --- [33:13] (#t=33:13) Grid Notation. --- [36:10] (#t=36:10) Can ‘good colors’ be calculated, can good design be math’d? --- [40:46] (#t=40:46) What was the process of building your own plugin? --- [43:37] (#t=43:37) Adding guides with JavaScript APIs. --- [44:44] (#t=44:44) Recreating application UIs within plugins. --- <a href= "https://goodhertz.com/canopener-studio/">GoodHertz</a> --- [50:22] (#t=50:22) How are you architecting these plugins? --- [52:44] (#t=52:44) Sick Picks & Shameless Plugs. <a id="Sick_Picks_26"></a>Sick Picks --- Cameron: --- [Ember Mug] (https://ember.com/) --- <a href= "https://open.spotify.com/artist/3QaxveoTiMetZCMp1sftiu">Waterparks Spotify</a> --- [Execute Program] (https://www.executeprogram.com/) <a id="Shameless_Plugs_33"></a>Shameless Plugs --- Cameron: <a href= "https://guideguide.me/landing?utm_campaign=interview&utm_source=syntax&promo=syntax"> GuideGuide 50% off</a> <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 Mar 2024

56 MINS

56:43

15 Mar 2024

#744

742: Potluck: Migrating to Typescript, Semver Explained, Accurate Timers and Countdowns

Scott and CJ dive into a potluck of developer queries, from their favorite tech reads to essential web dev fundamentals. Tune in as they dish out expert advice on migrating React projects to TypeScript, crafting precise timers for countdown apps, and navigating the world of free-tier plans. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [01:20] (#t=01:20) Brought to you by [Sentry.io] (www.sentry.io/syntax) . --- [02:16] (#t=02:16) What book changed your life? ------ [Whatever you think, think the opposite] (https://amzn.to/3uXZISS) ------ [It’s not how good you are, it’s how good you want to be] (https://amzn.to/3P5l3Ay) ------ [Crucial Conversations] (https://amzn.to/49Ed9X4) thanks [@benvinegar] (https://twitter.com/bentlegen) --- [04:58] (#t=04:58) What are the web development fundamentals for beginners? ------ [Command Line Power User] (https://commandlinepoweruser.com/) --- [08:39] (#t=08:39) What are your thoughts on Chris Coyer’s post on his sale of CSS-Tricks? ------ <a href= "https://chriscoyier.net/2024/02/28/where-im-at-on-the-whole-css-tricks-thing/"> Chris Coyer’s Post</a> --- [11:51] (#t=11:51) Advice for migrating an existing React project to TypeScript. --- [20:38] (#t=20:38) Countdown apps, performance vs accuracy. --- [25:19] (#t=25:19) Are you listening to podcasts? Which ones? --- [31:46] (#t=31:46) With AI on the rise, will free-tier plans become a thing of the past? ------ [Coolify] (https://coolify.io/) ------ [Syntax 730: Own Your Own Paas] (https://syntax.fm/show/730/own-your-own-paas) --- [35:59] (#t=35:59) What is SemVer anyway? ------ [semver.org] (https://semver.org/) ------ [npmjs] (https://www.npmjs.com/package/@auth/core) ------ <a href= "https://www.learningtypescript.com/articles/why-typescript-doesnt-follow-strict-semantic-versioning"> TypeScript on Semantic Versioning</a> --- [40:14] (#t=40:14) A question on ergonomics, home office aesthetics and productivity. --- [47:59] (#t=47:59) Do you ever stop to consider VueJS in 2024? Why or why not? ------ [unjs.io] (https://unjs.io/) --- [52:12] (#t=52:12) Sick Picks + Shameless Plugs. <a id="Sick_Picks_29"></a>Sick Picks --- Scott: [Ellenos Yogurt] (https://ellenos.com/) --- CJ: [Flat Iron Pepper] (https://www.flatironpepper.com/) <a id="Shameless_Plugs_34"></a>Shameless Plugs --- [Syntax.fm YouTube] (https://www.youtube.com/@syntaxfm) <a id="Hit_us_up_on_Socials_38"></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 Mar 2024

56 MINS

56:32

13 Mar 2024

#743

741: TypeScript Interview Questions - STUMP’d

Wes and Scott tackle TypeScript trivia, from combining string literal types to unraveling the mystery of d.ts files. Join them as they challenge each other on conditional types, interfaces, triple-slash directives, and TypeScript records. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [TypeScript] (https://www.typescriptlang.org/) --- [01:05] (#t=01:05) Brought to you by [Sentry.io] (www.sentry.io/syntax) . --- [03:20] (#t=03:20) How do you combine string literal types? --- <a href= "https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html"> Template Literal Types</a> --- [06:34] (#t=06:34) What is a TypeScript Generic and why would you use one? --- <a href= "https://www.typescriptlang.org/docs/handbook/2/generics.html">TypeScript Generics</a> --- [08:12] (#t=08:12) How do you write a conditional type? --- <a href= "https://www.typescriptlang.org/docs/handbook/2/conditional-types.html"> TypeScript Conditional Types</a> --- [09:58] (#t=09:58) Generating TypeScript type from a function. --- <a href= "https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-6.html"> Stricter Generators</a> --- [14:09] (#t=14:09) How do d.ts files work? --- <a href= "https://www.typescriptlang.org/docs/handbook/declaration-files/templates/module-d-ts.html"> Module .d.ts</a> --- [16:25] (#t=16:25) Name one difference between a type and an interface. --- <a href= "https://www.typescriptlang.org/play#example/types-vs-interfaces">Types vs Interfaces</a> --- [19:15] (#t=19:15) What is a tripple-slash directive and why would you use them? --- <a href= "https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html"> Tripple-Slash Directives</a> --- [20:52] (#t=20:52) What is a TypeScript record and what is it used for? --- <a href= "https://www.typescriptlang.org/docs/handbook/utility-types.html">Utility Types</a> <a id="Hit_us_up_on_Socials_24"></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 Mar 2024

25 MINS

25:19

11 Mar 2024

#742

740: Local AI Models in JavaScript - Machine Learning Deep Dive With Xenova

Scott and Wes are joined by special guest Xenova to explore local AI models in JavaScript. From Hugging Face to Transformers.js and practical applications like real-time speech recognition and object detection, this episode dives deep into the world of machine learning. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [00:41] (#t=00:41) Brought to you by [Sentry.io] (www.sentry.io/syntax) --- [01:05] (#t=01:05) Who is Xenova? --- [02:08] (#t=02:08) What is Hugging Face? --- [03:29] (#t=03:29) What is Transformers.js? --- [06:16] (#t=06:16) How was the library developed? --- <a href= "https://github.com/ajayyy/SponsorBlock">SponsorBlock</a> --- [09:04] (#t=09:04) How is it able to run? --- [10:09] (#t=10:09) Do they have to run in Python and how does Onnx work? --- [Onnx.ai] (https://onnx.ai/) --- [Hugging Face Optimum] (https://huggingface.co/docs/optimum/index) --- [14:19] (#t=14:19) What are some things you can do with this tech? --- [16:15] (#t=16:15) Vision tools. --- [17:38] (#t=17:38) This is actually running locally. --- [18:35] (#t=18:35) <a href= "https://huggingface.co/spaces/Xenova/doodle-dash">Doodle Dash</a> --- [21:09] (#t=21:09) They currently run on CPU, what is required to make it run on GPU? --- [24:44] (#t=24:44) Can you run in JavaScript? --- [28:32] (#t=28:32) How it works with image vectors. --- [34:23] (#t=34:23) Why would people want to run it in another language? --- [35:55] (#t=35:55) Resizing images in the browser instead of on the server. --- [38:55] (#t=38:55) Applications distributed on the web vs running locally. --- [43:54] (#t=43:54) Electron has Node and Chrome, where would you run Transformers.js? --- [44:32] (#t=44:32) The API of Transformers.js --- [46:30] (#t=46:30) Object Detection. --- <a href= "https://huggingface.co/spaces/Xenova/semantic-image-search-client"> Semantic Image Search Client</a> --- <a href= "https://huggingface.co/spaces/Xenova/video-object-detection">Real-Time Object Detection</a> --- <a href= "https://huggingface.co/spaces/Xenova/remove-background-web">Background Removal Tool</a> --- [48:33] (#t=48:33) What is the easiest way to get started? --- [51:26] (#t=51:26) Real-time speech recognition on the horizon? --- [52:08] (#t=52:08) Will we ever be able to run Stable Diffusion via JavaScript? --- [56:10] (#t=56:10) The <a href= "https://webllm.mlc.ai/">Web LLM</a>. --- [57:22] (#t=57:22) Practical applications for YouTube. --- [59:39] (#t=59:39) What we want to build for Syntax.fm. --- [01:06:43] (#t=01:06:43) Mean pooling, why it’s necessary. --- [01:09:30] (#t=01:09:30) Stopping YouTube spam comments. --- [01:10:34] (#t=01:10:34) K-Means Clustering. --- <a href= "https://discuss.huggingface.co/t/short-text-clustering/5829">Text Clustering</a> --- [01:13:49] (#t=01:13:49) Quantization. --- [01:17:35] (#t=01:17:35) Sick Picks + Shameless Plugs. <a id="Sick_Picks_44"></a>Sick Picks --- Xeonva: <a href= "https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API">WebGPU</a> <a id="Shameless_Plugs_48"></a>Shameless Plugs --- Xenova: [Xenova on X] (https://twitter.com/xenovacom) <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

08 Mar 2024

1 HR 19 MINS

1:19:37

08 Mar 2024

#741

739: The LoFi Movement: Building Local First Apps

Join Wes and Scott as they explore LoFi (local first) web development, delving into CRDT, Websockets, IndexedDB, SQLite, and more. Discover when Local-First shines and when it’s better to steer clear in this episode packed with practical insights. <a id= "Show_Notes_2"></a>Show Notes --- [00:00] (#t=00:00) Welcome to Syntax! --- [03:18] (#t=03:18) Brought to you by [Sentry.io] (www.sentry.io/syntax) . --- [04:08] (#t=04:08) What is LoFi? --- [localfirst.dev] (https://localfirstweb.dev/) --- [05:02] (#t=05:02) The Seven Ideals for Local-first. ------ [05:29] (#t=05:29) 1: No Spinners. ------ [06:48] (#t=06:48) 2: Your work is not trapped on one device. ------ [07:56] (#t=07:56) 3: The network is optional. ------ [08:50] (#t=08:50) 4: Seamless collaboration with your colleagues. ------ [09:35] (#t=09:35) Oops, we for got to read 5: The Long Now. ------ [09:37] (#t=09:37) 6: Security and privacy by default. ------ [09:45] (#t=09:45) 7: You retain ultimate ownership and control. ------ [Actual Budget Finance App] (https://actualbudget.com/) ------ [Ink & Switch] (https://www.inkandswitch.com/local-first/) --- [13:01] (#t=13:01) Sounds great, let’s go! Not so fast, this stuff is hard. --- [14:07] (#t=14:07) The technology involved. ------ [14:30] (#t=14:30) CRDT (Conflict-free Replicated Data Types). ------ <a href= "https://en.wikipedia.org/wiki/Conflict-free_replicated_data_type">Wikipedia Definition</a> ------ <a href= "https://www.youtube.com/watch?v=DEcwa68f-jY&ab_channel=dotconferences"> James Long dotJS 2019 dotconfrences</a> ------ [17:48] (#t=17:48) How does it prioritize conflict resolutions? ------ [19:36] (#t=19:36) Websockets. ------ [20:17] (#t=20:17) IndexedDB + SQLite. ------ [21:23] (#t=21:23) Service Workers. --- [22:16] (#t=22:16) The software involved. ------ [22:24] (#t=22:24) <a href= "https://replicache.dev/">Replicache</a>. ------ [24:48] (#t=24:48) <a href= "https://docs.yjs.dev/">YJS</a>. ------ [25:06] (#t=25:06) <a href= "https://github.com/electric-sql">Electric SQL</a>. --- [25:51] (#t=25:51) The most basic LoFi application. --- [31:26] (#t=31:26) Some bigger concepts. --- [32:34] (#t=32:34) Answering some common questions. --- [35:19] (#t=35:19) Some real-world examples of LoFi. --- [Habit Path by Scott Tolinski] (https://habitpath.io/waitlist) --- [37:18] (#t=37:18) What about Apple PWA nonsense? --- [38:20] (#t=38:20) This seems similar to real-time software and multiplayer. --- [38:47] (#t=38:47) Sounds like too much work. --- [Triplit Fullstack Database] (https://www.triplit.dev/) --- [Electric SQL] (https://electric-sql.com/) --- [Evolu] (https://www.evolu.dev/) --- [40:46] (#t=40:46) Some useful links. ------ [Local-First Web Development] (https://localfirstweb.dev//) ------ [Local-First Lo.fi YouTube] (https://www.youtube.com/@lo.fi_dev) ------ [Local-First Ink & Switch] (https://www.inkandswitch.com/local-first) ------ [Local-First Reddit] (https://www.reddit.com/r/localfirst/) ------ [Syntax GitHub Local-First] (https://github.com/syntaxfm/local-first) --- [43:30] (#t=43:30) Sick Picks + Shameless Plugs. <a id="Sick_Picks_50"></a>Sick Picks --- Wes: [Dresscode.dev] (https://dresscode.dev/) --- Scott: <a href= "https://www.monarchmoney.com/referral/tp2gjynkoo">Monarch Money</a> <a id="Hit_us_up_on_Socials_56"></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 Mar 2024

52 MINS

52:10

06 Mar 2024