Syntax - Tasty Web Development Treats

In this Hasty Treat, Wes and Scott talk about their experiences using Github Co-pilot. Show Notes 00:58 Wake up early and let's go 02:19 Sponsor: LogRocket 03:21 Sponsor: Freshbooks 03:56 What is Github Co-Pilot? GitHub Co-Pilot 06:01 Scott is a GitHub Star 07:03 Examples of GitHub Co-Pilot usage 09:43 Writing pseudo code Emmet 12:51 Using it for loop callbacks 13:52 What langauges does GitHub Co-Pilot work with? 14:54 It plays nice with HTML files 15:48 Svelte component example 16:31 Benefits for course creators 17:35 Some scary things 21:04 Could GitHub start charging for this? 22:30 Good at writing types 23:59 Gripes 24:54 Converting code to Parcel 2 Parcel Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

29 Nov 202127min

In this episode of Syntax, Scott and Wes talk about ways they troubleshoot issues with their code. 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 logrocket.com/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the "How did you hear about us?" section. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you're serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes 01:13 Furniture shortages 02:29 Managing stuff 03:05 Basic troubleshooting skills are missing 06:09 Sanity check CodePen Codesandbox 08:05 Isolate the issue 08:57 Commenting out code is free 12:17 Replicate the issue 15:07 Svelte and VS Code error Svelte VS Code 17:02 Wes' course upgrades Parcel 2 Patch package 18:07 Sponsor: Logrocket 19:15 Rollback 20:30 Reading the error message Syntax 47 - How to Get Better at Debugging Syntax 152 - Debugging Tools 23:59 Crack open the node modules directory 26:06 Sponsor: Freshbooks 27:29 Write step by step comments to the code 29:01 Consider outside sources 30:56 Using the right tools for the job 33:19 Rubber ducking it 34:16 Wes' Big Mouth Bass story 37:20 Scott's blown away by his leaf blower 39:56 Copy paste a message into Google Twitter - What are your tips for troubleshooting code or a system that doesn't work? 41:33 Logs and metrics 42:36 CI CD issues and Error Handler 43:41 Using a step debugger 44:24 Explain what's happening to someone else 45:31 Read the documentation 47:05 Take a break, have a cuppa 48:42 Sponsor: Mux 50:57 SIIIIICK PIIICKS 57:05 Shamless plugs Links @jimbomoso - Do you know of any resources for developing/improving code trouble shooting? ××× SIIIIICK ××× PIIIICKS ××× Scott: Forehead Wes: EGO EXINNO 240W/120W Chargers Shameless Plugs Scott: Astro Course - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code 'Syntax' for $10 off! Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

24 Nov 20211h 2min

In this Hasty Treat, Wes and Scott talk about their new Apple MacBook Pro's with the M1 Max CPU. Sanity - Sponsor 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 sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. 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 Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 04:30 The last time we upgraded 07:05 Initial thoughts on new MacBook Pro Apple MacBook Pro 09:23 How much RAM you might need 11:33 M1 Pro or M1 Max? 12:37 Justification as a business expense Figma Sketch We recently found that the new 2021 M1 MacBooks cut our Android build times in half. VS Code Microsoft releases M1-native Visual Studio Code for developing apps Notion Height Sublime Text 14:52 Shortening the feedback cycle 15:57 Using VS Code 21:20 Video editing on M1 MacBook Pro Mkbhd - M1 Macbook Pro review Synology Syntax.fm Ep220 The Synology Show Recut Davinci Resolve 24:27 Screenflow export comparison Screenflow 29:32 VS Code improvements SWC pnpm 32:57 The tools are no longer the bottleneck 33:37 Hardware upgrades 34:10 The notch Bartender 36:11 macOS icons have more padding 37:03 Charging and battery TS3 Plus 38:32 Fans and heat 39:18 Touch bar is gone 39:36 External displays 41:03 Battery 41:54 LG Display issue 42:51 Touch ID reader in a better spot 43:25 What's happening to your old MacBook Pro? 45:21 Ports and keyboards Tweet us your tasty treats Scott's Instagram LevelUpTutorials Instagram Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Make sure to include @SyntaxFM in your tweets

22 Nov 202147min

