…

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.

#545

Potluck × Twitter Following × TypeScript × Playwright

In this potluck episode of Syntax, Wes and Scott answer your questions about strategies to find good Twitter follows, should we use TypeScript for a company blog, what’s Playwright, and more! <a id= "Prismic___Sponsor_2" name="Prismic___Sponsor_2"></a>Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at <a href= "https://prismic.io/syntax">prismic.io/syntax</a>. <a id= "Sanity__Sponsor_6" name="Sanity__Sponsor_6"></a>Sanity - Sponsor [Sanity.io] (http://Sanity.io) is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>. <a id="LogRocket__Sponsor_10" name= "LogRocket__Sponsor_10"></a>LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>. <a id="Show_Notes_14" name="Show_Notes_14"></a>Show Notes --- [00:10] (#t=00:10) Welcome --- [01:53] (#t=01:53) TikTok update --- [02:46] (#t=02:46) What strategies do you use to find the good stuff? --- [Tweetdeck] (https://tweetdeck.twitter.com) --- [11:17] (#t=11:17) What is the clear distinction b/w how the CRUD Ops & the Real time chat protocols (XMPP, Websockets, etc) differ? --- [15:56] (#t=15:56) Should we use TypeScript for a new blog? --- [20:45] (#t=20:45) Sponsor: Sanity --- [21:45] (#t=21:45) Is there any reason to still use string concatenation over template literals? --- [26:13] (#t=26:13) What should React devs use to get initial scaffolding in place? --- [Create React App] (https://create-react-app.dev) --- [Vite] (https://vitejs.dev) --- [Turbo Pack] (https://turbo.build/pack) --- [29:38] (#t=29:38) What’s the deal with Playwright? --- [Playwright] (https://playwright.dev) --- [34:28] (#t=34:28) Sponsor: LogRocket --- [35:19] (#t=35:19) What separates a “scripting” language from a “programming” language? --- [39:37:14] (#t=39:37:14) Sponsor: Prismic --- [40:23:02] (#t=40:23:02) Do you have any tips on how to change a defeated programmer mindset? --- [Partydown] (https://partytown.builder.io) --- [47:34:07] (#t=47:34:07) How has your use of and work in the browser changed with Arc? --- [Arc Browser] (https://arc.net) --- <a href= "https://syntax.fm/show/514/supper-club-arc-browser-with-hursh-agrawal"> Syntax 514 - Supper Club × Arc Browser with Hursh Agrawal</a> --- [49:18:15] (#t=49:18:15) Why would I attach an event listener with the useCapture argument as true? --- [51:33:24] (#t=51:33:24) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__41" name= "_SIIIIICK__PIIIICKS__41"></a>××× SIIIIICK ××× PIIIICKS ××× --- Scott: [Screwless plates] (https://amzn.to/3hbeT3I) / [4 pack of screwless plates] (https://amzn.to/3TfUhEW) --- Wes: <a href= "https://www.homedepot.ca/product/tuff-store-5-76l-plastic-storage-utility-tote-box-in-clear/1000705919"> Shoe Boxes for Cords</a> <a id="Shameless_Plugs_46" name="Shameless_Plugs_46"></a>Shameless Plugs --- Scott: [LevelUp TikTok] (https://www.tiktok.com/@leveluptuts) --- Wes: [Wes Bos TikTok] (https://www.tiktok.com/@wesbos) <a id="Tweet_us_your_tasty_treats_51" name= "Tweet_us_your_tasty_treats_51"></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

16 hrs Ago

57 MINS

57:31

16 hrs Ago

#544

Serverless Limitations

In this episode of Syntax, Wes and Scott talk through some of the limitations of using serverless in your project. <a id= "Sentry___Sponsor_2" name="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= "MagicBell__Sponsor_6" name="MagicBell__Sponsor_6"></a>MagicBell - Sponsor [MagicBell] (https://www.magicbell.com) is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months. <a id="Show_Notes_10" name="Show_Notes_10"></a>Show Notes --- [00:23] (#t=00:23) Welcome --- [01:08] (#t=01:08) Sponsor: Sentry --- [01:59] (#t=01:59) Sponsor: MagicBell --- [03:11] (#t=03:11) Topic introduction --- [04:44] (#t=04:44) Function limit --- [Puppeteer] (https://pptr.dev) --- [08:51] (#t=08:51) Node support --- [10:00] (#t=10:00) Cron jobs --- [11:12] (#t=11:12) Local development --- [Miniflare] (https://miniflare.dev) --- [11:45] (#t=11:45) Database access --- [SQLite] (https://sqlite.org/index.html) --- [12:42] (#t=12:42) Sharing code --- [13:07] (#t=13:07) Environmental variables --- <a href= "https://docs.netlify.com/configure-builds/environment-variables/">Netlify environmental variables</a> --- [14:37] (#t=14:37) Timeouts --- [15:47] (#t=15:47) Sass is expensive --- [17:26] (#t=17:26) Infastructure as code --- [19:02] (#t=19:02) Search --- [Algolia] (https://www.algolia.com) <a id="Shameless_Plugs_33" name="Shameless_Plugs_33"></a>Shameless Plugs --- Scott: [LevelUp Tutorials] (https://leveluptutorials.com/) --- Wes: [Wes Bos Tutorials] (https://wesbos.com/courses) <a id="Tweet_us_your_tasty_treats_38" name= "Tweet_us_your_tasty_treats_38"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets ... Read more

28 Nov 2022

20 MINS

20:28

28 Nov 2022

#543

Supper Club × Anything But Coding with Wes and Scott

In this supper club episode of Syntax, Wes and Scott talk with Scott and Wes! Talking about BBQ, electric cars, workout equipment, home renos - but they do sneak in a bit of coding talk! <a id= "Kontent_by_Kentico__Sponsor_2" name= "Kontent_by_Kentico__Sponsor_2"></a>Kontent by Kentico - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications. [Spin up a new project today] (kontent.ai/syntax) and discover Kontent. <a id= "Tuple__Sponsor_6" name="Tuple__Sponsor_6"></a>Tuple - Sponsor This week’s sponsor is Tuple, an app built specifically for remote pair programming. The app is written in C++ and tuned for high-resolution screen sharing and low-latency remote control. Because developers deserve better than Zoom or Meet for pairing. [https://tuple.app/syntax] (https://tuple.app/syntax) <a id="Show_Notes_10" name="Show_Notes_10"></a>Show Notes --- [00:37:11] (#t=00:37:11) Welcome --- [03:18:10] (#t=03:18:10) Saskatchewan and Saskatoon Berries --- [Saskatoon Berry Barn] (https://www.berrybarn.ca) --- [05:02:14] (#t=05:02:14) TV shows we’re watching --- <a href= "https://en.wikipedia.org/wiki/The_Amazing_Race_Canada">Amazing Race Canada</a> --- <a href= "https://en.wikipedia.org/wiki/America%27s_Best_Dance_Crew">America’s Dance Crew</a> --- <a href= "https://tv.cottagelife.com/shows/lakefront-luxury/">Lakefront Luxury</a> --- [12:49:12] (#t=12:49:12) New house vibe --- [18:29:06] (#t=18:29:06) Sponsor: Kontent --- [19:13:20] (#t=19:13:20) Sauna thoughts --- [22:58:24] (#t=22:58:24) Home gym thoughts --- [Woodupp] (https://woodupp.com) --- [Tonal] (https://www.tonal.com) --- [40:22:16] (#t=40:22:16) Sponsor: Tuple --- [41:17:11] (#t=41:17:11) 3D printer --- [44:11:09] (#t=44:11:09) How many things can you take on? --- [48:23:11] (#t=48:23:11) BBQ talk --- [Amazing Ribs] (https://amazingribs.com) --- [55:26:11] (#t=55:26:11) Electric car update --- [Ioniq 5] (https://www.caranddriver.com/hyundai/ioniq-5) --- [57:45:07] (#t=57:45:07) Supper Club questions --- <a href= "https://marketplace.visualstudio.com/items?itemName=leveluptutorials.theme-levelup"> Level Up Tutorials VS Code Theme</a> --- <a href= "https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode"> Quokka VS Code Extension</a> --- [Quokkajs] (https://quokkajs.com) --- [Console-Ninja] (https://console-ninja.com) <a id="Tweet_us_your_tasty_treats_38" name= "Tweet_us_your_tasty_treats_38"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets ... Read more

25 Nov 2022

1 HR 01 MINS

1:01:46

25 Nov 2022

#542

Responsive Design Techniques

In this episode of Syntax, Wes and Scott talk through some modern responsive design techniques that you may not have heard of, or haven’t had a chance to use yet. <a id= "Linode___Sponsor_2" name="Linode___Sponsor_2"></a>Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at <a href= "https://linode.com/syntax">linode.com/syntax</a>. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit <a href= "https://linode.com/syntax">linode.com/syntax</a> and click on the “Create Free Account” button to get started. <a id= "LogRocket__Sponsor_6" name="LogRocket__Sponsor_6"></a>LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>. <a id="Freshbooks__Sponsor_10" name= "Freshbooks__Sponsor_10"></a>Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> <a id="Show_Notes_14" name="Show_Notes_14"></a>Show Notes --- [00:47] (#t=00:47) Clean Talk --- [03:55] (#t=03:55) The menu of responsive design --- [Syntax 154 with Sara Soueidan] (https://syntax.fm/show/154/svgs-with-sara-soueidan) --- [06:52] (#t=06:52) Responsive design basics --- [11:54] (#t=11:54) What should you build for first in 2022? --- [16:15] (#t=16:15) Shrink and grow until it looks bad --- [21:36] (#t=21:36) Menus in responsive --- [23:43] (#t=23:43) Sponsor: Linode --- [24:13] (#t=24:13) Grid systems --- [28:08] (#t=28:08) Grid and Flexbox --- [CSS Grid Course] (https://cssgrid.io) --- [Flexbox Course] (https://flexbox.io) --- [Can I Use] (https://caniuse.com) --- [35:02] (#t=35:02) Sponsor: LogRocket --- [36:00] (#t=36:00) Container queries --- [45:56] (#t=45:56) FitText --- [49:12] (#t=49:12) How do you test these types of things? --- [51:15] (#t=51:15) Future techniques coming --- [53:28] (#t=53:28) Sponsor: Freshbooks --- [53:56] (#t=53:56) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__37" name= "_SIIIIICK__PIIIICKS__37"></a>××× SIIIIICK ××× PIIIICKS ××× --- Scott: [Lutron Light switches] (https://amzn.to/3Te5juj) --- Wes: [Sunco Lighting BR30] (https://amzn.to/3UeDV0t) <a id="Shameless_Plugs_42" name="Shameless_Plugs_42"></a>Shameless Plugs --- Scott: [LevelUp Tutorials] (https://leveluptutorials.com/) --- Wes: [Wes Bos Tutorials] (https://wesbos.com/courses) <a id="Tweet_us_your_tasty_treats_47" name= "Tweet_us_your_tasty_treats_47"></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

23 Nov 2022

1 HR 01 MINS

1:01:56

23 Nov 2022

#541

React use() hook and Async Server Components Proposal

In this Hasty Treat, Scott and Wes talk about the new proposal for React, what the basics of it are, why it’s being proposed, and some benefits and issues it brings up. <a id= "Sentry__Sponsor_2" name="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= "Auth0__Sponsor_6" name="Auth0__Sponsor_6"></a>Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. [https://a0.to/syntax] (https://a0.to/syntax) <a id="Show_Notes_10" name="Show_Notes_10"></a>Show Notes --- [00:13] (#t=00:13) Welcome --- [01:39] (#t=01:39) Sponsor: Sentry --- [02:41] (#t=02:41) Auth0 --- [03:57] (#t=03:57) A bit more auth --- [05:24] (#t=05:24) New RFC --- [RFC: First class support for promises and async/await] (https://github.com/reactjs/rfcs/pull/229) --- [08:30] (#t=08:30) What are the basics of this proposal? --- [10:12] (#t=10:12) Scott gets a little Svelte-y --- [11:44] (#t=11:44) Why is this being proposed? --- [17:14] (#t=17:14) Infinite loop possibility --- [18:44] (#t=18:44) Why is Svelte API better in this use case? --- [Tanstack] (https://tanstack.com) --- <a href= "https://developer.chrome.com/blog/smooshgate/">Smooshgate</a> <a id="Tweet_us_your_tasty_treats_26" name= "Tweet_us_your_tasty_treats_26"></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

21 Nov 2022

22 MINS

22:11

21 Nov 2022

#540

Supper Club × Ryan Dahl and Deno

In this supper club episode of Syntax, Wes and Scott talk with Ryan Dahl about Deno. Why was Deno created? What is Deno written in? How is Deno so much faster? And what’s the future of Deno? <a id= "Gatsby__Sponsor_2" name="Gatsby__Sponsor_2"></a>Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit [Gatsby.dev/Syntax] (https://gatsby.dev/Syntax) to get your first Gatsby site up in minutes and experience the speed. ⚡️ <a id= "Sentry__Sponsor_6" name="Sentry__Sponsor_6"></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="Sanity__Sponsor_10" name="Sanity__Sponsor_10"></a>Sanity - Sponsor [Sanity.io] (http://Sanity.io) is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>. <a id="Show_Notes_14" name="Show_Notes_14"></a>Show Notes --- [00:36] (#t=00:36) Welcome --- [Tinyclouds.org] (https://tinyclouds.org) --- [Ry on GitHub] (https://github.com/ry) --- [Deno] (https://deno.land) --- [Deno Discord] (https://discord.com/invite/deno) --- [01:18] (#t=01:18) The introduction of Node --- [02:51] (#t=02:51) Why are you still betting on JavaScript for the web? --- [05:34] (#t=05:34) Why did you make Deno? --- [09:04] (#t=09:04) How does TypeScript fit into the landscape? --- [11:40] (#t=11:40) How is Deno so much faster? --- [13:28] (#t=13:28) Sponsor: Sanity --- [14:17] (#t=14:17) What is Deno written in? --- [15:56] (#t=15:56) Should developers be learning Rust? --- [18:27] (#t=18:27) Will libraries that work on npm eventually work in Deno? --- [21:52] (#t=21:52) Are we going to use Node API’s or web spec? --- [24:31] (#t=24:31) Sponsor: Sentry --- [25:31] (#t=25:31) What is tooling like for Deno? --- [WinterCG] (https://wintercg.org/) --- <a href= "https://marketplace.visualstudio.com/items?itemName=denoland.vscode-deno"> Deno VS Code Extension</a> --- [29:27] (#t=29:27) What is Deno deploy? --- [Deno Deploy] (https://deno.com/deploy) --- [34:01] (#t=34:01) Deno’s framework Fresh --- [38:56] (#t=38:56) Client side vs server side rendering --- [41:27] (#t=41:27) Sponsor: Gatsby --- [42:28] (#t=42:28) What’s the future of Deno? --- [43:39] (#t=43:39) Supper club questions --- [53:30] (#t=53:30) SIIIIICK ××× PIIIICKS ××× <a id="Tweet_us_your_tasty_treats_44" name= "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

18 Nov 2022

55 MINS

55:34

18 Nov 2022

#539

CSS Trends Almanac for 2022 Part 2

In this episode of Syntax, it’s part 2 of Wes and Scott’s journey through the CSS Trends Almanac for 2022 talking through the rest of the popular CSS properties on the web. <a id= "Prismic___Sponsor_2" name="Prismic___Sponsor_2"></a>Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at <a href= "https://prismic.io/syntax">prismic.io/syntax</a>. <a id= "Sanity__Sponsor_6" name="Sanity__Sponsor_6"></a>Sanity - Sponsor [Sanity.io] (http://Sanity.io) is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>. <a id="LogRocket__Sponsor_10" name= "LogRocket__Sponsor_10"></a>LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>. <a id="Show_Notes_14" name="Show_Notes_14"></a>Show Notes --- [00:06] (#t=00:06) Welcome --- <a href= "https://syntax.fm/show/525/2022-css-trends-and-usage-web-almanac">Syntax 525 - 2022 CSS Trends and Usage Web Almanac Part 1</a> --- [01:22] (#t=01:22) Smart home updates --- [04:05] (#t=04:05) Box sizing: border box --- [06:57] (#t=06:57) CSS Columns --- [09:20] (#t=09:20) Aspect Ratio --- [Can I Use CSS Properties Rotate] (https://caniuse.com/mdn-css_properties_rotate) --- [09:53] (#t=09:53) Transitions and animations --- [13:36] (#t=13:36) Transition time --- [17:05] (#t=17:05) Steps as a timing function --- [19:01] (#t=19:01) Sponsor: Prismic --- [19:43] (#t=19:43) Blend modes --- [23:57] (#t=23:57) Responsive web design --- [26:31] (#t=26:31) Prefers Color Scheme --- [27:48] (#t=27:48) Popular breakpoints --- [30:57] (#t=30:57) Sponsor: LogRocket --- [32:06] (#t=32:06) Feature queries and @ supports --- [34:59] (#t=34:59) Logical and physical properties --- [37:59] (#t=37:59) css-in-js --- <a href= "https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b">Sam Magura - Why We’re Breaking Up with CSS-in-JS</a> --- <a href= "https://bradfrost.com/blog/link/why-were-breaking-up-with-css-in-js/"> Brad Frost - Why We’re Breaking Up with CSS in JS</a> --- [42:28] (#t=42:28) Sass --- [43:20] (#t=43:20) Print styles --- [45:38] (#t=45:38) Sponsor: Sanity --- [46:38] (#t=46:38) Longhand properities --- [48:21] (#t=48:21) Non-existant properties --- [52:06] (#t=52:06) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__44" name= "_SIIIIICK__PIIIICKS__44"></a>××× SIIIIICK ××× PIIIICKS ××× --- Scott: [Front Bumper Drillless Plate Holder] (https://amzn.to/3zwGhj6) --- Wes: [1U Server Rack] (https://amzn.to/3h0xvmT) <a id="Shameless_Plugs_49" name="Shameless_Plugs_49"></a>Shameless Plugs --- Scott: [LevelUp Tutorials] (https://leveluptutorials.com/) --- Wes: [Wes Bos Tutorials] (https://wesbos.com/courses) <a id="Tweet_us_your_tasty_treats_54" name= "Tweet_us_your_tasty_treats_54"></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

16 Nov 2022

58 MINS

58:41

16 Nov 2022

#538

Short Form Content with Tiktok, Reels, Shorts, Tweets

In this Hasty Treat, Scott and Wes talk about creating short form content for TikTok, Reels, Shorts, and tweets. What are some of the benefits and limitations of creating for vertical video, and what tools are they using to create videos. <a id= "Sentry__Sponsor_2" name="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= "Freshbooks__Sponsor_6" name="Freshbooks__Sponsor_6"></a>Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> <a id="Show_Notes_10" name="Show_Notes_10"></a>Show Notes --- [00:23] (#t=00:23) Welcome --- [01:39] (#t=01:39) Sponsor: Sentry --- [02:40] (#t=02:40) Sponsor: Freshbooks --- [04:05] (#t=04:05) Short form content intro --- [WesBos.com/tips] (https://wesbos.com/tips) --- [Wes on TikTok] (https://www.tiktok.com/@wesbos) --- [LevelUp Tutorials on TikTok] (https://www.tiktok.com/@leveluptuts) --- [Scott Stolinski on TikTok] (https://www.tiktok.com/@stolinski) --- [07:16] (#t=07:16) The good and the bad of short form content --- [17:13] (#t=17:13) Repurposing content --- [18:36] (#t=18:36) Content that works --- [21:12] (#t=21:12) Tips for making short form content --- [24:19] (#t=24:19) Limitations of short form content --- [31:49] (#t=31:49) Tools for editing --- <a href= "https://www.telestream.net/screenflow/overview.htm">Screenflow</a> --- [Descript] (https://www.descript.com) --- [Detail.co] (https://detail.co) <a id="Tweet_us_your_tasty_treats_30" name= "Tweet_us_your_tasty_treats_30"></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

14 Nov 2022

36 MINS

36:30

14 Nov 2022

#537

Supper Club × Open Table LIVE SHOW

In this supper club episode of Syntax, Wes and Scott recorded a live open table episode with guests calling in to talk about Wasm, building [Riverside.fm] (http://Riverside.fm) , home networking, getting a job at Microsoft, Svelte and Sveltekit, htmx, and more! <a id= "Auth0__Sponsor_2" name="Auth0__Sponsor_2"></a>Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. [https://a0.to/syntax] (https://a0.to/syntax) <a id= "Appwrite__Sponsor_6" name="Appwrite__Sponsor_6"></a>Appwrite - Sponsor Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application. Get free cloud credits by <a href= "https://appwrite.io/cloud">signing up for early access to the Appwrite Cloud launch</a>! <a id="Show_Notes_10" name="Show_Notes_10"></a>Show Notes --- [00:30] (#t=00:30) Welcome --- [01:49] (#t=01:49) Safari aspect ratio bug --- [04:17] (#t=04:17) Thoughts on Vercel announcements? --- [NextJS Conf] (https://nextjs.org/conf) --- [10:07] (#t=10:07) Gideon Riverside CTO --- [Riverside.fm Careers] (https://riverside.fm/careers) --- [14:44] (#t=14:44) Do JS devs need to branch out? --- [16:52] (#t=16:52) Wasm --- [Web Assembly (WASM)] (https://webassembly.org) --- [Rustlings] (https://github.com/rust-lang/rustlings) --- [19:46] (#t=19:46) Sponsor: Auth0 --- [21:03] (#t=21:03) Which company will Vercel aquire next? --- [Guillermo Rauch] (https://twitter.com/rauchg) --- <a href= "https://www.akamai.com/newsroom/press-release/akamai-to-acquire-linode"> Akamai Acquires Linode</a> --- [27:12] (#t=27:12) Svelte Kit and Vercel --- [30:20] (#t=30:20) Why don’t you terminate your own ethernet cables? --- [30:58] (#t=30:58) How does <a href= "http://Fly.io">Fly.io</a> compare to Vercel? --- [Fly.io] (https://fly.io) --- [31:36] (#t=31:36) Did Wes learn Vue? --- [32:10] (#t=32:10) Brad jumping on the Remix train --- [Remix] (https://remix.run) --- [34:18] (#t=34:18) Layout shift caused by images in Markdown --- [38:30] (#t=38:30) Maintaining home networking --- [Ubiquiti] (https://www.ui.com) --- [44:44] (#t=44:44) Taking a course lead to a job with Microsoft --- [Soumya’s YouTube - Geekysrm] (https://www.youtube.com/geekysrm) / [website] (https://soumya.dev) / <a href= "https://twitter.com/geekysrm">Twitter</a> --- [47:38] (#t=47:38) Sponsor: Appwrite --- [48:39] (#t=48:39) Are you still using your Synology NAS? --- [Synology] (https://www.synology.com/) --- [53:53] (#t=53:53) Is Svelte ready for smaller team projects? --- [Svelte Kit] (https://kit.svelte.dev) --- [Wyze] (https://www.wyze.com) --- [56:03] (#t=56:03) HTMX --- [htmx] (https://htmx.org) --- [Alpine.js] (https://alpinejs.dev) --- [01:49] (#t=01:49) Docker Wasm preview --- <a href= "https://www.docker.com/blog/docker-wasm-technical-preview/">Introducing the Docker+Wasm Technical Preview</a> --- [WebAssembly System Interface] (https://wasi.dev) <a id="Tweet_us_your_tasty_treats_51" name= "Tweet_us_your_tasty_treats_51"></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

11 Nov 2022

1 HR 05 MINS

1:05:58

11 Nov 2022

#536

Potluck × Meeting IRL × SSG vs SSR × Domain Privacy

In this Potluck episode of Syntax, Wes and Scott answer your questions about meeting IRL, bookmarks, SSG vs SSR, domain privacy, deploying monorepos, and more. <a id= "Sentry___Sponsor_2" name="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= "Sanity__Sponsor_6" name="Sanity__Sponsor_6"></a>Sanity - Sponsor [Sanity.io] (http://Sanity.io) is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>. <a id="Freshbooks__Sponsor_10" name= "Freshbooks__Sponsor_10"></a>Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> <a id="Show_Notes_14" name="Show_Notes_14"></a>Show Notes --- [00:08] (#t=00:08) Welcome --- [01:20] (#t=01:20) Weather updates --- [02:21] (#t=02:21) How often have you gotten together in real life? --- [Jamstack Conf] (https://jamstack.org/conf/) --- [Reactathon] (https://www.reactathon.com) --- [05:33] (#t=05:33) What are people using to bookmark sites? --- [Arc Browser] (https://arc.net) --- [09:03] (#t=09:03) When not to use Static Site Generation (SSG), and when to use Server-side Rendering (SSR)? --- [Svelte Kit] (https://kit.svelte.dev) --- [13:53] (#t=13:53) How do you do correct error handling to catch everything? --- [Sentry.io] (https://sentry.io) --- [21:13] (#t=21:13) Sponsor: Sentry --- [22:50] (#t=22:50) Is there any benefit to using getters and setters in classes set them over plain methods? --- [27:47] (#t=27:47) Will there ever be a js framework that can SSR on a non-JS backend? --- [Render] (https://render.com) --- [pnpm] (https://pnpm.io) --- [32:40] (#t=32:40) Have either of you thought about learning and teaching Python or Django? --- [34:56] (#t=34:56) What is your opinion on purchasing “Domain Privacy” with each domain? --- [37:49] (#t=37:49) Sponsor: Sanity --- [38:44] (#t=38:44) Domain privacy continued --- [39:22] (#t=39:22) How you deploy monorepo packages? --- [Tanstack] (https://tanstack.com) --- [Vite] (https://vitejs.dev) --- [43:48] (#t=43:48) As a member of a non margin group should I avoid applying for jobs when they say they welcome applicants who are of a marginalized group to support diversity? --- [46:12] (#t=46:12) When would you, if ever, choose good-old React over something like Next JS? --- [53:24] (#t=53:24) Sponsor: Freshbooks --- [54:16] (#t=54:16) Is it preferred to import via absolute reference or relative reference? --- [00:23] (#t=00:23) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__45" name= "_SIIIIICK__PIIIICKS__45"></a>××× SIIIIICK ××× PIIIICKS ××× --- Scott: [Air Compressor] (https://amzn.to/3TxLUFx) --- Wes: [Blue Flush Cutter Mini Diagonal Cutting Pliers Side Cutter Nippers Wire Cutter] (https://amzn.to/3VVnXK0) <a id="Shameless_Plugs_50" name="Shameless_Plugs_50"></a>Shameless Plugs --- Scott: <a href= "https://leveluptutorials.com/tutorials/keystone-js/introduction">LevelUp Tutorials</a> --- Wes: [Wes Bos Tutorials] (https://wesbos.com/courses) <a id="Tweet_us_your_tasty_treats_55" name= "Tweet_us_your_tasty_treats_55"></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

09 Nov 2022

1 HR 07 MINS

1:07:29

09 Nov 2022

#535

Zod Schema Validation and Type Generation

In this Hasty Treat, Scott and Wes talk about Zod, a TypeScript-first schema validation with static type inference. How are we using Zod? What do we like? And our thoughts on the Zod ecosystem. <a id= "Linode__Sponsor_2" name="Linode__Sponsor_2"></a>Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at <a href= "https://linode.com/syntax">linode.com/syntax</a>. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit <a href= "https://linode.com/syntax">linode.com/syntax</a> and click on the “Create Free Account” button to get started. <a id= "LogRocket__Sponsor_6" name="LogRocket__Sponsor_6"></a>LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>. <a id="Show_Notes_10" name="Show_Notes_10"></a>Show Notes --- [00:24] (#t=00:24) Welcome --- [01:48] (#t=01:48) Sponsor: LogRocket --- [02:54] (#t=02:54) Sponsor: Linode --- [04:07] (#t=04:07) Minecraft thoughts --- [Minecraft] (https://www.minecraft.net) --- [06:25] (#t=06:25) Scratch --- [Scratch] (https://scratch.mit.edu) --- [07:19] (#t=07:19) What is Zod? --- [Zod] (https://zod.dev) --- [Zod comparison] (https://zod.dev/?id=comparison) --- [10:05] (#t=10:05) Features of Zod --- [13:24] (#t=13:24) How we’re using Zod --- [14:40] (#t=14:40) How Zod works with MongoDB --- [15:51] (#t=15:51) 3rd party plugins --- [19:35] (#t=19:35) Zod ecosystem --- [Zod Ecosystem] (https://github.com/colinhacks/zod#ecosystem) --- [22:22] (#t=22:22) Asynchronous validation <a id="Tweet_us_your_tasty_treats_30" name= "Tweet_us_your_tasty_treats_30"></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

07 Nov 2022

24 MINS

24:05

07 Nov 2022

#534

Supper Club × Coding with ADHD with Dr. Courtney Tolinski

In this supper club episode of Syntax, Wes and Scott talk with Dr. Courtney Tolinski about ADHD, how to tell if you have ADHD, issues related to ADHD for computer workers, anxiety vs ADHD, and more. <a id= "LogRocket__Sponsor_2" name="LogRocket__Sponsor_2"></a>LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>. <a id= "Appwrite__Sponsor_6" name="Appwrite__Sponsor_6"></a>Appwrite - Sponsor Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application. Get free cloud credits by <a href= "https://appwrite.io/cloud">signing up for early access to the Appwrite Cloud launch</a>! <a id="Show_Notes_10" name="Show_Notes_10"></a>Show Notes --- [00:36] (#t=00:36) Welcome --- [02:11] (#t=02:11) Guest introduction --- [03:00] (#t=03:00) Do I have ADHD? --- [CHADD] (https://chadd.org) --- [09:12] (#t=09:12) What is the threshold for diagnosis? --- [11:43] (#t=11:43) Are there other issues for computer workers? --- [Arc Browser] (https://arc.net) --- <a href= "https://syntax.fm/show/513/the-productivity-episode">Syntax 513 - The Productivity Episode</a> --- [15:27] (#t=15:27) Avoiding difficult or boring things --- [17:04] (#t=17:04) Structuring your day --- [18:41] (#t=18:41) Sponsor: LogRocket --- [20:12] (#t=20:12) Any tips for working in a distracting environment? --- [MyNoise.net] (https://mynoise.net) --- [Headspace] (https://www.headspace.com) --- [23:40] (#t=23:40) Can I learn to deal with things? --- [27:28] (#t=27:28) How can I support a team member with ADHD? --- [Missive] (https://missiveapp.com) --- [31:51] (#t=31:51) Sponsor: Appwrite --- [32:47] (#t=32:47) Any lifestyle changes to help with ADHD? --- [38:26] (#t=38:26) How do you find medical help? --- [42:39] (#t=42:39) How do you tell the difference between discipline vs ADHD? --- [47:05] (#t=47:05) Anxiety vs ADHD? --- [48:36] (#t=48:36) Dyslexia and ADHD --- [53:31] (#t=53:31) Inheritable or genetic --- [54:50] (#t=54:50) Don’t rely on self-diagnoses --- [Psychology Today] (https://www.psychologytoday.com/ca) --- [55:48] (#t=55:48) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__40" name= "_SIIIIICK__PIIIICKS__40"></a>××× SIIIIICK ××× PIIIICKS ××× --- [Taking Charge of Adult ADHD] (https://amzn.to/3eB7lq3) --- [Bird feeder] (https://amzn.to/3ez95An) <a id="Tweet_us_your_tasty_treats_45" name= "Tweet_us_your_tasty_treats_45"></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

04 Nov 2022

59 MINS

59:53

04 Nov 2022

#533

Spooky Web Dev Stories Part 2

In this episode of Syntax, Wes and Scott tell more of your scary web dev stories including lorem ipsum mistakes, naming something Skynet, blackouts, Twitch streaming, and more! <a id= "Linode___Sponsor_2" name="Linode___Sponsor_2"></a>Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at <a href= "https://linode.com/syntax">linode.com/syntax</a>. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit <a href= "https://linode.com/syntax">linode.com/syntax</a> and click on the “Create Free Account” button to get started. <a id= "Auth0__Sponsor_6" name="Auth0__Sponsor_6"></a>Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. [https://a0.to/syntax] (https://a0.to/syntax) <a id="LogRocket__Sponsor_10" name= "LogRocket__Sponsor_10"></a>LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>. <a id="Show_Notes_14" name="Show_Notes_14"></a>Show Notes --- [00:12] (#t=00:12) Weeeeeelcome --- [02:11] (#t=02:11) Slipsum mistake --- [Slipsum] (http://slipsum.com/) --- [03:40] (#t=03:40) Brotli scaling explosion --- <a href= "https://www.youtube.com/watch?v=JvJ0v5OohNg&t=766s">When JavaScript Bytes</a> --- [05:14] (#t=05:14) Email loop --- [Breaking Production with 56,000 emails] (https://davidtruxall.com/breaking-production/) --- [05:36] (#t=05:36) DevOops Magento store --- [Example.com] (http://example.com) --- [08:26] (#t=08:26) Scary animal stories --- [11:09] (#t=11:09) Naming something Skynet --- [11:58] (#t=11:58) 2003 Blackout --- [13:16] (#t=13:16) ExtJS error binding --- [17:09] (#t=17:09) Sponsor: Linode --- [17:55] (#t=17:55) Lead gen forms and captcha --- [Issue Renaming upper-case ‘Sirupsen’ to ‘sirupsen’] (https://github.com/sirupsen/logrus/pull/384) --- [Follow up] (https://github.com/sirupsen/logrus/issues/451) --- [19:51] (#t=19:51) Scarlet Letter --- [21:51] (#t=21:51) MongoDB achievement story --- [Adam Coster] (https://twitter.com/costerad) --- [26:14] (#t=26:14) Sponsor: Auth0 --- [28:11] (#t=28:11) Drupal and mysql database fun --- [30:10] (#t=30:10) Nervous Twitch --- [34:03] (#t=34:03) FTP access story --- [37:24] (#t=37:24) Sponsor: LogRocket --- [38:53] (#t=38:53) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__43" name= "_SIIIIICK__PIIIICKS__43"></a>××× SIIIIICK ××× PIIIICKS ××× --- Scott: [Ear foam tips] (https://amzn.to/3CTYyc8) --- Wes: [Stepped drill bit] (https://amzn.to/3CVndNG) / <a href= "https://www.aliexpress.com/item/1005002784042553.html?spm=a2g0o.productlist.main.17.14cb5924qXSj0Z&algo_pvid=c4935816-ccfa-456f-9b92-27d3baea64c4&algo_exp_id=c4935816-ccfa-456f-9b92-27d3baea64c4-8&pdp_ext_f=%7B%22sku_id%22%3A%2212000022168731182%22%7D&pdp_npi=2%40dis%21CAD%219.81%216.87%21%21%21%21%21%402102111816656825317085834d0747%2112000022168731182%21sea&curPageLogUid=u2YOvotleaFP"> Aliexpress link</a> <a id="Shameless_Plugs_48" name="Shameless_Plugs_48"></a>Shameless Plugs --- Scott: [LevelUp Tutorials] (https://leveluptutorials.com/tutorials/) --- Wes: [Wes Bos Tutorials] (https://wesbos.com/courses) <a id="Tweet_us_your_tasty_treats_53" name= "Tweet_us_your_tasty_treats_53"></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

02 Nov 2022

43 MINS

43:48

02 Nov 2022

#532

Explained - Buzz Words and Concepts

In this Hasty Treat, Scott and Wes explain more buzz words like schema, promises, async, sync, dom vs shadow dom vs page HTML, props, and more. <a id= "Appwrite__Sponsor_2" name="Appwrite__Sponsor_2"></a>Appwrite - Sponsor Appwrite is a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application. Get free cloud credits by signing up for early access to the [Appwrite Cloud launch] (https://appwrite.io/cloud) . <a id= "Sanity__Sponsor_6" name="Sanity__Sponsor_6"></a>Sanity - Sponsor [Sanity.io] (http://Sanity.io) is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>. <a id="Show_Notes_10" name="Show_Notes_10"></a>Show Notes --- [00:21] (#t=00:21) Welcome --- [01:17] (#t=01:17) Sponsor: Appwrite --- [03:16] (#t=03:16) Sponsor: Sanity --- [04:08] (#t=04:08) Schema --- [Zod] (https://zod.dev) --- [Apollo GraphQL] (https://www.apollographql.com) --- [07:25] (#t=07:25) Promises --- [08:47] (#t=08:47) Async, Sync, Parallel and Concurrent --- [13:15] (#t=13:15) Dom vs Shadow Dom VS Page HTML --- [16:21] (#t=16:21) Methods vs Functions --- [18:18] (#t=18:18) Props --- [20:27] (#t=20:27) HTTP Requests are Stateless <a id="Tweet_us_your_tasty_treats_25" name= "Tweet_us_your_tasty_treats_25"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets ... Read more

31 Oct 2022

22 MINS

22:04

31 Oct 2022

#531

Supper Club × GraphQL as an Aggregation Layer with Filipe Ferreira of Sky TV

In this supper club episode of Syntax, Wes and Scott talk with Filipe Ferreira of Sky TV about the tech stack used to deliver streaming TV content, build Apple TV apps, host media, and more. <a id= "Gatsby__Sponsor_2" name="Gatsby__Sponsor_2"></a>Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit [Gatsby.dev/Syntax] (https://gatsby.dev/Syntax) to get your first Gatsby site up in minutes and experience the speed. ⚡️ <a id= "Sponsorname__Sponsor_6" name= "Sponsorname__Sponsor_6"></a>Sponsorname - Sponsor Retool is the fast way to build internal tools. Visually design apps that interface with any database or API. Switch to code nearly anywhere to customize how your apps look and work. With Retool, you ship more apps and move your business forward—all in less time. [retool.com/syntax] (http://retool.com/syntax) <a id="Sponsorname__Sponsor_12" name= "Sponsorname__Sponsor_12"></a>Sponsorname - Sponsor <a href= "https://www.storyblok.com/?utm_source=syntaxfm&utm_medium=sponsor&utm_campaign=AWA_SPON_SFM_TRA&utm_content=syntaxfm-podcast"> Storyblok</a> is a headless component-based CMS with a real-time visual editor. It offers the flexibility for developers to craft their perfect tech stack, but it also empowers content creators to make changes independently. The result is that every team has the freedom to quickly and easily create the ideal website with limitless extensibility. Other key features include robust Storyblok SDKs and APIs, powerful internationalization options, and an eCommerce-ready platform. <a id="Show_Notes_16" name="Show_Notes_16"></a>Show Notes --- [00:36] (#t=00:36) Welcome --- [02:15] (#t=02:15) Guest introduction --- [fbritoferreira.com] (https://fbritoferreira.com) --- <a href= "https://mobile.twitter.com/SkyShowtime">@SkyShowtime</a> --- [Peacock] (https://mobile.twitter.com/peacock) --- [04:13] (#t=04:13) What do the systems look like inside of Sky? --- [GraphQL] (https://www.graphql.com) --- [Redis] (https://redis.io) --- [Apollo GraphQL] (https://www.apollographql.com) --- [06:26] (#t=06:26) Do you use federation? --- [07:50] (#t=07:50) How do you handle caching? --- [11:24] (#t=11:24) What’s the tech stack for the front end? --- [13:30] (#t=13:30) Do you cache on client side? --- [15:27] (#t=15:27) How long has Sky been serverless? --- [16:55] (#t=16:55) Sponsor: Gatsby --- [18:05] (#t=18:05) How was Sky’s Apple TV app built? --- [21:17] (#t=21:17) Where did you host media? --- <a href= "https://aws.amazon.com/media/direct-to-consumer-d2c-streaming/">AWS Streaming</a> --- [Mux] (https://www.mux.com) --- [24:37] (#t=24:37) Supporting live events --- [28:03] (#t=28:03) Sponsor: Storyblok --- [30:05] (#t=30:05) What language are you writing the GraphQL layer? --- [The Guild] (https://www.the-guild.dev) --- [32:22] (#t=32:22) How do you define your types? --- [36:40] (#t=36:40) Supper Club questions --- <a href= "https://www.apple.com/shop/product/MK293LL/A/magic-keyboard-with-touch-id-for-mac-models-with-apple-silicon-us-english?fnode=882ee89d5200bd42d9dfdb18ea688d2284453eef35a10d6d1154de2d917c59e1edbd4796140e0decd50ffa8f8c4257d359a9c5370dd91b4fd7ff1ca816e69c2101a97e0e452c1844b6387e49a9dd84f9fd4a36eb78f0f95e050323fa7fd48182"> Apple Magic Keyboard with Touch ID</a> --- <a href= "https://www.apple.com/shop/product/MMMR3LL/A/magic-keyboard-with-touch-id-and-numeric-keypad-for-mac-models-with-apple-silicon-us-english-black-keys?fnode=4c07059c2c01bc9ba2a54f0652c4be0b2d1ba2671c434806d779030bf9e5528ae9e36e718a6ebb1887cb752fbad06477606b200b4eefc2a66c894a24cc214c6c36485aae46d6632518a80da22efd54cbc2ed617c7fa8c6737af423fe6f3208d05f33e8df5aa6fbf8da0267b2be277c39"> Magic Keyboard with Touch ID and Numeric Keypad</a> --- [44:28] (#t=44:28) Sponsor: ReTool --- [45:22] (#t=45:22) AppWrite --- [AppWrite] (https://appwrite.io) --- [48:42] (#t=48:42) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__50" name= "_SIIIIICK__PIIIICKS__50"></a>××× SIIIIICK ××× PIIIICKS ××× --- <a href= "https://www.anker.com/products/a1651?ref=ganprime_top_itemlist&variant=41974350250134"> Anker 733 Power Bank (GaNPrime PowerCore 65W)</a> <a id="Tweet_us_your_tasty_treats_54" name= "Tweet_us_your_tasty_treats_54"></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

28 Oct 2022

51 MINS

51:57

28 Oct 2022

#530

Spooky Web Dev Stories 2022

In this episode of Syntax, Wes and Scott tell your spookiest scary web dev stories including spooky render times, push notification hell, dark Friday, and more! <a id= "Sentry___Sponsor_2" name="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= "Prismic__Sponsor_6" name="Prismic__Sponsor_6"></a>Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at <a href= "https://prismic.io/syntax">prismic.io/syntax</a>. <a id="Freshbooks__Sponsor_10" name= "Freshbooks__Sponsor_10"></a>Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> <a id="Show_Notes_14" name="Show_Notes_14"></a>Show Notes --- [00:15] (#t=00:15) Welcome --- [03:00] (#t=03:00) Spooky Render Times --- [React Virtualized] (https://www.npmjs.com/package/react-virtualized) --- [React Window] (https://www.npmjs.com/package/react-window) --- [09:19] (#t=09:19) Push Notification Hell --- [13:11] (#t=13:11) Dark Friday --- [14:19] (#t=14:19) Tiny Ints with Big Problems --- [16:57] (#t=16:57) A/B Testing --- [18:47] (#t=18:47) Confirm Purchase button mistake --- [21:21] (#t=21:21) Sponsor: Sentry --- [22:34] (#t=22:34) Dike Leak --- [25:14] (#t=25:14) A Steep Grade --- [32:41] (#t=32:41) Falkland Islands mixup --- [33:40] (#t=33:40) Conference mixup --- [36:34] (#t=36:34) Sponsor: Prismic --- [37:58] (#t=37:58) Doctor Who Ipsum --- [43:55] (#t=43:55) Marketplace payouts --- [46:38] (#t=46:38) Sponsor: Freshbooks --- [47:42] (#t=47:42) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__36" name= "_SIIIIICK__PIIIICKS__36"></a>××× SIIIIICK ××× PIIIICKS ××× --- Scott: [PopSocket Wallet] (https://amzn.to/3SXyimF) --- Wes: [Water flosser] (https://amzn.to/3T10epT) <a id="Shameless_Plugs_41" name="Shameless_Plugs_41"></a>Shameless Plugs --- Scott: [LevelUp Tutorials] (https://leveluptutorials.com/) --- Wes: [Wes Bos Tutorials] (https://wesbos.com/courses) <a id="Tweet_us_your_tasty_treats_46" name= "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

26 Oct 2022

54 MINS

54:35

26 Oct 2022

#529

Hydration & New Frameworks Like Qwik

In this Hasty Treat, Scott and Wes talk about Qwik, a new framework designed for the edge. How are things like hydration, lazy loading, rendering, and optimization handled by Qwik? <a id= "Sentry__Sponsor_2" name="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= "Sanity__Sponsor_6" name="Sanity__Sponsor_6"></a>Sanity - Sponsor [Sanity.io] (http://Sanity.io) is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>. <a id="Show_Notes_10" name="Show_Notes_10"></a>Show Notes --- [00:18] (#t=00:18) Welcome --- [01:25] (#t=01:25) Sponsor: Sentry --- [02:47] (#t=02:47) Sponsor: Sanity --- [04:50] (#t=04:50) What is Qwik? --- [Qwik] (https://qwik.builder.io) --- [08:05] (#t=08:05) What is SSR? --- [09:25] (#t=09:25) Working with hydration --- [15:31] (#t=15:31) Lazy loading, reduced rendering, and Qwik optimizer --- [17:30] (#t=17:30) Edge first --- [18:55] (#t=18:55) Data loading or data actions issues --- [20:49] (#t=20:49) Qwik City --- [Qwik City] (https://qwik.builder.io/qwikcity/overview/) <a id="Tweet_us_your_tasty_treats_25" name= "Tweet_us_your_tasty_treats_25"></a>Tweet us your tasty treats --- [Scott’s Instagram] (https://www.instagram.com/stolinski/) --- <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a> --- [Wes’ Instagram] (https://www.instagram.com/wesbos/) --- [Wes’ Twitter] (https://twitter.com/wesbos) --- [Wes’ Facebook] (https://www.facebook.com/wesbos.developer) --- [Scott’s Twitter] (https://twitter.com/stolinski) --- Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets ... Read more

24 Oct 2022

25 MINS

25:19

24 Oct 2022

#528

Supper Club × tRPC With Alex KATT Johansson

In this supper club episode of Syntax, Scott talks with Alex Johansson about his work on tRPC, how it compares to other tools like GraphQL, and what’s next for tRPC? <a id= "Polypane__Sponsor_2" name="Polypane__Sponsor_2"></a>Polypane - Sponsor If you want to build a great website or web app, there’s a million things you need to take care of: responsive design, accessibility, SEO, Meta tags and page structure, to name just a few. Polypane is the browser for developers with tools that help with literally every part of modern web development, helping you save hours (and frustration!) with every project. It shows your site in multiple fully-synced viewports at once, Gives you advice on better accessibility and gives you insight into your performance and quality. Go to <a href= "https://polypane.app/syntax">polypane.app/syntax</a> to start a 14 day free trial and use SYNTAX20 for a 20% discount at checkout. <a id= "FireHydrant__Sponsor_6" name= "FireHydrant__Sponsor_6"></a>FireHydrant - Sponsor Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics. <a id="Kontent_by_Kentico__Sponsor_10" name= "Kontent_by_Kentico__Sponsor_10"></a>Kontent by Kentico - Sponsor Kontent by Kentico is a headless CMS that provides live editing experience to non-technical users and hands you the technical tools to build websites, mobile apps, voice assistants, or anything else where you need content. Use REST API or GraphQL and get your content via the global Fastly CDN. Designed to unify all your content and operations, in compliance with ISO27001 and SOC2Type2 certifications. [Spin up a new project today] (kontent.ai/syntax) and discover Kontent. <a id="Show_Notes_14" name="Show_Notes_14"></a>Show Notes --- [00:37] (#t=00:37) Welcome --- [01:56] (#t=01:56) Guest introduction --- [@Alexdotjs on Twitter] (https://twitter.com/alexdotjs) --- [Alex on GitHub] (https://github.com/KATT) --- [Katt.dev] (https://katt.dev) --- [tRPC.io] (https://trpc.io) --- [02:47] (#t=02:47) What is tRPC? --- [06:56] (#t=06:56) How does type safety work? --- [10:38] (#t=10:38) Sponsor: Polypane --- [13:20] (#t=13:20) What is Zod? --- [17:39] (#t=17:39) How does tRPC relate to GraphQL? --- [23:47] (#t=23:47) Sponsor: FireHydrant --- [25:25] (#t=25:25) What about a data loader? --- [29:04] (#t=29:04) React or NextJS adapters --- [30:41] (#t=30:41) How does it feel when people start building off your project? --- [33:58] (#t=33:58) Sponsor: Kontent by Kentico --- [37:34] (#t=37:34) What’s next for tRPC? --- [42:42] (#t=42:42) How is error handling done? --- [48:43] (#t=48:43) Supper Club questions --- [54:42] (#t=54:42) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__37" name= "_SIIIIICK__PIIIICKS__37"></a>××× SIIIIICK ××× PIIIICKS ××× --- [Kysely] (https://github.com/koskimas/kysely) <a id="Tweet_us_your_tasty_treats_41" name= "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

21 Oct 2022

57 MINS

57:29

21 Oct 2022

#527

2022 CSS Trends and Usage Web Almanac

In this episode of Syntax, Wes and Scott talk about some of the CSS Trends and Usage for 2022 as documented by the Web Almanac - and give some great cleaning tips along the way. <a id= "Prismic___Sponsor_2" name="Prismic___Sponsor_2"></a>Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at <a href= "https://prismic.io/syntax">prismic.io/syntax</a>. <a id= "LogRocket__Sponsor_6" name="LogRocket__Sponsor_6"></a>LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>. <a id="Freshbooks__Sponsor_10" name= "Freshbooks__Sponsor_10"></a>Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> <a id="Show_Notes_14" name="Show_Notes_14"></a>Show Notes --- [00:10] (#t=00:10) Welcome --- [02:15] (#t=02:15) Cleaning Sick Pick --- [Bar Keepers Friend] (https://barkeepersfriend.com) --- [04:40] (#t=04:40) Web Almanac --- [Web Almanac] (https://almanac.httparchive.org/) --- [08:23] (#t=08:23) CSS stylesheets size grow --- [09:49] (#t=09:49) Popular CSS Class names --- [15:29] (#t=15:29) How many websites use !important? --- [18:11] (#t=18:11) Popular pseudo classes --- [20:27] (#t=20:27) Sponsor: Prismic --- [21:38] (#t=21:38) CSS Attribute Selectors --- [27:03] (#t=27:03) Most popular units --- [32:23] (#t=32:23) calc properties --- [33:13] (#t=33:13) Sponsor: LogRocket --- [35:15] (#t=35:15) Top operators when using calc --- [36:21] (#t=36:21) Custom Property Names --- [37:39] (#t=37:39) Property Value types --- [38:00] (#t=38:00) Functions --- [39:27] (#t=39:27) Color names --- [42:02] (#t=42:02) Format of color --- [43:50] (#t=43:50) Most popular gardient on the web --- [47:27] (#t=47:27) Sponsor: Freshbooks --- [47:57] (#t=47:57) We don’t know the web --- [50:39] (#t=50:39) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__41" name= "_SIIIIICK__PIIIICKS__41"></a>××× SIIIIICK ××× PIIIICKS ××× --- Scott: [Dawn] (https://amzn.to/3SStChK) --- Wes: [Flat speaker wire] (https://amzn.to/3CtIuO8) <a id="Shameless_Plugs_46" name="Shameless_Plugs_46"></a>Shameless Plugs --- Scott: [LevelUp Tutorials] (https://leveluptutorials.com/) --- Wes: [Wes Bos Tutorials] (https://wesbos.com/courses) <a id="Tweet_us_your_tasty_treats_51" name= "Tweet_us_your_tasty_treats_51"></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

19 Oct 2022

58 MINS

58:58

19 Oct 2022

#526

Bookmarklets

In this Hasty Treat, Scott and Wes take Matt Busche’s suggestion and talk all about bookmarklets and scripts to modify or manipulate web pages. <a id= "MagicBell__Sponsor_2" name="MagicBell__Sponsor_2"></a>MagicBell - Sponsor [MagicBell] (https://www.magicbell.com) is the the notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months. <a id= "NAME__Sponsor_6" name="NAME__Sponsor_6"></a>NAME - Sponsor COPY HERE <a id="Show_Notes_10" name="Show_Notes_10"></a>Show Notes --- [00:25] (#t=00:25) Welcome --- [02:02] (#t=02:02) What are bookmarklets? --- <a href= "https://gist.github.com/mrbusche/d197281d654b371a1fadfd9f4888358a"> Matt Busche’s fav bookmarklets Gist</a> --- [Bookmarklet Maker] (https://caiorss.github.io/bookmarklet-maker/) --- [CSS Tricks - Web Development Bookmarklets] (https://css-tricks.com/web-development-bookmarklets/) --- [04:49] (#t=04:49) Using an Immediately invoked function expression --- [09:22] (#t=09:22) Greasemonkey --- [Greasemonkey] (https://www.greasespot.net) <a id="Tweet_us_your_tasty_treats_21" name= "Tweet_us_your_tasty_treats_21"></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 Oct 2022

11 MINS

11:12

17 Oct 2022

#525

Supper Club × Neovim, Lua, RPC and Twitch with TJ DeVries

In this supper club episode of Syntax, Wes and Scott talk with TJ DeVries about his work on Neovim, programming in Lua, the benefits of RPC, live streaming your work day, and PDE. <a id= "FireHydrant__Sponsor_2" name= "FireHydrant__Sponsor_2"></a>FireHydrant - Sponsor Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics. <a id= "Hasura__Sponsor_6" name="Hasura__Sponsor_6"></a>Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: [hasura.info] (https://hasura.info/freetrial) . We’ve also got an amazing selection of GraphQL tutorials at <a href= "https://hasura.io/learn">hasura.io/learn</a>. <a id="Gatsby__Sponsor_10" name="Gatsby__Sponsor_10"></a>Gatsby - Sponsor Today’s episode was sponsored by Gatsby, the fastest frontend for the headless web. Gatsby is the framework of choice for content-rich sites backed by a headless CMS as its GraphQL data layer makes it straightforward to source website content from anywhere. Gatsby’s opinionated, React-based framework makes the hardest parts of building a performant website simpler. Visit [Gatsby.dev/Syntax] (https://gatsby.dev/Syntax) to get your first Gatsby site up in minutes and experience the speed. ⚡️ <a id="Show_Notes_14" name="Show_Notes_14"></a>Show Notes --- [00:36] (#t=00:36) Welcome --- [01:13] (#t=01:13) Guest introduction --- [Teej_dv on Twitter] (https://twitter.com/teej_dv) --- [TJ Devries] (https://github.com/tjdevries/) --- [Teej_DV on Twitch] (https://www.twitch.tv/teej_dv) --- [TJ on YouTube] (https://www.youtube.com/c/TjDeVries) --- <a href= "https://github.com/nvim-telescope/telescope.nvim">Telescope on GitHub</a> --- [Neovim on GitHub] (https://github.com/neovim/neovim) --- <a href= "https://syntax.fm/show/508/supper-club-the-primeagan-vim-streaming-rust-all-around-interesting-guy"> Syntax 508 with The Primeagan</a> --- [03:15] (#t=03:15) The difference between Vim and Neovim --- [06:14] (#t=06:14) Why did you choose to write in Lua? --- [Lua] (https://www.lua.org) --- [Luajit] (http://luajit.org/luajit.html) --- [13:26] (#t=13:26) What is adapative UI in Neovim? --- [17:38] (#t=17:38) Lunarvim and alternatives --- [Fvim] (https://github.com/yatli/fvim) --- [LunarVim] (https://www.lunarvim.org) --- [20:24] (#t=20:24) Personalized development environment PDE --- [PDE] (https://www.youtube.com/watch?v=QMVIJhC9Veg) --- [Firenvim] (https://github.com/glacambre/firenvim) --- [22:40] (#t=22:40) Sponsor: FireHydrant --- [23:21] (#t=23:21) Benefits of RPC --- [30:34] (#t=30:34) Is working on Neovim your job? --- [Sponsor Neovim] (https://github.com/sponsors/neovim) --- [Sourcegraph] (https://sourcegraph.com) --- [31:30] (#t=31:30) What is your approach to streaming? --- [34:11] (#t=34:11) Did you go to school for computer science? --- [39:12] (#t=39:12) Sponsor: Gatsby --- [39:46] (#t=39:46) Supper Club questions --- [System76] (https://system76.com) --- [Pop] (https://pop.system76.com) --- <a href= "https://www.diykeyboards.com/keyboards/keyboard-kits/product/dactyl-manuform-kit"> Dactyl Manuform Keyboard Kit</a> --- [Jetbrains Mono] (https://www.jetbrains.com/lp/mono/) --- [49:52] (#t=49:52) Sponsor: Hasura --- [50:47] (#t=50:47) SIIIIICK ××× PIIIICKS ××× <a id="Tweet_us_your_tasty_treats_52" name= "Tweet_us_your_tasty_treats_52"></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

14 Oct 2022

56 MINS

56:18

14 Oct 2022

#524

Use The Platform!

In this episode of Syntax, Wes and Scott talk about the benefits of sticking to the web platform that is available to you through APIs you may not know about. <a id= "Prismic___Sponsor_2" name="Prismic___Sponsor_2"></a>Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at <a href= "https://prismic.io/syntax">prismic.io/syntax</a>. <a id= "Sanity__Sponsor_6" name="Sanity__Sponsor_6"></a>Sanity - Sponsor [Sanity.io] (http://Sanity.io) is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>. <a id="LogRocket__Sponsor_10" name= "LogRocket__Sponsor_10"></a>LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>. <a id="Show_Notes_14" name="Show_Notes_14"></a>Show Notes --- [00:11] (#t=00:11) Welcome --- [01:15] (#t=01:15) Fogging the boats --- [04:25] (#t=04:25) Use the platform --- [06:32] (#t=06:32) URLSearchParams --- [10:04] (#t=10:04) Pushstate and History API --- <a href= "https://developer.mozilla.org/en-US/docs/Web/API/History">Pushstate</a> --- [13:46] (#t=13:46) Internationalization API --- <a href= "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl"> Internationalization API</a> --- <a href= "https://syntax.fm/show/153/hasty-treat-new-intl-methods-are-straight-fire"> Syntax episode 153</a> --- [16:03] (#t=16:03) FormData API --- [MDN Docs] (https://developer.mozilla.org/en-US/) --- <a href= "https://leveluptutorials.com/posts/you-don-t-need-a-dependency-clipboard-api"> Clipboard API tutorial</a> --- [20:31] (#t=20:31) Sponsor: Prismic --- [21:23] (#t=21:23) All of the DOM API --- [24:12] (#t=24:12) Vanilla JS --- [26:06] (#t=26:06) Localstorage and IndexDB --- [29:18] (#t=29:18) Web Animations API --- [31:10] (#t=31:10) Sponsor: LogRocket --- [32:39] (#t=32:39) Endless other browser apis --- [38:22] (#t=38:22) Shadow DOM and Web Components --- <a href= "https://leveluptutorials.com/tutorials/web-components-for-beginners/what-are-web-components"> Web Components for beginners</a> --- [42:57] (#t=42:57) CSS variables --- [46:05] (#t=46:05) HTML --- [47:27] (#t=47:27) Sponsor: Sanity --- [49:19] (#t=49:19) More HTML --- [54:12] (#t=54:12) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__43" name= "_SIIIIICK__PIIIICKS__43"></a>××× SIIIIICK ××× PIIIICKS ××× --- Scott: [Cable sleeve] (https://amzn.to/3UE3toy) --- Wes: <a href= "https://www.princessauto.com/en/wall-mount-kindling-splitter-with-10-in-blade/product/PA0008667727"> Kindling splitter</a> <a id="Shameless_Plugs_48" name="Shameless_Plugs_48"></a>Shameless Plugs --- Scott: [LevelUp Tutorials] (https://leveluptutorials.com/) --- Wes: [Wes Bos Tutorials] (https://wesbos.com/courses) <a id="Tweet_us_your_tasty_treats_53" name= "Tweet_us_your_tasty_treats_53"></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

12 Oct 2022

1 HR 01 MINS

1:01:45

12 Oct 2022

#523

Syntactic Sugar, Declarative and First Class Citizens? What does that even mean?

In this Hasty Treat, Scott and Wes explain what the jargon you hear in JavaScript means. <a id= "Sentry__Sponsor_2" name="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= "Freshbooks__Sponsor_6" name="Freshbooks__Sponsor_6"></a>Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> <a id="Show_Notes_10" name="Show_Notes_10"></a>Show Notes --- [00:25] (#t=00:25) Welcome --- [01:06] (#t=01:06) Sponsor: Sentry --- [01:59] (#t=01:59) Sponsor: Freshbooks --- [02:27] (#t=02:27) What does that even mean? --- [02:55] (#t=02:55) Everything in JavaScript is an Object! --- [04:43] (#t=04:43) X is just Syntactic Sugar --- [09:00] (#t=09:00) Functions are first class citizens --- [10:04] (#t=10:04) Object Literals or Template Literals --- [11:12] (#t=11:12) Declarative vs Imperative <a id="Tweet_us_your_tasty_treats_22" name= "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

10 Oct 2022

15 MINS

15:04

10 Oct 2022

#522

Supper Club × ORMs with Nikolas Burk from Prisma

In this supper club episode of Syntax, Wes and Scott talk with Nikolas Burk from Prisma about the role an ORM plays in a tech stack, how Prisma has changed over the years, ways to query data in Prisma, and how migrations work with Prisma. <a id= "Hasura__Sponsor_2" name="Hasura__Sponsor_2"></a>Hasura - Sponsor With Hasura, you can get a fully managed, production-ready GraphQL API as a service to help you build modern apps faster. You can get started for free in 30 seconds, or if you want to try out the Standard tier for zero cost, use the code “TryHasura” at this link: [hasura.info] (https://hasura.info/freetrial) . We’ve also got an amazing selection of GraphQL tutorials at <a href= "https://hasura.io/learn">hasura.io/learn</a>. <a id= "Storyblok__Sponsor_6" name="Storyblok__Sponsor_6"></a>Storyblok - Sponsor Storyblok is a headless component-based CMS with a real-time visual editor. It offers the flexibility for developers to craft their perfect tech stack, but it also empowers content creators to make changes independently. The result is that every team has the freedom to quickly and easily create the ideal website with limitless extensibility. Other key features include robust Storyblok SDKs and APIs, powerful internationalization options, and an eCommerce-ready platform. <a id="FireHydrant__Sponsor_10" name= "FireHydrant__Sponsor_10"></a>FireHydrant - Sponsor Incidents are hard. Managing them shouldn’t be. FireHydrant makes it easy for anyone in your organization to respond to incidents efficiently and consistently. Intuitive, guided workflows provide turn-by-turn navigation for incident response, while thoughtful prompts and powerful integrations capture all of your incident data to drive useful retros and actionable analytics. Did we mention that FireHydrant is free? Get started at <a href= "https://firehydrant.com/syntax">Firehydrant.com/syntax</a>. <a id="Show_Notes_16" name="Show_Notes_16"></a>Show Notes --- [00:35] (#t=00:35) Welcome --- [01:30] (#t=01:30) Guest intro --- [@NikolasBurk on Twitter] (https://twitter.com/nikolasburk) --- [04:56] (#t=04:56) How has Prisma evolved? --- [Prisma] (https://www.prisma.io) --- [Keystone] (https://keystonejs.com) --- [GraphQL] (https://www.graphql.com) --- [10:44] (#t=10:44) What was Prisma V1? --- [17:04] (#t=17:04) Is there any GraphQL specific functions in Prismic? --- [21:26] (#t=21:26) Sponsor: Hasura --- [22:26] (#t=22:26) What role does an ORM play in a tech stack? --- [29:54] (#t=29:54) What is Planetscale? --- [Planetscale] (https://planetscale.com) --- [The T3 Stack] (https://github.com/topics/t3-stack) --- [32:22] (#t=32:22) Where does TRPC fit? --- [tRPC] (https://trpc.io) --- [33:46] (#t=33:46) Sponsor: Storyblok --- [35:28] (#t=35:28) What is an ORM? --- <a href= "https://marketplace.visualstudio.com/items?itemName=Prisma.prisma"> Prisma VS Code plugin</a> --- [42:00] (#t=42:00) How do migrations work with Prisma? --- [45:58] (#t=45:58) Query your data with Prisma client --- [49:43] (#t=49:43) Have you looked into alternative JavaScript environments? --- [55:16] (#t=55:16) Sponsor: FireHydrant --- [57:05] (#t=57:05) Supper Club questions --- [58:50] (#t=58:50) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__44" name= "_SIIIIICK__PIIIICKS__44"></a>××× SIIIIICK ××× PIIIICKS ××× --- [Lichess] (https://lichess.org/) <a id="Shameless_Plugs_48" name="Shameless_Plugs_48"></a>Shameless Plugs --- [Prisma blog] (https://www.prisma.io/blog/) <a id="Tweet_us_your_tasty_treats_52" name= "Tweet_us_your_tasty_treats_52"></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

07 Oct 2022

1 HR 02 MINS

1:02:33

07 Oct 2022

#521

Potluck - Using Emoji in Naming × Project Estimates × Goal Planning

In this episode of Syntax, Wes and Scott answer your questions about whether you should use emoji in naming grid elements, how to estimate project times, responsive design tips, animating gradient backgrounds, and more. <a id= "Linode___Sponsor_2" name="Linode___Sponsor_2"></a>Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at <a href= "https://linode.com/syntax">linode.com/syntax</a>. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit <a href= "https://linode.com/syntax">linode.com/syntax</a> and click on the “Create Free Account” button to get started. <a id= "LogRocket__Sponsor_6" name="LogRocket__Sponsor_6"></a>LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>. <a id="Sanity__Sponsor_10" name="Sanity__Sponsor_10"></a>Sanity - Sponsor [Sanity.io] (http://Sanity.io) is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at <a href= "https://www.sanity.io/create">sanity.io/create</a>. Get an awesome supercharged free developer plan on <a href= "https://www.sanity.io/syntax">sanity.io/syntax</a>. <a id="Show_Notes_14" name="Show_Notes_14"></a>Show Notes --- [00:10] (#t=00:10) Welcome --- [01:22] (#t=01:22) Shooting some pucks at the football game --- [04:06] (#t=04:06) Should we use emoji naming conventions for our grid template areas instead of just words? --- <a href= "https://s3.us-west-2.amazonaws.com/secure.notion-static.com/52fbeacb-8136-4104-a30d-8fa120077ca5/C55498A0-7B31-45D2-A360-E0892104D61C.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20220928%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20220928T221409Z&X-Amz-Expires=86400&X-Amz-Signature=8cf327687e89871816b2b3dc9cdfd0cd2fd50b3c68aa6943c56f2ba97b63a1e9&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22C55498A0-7B31-45D2-A360-E0892104D61C.JPG.jpg%22&x-id=GetObject"> Screenshot of Grid question</a> --- [08:38] (#t=08:38) How do you estimate a reliable timeline for a project? --- [12:18] (#t=12:18) Do you think about sustainable web development? --- [16:24] (#t=16:24) What kind of tips and tricks around responsive design do you have? --- [18:22] (#t=18:22) Sponsor: Linode --- [18:55] (#t=18:55) How would you go about documenting your achievements throughout your career to reflect on during interviews and employee reviews? --- [23:33] (#t=23:33) How do you plan long term for projects or goals? --- [Forever Jobless Goals worksheet] (https://foreverjobless.com/fj-goals-worksheet.pdf) --- [28:22] (#t=28:22) Can you please make a fundamentals episode that only cares about clarifying the terms everyone assume to be well known to even beginner devs? --- <a href= "https://syntax.fm/show/017/22-buzz-words-explained-mutations-pure-functions-serverless-hoisting-mvc-more"> 22 Buzzwords Explained</a> --- [31:01] (#t=31:01) Sponsor: LogRocket --- [32:20] (#t=32:20) How would one go about animating a gradient background based on mouse movement? --- [JavaScript 30] (https://javascript30.com) --- [38:13] (#t=38:13) Is there any way using the children API to render the close button and menu items in different locations in the menu component? --- [@Luke_lafr come on the show!] (https://twitter.com/luke_lafr) --- [42:04] (#t=42:04) Where should I begin with design systems? --- [48:10] (#t=48:10) Sponsor: Sanity --- [49:24] (#t=49:24) Is JSON always safe? --- [55:01] (#t=55:01) SIIIIICK ××× PIIIICKS ××× <a id="_SIIIIICK__PIIIICKS__39" name= "_SIIIIICK__PIIIICKS__39"></a>××× SIIIIICK ××× PIIIICKS ××× --- Scott: [The Thorn Razor] (https://amzn.to/3dqRqdq) , [Rockwell Blade Bank] (https://amzn.to/3BvqnWb) --- Wes: [Milwaukee 48-22-1902 Fastback II] (https://amzn.to/3BSe73K) <a id="Shameless_Plugs_44" name="Shameless_Plugs_44"></a>Shameless Plugs --- Scott: [LevelUp Tutorials] (https://leveluptutorials.com/) --- Wes: [Wes Bos Tutorials] (https://wesbos.com/courses) / [Beginner JavaScript] (https://beginnerjavascript.com) <a id="Tweet_us_your_tasty_treats_49" name= "Tweet_us_your_tasty_treats_49"></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

05 Oct 2022

1 HR 01 MINS

1:01:47

05 Oct 2022

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

Favourite Episodes

Tags (Folders)

Recently Played

Followed Playlists

Featured

Free podcast player

Limited Time Offer

#545

Potluck × Twitter Following × TypeScript × Playwright

#544

Serverless Limitations

#543

Supper Club × Anything But Coding with Wes and Scott

#542

Responsive Design Techniques

#541

React use() hook and Async Server Components Proposal

#540

Supper Club × Ryan Dahl and Deno

#539

CSS Trends Almanac for 2022 Part 2

#538

Short Form Content with Tiktok, Reels, Shorts, Tweets

#537

Supper Club × Open Table LIVE SHOW

#536

Potluck × Meeting IRL × SSG vs SSR × Domain Privacy

#535

Zod Schema Validation and Type Generation

#534

Supper Club × Coding with ADHD with Dr. Courtney Tolinski

#533

Spooky Web Dev Stories Part 2

#532

Explained - Buzz Words and Concepts

#531

Supper Club × GraphQL as an Aggregation Layer with Filipe Ferreira of Sky TV

#530

Spooky Web Dev Stories 2022

#529

Hydration & New Frameworks Like Qwik

#528

Supper Club × tRPC With Alex KATT Johansson

#527

2022 CSS Trends and Usage Web Almanac

#526

Bookmarklets

#525

Supper Club × Neovim, Lua, RPC and Twitch with TJ DeVries

#524

Use The Platform!

#523

Syntactic Sugar, Declarative and First Class Citizens? What does that even mean?

#522

Supper Club × ORMs with Nikolas Burk from Prisma

#521

Potluck - Using Emoji in Naming × Project Estimates × Goal Planning