344 episodes

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.

Syntax - Tasty Web Development Treat‪s‬ Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

    • Technology
    • 4.8 • 107 Ratings

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.

    Hasty Treat - CSS Nesting 1

    Hasty Treat - CSS Nesting 1

    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

    • 20 min
    Potluck — Video Hosting × Fake Names? × Portfolio Projects × Monorepos × APIs × TLDs × Recording Tips × More!

    Potluck — Video Hosting × Fake Names? × Portfolio Projects × Monorepos × APIs × TLDs × Recording Tips × More!

    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 professi

    • 1 hr 11 min
    Hasty Treat - VSCode Extensions and Tips

    Hasty Treat - VSCode Extensions and Tips

    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

    • 22 min
    Servers with Matt from Caddy

    Servers with Matt from Caddy

    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

    • 1 hr
    Hasty Treat - What is the n+1 problem?

    Hasty Treat - What is the n+1 problem?

    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

    • 20 min
    Syntax Highlight (We Review Your Portfolio)

    Syntax Highlight (We Review Your Portfolio)

    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

    • 1 hr

Customer Reviews

4.8 out of 5
107 Ratings

107 Ratings

florentcm ,

My favourite podcast

This pod cast is a gem, I've been listening for more than a year now and I recommend it to any Front-end dev who want to keep up with latest trends

WwHG10 ,

Fantastic show

Great topics and smart content.
This show is wonderful and a great listen.

shakattack212 ,

Rock on🤘

Thanks for being education focused, it’s incredibly useful. May your listeners build awesome things.

Top Podcasts In Technology

Listeners Also Subscribed To