App Store

Google Play

DK - Details page - Device banner - 894x1036

Nyd den ubegrænsede adgang til tusindvis af spændende e- og lydbøger - helt gratis

Lyt når som helst, hvor som helst 

Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

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

It’s another potluck episode in which Wes and Scott answer your questions! This month - thoughts on Typescript, e-commerce platforms vs custom, working for agencies, job-hopping 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.
 Vue.js In Action - Sponsor Vue.js in Action from Manning Publications is a great way to learn Vue.js. If you’re looking for a book that will teach you Vue.js from start to finish, this is the one. As a Syntax listener, you can get 40% off all their books and courses by visiting deals.manning.com/webdev and using the coupon code syntax40 at checkout.
 Show Notes 1:20
 How do you distinguish between normal and virtual pixels on high dpi devices. How do you call Pixels? Which tools do you use for optimizing Images?
 5:02
 What are your thoughts on TypeScript (and selfishly, I’d like to learn about using it with React)? Any temptation to try it out if you’re not already doing so? Why or why not? Any resources you’d like to share on TypeScript?
 8:35
 I have heard you guys say good things about Digital Ocean before, but am reading a lot of bad reviews about them on various websites. Are these just frustrated developers or is there any merit to these claims?
 12:48
 If you were to build an eCommerce store, given that your business requirements specify that custom functionality is needed, would it be smart to roll your own solution or use Magento/Shopify/Woocommerce? If the later, what is the developer experience like? Which has the greater ability to implement custom functionality for server and client side code?
 19:50
 I feel like I’m pretty “bos” at starting projects but so terrible at finishing them. As people who finish courses and projects all the time, what is your advice for getting to that finish line?
 23:32
 Could you please explain how you organize your files? What is the folder structure you use for both your projects and other documents/videos and stuff?
 31:38
 You guys mention working for “agencies” in the past. As a freelance web developer, what’s the best way to find these agencies, and to be employed by them? Also, can you explain what “agencies” are?
 38:14
 I once read an interview Wes gave in which he mentioned that frequently changing jobs is the best way to get salary increases. Do you both believe that to be true? Is job-hopping a bad thing? Is the criticism of it justified?
 41:53
 If I choose to use Next.js, does that mean I won’t be able to use new React features like hooks and suspense until/if the Next.js team implements those?
 43:12
 When do you use and when do you use to wrap your many returned components from render()?
 Links Devon Govett tweet about Typescript
 Digital Ocean
 Magento
 Shopify
 WooCommerce
 Reaction Commerce
 Snipcart
 Next.js
 Gatsby.js
 True Grit Texture Supply
 ××× SIIIIICK ××× PIIIICKS ××× Scott: Undertale

 Wes: Ghostly Pixels

 Shameless Plugs Scott’s Level Up Pro
 Wes’ YouTube Channel
 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 - Typescript × E-commerce platforms × Job-hopping × Working for agencies × More

Want to level up your web dev game? Scott and Wes share their top tips for going deeper with your learning—covering everything from reading the docs and source code to finding mentorship and engaging with the community.
 Show Notes 00:00 Welcome to Syntax!
 02:48 Brought to you by Sentry.io.
 03:54 How do you go deeper?
 04:23 Pick a project and build it.
 06:36 Read the docs. Svelte Docs.
 
 09:07 Read the source.
 11:19 Consume content: blogs, conference talks, etc. Dot Conferences on YouTube.
 GitNation JavaScript Conferences.
 
 16:24 Discord and Reddit.
 19:31 Get mentorship and ask questions.
 Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
 Wes: X Instagram Tiktok LinkedIn Threads
 Scott: X Instagram Tiktok LinkedIn Threads
 Randy: X Instagram YouTube Threads

858: How to Go Deeper With Your Learning

