Syntax - Tasty Web Development Treats

In episode 800 of Syntax, Scott and Wes sit down with John Resig, the creator of jQuery, to discuss the current state of React and TypeScript. They dive into the evolution of frontend frameworks, the challenges of server-side rendering, and the tech stack at Khan Academy.

• 00:00 Welcome to Syntax!
• 00:59 Brought to you by Sentry.io.
• 01:32 What is jQuery?
• 05:31 Did you anticipate the success jQuery had?
• 07:16 allow-discrete, @starting-style.
  • Install Nothing: App UIs With Native Browser APIs - Scott Tolinski.
• 07:54 Building the community around jQuery.
• 11:16 jQuery plugins.
• 13:00 Did you ever make money from jQuery?
• 16:13 What is your role at Khan Academy.
• 17:58 What is the tech stack at Khan Academy?
• 21:56 Why do you want to change your CSS and JS framework?
• 24:03 TypeScript vs Flow.
• 25:25 GraphQL federation.
• 28:08 What was your frontend framework journey?
• 30:23 Is there any part of React you wish would improve?
• 32:37 Reservations using React Router.
• 33:14 Khan Academy web platform vs native platform.
• 35:21 What do you use for state management?
• 38:48 What’s harder than it should be on the web today?
  • Kilian’s Question On X.
  • Polypane.app.
• 42:46 Opinions on JavaScript Sprinkles.
• 44:04 What’s with the $ sign in jQuery?
• 45:29 The challenges of having your name in such a widely used software.
• 51:06 Challenges with server-side rendering in React.
• 52:42 Sick Picks & Shameless Plugs.
• 54:48 What are the performance issues associated with internationalization?
• 56:57 Back to Sick Picks & Shameless Plugs.

• John: Biome, Remix, Lingui.

• John: Khan Academy.

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Scott and Wes serve up the latest and most under-utilized browser APIs that are changing the game for web development. From the @starting-style CSS API to scroll-snap and popovers, they break down how these tools can elevate your projects with minimal effort.

• 00:00 Welcome to Syntax!
  • Install Nothing: App UIs With Native Browser APIs – Scott Tolinski.
  • Tolin.ski Demos.
• 01:03 Brought to you by Sentry.io.
• 02:15 When to use these tools.
• 03:45 @starting-style CSS API.
• 08:23 Transition behavior allow-discrete.
  • Dialog CSS.
• 11:56 calc-size(auto).
• 16:19 scroll-snap.
  • Swiper Indicators.
  • Slide Show.
  • Scroll To Options Snap-Additions.
  • Adam Argyle Tweet.
• 22:05 View Transitions.
  • Cross-document view transitions for multi-page applications
• 33:28 Popover API.
  • Tolin.ski Demos Popover Basic.
  • Tolin.ski Demos Popover Action.
  • Tolin.ski Demos Popover Anchor.
  • Tolin.ski Demos Popover Compat
  • Tolin.ski Demos Popover Mobile-Nav.
• 41:15 Dialog.
  • Tolin.ski Demos Drawer CSS.
• 48:12 Details.
  • Tolin.ski Cool-Treats Accordion.
• 53:26 Sick Picks & Shameless Plugs.

• Scott: Emerge Tools.
• Wes: Apple TV+ Hacks.

• Scott: Local First from Scratch.

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Scott and Wes serve up an episode on reverse proxy servers. They discuss popular options like CF Tunnels, Caddy, Nginx, Apache, and more, explaining why you might need one for load balancing, SSL certificates, security, and managing multiple servers.

• 00:00 Welcome to Syntax!
• 01:30 Brought to you by Sentry.io.
• 02:25 What is reverse proxy?
• 03:16 Some examples of reverse proxies.
• 05:04 Why do you need a reverse proxy?
  • 05:09 Combining multiple servers.
  • 06:51 Load balancing.
  • 07:23 SSL certificates.
  • 10:30 Security.
    • 10:37 Conceal your true IP.
    • 11:24 Access management.
  • 12:31 Routing static assets.
  • 13:31 CDN / local.
• 15:55 Caddy × websocket support.

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Scott and Wes chat with Alex Blokh and Andrew Sherman, the co-founders of Drizzle ORM, about building a modern ORM from the ground up. They dive into the importance of type safety, creating filters with Drizzle, and the differences between Drizzle and other ORMs like Prisma.

• 00:00 Welcome to Syntax!
  • Syntax × Drizzle Swag.
