Syntax - Tasty Web Development Treats

This lively discussion tackles whether class components are on the way out in React, debating their ongoing relevance. The hosts share insights on web scraping techniques and tools for pulling data from sites without APIs. They also touch on the intersection of smart home technology and coding, sharing personal anecdotes about Philips Hue lights. Additionally, they offer perspectives on balancing mental well-being with the demands of development and sprinkle in practical advice for freelancers to manage their workflow effectively.

In this Hasty Treat, Scott and Wes talk about authentication — the difference between localStorage, cookies, session, tokens 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 replayer and a performance monitor. Get 14 days free at https://logrocket.com/syntax. Show Notes 4:20 - How should we track users? Token based - generally stored in the client Session based - stored on the server Token Based (JWT) 6:00 - Token-based auth Stateless - the server does not maintain a list of logged in users Scalable - you can use serverless functions easily Cross domain Data can be stored in JWT Easy to use on non-web sites like mobile apps Hard to expire tokens — you must maintain a list of blacklisted tokens 7:48 - Session-based auth Stateful - generally you maintain a list of session IDs Passive - once signed in, no need to send token again Easy to destroy sessions 10:48 - How do we identify the user on each request? localStorage or Cookies? A common misconception is that localStorage is for tokens while cookies is for sessions With localStorage, we need to grab the token and send them along on each request With cookies, the data is sent along on each request 11:25 - Security Issues XSS for Tokens - make sure bad actors can’t run code on your site Sanitize inputs XSRF - CSRF tokens are needed Links Cookies vs Tokens: The Definitive Guide 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, Wes and Scott talk about life management — the systems and tools for managing all the the busy details of life and work. 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 5:00 - Todos GTD philosophy Todoist Things 12:31 - Focusing Focus app Turn off all notifications on iOS and desktop Rename apps Ask yourself why you feel the way you do Should be doing email? Do I need to eat that frog? Why do I not enjoy this? Sticky note on screen or desk 21:27 - How we track ideas, thoughts, and notes Get everything out of your head Markdown files Evernote Notion 27:23 - Calendar and schedule Google calendar USB light switch 33:30 - Goal tracking / Life progression Keep concepts and ideas in Notion Milestones (bigger ideas) are separated Use the system that works best for you 36:58 - Fun things with Notion What is Notion? Cross-linking/referencing between boards Episode calendar and possible episodes kanban Links Freshbooks Sentry Todoist Things Getting Things Done: The Art of Stress-Free Productivity Focus Notion Evernote Bryant Electric USB light switch Bear app Airtable ××× SIIIIICK ××× PIIIICKS ××× Scott: LG Ultrawide Monitor Wes: LG 4k 32" Monitor Shameless Plugs Scott’s React Hooks For Everyone Course Wes’ Courses Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter

