897: Making Your App Feel Faster Than It Really Is

Syntax - Tasty Web Development Treats

Player FM - Internet Radio Done Right

4,124 subscribers

Web Development

הוסף לפני eight שנים

תוכן מסופק על ידי Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers. כל תוכן הפודקאסטים כולל פרקים, גרפיקה ותיאורי פודקאסטים מועלים ומסופקים ישירות על ידי Wes Bos and Scott Tolinski - Full Stack JavaScript Web Developers או שותף פלטפורמת הפודקאסט שלהם. אם אתה מאמין שמישהו משתמש ביצירה שלך המוגנת בזכויות יוצרים ללא רשותך, אתה יכול לעקוב אחר התהליך המתואר כאן https://he.player.fm/legal.

TED Health

1
My mission to change the narrative of mental health | Glenn Close 13:44

לפני 24 weeks13:44

הפעל מאוחר יותר

רשימות

לייק

אהבתי

13:44

Legendary actor and mental health advocate Glenn Close is on a quest to change how we think about mental health, starting with her decision to speak out about her own family's struggles — a brave choice considering the stigma that pervades the topic. This week, we're revisiting this sweeping conversation with TEDWomen curator Pat Mitchell, where Close shares the inspiration behind the advocacy group she founded to combat the crisis, underscoring the transformative power of community and the critical need for comprehensive mental health care systems. Want to help shape TED’s shows going forward? Fill out our survey ! Become a TED Member today at https://ted.com/join Hosted on Acast. See acast.com/privacy for more information.…

לפני שנה 35:03

MP3•בית הפרקים

Show Notes

00:00 Welcome to Syntax!
01:12 Brought to you by Sentry.io.
02:34 Mousedown or pointerdown events.
06:00 UI animations should be fast.
08:00 Animations should not block interaction.
08:20 Animations should be cancellable / reversible.
10:50 Optimistic UI.
12:37 Local Data.
13:36 Delay loading indicators.
14:40 Page loading indicators.
15:47 Preload on hover.
17:13 Calculate mouse trajectory.
18:51 Full page spinner on every change.
20:04 Pixelated spinners.
20:23 Skeleton loaders.
23:43 Photo frames.
25:52 Search on input instead of search on click.
26:46 Progress loaders than move in between steps.
27:31 Community submissions.

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

914 פרקים

#Web Development #Software Development #Tech News #Webdevelopment #Wes Bos #Scott Tolinski - Full Stack JavaScript Web Developers #News #Tech #HTML #JavaScript #CSS #HTML5

897: Making Your App Feel Faster Than It Really Is

Syntax - Tasty Web Development Treats

4,124 subscribers

published לפני שנה

שתפו

MP3•בית הפרקים

Show Notes

00:00 Welcome to Syntax!
01:12 Brought to you by Sentry.io.
02:34 Mousedown or pointerdown events.
06:00 UI animations should be fast.
08:00 Animations should not block interaction.
08:20 Animations should be cancellable / reversible.
10:50 Optimistic UI.
12:37 Local Data.
13:36 Delay loading indicators.
14:40 Page loading indicators.
15:47 Preload on hover.
17:13 Calculate mouse trajectory.
18:51 Full page spinner on every change.
20:04 Pixelated spinners.
20:23 Skeleton loaders.
23:43 Photo frames.
25:52 Search on input instead of search on click.
26:46 Progress loaders than move in between steps.
27:31 Community submissions.

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

914 פרקים

#Web Development #Software Development #Tech News #Webdevelopment #Wes Bos #Scott Tolinski - Full Stack JavaScript Web Developers #News #Tech #HTML #JavaScript #CSS #HTML5

Minden epizód

Syntax - Tasty Web Development Treats

1
910: If Statements in CSS? 24:38

לפני 3 ימים24:38

24:38

Wes and Scott talk about the new If statements in CSS, breaking down how they work, why they matter, and when to use them. They explore use cases, syntax quirks, and how this feature pushes CSS closer to true conditional logic—no JavaScript required. Show Notes 00:00 Welcome to Syntax! 01:30 Brought to you by Sentry.io 02:37 CSS If statements in action CSS if() functions & reading-flow (in Chrome 137) CodePen - If with style without attr 09:08 Advanced examples and the attribute function CodePen - CSS If() Themes 13:43 Mixing If statements with media queries CodePen - CSS If() Mixed Logic 16:54 Can’t this be done with classes? 18:16 The future of CSS: declarative APIs CSS Battle LIVE! in Denver | Switch Edition 21:10 Is CSS now a programming language? 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…

