…

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.

#593

Potluck × Learning Web Dev × Video Streaming × Mono Repos

In this episode of Syntax, Wes and Scott answer your questions about learning web dev at an older age, making your apps look better, building a video streaming site, mono repo vs regular, and more! <a id= "Sentry___Sponsor_2"></a>Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting <a href= "https://sentry.io">Sentry.io</a> and using the coupon code TASTYTREAT during sign up. <a id= "Show_Notes_6"></a>Show Notes --- [00:11] (#t=00:11) Welcome --- [00:31] (#t=00:31) Sponsor: Sentry --- [01:43] (#t=01:43) DST update --- [Tales of Taboo] (https://pod.link/1457365096) --- [03:45] (#t=03:45) Is it too late to learn web dev at an older age? --- [10:20] (#t=10:20) How do people produce work so quickly? --- [13:47] (#t=13:47) How can I make my web apps look better visually? --- [Dribbble - Discover the World’s Top Designers & Creative Professionals] (https://dribbble.com/) --- [Tailwind UI - Official Tailwind CSS Components & Templates] (https://tailwindui.com/) --- [CSS · Bootstrap] (https://getbootstrap.com/) --- [18:41] (#t=18:41) Not losing the niceties with not having to do a full page load --- [22:23] (#t=22:23) Should I use a script to generate an index JS/TS file? --- [24:55] (#t=24:55) If you were going to make a video streaming website, what technologies would you use? --- [The API to Video | Mux] (https://www.mux.com/) --- [Vimeo – Video Experience Platform] (https://vimeo.com/) --- <a href= "https://aws.amazon.com/solutions/implementations/live-streaming-on-aws/"> Live Streaming on AWS | AWS Solutions</a> --- <a href= "https://aws.amazon.com/solutions/implementations/video-on-demand-on-aws/"> Video on Demand | AWS Solutions</a> --- <a href= "https://www.cloudflare.com/products/cloudflare-stream/">Cloudflare Stream | Video streaming made easy and affordable at scale</a> --- [29:11] (#t=29:11) What should I do if my boss wants me to move up the business ladder? --- [31:58] (#t=31:58) I’m confused about hydration in frameworks like SvelteKit. --- [37:07] (#t=37:07) What’re the advantages of a mono repo over a regular one? --- [39:50] (#t=39:50) Is it better to stay put at a place even if you’re unhappy right now? --- [43:13] (#t=43:13) How should I ingest tv scripts into a database? --- [46:24] (#t=46:24) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__33"></a>××× SIIIIICK ××× PIIIICKS ××× --- Scott: [The Stronger By Science Podcast] (https://www.sbspod.com/) --- Wes: <a href= "https://mertenandstorck.com/collections/carbon-steel">Merten and Storck Carbon Steel</a> <a id="Shameless_Plugs_38"></a>Shameless Plugs --- Scott: [LevelUp Tutorials] (https://levelup.video) --- Wes: [Wes Bos Tutorials] (https://wesbos.com/courses) <a id="Tweet_us_your_tasty_treats_43"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets ... Read more

22 Mar 2023

52 MINS

52:51

22 Mar 2023

#592

HTTPS + Tunnel Your Localhost - Cloudflare Tunnels, Ngrok, and more!

In this Hasty Treat, Scott and Wes talk about why you might need to tunnel to your local computer, and how to set that up securely. <a id= "Sentry__Sponsor_2"></a>Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting <a href= "https://sentry.io">Sentry.io</a> and using the coupon code TASTYTREAT during sign up. <a id= "Show_Notes_6"></a>Show Notes --- [00:24] (#t=00:24) Welcome --- [01:09] (#t=01:09) GitHub tarball web streams --- [05:09] (#t=05:09) Sponsor: Sentry --- [05:48] (#t=05:48) Why would I need security locally? --- [Caddy Server] (https://caddyserver.com/) --- [11:23] (#t=11:23) Cookie issues --- [13:04] (#t=13:04) Examples of things that need a secure context --- <a href= "https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts/features_restricted_to_secure_contexts"> MDN Features restricted to secure contexts</a> --- [14:58] (#t=14:58) What is tunneling? --- [19:22] (#t=19:22) Cloudflare Tunnels --- <a href= "https://github.com/cloudflare/cloudflared">Cloudflared</a> --- <a href= "https://twitter.com/wesbos/status/1634310926219333642">Cloudflare Tunnel</a> --- [20:50] (#t=20:50) nGrok --- [ngrok] (https://ngrok.com/) --- [23:22] (#t=23:22) Local tunnel --- [Local Tunnel] (https://theboroer.github.io/localtunnel-www/) --- [24:55] (#t=24:55) Tunnel to --- [Tunnel to dev - Expose your local web server to the internet with a public URL] (https://tunnelto.dev/) --- [26:02] (#t=26:02) Cloudflare subdomain <a id="Tweet_us_your_tasty_treats_28"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets ... Read more

20 Mar 2023

30 MINS

30:18

20 Mar 2023

#591

Supper Club × Next.js on AWS + Serverless with Dax Raad

In this supper club episode of Syntax, Wes and Scott talk with Dax Raad about building on serverless infrastructure, Next.js, and SST. <a id= "Sentry__Sponsor_2"></a>Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting <a href= "https://sentry.io">Sentry.io</a> and using the coupon code TASTYTREAT during sign up. <a id= "Show_Notes_6"></a>Show Notes --- [00:36] (#t=00:36) Welcome --- [01:05] (#t=01:05) Sponsor: Sentry --- [02:05] (#t=02:05) Who is Dax Raad? --- [Dax on Twitter] (https://twitter.com/thdxr) --- [thdxr.com] (https://thdxr.com) --- [Tomorrow.fm Podcast] (https://tomorrow.fm) --- [SST.dev] (https://sst.dev) --- [04:22] (#t=04:22) Why doesn’t AWS have a simple way to build on top of it? --- [07:46] (#t=07:46) What is Open Next? --- [Vercel] (https://vercel.com) --- [Next.js] (https://nextjs.org) --- [Open-Next.js] (https://open-next.js.org/) --- [10:25] (#t=10:25) How many people are involved in building Open Next? --- [11:14] (#t=11:14) Mapping Next.js to Amazon products --- [14:25] (#t=14:25) What is the edge? --- [18:56] (#t=18:56) Pricing in serverless --- [23:33] (#t=23:33) What about image assets? --- [25:02] (#t=25:02) Is the CDK a layer on top of something Amazon is doing? --- [Amazon CDK] (https://aws.amazon.com/cdk/) --- [27:23] (#t=27:23) What is terraform? --- <a href= "https://developer.hashicorp.com/terraform/intro">Terraform</a> --- [28:50] (#t=28:50) What is SST and why SST? --- [30:54] (#t=30:54) Do I build with SST or on top of SST? --- [32:06] (#t=32:06) How do you do local development with SST? --- [37:01] (#t=37:01) What about databases with SST? --- [40:12] (#t=40:12) What about build pipelines? --- [42:28] (#t=42:28) What is Seed? --- [Seed] (https://seed.run) --- [43:52] (#t=43:52) Any advice for someone learning AWS? --- [SST on YouTube] (https://www.youtube.com/@sst-dev) --- [46:05] (#t=46:05) Supper Club questions --- [Neovim] (https://neovim.io) --- [Toyko Night theme] (https://github.com/folke/tokyonight.nvim) --- [Nerd Fonts] (https://www.nerdfonts.com/font-downloads) --- [Astro] (https://astro.build) --- [TypeScript] (https://www.typescriptlang.org) --- [Alacritty] (https://alacritty.org) --- [i3] (https://i3wm.org) --- [Cloudflare] (https://www.cloudflare.com/) --- <a href= "https://www.thedailybeast.com/inside-hq-trivias-meteoric-rise-and-more-epic-flop"> Inside the Meteoric Rise—and More Epic Flop—of HQ Trivia</a> --- [52:45] (#t=52:45) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__50"></a>××× SIIIIICK ××× PIIIICKS ××× --- [Planetscale] (https://planetscale.com) <a id="Shameless_Plugs_54"></a>Shameless Plugs --- [Rebase.tv] (https://rebase.tv) --- [@RebaseTV on Twitter] (https://twitter.com/rebasetv) --- [Tomorrow.fm episode on Rebase.tv] (https://tomorrow.fm/10) <a id="Tweet_us_your_tasty_treats_60"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets ... Read more

17 Mar 2023

55 MINS

55:42

17 Mar 2023

#590

New Syntax Website Brainstorm! IRL!

In this episode of Syntax, Wes and Scott are in the same room together brainstorming new ideas for the <a href= "http://Syntax.fm">Syntax.fm</a> website: search, transcripts, video, tags, audio player, podcast hosting, and more! <a id= "Sentry___Sponsor_2"></a>Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting <a href= "https://sentry.io">Sentry.io</a> and using the coupon code TASTYTREAT during sign up. <a id= "Show_Notes_6"></a>Show Notes --- [01:08] (#t=01:08) Sponsor: Sentry --- [01:43] (#t=01:43) Brainstorming for Syntax’s new website --- [02:27] (#t=02:27) Are there good podcast websites out there? --- [03:26] (#t=03:26) Homepage design --- [07:33] (#t=07:33) How would you handle login? --- [09:40] (#t=09:40) Search on the site --- [SvelteKit docs] (https://kit.svelte.dev/docs/) --- <a href= "https://github.com/nextapps-de/flexsearch">Flexsearch</a> --- [13:59] (#t=13:59) Transcripts --- [Open AI Whisper] (https://github.com/openai/whisper) --- <a href= "https://colab.research.google.com/drive/1-WOkolnSK5xbvf5SCBtvJYa-CJF6l7lO?usp=sharing#scrollTo=Pq7FNz3OU9kZ"> Whisper AI for podcasters</a> --- [18:25] (#t=18:25) The player --- [21:11] (#t=21:11) Tagging --- [23:45] (#t=23:45) Video --- [Linus Tech Tips - WAN Show] (https://www.youtube.com/watch?v=boPRXV0VmEk) --- [27:45] (#t=27:45) Show notes --- [29:57] (#t=29:57) Surfacing good content on the podcast --- [35:30] (#t=35:30) Interactions --- [36:25] (#t=36:25) Deploy to Podcast Host --- [Libsyn] (https://libsyn.com) --- <a href= "https://www.lemonproductions.ca/portfolio/syntax-fm/">Editor Chris</a> [on Mastodon] (https://mastodon.social/@ichris) --- [38:43] (#t=38:43) Code base --- [Syntax website on GitHub] (https://github.com/wesbos/Syntax) --- [45:21] (#t=45:21) Listener feedback --- [46:27] (#t=46:27) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__34"></a>××× SIIIIICK ××× PIIIICKS ××× --- Scott: [Screen door dog] (https://amzn.to/3IDV4fK) --- Wes: <a href= "https://www.aliexpress.com/w/wholesale-Apple-Watch-band.html">Apple Watch bands</a> <a id="Shameless_Plugs_39"></a>Shameless Plugs --- Scott: [LevelUp Tutorials] (https://levelup.video) --- Wes: [Wes Bos Tutorials] (https://wesbos.com/courses) <a id="Tweet_us_your_tasty_treats_44"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets ... Read more

15 Mar 2023

51 MINS

51:48

15 Mar 2023

#589

Web Streams Explained

In this Hasty Treat, Scott and Wes explain the what, why, and how of web streaming, and some of the jargon you might encounter with web streams. <a id= "Sentry__Sponsor_2"></a>Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting <a href= "https://sentry.io">Sentry.io</a> and using the coupon code TASTYTREAT during sign up. <a id= "Show_Notes_6"></a>Show Notes --- [00:26:11] (#t=00:26:11) Welcome --- [00:59:07] (#t=00:59:07) Sponsor: Sentry --- [01:39:17] (#t=01:39:17) What are Web Streams? --- [03:15:11] (#t=03:15:11) Why are web streams picking up steam lately? --- [04:41:21] (#t=04:41:21) How are web streams streaming? --- [09:28:11] (#t=09:28:11) Searching a database can use streaming --- [13:07:11] (#t=13:07:11) Web stream jargon --- [18:06:11] (#t=18:06:11) FileReader is a Stream --- [19:31:05] (#t=19:31:05) Other Types of Streams --- <a href= "https://developers.cloudflare.com/workers/runtime-apis/html-rewriter#:~:text=The%20HTMLRewriter%20class%20allows%20developers%20to%20build%20comprehensive,jQuery-like%20experience%20directly%20inside%20of%20your%20Workers%20application."> Cloudlfare HTML Rewriter</a> --- [21:50:05] (#t=21:50:05) ReadableStream and Writable Stream --- [27:23:00] (#t=27:23:00) Creating a Writable Stream --- [28:39:11] (#t=28:39:11) TextDecoderStream <a id="Tweet_us_your_tasty_treats_22"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets ... Read more

13 Mar 2023

34 MINS

34:28

13 Mar 2023

#588

Supper Club × Digital Nomad with Eric Sartorius

In this supper club episode of Syntax, Wes and Scott talk with Eric Sartorius about his life as a digital nomad - including recently climbing Kilimanjaro, his tips for travel deals, crazy experiences while travelling, and what he brings on the road with him. <a id= "Show_Notes_2"></a>Show Notes --- [01:02] (#t=01:02) Guest introduction --- [EricSartorius.com] (https://www.ericsartorius.com/) --- [Eric on GitHub] (https://github.com/ericssartorius) --- [PureFunc] (https://www.purefunc.io/) --- [Train Surfing] (https://www.youtube.com/@shiey) --- [Get Stream] (https://getstream.io/) --- [02:51] (#t=02:51) Where have you travelled? --- [04:27] (#t=04:27) What are the challenges of being a digital nomad? --- [09:08] (#t=09:08) How do you research before travel? --- [13:04] (#t=13:04) How do you approach applying for a job? --- [21:10] (#t=21:10) Do you travel with other digital nomads? --- [R16 video] (https://www.youtube.com/watch?v=44kKLeDKIIc) --- [22:43] (#t=22:43) What are the best locations you’ve been? --- [24:21] (#t=24:21) What about health and insurance? --- [Tiny Toones] (https://www.tinytoones.org/) --- <a href= "https://www.travelandleisure.com/travel-news/tsa-posts-raw-meat-on-carousel-seattle-airport"> TSA post raw meat on carousel</a> --- [28:21] (#t=28:21) What motivated you to want to climb Kilimanjaro? --- [41:14] (#t=41:14) What gear do you travel with for web dev? --- <a href= "https://www.osprey.com/us/en/product/talon-33-TALON33F20.html?sku=10002695&nulsc=true"> Osprey Talon 33</a> --- <a href= "https://www.rei.com/product/195445/rei-co-op-expandable-packing-cube-set-smallmediumlarge"> Packing cubes</a> --- [Outlier] (https://outlier.nyc/) --- [Google Fi] (https://fi.google.com/about/?pli=1) --- [Google Flights explore] (https://www.google.com/travel/explore) --- [51:12] (#t=51:12) Using credit card points for flights --- [54:45] (#t=54:45) How do you handle customs? --- [00:13] (#t=00:13) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__31"></a>××× SIIIIICK ××× PIIIICKS ××× --- <a href= "https://skinners.cc/en/skinners-comfort?10-color=77-sand">Comfort 2.0 Czech sock shoes</a> <a id="Shameless_Plugs_35"></a>Shameless Plugs --- [PureFunc] (https://www.purefunc.io/) --- [@TheEpicLife on Instagram] (https://www.instagram.com/theepiclife/) --- [Pamoja Safaris] (https://www.pamojasafaris.com/) <a id="Tweet_us_your_tasty_treats_41"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets ... Read more

10 Mar 2023

1 HR 03 MINS

1:03:01

10 Mar 2023

#587

Fundamentals × What Makes a Website Slow?

In this episode of Syntax, Wes and Scott talk through all the reasons your website might be slow, and how you can troubleshoot a slow website such as issues on the server, large assets, caching, CSS, JavaScript, latency, and more. <a id= "Sentry___Sponsor_2"></a>Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting <a href= "https://sentry.io">Sentry.io</a> and using the coupon code TASTYTREAT during sign up. <a id= "Show_Notes_6"></a>Show Notes --- [00:11] (#t=00:11) Welcome --- [Glove 80 keyboard] (https://www.moergo.com/) --- [Raycast] (https://www.raycast.com/) --- [03:06] (#t=03:06) Sponsor: Sentry --- [05:15] (#t=05:15) What makes a website slow? --- [Uses.tech] (https://uses.tech/) --- [06:29] (#t=06:29) Server Generation Times --- [13:33] (#t=13:33) Large payloads --- [Redis] (https://redis.io/) --- [Gzip] (https://www.gnu.org/software/gzip/) --- [Brotli compression] (https://en.wikipedia.org/wiki/Brotli) --- [Cloudflare] (https://www.cloudflare.com/) --- [Cloudinary] (https://cloudinary.com) --- [18:13] (#t=18:13) Assets being too large --- [23:01] (#t=23:01) Caching assets --- [28:25] (#t=28:25) CDN --- [30:35] (#t=30:35) Caching 101 --- [37:04] (#t=37:04) Render blocking requests --- [40:01] (#t=40:01) CSS --- [42:25] (#t=42:25) JavaScript --- [44:51] (#t=44:51) Latency --- [49:17] (#t=49:17) Flash of dark mode or unsigned out --- [55:00] (#t=55:00) Data uris --- <a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility"> Content-visibility</a> --- <a href= "https://www.npmjs.com/package/vite-plugin-singlefile">vite-plugin-singlefile</a> --- [Pool in your URL] (https://wesbos.com/pool-in-your-url) --- [58:11] (#t=58:11) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__36"></a>××× SIIIIICK ××× PIIIICKS ××× --- Scott: <a href= "https://www.youtube.com/@3blue1brown">3Blue1Brown</a> --- Wes: <a href= "https://suavecito.com/products/firme-clay-pomade">Suavecito Firme Clay Pomade</a> <a id="Shameless_Plugs_41"></a>Shameless Plugs --- Scott: [LevelUp Tutorials] (https://levelup.video) --- Wes: [Wes Bos Tutorials] (https://wesbos.com/courses) <a id="Tweet_us_your_tasty_treats_46"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets ... Read more

08 Mar 2023

1 HR 05 MINS

1:05:10

08 Mar 2023

#586

Node in the Browser × WebContainers + NodeBox

In this Hasty Treat, Scott and Wes talk about two new services that allow you to run Node in the browser, WebContainers + NodeBox. Why Node in the browser? How does it work? And what are the differences and limitations of the services? <a id= "Sentry__Sponsor_2"></a>Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting <a href= "https://sentry.io">Sentry.io</a> and using the coupon code TASTYTREAT during sign up. <a id= "Show_Notes_6"></a>Show Notes --- [00:25] (#t=00:25) Welcome --- [01:14] (#t=01:14) Sponsor: Sentry --- [02:45] (#t=02:45) Webcontainers and NodeBox --- <a href= "https://blog.stackblitz.com/posts/introducing-webcontainers/">Introducing WebContainers</a> --- [Code Sandbox] (https://codesandbox.io) --- [CodePen] (https://codepen.io) --- [Replit] (https://replit.com) --- [GitHub Codespaces] (https://github.com/features/codespaces) --- [06:42] (#t=06:42) Why Node.js in the browser? --- [11:08] (#t=11:08) How does it work? --- [13:10] (#t=13:10) Clientside APIs --- [14:27] (#t=14:27) Using iFrame to proxy messages --- [17:39] (#t=17:39) Are these open source? --- [19:22] (#t=19:22) Differences between the two services --- [21:10] (#t=21:10) Wes to Figma, Scott to Penpot --- [Figma] (https://www.figma.com/) --- [Penpot] (https://penpot.app/) --- [24:51] (#t=24:51) Limitations <a id="Tweet_us_your_tasty_treats_27"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets ... Read more

06 Mar 2023

29 MINS

29:02

06 Mar 2023

#585

Supper Club × Visual Coding Languages With Steve Sewell

In this supper club episode of Syntax, Wes and Scott talk with Steve Sewell about [Builder.io] (http://Builder.io) , Qwik, Partytown, and the tricks and tips he’s learned in building apps for the modern web. <a id= "Show_Notes_2"></a>Show Notes --- [00:37] (#t=00:37) Welcome --- [01:14] (#t=01:14) Guest introduction --- [Steve on Twitter] (https://twitter.com/Steve8708) --- [Steve on GitHub] (https://github.com/steve8708) --- [Builder.io] (https://www.builder.io/) --- [Builder.io/demo] (https://builder.io/demo) --- [04:07] (#t=04:07) Builder works with any tech stack? --- [06:29] (#t=06:29) Where is the structure of the site coming from? --- [07:28] (#t=07:28) What is <a href= "http://Builder.io">Builder.io</a>? --- [11:34] (#t=11:34) What’s the workflow for updating content? --- [13:03] (#t=13:03) What is Builder built in? --- [Mobx] (https://mobx.js.org/README.html) --- [14:36] (#t=14:36) Moving from Figma to HTML --- [18:41] (#t=18:41) Is an app like this divs all the way down? --- [24:55] (#t=24:55) Stories of browser gremlins building? --- [26:29] (#t=26:29) Advice for anyone building drag and drop --- [Fullstory] (https://www.fullstory.com) --- [29:04] (#t=29:04) Does FPS play a part in development? --- [33:31] (#t=33:31) Do you use SVG? --- [36:15] (#t=36:15) Where does Qwik and Partytown fit into all of it? --- [Qwik] (https://qwik.builder.io) --- [Partytown] (https://partytown.builder.io) --- [46:45] (#t=46:45) How does accessibility play into Builder? --- [49:44] (#t=49:44) Supper club questions --- [54:30] (#t=54:30) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__30"></a>××× SIIIIICK ××× PIIIICKS ××× --- <a href= "https://en.wikipedia.org/wiki/Dead_Space_(2023_video_game)">Dead Space Remake</a> <a id="Tweet_us_your_tasty_treats_34"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets ... Read more

03 Mar 2023

59 MINS

59:28

03 Mar 2023

#584

AI and Coding with ChatGPT

In this episode of Syntax, Wes and Scott talk about the current landscape of AI, how AI is trained, is AI going to take your job, who’s going to train AI, and adding AI to your applications. <a id= "Sentry__Sponsor_2"></a>Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting <a href= "https://sentry.io">Sentry.io</a> and using the coupon code TASTYTREAT during sign up. <a id= "Show_Notes_6"></a>Show Notes --- [00:11:10] (#t=00:11:10) Welcome --- [01:58:01] (#t=01:58:01) Sponsor: Sentry --- [03:16:05] (#t=03:16:05) What this episode is not going to be --- [07:36:11] (#t=07:36:11) The current landscape --- [Chat GPT] (https://openai.com/blog/chatgpt/) --- [GitHub Copilot] (https://github.com/features/copilot) --- [Warp Completions] (https://docs.warp.dev/features/completions) --- [Midjourney] (https://www.midjourney.com) --- [Bing AI] (https://www.bing.com/?/ai) --- <a href= "https://stratechery.com/2023/from-bing-to-sydney-search-as-distraction-sentient-ai/"> From Bing to Sydney</a> --- <a href= "https://www.nytimes.com/2023/02/16/technology/bing-chatbot-microsoft-chatgpt.html"> Why a Chat with Bing Left Me Deeply Unsettled</a> --- [Tensorflow] (https://www.tensorflow.org) --- [Stable Diffusion] (https://stablediffusionweb.com) --- [Amazing AI] (https://sindresorhus.com/amazing-ai) --- [Dall E] (https://openai.com/dall-e-2/) --- [15:26:11] (#t=15:26:11) Timeline of growth of AI --- [AI Timeline] (https://lifearchitect.ai/timeline/) --- [16:24:11] (#t=16:24:11) What is a model for AI? --- [24:20:11] (#t=24:20:11) How do you use AI? --- [33:14:00] (#t=33:14:00) Code brushes --- [35:57:18] (#t=35:57:18) Midjourney --- [Yandex] (https://yandex.com) --- [40:13:18] (#t=40:13:18) Is it going to take your job? --- [Canva] (https://www.canva.com) --- [Cal] (https://cal.com) --- [50:22:19] (#t=50:22:19) Cost prohibitive --- [52:26:20] (#t=52:26:20) Who’s going to train the robots? --- [57:29:12] (#t=57:29:12) Adding AI to your apps --- [58:50:11] (#t=58:50:11) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__38"></a>××× SIIIIICK ××× PIIIICKS ××× --- Scott: [Motion sensor] (https://amzn.to/41fkKaK) --- Wes: <a href= "https://www.apple.com/shop/buy-watch/apple-watch-ultra">Apple Watch Ultra</a> <a id="Shameless_Plugs_43"></a>Shameless Plugs --- Scott: [LevelUp Tutorials] (https://levelup.video) --- Wes: [Wes Bos Tutorials] (https://wesbos.com/courses) <a id="Tweet_us_your_tasty_treats_48"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets ... Read more

01 Mar 2023

1 HR 06 MINS

1:06:03

01 Mar 2023

#583

Clean vs Sloppy Code

In this Hasty Treat, Scott and Wes talk about the difference between sloppy code and clean code, how to establish rules for your code base, and how to enforce your rules. <a id= "Sentry__Sponsor_2"></a>Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting <a href= "https://sentry.io">Sentry.io</a> and using the coupon code TASTYTREAT during sign up. <a id= "Show_Notes_6"></a>Show Notes --- [00:24] (#t=00:24) Welcome --- [00:46] (#t=00:46) Sponsor: Sentry --- [01:51] (#t=01:51) Uses performance issues --- [Uses.tech] (https://uses.tech) --- [04:23] (#t=04:23) Understand Sloppy Code --- [10:17] (#t=10:17) Syntax website timestamp issue --- [12:56] (#t=12:56) Establish rules to fix sloppy code --- [16:35] (#t=16:35) Adding a feature, do you refactor an unrelated function? --- [23:07] (#t=23:07) How do you enforce rules? --- [GitHub Actions] (https://docs.github.com/en/actions) <a id="Tweet_us_your_tasty_treats_19"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets ... Read more

27 Feb 2023

28 MINS

28:13

27 Feb 2023

#582

Supper Club × Astro 2.0 with Fred Schott

In this supper club episode of Syntax, Wes and Scott talk with Fred Schott about all things Astro v2.0. What is Astro and why should you use it? How do islands work? Images, edge, AI, error overlays, hybrid rendering, and more! <a id= "Show_Notes_3"></a>Show Notes --- [00:40] (#t=00:40) Welcome --- [01:08] (#t=01:08) Guest introduction --- [FredKSchott.com] (https://fredkschott.com) --- [@Fredkschott on Twitter] (https://twitter.com/fredkschott) --- [Fred on GitHub] (https://github.com/fredkschott) --- [02:17] (#t=02:17) What is Astro and why should someone use it? --- [04:57] (#t=04:57) What can you build with Astro? --- [06:11] (#t=06:11) What’s an island in content? --- [09:43] (#t=09:43) How do routes work with Astro? --- [12:30] (#t=12:30) How is Markdown handled in Astro? --- [mdxjs] (https://mdxjs.com) --- [14:32] (#t=14:32) How does Astro work on the edge? --- [18:15] (#t=18:15) How does Astro v2 handle data fetching? --- [23:25] (#t=23:25) Integrations with Astro --- [26:38] (#t=26:38) Astro AI bot? --- [AI Langchain] (https://github.com/hwchase17/langchain/) --- [30:40] (#t=30:40) Error overlay design --- [36:10] (#t=36:10) What are some of the most important upgrades in v2? --- [37:18] (#t=37:18) Hybrid rendering --- [40:27] (#t=40:27) Astro’s image component --- [Squoosh] (https://squoosh.app) --- [44:39] (#t=44:39) What happened to snowpack? Pikapkg? --- [46:48] (#t=46:48) What is the financial model for Astro? --- [50:28] (#t=50:28) Supper Club questions --- [Obsidian] (https://obsidian.md) <a id="_SIIIIICK__PIIIICKS__31"></a>××× SIIIIICK ××× PIIIICKS ××× --- [Chat Langchain] (https://chat.langchain.dev) <a id="Shameless_Plugs_35"></a>Shameless Plugs --- [Astro] (https://astro.build) --- [Astro Discord] (https://astro.build/chat) <a id="Tweet_us_your_tasty_treats_40"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets ... Read more

24 Feb 2023

58 MINS

58:54

24 Feb 2023

#581

Warp Terminal × Next Gen Terminals

In this episode of Syntax, Wes and Scott talk about why they’re digging Warp as their terminal app of choice, what the terminal is, and some of their wishlist items for Warp. <a id= "Show_Notes_2" name="Show_Notes_2"></a>Show Notes --- [00:09] (#t=00:09) Welcome --- [02:11] (#t=02:11) Disclaimers --- [04:17] (#t=04:17) What is the terminal? --- [06:54] (#t=06:54) What we’ve used for terminal --- [Get Warp] (https://app.warp.dev/referral/2664Z2) --- [Hyper Terminal] (https://hyper.is/) --- [iTerm] (https://iterm2.com/) --- [Alacritty] (https://alacritty.org/) --- [11:14] (#t=11:14) Terminal terminology --- <a href= "https://commandlinepoweruser.com/">CommandLinePowerUser.com</a> --- <a href= "https://learn.microsoft.com/en-us/windows/wsl/install">WSL</a> --- [OhMyPosh] (https://ohmyposh.dev/) --- [OhMyZsh] (https://ohmyz.sh/) --- [Starship] (https://starship.rs/) --- [Ion] (https://github.com/redox-os/ion) --- [17:35] (#t=17:35) The basic features of Warp --- [20:45] (#t=20:45) Autocomplete issues --- [Fig] (https://www.npmjs.com/package/fig) --- [25:06] (#t=25:06) Sticky header --- [26:13] (#t=26:13) Blocks --- [29:17] (#t=29:17) The prompt --- [30:38] (#t=30:38) Sharing blocks and live sessions --- [32:29] (#t=32:29) AI Command Search --- <a href= "https://twitter.com/warpdotdev/status/1612509826738966528">AI Command search</a> --- [35:51] (#t=35:51) Remote SSH --- [37:53] (#t=37:53) Window management --- <a href= "https://docs.warp.dev/features/sessions/launch-configurations">Launch configurations</a> --- [38:42] (#t=38:42) Workflows --- [40:19] (#t=40:19) The command palette --- [42:36] (#t=42:36) How does Warp make money? --- [43:54] (#t=43:54) Warp requires an account --- [46:09] (#t=46:09) Annoyances and wishlists --- [58:29] (#t=58:29) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__38" name= "_SIIIIICK__PIIIICKS__38"></a>××× SIIIIICK ××× PIIIICKS ××× --- Scott: [50 Pokemon Cards for $5] (https://amzn.to/3XDPek0) --- Wes: [iPad Sorter Station] (https://amzn.to/3YwqaN0) <a id="Shameless_Plugs_43" name="Shameless_Plugs_43"></a>Shameless Plugs --- Scott: [LevelUp Tutorials] (https://levelup.video) --- Wes: [Wes Bos Tutorials] (https://wesbos.com/courses) <a id="Tweet_us_your_tasty_treats_48" name= "Tweet_us_your_tasty_treats_48"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets ... Read more

22 Feb 2023