Syntax &#8211; Tasty Web Development Treats

808: The Future of JavaScript Frameworks × Building Auth × DB Design Tips, and more! Aug 14, 2024

Show notes

In this potluck episode of Syntax, Wes and Scott answer your questions about the future of JavaScript frameworks, building custom authentication systems, limiting API access, using Caddy server proxy for local development, component props in JSX, structuring a relational database, and more!

Show Notes

00:00 - Welcome to Syntax!
01:48 - Brought to you by Sentry.io
04:37 - The future of JavaScript frameworks
09:09 - How to use Caddy for local development
- SvelteKit
- Vite
14:27 - When to use an API
- Strapi
17:38 - Where does Scott get his amazing t-shirts?
- Sentry.shop
- Syntax Snack Pack
21:33 - Best screwdriver for kids toys
- PicQuic Sixpac Plus
- LTT Screwdriver
24:31 - Strategies for database design
- MongoDB
- Prisma
30:21 - Do we need frameworks?
- 796 - Do We Need JS Frameworks × Are You Over-Engineering? × Webview vs Native
- Frontend Masters
32:19 - Best tech stack for building a basic login system
- 336 - How To Build Your Own Auth
37:56 - Syntax video episodes
40:25 - Component props in JSX
45:26 - Sick Picks & Shameless Plugs

Sick Picks

Scott: Loop Quiet Ear Plugs
Wes: Gecko’s Toes Water Hose Rack

Shameless Plugs

Scott: Syntax YouTube Channel

Hit us up on Socials!

807: CSS Components: Tailwind, Panda, Scoped, Modules, Classes, Variables, CSS-in-JS and Sprinkles! Aug 12, 2024

Show notes

In this episode of Syntax, Wes and Scott talk about CSS components, including class-based components, CSS modules, scoped CSS, utility CSS, and CSS-in-JS strategies. They share their thoughts, what differentiates these approaches, and why you may (or may not) want to use them.

Show Notes

00:00 - Welcome to Syntax!
01:30 - Brought to you by Sentry.io.
02:11 - What makes a good CSS component system?
07:54 - Component vs part of a component
13:26 - CSS Modules
15:56 - Scoped CSS
- @scope - (82% support!) ff behind flag
  - https://developer.mozilla.org/en-US/docs/Web/CSS/@scope
21:07 - How is Panda different from style components?
- Panda
- StyleX
00:00 - Utility CSS
- TailwindCSS
- Uno
31:08 - Utility Sprinkles
34:13 - CSS variables
- open-props.style

Hit us up on Socials!

806: The King of Drag and Drop: Alex Reardon Aug 09, 2024

Show notes

Scott and Wes talk with Alex Reardon from Atlassian about developing drag-and-drop libraries, specifically the challenges with creating efficient and accessible drag-and-drop functionalities for the web. They also explore what it takes to build and implement a system that works seamlessly across various frameworks.

Show Notes

00:00 Welcome to Syntax!
01:18 Brought to you by Sentry.io.
01:51 What Alex does at Atlassian
- react-beautiful-dnd
- Pragmatic drag and drop
04:38 What makes drag and drop tricky.
06:38 Use-cases.
10:54 What security is in place?
12:30 How to make it feel native.
19:20 Is the drag and drop spec ongoing?
20:03 How do you build this headless?
21:33 How does drag and drop work with frameworks?
23:48 Making drag and drop feel the same across mobile and desktop.
26:09 What’s the key to really good drag performance?
29:58 How do you make drag and drop accessible?
34:57 Pragmatic drag and drop code vs application code.
- Shoelace
- shadcn
40:00 How does testing work?
- Playwright
- Cypress
43:15 Internal adoption at Atlassian.
44:27 Working on high-impact projects.
49:15 Versioning and internal adoption at Atlassian.
51:29 Sick Picks + Shameless Plugs.

Sick Picks

Alex: Coffee, James Hoffmann YouTube Channel.