Syntax - Tasty Web Development Treats

1
909: Handling and Throwing Errors 39:06

לפני 5 ימים39:06

39:06

We break down how to properly throw, catch, and log errors in JavaScript and TypeScript. They cover client-side and server-side strategies, using tools like Sentry, and how to handle errors without taking down your whole app. Show Notes 00:00 Welcome to Syntax! 01:19 Error terminology. 01:42 Thrown and catching. 03:01 What’s in an error. 04:09 Name and message. 04:42 Stack. 07:12 Node system errors. 07:34 Messages: strings, objects, or custom errors. 08:19 Throwing errors. 12:01 Promise errors. 12:10 Try catch block, .catch(). 14:13 Using awaited-to. 15:10 Finally. 16:29 promise.try() 17:14 Re-throwing errors. Error Cause 18:12 Client-side errors. 18:15 Catching at different levels. 18:51 Displaying errors. 21:59 Transforming server errors into client errors. 24:12 Error boundaries. 25:26 Server errors. 26:10 JSON API. 27:41 HTTP response codes. 30:09 Logging and solving errors. 31:16 Proudly supported by Sentry.io . Logging within Sentry 36:16 TypeScript and errors. 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…

Syntax - Tasty Web Development Treats

1
908: Storybook Has Evolved w/ Jeppe Reinhold 50:13

לפני 10 ימים50:13

50:13

Wes and Scott talk with Jeppe Reinhold about Storybook 9’s powerful new features—including drastically reduced bloat, seamless Vite integration, and next-level component testing. They dive into visual regression testing, accessibility, performance, and best practices for writing robust, isolated UI components developers can actually enjoy testing and documenting. Show Notes 00:00 Welcome to Syntax! 01:40 What is Storybook? 03:48 How Storybook makes component design easier 04:41 Vite integration and compatibility with other tools Vite webpack RSpack 06:50 Storybook’s significantly smaller bundle size e18e polka 13:31 Upgrading to Storybook 9 17:34 Testing components with Storybook Vitest 19:51 How do you write a component “story”? 24:29 Brought to you by Sentry.io 24:54 How visual testing works 28:38 How Storybook makes money 29:33 Best practices for component design 32:24 Mocking and testing strategies 34:49 Accessibility testing 40:51 Add-ons and future features 44:43 Storybook’s documentation 46:33 Sick Picks + Shameless plugs Sick Picks Jeppe: JBL Boombox 3 Wi-Fi Shameless Plugs Jeppe: chromatic 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…

Syntax - Tasty Web Development Treats

1
907: Wes’ New Site: Gatsby → React Server Components 44:39

לפני 12 ימים44:39

44:39

Wes rebuilt his personal site from Gatsby to a modern stack using Waku, React Server Components, and Cloudflare Workers — all while keeping the same design. Scott and Wes break down the pain points with Next.js, MDX, image handling, caching, and the custom setup that now powers a blazing-fast blog. Show Notes 00:00 Welcome to Syntax! 01:03 Barcelona Conference. 04:09 Brought to you by Sentry.io . 04:33 Existing stack, goodbye to Gatsby. 06:11 New stack, the goals for moving. 06:56 So what is the new stack? 08:32 Challenges with NextJS. 08:58 Problems with plugins. 09:30 Problems with dynamic imports. 10:21 Problems with Cloudflare deployment. 12:37 Landing on Waku. 13:59 Hot Tips functionality updates. 16:30 Blog Posts + JavaScript Notes. 17:09 Moving from Gatsby. 19:03 Page speeds. 19:29 Removing nav resizing process. 21:03 Writing custom MDX plugins. 23:28 Hosting. 24:08 Why is the build so fast? 28:01 Pricing. 32:25 Caching. 34:49 Migration errors. 36:37 CSS. 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…

Syntax - Tasty Web Development Treats

1
906: Tech Startups and Raising Money with Dan Levine (Vercel, Sentry, Mux…) 56:58

