Syntax - Tasty Web Development Treats

In this Hasty Treat, Scott and Wes talk about the different kinds of things that are difficult to style, how you can style them, and some future tech to look out for! 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 Can it be styled? Solutions 04:28 - Just style the defaults Most elements can be styled, though some elements are really just multiple elements grouped together into the shadow dom and are hard to style. This leads to us having to re-create the visual UI, and often is a point of making inaccessible UIs. Select Input - number, date, etc. Very hard to style Often need appearance: none; for mobile Checkbox / Radio Generally speaking, these CSS Properties can be applied to all inputs: font-size color padding margin background / images outline (remember focus) border 08:20 - Overlap with more dom elements, set background images Checkbox / Radio / Toggle buttons Often used :before and :after along with labels — e.g. label + input:checked Select can have element overlap 14:13 - Re-implement the UI with JavaScript Video / Audio HUGE rabbit hole of things to code Very important to maintain accessibility 15:46 - Use a UI Library Bootstrap Foundation Ant Design Carbon Design Fast Lightning Design System Material Design Chakra 17:20 - Open UI Documenting all the different types of web UI controls https://open-ui.org/ https://twitter.com/stubbornella/status/1384889551924121605 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about freelancing, climbing the corporate ladder, Throttling vs debounce, how to build skills with your free time, 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. Vonage - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax. Show Notes 02:11 - I’ve read that when you start out freelancing, you should look to your area first to gauge the market for both rates, and type of work that is in demand. If you wanted to work remotely as a freelancer, however, is that really applicable advice? Is it viable to work 100% remote and not be tied to “local rates”? How can I leverage my years of professional experience when starting to freelance? A lot of material online speaks to those who are learning web development for the first time. But what does someone do if they’ve been working at big companies, who can’t share their work directly? What can I do to help prospective clients appreciate those years of experience? 06:02 - In your opinion, what is the accepted norm for the size of a component? It could be anything from a single element to a full page of content, but what is the norm for component size or content? Love the show, keep up the good work. 09:42 - I’m a bit confused about throttling and debounce. What is the difference between them? I have been finding different examples which are not at all helpful. 12:58 - My question is about climbing the company hierarchy. I’ve had a hard time getting my first job after graduation. I have dealt with the unemployment office, useless recruiters, trying to look important for companies, and I wonder if a get a low wage job at a company and then apply for their IT department after some time if there is a open position. Is it bad practice or good strategy taking this shortcut? Would they know what I’m trying to accomplish? 18:25 - I’m getting started building websites and find the initial design to be a challenge. I always end up diving into the coding and then spending hours getting lost tweaking CSS. The mediocrity of the final design is a masked technical challenge, and I emerge at the other end of the effort with something I’m still not happy with. I suspect there is some kind of mock up stage I’m forgoing, and I bet there are some tools to make it easier. I imagine that some kind of application that really focused me on the design and made it easy to tweak and tinker quickly would be ideal. Thoughts? What do you use? 23:34 - The company I work for works with a SOAP API. Currently I am developing a application in React but I am wondering whether it’s better to use the SOAP API or let them create a Rest API. Some people on the internet say that JS and SOAP combinations are not done. Is there some advice you can give me about this? 28:28 - Why are radio buttons called radio buttons? 30:49 - I am midway through a post-baccalaureate in computer science. I recently quit my job to focus on my second degree. Now I’m looking to spend my “extra time” on an area of focus that can hit as many of the following criteria as possible: Could make me money now Help me to hit the ground running when I graduate Get me a job easily Make me all kinds of cash Thoughts? 35:56 - What is your opinion on a Rust GraphQL server for web backend? Do you think it is better than Node.js? (not part of a question, just a comment: I found you yesterday and dude I have to say, you are legendary… I am 13 right now and also started web development when I was 12. I have been looking for a good web-development related podcast for about four months now. Looks like I found the one I needed ;) ) 39:57 - How would you go about introducing React into an existing big website with lots of legacy code and a template-based CMS behind? I can’t do a full rewrite but I would love to start turning little bits & pieces into a single-page-experience (e.g. checkout) to slowly modernize the site. The frontend is already TypeScript & SCSS but it’s an old self-made framework and the content coming from the CMS is mostly put into data-attributes or right into the HTML. I don’t really have an API for most of the content. How would React hook into the existing DOM in different places, loading data from the templates and potentially writing i

In this Hasty Treat, Scott and Wes talk about technical debt — what it is, why does it occur, and some techniques for reducing and avoiding it. 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. 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:17 - What is technical debt Outdated or hard to update code If you groan when you have to work on it, it might be a sign of technical debt Brittle code, easily breakable Quirks and features 06:55 - Why does it occur Over time, any garden left un-pruned will become overgrown Many people, many code styles Using hot new frameworks / techniques This is why seasoned developers don’t jump on new things You allow users to do literally anything 13:18 - Techniques for avoiding it Deny your FOMO of new things Abstract Write good tests Don’t put off refactors Update dependencies frequently Good standards Etsy has thousands of devs 20:08 - Examples in the real world Airline websites open in new windows all the time Cellphone carrier flashes the screen 100x 22:15 - Unfixable technical debt Agency work sometimes Links Next React Router TailwindCSS Redux Etsy Dave Ramsey 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

It’s another Potluck! In this episode, Scott and Wes answer your questions about blogging best practices, support IE11, Nest.js, mobile website testing, pirated course content, building .edu websites, transitioning to full-time freelance work, and more! 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 02:20 - I am adding a blog to my custom written personal website and I wanted to know if there is any best practices for storing blog posts? My hope is to write them in markdown, host them somewhere and then automatically feed them into my website so they are all formatted to the style of my website. 05:37 - Do you care if people share cool, unique tips from your courses publicly on social media? For example, I once shared out a trick from one of Wes’ courses for how to set your VS Code windows different colors to distinguish your server and client code windows (giving all credit to Wes’ course for the concept). But it felt a little weird that I was sharing out a portion of his paid content for free. Is that okay? Where’s the line? 18:18 - With official support of IE11 coming to an end on August 17, 2021, do you think developers should still try to support ir or focus only on new modern browsers? Also, will there be a new “lowest common denominator” that we should be aware of and support? 07:20 - Thanks for an awesome podcast! Have you looked into Nest.js (not to be confused with Next.js) for backend work? It is an open source TypeScript Node framework that is becoming pretty popular 22:48 - Do you think it’s worth learning WordPress for freelancing if you aren’t too confident in your JavaScript front-end design? Also, I don’t want to get stuck in only WordPress land just because of the money. 30:11 - Hi guys, I have been listening to you guys for a while and just recently launched my first website! Your podcast has been a huge help in terms of getting started. For the website I made, I tested the iPhone view on Chrome dev tools and everything looked fine. However, when viewing the website on an actual iPhone, the button is too small and the word “Menu” turns into “Men”. Any advice on how to more accurately test sites on mobile devices without pushing to a production branch? 36:52 - Do you guys ever see your premium courses pirated on sites like Udemy, Skillshare, any of the other video course platforms? Meaning somebody downloaded your videos and uploaded them as if they were the creator. Any tips to protect against this? 39:53 - Looking at uses.tech and thinking, I see a lot of class names with almost the same style, gKxjCc and hSiXhL. I really want to know the science behind generating those. Do you have a shared classes that some magic tool transfers them into ugly names and copies over? What is that tool? And is it worth it? 42:57 - Have you ever developed a .edu site? If so, what did you use to manage the enormous archives in addition to giving the site a simple page builder for departments to contribute with little or no interaction from the developer? No Joomla or Drupal please - been there. Thanks for the great help guys! 50:35 - Hi Wes & Scott, thank you so much for giving me my weekly motivation boost to try out new stuff. Currently, I am experimenting with Next.js and SSG and I would like to know how I can generate a page at build time but only show it to an authorized user. I know I could use SSR with getServerSideProps to check allowance, however, the page is completely static without any dynamic content and I don’t want to regenerate it with every request. Is there a way to achieve this? Keep up the great work. 54:59 - I love the show guys! I want to make the transition into full-time freelancing and wanted to know what you think about having a talk with my current employer to see if they’d be willing to take me from full-time to a contract/freelance basis. Bad idea? Thoughts? Advice? Links Fastify RedwoodJS Keystone.js 10up Vite Safari + Dev tools Browsersync localtunnel ngrok Xcode simulator Mike Birbiglia Brian Douglas YouTube Channel ××× SIIIIICK ×××

