373 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 Treats Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

    • Technology
    • 4.9 • 127 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.

    Potluck - Svelte × Bleeding-Edge Tech × Git Process × Screencasts × Government Jobs × Permissions-Based APIs × Rescript × More!

    Potluck - Svelte × Bleeding-Edge Tech × Git Process × Screencasts × Government Jobs × Permissions-Based APIs × Rescript × More!

    It’s another Potluck! In this episode, Scott and Wes answer your questions about Svelte, bleeding-edge tech, best Git processes, Create React App, screencast software, FitBit API, government jobs, Syntax sponsors, and more!
    .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.
    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 03:15 - I was wondering what you guys think about using the latest of Svelte (svelte-next) in serious projects? Does the improved devEx makes up for the small (but growing) community and lack of libraries? Do you think svelte-next is here to stay or maybe we will get a revamp that breaks backward compatibility in a couple of years, like svelte 2 -> svelte 3?
    8:48 - Git question: My process is often that I want to be able to use my last project as a starting point for my next project, with the new project having absolutely no connection or relationship to the old project. What steps can I take to completely sever any ties to the old project? Bonus question: In the new project I would love to eliminate all commits from the old project and start the new project having just one commit, the initial commit with all the code from the old project.
    11:05 - Is CRA still useful for building actual production-level web apps these days? People seem to be reaching for Next or Gatsby most of the time, and I feel CRA is mainly used for actually learning React/building personal small websites. Your thoughts? Also, for normal CSR, I feel it is better to use something like Next, and fetch data inside your component (eg: for a dashboard) rather than building one with CRA. Am I wrong?
    19:40 - What are your favorite screencast tools? (Linux? Mac? Windows?)
    25:53 - Is it a bad trait for beginners to “give up” easily? By that, I mean instead of taking the time to think of the answer to a problem, they would instead rely on googling the solution and try to understand how it worked afterward.
    27:55 - In pursuit of better health I want to track my weight daily using a smart digital scale. The idea is to automate the process of logging my own weight (e.g. stepping on the scale will update my Apple Health and any other integrations I have). After some searching around I landed on the Aria Air (mostly because I like the design and it has the coolest name). One small problem - it does not sync with Apple Health as it is a product from FitBit. They have an API so I’m thinking about running a serverless function daily, around 8 a.m. after I weigh in, to hit the FitBit API, get the data and push it to Apple Health. This way I can stay in the Apple eco-system whilst happily getting this nice, aesthetic digital scale. Any thoughts on how you would personally implement something like this? P.S. My girlfriend thinks I’m crazy, but I know the tinkerer inside Wes will love this.
    30:26 - I w

    • 59 min
    Hasty Treat - Stylelint for Linting CSS

    Hasty Treat - Stylelint for Linting CSS

    In this Hasty Treat, Scott and Wes talk about Stylelint, what it is and why you should use it!
    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:15 - What is a linter anyway? Why do you want to lint your CSS?
    Does stylelint fix errors or just tell you errors? 04:42 - Getting setup
    .stylelintrc stylelint extension Sass High perf animations stylelint order Max nesting depth Declaration strict value { "extends": [ "stylelint-config-standard", "stylelint-config-sass-guidelines" ], "plugins": [ "stylelint-high-performance-animation", "stylelint-declaration-strict-value", "stylelint-order" ], "rules": { "selector-no-qualifying-type": [ true, { "ignore": [ "attribute" ] } ], "plugin/no-low-performance-animation-properties": [ true, { "ignoreProperties": [ "color", "background-color", "box-shadow" ] } ], "indentation": "tab", "order/order": [ "custom-properties", "declarations" ], "order/properties-alphabetical-order": null, "declaration-block-no-duplicate-custom-properties": true, "declaration-empty-line-before": null, "scale-unlimited/declaration-strict-value": [ [ "/color$/", "z-index", "font-size" ] ], "scss/dollar-variable-pattern": "^[a-z][a-zA-Z0-9]+$", "max-nesting-depth": 3, "selector-pseudo-class-no-unknown": null } } Links https://github.com/stylelint/awesome-stylelint JSLint JSHint ESLint VS Code 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 min
    React 18 - A Look Ahead

    React 18 - A Look Ahead

    In this episode of Syntax, Scott and Wes talk about everything coming in React 18!
    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.
    RevenueCat - Sponsor RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world’s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at revenuecat.com.
    Show Notes 04:32 - Automatic Batching
    Don’t worry about re-renders 08:32 - New Render API
    const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); No more hydrate method (yay!) 10:44 - Suspense
    }> Suspense is basically a promise resolver component - nothing inside will render until promise is resolved. SuspenseList lets you coordinate the order in which loading indicators show up. 16:43 - StrictEffects Mode
    https://github.com/reactwg/react-18/discussions/19 Will allow components to mount, unmount, and mount again Will help with fastrefresh and really good dev experience 18:43 - useTransition() Hook
    Not an animation hook. They named it this because of the future ability to add animations to React core. Wrap the state update in a “transition” to prevent the ProfilePage from being unmounted while suspending. This lets React know that it should wait for the update to complete. We classify state updates in two categories: Urgent updates reflect direct interaction, like typing, hover, dragging, etc. Transition updates transition the UI from one view to another. 23:11 - SSR Improvements
    React.Lazy will work on the Server Finally! https://github.com/reactwg/react-18/discussions/37 Server-side rendering (abbreviated to “SSR” in this post) lets you generate HTML from React components on the server, and send that HTML to your users. SSR lets your users see the page’s content before your JavaScript bundle loads and runs. React Server Components 34:45 - ELI5
    https://github.com/reactwg/react-18/discussions/46 36:37 - Next.js
    Next.js will probably have support for a lot of these features soon. Links https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html https://dev.to/cassidoo/react-18-alpha-is-out-now-what-2apj https://github.com/reactwg/react-18 https://github.com/reactwg/react-18/discussions Svelte Syntax 127: Hasty Treat - React Suspense Deno ××× SIIIIICK ××× PIIIICKS ××× Scott: SoundSource App Wes: The Changelog 443: Exploring Deno Land Shameless Plugs Scott: Building Svelte Components - Sign up for the year and save 25%! Wes: Beginner JavaScript - 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

    • 46 min
    Hasty Treat - Vite + Parcel 2

    Hasty Treat - Vite + Parcel 2

    In this Hasty Treat, Scott and Wes talk about modern build tools, comparisons between them, and makes them modern and next-level.
    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:08 - Next Gen Bundlers are here!
    They are easy They are fast They are bundlers They are code splitters They are dev environments HMR / Fast Refresh 07:13 - What do they use under the hood?
    Parcel uses SWC (Rust) Vite uses esbuild (Go) 10:29 - How do you use them?
    Usually point your app at an HTML file Your HTML file has an ES module It then goes and loads everything from there They have adaptors for different types of files CSS Images Etc. You can also point it directly at files 14:59 - Common use-cases
    React / JSX OOTB Vue Svelte TypeScript Both just work Custom Babel config Plugins for both Sass Vite: Detects it, asks to install it Parcel: Detects it, installs it for you PostCSS Processors 20:29 - Custom API
    Both have a custom API or “plugins”, which you can integrate into your app or tooling if needed. Example use-case: a really nice WordPress dev package. 20:57 - Which one?
    Both are really good! Parcel 2 has been in dev for 2+ years - unsure when it will launch. Wes: In my experience Vite “just works” a bit better. Might be a side effect of Parcel being in dev. Both are wicked fast. (Wes: I literally screen recorded JS and CSS updates ~ 10 ms difference either way.) Life is good! Links Top Chef Master Chef Snowpack Webpack Parcel SWC Vite esbuild Rollup SvelteKit Strapi 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 min
    Syntax Highlight — We Review Your Portfolios

    Syntax Highlight — We Review Your Portfolios

    In this episode of Syntax, Scott and Wes review your portfolios!
    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.
    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.
    Show Notes 03:59 - cudd.io
    Shared component animation between home / about really nice Readable, clear Simple Check the contrast ratio on the white text on light blue: https://coolors.co/contrast-checker/ffffff-56ccf2 Nice SSR from Next.js CSS vars Very tall cards without much text, looks like a mistake Better on a short browser window - peep the tall and skinny Card heading should be h3 or h4 10:35 - damonbolesta.com
    Nice design = super fun! Good color palette Shows your skills straight up Animation Not accessible - EASY fixes with Axe Dev Tools Text on background images hard to read White text on buttons Bold some words in your bio Border radius 21:52 - walterkjenkins.com
    Map is fun Contrast issues with the color choices Transparency not needed on body content Cursive font for links / buttons is a no for me dog Labels on social media icons Hero overlaps section below it Maps data processing should be h4 29:40 - suhit.me
    This is an example of a really good one Wicked domain name Design is ON POINT, like this is the type of polish I like to see - I’d hire on this Can’t get enough Inter font Fun little animation I’d go a little easier on the box-shadow Github even has a custom readme Resume Very modern - JS, TS, Bootstrap TypeScript A+ Drop the “5” and “3” from “HTML” and “CSS” I’d add color to the resume, its likely not printed Don’t need to say Github and LinkedIn in front of the URLs 37:20 - jacobpawlak.com
    Initial loading is great - transitions are hot Typography looks nice - not sure about those serif all-cap nav items Slider not very usable View circle on hover is cool, but I’m not sure about following your mouse, covers text T-shirt portfolio is awesome Fun little bits in the footer SSL is broken - fix that sh!t Links don’t show over background images - common issue today External links should probably be indicated as such HTML, paragraphs as h3 & h4, h5, should be - (i.e. “here are a few of my recently completed…” should be a ) Design of resume is KEY - different colors, eh? 47:04 - mrtnvh.com
    This is a good example of subtle flex of skills FAST AF Makes you say “Ohhhh” when you click a link (something that’s missing from a lot of these single page sites) Personal Photo A+ Position sticky Love the skills layout on the about page Email is a button I can’t copy your email We have mailto links - don’t reinvent A+ Links Top Chef Syntax 354: The Surprisingly Exciting World of HTML Elements ××× SIIIIICK ××× PIIIICKS ××× Scott: What Had Happened Was Podcast Wes: WAGO Lever-Nuts Shameless Plugs Scott: Building Svelte Components - 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 2 min
    Hasty Treat - JavaScript Event Buzzwords — Sync, Concurrent, Defer, Blocking, Workers

    Hasty Treat - JavaScript Event Buzzwords — Sync, Concurrent, Defer, Blocking, Workers

    In this Hasty Treat, Scott and Wes define some JavaScript Buzzwords and talk about what they mean!
    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 03:24 - Synchronous / Async
    05:23 - Multi-threaded
    JavaScript has a single “main thread” But you can have more threads with web workers 08:12 - Blocking
    JavaScript can stop other things on the page from running A script tag can block HTML from being parsed Most stuff in JavaScript is non-blocking Node.js write to filesystem can be blocking 10:27 - Concurrent + Parallel
    JavaScript start/stop are concurrent The API runs on a different thread Doesn’t REALLY matter https://joearms.github.io/published/2013-04-05-concurrent-and-parallel-programming.html 13:22 - Consecutive / Waterfall
    One after another 13:48 - Callback
    A function to run when this thing happens or is done Click event callback Websocket on data callback Like a tweet stream Data fetch callback Almost entirely replaced with async + await http://callbackhell.com/ https://caolan.github.io/async/v3/ 17:56 - Script Tag Async + Defer
    Doesn’t block other content Runs when ready - doesn’t care about DOMcontentLoaded Wait until the page is loaded before running If the script tag is above content, don’t wait for it Good for things that aren’t called on page load 21:54 - Lazy
    Load it in later - maybe when it’s scrolled into view, or as needed Not mission-critical 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 min

Customer Reviews

4.9 out of 5
127 Ratings

127 Ratings

coderkind ,

Fantastic tech podcast!

Both guys manage to make each episode entertaining as well as very informative. Thank you both for doing it!

David Darnes ,

Fun editing format and lots of juicy tips

Not listened to many episodes but found this show super useful. Each episode has some coding gems in them. Bleeding edge stuff too, in either CSS or JavaScript. Also enjoy the cheesy local radio station style.

GroomedGorilla ,

Hands down the best podcast for developers of all sorts!

From the content to the quality of the audio

Top Podcasts In Technology

Listeners Also Subscribed To