In this Hasty Treat, Scott and Wes talk about CSS typography, and how to quickly get up and running with type systems. 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 errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 05:00 - How do you define type at the start of a new project? 15:03 - How do media queries and screen sizes affect your system? 16:58 - Why are systems in type important? 20:21 - How do you design a type system? Scott’s type system: /* Font Sizes */ --baseFontSize: 1rem; --baseNavSize: 0.64rem; --smallFontSize: 0.8rem; --smallestFontSize: 0.512rem; --xtra-big-ass-heading: 3.052rem; --xtra-heading: 2.441rem; --heading-1: 1.953rem; --heading-2: 1.563rem; --heading-3: 1.25rem; --heading-4: var(--baseFontSize); --heading-5: var(--smallFontSize); --heading-6: 0.64rem; --heading-7: var(--smallestFontSize); Links https://type-scale.com/ 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 

Syntax - Tasty Web Development Treats

Hasty Treat - CSS Typography and Systems

In this episode of Syntax, Scott and Wes are coming at you live from Reactathon with audience-favorite segments including All I Want for Christmas in React, JS or Nay-s (or Both), Overrated / Underrated, Hot Take Tweets, Listener Questions, 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. Magic Bell - Sponsor MagicBell, the embeddable notification inbox - magicbell.io. Use the coupon code SYNTAX to get a 20% discount if you sign up in the next two weeks. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 04:17 - All I Want for Christmas in React is: Suspense for data fetching On mount animations Unmount for me Single file components preventDefault shortcut Input to state mapping 09:45 - JS or Nay-s (or Both) Shout out to Pigeonhole Graphene - 1) Carbon atoms organized in a hexagonal lattice, or 2) An opinionated Python library for building GraphQL Libraries in Python? Floodlight - 1) A super simple syntax highlighter for XHTML documents, or 2) a large light used to illuminate dark outdoor spaces? Toy Machine - 1) An early 2000s skate brand, or 2) A Vue-based GUI for creating state machines? Joplin - 1) A free, open-source note taking and to-do application based on markdown, or 2) A city in the northwestern corner of Missouri? Noco - 1) A JavaScript library that connects to No Code tools including bubble.io, or 2) A smart car battery maintainer & charger? Innr - 1) A smart lightbulb, or 2) A CSS in JS library for selecting parent selectors? Cabkoma Strand - 1) A thermoplastic carbon fiber composite rod used in modern buildings, or 2) A Redux-like state management library for Svelte? Sputnik V - 1) Code name for the upcoming WordPress release with built-in headless CMS mode, or 2) A non-replicating viral vector COVID-19 vaccine? 18:44 - Overrated / Underrated Deno ESM import from URL (no npm) Remix.run Xstate 27:49 - Hot Take Tweets https://twitter.com/wesbos/status/1336367385683636225 34:34 - Listener Questions Q: If you recently started doing web dev work, which career path would you choose - startup, FANG, or freelance? Q: TypeScript all the things? Q: What do you do to keep up with the latest and greatest changes in tech - front-end libraries, new languages, etc.? Q: Can you share some exclusive BBQ tips? Q: What do you expect of Blitz.js in the next few years? Q: What’s the first node module you install in a brand new React project besides React itself? Q: Thoughts on using languages other than JS and TS with React like Kotlin? Q: Do you have an approach for optimizing hi-res images that are stored in your back-end, like S3 for your Gatsby website? Links Watch the live recording of this episode: https://www.youtube.com/watch?v=8xJpxj6T1BQ Formik Mux Syntax Ep 206: State Machines, CSS and Animations with David K Piano Check My Hair - Wes Bos Houdini.How Rust Cloudinary LockPickingLawyer YouTube Channel ××× SIIIIICK ××× PIIIICKS ××× Scott: VS Code color conversion extensions Wes: Acrylic lock picking kit Shameless Plugs Scott: All Courses - 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 

Reactathon LIVE