Scott and Wes break down the tech behind video streaming for the web, from transcoding and variants to CDN and access control. They also share insights on tools like Mux, Cloudflare Stream, and ffmpeg, plus tips for managing bandwidth, hosting, and costs.
 Show Notes 00:00 Welcome to Syntax!
 00:50 Brought to you by Sentry.io.
 01:15 The history of video streaming.
 02:10 How video streaming works: The Tech.
 03:54 How video streaming works: Transcoding.
 06:37 How video streaming works: Variants. ffmpeg.
 Wes’ R2-video-streaming.
 Wes’ Transcoding.
 YT-DL.
 YT-DLP.
 
 13:13 Dynamic ad insertion.
 14:29 Bandwidth and hosting. Mux.
 
 18:03 Cloudflare.
 19:13 The costs. Wes Bos Tweet Cloudflare TOS.
 Steve Tenuto tweet.
 
 25:39 Media players. Media Chrome.
 
 29:42 CDN.
 32:04 Access control.
 33:35 Solutions. Mux.
 Cloudflare Stream.
 Bunny.net Stream

 AWS Media Convert.
 Cloudinary.
 Bitmovin.
 
 41:55 Some other features.
 45:47 Sick Picks & Shameless Plugs.
 Sick Picks Scott: Anker MagGo.
 Wes: PolyCapture.
 Shameless Plugs Scott: Syntax on YouTube.
 Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
 Wes: X Instagram Tiktok LinkedIn Threads
 Scott: X Instagram Tiktok LinkedIn Threads
 Randy: X Instagram YouTube Threads

859: Streaming Video in 2025

Wes and Scott talk with Zack Jackson about Module Federation, and the innovative ways it streamlines collaboration across large teams and complex applications. Zack also dives into simplifying microfrontends, optimizing builds with Rspack, and his work at ByteDance.
 Show Notes 00:00 Welcome to Syntax!
 00:48 Zach background and role at ByteDance
 03:10 ByteDance’s web and native apps How ByteDance Became the World’s Most Valuable Startup

 Lynx

 ByteDance GitHub

 Coze

 Lark

 MarsCode

 
 06:48 What is Module Federation? Zephyr Cloud

 
 15:49 Evolution from V1 to V2 of Module Federation
 24:47 When to consider Module Federation
 29:46 How would you publish a utils package in Module Federation?
 32:59 How would you do a major upgrade?
 36:36 Brought to you by Sentry.io

 37:01 Who owns the update process?
 39:40 Handling multiple frameworks
 42:10 ModernJS and Meta frameworks ModernJS

 Rspress

 
 47:20 Does ByteDance have its own JavaScript runtime? NAPI

 
 50:02 Why Zack built Rspack Rspack

 Rsbuild

 
 58:15 The future of Rspack and custom bundlers Unpack

 
 01:04:24 Module Federation’s major features
 01:07:29 Sick Picks & Shameless Plugs
 Shameless Plugs Zack: Zephyr Cloud

 Midscene.js

 
 Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
 Wes: X Instagram Tiktok LinkedIn Threads
 Scott: X Instagram Tiktok LinkedIn Threads
 Randy: X Instagram YouTube Threads

860: Module Federation Microfrontends with ByteDance’s Zack Jackson

Scott and Wes dive into the world of local data storage, breaking down the pros and cons of Sqlite, LocalStorage, SessionStorage, Cookies, and IndexedDB. They cover real-world use cases like user settings, offline data, and auth tokens, while sharing their favorite tools and strategies for keeping your data fast and secure.
 Show Notes 00:00 Welcome to Syntax!
 00:30 Brought to you by Sentry.io.
 01:43 Why store data locally. 01:55 User preferences and settings.
 02:50 Not logged in state (shopping carts, etc).
 03:30 Data for faster loading.
 03:51 Privacy concerns.
 04:25 Large files or drafts.
 05:50 Auth tokens.
 
 07:08 Where to store data. 07:11 Cookies.
 07:48 Local storage.
 09:15 Session storage.
 10:35 IndexedDB.
 
 12:15 BYOJS Storage.
 13:41 SQlite via WASM.
 14:12 Penalties of SQLite in browser via WASM.
 15:29 PGLite.
 16:23 Dealing with migrations.
 16:55 The advantages of the approach.
 18:42 Dexie.
 19:59 Patch messages.
 21:25 A few options. TinyBase Docs.
 Local First Web.
 
 Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
 Wes: X Instagram Tiktok LinkedIn Threads
 Scott: X Instagram Tiktok LinkedIn Threads
 Randy: X Instagram YouTube Threads

