TopPodcast.com
Menu
  • Home
  • Top Charts
  • Top Networks
  • Top Apps
  • Top Independents
  • Top Podfluencers
  • Top Picks
    • Top Business Podcasts
    • Top True Crime Podcasts
    • Top Finance Podcasts
    • Top Comedy Podcasts
    • Top Music Podcasts
    • Top Womens Podcasts
    • Top Kids Podcasts
    • Top Sports Podcasts
    • Top News Podcasts
    • Top Tech Podcasts
    • Top Crypto Podcasts
    • Top Entrepreneurial Podcasts
    • Top Fantasy Sports Podcasts
    • Top Political Podcasts
    • Top Science Podcasts
    • Top Self Help Podcasts
    • Top Sports Betting Podcasts
    • Top Stocks Podcasts
  • Podcast News
  • About Us
  • Podcast Advertising
  • Contact
Not in our directory?
Add Show Here
Podcast Equipment
Center

toppodcastlogoOur TOPPODCAST Picks

  • Comedy
  • Crypto
  • Sports
  • News
  • Politics
  • True Crime
  • Business
  • Finance

Follow Us

toppodcastlogoStay Connected

    View Top 200 Chart
    Back to Rankings Page
    News

    Syntax – Tasty Web Development Treats

    Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

    Advertise
    • Apple Podcasts
    • Google Play
    • Spotify

    Latest Episodes:
    Syntax Highlight (We Review Your Portfolio) Mar 24, 2021
    Show notes

    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

    Hasty Treat - Effortless Custom GraphQL with GraphQL Codegen Mar 22, 2021
    Show notes

    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

    How To Build Your Own Auth Mar 17, 2021
    Show notes

    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

    Hasty Treat - Environmental Variables Mar 15, 2021
    Show notes

    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

    Potluck — VSCode × Vercel vs Netlify × Models × Mutations × Multi-Vendor Platforms × Websites vs Web Apps × More! Mar 10, 2021
    Show notes

    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

    Hasty Treat - Ask Us Anything! Mar 08, 2021
    Show notes

    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

    Syntax Desk Setups Mar 03, 2021
    Show notes

    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

    Hasty Treat - Hireable Skills for 2021 Mar 01, 2021
    Show notes

    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

    React Query + More React with Tanner Linsley Feb 24, 2021
    Show notes

    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

    Hasty Treat - The Future of Testing with Cypress Feb 22, 2021
    Show notes

    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

    Previous 1 70 71 72 73 74 105 Next

    Related Podcasts

    Inside Strategic Coach: Connecting Entrepreneurs With What Really Matters

    1

    Inside Strategic Coach: Connecting Entrepreneurs With What Really Matters Business
    WSJ Your Money Briefing

    2

    WSJ Your Money Briefing Business
    FORTUNE Unfiltered with Aaron Task

    3

    FORTUNE Unfiltered with Aaron Task Business
    FORTUNE OnStage Presents: The Most Powerful Women

    4

    FORTUNE OnStage Presents: The Most Powerful Women Business
    Slate Money

    5

    Slate Money Business
    In The Dark – The New Yorker

    6

    In The Dark – The New Yorker Business News
    footer-logo

    Contact Us

    Toll Free: 844-670-7747

    Links

    • Home
    • Top Charts
    • Networks
    • Apps
    • Independents Podcasts
    • Podcast Advertising
    • Podcast News
    • Contact Us
    • About Us
    • Analytics & Insights

    Stay Connected

      Privacy, Terms of Use & Our Code of Ethics Protecting Content Creators Copyrights