Syntax - Tasty Web Development Treats

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

21 Des 202016min

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

16 Des 20201h

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

14 Des 202025min

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

9 Des 20201h 9min

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

7 Des 202025min

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

2 Des 202057min

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

30 Nov 202012min

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 256: WebRTC and Peer-to-Peer Video Calling with Ian Ramzy Daily.co Twilio Svelte https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case Master Gatsby Syntax 292: How to Make Freelancing Easier https://github.com/formium/tsdx https://nx.dev/react https://github.com/lerna/lerna https://www.npmjs.com/package/babel-plugin-module-resolver Deno Rust wasm-pack https://rocket.rs/ Syntax 290: Potluck - Is Angular good? × Stencil.js × Self XSS × SVGs in React × Social Platforms for Devs × Project Handoff × Cleaning Knives × More! Modern CSS Layouts Modern CSS Design Systems Digital Ocean App Platform ××× SIIIIICK ××× PIIIICKS ××× Scott: Eating Out Loud: Bold Middle Eastern Flavors for All Day, Every Day: A Cookbook Wes: Levi’s Barstow Western Shirt Shameless Plugs Scott: Animating Svelte - Black Friday Sale: Sign up for the year and save 50%! Wes: Master Gatsby - Black Friday Sale: All courses 50% 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

25 Nov 20201h 8min