Shameless Plugs

Alex: Dom Events.

Hit us up on Socials!

805: We React to State of React Survey Aug 07, 2024

Show notes

Scott and Wes serve up their reaction to the “State of React 2023” survey results, discussing the main API pain points like forwardRef and memo. They also explore the latest on state management, hooks pain points, and exciting new libraries in the React ecosystem.

Show Notes

00:00 Welcome to Syntax!
01:41 Brought to you by Sentry.io.
02:28 The State of React 2023.
03:11 The Main API Painpoints.
- 04:31 forwardRef.
- 05:27 memo.
- 06:39 Context API.
- 07:18 StrictMode.
- 08:45 Double rendering.
- 09:36 State management.
11:58 Hooks Pain Points.
- 12:11 useEffect.
- 12:33 Dependency arrays.
13:11 New API Pain Points.
- 13:19 React Server Components.
- 14:40 Taint API.
15:19 Libraries.
- 17:02 Jotai.
- 17:45 Apollo Client.
- 19:05 Redux.
- 20:57 Redwood.
- 21:26 React Aria.
- 21:55 Astro.
- 22:04 The most negative.
23:35 Component Libraries.
25:50 Other Component Libraries.
- 25:53 Mantine.
- 27:47 Details element.
- Tolin.ski/demos.
- 28:59 Honorable mentions.
29:07 Animations.
29:28 Data Visualization.
31:26 CSS Tools and Libraries.
33:14 Styled Components.
34:16 Meta Frameworks.
38:50 Hosting.
40:08 Other Services.
40:45 Back-end language trivia.
43:00 State management.
43:40 Data Loading.
44:08 Other Tools.
44:09 Testing Libraries.
44:45 React Renderers.
47:58 Podcasts, thank you!
48:14 Sick Picks & Shameless Plugs.

Sick Picks

Scott: Thermacell.
Wes: Nerf Guns

Shameless Plugs

Wes: Syntax.fm.

Hit us up on Socials!

804: Should Your Website Work Without JavaScript? Aug 05, 2024

Show notes

Scott and Wes debate whether your website really needs JavaScript to function. They explore the principles of web standards, progressive enhancement, and test popular websites like Shopify and Netflix to see how they perform without JavaScript.

Show Notes

00:00 Welcome to Syntax!
00:11 Take 2
01:43 Brought to you by Sentry.io.
02:19 The clip summarized.
- 03:16 Your website should load, be readable and be (mostly) styled without JavaScript.
- 07:32 Web standards first. If it can be done without JavaScript, it should be.
  - 08:09 What if the CSS doesn’t load?
  - 10:20 Linking
  - 10:24 Forms.
  - 12:11 Links (Duh, but also c’mon!)
  - 12:35 Query parameters.
- 13:57 Server render if possible.
15:20 Progressive Enhancement.
- 17:24 CSS Page Transitions.
19:07 Let’s test websites out.
- 19:15 Shopify.
- 22:16 Syntax.fm.
- 25:23 Netflix.
  - 27:27 Local first and offline service workers.
- 29:27 TikTok.
- 29:33 GitHub.

Hit us up on Socials!

803: The SQLite Takeover with Turso’s Glauber Costa Aug 02, 2024

Show notes

Scott and Wes chat with Glauber Costa from Turso about the evolution of databases and the fascinating technology behind Turso. They dive into topics like the benefits of massive multi-tenancy, vector search, and why Glauber made the switch from NoSQL to relational databases.

Show Notes

