In this very hasty treat, Wes and Scott cover CSS Native @scope, the implementation of this tool, and some of its limitations.  Show Notes   00:00 Welcome to Syntax!  01:00 Brought to you by Sentry.io.  01:33 Why scope your CSS?  03:21 Scott’s hot take.  05:43 How does @scope CSS work?  07:31 Similar to a component-based workflow.  08:00 Not having to specify a selector for your scope.  09:52 Pseudo inline hover styles.  11:31 Donut scope.  13:01 “Inverted donut-hole scope”  14:50 Browser support + limitations.   Mozilla @scope   The Style Element  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

729: CSS Native @scope

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.

Technology

Tech News

Podcasting

Gadgets

Software How-To

News

In this episode, Scott and Wes dive into the world of local-first apps with Johannes Schickling, the mastermind behind Prisma. From databases, WASM for non-JS, to authentication challenges, they explore the ins and outs of crafting apps that prioritize local functionality. Show Notes   00:00 Welcome to Syntax!  01:10 Brought to you by Sentry.io.  01:28 What is Overtone?  03:45 Can you explain the experience you’re trying to achieve?  06:43 What makes the best music app? Is it local first?  08:03 Is it best to create a local first app from the ground up?  10:31 What are the considerations when making a local first app?  13:04 What database are you using?  Riffle.  16:12 How do you handle authentication?  19:15 Pick the tech based on the problem.  20:40 WASM for Non-JS or heavy lifting tasks.  24:39 How did you get SQLite running in the browser?  27:58 What about WA-SQLite, how does it compare to Riffle?  TLDraw Make-real.  29:24 The backstory of Effect for TypeScript.  34:04 What actually is Effect?  39:32 Consolidating tools.  42:30 What’s a cool aspect of Effect that is often overlooked?  45:47 Building a web server with this.  EffectTS RPC.  48:16 Will this ever get “Bluebirded”?  50:29 What about promises?  Zio World  52:19 Sick Picks + Shameless Plugs.   Sick Picks   Johannes: Open Telemetry, Sentry Open Telemetry.   Shameless Plugs   Johannes: localfirst.fm.   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

767: Local First and TypeScript’s Missing Library with Johannes Schickling

 Scott and Wes are here to guide you through the world of React Server Components, shedding light on the intricacies of Form Actions and Server Actions. Get ready to level up your React skills as they discuss the ins and outs of these powerful features and share their expert advice on optimizing your applications. Show Notes   00:00 Welcome to Syntax!  Show 718 React Server Components.  02:04 Brought to you by Sentry.io.  03:04 What are form actions?  GitHub Add React.useActionState PR  04:05 Almost entirely React.  04:31 What is the ‘server’ in Vanilla React?  06:10 Would React ever ship their own server?  07:29 What are actions?  08:34 Two huge benefits to actions.   08:45 Avoid custom useEffects or third party libraries.  09:17 Calling server code from the client without any APIS.    11:31 Some examples of actions.  12:54 Can these actions be done in a client component?  13:40 Where to use actions.   13:49 On a form submit.  15:30 In an event handler.  15:57 In a useEffect().    17:13 How to actually use an action.  React Hooks   17:30 useActionState() hook.   18:49 The state of the action.  19:35 The bound action.  19:46 The pending state.    23:16 useFormStatus() hook.    24:38 Action inputs.  26:13 Server vs client.  28:30 This is not PHP.  30:31 What is optimistic UI?   33:26 useOptimistic() hook.    37:02 Some final thoughts.  40:18 Sick Picks + Shameless Plugs.   Sick Picks    Good Follows: Alex Katt.    Scott: Tiny Portable Ultra-Mini Air Pump.    Wes: AVerMedia 4k Capture Card.    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

766: React Server Components: Form Actions + Server Actions