לפני 17 ימים56:58

56:58

Wes and Scott talk with VC Dan Levine about how developers can raise venture capital, what investors look for in early-stage startups, the realities of bootstrapping vs. fundraising, and why great ideas often start as simple side projects. Show Notes 00:00 Welcome to Syntax! 00:55 Dan’s background and career 03:10 Is it common for tech investors to come from a tech background? 04:40 How can developers raise money? 08:35 What investors look for 12:39 How much funding is enough? 15:41 Are founders working with multiple investors? 18:26 What can you use the money for? 22:49 How much influence do investors have in the business? 29:56 Brought to you by Sentry.io 29:56 How involved are VCs in the business? 34:22 How do you know a startup is in trouble—and what can you do about it? 38:56 How much of the company do investors own? 40:43 What’s the endgame for investors? 44:02 How do acqui-hires work? 46:29 Is the AI space a real opportunity or just hype? 53:22 Sick Picks + Shameless Plugs Sick Picks Dan: Dandelion Chocolate Jules Pizza Shameless Plugs Dan: Linear 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…

Syntax - Tasty Web Development Treats

1
905: You Should Learn Nuxt! 27:37

לפני 19 ימים27:37

27:37

CJ steps in for Scott and joins Wes to share his experience working with Nuxt, from routing and data fetching to the pros and cons of the framework. They break down the Nuxt ecosystem, directory structure, and how it handles server routes and modules. Show Notes 00:00 Syntax Meetup ! 00:26 Welcome to Syntax 01:21 The deal with Nuxt. CJ’s Nuxt Course . 02:51 Why do you like Vue? 04:52 Brought to you by Sentry.io . 05:17 Routing with Nuxt. h3 - The Web Framework for Modern JavaScript Era . Nuxt Guides . 06:12 Built on Nitro. 06:49 The Nuxt Ecosystem. 07:52 API Route Support. 08:15 Nuxt Directory Structure. 09:09 Does Nuxt do too much for you? 11:15 Data fetching in a Nuxt app. 13:25 RPC, Form Actions, Server Actions? 15:00 Nuxt Server Folder Hastle. 15:57 useFetch Hook. CJ’s Nuxt Crash Course . 17:29 Core Modules and Community Modules? Nuxt Modules . shadcn-nuxt . @nuxt/ui . DaisyUI . Pinia . 21:17 Nuxt Hosting. Deploy . hub.nuxt . 23:59 Anything you don’t like? 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…

Syntax - Tasty Web Development Treats

1
904: React vs Svelte × Windsurf Worth $3B × Typescript as Const × Layout Shift Tricks × More 51:14

לפני 24 ימים51:14

51:14

In this potluck episode of Syntax, Wes and CJ answer your questions about OpenAI’s $3B Windsurf acquisition, the evolving role of UI in an AI-driven world, why good design still matters, React vs. Svelte, and more! Show Notes 00:00 Welcome to Syntax! Devs Night Out 02:35 OpenAI acquires Windsurf for $3B Windsurf Ep 870: Windsurf forked VS Code to compete with Cursor. Talking the future of AI + Coding 05:20 What is the future of UI now that AI is such a heavy hitter? 08:45 Handling spam submissions on websites Cloudflare Turnstile 14:18 Duplicating HTML for desktop and mobile websites? 17:03 Is it okay to use a JSON file for simple website data? 19:04 How to handle anonymous and duplicate users Better-Auth 21:55 Working with TypeScript Object.keys() and “any” vs “@ts-ignore” 25:51 Brought to you by Sentry.io 26:38 What is the difference between React and Svelte? 30:24 How should you name your readme file? 31:55 How do you find time to refactor code? 35:20 Best practices for testing responsiveness Polypane 39:19 Avoiding layout shift with progressive enhancement 46:56 Sick Picks + Shameless Plugs Sick Picks CJ: Portable Chainsaw Wes: White Lotus Shameless Plugs CJ: Nuxt Wes: Full Stack App Build | Travel Log w/ Nuxt, Vue, Better Auth, Drizzle, Tailwind, DaisyUI, MapLibre 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…

Syntax - Tasty Web Development Treats

1
903: Fork Yeah! Microsoft open sourcing Copilot 57:42

לפני 26 ימים57:42

57:42