In this Hasty Treat, Scott and Wes talk about nothing — null, undefined, void, false, 0, ‘’, NaN, [], {}, never — all sorts of values that could mean the things that do not exist. 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 prismic.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 03:35 - Undefined Implicitly nothing A variable declared, but not set is undefined 04:25 - Null Explicitly nothing 04:41 - Null vs Undefined Null has a value of nothing Undefined does not have a value You can set variables to either If you want to set a score variable to nothing, set it to null If you want to un-set a value, set it to undefined == will check if a value is either null or undefined 05:35 - Void In Javascript You can pop void in front of calling a function and it will return undefined (even if that function returns a value) I’ve seen it on links that go nowhere (don’t do this — use a button) To prevent an arrow function from leaking onSubmit="javascript:void()" is a quick-n-easy prevent default on forms In Typescript Void is when you don’t care about what is returned from a function, or if nothing is returned A click handler that goes off and does stuff (side effect) can return void 09:15 - Never (in Typescript) Some functions will never return: Functions that throw errors Functions that have infinite loops Also, unreachable variables have a type of never if(true == false) { let var = 'this will never be true'; } 11:05 - Falsy values 0, -0, 0n false ‘’ (empty string) Empty array Is a value Its .length can be falsy Empty object Is a value Its object.keys(object) length can be falsy (0) 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 

Hasty Treat - A Podcast About Nothing

In this episode of Syntax, Scott and Wes talk about their predictions for 2021! 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. 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. Show Notes 02:06 - ESM Scott: It’s going to be big Snowpack Wes: Everything going forward should be ESM 05:44 - Wes: Remote work will grow Whole new talent pool opens up Whole new living situations open up 08:23 - Scott: Deno will grow Deno 101 for Web Developers 11:12 - Wes: Tooling will fade away Less setup, more behind the scenes Rome Deno Linter Formatter Transpiler Tester Parcel2 Snowpack Nextjs 14:14 - Scott: Greater usage of other languages to build Javascript esbuild Rust Go 19:35 - Wes: Programming communities will gain traction Github Discussions Forem Circle spectrum Discourse 23:25 - Scott: More WASM Mongo Spline 27:19 - Typescript Wes: Typescript will become more popular Scott: Tooling will get better VS Code 29:37 - React Scott: Scoped CSS in React will evolve SSR and hydration will be better Wes: People will fall out of love with React Or more magic will get added to React 32:52 - Scott: More web component frameworks Stencil 33:17 - Scott: Markdown and mdx-like frameworks will skyrocket in use 33:59 - Wes: Gatsby Hosted GraphQL / SSR / Render on demand Solve the pain of long build times Syntax 308: Gatsby vs Next.js in 2021 Next.js 35:24 - Scott: AR tech will grow Target AR app 36:38 - Wes: AI will become accessible Something as easy as a search result RTX Voice 38:43 - VS Code Scott: It will continue dominating Cloud and shared coding env will become better Figma Wes: Github Codespaces 40:18 - CSS Wes: Color functions More use of built-in features Scoped CSS Scott: People are going to love and use CSS variables Modern CSS Design Systems Course 42:39 - Serverless Scott: Ease of use will get better and better Wes: Netlify Vercel 45:30 - Wes: Enterprise Jamstack will become a thing Cloudflare hosting Next.js Gatsby Sapper SvelteKit 46:30 - PWAs might become more popular Apple will never want you to go around the app store ××× SIIIIICK ××× PIIIICKS ××× Scott: Ted Lasso Wes: Neewer Dimmable Bi-Color LED Shameless Plugs Scott: Deno 101 for Web Developers - 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 

2021 Predictions

In this Hasty Treat, Scott and Wes talk about keyboard shortcuts, window management, and how to stay productive. 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. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 03:54 - Karabiner-Elements 06:11 - Better Touch Tool 13:55 - ScreenFlow 17:52 - VS Code Shortcuts 21:20 - Text Expander 23:00 - Clipy Links Davinci Resolve Divvy Uberlayer Elgato Stream Deck iShowU Rocket Clipy source 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 

Hasty Treat - Hyper Productivity with Keyboard Shortcuts + Window Management