In this 3-course series, Scott and Wes serve up some JavaScript Promises treats. In part 1, they unravel the concept of promises and delve into common examples of their usage, from creating and waiting on promises, to database queries and user permissions. Show Notes   00:00 Welcome to Syntax!  01:27 Brought to you by Sentry.io.  02:32 What is a promise?   Promise mdn web docs.  03:27 Common examples of promises.   03:45 A fetch call to an API returns a promise.  05:54 A database query or Insert command  07:18 A request for user permissions.  07:37 A wait function.    08:08 Resolve or rejecting promises.  09:33 Creating promises.   09:46 New promise.  11:09  Promise.withResolvers().  11:37 An  async function.    14:34 Waiting on a promise.   15:09 .then().  16:50 Await.  17:44 Why use one wait method over the other?     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

765: JS Promises Fundamentals - Part 1

Join Scott and Wes as they delve into the fascinating realm of Biome.JS alongside Emanuele Stoppa, the mastermind behind it all. Why is it written in Rust? Why are other tools so slow? Could Biome be the ultimate successor to ESLint or Prettier? Grab a seat at the table and find out! Show Notes   00:00 Welcome to Syntax!  00:10 Brought to you by Sentry.io.  01:49 Who is Emanuele Stoppa and what is Biome?  03:18 What happened to Rome?  05:49 Who’s paying for Biome to be developed?  07:28 How many people are working on Biome?  09:24 Why do we even need Biome?  11:38 Why are other tools so slow?  12:55 Cost of compute.  14:01 The cache management.  14:30 Why was the decision made to move to Rust?  16:35 The bigger the company, the pricier the compute.  19:49 How to get started with Biome.  23:08 Will Biome offer more features than Prettier?  24:12 Language support.  26:02 A language parser for every language?  27:45 Will plugins need to be written in Rust?  GritQL GitHub.  31:25 Ezno, TypeScript Compiler.  33:13 Will we ever see a new TypeScript type-checker?  35:38 What are your thoughts on the types proposal?  Proposal Type Annotations.  38:03 What does your average day look like?  41:10 What is your role at Astro?  41:46 What other languages do you know?  43:22 Biome VCS.  45:14 GitHub action setup.  47:04 Supper Club Questions.  47:09 What text editor, theme and font are you using?  48:26 What do you do to stay up to date?  48:54 Sick Picks & Shameless Plugs.   Sick Picks   Emanuele: Ripley IMDB, Netflix.   Shameless Plugs   Emanuele: Astro, BiomeJS.   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

764: Biome JS with Emanuele Stoppa

Web scraping 101! Dive into the world of web scraping with Scott and Wes as they explore everything from tooling setup and navigating protected routes to effective data management. In this Tasty Treat episode, you’ll gain invaluable insights and techniques to scrape (almost) any website with ease. Show Notes   00:00 Welcome to Syntax!  03:13 Brought to you by Sentry.io.  05:00 What is scraping?  Socialblade.  08:01 Examples of past scrapers.  Canadian Tire.  10:06 Cloud app downloader.  16:13 Other use cases.  16:58 Scraping 101.  17:28 Client Side.  19:08 Private API.  Proxyman.  22:40 Server rendered.  23:27 Initial state.  24:57 What format is the data in?  Google Puppeteer Extension.  27:08 Working with the DOM.  27:12 Linkedom npm package.  29:02  querySelector everything.  31:28 How to find the elements without classes.  34:08 Use XPath selectors for select by word.  34:53 Make them as flexible as you can. Classes change!  35:10 AI is good at this!  36:26 File downloading.  38:20 Working with protected routes.  Proxyman.  40:41 Programatically retrieve authentication keys because they are short-lived.  Fetch Cookie.  43:20 Deal-breakers.  Mechanical Turk.  44:58 What happened with Amazon?   Uniqlo Self-Checkout  46:42 Wes’ portable refrigerator utopia.  47:25 Sick Picks & Shameless Plugs.   Sick Picks   Scott: KeyboardCleanTool.  Wes: Yabai.   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

729: CSS Native @scope

Download our free app to listen on your phone