In this Hasty Treat, Scott and Wes talk about future tech — some things you may not have heard about yet, and why we’re excited about them! 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. Show Notes 05:20 - Astro What it is: astro.build is a next gen “meta” framework that eases some of React’s pain but also is not just React. https://twitter.com/georges_gomes/status/1380801812656226304 Why we’re excited about it: Server Side JS frameworks, combine Svelte, React, Vue as needed in one component that is an SFC using markdown style meta data. Scoped CSS by default (a la Svelte). Sass out of the box. Collections import for .md files // pages/blog.astro --- import PostPreview from '../components/PostPreview.astro'; const blogPosts = import.meta.collections('./post/*.md'); --- Blog Posts {blogPosts.map((post) => ( )} 12:06 - ViteKit What it is: Framework-agnostic API routes Pages (frontend, optional hydration) Adapter for Node, static, Vercel, cf worker, etc. Inspired by SvelteKit. 15:58 - Svelte Kit What it is: https://kit.svelte.dev/docs https://svelte.dev/blog/sveltekit-beta New framework for building Svelte apps 19:07 - Remix.run What it is: Remix.run Fullstack React framework Why we’re excited about it: Made by Michael Jackson, Ryan Florence License-based React-based Caching-focused, uses “the platform” Centralized data loading, works without client JS if needed Better nested routing Links Sapper Vite Snowpack 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

In this episode of Syntax, Scott and Wes continue their discussion of TypeScript Fundamentals with a deeper diver into more advanced use cases. Deque - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed. 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. 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 Deep end stuff 03:30 - any vs unknown 06:20 - never https://twitter.com/Igorbdsq/status/1351681019196436482 09:14 - .d.ts Definition files Usually for existing libraries that don’t have types Can be generated or hand-written Also really handy for pure JS projects, you still get good autocomplete because of these 13:25 - Type generation Can be generated from GraphQL, or Schemas, or from JSON Output 17:20 - TypeScript generics (variables) Kind of like functions, they return something different based on what you pass it makeFood makeFood This function makes food and shares lots of the same functionality between making a pizza and sandwich If the only thing that differs is the type returned, we can use generics You often see this as a single char T It can be anything Promise is a generic querySelector uses generics 21:48 - Promises / Async + Await Functions now return a Promise type, but with a generic Promise Promise Promise, Request, Request stringified added headers 29:48 - Type assertion (type casting) Type assertion is when you want to tell TypeScript “Hey I know better than you”. Two ways: as keyword (most popular) someValue as HTMLParagraphElement Tagged before someValue 34:14 - TypeScript without TypeScript (JSDoc / TSDoc) Really nice! You can also add comments / descriptions https://github.com/developit/redaxios/blob/master/src/index.js 40:08 - Interfaces vs Types Interfaces have better perf https://twitter.com/wesbos/status/1362418379919937545 https://blog.logrocket.com/types-vs-interfaces-in-typescript/ What do you default to? How we write TypeScript 44:27 - Interface or Types Scott - Types Wes - Interfaces 44:50 - any vs unknown Scott - any Wes - unknown / any 46:52 - Any (No Implicit or Implicit Allowed) Scott - No implicit any Wes - No implicit any 48:31 - Return types (Implicit or Explicit) Scott - Explicit always Wes - Not always 50:49 - Compile (TSC, Strip TS) Scott - Strip Wes - Both 52:38 - Type Assertion (as or ) Scott - as Wes - as 53:09 - Arrays (Dog[] or Array) Scott - Dog[] Wes - Dog[] 54:02 - Assert or Generic (if both work) querySelector(’.thing’) as HTMLVideoElement; or querySelector(’.thing’); Scott - querySelector(’.thing’); Wes - querySelector(’.thing’); Links Syntax 324: TypeScript Fundamentals Syntax 327: Hasty Treat - TypeScript Compilers and Build Tools Axios VS Code Syntax 310: Serverless, Deno and TypeScript with Brian Leroux Cloudinary Notion ××× SIIIIICK ××× PIIIICKS ××× Scott: Powerowl 16 Battery Recharger Wes: Fairywill Pro P11 Shameless Plugs Scott: Level 2 Node Authentication - Sign up for the year and save 25%! Wes: Beginner Javascript - 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