In this Hasty Treat, Scott and Wes talk tips to succeed on YouTube! 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 1:55 How YouTube has affected our careers 3:45 YouTube money is just OK 6:28 SEO is king 7:15 The title is most important 8:59 Description is important 11:00 Use Tags. All of them. 12:00 Scheduled content works 13:26 Keeping Viewers 15:20 Pinning comments 15:41 Liking Comments 17:00 Practice Finishing Sentences 17:34 Collaborate when you can 19:00 Use all the features YouTube has to offer 20:44 Don’t get sucked into the BS Links TubeBuddy 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, Wes and Scott debate Gatsby vs Next — how they compare, the pros and cons of each, why you might chose one over the other for your next project, 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 replayer and a performance monitor. Get 14 days free at https://logrocket.com/syntax. The Armoury - Sponsor The Armoury is a men’s clothing and accessories retailer that provides some of the highest quality clothing you can buy. Designed for those of you who want the highest quality clothing that feels great and will last forever. Buy less, buy better. Follow them on Instagram @thearmourynyc and check out their website TheArmoury.com. Show Notes 5:07 - Server Side Rendering Next.js will render on demand — this allows you to have server rendered pages on demand. Think of a blog website — publish a new blog post and it will immediately start working. Authenticated pages can be server rendered, and thus, pre-loaded for better performance. Gatsby runs at build time only — so you need to have all of your data ready at build time. Pro: This makes for very fast page load. Con: Large websites can take a long time to build. Con: Gatsby can do network fetches from the client, but these lose the benefit of SSR. Ease of SSR: Next.js requires a complicated document.js file if you are fetching data anywhere other than a page component. This will probably get easier with Suspense. Demos are simple, but any real application requires harder config. Gatsby is Easy Peeezy! 11:09 - Data Next.js is unopinionated. Like React, it doesn’t care where your data comes from. getInitalProps(); Gatsby has a number of “source” plugins which will pull in data from sources — markdown, WordPress, API, file system. Once you have that data sourced, you can query it with GraphQL. 22:50 - Routing and Creating Pages Next.js makes you create a page in a pages directory. You can nest these as deep as you like. If you want to pass query params, you must do so with a ?query=string. There are several third-party options for getting around this that require a node server. Gatsby allows you to programmatically create pages with their createPage API. For both navigating between pages, they make a Link Component available. 30:49 - Plugins In Gatsby, everything goes through the Gatsby pipeline. This makes things like image compression, pagination, sass, service workers and many other progressive web app pieces very easy. Gatsby makes building a really good website easy. Gatsby Image is SOOOOO amazing. The scope of Next.js is much smaller. They give you a few things, but you generally bring your own approach for most things Routing Linking and prefetching Dynamic Importing 38:42 - Deploying and Hosting Gatsby is just HTML, CSS, and JS at the end of the day, so it can be deployed almost anywhere — Netlify, Github Pages, cheap PHP hosting, etc. Next.js is a Node app. It can be integrated into an existing Express app, or run by itself. Requires a Node server to run it. Next.js has a static generation option, but you’re better off using Gatsby for that. 44:41 - The verdict? Us Next.js for Apps, Gatsby for Websites Links LogRocket The Armoury Next.js Gatsby Netlify Node Express ××× SIIIIICK ××× PIIIICKS ××× Scott: Motion LED Lights Wes: The Dream Podcast Shameless Plugs Scott’s Pro Gatsby 2 Course Wes’ Courses 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 side projects — what you can learn, why they’re great, how to come up with ideas, and more! 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 2:17 - Why? Keeps you sharp It’s actually useful Try new technology 5:28 - How to come up with ideas What sucks in your life? How do you get a competitive advantage in life? 12:10 - Quick and dirty tech Next.js Express diskDB Meteor 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, Wes and Scott talk about the Smart Home — all the different tech available, how it works together, pitfalls to avoid, hardware, software, and more! Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax. Stackbit - Sponsor Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm. Show Notes 2:25 - The tech Wifi devices Zigbee Can operator on low power Usually Cheaper Water Sensor, door sensor, temperature iOS HomeKit sucks You need an Apple TV or iPad to access outside of your house 9:13 - Controlling your smart home Smart Things Home Assistant Host your own Lots of add-ons You need to babysit it Android Google Assistant Google Pixel squeeze to assistant is way better than saying “Hey Google”. Google Home Google Home is awesome Custom sayings with IFTTT Custom via Routines Alexa 23:52 - Software Stringify IFTTT Basic automations Makers accounts Web hooks to trigger actions Homebridge Make non-iOS stuff work with HomeKit Swipe up control is nice 28:15 - Hardware Light Switches Leviton Lutron Bulbs LIFX Philips Hue AMAZING Much cheaper now than before Blinds Chromecast — turn the TV off Plugs Wemo Leviton Sonoff Power strip Change each plug or have timers Thermostat Ecobee 3 Lite Ecobee 4 with Alexa Nest Nest-E Cameras Ring Doorbells Ring Flood Light Camera Super slow to open the app Wyze cameras Small one Larger Panning Camera Mesh Wifi Google Wifi Amplifi Fire Alarms / CO2 Nest Protect Dumb Lithium Garage Door Opener Non-connected “smart items” Solar powered lights on a timer. No app needed, no WiFi connection needed Roomba - meh. We play “find the body” when it comes home. Locks - Code based lights 67:32 - What we want in the future Scott Motion sensors Door sensors Locks Blinds More bulbs Wes Fireplace Constantly recording cameras Sensors galore Windows open Doors open Garage door Zigbee Hub Xiaomi Sensors Gear Best Links Sanity Stackbit Google Home Mini Amazon Echo Google Pixel Apple Homepod Raspberry Pi GearBest ××× SIIIIICK ××× PIIIICKS ××× Scott: Philips Hue Wes: All the recommendations from above Shameless Plugs Scott’s Level Up Pro Wes’ Courses 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 tackle email, specifically, how to email busy people — how to write emails that actually get read, and don’t just get tossed in the archive. 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 4:05 Subject lines 11:26 The body 14:33 Best practices 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 episode in which Wes and Scott answer your questions! This month - organizing your Git repos, the difference between freelancing and contracting, changing careers, how to deal with spammers and more! Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax. Techmeme Ride Home Podcast From Techmeme.com, Silicon Valley’s most-read news source, The Techmeme Ride Home podcast is a short daily podcast about the day’s tech news. Mark Zuckerberg called Techmeme the one news source he definitely follows. New episodes are published every day at 5p.m. You can check out the show here, or search for “Techmeme Ride Home” in your favorite podcast player. Show Notes 1:55 Q: Do you prefer to have your backend and frontend in separate Git repos or together? What are the trade-offs? 5:12 Q: In web dev, what’s the difference between a freelancer and independent contractor? 9:45 Q: Default export vs named export? 11:35 Q: I’m looking to change careers, but I’m 41 this year. Is it too late? 16:12 Q: Have you guys made much use of multicolumn layout? If so, only for text, or have you come up with (or seen elsewhere) any interesting out-of-the-box uses? 20:11 Q: Since you publish your courses’ source code on Github, what do you think about people using that to learn instead of buying your course? Is it an intentional decision, or is it a compromise you’re willing to make? 23:52 Q: When is a certification needed for both jobs and side-projects? 29:35 How do you deal with spammers filling out forms? 34:05 Q: Could you better explain what a slug is? I’ve heard the term thrown around on a number of your episodes, but I don’t really know what it means. 37:44 Q: I am currently going through some currency conversion stuff for a project, what would you recommend to use for international conversions? Links Sanity Techmeme Ride Home Podcast Concurrently Rachel Andrew CSS Grid auto height of elements? Cloudflare Intl.NumberFormat ××× SIIIIICK ××× PIIIICKS ××× Scott: Voxon Screwdriver Set Wes: Technology Connections Shameless Plugs Scott’s Level Up Pro Wes’ Courses 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

Scott and Wes dive into the essentials of code quality tooling, spotlighting TypeScript's advantages for safer coding. They discuss how Jest enhances testing workflows, providing immediate feedback that boosts developer confidence. The conversation emphasizes the necessity of error tracking tools, like LogRocket and Sentry, to effectively debug and maintain code. The hosts encourage adopting these tools to streamline development and manage issues better, inviting listeners to share their own recommendations.