• 01:15 What is Drizzle?
• 02:36 The genesis of Drizzle.
• 04:15 The process of building an ORM.
• 05:38 ‘100% Type-Safe’ and why that’s not a great goal.
• 07:50 Who is responsible for writing the complicated TypeScript?
• 09:40 Is an ORM necessary for anyone working with data?
• 12:15 Creating a product that fits different complexities.
• 13:19 Brought to you by Sentry.io.
• 13:44 Creating filters in Drizzle. Callback-based, or imported. Why?
• 19:22 Drizzle vs Prisma vs Kysely.
• 22:45 Are you friendly with Prisma?
• 23:35 Relational queries.
• 25:17 Query vs select.
• 27:42 Maintaining so many different technologies.
• 30:37 Switching databases.
• 31:39 Drizzle Studio.
  • Drizzle Studio Syntax Theme.
• 35:00 Accessing Cloudflare D1 SQLite requires connection through a worker.
• 37:40 Drizzle Kit.
• 41:37 Will you ever support MongoDB?
• 42:10 Supporting PGlite and local data storage landscape.
  • DrizzleORM v0.30.6 release notes.
• 44:00 Being a developer in Ukraine in 2024.
  • How to support Ukraine: Savelife, United24.
• 51:07 Drizzle is expanding.
• 53:50 Sick Picks + Shameless Plugs.

Andrew - Smart Swim Goggles.

Andrew - Savelife, United24. Scott - Syntax × Drizzle Swag.

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Scott and Wes tackle a variety of audience questions, from the nuances of over-engineering to the energy consumption of AI LLMs. They also discuss the pros and cons of monorepos, frameworks, and the ever-important question: Do you really need to learn all the developer tooling?

• 00:00 Welcome to Syntax!
• 00:41 Brought to you by Sentry.io.
• 01:07 Challenges around a resume playback function.
• 05:56 Why use Google Forms for Potluck questions?
• 07:57 What constitutes over-engineering and how to avoid it.
• 13:28 Webview vs native component based mobile apps.
• 18:06 Running and managing monorepos.
• 20:59 Energy consumption of AI LLMs vs static web content.
  • A guide to LLM inference and performance.
  • From Words to Watts: Benchmarking the Energy Costs of LLM Inference.
• 25:19 Why do we need frameworks?
  • Frank M Taylor Blog Post.
• 33:05 Handling ad-blockers blocking Sentry and other tools.
  • Syntax GitHub.
• 38:25 Creating sites without JavaScript.
• 42:49 Do I really have to learn all the various developer tooling?
  • Wes Bos Tweet.
• 44:47 What are the best ways to network and meet other developers?
• 50:16 Sick Picks & Shameless Plugs.

• Scott: Tweek App/
• Wes: Rain-X Waterless Car Wash.

• Scott: Swag Store.
• Wes: Audio Player Updates.

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Scott and Wes dish out the intricacies of hosting private fonts using Cloudflare Pages. They explore the challenges of font security, the benefits of a font server, and the nuances of caching and whitelisting to keep your fonts secure and efficient.

• 00:00 Welcome to Syntax!
• 01:53 Behind the Code: Brought to you by Sentry.io.
• 03:12 The problem with hosting fonts.
  • Scott’s Fonts.
• 05:42 The solution, a font server with Cloudflare Pages.
• 09:37 Utilizing a Key Value Store.
• 10:53 Storing a whitelist.
• 13:42 Why not just use a bucket?
  • Check out the code.
• 15:24 Should whitelisting be done in JavaScript or cores?
• 17:23 How do you cache to multiple origins?
• 18:15 Multiple URLs in an allow origin.
• 19:17 Font security and foundry challenges.
• 21:43 Moving Domains on Cloudflare.

Check out the font Syntax uses! MD-IO.

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Scott and Wes sit down with Vjeux from Meta to dive deep into the origins and evolution of Prettier, the widely-used code formatter. They discuss the challenges faced, the decision-making process behind its features, and what the future holds for this indispensable tool in the developer’s toolkit.

• 00:00 Welcome to Syntax!
• 01:45 Brought to you by Sentry.io.
• 02:19 New swag!
• 03:25 Who is Vjeux?
• 06:56 Is management the key to successful projects?
• 08:50 The genesis of Prettier.
• 12:08 Why other JS formatters didn’t work.
• 16:56 Focusing on edge-cases.
• 17:41 The goal for Prettier.
  • Prettier Philosophy.
• 18:31 Next step, integrations.
• 19:37 Should you run Prettier on save or commit?
• 21:34 Does Prettier’s limitations lead to higher adoption?
  • Prettier Config.
• 25:01 What was the most controversial default setting?
• 28:14 Does Facebook use semicolons?
• 29:18 Getting approval to devote 6 months to Prettier.
• 31:42 Working with Mark Zuckerberg.
• 32:43 Was there ever consideration to augment ESLint instead?
  • Prettier vs. Linters.