861: Local Data: Sqlite, LocalStorage, Session, Cookies and IndexDB

Is Svelte becoming React? Scott and Wes explore the exciting updates in Svelte 5, including Runes, Snippets, odd font choices, and performance benchmarks, while discussing custom event updates, migration tips, and potential performance gains.
 Show Notes 00:00 Welcome to Syntax! Scott’s Svelte5 Overview.
 
 01:27 Brought to you by Sentry.io.
 02:06 What’s new in Svelte 5? 02:13 Runes. 04:47 $state

 07:00 $state.snapshot
 11:47 $derived

 12:46 $derived.by
 15:41 $effect

 17:24 $effect.pre
 18:05 $effect use cases.
 22:20 $props

 24:57 Binding state.
 27:15 $inspect vsode-wrap-svelte.
 
 28:46 $inspect(…).with
 
 30:42 Snippets.
 34:22 Events now onclick instead of on:click.
 36:09 Custom events now just props instead of createEventDispatcher.
 
 36:31 Serif Font on website.
 40:01 Performance. Benchmarks Doc.
 Benjamin McCann Tweet.
 
 46:41 Is Svelte becoming React?
 49:21 Migration.
 51:41 What’s next and wish list for Svelte.
 57:12 Sick Picks & Shameless Plugs.
 Sick Picks Scott: Dragon Quest 3.
 Wes: Dresscode.dev.
 Shameless Plugs Scott: Syntax on YouTube.
 Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
 Wes: X Instagram Tiktok LinkedIn Threads
 Scott: X Instagram Tiktok LinkedIn Threads
 Randy: X Instagram YouTube Threads

862: Svelte 5 Is Here!

Scott and Wes look back at 2024 and share highlights from a big year for Syntax and the web dev world. They review their 2024 predictions to see what they got right (and wrong), and break down the major moments in web development from CSS improvements to AI editors and beyond.
 Show Notes 00:00 Welcome to Syntax!
 01:30 Changes to the Syntax podcast.
 05:56 What happened this year? 06:07 React.
 06:36 Solid Start.
 07:04 Tanstack Start.
 07:43 Remix
 09:42 AI Editors.
 11:53 Vite 6.
 14:02 Bluesky.
 19:52 CSS.
 
 22:17 What did we do? 22:21 React Miami. React Miami Episode.
 
 22:26 JSNation Amsterdam.
 23:55 JSNation US + React Summit.
 24:57 Terminal Feud.
 26:28 Laravel + Terminal basketball game.
 27:02 Syntax San Francisco meetup.
 27:23 GitHub Universe.
 28:07 FITC.
 28:38 153 Syntax Episodes + Video.
 
 29:32 Our 2024 Predictions Reviewed. 29:46 Types in JS will have real movement.
 31:29 Temporal API will ship in 1 browser.
 32:50 Perf tooling gets easy for everyone to understand.
 33:29 CSS continues to get better where you need less JS.
 34:25 Svelte v5 is very fast.
 34:38 The year of the server in frameworks.
 35:28 Astro is going to have a good year.
 36:13 React server components.
 37:03 Remix moves away from page-based loaders, to component loaders.
 37:18 Hono will become more ubiquitous.
 38:28 We will see a route matching Proposal move ahead.
 39:23 Bun releases full node compat.
 40:42 We will see a new Linter + formatter entirely replace.
 42:16 New TypeScript typechecker. Ezno.
 
 43:40 Lightning CSS pops - or does it?
 45:10 You’ll hear more about Rspack and Turbopack.
 45:51 Vite isn’t going to release anything big in 2024.
 46:24 Relative color will land in all major browsers.
 48:14 CSS contrast-color will land in chrome.
 48:48 Scroll animation landing in 2 browsers.
 50:03 The year of CSS discovery.
 51:09 Safari will Ship 3 missing PWA Support.
 52:11 Firefox usage will continue to slip.
 56:53 Paid Arc features.
 57:14 More XR web experiences as Apple releases in Vision Pro.
 59:55 AI Tooling.
 01:00:57 Small Models that run in the browser.
 01:01:38 Apps get Sherlocked by OpenAI.
 01:02:04 On prem corporate AI.
 
 01:04:49 Sick Picks + Shameless Plugs.
 Sick Picks Scott: TCGPocket App.
 Wes: Huge Bag of Croc Charms
 Shameless Plugs Scott: Syntax on YouTube.
 Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
 Wes: X Instagram Tiktok LinkedIn Threads
 Scott: X Instagram Tiktok LinkedIn Threads
 Randy: X Instagram YouTube Threads