Scott and Wes are joined by Erich Gamma, creator of VS Code, and Kai Maetzel, Copilot Lead, to share some big news about the future of VS Code and Copilot. They discuss what it means for developers, how AI is shaping the future of coding, and why staying open to the community is key. Show Notes 00:00 Welcome to Syntax! 01:00 The inception of VS Code. 02:49 VS Code adoption. 04:31 Brought to you by Sentry.io . 04:55 Syntax Denver Meetup ! 05:19 The big announcement. 06:25 The current state of Copilot and VS Code. 08:31 The challenges with LLMs running outside of the codebase. 09:31 How to make a business case for AI. 10:47 The maturing of the AI landscape. 13:01 The limitations of extensions. 14:06 Open source vs closed source. 14:49 Copilot’s context is public. 19:23 Is context language-specific? 21:23 How does this affect paid Copilot features? 23:27 Secrets of Copilot’s server-side. 28:36 What will be open and what will not? 29:03 Is Copilot’s UI influenced by VS Code forks? 31:31 Maintaining VS Code identity in forks. 33:07 What does open-sourcing GitHub Copilot mean for Cursor and Windsurf? 38:42 Were you surprised to see VS Code forks? 40:03 Are other extensions able to tap into the AI offerings? 43:20 There’s work to be done. 44:13 The timeline. 45:39 Simulation Tests (S Tests). 48:07 How to test LLMs. 49:10 The future of software development with AI. 52:47 What’s your favorite model? 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…

Syntax - Tasty Web Development Treats

1
902: Fullstack Cloudflare with React and Vite (Redwood SDK) 46:53

לפני 4 weeks46:53

46:53

Wes talks with Peter Pistorius about RedwoodSDK, a new React framework built natively for Cloudflare. They dive into real-time React, server components, zero-cost infrastructure, and why RedwoodSDK empowers developers to ship faster with fewer tradeoffs and more control. Show Notes 00:00 Welcome to Syntax! 00:52 What is RedwoodSDK ? 04:49 Choosing openness over abstraction 08:46 More setup, more control 12:20 Why RedwoodSDK only runs on Cloudflare 14:25 What the database setup looks like 16:15 Durable Objects explained – Ep 879: Fullstack Cloudflare 18:14 Middleware and request flow 23:14 No built-in client-side router? 24:07 Integrating routers with defineApp 26:04 React Server Components and real-time updates 29:53 What happened to RedwoodJS? 31:14 Why do opinionated frameworks struggle to catch on? 34:35 The problem with Lambdas 36:16 Cloudflare’s JavaScript runtime compatibility 40:04 Brought to you by Sentry.io 41:44 The vision behind RedwoodSDK 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…

Syntax - Tasty Web Development Treats

1
901: JS News: New React & Svelte APIs, RSC Updates, Redwood and Storybook 38:43

לפני 5 weeks38:43

38:43

Scott and Wes break down the latest in JavaScript news, including new async patterns in Svelte, React Server Component tooling with Parcel, and Redwood’s push into Cloudflare with its new SDK. They also cover what’s new in Storybook 9 Beta, from visual testing to a sleeker, lighter build. Show Notes 00:00 Welcome to Syntax! 02:50 Brought to you by Sentry.io . 03:37 Syntax Meetup ! 04:09 React View Transitions . 08:58 addTransitionType. 11:18 Activity API. Offscreen Renamed to Activity . 14:22 Maintaining state in search queries. 16:29 Asynchronous Svelte . Playground . 19:04 Svelte Boundary. 25:13 Parcel RSC . 27:15 Redwood SDK . 30:55 Storybook 9 Beta . 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…

Syntax - Tasty Web Development Treats

1
900: 13 New CSS Features You Can Start Using Today 57:40

לפני 5 weeks57:40

57:40

Syntax - Tasty Web Development Treats

1
899: GSAP: Killer Web Animations With Cassie Evans 57:02

לפני 6 weeks57:02

57:02

