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:
    Gatsby vs Next.js in 2021 Dec 09, 2020
    Show notes

    In this episode of Syntax, Scott and Wes talk about Gatsby vs Next. A lot has changed in the last year — what are the differences, and do the recommendations from Syntax 120 still hold true?

    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 errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

    Show Notes

    03:34 - Server-rendered

    • Both do server rendered
    • Gatsby is gone at build time
    • Next is done at build and on deploy

    05:26 - Static generation

    • getStaticProps()
    • getServerSideProps()

    08:25 - Re-rendering pages

    • Gatsby can be re-rendered and re-deployed - any CMS lets you do this on only the pages that changed.
    • Gatsby-cloud
    • Next.js has the revalidate flag that will re-render when stale

    18:54 - Data management

    • Gatsby has a built in GraphQL API feature with
    • Next.js has nothing - it’s not their problem. Use Apollo, or SWR, React Query, or redux, or whatever you want.

    23:16 - Client-side data

    • Neither do anything, next.

    26:33 - Dynamic Pages

    • List of 100 shoes, each one gets a page
    • List of four types of shoes: basketball, runners, casual, bowling, etc.
    • List of 10 colors: each color gets its own page.
    • List of 12 sizes, each size gets its own page.
    • Now it gets complicated when you do this:
      • Show me basketball shoes, in red, in size 5
      • 600 pages minimum
      • What about size 6+7?
      • Then you get into having to fetch data on the client side - but all your data is in GraphQL?!
      • The queries are different!
    • Gatsby will get “Hosted GraphQL”: https://twitter.com/kylemathews/status/1252803849775009794

    30:41 - Routing

    • Neither do nested routing still
    • Both do folder based wrapper

    34:50 - Hosting

    • Anywhere

    35:54 - Images

    • Compression/resize
    • Lazy loading
    • SVG
    • Blur up
    • Next 10 released first revision of Next.js image
      • It’s not as good as Gatbsy-image
      • Must specify width and height, whereas gatsby has fixed and fluid
      • Compression
      • No blur up
      • Yes lazy loading
      • both don’t support gifs
      • Gatbsy requires annoying GraphQL query OR another plugin like MDX to do it
        • Not for long! https://twitter.com/ascorbic/status/1320770231657238529
      • Next.js is just

    Hasty Treat - Why should I use React Hooks? Dec 07, 2020
    Show notes

    In this Hasty Treat, Scott and Wes talk about React Hooks and why you might want to use them instead of class components.

    Sentry - Sponsor

    If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

    Show Notes

    03:54 - Decouple the UI from the logic

    • This wasn’t impossible with class-based components, but we started using HOC to do this.
    • With hooks, it makes you decouple what it does and how it looks.
    • Makes things like GraphQL code gen possible
    • Multiple pieces of state or functionality
    • Share commonly used functionality among projects and components

    10:31 - Reduction in code

    • Lifecycle methods were often redundant. useEffect offers a way to prevent the duplication that can happen with component did update and did mount. This gives you a way to say, “Hey, run this code when these things change.”

    13:30 - useEffect’s dependencies

    • These give you access to targeted control over side effects rather than just something changed.

    14:15 - Easier to grok

    • What happens? When? Where? It’s mostly in the hook.

    16:09 - Simplicity in usage

    • Thing, updateThing is more targeted than set state
    • Ref makes way more sense with useRef
      • String refs weren’t great, the function ref thing was obnoxious

    21:07 - Gripes about Hooks

    • Naming is kind of odd
      • Vue did a better job with the names
    Links
    • https://github.com/pmndrs/jotai
    • https://github.com/rehooks
    • https://twitter.com/youyuxi/status/1327328144525848577/photo/1
    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

    Sickpickisode - 2020 Web Developer Gift Guide Dec 02, 2020
    Show notes

    It’s an entire episode of Sick Picks! In this episode of Syntax, Scott and Wes talk about their 2020 developer gift guide!

    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.

    Show Notes

    03:17 - Home + Cooking

    • Cold Brew Maker
      • 1 Gal - https://amzn.to/3pcKkKM
      • 2 Quart - https://amzn.to/3eIV921
    • Nordic Ware Half Sheet / Quarter Sheet Pans - https://amzn.to/3pbCWit
    • Precut parchment - https://amzn.to/35dtWld
    • Gaffers Tape - https://amzn.to/3lfH7aG
    • Tineco Pure S12 - https://amzn.to/3kelPsX
    • Instant Read Thermometer - https://amzn.to/3k9VNHf
    • Tea Haus - https://teahaus.com/
    • Whetstone - https://amzn.to/32nYi2z
    • Re-usable Silicone Mats - https://amzn.to/35dtWld
    • Air Fryer - https://amzn.to/38uX4X1

    13:27 - Games

    • Baba Is You
    • Untitled Goose Game
    • Hades
    • Jackbox Party Pack

    17:16 - Tech

    • Headphones
      • Sony WH1000XM4 - https://amzn.to/2Ube8c8
      • Bose QC35 - https://amzn.to/3lrKrQp
      • Wyze Noise-Cancelling Headphones - https://wyze.com/wyze-headphones.html
    • USB-C Hub - https://amzn.to/3keljem
    • Black Camo Wicked Cushions - https://amzn.to/3eGQA8q
    • Mech Keyboard - https://www.keychron.com/products/keychron-k3-wireless-mechanical-keyboard?utm_source=navi%20to%20K3&utm_medium=navi%20bar&utm_campaign=navi%20to%20K3
    • Braided USB Cables
      • Lightning: https://amzn.to/2IkqLiT
      • USB-C: https://amzn.to/3lfrBeX

    25:24 - Smart Home

    • Wyze Cams - https://amzn.to/2UmPINf
    • Light Switches
      • Lutron Dimmer - https://amzn.to/2U7OBk2
      • Leviton Dimmer: https://amzn.to/3pbzaFZ
    • Google Nest Hub

    33:22 - Desk Stuff

    • Fatigue Mat - https://amzn.to/3eIXXw5
    • Rollerblade Gang Chair wheels - https://amzn.to/3nbNLPJ
    • MX3 Mouse - https://amzn.to/3lg8SQn
    • Wireless Charger Pad - https://amzn.to/36gIdNj
    • Anker USB charging Hub - https://amzn.to/3n7IGYV

    36:43 - Live Streaming / Sick WFH Setups

    • Elgato Stream Deck - https://amzn.to/35ehXnk
    • Elgato Camlink - https://amzn.to/3kih6Gl
    • Knockoff Camlink - https://amzn.to/3eIX0Ux
    • Husky Adjustable Desk: https://www.homedepot.com/p/Husky-62-in-Adjustable-Height-Work-Bench-Table-HOLT62XDB12/301810799
    • Neewer Dimmable Bi-Color LED Studio Key - https://amzn.to/32rYAVX
    • RGB LED - https://amzn.to/3kg1LWZ
    • Vivo Pneumatic Mic Arm - https://amzn.to/2Ube8c8

    49:07 - Fitness

    • Concept 2 Rower
    • Powerblocks
    • Cheap bands - https://amzn.to/35cZ1W4
    • Kettle Bells - https://amzn.to/3eFocnc

    51:44 - Clothes

    • https://www.dvlpr.io/
    • Naked and Famous Super Guy Jeans
    • https://huckberry.com/
    • https://shop.lululemon.com/p/men-joggers/Abc-Jogger/_/prod8530240?color=29283
    • Everlane Uniform Crewneck
    • Levis Denim Shirts: Barstow Western
    • Fjallraven Flannels
    Links
    • https://www.eufylife.com/
    Shameless Plugs
    • 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

    Hasty Treat - Writing Good Commit Messages Nov 30, 2020
    Show notes

    In this Hasty Treat, Scott and Wes talk about a system for writing good commit messages.

    Sentry - Sponsor

    If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

    Show Notes

    03:46 - What are conventional commits?

    • https://www.conventionalcommits.org/en/v1.0.0/

    04:55 - How do you keep track of all the details?

    • https://commitizen-tools.github.io/commitizen/
    • https://github.com/commitizen/cz-cli
    • https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits

    07:42 - How does it relate to SemVer?

    Links
    • https://github.com/conventional-changelog/conventional-changelog
    • https://github.com/netflix/unleash
    • Deno
    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 - Frameworks vs Libraries × Debugging × CSS Modules vs Styled Components × Resumes × Stress Management × More! Nov 25, 2020
    Show notes

    It’s another potluck! In this episode, Scott and Wes answer your questions about frameworks vs libraries, improving your debugging skills, building a component library, CSS modules vs styled components, writing a good resume, stress management, 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 errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

    Show Notes

    01:27 - How do you implement WebRTC? Please tell us more about online streaming, screen sharing, data flow.

    03:20 - Which JS library/framework do you think beginners might find the easiest to understand?

    05:06 - How do you deal with different case types between different systems in your project? For example, I store records in a Postgres database which typically uses snake_case and then I render them with React, where props are typically camelCase. Is it better to convert the cases back and forth between frontend and backend or just pick one case and use it everywhere?

    09:23 - My question is about the difference between a framework and a library. Should we have two separate words?

    12:39 - How can I work on improving both my generic problem-solving skills and my debugging skills? I feel like there have got to be some more proactive things I can do to improve in these areas.

    17:22 - I just listened to your podcast on making freelancing easier and enjoyed it. You talk about making your own component library. Do you have tips on how to store and manage a component library?

    21:39 - What projects do you use Rust for, and do you have any ideas where Rust might be the thing to do when talking web projects?

    29:10 - I’ve recently joined a great-paying full-time gig at a big enterprise-level company as a Senior Javascript Engineer (React, Node, etc). I’m humbled to be here - but at times the pace is slow, tickets are scarce, and I feel like I’m not able to really utilize or hone my skillset. I’ve been looking at potentially moving into contracting/agency work - the money seems comparable with the added benefit of new and exciting projects and having more control over them. Do you think contract work would be more fulfilling, or is crazy to leave a cushy job solely because I’m in a sense, bored?

    35:26 - I’m currently working on a Next.js project and trying to decide which CSS system to use. What is your take on CSS modules? I know you like styled components a lot, but since there is built-in support for CSS modules with scoped CSS, I find it hard to motivate bringing in styled components. Am I missing something?

    38:15 - Regarding Episode 290, you fielded a question regarding Angular and I appreciated your balanced response since I’m primarily an Angular developer at my job. If you could, would you please update the link to the Angular website to point to Angular.io (v10) instead of the AngularJS (v1) website?

    40:43 - I really need advice on how to write a good resume, or any tips you may have for getting noticed in the hiring process with only a couple years of experience. I have been applying to many jobs as a front-end developer but I seem to get no response EVER.

    47:17 - How do I dynamically assign subdomain/wildcard/slug dynamically during signup process with React and Node? (Like the way Freshbooks does — i.e tenant1.domain.com, tenant2.domain.com, etc.)

    48:44 - Wes, I’ve been taking your Mastering Gatsby course, and I’m loving the course so far. My only complaint would be I wish you added a module for CSS. I think it's just because I personally struggle with styling websites. Do either of you have any suggestions on how I can improve in that aspect of web dev?

    50:35 - For web developers just starting out in freelancing/building e-commerce sites — from a business perspective, do you recommend we first 1) just code and worry about business stuff later? or 2) go through the government paperwork and be a sole proprietorship? or 3) incorporate (though this costs more)?

    54:20 - What’s your approach for handling padding + margin with components?

    57:43 - How do you back up sensitive files that do NOT get added to source control (env files, for example)? I have off-site computer backups, and I have .env files on a small thumb drive on my keychain. What do you do?

    59:56 - Do you guys have stress management techniques? How do you cope with stressful situations at work, like unexpected tight deadlines?

    Links
    • Syntax 002: Webcam and audio access with WebRTC and getUserMedia()
    • Syntax 256: WebRTC and Peer-to-Peer Video Calling with Ian Ramzy
    • Daily.co
    • Twilio
    • Svelte
    • https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case
    • Master Gatsby
    • Syntax 292: How to Make Freelancing Easier
    • https://github.com/formium/tsdx
    • https://nx.dev/react
    • https://github.com/lerna/lerna
    • https://www.npmjs.com/package/babel-plugin-module-resolver
    • Deno
    • Rust
    • wasm-pack
    • https://rocket.rs/
    • Syntax 290: Potluck - Is Angular good? × Stencil.js × Self XSS × SVGs in React × Social Platforms for Devs × Project Handoff × Cleaning Knives × More!
    • Modern CSS Layouts
    • Modern CSS Design Systems
    • Digital Ocean App Platform
    ××× SIIIIICK ××× PIIIICKS ×××
    • Scott: Eating Out Loud: Bold Middle Eastern Flavors for All Day, Every Day: A Cookbook
    • Wes: Levi’s Barstow Western Shirt
    Shameless Plugs
    • Scott: Animating Svelte - Black Friday Sale: Sign up for the year and save 50%!
    • Wes: Master Gatsby - Black Friday Sale: All courses 50% 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 - Client vs Server Data Validation Nov 24, 2020
    Show notes

    In this Hasty Treat, Scott and Wes talk about client- and server-side validation, and what each is used for!

    Netlify - Sponsor

    Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.

    Show Notes

    02:49 - Wes’ story

    06:28 - What is the role of client-side validation?

    • Help the user input the correct data as they type it.
    • Show correct data in UI.
    • Show correct UI.
    • Just about all of these things are for the user’s benefit, and how they feel when using the site.

    11:10 - What is the role of server-side validation?

    • Validate that all the data is correct before it’s saved to the database
    • Security first and foremost

    15:03 - What process should a store follow to validate on the server?

    1. Check that correct types are coming in. Very easy with Graphql.
    2. Get current stock and price information from unique ids from the database.
    3. Confirm that this information is what the user is expecting — if the UI said the user will be charged $40, don’t charge them $50 just because of the updated info. In that case, send back to the user.

    17:17 - What do you do if you don’t want people messing with your React state?

    • @fvilers/disable-react-devtools
    • if (process.env.NODE_ENV === 'production') disableReactDevTools()
    • We do this on LUT. Why? Because it’s a deterrent.
    Links
    • uses.tech
    • Flipp App
    • GraphQL
    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 Run a Conference with Benjamin Dunphy Nov 18, 2020
    Show notes

    In this episode of Syntax, Scott and Wes talk with Benjamin Dunphy about running conferences — what to do, what not to do, and what makes a good online conference in a post-Covid world!

    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.

    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.

    Guests
    • Benjamin Dunphy
    Show Notes

    03:48 - How do you get started running a conference?

    10:05 - Which conferences have you run?

    18:05 - How do you get speakers?

    23:21 - What about paying speakers?

    28:26 - Speaker goody bags?

    32:40 - You started your own catering company?

    35:32 - How has Coronavirus affected the conference space?

    43:06 - Should online conferences try to replicate live conferences?

    Links
    • Reactathon
    • Jamstackconf
    • Epicodus
    • Meetup
    • Flutter
    • Lifted Plate
    • DevRelCon
    • EventLoop
    • Modern Web Summit
    • @Swizec
    • Sanity Review Changes
    • @tylermcginnis
    • Syntax 250: Scott Teaches Wes Svelte and Sapper
    ××× SIIIIICK ××× PIIIICKS ×××
    • Ben: Serverless Handbook for Frontend Engineers
    • Scott: Tineco Pure One S12
    • Wes: Chromecast
    Shameless Plugs
    • Ben:
      • EventLoop
      • Modern Web Summit
    • Scott: Animating Svelte - Sign up for the year and save 50%!
    • 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 - CSS Grid Masonry (Grid Level 3) Nov 16, 2020
    Show notes

    In this Hasty Treat, Scott and Wes talk about CSS Grid Level 3 — why it’s such a cool thing and why they’ve been waiting for it for so long.

    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:33 - The spec

    • https://drafts.csswg.org/css-grid-3/
    • https://twitter.com/wesbos/status/1320735900343668738

    06:10 - How it works

    • masonry-auto-flow: next;
      1. It first puts all the items that are explicitly placed onto the grid. Items that you have a set start/stop value for are first put down.
      2. Then it takes the next item that it to be placed and finds a spot for it. This is different because with CSS Grid you normally have to place the next item on the next row or column.
      3. grid-template-columns and grid-template-rows can now be marked as masonry and this specifies which axis will be masonry.

    09:06 - The implicit grid

    • https://drafts.csswg.org/css-grid-3/#%23implicit-grid
    • The implicit grid is formed in the same way as a regular grid container. However, it’s only used in the grid axis.
    • Interesting in a column situation (see images).

    13:25 - Thoughts

    • Power tools for layout in CSS — opens up a ton of possibilities and completes the functionality we use to dream of in CSS.
    Links
    • David DeSandro
    • https://metafizzy.co/
    • Chris Coyier
    • https://caniuse.com/
    • Isotope
    • Flickity
    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

    300th LIVE SHOW SPECTACULAR! Nov 11, 2020
    Show notes

    It’s the 300th episode of Syntax! To celebrate, Scott and Wes do a special live call-in episode with Syntax listeners.

    Sentry - Sponsor

    If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

    Netlify - Sponsor

    Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.

    Show Notes

    03:30 - How is this going to work?

    • Ask a Potluck Question
    • Do a Sick Pick
    • Take on a Stump’d Question
    • Do a Shameless Plug

    04:45 - Brad

    • https://bradgarropy.com/
    • Sick Pick: Rogue Fitness Weighted Vests
    • Shameless Plug: Murphy

    11:54 - Brittany

    • Shameless Plug: ZTM Academy
    • Andrei Neagoie

    16:43 - Jesse

    • Stump’d Question: What are portals in React?
    • Shameless Plug: codeSTACKr YouTube Channel
    • Shameless Plug: VS Code Hero Course - Use coupon code “Syntax” for discount

    23:44 - Henri

    • Shameless Plug: https://twitter.com/HenriHelvetica
    • Shameless Plug: JamstackTORONTO

    31:27 - Jason

    • Stump’d Question: What does “use strict” do and what are the benefits?

    36:48 - Spence

    • mdx-embed
    • https://github.com/PaulieScanlon/mdx-embed

    41:33 - James

    • Potluck Question: How do you keep people engaged in a workshop?
    • Stump’d Question: What is the difference between the postfix i++ and the prefix ++i increment operators?
    • Shameless Plug: YouTube for Developers
    • Shameless Plug: James Q Quick YouTube Channel

    54:24 - Austin

    • Potluck Question: Problems with ESLint, Prettier and VS Code playing nicely together
    • Shameless Plug: https://erickka.art/

    66:21 - Dave

    • Sick Pick: mmhmm
    • Stump’d Question: What is the difference between the + and ~ sibling selectors in CSS?

    78:56 - Gareth

    • Potluck Question: What do you think about the future of mobile development vs traditional mobile app development?
    • Sick Pick: https://darkreader.org/
    • Shameless Plug: Level Up Tutorials Discord

    89:51 - Ackzell and Lewis

    • Ackzell:
      • Sick Pick: JSConf Mexico
      • Shameless Plug: Ackzell YouTube Channel
    • Lewis:
      • Potluck Question: What is your daily routine like, and you do you decide to prioritize projects?
    Links
    • What Syntax 300 live on Twitch
    • Discord
    • Mux
    • React HLS Player
    • https://30secondsofinterviews.org/
    • https://dev.to/bdesigned/vscode-setup-with-eslint-and-prettier-1gek
    • https://madewithsvelte.com/mdsvex
    • OBS
    • Streamlabs
    • ESLint
    • Prettier
    • Missive
    Shameless Plugs
    • Scott: Level Up Pro - 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 - Bundlers in 2020 Nov 09, 2020
    Show notes

    In this Hasty Treat, Scott and Wes talk about the state of bundlers in 2020 — Rome, Snowpack, Parcel, Webpack, Rollup, Vite, 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.

    Show Notes

    02:39 - What is a bundler?

    • On the one hand, you can write HTML, CSS and JavaScript and open it in the browser
    • On the other hand, your build could be super complex

    03:24 - What goes into configuring a bundler?

    • Templating language you use (Jsx, Pug, Vue, etc.)
    • JavaScript you write and compile to:
      • ES6/7/8/9
      • Typescript
      • CoffeeScript
    • Polyfills
    • Environmental variables
    • CSS loading
    • Image compression
    • Asset Chunking
    • Tree shaking

    05:12 - Webpack

    • Hardest to learn, most used currently

    07:38 - Rollup

    • Scott’s pick as best option for most features vs ease of use
    • Very powerful
    • Mmmr, tree shaking, plugins, esm

    09:52 - Parcel

    • Scott’s simplicity winner pick
    • Easiest to get started with
    • It’s a bundler, but also a dev tool
      • Hot reload
      • Local server
    • Config is done via your package.json
    • Lots of plugins available

    12:01 - Npm, Yarn and Yarn 2

    • It’s a dependency installer rather than a bundler

    13:27 - Snowpack

    • Scott’s speed pick of the week
    • Uses ESM by default
    • Like Sonic after a triple shot of espresso
    • HRM
    • Perfect for dev builds, as well as production builds

    15:51 - Isobuild / Meteor

    • Scott’s underdog pick of the litter

    16:48 - Rome

    • Scott’s mystery pick of the week
    • New tool to do it all
    • Bundler, but also a linter

    17:54 - Deno

    • Linter
    • Typescript formatter
    • Bundler (bundle into a single .js file)

    20:44 - Let your tool take care of it

    • Gatsby (webpack)
    • Next.js (webpack)
    • Gridsome
    • Create React App
    • Vite (Rollup)
    • Broccoli.js
    Links
    • Babel
    • Gulp
    • Syntax 212: Pika Pkg
    • Fred Schott
    • Pika
    • Rust
    • Go
    • Software Engineering Daily: Deno and TypeScript with Elio Rivero
    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 73 74 75 76 77 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