863: 2024: A Year in Review

Scott and Wes ring in the new year, answering listener questions on the rise of durable objects, handling tricky tab state in e-commerce apps, and their top picks for headless CMS. They also chat about the future of CSS, deployment platforms, and whether Syntax beanies might finally be a thing!
 Show Notes 00:00 Welcome to Syntax!
 00:52 Brought to you by Sentry.io.
 03:10 What Are Durable Objects?
 08:25 CSS Anchor Positioning: Cross-Browser Support Update. Implement CSS Anchor Positioning.
 
 12:48 Freelancers: UX and Design Skills vs. Functional Expertise.
 16:47 Choosing the Best Deployment Platform. Syntax Episode 615.
 
 20:49 Making Websites WCAG Compliant. Polypane.
 
 22:35 Managing Tab State in Complex Apps.
 28:43 Will CSS Ever Be Complete?
 33:21 When Will Syntax Beanies Drop? Syntax Swag Store.
 
 35:21 The Best Headless CMS for a Tech Blog.
 42:15 From Many Packages to Monolithic Frameworks.
 46:41 Sick Picks + Shameless Plugs.
 Sick Picks Scott: The Sheet with Jeff Marek.
 Wes: 28” 4K+ BenQ Programming Monitor.
 Shameless Plugs Scott: Syntax on YouTube.
 Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
 Wes: X Instagram Tiktok LinkedIn Threads
 Scott: X Instagram Tiktok LinkedIn Threads
 Randy: X Instagram YouTube Threads

864: Durable Objects × Tab State Hacks × Headless CMS Choices + More

Scott and Wes challenge each other’s knowledge on everything from array sorting quirks to browser isolation types in a rapid-fire trivia format. They dive deep into performance optimizations, TypeScript type safety, and HTML best practices while uncovering surprising edge cases that every web developer should know about.
 Show Notes 00:00 Welcome to Syntax!
 00:43 Brought to you by Sentry.io.
 01:23 Question 1: Array Sort Default Behavior.
 03:24 Question 2: Splitting Into Individual Words & Characters.
 06:06 Question 3: NodeJS Stream Backpressure.
 09:07 Question 4: Custom Middleware Rate Limiting.
 13:00 Question 5: Transform Function Property Changes.
 15:18 Question 6: TranslateZ & Will-Change Performance.
 17:52 Question 7: Table Structure Best Practices.
 20:23 Question 8: Dialog vs Div with Dialog Role.
 23:21 Question 9: TypeScript Unknown vs Any & Never.
 26:31 Question 10: Response Type Safety in TypeScript.
 29:48 Question 11: Browser Isolation Types.
 32:54 Question 12: HTML Quirks Mode Behavior.
 Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
 Wes: X Instagram Tiktok LinkedIn Threads
 Scott: X Instagram Tiktok LinkedIn Threads
 Randy: X Instagram YouTube Threads