In this episode of Syntax, Scott and Wes talk about 2020 in review — predictions, hits and misses, hot tech, what they worked on, and more! 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. Show Notes 01:43 - Predictions from 2020 CSS Subgrid CSS Houdini CSS features not supported in older browsers yet Scrollsnap - IE 11 and up. Lot’s of mobile issues. position:sticky - no IE at all NPM tink Installer-less npm Load packages at runtime into a shared cache across all projects Intelligently download the parts you need Yarn PnP / Yarn 2 Hard links to eliminate package duplication Shared cache across all projects Pika & Snowpack Deno React Suspense in more libraries Suspense for Server Rendering Meteor New ownership. v1.9 just dropped with lots of promise for future growth Svelte 3 Vue 3 Apollo 3.0 came out Fine grain cache control Hooks API Custom logic over how things are read and merged New dev tools Next.js 10.0 came out Images! Gatsby A single useQuery (made possible by suspense) Serverless Going to get easier Begin Next.js / Now Functions Headless CMS Thunderdome Sanity WordPress WPGraphQL Keystone Strapi RedwoodJS Blitz.js Cypress End to end testing We got Firefox support in 2020 Modulz Exports to JS component Figma Was already amazing in 2019 Constantly improving and adding new features Can import from Sketch Auto Layout Spline 42:24 - What other tech was hot in 2020? ES Modules is king We’re ready in the browser Node shipped stable Deno has it Snowpack Bundlers and tools Snowpack Vite Rollup made gains Rome GraphQL got way easier Battle of the Types Typescript Flow Reason Rust Wasm Viable to use Starting to exist in more real ways 52:53 - Working from home Remote work is hotter than ever Starlink is coming Webcams - Cam Link Discord Remote Pairing Live Share - I used VS Code with Jed from Keystone Tuple 57:13 - Code libraries React Query Alpine.js Stencil 59:25 - Personal / Professional updates Hard year for productivity Published more than 100 episodes of Syntax Links Syntax 216: Tech To Watch In 2020 Adam Argyle https://ishoudinireadyyet.com/ Syntax 212: Pika Pkg Fred Schott Level Up Tutorials: Deno 101 For Web Developers React Suspense Sapper How to Supercharge Your Productivity with GraphQL Tooling by Scott Tolinski Wes’ Master Gatsby Course Syntax 308: Gatsby vs Next.js in 2021 Syntax 299: Hasty Treat - Bundlers in 2020 https://github.com/ffmpegwasm/ffmpeg.wasm ××× SIIIIICK ××× PIIIICKS ××× Scott: Innr Bulbs Wes: Pendleton Weighted Blanket Shameless Plugs Scott: All Courses - 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 

2020 In Review

In this Hasty Treat, Scott and Wes talk about how hosting and web services pricing works, and how to figure out what you need, and what you don’t. 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 01:55 - Per minute Spin up, do the work, spin down Popular in serverless space Can apply to other types of computing such as graphics, AI, machine learning, etc. 03:49 - By resources Ram CPU Disk space 06:02 - Per “dyno” These are Heroku Linux servers You can add more dynos and make your app faster They scale it for you 08:54 - By bandwidth Sitting files Inbound (ingress) Output 12:24 - By DB calls or entries Databases 14:04 - By users This is more of a Sass thing, but can bleed into hosting too Seat-based - Netlify does something like this 17:23 - By apps Digital Ocean app platform Each app is $5 21:22 - By “work” Cloudinary does transforms on images Mux Links Heroku AWS Digital Ocean Meteor Galaxy Linode Rackspace MediaTemple GoDaddy Bluehost Backblaze B2 Mux GraphQL Github Netlify 1Password Cloudinary Firefox Containers Chrome grouped tabs Brave Digital Ocean app platform Cloudflare Vercel Prisma 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 

Hasty Treat - Hosting + Web Services Pricing Explainer