In this Hasty Treat, Scott and Wes talk about Git Rebase — what it is and how and when to use it! 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 05:12 - Why and when to rebase? git rebase -i is interactive Rebase allows you to rewind your current branch, apply the changes of another branch to it, and then on top of that, apply your new commits. Common uses: Squash all commits into one or multiple commits Reword commits These lines can be re-ordered — they are executed from top to bottom. p, pick = use commit r, reword = use commit, but edit the commit message e, edit = use commit, but stop for amending s, squash = use commit, but meld into previous commit f, fixup = like “squash”, but discard this commit’s log message x, exec = run command (the rest of the line) using shell b, break = stop here (continue rebase later with ‘git rebase --continue’) d, drop = remove commit l, label = label current HEAD with a name t, reset = reset HEAD to a label m, merge [-C | -c ] [# ] Links Git Rebasing 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

In this episode of Syntax, Scott and Wes talk about selling and shipping t-shirts, and how to do it all in TypeScript! 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. 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. Deque - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed. Show Notes 01:58 - T-Shirts 101 T-Shirts are cool I sold 100 right away to get the kinks out Then I did pre-order The stack TypeScript React Next.js 09:08 - Selling: Front-end Snipcart It’s a button When Someone buys, they scrape the site for the HTML If you only have a client-side rendered button, you use the JSON API instead Integrated into Gatsby pretty easily Wrote one custom hook to count inventory and disable when sold out I thought Snipcart would be enough, but I soon realized it wasn’t. I needed something to fulfill the shipment. 10:10 - Selling: Shipping Quotes Snipcart has integration for USPS, etc. You can also do custom shippers It’s a webhook They also take care of customs declaration 13:30 - Selling: Backend Next.js Dashboard Integrate with ChitChats, Stallion Express, and SnipCart. The tech Shipping Labels Packing slip 18:05 - Fulfilling Printing labels Designed with CSS + React Print CSS is wild Fan Fold labels were way better I switched to Stallion Express Cheaper Printing packing slips Batch scanning Scanning → Mark as shipped Started with webcam Bought scanner for cheap QR code was better because my tokens were long Data matrix is often better Sending notifications Hit the endpoint via Snipcart 28:48 - The physical part T-Shirts printed from local supplier U-Haul to get them here Bags printed in China (about 40 cents each) I wrote a bunch of code to organize by size This cut down on moving around (14 hours if you save 30 seconds per shirt) Some got stickers Multiples were the hardest 24 different types of shirts some wanted 4xl some wanted tall 36:30 - Common questions Why did you do this yourself? Fun project I learned a ton This is how you don’t burn out Why not print-on-demand? (DTG) Tonal Embroidery Quality Money Pay people in my community Control Bags, stickers, etc… stickermule Why not $companyThatHandlesIt I want to do stickers I want to do decks Why not Shopify Large orders still need major fulfillment strategies Code has to be written or money spent 44:16 - Other lessons learned Queues would be good here Sometimes you had to wait 3+ seconds for the confirmation of shipping No one reads, it was pre-order Don’t buy shipping right away — people email about incorrect addresses Over-order by a few each (out of 1550 orders, five got partial refunds and three got full refunds) Pre-order is great because you can offer many sizes Async JS to do things at most 50 at a time Links Wyze Plug ××× SIIIIICK ××× PIIIICKS ××× Scott: Pixeleyes AutoMounter Wes: Baratza Encore Conical Burr Coffee Grinder Shameless Plugs Scott: Level 2 Node Authentication - 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

In this Hasty Treat, Scott and Wes talk about CSS container queries, what they are and how to use them. 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 07:22 - Why? Container queries are media queries for components (e.g. they are based on the element’s size, not the browser). This is in line with how we write components. It will change the way we write CSS. 08:49 - The Syntax Containers need to be defined as containers via containment context .container { contain: size layout; } New contain value: .inline-container { contain: inline-size; } This is the same as the logical properties. Assuming you read LTR, or RTL: size - width and height inline-size = width block-size = height /* @container { } */ @container (inline-size > 45em) { .media-object { grid-template: "img content" auto / auto 1fr; } } 18:49 - How to try them today Download and/or update Chrome Canary Go to chrome://flags Search and enable “CSS Container Queries” Restart the browser 19:27 - Demos Need Chrome Canary + Flag https://codepen.io/collection/XQrgJo https://codepen.io/una/pen/LYbvKpK?editors=1100 Links Miriam Suzanne Susy Miriam’s CSS Sandbox https://css.oddbird.net/rwd/query/explainer/ Canary @addyosmani The CSS Podcast @jon_neal 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

In this episode of Syntax, Scott and Wes talk about dev tools tabs, what each tab does and how you can use them. Vonage - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/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. 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 3:50 - Network See all requests, filter by type or name Used to understand all requests coming or going Turn off caching View timing See the true GZIP size Slow down network speed See time for page load Copy as fetch or CURL View request, response, and headers See CORS issues See which requests have happened See if an asset is cached (both in dev tools, also Cloudflare) See blocked requests because of extensions Tip: You can see the network info from the console in Firefox 22:03 - Memory See what is taking up memory Strings DOM nodes Objects Actual .js 26:44 - Performance Click record and use the site Flame chart useful for finding slow functions and debugging janky animations Get FPS in coordination with flame chart Save performance recording data to be able to share for debugging You can also upload saved data to debug without using the site 30:48 - Console Interfaces with the JS runtime Shows errors, warnings, and logs Tip: Negate noisy warnings/errors that clutter your console with - Tip: Use $0 to select current element $1 for second last $r for current React element Tip: Use $$ to shortcut Query SelectorAll and Array.from Tip: Use $ to shortcut Query Selector 40:28 - Storage / Application Working with LocalStorage, Cookies, Index DB, and Session Storage 44:56 - Audit / Lighthouse (Chrome and Firefox) Run lighthouse to check for performance, accessibility, and UI stuff Not the silver bullet audit that many people think it is Colors are sometimes like “Really?!” Can be helpful regardless 50:28 - DOM Tab Firefox only Shows everything that is in the scope of the browser Links Adam Wathan Ben Vinegar ××× SIIIIICK ××× PIIIICKS ××× Scott: dupeGuru Wes: Moccamaster Coffee Maker Shameless Plugs Scott: Node Fundamentals Authentication - 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

In this Hasty Treat, Scott and Wes talk about CSS nesting — what it is, when to use it, and why. 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. 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:22 - What is it? https://drafts.csswg.org/css-nesting-1/#nest-prefixed https://twitter.com/argyleink/status/1371874777548267520 06:02 - Why nest? Easier to read Easier to write Prevents refactoring errors, allows for dry-er code. No more typing a parent div 100 times, with a possibility of screwing it up. 08:13 - When to use nesting Nesting is often overused Only nest what you would have written un-nested with a short hand (e.g. don’t nest just for the sake of it) .container .item {} .container .item a {} Use it for scoping 10:06 - Nesting prefixes In order to nest CSS, you must first start it with a nesting selector .tweet { & > p { } &.media-included { color: green; } & + .tweet { } // sibling & p { } // descentang } Component-based — tweet, card, company, Link article{ color: blue; & { color: red; } } and must be the first child of a compound selector 12:44 - @nest rule / media queries Mostly just a visual way to show nested .foo { display: grid; @media(orientation: landscape) { & { grid-auto-flow: column; } } } .foo { display: grid; @media (orientation: landscape) { & { grid-auto-flow: column; } @media (min-inline-size > 1024px) { & { max-inline-size: 1024px; } } } } /* equivalent to .foo { display: grid; } @media (orientation: landscape) { .foo { grid-auto-flow: column; } } @media (orientation: landscape) and (min-inline-size > 1024px) { .foo { max-inline-size: 1024px; } } */ 16:30 - How to use nesting today Literally any CSS preprocessor PostCSS to use spec Links Syntax 274: How does stuff get added to CSS? Adam Argyle answers! Sass PostCSS CSS Variables 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

In this episode of Syntax, Scott and Wes talk about how to keep your skill up to date when you have a job and a family, when you should start looking for your first job, monorepos, video hosting, TLDs, APIs, fake names, and more! 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. Vonage - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax. Show Notes 02:10 - How do you handle token refresh when multiple API calls are made at the same time? Let’s says you get a 401 and do acquire a new token, but that will only be used by the first API call, while the other parallel APIs would still use the old one and error out. This has caused me to sort of artificially limit the total requests to be made to 1. How do you deal with it? 06:40 - What service do you guys use for video storage and optimization? I am currently building out a side project that will require some video hosting so I figured I would ask the experts. 15:22 - I’m trying to teach myself web development and I’m having problems making up the logic for my personal projects. I would have to watch YouTube tutorials or look at other people’s code in order to implement simple features to my website and I’ve been feeling pretty stupid for not spending the time to think of it. I feel like I’m missing out on knowing how to problem solve for myself whenever I copy other people’s code and try to understand them afterwards. 19:27 - I just landed my first web development job after following The Odin Project and building personal projects for about a year. It tripled my income so I am incredibly excited! I have been using a PHP framework which was developed by one of my coworkers and has no documentation. In order to understand the code, I either have to read a bunch of source code or ask one of the other developers questions. While I am doing well, I can’t help but feel as if I am working way too slow and asking way too many questions. I assume this is imposter syndrome and lots of people deal with it, but how would you suggest dealing with this type of anxiety? 25:11 - Monorepos, yes or no? 29:43 - As a brand new self-taught web developer, how would you know if you’re ready to apply for junior positions? 32:03 - Will there ever be a .eat domain or are the pre-order sites just ripping you off? Would like to know who decides what TLDs are possible or not. 35:26 - I’m currently employed as a fullstack developer but want to build a portfolio for future job hunting. Would you say it’s ok to reference a project or two from an employer? My problem is that the only projects I have outside are mostly just smaller tools built for myself for fun. 39:29 - Should developers always use their real first and last name when presenting themselves as a professional online (e.g. Twitter, LinkedIn, Github, personal site). Or is it acceptable to use a fake last name for example? My wife is quite conscious about privacy online, so would prefer I retain some anonymity. But also, my last name is a bit generic, and not very Googleable. I thought having a more snappy and interesting name would help me stand out, and be easier to find with a quick Google. You guys both have awesome names that are very unique and are hard to forget. 43:59 - How do you find time to work and keep up with updates and libraries etc. having a wife & kids? 46:06 - I am a beginner in making course content. I am trying to create a programming tutorial, but every time I try to record some tutorials I have to compromise on audio quality. Lots of background noises get captured on audio. Can you both share some tips to make soundproofing room? What tricks do you both use? 53:33 - As someone who recently learned/is learning how to build websites using express/node/react, with a little know how with Python and Django too, how do you start building a portfolio that isn’t just a bunch of practice/show-pieces? How do I get a client? 59:53 - Sho

In this Hasty Treat, Scott and Wes talk about their favorite VSCode extensions, tips, and workflows! .TECH - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”. 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:05 - Easy Snippet https://marketplace.visualstudio.com/items?itemName=inu1255.easy-snippet 05:33 - Add Missing Function Declaration https://twitter.com/wesbos/status/1369393437062074377 07:30 - Error Lens https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens 09:08 - Declare Missing Members https://marketplace.visualstudio.com/items?itemName=tamj0rd2.ts-quickfixes-extension 10:29 - ES7 React/Redux/GraphQL/React-Native Snippets https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets 11:59 - File Utils: https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils 13:59 - GitLens — Git supercharged https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens 15:15 - ES6-String-HTML https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html 16:41 - Wrap Console Log Simple https://marketplace.visualstudio.com/items?itemName=WooodHead.vscode-wrap-console-log-simple 17:18 - Text Pastry https://marketplace.visualstudio.com/items?itemName=jkjustjoshing.vscode-text-pastry 19:14 - Better Comments https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments 20:14 - Tip: Use Emmet everywhere https://emmet.io/ 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

In this episode of Syntax, Scott and Wes talk Matt Holt about Caddy, SSL, web servers, best practices, 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. 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. Guests Matt Holt Show Notes 02:08 - Who are you and what do you do? 03:22 - Why would you want to build a web server? 08:45 - How do SSL certs work? 14:03 - Why do you even need a web server? 23:03 - Is it better to have a web server serve your images? 20:31 - What is load balancing and why might you need it? 31:35 - Is server administration a lost art? 38:03 - What is a sidecar proxy? 38:50 - How do chron jobs work? 39:50 - Why is GO so fast? Why is it good? 46:32 - Should every website have an SSL certificate? Links Floss Weekly 364 Caddy Let’s Encrypt Certbot PM2 https://doesmysiteneedhttps.com Tello Drone ××× SIIIIICK ××× PIIIICKS ××× Matt: LG Stick Vacuum Scott: Alen Pure BreatheSmart Air Purifier Wes: Tello EDU Shameless Plugs Matt: Matt Holt Sponsorships 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

In this Hasty Treat, Scott and Wes talk about a common problem you’ll encounter in your development career — the n+1 problem. 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. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn. 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 05:00 - What is the n+1 problem? The N+1 problem can happen in any language but is especially prevalent in GraphQL because it’s so easy to query relationships. 09:33 - The solution The solution to the n+1 problem is to batch the queries. As you loop over each podcast, keep an array of host IDs to lookup. Once you have looped over the podcasts, make a single query to the database with your large array of podcast host Ids. 11:11 - Should you care? Sometimes no: its often fine to do multiple DB Calls Facebook DataLoader Mercurious Many ORMs take care of this for you These then break it down into my appropriate SQL MongoDB Ruby: eager loading Laravel ORM does it Aggregation pipelines Prisma N+1: https://www.youtube.com/watch?v=7oMfBGEdwsc&vl=en Mongoose Populate Apollo Studio 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

It’s another Syntax Highlight. In this episode, Scott and Wes take a look at portfolios and websites and evaluate them from the perspective of a hiring manager. 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. 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 04:50 - https://shaquilhansford.com/ Not optimized for desktop Lots of spacing issues overall Too many accordions - could be lists in multiple columns Social links could be in the footer Twitter is on point - iwantyoutohire.me Phone number on website is good 11:31 - https://www.benlammers.dev/ Gimmy dat yellow The design and polish is really good Data URI images can overload CPU Semantic headings, but HTML should use some work Four H1s on the page 20 H2s 40 H3s Main tag 20:28 - https://www.zubairaziz.com/ Lots of empty space Photo is key Not sure what to do when I land on the page Blog is nice, but two posts from May - add more or drop it Portfolio is just enough Nav animation should only happen on initial load 29:39 - https://codebyfil.dev/ This is a great example of something that is good, but needs a bit of polish Tone down the border radius Tone down the box shadow Border and drop shadow Images aren’t links Footer padding or space - contact is ridding the bottom Scott’s HTML breakdown Four H1s Six H2s Four H3s 18 H4s Five H5s 37:39 - https://www.johngeorgesample.com/ Clean but maybe too clean Nav is too distractingly too big Need active link indicator in main nav div div div div - take a look at those semantic HTML tags No H1 or H2 HTML needs work brother Use × instead of X Asterisk doesn’t work on mobile 46:52 - https://stordahl.dev/ Great images Nice typography Sign-up for newsletter is great Store = A+ Scott’s HTML breakdown Two H1s, one of which is just nice to meet you Zero H2s Articles should be articles No section 1px move on hover is nice - could use a transition Links Axe Accessibility Testing Gatsby Next.js https://feathericons.com/ Snipcart GeoGuessr ××× SIIIIICK ××× PIIIICKS ××× Scott: Walkabout Mini Golf Wes: 60w Portable Charger Shameless Plugs Scott: Node Fundamentals Authentication - Sign up for the year and save 25%! Wes: Advanced React - 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

In this Hasty Treat, Scott and Wes talk about GraphQL tooling, and specifically a couple tools we use that will change your experience with GraphQL. .TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”. 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:38 - What is it? https://graphql-code-generator.com/ Code generation for GraphQL APIs 04:34 - What can it do? Generate React hooks for any of the major player Apollo client (urql) Types for the full stack — resolvers, mutations 07:49 - How we use it Generate a schema file to keep client and server in sync in mono repo Creates all React Hooks Generates all types for both resolvers, and anything client-side Links React Query Apollo Typescript Cypress https://periqles.herokuapp.com/ https://the-guild.dev/ Swagger 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

In this episode of Syntax, Scott and Wes talk about building your own authentication — diving deep into JWT, sessions, tokens, cookies, local storage, CSRF, and how it all works! 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. 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. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn. Show Notes 01:51 - Overview Level Up uses a JWT & secure cookie-based authentication and tracks sessions via a db table. Accounts.js 05:13 - JWT Base 64 encoded (not encrypted) token that contains data. We have both accessTokens and refreshTokens. JWT has three parts: Header What kind of algo was used Payload Data about the user Email Username UserID refreshToken, authToken, sessionId Signature This ensures that no one monkeyed with the above parts. If you change your email in the payload, the signature is not invalid, because in order to generate the signature, it uses the header and payload as part of it. accessToken A short lived JWT that contains the sessionToken, userId and expires after 90min. refreshToken A long lived JWT that contains just the sessionToken and doesn’t expire. JWT can be decoded and read, but you have to encode them with your secret. JWT can be stored anywhere, there are two main places: 20:26 - Cookies We use httpOnly, secure cookies to store the accessToken and the refreshToken. The accessToken is a session cookie and is removed whenever the browser is closed. The refreshToken is valid for 100 days but is also re-created and revalidated for 100 more days each time the accessToken is generated. Because these are httpOnly cookies, they cannot be accessed by JavaScript in the client and can only be set and removed on the server. Note: Safari has stricter rules than others for same domain cookies (e.g. localhost won’t work). 34:26 - Sessions Sessions are when a user logs in on a device. If you open a phone and log in and a computer and log in, those will create two different sessions. A session contains information about the user’s connection (like their IP) but it also contains the userId which allows us to create new accessTokens from a valid session. Sessions can be valid or invalid. This allows us to log anyone out by setting their session to valid: false. Sessions also have sessionToken which are generated on authentication or create account. 38:10 - CORS Cross-origin-resource-sharing Can be super tricky to get working cross-domain You usually have to actually visit the website for the cookie to be set, even with lax cors 46:06 - CSRF 48:47 - Authentication process bcrypt.js 52:13 - Helper Packages NextAuth.js is super easy Passport.js auth0 Links Caddy Fastify ××× SIIIIICK ××× PIIIICKS ××× Scott: reMarkable 2 Wes: Opration Odessa Shameless Plugs Scott: Node Fundamentals Authentication - Sign up for the year and save 25%! Wes: Advanced React - 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

In this Hasty Treat, Scott and Wes talk about environment variables — what they are, where you should keep them, and more! 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 03:54 - What are they? API Keys Secrets Database URLs NODE_ENV 06:16 - Type of env variables Plain text Encrypted Frontend Backend .env files .env is a good package for all langs .env.local Framework env variables System env variables Host-provided variables 16:20 - Where should you keep them? 1Password 1Password CLI 17:34 - Other gotchas Netlify Limit is 4096 Netlify needs a clear cache before it works THING=yo node index.js cross-env NODE_OPTIONS="–inspect" Require before run Links Digital Ocean App Platform Render Vercel Netlify 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

It’s another potluck! In this episode, Scott and Wes answer your questions about VSCode, Vercel vs Netlify, staying up to date with dev concepts, models and mutations, websites vs seb apps, adaptive vs responsive design, 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 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. Vonage - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax. Show Notes 02:10 - Sometimes in VSCode when intellisense tells us the TypeScript type of a variable, it just gives the name of the type rather than how the type is defined. This is annoying for objects as I want to know what fields it contains! How do you handle this? Is there some VSCode magic to make it show the full type definition or is there some way to bring up the definition in the .d.ts file? 04:55 - What techniques do you guys use to keep different tech stack requirements fresh between projects? 10:35 - How do you feel about Vercel vs. Netlify? Pros/cons? Thanks! 18:32 - Should a model name be singular or plural? 22:57 - I’ve just listened to the CSS Typography and Systems Hasty Treat, and realized that we often try to apply website design to web apps (me at least). Can you elaborate on the differences in designing for a website and for a web app? 25:46 - What’s the difference between adaptive and responsive design? 32:40 - Multi-vendor platforms? Have you done it before? A partner and I, are planning to build a peer-2-peer platform (similar to Etsy and Amazon, where users can register as a merchant or a buyer). What is the easiest way to make payment transactions (Stripe or PayPal)? Do you know any frameworks that will make my life easier? 36:16 - Is there a golden rule for mutations? I’ve been using GraphQL for last couple of months, and everything is great as long as I’m just fetching data. When I need to write mutations, the story gets murky. Looking around internet, there are not too many best practices to be found - most of the articles and blogs focus on data fetching. 42:19 - What do you think about the future of Svelte? I know they are replacing Sapper with SvelteKit, which uses Snowpack. What direction do you think Svelte will go in? 45:32 - How can I get back into a habit of learning new things and stop heavily relying on video tutorials all the time? I really struggle to sit down and read for long periods of time. Also have you guys came across the Genesis framework, and if so, could you recommend any learning material? Thanks. 48:54 - My team uses handlebars templates for generating newsletters. The content is coming from a CMS for generating final HTML. I’m fairly new to handlebars and mustache syntax, so instead of learning handlebars I’m thinking about using React to generate the html on server side. I see some great potential here as the entire team is well-versed with React. What is your opinion about this? Links VSCode Peek Definition Obsidian Render Adam Wathan Gumroad Braintree MJML https://github.com/unlayer/react-email-editor Redwings shoes ××× SIIIIICK ××× PIIIICKS ××× Scott: Tosowoong Enyme Powder Wash Wes: Carhartt Gloves Shameless Plugs Scott: Testing with Cypress - 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

In this Hasty Treat, Scott and Wes are doing an AMA — answering questions about self-employment, time-management, course creation, Clubhouse, and more! 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:41 - What do you miss about NOT being self-employed? What are some UNEXPECTED perks of being self-employed? 05:47 - Hypothetically, what would a LinkedIn recruiter need to say to pull you away from your current development work, and possibly even the podcast? 09:08 - What percentage of your time do you guys spend doing work for clients vs your own courses/projects? 10:04 - Do you still do most of your work yourself, or do you outsource some parts of it? (work can be anything related to your business, not just making the courses) 12:48 - Could you all talk about protected/private routes in Next.js? I’m coming from create react app type routing. 16:07 - What would be doing for a living if not a developer? 17:50 - What do you think about Clubhouse? Are you guys planning to talk over there some time? 24:18 - Vue or React? Which do you think will be the top? And should developers learn both? Links https://twitter.com/aaronendsley/status/1361375032342110210 Svelte 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

In this episode of Syntax, Scott and Wes talk about their desk setups and how they’ve evolved, both as coders and video and course creators. 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. 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. We’ve also got an amazing selection of GraphQL tutorials at hasura.io/learn. Show Notes 03:36 - Desk Scott Ikea countertop on Jarvis Legs. Four presets - sit, stand, horse stance, lunge Wes 8" Ikea Butcher Block countertop on legs LackRack on wheels underneath Desk at cottage is Maple Live Edge Slab on Hairpin Legs 09:01 - Chair Scott Steelcase Gesture Wes Polished Aluminum Herman Miller Aeron Roller Blade Wheels! 15:39 - Display Scott Vivo Stand 38" LG Curved Ultrawide Vissles-M, Portable Touchscreen Monitor BenQ Monitor Light Wes LG 32" 4k Ultra HD Dell Ultra HD 4k Monitor Rain Design 10032 mStand Laptop Stand 22:49 - Headphones Scott Ultrasone Wes QC35s w/ Wicked Cushions - wish they charged over Wireless 24:58 - Mouse + Keyboard Scott Keychron K3 with optical Apple Magic Trackpad Wes Apple Magic Keyboard - extended in Space Grey Logitech Mx2 29:18 - Laptop Both MacBook Pro 33:43 - Dock + Connecting it all together Scott Caldigit TS3+ Satechi USB-C Slim Multi-Port with Ethernet Adapter Under desk rack Wes Everything is in a Lackrack Caldigit TS3+ Single Cable Hookup Two monitors 6+ webcams Elgato CamLink 2 HDDs Microphone Amazon Powered USB Hub Startech Rack Mounted Power Strip 41:36 - Camera + Capture Scott Sony a7 iii Elgato CamLink Wes Sony RX100 iii 44:11 - Microphone + Capture Scott Audient Nero Monitor Controller M-Audio BX8 EV RE20 Focusrite Scarlett 2i2 dbx 286s Cloudlifter CL-1 BSW RE320POP Wes Heil PR40 + shock mount, boom arm, pop filter Focusrite Scarlett 2i2 ART EQ 351 dbx 286s BSW RE320POP 49:06 - Lighting Scott Neewer Bi-Color 480 LED Traditional three-point lighting (key, fill, backlight) Philips Hue above for color pop Wes Neewer Bi-Color 480 LED on a Wyze Plug Two Backfill LED Color lights BenQ Screenbar 55:22 - Storage / Backup / Home Server Syntax 220: The Synology Show - Backups and Home Server Scott Synology DS918+ 8TB Wes Synology DS918+ 16TB (DS920+ is the latest) 16TB of drives - I don’t use anywhere NEAR that LaCiE Rugged or WD Passport for Time Machine 57:50 - Other / Wish list Scott ReMarkable 2 tablet Apple Pro Display XDR Wes Mindnode Elgato Stream Deck LG 5K2K Curved Display Links GraphQL Code Generator KeystoneJS BSW Ikea Lack Side Table Better Touch Tool Shameless Plugs Scott: Testing with Cypress - Sign up for the year and save 25%! Wes: Advanced React - 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

In this Hasty Treat, Scott and Wes talk about hireable skills or 2021 — what you need to know to get a job and grow in your career this year! 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 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:17 - Code in general Clean, commented, organized Take the extra hour before an application and polish it 06:10 - JS Basics of the language - storing data in Arrays and Objects Looping and flow control Array methods Promises + async await DOM basics - select an element, listen for clicks, update elements Node basics Most of your JS basics apply here Read Files, write files Fetch data and return it 08:38 - CSS Attention to detail - pixel-perfect replication of designs Works well on mobile No reliance on libraries - complete reliance on Bootstrap or Tailwind is a red flag. If you use these things, explain clearly why they are useful to you (e.g. augment your skills, not relied on). 12:54 - Real-world libraries One of the following: React, Vue, Angular Node.js - sending Server data as a response JSON Express, Next.js Popular helper libs Date functions / Moment (Moment is old but its still 2x more popular) Lodash CSS Scoped CSS Pattern libraries 17:15 - What about data structures and algorithms? Yes you obviously need to know about arrays and objects - probably maps and sets too Links lists? Tree structures? Traversal? https://twitter.com/wesbos/status/1353729683486076930 20:26 - Soft skills Know how to talk to PMs and other devs. Know how to stay on top of timelines and schedules while communicating. You won’t last long in any work environment where you aren’t able to fit in. Many devs sometimes get a big head about doing tech - this is not something you want to emulate. Ignore any kind of internal “us vs them” attitude. It’s about the big picture and you’ll go further. Write good, short, emails that don’t sound like you are mad. Links LeetCode Syntax 117: Hasty Treat - How To Email Busy People 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

In this episode of Syntax, Scott and Wes talk with Tanner Linsley about React Query, how it works, why you might want to use it, and more! Deque - Sponsor Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at deque.com/axe. 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. 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. Guests Tanner Linsley Show Notes 01:56 - What do you do? nozzle.io React Query 06:04 - What is React Query? 24:19 - How does React Query use dev tools? 31:20 - What about React Context? 36:59 - Server-rendered components? 42:40 - Thoughts on static sites? 50:38 - What is the stack? Links Redux Axios Syntax 206: State Machines, CSS and Animations with David K Piano RTK Query Relay Remix Twin.macro Tailwind CSS React Static Next TanStack ××× SIIIIICK ××× PIIIICKS ××× Tanner: React Query - Essentials Course Scott: Govee TV LED Backlights Wes: 1Password Shameless Plugs Tanner: Nozzle.io Scott: Testing with Cypress - 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

In this Hasty Treat, Scott and Wes talk about the future of testing with Cypress — what it is, how to use it, and more! Deque - Sponsor Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at deque.com/axe. 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:55 - What Is Cypress? A visual testing studio that uses a jQuery-like syntax to test your application in browser. Very modern testing solution. 07:36 - Used to be only Chrome Now available for Safari, Firefox, Edge, etc. ??? - What frameworks is it for? Literally anything that runs on a URL in the browser. Cypress just looks at a URL, executes the commands and then checks the results. Can also run on ci/cd via a headless mode. React component testing is experimental. 10:58 - Automation Cypress studio new feature that writes tests for you. 12:37 - Data Intercept + Fixtures or through plugins 15:01 - Cost? It’s free! There is a paid product called Cypress Dashboard that allows you to record tests long-term. Links Cypress bos.af Jest Better Touch Tool 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

It’s another potluck! In this episode, Scott and Wes answer your questions about job titles, clients and freelancing, debugging, the creative process behind the Syntax podcast, Deno, how to learn things quickly, and more! 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. 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 01:17 - Do either of you have a pattern that you follow for rolling back Promise.all rejections? I am looking for an elegant way of reversing any promises that may have resolved before one was rejected. For instance, any db writes or 3rd-party webhooks that were created during the sign-up flow, but then need to be removed if one of the promises was rejected. 04:51 - I’ve been doing a bunch of client projects lately that use Gatsby with the WordPress API. I have the clients set up a hosting service for WordPress and a Netlify account connected to a GitHub repo on my account for Gatsby. What I’m struggling with is the idea of having to keep these repos on my GitHub account for as long as these sites are live. But it doesn’t seem all that sensible to have these non-technical clients also set up their own GitHub account that they grant me access to for building these projects. Do you have any suggestions? 08:45 - Hey guys! Been listening to the podcast since I was starting out and it has been super helpful, entertaining, and hilarious. Two-part question. First, when would you consider a dev “full-stack”? I work for a small company that does WordPress, GraphQL, Node, React, TypeScript…lots of variety. I was hired as a front-end dev, but have since done work in PHP and Node, and even my boss has assured me I do full-stack work. However, I am not being paid as a full-stack dev. Can’t figure out if this is because I work part-time (I have a baby) or some other reason. Should I be asking for a raise as a part-time employee? 12:43 - When working freelance for a client, and you need to purchase something, for example the CPT UI plugin or something like WP Migrate DB Pro to help you build the site, do you either pay for it yourself and add it to the clients invoice at the end? Or do you ask them to pay for it when you need it? So many small “gotchas” I’m needing to get over! 18:02 - I just had a baby girl 4 months ago. When she is crying I sometimes catch myself trying to debug her to find out what is wrong. My wife thinks I am weird, but I guess I am just in the habit of trying to fix problems. Have you ever experienced this? 22:17 - How do you prepare for the Monday and Wednesday podcast? What is it like, and what is the creative process behind it? 29:03 - How would one go about using JavaScript to load all images from a folder in order to render them dynamically on a page? I looked around and only see answers using jQuery and PHP. In the end I want my client to be able to drop images into (or remove them from) the images folder and the site would just populate the image slider with all the images. Is this problem solvable with JavaScript, or is it time to learn something new? 35:26 - I have a side project with a Node backend that sends out reminders to signed-up users about various deadlines that they opt-in to. It started out pretty small but as the user base is now in the thousands, I’m worried that my reminder send functionality won’t be able to keep up with the increasing volume. It’s basically just a daily CRON job that loops through users and finds the different notifications to send out - either through Twilio or Postmark. Is there a more efficient way to perform large CRON jobs such as this? Curious how each of you guys would tackle this problem. 42:29 - Hey guys, great overview episode on Deno (ep 322). This got me thinking, again, of the proliferation of tools and technologies in our industry and ecosystems. Say we’ve already “identified” the technology or tool and now we need to get familiar. As course designers constantly exploring new tools and technologies, what are some ways you can most efficiently and productively grasp actionable understanding (i.e. shortest route to Neo’s “I know kung-fu”)? And can you share any “hacks” or “pro-tips” that can help surmount that initial learning curve and tech-stack fatigue? Links SnipCart Syntax 228: More on Severless - Databases × Files × Secrets × Auth × More! FileReader API Synt

In this Hasty Treat, Scott and Wes talk about the differences between compilers and build tools in TypeScript. 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 03:38 - What is a TypeScript compiler? Do we still need Babel / WebPack? 07:49 - Babel Transpiler It doesn’t do typechecking New JS features that aren’t in TypeScript yet 10:22 - SWC Rust based compiler Doesn’t do type checking (yet) https://github.com/swc-project/swc/issues/571 13:03 - Deno Uses tsc right now Might move to Rust https://github.com/denoland/deno/issues/5432 13:36 - Surcase https://github.com/alangpierce/sucrase#transforms 14:46 - ESBuild Compiles, but doesn’t do any type checking Fastest 17:39 - What about bundlers? Parcel Snowpack Webpack ESBuild When might you still need a bundler? To handle different types of files that are non-standard Like importing CSS and images Treeshaking Smaller bundle files Typescript can concatenate to a single file, or all .js files, but smaller / smarter bundles still need a tool for that Polyfills Typescript does convert to syntax, but will not polyfill features Something like Promise Syntax can be transpiled to old code Methods like allSettled aren’t Links Syntax 324: TypeScript Fundamentals Syntax 322: The Deno Show 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

In this episode of Syntax, Scott and Wes review resumes, websites, and online presences, and discuss pros and cons, what you should focus on, 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. 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 04:32 - Why does an impression matter? All of this stuff comes together to work in your favour when you are hunting for a job. 05:14 - What goes into an online presence? Twitter Share what you know Online website Design Messaging Effort Personal life Blog Resume It’s not about being popular, it’s about relationships and positioning yourself as an expert. People mix up their hatred for “influencers” with having a rock solid network of people who they can help and who can help them. 07:25 - A couple stories @HenriHelvetica You don’t know how many times I’ve tried to convince (esp people of color) to try a lightning talk. This stuff gets you to research, and you might even make discoveries. I know it’s a step out of the comfort zone for many, and that’s cool, but don’t be upset at those who go for it, and land some work. I do (did) lunch n learns @ Juno, and I started to end them w/ a post bootcamp life — tell them what it’s like, and to be active on twitter (share what you read, what you’re working on, listen to others, follow great devs, etc.). One person DM’d me to tell me she took that in and decided to try. “I never forgot that time you gave a talk at HY and one thing that you emphasized was to make your voice known on Twitter. You said that this has opened many opportunities for you and that’s been happening to me more and more recently. I never set out to build my account but the growth has indeed happened and along with it, opportunities from people I’ve never expected.” 09:40 - Ash Connolly https://ashconnolly.com/ https://www.notion.so/ashconnolly/Ash-Connolly-321c5a65350f477897ed025f4daa1bb0 Software Engineer Using new tech with high end clients Review Pros Clean, simple design, but doesn’t feel like it’s missing something Animations are a nice touch Easy to see their work (e.g. photo, title, short paragraph, link) Testimonials is good, I might change the word testimonials, but that’s small Cons Nitpick - footer emphasis color looks like a link HTML is good, but missing some semantic tags like , , , too reliant on divs Resume Pros Good idea of what Ash has accomplished (e.g. just by reading his summary, I’m left feeling impressed because of his client base and his extras like writing for FreeCodeCamp and Marvel Blog). Work history - good way of describing what he did. “Carried out performance audits and site speed improvements” Links to writings and side projects Cons Lists Brad Frost as someone who shared his post. This feels a little weird. Nitpick - CSS & CSS3, HTML & HTML5 on the languages. In 2021, just put HTML & CSS. Work history - WAY way too much. Keep it to one sentence and three or four bullet points for each job. Ain’t nobody gonna read all that. 20:48 - Matthew Bidwell https://matty.dev/ Backend dev Not focused on dev Review: Banging domain It’s clear who he is, what he is about Links to Twitter, Github and LinkedIn right away Blog posts showing he knows what he’s talking about 24:42 - Leah Lundqvist https://leah.link Review: Pros Fantastic aesthetics on site Good lead paragraph Cons I’m not sure what work she actually does Github pages are great for digging but not curation or showing off Same with Twitter For instance, I saw on Twitter that Leah made https://app.airport.community/app/rec1CbVg4J5aqScUQ but there

In this Hasty Treat, Scott and Wes talk about keyboard events and some of the fascinating things you can do with them! 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:04 - The Events http://keycode.info/ keydown beforeInput Keypress - deprecated inputType tells you whether the event is inserting text, replacing text, inserting a line break, etc. keyup change event - only fires when you focus out https://github.com/w3c/uievents/issues/220 08:02 - Event meta data "key": "c", "keyCode": 67, "which": 67, "code": "KeyC", "location": 0, "altKey": false, "ctrlKey": false, "metaKey": true, "shiftKey": false Others: .locale .repeat 16:46 - Media keys https://developers.google.com/web/updates/2019/02/chrome-73-media-updates play, pause, ect Overkill app: https://krausefx.com/blog/introducing-overkill-dont-let-itunes-interrupt-your-workflow 18:32 - When might you use key codes? Space bar to stop a video on a page Building a game Making a web app feel more like an app Links Better Touch Tool Syntax 315: Hasty Treat - Hyper Productivity with Keyboard Shortcuts + Window Management 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

In this episode of Syntax, Scott and Wes talk about TypeScript fundamentals — what it is, how you use it, why people love it so much, and more! 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. 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 What is TypeScript? 03:12 - Types? What are types and why should you care? JS is a typed language, it’s just not strongly typed JS does not care about reassignment of a variable to a new type Does not care about your types, but they do exist 06:34 - The Fundamentals You write your JavaScript code, but each time you create a variable, function, parameter, you “type it” — which means you describe what that data will look like. Create a variable: Will it be a string? A number? A custom type of show? Create a function: What params does it take? What type are they? What does it return? Types allow your code to know if there are type errors that would present themselves to the user silently. These are small errors that can be compounded and go unnoticed. This can allow you to prevent shipping code that has these errors by checking your code. Some of the biggest benefits here come via errors in your text editor 13:30 - Explaining the types You can create your own types Strings Numbers We only have numbers in TS, no floats/ints We do have BigInt though, but not something most people will use Arrays Will be a list of another type Unions This type will be one of the possible options String of DRAFT PUBLISHED or ARCHIVED Intersections An intersection type combines multiple types into one Objects These are custom types where each property is its own type Any Explicit any Implicit any Language types These things are technically just Objects, but they have their own types Dates Timeouts DOM Elements / Nodes Void When a function returns nothing — usually used with side effects like click handlers Enum A set of named constants Used when you have a select amount of values — I like to think of these as the select lists of TS String unions are also used for this same thing 30:28 - Inference Automatic detection of types Typescript will try to infer your types based on their definition Not every type can be inferred, leading to implicit anys and the need for explicit types 33:25 - Getting types Most popular packages already have types — you install them like npm i @types/whatever If a package doesn’t have types, you have to create them yourself, which can be annoying MakeTypes Console log a JSON.stringify(obj), and pipe it in Node has types Vanilla JS has types, for the language and all of the DOM - HTMLInputElement React has types Typing Node modules that don’t have types Overall benefits 40:39 - Type hinting With TS and your editor (VSCode) you’ll get more information about your code as you type it — allowing you to know exactly what things expect This seems like a small deal but in practice leads to being much more efficient 42:50 - Refactoring Rename a function, type, or variable and it will be updated everywhere in the project! Moving a function to a new file is actually part of TypeScript Drag + Drop file, update imports 48:10 - Compiling TSC vs Babel / Esbuild Only TSC type checks Compiling TS with babel will not allow you to break the build on type errors, you’ll need to run TSC in coordination or in the CI/CD Links Snipcart GraphQL Snowpack ××× SIIIIICK ××× PIIIICKS ××× Scott: 1: LumiPets 2: LumiPets Bear Wes: Phomemo Label Printer Shameless Plugs Scott: ESM & Snowpack - 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

In this Hasty Treat, Scott and Wes talk about the new Level Up Tutorials website — some of the new tech powering the site, behind-the-scenes decisions, previous iterations, 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 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 02:55 - Previous iterations Originally on Drupal 7 Full re-write to Meteor + Blaze Two sites — store.leveluptutorials.com and leveluptutorials.com Meteor + React Meteor + Apollo Combine store and site Move to TypeScript NOW 05:30 - Big choices No Babel up and down the stack UI Mostly unchanged — React + Styled Components + SCSS Moving more to SCSS, CSS vars Build and dev done via Snowpack 50ms hot reloadin’ Mega fast development workflow has been a huge plus Errors in the UI via Snowpack Wrote a custom GraphQL importer plugin API ESBuild Insane speeds Wrote a custom GraphQL importer plugin Mercurious / Fastify Codegen GraphQL code gen to create everything we need for a fully typed codebase Auto-generated React Hooks Hosting render.com for both CLI Custom avalanche CLI that removes the guesswork and makes bulk operations easy Caddy server for easy leveluptutorials.dev in local environments Testing Jest → API Cypress → UI Links Digital Ocean app platform https://beta.leveluptutorials.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

In this episode of Syntax, Scott and Wes bring you the long-awaited Deno show — what it is, what it replaces, how you can use it, and more! Deque - Sponsor Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at deque.com/axe. 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. 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 02:13 - What is it? A secure runtime for JavaScript and TypeScript Built by Ryan Dhal — same guy who initially built Node.js API is JS or TS out of the box 04:55 - Does it replace / what is it in relation to? Node It’s a replacement for Node.js Express Web Server Frameworks like Express will run on Deno, but Express itself won’t currently run because they are build on Node APIs https://github.com/oakserver/oak Serverless Deno can be used for anything, so it can be used for serverless functions, or a traditional web server Serverless, Deno and TypeScript with Brian Leroux React / Vue / Svelte These things are just JavaScript, so they should/will work in Deno. Deno will replace your tooling. More involved things like Next.js that require Node APIs won’t work until. https://alephjs.org/ SSR It comes with all browser APIs out of the box! Fetch Window + Add Event listener Webpack / Parcel / Snowpack Deno is a bundler Prettier Deno is a formatter TSC Deno is a TypeScript compiler and runtime ESLint Deno is a linter Jest Deno is a Test Runner NPM Deno is a package manager - it pulls in packages from URLs 14:51 - Modules ES modules from the start Modules are loaded from URLs Why? No package registry to worry about This is how the browser works Import from URL You can also specify it in the json file https://github.com/oakserver/oak/blob/main/deps.ts https://deno.land/ Fetch is built in! It’s a browser API, but who cares?! Browser APIs window.add event Listener Deno is event based, like the browser 20:10 - A nice standard library https://github.com/denoland/deno/tree/master/std 22:14 - WASM Deno can run WASM with the same APIs that the browsers can Node is doing this too (experimental) 25:06 - Multi-threading with Web Workers 26:13 - Speed It’s fast! They took everything they learned from Node - good and bad Built in Rust From what we understand: V8 is written in C++ Node is written in C, C++ and JavaScript How it talks to V8 - Rust sits in-between the JS runtime, and the C++ V8 runtime and communicates between the two. https://github.com/denoland/deno/blob/master/core/examples/hello_world.rs 29:44 - Security Sandboxed —allow-read —allow-net -allow-write https://deno.land/[email protected]/getting_started/permissions#permissions-list You can specify which dirs it can access 33:39 - Run from anywhere https://www.npmjs.com/package/npx Deno run https://cool.com/whatever.ts 37:43 - Async out of the box Everything is based on async + await / promises right away. No callback APIs, no promise wrapping. Top level await 38:53 - Node Compatibility Node APIs are being filled This means if a browser package ships an ES module of a package, we can just import it 42:21 - What we’ve built A bunch of sample scripts Lots of simple demos Very intuitive Fetched and downloaded every single Syntax mp3 https://twitter.com/wesbos/status/1326345600141582336 46:54 - Hosting Literally any linux server (Linode, Digital Ocean, etc.) https://begin.com/ https://fly.io/ 48:29 - Final thoughts Scott: Now is a great time to learn, but don’t put any crucial work into that space unless you are ready to write everything. Libraries are still being written and evolved. Docs are still sparse. Many things didn’t work on first try. I had to read lots of source. Wes: If You know JS or TS, you are already 90% there. The package ecosystem isn’t there yet Battle-tested ××× SIIIIICK ××× PIIIICKS ××× Scott: Boom/Bust: The Rise and Fall of HQ Trivia Wes: Orthopaedic Pillow 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 you

In this Hasty Treat, Scott and Wes talk about AVIF — what it is and how you might use it! 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 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:10 - What is AVIF? AVIF is derived from the keyframes of an AV1 video Royalty free (big deal) What about WebP? Basically half the file size of a WebP for free, which was already about half the size of a jpeg It’s a lossy format — ie it inherently will degrade the image https://jakearchibald.com/2020/avif-has-landed/ No animation 10:53 - How to implement Cloudinary is in beta, but you can try it Gatsby supports it https://squoosh.app/ Imagemin https://github.com/nucliweb/imagemin-avif https://avif.io/ https://github.com/dreampiggy/AVIFQuickLook https://github.com/vercel/next.js/pull/20765 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

It’s another potluck! In this episode, Scott and Wes answer your questions about VS Code, JavaScript, $100k-per-year dev jobs, sponsored blog posts, how to use dev tools, how to keep your skills up to date, and more! 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. 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:01 - Not so much a question as me saying thanks! I started web dev as a bartender/college dropout in 2017 when Syntax was pretty new. I rarely miss an episode, and this year I’m starting my first >$100k JS job! Your show has always been fun, kept my attention in the realm of web dev, and helped guide my interest — I think it has been extremely valuable to my career so far, and I look forward to more. 04:10 - How do I know when to pull in a package rather than write similar functionality myself? And is there a rule for when enough is enough, in terms of having too many packages? What I’m most concerned about is bundle size. It doesn’t seem to take a lot of packages before Webpack notifies you about large bundle sizes, so what would be best practice? 11:27 - What is your opinion of doing a sponsored post or guest post on your own site? And if you’re in favor, what sorts of terms, payment, etc. would you outline or charge for it? 18:20 - Do you have/know of any resources for those that want to learn more about selling digital products through e-commerce? The sources I’ve found (Scott’s e-commerce/Gatsby courses & Next.js commerce demo page) focus more on creating stores that sell physical products. Are there any gotchas when selling digital vs physical? 22:10 - Do you have any tips for keeping your skills up to date while taking a break from work? I’m a frontend dev currently six months into my year-long maternity leave and I feel like my brain has turned to soup. I listen to podcasts and read blog posts but it never feels like enough. Time and energy are very limited for me to work on personal projects! 25:11 - I remember you guys saying something about making your own UI component libraries. Do you use some CSS libraries like Tailwind or even Bootstrap or others for this, or do you write your Sass/CSS from scratch? 30:52 - Would be interested to hear some of the common ways you use dev tools (chrome dev tools, react dev tools, redux, etc.). I feel like there is a lot of information in there that I am not utilizing properly to help figure out problems during development. Would be cool to hear an overview of how you use the different tabs, some of the most commons things to look for, etc. 35:20 - I am graduating from a bootcamp next month and I feel severe insecurities/imposter syndrome. For whatever reason, I freeze up when it comes to coming up with code or writing things myself, mainly in JS. When in class, watching tutorials, following along, or viewing other people's code, I can tell you exactly what is going on, why it is being done, and I can change and add things and explain them. But when it comes to starting from a blank slate, I freeze, as if everything I know about programming has gone out the window. Do you have any advice as to how to get past this hurdle? I feel like at this point I shouldn’t be feeling like this, but maybe this is normal? 40:36 - Do you think developers have a responsibility to help reduce CO2 emissions caused by the web? A BBC news article stated that “HD video streaming on a phone generates about eight times more in emissions than standard definition (SD)” and noted that on a small screen, the viewer might not even notice the difference. Should the developer limit the resolution available to mobile devices, or should they let the end user choose? 47:53

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 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 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

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

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

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

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

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

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

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-

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

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

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

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

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

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

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

It’s another potluck! In this episode, Scott and Wes answer your questions about frameworks vs libraries, improving your debugging skills, building a component library, CSS modules vs styled components, writing a good resume, stress management, and more! 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 01:27 - How do you implement WebRTC? Please tell us more about online streaming, screen sharing, data flow. 03:20 - Which JS library/framework do you think beginners might find the easiest to understand? 05:06 - How do you deal with different case types between different systems in your project? For example, I store records in a Postgres database which typically uses snake_case and then I render them with React, where props are typically camelCase. Is it better to convert the cases back and forth between frontend and backend or just pick one case and use it everywhere? 09:23 - My question is about the difference between a framework and a library. Should we have two separate words? 12:39 - How can I work on improving both my generic problem-solving skills and my debugging skills? I feel like there have got to be some more proactive things I can do to improve in these areas. 17:22 - I just listened to your podcast on making freelancing easier and enjoyed it. You talk about making your own component library. Do you have tips on how to store and manage a component library? 21:39 - What projects do you use Rust for, and do you have any ideas where Rust might be the thing to do when talking web projects? 29:10 - I’ve recently joined a great-paying full-time gig at a big enterprise-level company as a Senior Javascript Engineer (React, Node, etc). I’m humbled to be here - but at times the pace is slow, tickets are scarce, and I feel like I’m not able to really utilize or hone my skillset. I’ve been looking at potentially moving into contracting/agency work - the money seems comparable with the added benefit of new and exciting projects and having more control over them. Do you think contract work would be more fulfilling, or is crazy to leave a cushy job solely because I’m in a sense, bored? 35:26 - I’m currently working on a Next.js project and trying to decide which CSS system to use. What is your take on CSS modules? I know you like styled components a lot, but since there is built-in support for CSS modules with scoped CSS, I find it hard to motivate bringing in styled components. Am I missing something? 38:15 - Regarding Episode 290, you fielded a question regarding Angular and I appreciated your balanced response since I’m primarily an Angular developer at my job. If you could, would you please update the link to the Angular website to point to Angular.io (v10) instead of the AngularJS (v1) website? 40:43 - I really need advice on how to write a good resume, or any tips you may have for getting noticed in the hiring process with only a couple years of experience. I have been applying to many jobs as a front-end developer but I seem to get no response EVER. 47:17 - How do I dynamically assign subdomain/wildcard/slug dynamically during signup process with React and Node? (Like the way Freshbooks does — i.e tenant1.domain.com, tenant2.domain.com, etc.) 48:44 - Wes, I’ve been taking your Mastering Gatsby course, and I’m loving the course so far. My only complaint would be I wish you added a module for CSS. I think it's just because I personally struggle with styling websites. Do either of you have any suggestions on how I can improve in that aspect of web dev? 50:35 - For web developers just starting out in freelancing/building e-commerce sites — from a business perspective, do you recommend we first 1) just code and worry about business stuff later? or 2) go through the government paperwork and be a sole proprietorship? or 3) incorporate (though this costs more)? 54:20 - What’s your approach for handling padding + margin with components? 57:43 - How do you back up sensitive files that do NOT get added to source control (env files, for example)? I have off-site computer backups, and I have .env files on a small thumb drive on my keychain. What do you do? 59:56 - Do you guys have stress management techniques? How do you cope with stressful situations at work, like unexpected tight deadlines? Links Syntax 002: Webcam and audio access with WebRTC and getUserMedia() Syntax 25