865: CSS Performance × Rate Limiting × Array Sort Behavior - STUMP'd

Scott and Wes look into their crystal ball to predict what’s coming in web development next year. From the rise of on-device AI to the vanilla CSS comeback, Bun’s big moves, and React’s evolution, this episode is packed with bold predictions and hot takes!
 Show Notes 00:00 Welcome to Syntax!
 02:00 Brought to you by Sentry.io.
 03:09 The agenda.
 03:40 Temporal Javascript api will ship in Safari and Chrome. Temporal Proposal.
 
 06:23 On device AI. WebGPU API

 Dawn Native WebGPU

 
 10:26 Models will plateau. Bolt.new, v0, Lovable.dev.
 
 13:40 Web Awesome will become the most used web components library. Web Awesome.
 
 15:57 We will be using more web components.
 16:59 A push towards the ‘standard stack’.
 19:38 We can really use relative color.
 21:39 Vanilla CSS comeback.
 23:35 A complete Mixins / Functions API for CSS.
 24:27 Conditionals will ship in all browsers.
 25:50 People will still make vertical centering jokes.
 27:08 VSCode will be feature parity with Cursor.
 28:22 Framework choice will matter less with AI tools.
 29:12 OpenAI will launch a browser. Dupe.com.
 Buy Now! The Shopping Conspiracy.
 Krazy Binz.
 
 37:18 React will drop Babel. BabelJS.
 
 38:05 React Server Components will pop.
 39:46 Remix will relaunch as something entirely different.
 41:11 React Native will have it’s time.
 42:06 Svelte will get component-based islands or data loading.
 44:19 Server Runtimes, Bun will continue to do non-standard, lovable things.
 44:44 Bun will release a PAS to compete with NPM, Vercel, and Vite.
 46:06 Laravel will release a CMS.
 47:57 Vite will stay king.
 48:03 Rolldown ships in the next version of Vite. Rolldown.
 Statamic.
 
 49:35 Sick Picks & Shameless Plugs.
 Sick Picks Scott: PHILIPS A19 Ultra Definition Dimmable Light Bulb.
 Wes: Stats App.
 Shameless Plugs Scott: Syntax on YouTube.
 Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
 Wes: X Instagram Tiktok LinkedIn Threads
 Scott: X Instagram Tiktok LinkedIn Threads
 Randy: X Instagram YouTube Threads

866: 2025 Web Development Predictions

In this Hasty Treat, Scott and Wes talk about tips for writing good CSS.
 Sizzy - Sponsor Sizzy - The browser made for developers and designers. Stop manually resizing your browser window and switching between devices so you can test responsive design. Speed up your workflow by developing and previewing your website on multiple devices at once. Sizzy includes powerful features and plugins that will help you take your web development game to the next level. Sizzy.co.
 Show Notes 4:08 - Use a system
 4:50 - Use overrides and cascading
 Embrace the cascade
 Don’t rewrite the same CSS over and over again
 Understand why scoping is good
 9:07 - Nail down typography early
 You can always revisit if it isn’t what you need
 10:36 - Pick a pattern and stick to it
 BEM
 Functional CSS
 CSS in JS
 14:39 - Don’t style based on element type (kind of) — a class should describe the component
 17:09 - Good naming techniques
 Describe what it is, not what it looks like
 Thing ThingChild ThingChild-modifier
 
 
 Scale sizes (e.g. s, m, l, xl)
 21:43 - Other tips
 Group like CSS together
 Chunk into different files
 Write good comments
 CSS properties FTW
 Links Stylus

 Webpack

 Parcel

 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 - Tips For Writing Good CSS

Lyt når som helst, hvor som helst

Other podcasts you might like ...