• 35:34 What are your thoughts on the Rust-based alternatives?
• 36:44 Prettier’s $10,000 bounty.
• 39:32 What is the future of Prettier?
• 44:54 Prettier is available in almost every language.
• 47:59 Advice for other open-source maintainers.
• 53:26 Sick Picks & Shameless Plugs.

• Vjeux: TransformersJS.

• Vjeux: Prettier x Syntax Swag.

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Scott and Wes dive into the local first landscape, exploring the benefits and possibilities of local first apps. They highlight some of their favorite tools and discuss why local first is gaining traction among developers.

• 00:00 Welcome to Syntax!
• 00:27 Behind the Code: Brought to you by Sentry.io.
• 01:06 Catch up with Wes and Scott.
• 03:00 The local first space.
  • Scott’s Blog: The Spectrum of Local First Libraries.
  • Syntax 739: The Lofi Movement.
• 04:27 Some local first apps we love.
  • Linear.
  • Tweek.so.
  • Superhuman.
• 05:15 The advantages of local first.
• 06:07 localfirstweb.dev.
  • 09:21 Triplit.
  • 15:33 Evolu.
  • 22:32 RxDB.
  • 24:08 ElectricSQL.
  • 26:57 Pouchdb.
  • 28:46 TinyBase.
  • 32:08 Replicache.
  • 44:31 PowerSync.
• 48:21 Sick Picks & Shameless Plugs.

• Scott: Battery Jump Starter.
• Wes: Battery Tire Pump.

• Wes: Syntax Swag

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Scott and Wes break down the importance of sitemaps for SEO. They dive into the different file formats, essential fields, and common pitfalls to avoid when creating and submitting your sitemap to search engines.

• 00:00 Welcome to Syntax!
  • New Swag Coming Soon.
  • Tolin.ski.
• 02:09 Brought to you by Sentry.io.
• 02:39 Sitemaps.
• 04:36 Why do you need a sitemap?
• 06:34 Sitemap file formats.
  • 08:31 Choosing a file format.
  • 09:17 Site map file size limits.
  • 10:32 Fully-qualified URLs.
• 10:50 Fields and metadata.
  • 10:58 What fields matter for SEO?
• 14:20 What to avoid in your sitemap?
  • 14:23 Dynamic user pages and account pages.
  • 14:43 Parameter-based URLs.
  • 16:01 Redirects, duplicates or disallowed pages.
  • 16:11 Unlisted pages.
• 17:07 How do you make a sitemap?
• 20:06 What to do once you have a sitemap.
  • 20:08 Validation.
  • 20:20 Submit to search engine.
    • Bing Webmaster Tools.
    • Google Search Console.
  • 22:11 Cache them!

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads

Scott and Wes chat with Richard Davison from AWS about LLRT, a new runtime tailored specifically for Lambda. They dive into the benefits of using LLRT, challenges with JavaScript in serverless, and why Rust was chosen for its development.

• 00:00 Welcome to Syntax!
• 01:07 Who is Richard Davison?
• 05:11 What is LLRT and what’s the motivation for building it?
• 08:25 AWS Lambda example.
• 11:20 What makes LLRT specifically tailored to Lambda?
• 14:55 Brought to you by Sentry.io.
• 15:22 Node.js in Lambda.
• 16:00 What are some challenges that people have with JavaScript in serverless?
• 17:20 Lambda memory configuration.
• 19:23 Managing cost of compute.
• 21:29 Simpler and faster than Node, Bun, Dino, but not a replacement.
• 22:31 The benchmarks.
• 27:00 Quick.js, the main reason for the performance gains.
  • Fabrice Bellard QuickJS.
• 28:03 The Quick.js engine.
• 30:35 What was the reason behind creating Quick.js?
• 33:46 What made you pick Rust for LLRT?
• 36:34 Abstractions and the value of speed.
• 39:08 The JIT Compiler.
• 42:38 Compile cache.
• 43:27 De-optimizations.
• 44:59 Node.js Compat, what to use and avoid with LLRT.
  • GitHub AWS Labs Compatibility Chart.
• 47:52 Will you target with WinterCG spec?
• 50:22 Streams API.
• 52:06 What about WebSockets?
• 53:10 Is this going to be promoted from a labs project?
• 54:49 Sick Picks + Shameless Plugs.

• Richard: QuickJS Engine, JSLinux.

• Richard: Javascript

Syntax: X Instagram Tiktok LinkedIn Threads

Wes: X Instagram Tiktok LinkedIn Threads

Scott: X Instagram Tiktok LinkedIn Threads

Randy: X Instagram YouTube Threads