00:00 Welcome to Syntax!
00:36 Turso’s relationship with Drizzle.
02:10 What is Turso?
04:23 Brought to you by Sentry.io.
04:48 Using libSQL without Turso.
06:21 An explanation of Vector Search.
07:16 Vector databases are being ‘Sherlocked’ by larger databases.
09:24 Why did you move from NoSQL to Relational?
12:00 Allows for massive multi-tenancy - what does that mean?
15:27 Transactional schema changes.
16:30 Why would you want 10,000 databases?
19:02 What makes SQLite cheaper?
22:59 The strategy for building a business around an inexpensive tool.
26:13 Pull requests and branching within SQLite.
28:52 Database snapshots for rollbacks.
31:14 Driving the cost of a database to zero allows for rethinking architecture.
32:35 SQLite informing Turso’s edge functionality.
36:56 Automatic replica database syncing.
39:10 Is the database a bottleneck?
39:25 Embedded Replicas.
40:04 How do embedded replicas handle conflict resolution from offline users?
41:43 If the server is offline, can the database live in the client or WASM?
43:09 Conflict resolution.
44:47 What makes Turso stand out?
47:51 What was it like working on the Linux Kernel?
51:57 Do you use Linux?
52:46 Sick Picks & Shameless Plugs.

Sick Picks

Glauber: Understanding yourself, What is Aphantasia.

Shameless Plugs

Glauber: React Rally Park City, UT, Turso, Laravel.

Hit us up on Socials!

802: Tree Shaking × useMemo vs useCallback × JavaScript Event Loop - STUMP'd Jul 31, 2024

Show notes

Scott and Wes serve up a gameshow-style quiz with STUMP’d, challenging each other on web development trivia. From the differences between useMemo and useCallback to the intricacies of the JavaScript event loop, join them for a fun and informative session packed with web dev insights!

Show Notes

00:00 Welcome to Syntax!
01:17 Brought to you by Sentry.io.
02:03 The longest game of Rock, Paper, Scissors.
Round 1
03:22 In React, what is the difference between useMemo and useCallback hooks, and in what scenarios would you choose one over the other?
05:56 Explain the concept of “tree shaking” in modern JavaScript build tools. How does it work, and what are its benefits?
Round 2
09:11 In the context of CSS Grid, explain the difference between grid-template-areas and grid-area.
11:34 What is the “Temporal Dead Zone” in JavaScript, and how does it relate to variables declared with let and const
Round 3
13:29 Describe the inner workings of the JavaScript event loop, including the roles of the call stack, callback queue, and microtask queue.
17:10 What is the “Shadow DOM” in web components, and how does it differ from the regular DOM?
Round 4
20:05 Explain the process of Critical Rendering Path optimization in modern web browsers
26:14 Describe the purpose and functionality of the Intl.Segmenter API in JavaScript.
Round 5
30:03 Explain the concept of Web Assembly (WASM) and its role in modern web development.
32:11 Explain the concept of Svelte stores, particularly focusing on the differences between writable, readable, and derived stores.
Round 6
35:26 Explain the concept of “code splitting” in modern JavaScript applications.
37:00 Describe advanced techniques for maintaining an accessible focus order in web accessibility.
Round 7
45:15 Explain the concept of “Server-Sent Events” (SSE) in web development.
47:37 What’s the difference between contain layout and contain paint?
49:30 Sick Picks & Shameless Plugs.

Sick Picks

Scott: diskprices.
Wes: Slime Tire Sealant.

Shameless Plugs

Scott: Syntax on YouTube.

Hit us up on Socials!

801: 6 New JavaScript Proposals Jul 29, 2024

Show notes

Scott and Wes serve up six exciting new JavaScript proposals, including Promise.try and Math.sumPrecise. They break down what each proposal means for developers and how these new features could change the way we write JavaScript.

Show Notes

00:00 Welcome to Syntax!
01:45 Understanding the stages of JavaScript Proposals.
04:04 Promise.try - Stage 3.
05:39 Math.sumPrecise - Stage 2.7.
07:28 Floating point math.
09:07 ShadowRealm - Stage 2.7.
11:39 Brought to you by Sentry.io.
12:03 Regex Escape - Stage 2.
13:33 Defer Module Evaluation - Stage 2.7.
15:09 Iterator Sequencing - Stage 2.

Hit us up on Socials!