Syntax - Tasty Web Development Treats

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

17 Mars 20211h

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

15 Mars 202123min

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

10 Mars 202158min

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

8 Mars 202127min

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

3 Mars 20211h 5min

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

1 Mars 202126min

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

24 Feb 20211h 5min

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

22 Feb 202120min