It’s another Potluck! In this episode, Scott and Wes answer your questions about GitHub Copilot, glasses, databases, dealing with stress, self-employment vs employment, design, CORS, and much more! 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 linode.com/syntax. 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 linode.com/syntax and click on the “Create Free Account” button to get started. 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 Sentry.io and using the coupon code TASTYTREAT during sign up. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 03:12 - Ders: Has GitHub Copilot become part of your daily workflow, or have you turned it off? 05:50 - Gaston Gmzi: Hey guys you rock!!! I’d like to know if you use eyeglasses and if you have any preference regarding models, design and features like blue-light blocking and anti-reflection. Also, where do you buy them? Do you go to a store to try them out, or do you buy them online? And if ordering online, which specifications do you use besides the doctor’s prescription? If you guys have any sick picks about eyeglasses it would be great to hear it too. Thanks for the show and have a great week!!! 11:04 - Hi, I would like to know how the two of you deal with stress? I am a freelancer and sometimes clients can get the worst in me. When they do, I usually take a long walk and listen to a podcast, but I don’t always have the time for that. I can actually go into my commit history and show which one was under stress. I think a lot of developers especially freelancers could benefit from that. Thanks. 16:47 - Mike Varela: Question for you guys about dynamic database fields and API requests. How do you let the user store dynamic metadata? Thanks. Love the show, avid listener. 21:04 - Valentine Michael Smith: Can you touch on the use of the word “grok” in the dev world? I know a lot of people who have no idea what this word means. I just happened to have tried to read Stranger in a Strange Land, the novel the word originated from, a few years ago or else I wouldn’t have ever heard it before starting dev work. Have either of you read the book? Anyways, why do devs say this? 24:50 - Steve Lewis: If you guys were not self-employed, would you prefer to work for a big company (like FAANG) or go to a smaller agency or startup, etc.? 27:08 - So Many Localhost Errors: This may be a softball, but how do you set up your logging (Sentry and/or LogRocket) so your dev environment isn’t firing all the time? I can’t seem to find a way to do this well (and it’s probably because I’m trying to learn as I go). 31:03 - Josh J from Jersey: Hey guys, loving the podcast, I’ve been listening for about a month but bingeing through your episodes during my mind-numbing warehouse job, helps me keep my mind on JavaScript and what I have managed to learn in my spare time. I was wondering, when you’re sitting down to a new project, how do you design the website? Does it just slowly develop as you code or have you sat down and drawn out what you want it to look like ahead of time? I have heard talk of a remarkable pad. I’ve seen ads for this on Instagram and YouTube but always assumed it was a very gimmicky thing. Is this a good investment? Also wondering how you both met? Have you worked on any projects together outside of courses and Syntax? Keep the content coming! 38:14 - Andras: Hi Wes and Scott. You have talked a lot on the show about headless CMS’s like Sanity, Prismic or even WordPress being used as a headless CMS. I am curious what the setup in a real world project is like. How would you host the CMS? And what will the admin surface look like? Will the button styles, background color etc. be different than the actual website that the end user sees? Is that a problem for the admin users? Does the admin user see all the menu for creating new content types or adding new features? Or do they only see the input fields of all the contents that can be added to a specific page? Thank you! 42:14 - Dave: Hey guys, love the podcast! I understand that CORS prevention is in place in the browser to help improve security/prevent malicious requests across domains, but I don’t understand why you can get around this by performing the request server side, for example via cURL? If I were a malicious actor, surely I could just send my cross domain request through a proxy to avoid the CORS issue? I’m sure I’m missing something obvious here, can I please get your thoughts on this? 44:48 - Lemon: How do you implement authentication with GraphQL? Especially in Fastify, I know Scott recently moved over from Meteor to Fastify, so I too was checking Fastify but couldn’t find a satisfying auth solution that fits well with GraphQL. 48:08 - Zack Vogel: I love when you play games on the podcast. I’m a high school technology teacher and I play a game with my students called the 5 Second Rule. It’s based on a board game, but I have changed the topics to technology-themed questions. The game works like this. One person reads a topic “Name Three VS Code Extensions” and the other person has five seconds to respond with three correct answers. I think this could be a fun game to play on the podcast. Links http://www.seeeyewear.com/ https://www.warbyparker.com/ https://www.costco.com/ MariaDB dynamic columns https://en.wikipedia.org/wiki/Grok https://twitter.com/argyleink https://remarkable.com/ https://figma.com/ https://graphql.org/ https://www.meteor.com/ https://www.fastify.io/ https://docs.google.com/presentation/d/1oRqz1rSUXiLc5pJF2cMygNrodcRrRU77x0KdWGV67Iw/edit?usp=sharing ××× SIIIIICK ××× PIIIICKS ××× Scott: myQ Chamberlain Smart Garage Control Wes: ATOTO Head Unit Shameless Plugs Scott: Level Up Tutorials Pro - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

17 Nov 202157min