It’s another potluck! In this episode, Scott and Wes answer your questions about new Macs and web development, podcast statistics during COVID, is it still worth it to learn WordPress, dealing with imposter syndrome, 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. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 00:47 - Roch Tolinski — You guys are doing a downtown job!!! 02:45 - Yesterday Apple announced their new Macs. They seem pretty sweet, but I was curious, what does this mean for the world of web developers? Will my current apps slowly stop being supported? Will things like brew and node and npm still work on those new machines? Would it be smart to start learning new programs to be prepared for the transition? 10:20 - Hey, great show! No really, great show. What is better for working at home/the office, iMac or MacBook Pro? 13:25 - What are your thoughts on Remix? And has your listenership gone down since COVID-19? I have heard that less people listen to podcasts now because they no longer commute. 19:33 - What is your approach to testing for e-commerce sites? I am about to launch a client’s online store and I’m sick with worry that a simple plugin upgrade will impact the store, and that I won’t know about it till a disgruntled customer complains. 24:57 - I’m getting into web development through college (just trying for an associate's to start) and I’m noticing the intro courses are very hard to get into. I’ve been self-teaching so I kind of feel like I’m ahead. The intro to computing logic (basic algorithms) teacher teaches very slowly and forces us to use an awful software called Raptor to create pseudo programs. I’ve been asking to actually use a language rather than the software but the teacher doesn’t have enough programming knowledge to grade the actual language assignments. I feel like this course is a step back from what I already know. I was just wondering if you guys have any tips on getting through the grueling “required” courses? 31:04 - So it's been announced now that Sapper will never hit 1.0, and instead Svelte core functionality is being expanded and Sapper is being deprecated. I know you all don’t have any inside info, but kind of wondering how Scott feels about this and what he’s doing with his Sapper site in the nebulous time between the big announcement and the release of the next Svelte version? 35:17 - I’m currently working through a full-stack Udemy course to make the switch away from my day job to try freelance web development. I want to start taking on some easier freelance jobs to help make a little extra money and build my portfolio, and I see WordPress recommended as an easy way to do this. My question is, would it be worth undertaking the learning process to pick up some PHP and learn basic WordPress development so that I can start freelancing now, or would I be better served just focusing on HTML, CSS and JS and waiting until I broaden my understanding of these languages before I start taking on some preliminary clients? 39:22 - If I plan to use WordPress as a headless CMS, how do I make sure the WordPress site itself is not publicly accessible? As far as I know, there’s no “API-only” mode for WordPress (like there is for, say, Rails or Laravel) and if I install a WordPress site on a server, it’s going to be discoverable online. I’d hate to have people find the WordPress API site and think it was my website — or for my static site to have to compete with my WordPress API for prominence in search engines. How do people ensure this doesn’t happen? 42:01 - If I have a Vue.js website running on WordPress, how could I dynamically insert Vue components from the WordPress backend (e.g. have a post that inserts a Vue.js poll component)? I don’t want to recompile every time. 44:24 - I’ve heard you mention previously that you have used WordPress to host sites in the past. I’m keen to learn how you have created your own themes for those sites. Did you write your own PHP, etc, or is there another way? I’m hoping to learn a bit more about developing for WordPress as it’s a skill I’d like to have in my back pocket, and would love to hear about any resources you would recommend for this. 47:51 - I’ve been a web developer for over 15 years. Unfortunately, I had to leave web development for personal reasons. I have a lot of great skills. Unfortunately, because I’ve been out of the game for so long my resume is full of holes. All the current experience I have is project-based or freelance-based. I do not have the ability to show long-term projects or anything stable on my resume. I’m trying to get my first job back in the field after my long absence. It has proven to be nearly impossible. I am listening to your Tasty Treat about certifications and certified education. I agree that certifications do not show actual skill. I also agree that just because I do not have longevity and consistency on my resume that I do not have the skills to pay the bills. How can I get my first job back in the field? I am working on small projects to highlight my skills but no one really seems to care. What would you do? 53:36 - I am currently in a food service job, but would love to move into the dev/design field. I have a year of experience in JavaScript, HTML, and CSS/Sass, as well as React, Gatsby, Next, and Node ( thank you both for helping with those ). I have a small amount of experience with freelance web design and development, but feel I am greatly underselling myself ($150 for a Gatsby site built for a friend and less than $100 for a couple Fiverr gigs). I have seen freelance work out well for my friends and family, but I am terrified of having to find clients. I have a hard time valuing my work and fold when money is brought up. There is always a part of me that says to just shoot high and have them talk the price down, but I hate the confrontation. How should I go about finding my first $1,000 client and how can I show the client that my work is worth more without talking about the tech involved? Links https://isapplesiliconready.com/ https://github.com/ThatGuySam/doesitarm https://www.electronjs.org/blog/apple-silicon#how-does-it-work Missive VS Code Screenflow Figma Sketch Brew MongoDB iTerm2 Hyper Davinci Resolve https://remix.run/ React Router ExpressionEngine Keystone.js Advanced Custom Fields Dreamweaver Sapper Svelte https://svelte.dev/blog/whats-the-deal-with-sveltekit Rollup https://www.snowpack.dev/ Udemy Laravel https://www.tempertemper.net/blog/stop-search-indexing-for-netlify-deploy-previews-and-branch-deploys Vercel Netlify Syntax 297: Hasty Treat - Certifications? Government Specified JavaScript Skills? Design is a Job by Mike Monteiro ××× SIIIIICK ××× PIIIICKS ××× Scott: 1: Chameleon: Hollywood Con Queen 2: Q Clearance: The Hunt for QAnon Wes: truLOCAL Shameless Plugs Scott: Deno 101 For Web Developers - 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 

Potluck — New Macs × Podcast Statistics × E-commerce Testing × WordPress × Charging More × Learning Web Dev × More!

In this Hasty Treat, Scott and Wes talk about the PS5 bot debacle, and how they would do it differently! 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 03:12 - Scott’s strategy Go to Reddit and refresh until someone posts a link and then GO GO GO Don’t buy on sites that allow simple bots to work TBH I don’t know how to code this type of bot and would prob end up accidentally buying a ton of stuff 05:06 - Wes’ strategy https://mcbroken.com/ You need a way to find out of there is stock Find out of there is an API endpoint you can hit (inspect element) If there is not, you’ll need to scrape the site. Fetch(url). text() Regex Cheerio Puppeteer (slower, easier to run) Save any data that you want in a database. Text-based database is great. Lowdb SQLite DynamoDB (if doing serverless) Re-run the scrape every N mins When there IS a match you can: Send a text message - Twilio Send an email - Postmark Try to fill out the form and submit it yourself document.querySelector() 11:35 - Things that get in the way Blocked IP Use a VPN Captcha or Cloudflare Run it on your local computer Use Puppeteer to get all cookies and headers Links https://twitter.com/bahamagician/status/1329430249151533066 stocktrack.ca 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 

Hasty Treat - How Would We Script a PS5 Buying Bot?

In this episode of Syntax, Scott and Wes talk with Brian Leroux about severless, Deno, Typescript, and more! Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Guests Brian Leroux Show Notes 02:17 - What’s your background? 06:18 - What is serverless? Why is serverless so awesome? 14:07 - What changes from moving from an existing app to a new app? 16:15 - What is a cold start? 17:46 - What languages are suitable for serverless? 19:14 - What do you think about Deno? 24:23 - How does Architect work? 31:14 - What do you think about Typescript? 40:35 - Do you think websites should work without JavaScript? 44:51 - What about sharing code? Links Begin Architect Scott Tries Begin Lambda https://alephjs.org/ Deno Typescript Digital Ocean Azure Remix Svelte Puppeteer Yumda DynamoDB ××× SIIIIICK ××× PIIIICKS ××× Brian: Begin Fingerprinting Scott: Been Here For Too Long Wes: Grabber Tool Shameless Plugs Brian: Begin Proxy Scott: All Courses - 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 

Serverless, Deno and TypeScript with Brian Leroux

In this Hasty Treat, Scott and Wes talk about their 300th episode and the tech behind it. 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 02:15 - The things we tried Zoom Breakout rooms Hopin - $$$ Streamyard 04:24 - What we used Discord Room as a waiting room Roles to give access An a/v room where Wes and Scott were hanging Lots of questions about Slack vs Discord OBS ObS to stream to three locations ObS Streamlabs does this easily Screen capture did a better job than using the video source from Discord Youtube, Youtube, and MUX Streamlabs can stream to 4 sources at once MUX How we got Syntax.fm/live to work Create a new live stream on Mux via their UI Get stream address and key Point Streamlabs to it HLS m3u8 address from Mux into a HLS react player Looping intro video Principle for mac Watch how I did it on youtube - https://www.youtube.com/watch?v=I6pSlESq_bY Music Song Scott wrote Recording Audio Wes recorded two streams locally All audio on stream was piped through BlackHole on Scott’s machine Used Loopback to pipe Discord audio into an input Scott + Guest were on the same channel, possibly compressed Sounded good! Links Zoom Hopin Streamyard Discord OBS MUX Slack Spectrum Streamlabs VLC Twitch react-hls-player Principal BlackHole Loopback 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 

Hasty Treat - 300th Episode Tech Chat

In this episode of Syntax, Scott and Wes talk about Gatsby vs Next. A lot has changed in the last year — what are the differences, and do the recommendations from Syntax 120 still hold true? 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 errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 03:34 - Server-rendered Both do server rendered Gatsby is gone at build time Next is done at build and on deploy 05:26 - Static generation getStaticProps() getServerSideProps() 08:25 - Re-rendering pages Gatsby can be re-rendered and re-deployed - any CMS lets you do this on only the pages that changed. Gatsby-cloud Next.js has the revalidate flag that will re-render when stale 18:54 - Data management Gatsby has a built in GraphQL API feature with Next.js has nothing - it’s not their problem. Use Apollo, or SWR, React Query, or redux, or whatever you want. 23:16 - Client-side data Neither do anything, next. 26:33 - Dynamic Pages List of 100 shoes, each one gets a page List of four types of shoes: basketball, runners, casual, bowling, etc. List of 10 colors: each color gets its own page. List of 12 sizes, each size gets its own page. Now it gets complicated when you do this: Show me basketball shoes, in red, in size 5 600 pages minimum What about size 6+7? Then you get into having to fetch data on the client side - but all your data is in GraphQL?! The queries are different! Gatsby will get “Hosted GraphQL”: https://twitter.com/kylemathews/status/1252803849775009794 30:41 - Routing Neither do nested routing still Both do folder based wrapper 34:50 - Hosting Anywhere 35:54 - Images Compression/resize Lazy loading SVG Blur up Next 10 released first revision of Next.js image It’s not as good as Gatbsy-image Must specify width and height, whereas gatsby has fixed and fluid Compression No blur up Yes lazy loading both don’t support gifs Gatbsy requires annoying GraphQL query OR another plugin like MDX to do it Not for long! https://twitter.com/ascorbic/status/1320770231657238529 Next.js is just 

Gatsby vs Next.js in 2021

In this Hasty Treat, Scott and Wes talk about React Hooks and why you might want to use them instead of class components. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 03:54 - Decouple the UI from the logic This wasn’t impossible with class-based components, but we started using HOC to do this. With hooks, it makes you decouple what it does and how it looks. Makes things like GraphQL code gen possible Multiple pieces of state or functionality Share commonly used functionality among projects and components 10:31 - Reduction in code Lifecycle methods were often redundant. useEffect offers a way to prevent the duplication that can happen with component did update and did mount. This gives you a way to say, “Hey, run this code when these things change.” 13:30 - useEffect’s dependencies These give you access to targeted control over side effects rather than just something changed. 14:15 - Easier to grok What happens? When? Where? It’s mostly in the hook. 16:09 - Simplicity in usage Thing, updateThing is more targeted than set state Ref makes way more sense with useRef String refs weren’t great, the function ref thing was obnoxious 21:07 - Gripes about Hooks Naming is kind of odd Vue did a better job with the names Links https://github.com/pmndrs/jotai https://github.com/rehooks https://twitter.com/youyuxi/status/1327328144525848577/photo/1 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 

Hasty Treat - Why should I use React Hooks?

It’s an entire episode of Sick Picks! In this episode of Syntax, Scott and Wes talk about their 2020 developer gift guide! 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. Show Notes 03:17 - Home + Cooking Cold Brew Maker 1 Gal - https://amzn.to/3pcKkKM 2 Quart - https://amzn.to/3eIV921 Nordic Ware Half Sheet / Quarter Sheet Pans - https://amzn.to/3pbCWit Precut parchment - https://amzn.to/35dtWld Gaffers Tape - https://amzn.to/3lfH7aG Tineco Pure S12 - https://amzn.to/3kelPsX Instant Read Thermometer - https://amzn.to/3k9VNHf Tea Haus - https://teahaus.com/ Whetstone - https://amzn.to/32nYi2z Re-usable Silicone Mats - https://amzn.to/35dtWld Air Fryer - https://amzn.to/38uX4X1 13:27 - Games Baba Is You Untitled Goose Game Hades Jackbox Party Pack 17:16 - Tech Headphones Sony WH1000XM4 - https://amzn.to/2Ube8c8 Bose QC35 - https://amzn.to/3lrKrQp Wyze Noise-Cancelling Headphones - https://wyze.com/wyze-headphones.html USB-C Hub - https://amzn.to/3keljem Black Camo Wicked Cushions - https://amzn.to/3eGQA8q Mech Keyboard - https://www.keychron.com/products/keychron-k3-wireless-mechanical-keyboard?utm_source=navi%20to%20K3&utm_medium=navi%20bar&utm_campaign=navi%20to%20K3 Braided USB Cables Lightning: https://amzn.to/2IkqLiT USB-C: https://amzn.to/3lfrBeX 25:24 - Smart Home Wyze Cams - https://amzn.to/2UmPINf Light Switches Lutron Dimmer - https://amzn.to/2U7OBk2 Leviton Dimmer: https://amzn.to/3pbzaFZ Google Nest Hub 33:22 - Desk Stuff Fatigue Mat - https://amzn.to/3eIXXw5 Rollerblade Gang Chair wheels - https://amzn.to/3nbNLPJ MX3 Mouse - https://amzn.to/3lg8SQn Wireless Charger Pad - https://amzn.to/36gIdNj Anker USB charging Hub - https://amzn.to/3n7IGYV 36:43 - Live Streaming / Sick WFH Setups Elgato Stream Deck - https://amzn.to/35ehXnk Elgato Camlink - https://amzn.to/3kih6Gl Knockoff Camlink - https://amzn.to/3eIX0Ux Husky Adjustable Desk: https://www.homedepot.com/p/Husky-62-in-Adjustable-Height-Work-Bench-Table-HOLT62XDB12/301810799 Neewer Dimmable Bi-Color LED Studio Key - https://amzn.to/32rYAVX RGB LED - https://amzn.to/3kg1LWZ Vivo Pneumatic Mic Arm - https://amzn.to/2Ube8c8 49:07 - Fitness Concept 2 Rower Powerblocks Cheap bands - https://amzn.to/35cZ1W4 Kettle Bells - https://amzn.to/3eFocnc 51:44 - Clothes https://www.dvlpr.io/ Naked and Famous Super Guy Jeans https://huckberry.com/ https://shop.lululemon.com/p/men-joggers/Abc-Jogger/_/prod8530240?color=29283 Everlane Uniform Crewneck Levis Denim Shirts: Barstow Western Fjallraven Flannels Links https://www.eufylife.com/ Shameless Plugs Scott: All Courses - 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 

Sickpickisode - 2020 Web Developer Gift Guide

In this Hasty Treat, Scott and Wes talk about a system for writing good commit messages. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. Show Notes 03:46 - What are conventional commits? https://www.conventionalcommits.org/en/v1.0.0/ 04:55 - How do you keep track of all the details? https://commitizen-tools.github.io/commitizen/ https://github.com/commitizen/cz-cli https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits 07:42 - How does it relate to SemVer? Links https://github.com/conventional-changelog/conventional-changelog https://github.com/netflix/unleash Deno 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 

Hasty Treat - Writing Good Commit Messages

Wes Bos and Scott Tolinski are two full stack web developers who like to break down complex topics and make them easy to understand.

hubhopper

Syntax - Tasty Web Development Treats

hubhopper