Scott and Wes sit down with Cassie Evans of GSAP to talk all things animation—from SVGs and scroll timelines to GSAP’s new rebrand and exciting features. They also dig into performance, plugins, and what makes GSAP such a powerful tool for web developers. Show Notes 00:00 Welcome to Syntax! 00:59 What is GSAP ? Cassie Codes . 01:53 GSAP Rebranding. 04:44 GSAP under the hood. 05:29 The big announcement ! 07:19 GSAP Showcase . 11:01 Brought to you by Sentry.io . 11:26 Why is GSAP easier for animations? GSAP Docs . 12:38 Animating with SVGs. 13:33 The love of SVG. 14:55 GSAP is performant. 16:06 Gotchas to watch out for. 18:12 Does GSAP work with canvas? 19:02 What GSAP projects are you most proud of? 20:30 Does it play nice with web frameworks? GSAP with React . 22:32 What are you excited about in CSS right now? Scroll Timeline . 24:27 Will any of these make their way into GSAP? 26:31 Timelines . 29:24 Building animations with timelines. 34:55 What are the best GSAP plugins? Split Text spanran-wrap . Physics 2D Plugin . 38:44 GSAP docs and philosophy. 39:50 Scrubbing animations by frame. 41:09 GSAP Video Exporter . 41:45 Animating with JavaScript. 45:19 JavaScript in unconventional applications. 47:56 Is there anything missing in web tech? 50:53 What about AI in GSAP? 52:40 Sick Picks + Shameless Plugs. Sick Picks Cassie: Eyesy Video Synthesis . Shameless Plugs Cassie: Smashing Conf . 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…

Syntax - Tasty Web Development Treats

1
898: Every Developer Needs a 3D Printer 1:05:14

לפני 6 weeks1:05:14

1:05:14

Wes and Scott talk all things 3D printing—from fixing every day items to organizing tools, printing gadgets, and even teaching their kids entrepreneurship. Show Notes 00:00 Welcome to Syntax! 03:34 Brought to you by Sentry.io 05:03 Practical uses of 3D printing 07:34 Creating tools for organization Gridfinity 10:33 Improving and adapting everyday items Underware 14:34 The benefits of printing something vs buying it 15:32 Choosing the right 3D printer Bamboo Lab Elegoo Prusa Flashorge 25:26 Projects and ideas Multiboard 31:33 Filament types and their uses 40:05 Finding affordable filament Deal Forager 46:07 Where to find 3D models Maker World yeggi Printables Thangs Thingverse 48:08 Creating your own 3D models Fusion Shapr3D Onshape 53:00 Modifying existing 3D models 54:30 Coding in 3D printing Bento shards ManifoldCAD Hunyuan3D-2mv-Turbo Mecagent 01:01:25 Sick Picks + Shameless Plugs Sick Picks Scott: Alaska Bear Organic Silk Sleep Mask Wes: BLV - AMS Riser Shameless Plugs Syntax YouTube Channel 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…

Syntax - Tasty Web Development Treats

1
897: Making Your App Feel Faster Than It Really Is 35:03

לפני 7 weeks35:03

35:03

Scott and Wes break down the tricks and techniques for making your app feel blazing fast—even when it’s not. From optimistic UI to preload-on-hover, it’s all about perception, not just performance. Show Notes 00:00 Welcome to Syntax! 01:12 Brought to you by Sentry.io . 02:34 Mousedown or pointerdown events. 06:00 UI animations should be fast. 08:00 Animations should not block interaction. 08:20 Animations should be cancellable / reversible. 10:50 Optimistic UI. 12:37 Local Data. 13:36 Delay loading indicators. 14:40 Page loading indicators. 15:47 Preload on hover. 17:13 Calculate mouse trajectory. 18:51 Full page spinner on every change. 20:04 Pixelated spinners. 20:23 Skeleton loaders. 23:43 Photo frames. 25:52 Search on input instead of search on click. 26:46 Progress loaders than move in between steps. 27:31 Community submissions. 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…

Syntax - Tasty Web Development Treats

1
896: Do I Still Need To Know JS/CSS/HTML with AI? × How To Sell An App × Is React Context Bad? × More 53:56

לפני 7 weeks53:56

53:56

ברוכים הבאים אל Player FM!

Player FM סורק את האינטרנט עבור פודקאסטים באיכות גבוהה בשבילכם כדי שתהנו מהם כרגע. זה יישום הפודקאסט הטוב ביותר והוא עובד על אנדרואיד, iPhone ואינטרנט. הירשמו לסנכרון מנויים במכשירים שונים.