In this Hasty Treat, Scott and Wes talk about Next.js 12 and all of its hot new goodness and updates! Sanity - Sponsor 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 sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. 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 logrocket.com/syntax. Show Notes 04:00 - Rust Compiler: ~3x faster Fast Refresh and ~5x faster builds 06:25 - Middleware (beta): Enabling full flexibility in Next.js with code over configuration 08:16 - React 18 Support: Native Next.js APIs are now supported, as well as suspense 09:56 -  AVIF Support: Opt-in for 20% smaller images 11:58 - Bot-aware ISR Fallback: Optimized SEO for web crawlers 13:10 - Native ES Modules Support: Aligning with the standardized module system 14:39 - URL Imports (alpha): Import packages from any URL, no installs required Links https://twitter.com/mattgperry Introducing Middleware Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

15 Nov 202117min

In this episode of Syntax, Scott and Wes talk with Tomek Sulkowski about web containers, StackBlitz and more! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. 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 logrocket.com/syntax. 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 linode.com/syntax. 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 linode.com/syntax and click on the “Create Free Account” button to get started. Guests Tomek Sulkowski Show Notes 02:45 - What is StackBlitz? 05:28 - What makes it different? 08:20 - How does offline work? 12:18 - What are web containers? How does this fit in? 17:45 - How does this all work (WASM, Node.js in the browser, etc.)? 21:00 - What does performance look like? 31:06 - What about VS Code extensions? 32:48 - Monorepos? 35:12 - Databases? Sqlite? 35:36 - Are there any limitations? 37:02 - What is Turbo? 40:58 - How is this different from similar apps? Links https://stackblitz.com/ https://jsbin.com/?html,output https://jsfiddle.net/ https://codepen.io/ https://code.visualstudio.com/ Fugu API Tracker (fugu-tracker.web.app) https://www.docker.com/ https://spidermonkey.dev/ https://github.com/chakra-core/ChakraCore https://sli.dev/ https://vscode.dev/ https://codesandbox.io/ https://www.gitpod.io/ ××× SIIIIICK ××× PIIIICKS ××× Scott: HaloLock Universal Ring Wes: Car LED Light Upgrade Tomek: The Dresden Files Shameless Plugs Scott: Astro Course - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! Tomek StackBlitz Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

10 Nov 202155min

In this Hasty Treat, Scott and Wes talk about Astro — what it is and why you should check it out! 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 linode.com/syntax. 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 linode.com/syntax and click on the “Create Free Account” button to get started. 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 Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 03:08 - What is it, what does it do? Framework for server-first static apps Use any front-end framework Does not ship JS unless you explicitly define a component to ship JS 05:20 - The syntax .astro files is a mash-up of Svelte and React Frontmatter for server-side JS Template syntax is basically JSX TS baked in 07:48 - State management In client-side JS only, no state in .astro files 10:50 - CSS Svelte style Local, scoped tags SCSS baked in 11:16 - Data fetching Fetch in frontmatter via fetch() 12:06 - Vs React? Vs Next? Vs Gatsby? Vs Svelte? 15:24 - Tooling There is a Syntax highlighter Uses Snowpack under the hood Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

8 Nov 202120min

In this episode of Syntax, Scott and Wes are back with another edition of “Stump’d!” where they try to stump each other with interview questions. Sanity - Sponsor 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 sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. 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 Sentry.io and using the coupon code TASTYTREAT during sign up. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 06:05 - Which property allows you to control the shape or appearance of the marker of a list? 06:33 - What is a pseudo element? What is a pseudo class? 09:15 - What is the difference between block, inline and inline-block elements? 10:15 - What is a combinator selector? 11:12 - What is specificity? How do you calculate specificity? 14:37 - True or False — The translate() function can move the position of an element on the z-axis? 16:44 - What is the difference between “resetting” and “normalizing” CSS? 17:51 - How can you load CSS resources conditionally? 19:45 - Is there any reason you’d want to use translate() instead of absolute positioning, or vice-versa? 22:30 - When to use CSS grid vs flexbox? 25:12 - What are all eight @-rules in CSS? 28:01 - Which property is used to underline, overline, and strikethrough text? 29:52 - What is DOM reflow? 32:14 - How do you serve your pages for feature-constrained browsers? What techniques do you use? 34:00 - What is the property for controlling image-scroll? 36:23 - What are the three different types of CSS gradients? Links https://github.com/sudheerj/javascript-interview-questions https://github.com/learning-zone/css-interview-questions ××× SIIIIICK ××× PIIIICKS ××× Scott: https://height.app/ Wes: Anker Mini Car Charger Shameless Plugs Scott: Astro Course - Sign up for the year and save 25%! Wes: Advanced React Course - Use the coupon code ‘Syntax’ for $10 off! Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

3 Nov 202146min