Syntax - Tasty Web Development Treats
Alle afleveringen
1.049 afleveringen, van nieuw naar oud
-
799: Hot New and Under-Utilized Browser APIs
24 juli 2024 · 59 min
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.
Show Notes 00:00 Welcome to Syntax! Install Nothing: App UIs With Native Browser APIs – Scott Tolinski.
Tolin.ski Demos. Lees meer01: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 CompatTolin.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.
Sick Picks Scott: Emerge Tools.
Wes: Apple TV+ Hacks.
Shameless Plugs Scott: Local First from Scratch.
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 -
798: Self Hosting: Reverse Proxy Servers
22 juli 2024 · 17 min
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.
Show Notes 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. Lees meer12:31 Routing static assets.
13:31 CDN / local.15:55 Caddy × websocket support.
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 -
797: Drizzle: The TypeScript SQL ORM
19 juli 2024 · 58 min
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.
Show Notes 00:00 Welcome to Syntax! Syntax × Drizzle Swag. Lees meer01: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.
Sick Picks Andrew - Smart Swim Goggles.
Shameless Plugs Andrew - Savelife, United24. Scott - Syntax × Drizzle Swag.
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 -
796: Do We Need JS Frameworks × Are You Over-Engineering? × Webview vs Native
17 juli 2024 · 59 min
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?
Show Notes 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. Lees meer25: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.
Sick Picks Scott: Tweek App/
Wes: Rain-X Waterless Car Wash.
Shameless Plugs Scott: Swag Store.
Wes: Audio Player Updates.
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 -
795: Hosting Private Fonts on the Edge With Cloudflare
15 juli 2024 · 24 min
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.
Show Notes 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. Lees meer05: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.
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 -
794: Prettier JavaScript with Vjeux
12 juli 2024 · 55 min
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.
Show Notes 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. Lees meer18: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.
Sick Picks Vjeux: TransformersJS.
Shameless Plugs Vjeux: Prettier x Syntax Swag.
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 -
793: The Local First Landscape
10 juli 2024 · 53 min
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.
Show Notes 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. Lees meer04: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.
Sick Picks Scott: Battery Jump Starter.
Wes: Battery Tire Pump.
Shameless Plugs Wes: Syntax SwagHit 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 -
792: Perfect Sitemaps for SEO
8 juli 2024 · 24 min
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.
Show Notes 00:00 Welcome to Syntax! New Swag Coming Soon.
Tolin.ski. Lees meer02: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!
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 -
791: LLRT The Serverless Runtime w/ Richard Davison
5 juli 2024 · 57 min
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.
Show Notes 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. Lees meer28: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.
Sick Picks Richard: QuickJS Engine, JSLinux.
Shameless Plugs Richard: Javascript
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 -
790: State of JS 2023 Reactions
3 juli 2024 · 57 min
Scott and Wes dive into the 2023 State of JavaScript survey, breaking down the latest trends and pain points in front-end frameworks, build tools, and JavaScript runtimes. Tune in for their hot takes and insights on what’s shaping the JavaScript landscape this year!
Show Notes
00:00 Welcome to Syntax!
State of JS 2023. Lees meer03:04 Brought to you by Sentry.io.
03:43 New Syntax Swag!
Syntax Swag Store.04:42 Front end frameworks.
08:30 Front end framework pain-points.
12:17 Metaframeworks.
17:45 Metaframework pain-points.
22:17 Build tools.
Rolldown.24:45 Build tool pain-points.
25:54 JavaScript runtimes.
28:19 Edge + serverless runtimes.
29:30 Backend frameworks.
33:17 Non-JavaScript languages.
36:12 Hosting service.
38:50 Usage.
40:05 Javascript usage.
41:03 Missing features.
45:04 Industry sector.
47:37 The awards.
51:34 Sick Picks + Shameless Plugs.
Sick Picks Scott: Electric Lighter.
Wes: Monkey Noodle.
Shameless Plugs Wes: Syntax Swag Store.
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 -
789: Do More With AI - LLMs With Big Token Counts
1 juli 2024 · 34 min
Join Scott and CJ as they dive into the fascinating world of AI, exploring topics from LLM token sizes and context windows to understanding input length. They discuss practical use cases and share insights on how web developers can leverage larger token counts to maximize the potential of AI and LLMs.
Show Notes 00:00 Welcome to Syntax!
01:31 Brought to you by Sentry.io.
02:42 What is a token? Quizgecko GPT-4 Token Counter. Lees meer04:22 Context window sometimes called “max tokens”. OpenAI Platform Models.
Claude Models.10:42 Understanding input length.
11:59 Models + services with big token counts. Gemini Docs.13:22 Generating open API documentation for a complex API.
17:29 Generating JSDoc style typing. Drop-In stolinski GitHub.21:07 Generating seed data for a complex database. bytedash w3cj GitHub.
24:34 Summarizing 8+ hours of video.
29:35 Some things we’ve yet to try.
31:32 What about cost? Google AI for Developers Cost.Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
CJ: X Instagram YouTube TwitchTV
Randy: X Instagram YouTube Threads -
788: Supabase: Open Source Firebase for Fullstack JS Apps
28 juni 2024 · 54 min
Scott and CJ chat with Paul Copplestone, CEO and co-founder of Supabase, about the journey of building an open source alternative to Firebase. Learn about the tech stack, the story behind their excellent documentation, and how Supabase balances business goals with open-source values.
Show Notes 00:00 Welcome to Syntax!
00:30 Who is Paul Copplestone?
01:17 Why ‘Supa’ and not ‘Super’?
02:26 How did Supabase start? 04:29 How long from inception to joining Y Combinator?
05:10 Was it always intended to be open source? Why Open Source. Lees meer07:22 How many users chose to self-host?
07:49 Open source mindset.08:42 Simplicity in design.
10:32 How do you take Supabase one step beyond the competition?
12:35 How do you decide which libraries are officially supported vs community maintained? 15:17 You don’t need a client library!16:48 Edge functions for server-side functionality.
18:51 The genesis of pgvector.
20:59 The product strategy.
22:25 What’s the story behind Supabase’s awesome docs?
25:26 The tech behind Supabase. 25:39 What is the UI built on?
27:33 Consolidation follows kaizen.
28:54 What else is involved in the stack?
31:47 Authentication.
32:35 Storage engine.
33:13 For self-hosting.35:46 How do you balance business goals with open source?
42:01 What’s next for Supabase?
44:15 Supabase’s GA + new features. Top 10 LAunches from Supabase GA Week.48:24 Who runs the X account?
50:39 Sick Picks + Shameless Plugs.
Sick Picks Paul: Apple Vision Pro.
Shameless Plugs Paul: PostgreSQL.
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads
Scott: X Instagram Tiktok LinkedIn Threads
CJ: X Instagram YouTube TwitchTV
Randy: X Instagram YouTube Threads -
787: You Should Try Vue.js
26 juni 2024 · 54 min
Scott and CJ dive deep into the world of Vue.js, exploring what makes this frontend framework unique and why it stands out from React and Svelte. CJ gives a comprehensive tour, covering everything from getting started to advanced features like state management and Vue’s built-in styles.
Show Notes 00:00 Welcome to Syntax!
00:46 Brought to you by Sentry.io.
02:24 What is Vue? 04:13 Similar to Svelte, different from React. Lees meer05:35 How to get started with Vue. 05:43 Script tag.
06:01 CLI.
07:10 The value of an opinionated CLI.10:51 Why do you like Vue.js over React or Svelte? 11:03 Less boilerplate.
15:24 Self-closing tags.
16:09 Svelte parsing HTML tags incorrectly. Hacker News Article.17:08 Easily adding event handlers to elements.
18:20 Conditional rendering.
19:19 What is a directive?
20:29 ‘Borrowing’ from Angular One.
21:07 Styles are built in.
22:11 Tailwind for scoping.
26:08 State management.
30:28 Ref Functions similar to Svelte Runes.
32:03 Global state management.
34:24 Pinia.36:18 What is the full-stack application platform for Next.js?
38:00 Nuxt auto-imports. sveltekit-autoimport.39:37 Creating API functions and server side codes.
41:12 The future of Vue and compilers for front end frameworks.
41:43 Vue’s compiler.
44:19 Are people actually using Vue?
46:50 Laravel and Vue.
48:29 Sick Picks & Shameless Plugs.
Vue.js: The Documentary.
Sick Picks Scott: Jordan Roam Slides.
CJ: USB Charging Hub
Shameless Plugs Scott: Syntax on GitHubCJ: Syntax.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 -
786: What Open Source license should you use?
24 juni 2024 · 31 min
Scott and CJ dive into the world of open source, breaking down its meaning, benefits, and the various types of licenses you’ll encounter. From permissive licenses like MIT and Apache 2.0 to copy-left licenses such as GNU GPLv3, they’ll help you choose and apply the right license for your project.
Show Notes 00:00 Welcome to Syntax!
00:54 Brought to you by Sentry.io. Sentry Open Source.
Giving away $500,000 to open source projects. Lees meer01:56 What is open source?
03:19 This is not legal advice.
03:51 Source available ≠ open source. No Permission.06:39 The benefits of open source. 07:26 Educational.
07:52 More Secure.
09:32 Community-oriented. Scott’s Habit Path11:29 Types of licenses. 12:09 Permissive licenses. 12:26 MIT License.
14:37 Apache 2.0 license.15:31 Copy Left licenses. 15:58 GNU GPLv3.
18:16 Copy Left + permissive. 18:23 (Mozilla Public License) MPL.
19:31 Business licenses. 19:35 Functional Source License.
23:16 Companies using BUSL.
24:41 Server Side Public License (SSPL).26:56 Choosing and acknowledging licenses.
29:13 Applying a license to your directory.
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 -
785: What’s Next for Next.js with Tim Neutkens
21 juni 2024 · 1 uur 3 min
Scott and Wes dive into the world of Next.js with special guest Tim Neutkens from Vercel. They explore the latest updates, including the React Compiler and React Server Components, discussing their impact on developer workflows and the future of Next.js development.
Show Notes 00:00 Welcome to Syntax!
00:30 What does the React Compiler do?
05:04 Will React Compiler help with managing Context?
06:39 What happens if you’re not using a React Compiler? react.dev Playground. Lees meer09:30 Will this work on any NextJS version?
12:18 What are React Server Components?
16:28 Shipping all the data inside an encapsulated component.
20:17 Clearing up the frustrations around retrofitting server components.
23:13 Handing migration.
28:30 Is this just a fetch request with props?
36:41 How closely are the NextJS and React teams working?
41:53 Will we ever get Async Client Components?
43:52 Async Local Storage API.
45:31 Turbopack.
57:51 Sick Picks & Shameless Plugs.
Sick Picks Tim: Apple TV Sci-Fi.
Shameless Plugs Tim: Turbopack, Next.js 15 RC, Sentry NextJS.
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 -
784: Logging × Blogging × Testing × Freelancing
19 juni 2024 · 56 min
In this Potluck episode, Scott and Wes tackle listener questions on modern blogging, website environmental impact, and using LangChain with LLMs. They also cover CSS hyphens, unit vs. integration testing, and balancing web development with new parenthood.
Show Notes 00:00 Welcome to Syntax!
00:13 How to submit a question for future episodes. Potluck Questions. Lees meer02:46 Brought to you by Sentry.io.
03:21 Logging from a site.
08:39 Blogging in 2024.
11:49 Sharing website environmental data. Green Web Foundation.
Website Carbon Calculator.
Syntax Site Results.
Scott’s Site Results.17:38 Using LangChain when working with LLMs.
21:03 CSS Hyphens and Overflow-Wrap. Hyphens Browser Compatibility.
Overflow-Wrap.25:52 Similarities between WASM, JVM and .NET.
27:25 Writing unit testing and integration testing.
32:00 How can new parents stay current on web development trends?
34:47 Working globally as a freelance developer.
37:26 Scott’s audio setup. Why audio interfaces have DSP built in. ChaseBliss Pedal.43:04 UI libraries for synth/audio plugins.
44:02 CSS module scripts. CSS Modules in CSS Module Scripts.48:39 Sick Picks + Shameless Plugs.
Sick Picks Scott: Deep Cover Podcast.
Wes: Pressure Washer Surface Cleaner.
Shameless Plugs Wes: Syntax.fm/videos.
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 -
783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax
17 juni 2024 · 31 min
Scott and Wes dive into the world of browser caching for audio files, exploring the File System API and the Cache API. They discuss size restrictions across different browsers, how tools like Riverside.fm leverage IndexedDB, and walk through code examples for creating, retrieving, and managing cached audio data.
Show Notes 00:00 Welcome to Syntax!
02:07 Brought to you by Sentry.io.
02:33 The file system API.
03:08 The Cache API. Mozilla Developer Cache API.
Airhorner, a good example. Lees meer04:24 Size restrictions per browser.
07:04 How tools like Riverside.fm use IndexedDB.
08:47 Data eviction (too much data).
10:16 What we’re using it for and how.
12:17 How do we do this in code?
14:37 Creating the cache.
16:18 Retrieving from cache manually.
19:00 Adding metadata.
19:37 A live debugging.
22:39 Persistent storage. web.dev Persistent Storage.
Hackernoon Persistent Storage.26:10 Media score. Chrome Autoplay Policy.
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 -
782: The Developer’s Guide To Fonts with Stephen Nixon
14 juni 2024 · 1 uur 2 min
Scott and CJ are joined by Stephen Nixon of ArrowType to delve into the world of fonts and type for developers. They explore the intricacies of font creation, the utility of variable fonts, and offer tips for making visually appealing typography on the web.
Show Notes 00:00 Welcome to Syntax!
00:57 Who is Stephen Nixon? Process Type Foundry.
Mark Simonson Proxima Nova. Lees meer05:42 What is a type foundry exactly? ArrowType.
09:09 Font / type making. 09:15 How do you make a font? RoboFont.
Glyphs.11:58 Fonts vs typefaces.
13:02 How many fonts have you made?
14:17 What are variable fonts and how can web developers utilize them?
19:22 Animating fonts. Variable Fonts.
Recursive.20:28 Do you code your demo sites yourself?
21:50 Are variable fonts more complex to design (and develop). Matthew Carter Adobe Fonts, Matthew Carter Wiki.
Multiple Masters Variable Fonts.
Just My Type.27:03 Hand painted fonts. House industries.
Golden Sign Co.
Gen Ramirez.29:39 Creating a monospace font.
32:19 Creating fonts with dyslexia accessibility in mind.37:58 Typography for the web. 38:29 What are some 80/20 rules developers can employ to make more visually appealing typography?
40:58 Type scale calculations. Scott’s Fluid Type Calculator.45:42 What are your biggest web type pet peeves.
48:46 Do you have any favorite type tools? Wakamifondue.
Fixing Variable Font Inheritance.50:34 Supper Club Questions. 50:44 How do you feel about ligatures in coding fonts? Ligatures In Programming Fonts Hell No.
55:11 What font do you use? Name Sans v05.
Name-Mono.56:43 What is your favorite font of all time? Typotheque.
Soehne.
Grillitype Typefaces.
Phnotype.58:49 Sick Picks + Shameless Plugs.
Sick Picks Stephen: Children of Time, No-Recipe Recipes.
Shameless Plugs Stephen: ArrowType, Skewing Fonts.
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 -
781: Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode
12 juni 2024 · 1 uur 1 min
In this potluck episode of Syntax, Scott and CJ serve up a variety of community questions, from the nuances of beginner vs. advanced TypeScript to the pros and cons of SvelteKit. They also discuss falling out of love with React, shipping private packages via NPM, and the eternal struggle of always starting but never finishing projects.
Show Notes 00:00 Welcome to Syntax!
01:06 Brought to you by Sentry.io.
01:49 Today’s format.
02:23 Beginner vs advanced TypeScript. DHH Tweet. Lees meer09:23 Does Sveltekit replace Svelte with Astro?
13:09 Handling multiple languages.
19:52 Falling out of love with React.
25:53 Shipping private packages via NPM. npm-install.
Working with the npm registry.29:00 How do you feel about importing packages from a URL?
30:36 VueJS vs Svelte.
36:15 Leetcode type interview questions.
41:58 Learning a new language for personal growth.
46:21 Always starting, never finishing. Scott’s Fluid Type Calculator.50:23 Code quality vs tackling tickets.
55:36 Sick Picks + Shameless Plugs.
Sick Picks Scott: Quick Look Plugins.
CJ: Sony WFC700n-b.
Shameless Plugs Scott: Syntax on YouTubeHit 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 -
780: Cloud Storage: Bandwidth, Storage and BIG ZIPS
10 juni 2024 · 29 min
Today, Scott and Wes dive into cloud storage solutions—why you might need them, how they use them, and what you need to know about the big players, fees, and more.
Show Notes 00:00 Welcome to Syntax!
01:14 Brought to you by Sentry.io.
02:05 Why you might need a cloud storage provider.
03:07 How we use cloud storage. Dropshare. Lees meer08:16 Why you may need larger storage.
09:49 The big players in this space. Amazon S3.
Cloudflare R2.
Backblaze B2.
Synology C2.
Google Cloud Storage.
Microsoft Azure.
Digital Ocean Spaces.
Oracle.
Bunny.net.
Amazon S3 Glacier.14:34 Storage fees.
18:31 Why so cheap?
20:49 Bandwidth (egress). Cloudflare Bandwidth Alliance.26:46 Operation fees - costs money.
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 -
779: Why SQLite is Taking Over with Brian Holt & Marco Bambini
7 juni 2024 · 50 min
Scott and CJ dive into the world of SQLite Cloud with special guests Brian Holt and Marco Bambini. They explore why SQLite is gaining traction, its unique features, and the misconceptions surrounding its use—let’s get into it!
Show Notes 00:00 Welcome to Syntax!
01:20 Who is Brian Holt?
02:26 Who is Marco Bambini?
05:12 Why are people starting to talk so much about SQLite now?
08:47 What makes SQLite special or interesting?
09:46 What is a big misconception about SQLite?
11:13 Installed by default in operating systems.
12:03 A perception that SQLite is intended for single users.
13:36 Convincing developers it’s a full-featured solution.
15:11 What does SQLite do better than Postgres or MySQL?
17:30 SQLite Cloud & local first features.
20:38 Where does SQLite store the offline information?
23:08 Are you typically reaching for ORMs?
25:00 What is SQLite Cloud?
27:29 What makes for an approachable software?
29:18 What make SQLite cloud different from other hosted SQLite options?
32:13 Is SQLite still evolving?
34:40 What about branching?
37:37 What is the GA timeline?
40:04 How does SQLite actually work?
41:19 Questions about security.
44:28 But does it scale?
45:52 Sick Picks + Shameless Plugs.
Sick Picks Brian: Trainer Road Marco: Tennis
Shameless Plugs Brian: SQLite Cloud, Frontend Masters - Containers.
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 Lees meer -
778: 11 Habits of Highly Effective Developers
5 juni 2024 · 51 min
Today, Scott and Wes dive into the 11 habits of effective web developers, from understanding stakeholder goals to maintaining a work-life balance. We’ll explore the importance of continuous learning, having a problem-solver mentality, and being empathetic towards coworkers and users—let’s get into it!
Show Notes 00:00 Welcome to Syntax! Previous Episode: 754. Lees meer00:50 Brought to you by Sentry.io. 01:24 Denver weather is something else.
02:15 Habit #1: You understand stakeholder and business goals.
05:34 Habit #2: You’re curious and always learning.
07:43 Habit #3: You have an open mind about new technology.
11:29 Habit #4: You ask for help.
13:43 Habit #5: You help others. 16:51 Chicken drumsticks.17:35 Habit #6: You have a “problem solver” mentality. 24:44 Hose repair.
26:02 Habit #7: You have fun with what you do.
29:56 Habit #8: You understand work-life balance.
33:18 Habit #9: You are empathetic to your co-workers and users.
37:19 Habit #10: You pay attention to detail.
41:18 Habit #11: You’re part of the community.
45:55 Sick Picks + Shameless Plugs.
Sick Picks Scott: Solar Lanterns.
Wes: Ninja Obstacle Course.
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 -
777: The Modern Dev CMS - Pocketbase
3 juni 2024 · 25 min
Today, Scott and Wes are diving into Pocketbase, a fantastic tool for web developers to quickly set up a CMS without breaking a sweat. We’ll cover everything from its Go-based architecture to its slick admin interface and how you can get started hosting it for free on Fly.io.
Show Notes 00:00 Welcome to Syntax!
01:34 Brought to you by Sentry.io.
02:26 Overview of Pocketbase.
06:51 Written in Go, but no extending needed. Host for free on Fly.io. Lees meer07:37 Hooks.
08:05 Authentication + roles.
09:23 The admin experience.
11:18 Managing export collections.
13:21 Creating your own schema.
13:53 Adding indexes.
14:08 API rules.
15:01 Adding complex roles.
16:15 Full-featured admin with a great UI.
16:59 Collection API preview.
17:41 Docs with app-specific context.
18:54 Logs.
19:02 Settings.
19:42 Executable vs npm install.
20:29 Are the collections fully typed?
21:01 Some more settings.
22:56 One click Coolify install. Svelte Kit / Svelte 5 / Pocketbase Example.
Svelte / Pocketbase Starter.
Pocketbase Typegen.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 -
776: How 1Password Uses WASM and Rust for Local First Dev With Andrew Burkhart
31 mei 2024 · 58 min
Today we’re serving up an episode on 1Password with Senior Rust Developer Andrew Burkhart, delving into how 1Password works, tackling conflict resolution and security challenges, and exploring the benefits of using Rust.
Show Notes 00:00 Welcome to Syntax
00:57 Who is Andrew Burkhart?
01:36 How does 1Password work?
03:24 What’s the data flow on creating a new login?
05:40 The conflict resolution challenges of pull first, push second.
06:46 Merging strategies: How do you chose which device wins the conflict?
08:27 1Password’s sync is fast and reliable.
11:20 Nuances of the extension.
12:59 The value of Hackathons.
13:40 What’s the main benefit of 1Password using Rust?
15:41 Watchtower processing.
17:15 1Password SSH.
18:17 1Password env.
19:11 Some other cool tools.
20:33 Does the increased security make developing challenging?
25:26 What’s 1Password’s security onboarding like?
27:47 1Password and WASM.
31:45 Tokio as the asynchronous runtime for Rust.
34:25 Scott’s Rust based video app.
35:03 What is an FFI?
38:13 How did you learn Rust? Jon Gjengset - Rust Nation UK YouTube.
Let’s Get Rusty YouTube. Lees meer41:13 Why is the 1Password team so big?
42:40 Are there teams that manage individual applications for errors?
43:45 Challenges with WASM.
48:59 Syntax horror stories. Episode 586 with Eric Sartorius.52:50 Sick Picks + Shameless Plugs.
Sick Picks Andrew: Nix Mini 3, Asynchronous Programming in Rust.
Shameless Plugs Andrew: 1Password.
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 -
775: Components We Need on Every Project
29 mei 2024 · 56 min
In today’s episode, Scott and Wes dive into the essential components they need on every web project, discussing whether to build them from scratch or leverage existing libraries—everything from navigation bars and modals to toast messages and icons.
Show Notes 00:00 Welcome to Syntax!
01:48 Brought to you by Sentry.io.
02:53 Nav / Mobile Nav.
08:43 Header.
10:41 Toast message. Wes’ TikTok Demo. Lees meer18:51 Portal.
21:02 Drawer.
22:56 Auth forms.
28:49 Dialog / Modal.
31:30 Whats the difference between popover and dialog?
33:48 Confirm. Scott’s YouSureAboutThat.35:46 Bonus tip on becoming a better developer.
36:29 Admin menu. Level Up Tutorials - Side Menu Demo.37:51 Scott’s package directory rant.
40:26 Mobile only / Desktop only.
40:41 Client only.
40:57 Admin table.
41:23 The dump.
43:39 Share / Social links. Syntax ShareWindow.45:44 Markdown renderer.
45:58 Tabs.
46:08 User menu.
46:18 Icon.
48:07 Loading.
49:21 Drop-down menu.
49:31 Accordion. CSS Tricks - How to Animate the Details Element.52:13 Sick Picks + Shameless Plugs.
Sick Picks Scott: Supercommunicators.
Wes: Klack, Mech Vibes.
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 -
774: Promise Flow Control, Concurrency, Libraries, TypeScript and Deferreds - Part 3
27 mei 2024 · 21 min
In today’s episode, Scott and Wes dive into the final part of our JavaScript Promises series, covering deferred promises, fetch, flow control, concurrency with libraries like p-map and p-limit, and integrating TypeScript.
Show Notes 00:00 Welcome to Syntax!
00:31 Brought to you by Sentry.io.
01:11 Deferred promises. Promise.withResolvers().
Wes’ TikTok. Lees meer06:10 Fetch.
09:04 Flow Control.
12:19 Concurrency, Throttling, Queuing. p-map.
p-limit.16:13 TypeScript and Promises.
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 -
773: React Native with Robin Heinze
24 mei 2024 · 57 min
Scott and Wes dish out a feast with Robin Heinze from Infinite Red, diving into the world of React Native. They discuss how React Native differs from other webview platforms, highlight popular apps built with it, and serve up essential tools and libraries to spice up every React Native project.
Show Notes 00:00 Welcome to Syntax!
01:13 Brought to you by Sentry.io.
01:30 React Native is different than Cordova or other webview platforms.
04:18 Is there a ‘write once deploy everywhere’ aspect?
05:48 What are some React Native apps people may not realize? Mercari: Buying & Selling App. Lees meer07:13 What about Twitter + Facebook?
09:15 What is Expo? Is Expo Required? expo.dev.13:27 Does it require a Mac to build an iOS app?
14:58 React Native and routing. Expo Router.16:56 How do native apps normally work without a URL?
18:35 Can you use CSS with React Native?
20:27 Do React Native or Tamagui translate to CSS or Yoga? Tamagui.
Yoga Layout.21:02 React Native app styling on Android and iOS.
22:20 React Native’s own JavaScript engine. React Native Docs: Using Hermes.23:30 Does Hermes have full JS support?
23:52 What is the new architecture of React Native? New Architecture.
React Native JSI.26:11 Avoiding translation errors.
27:24 Will this change break a lot of older React Native apps?
28:24 Has React Native improved update stability?
29:55 Where else can React Native run?
32:52 JavaScript on smart TVs and other smart devices.
33:57 Bridging to native APIs. Tauri.37:14 State management. Redux.js.
MobX State Tree.39:30 What are some tools + libraries that you install on most projects? JestJS.
Maestro.
Detox.41:58 How do you manage authentication?
44:55 Does Facebook use React Native?
47:15 Supper Club Questions.
50:29 Sick Picks + Shameless Plugs.
Sick Picks Robin: Awesome Sock Club Wes’ X Post.
Shameless Plugs Guest: Infinite Red, ChainReactConf, React Native Radio.
Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedI… -
772: React Server Components with PHP, Selling Accessibility, WTF is Cloudflare + more
22 mei 2024 · 1 uur
In this Potluck episode of Syntax, Scott and Wes tackle community questions on handling overwork, teaching programming to family, and React’s Server Components. They also discuss quantifying accessibility improvements, choosing course platforms, and navigating professional growth in challenging workplaces.
Show Notes 00:00 Welcome to Syntax! Thanks to Codeium.
Syntax Episode 728 with Codeium. Lees meer01:37 Brought to you by Sentry.io.
02:38 Rewarding hard work with more work.
07:14 April Fools Episode. Syntax Episode 750 on April Fools.09:03 Teaching programming to your family. Codespark.
15:56 React Server Components using JS runtime.
19:58 What happened to the intro music?
23:06 How can I quantify my work to the executive leadership team?
29:16 Should I host my own course website or use Udemy?
35:34 Navigating professional growth in toxic workplaces.
40:43 Getting started in native dev with tools like Tamagui. Syntax Episode 601 on Tamagui.45:42 Cloudflare, what the heck is it?
50:49 Sick Picks + Shameless Plugs.
You’re looking for this > Swag Drop.
Sick Picks Scott: Folex.
Wes: CalDigit TS4.
Shameless Plugs Scott: Syntax on YouTubeWes: Ditto
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 -
771: Promises: Error Handling, Aborts, and Helper Methods - Part 2
20 mei 2024 · 21 min
We’re diving into part 2 of our 3-part series on Promises, focusing on error handling, aborts, and essential helper methods. We’ll explore how to manage errors effectively and improve performance with abort signals. Let’s get into it!
Show Notes 00:00 Welcome to Syntax!
00:41 Brought to you by Sentry.io.
02:00 Cancelling promises.
05:16 Why would you reach for an abort signal?
06:26 Promise helpers. 07:04 Promise.all() vs Promise.allSettled().
09:12 promiseInstance.finally()
09:26 Promise.any() and Promise.race() Lees meer12:08 Error handling strategies. Tuple await-to-js.
Youtube - 5 Async + Await Error Handling Strategies.17:30 Promise.race() example.
18:54 Static Promise.reject() and .resolve() methods.
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 -
770: Design Systems With Brad Frost (Rereleased)
17 mei 2024 · 59 min
In this revisited supper club episode, Wes and Scott talk with Brad Frost about how to implement design systems in small and large scale projects, best practices around naming things, keeping everything in sync across different codebases, and how design systems help projects.
Show Notes 00:00 Welcome to Syntax!
00:49 Brought to you by Sentry.io.
01:14 Introducing Brad Frost.
Brad Frost.com.
Atomic Design by Brad Frost.
Brad (@brad_frost) on Twitter.
Brad on LinkedIn.
Brad on Mastodon.
Brad on YouTube.
Brad on GitHub.
Brad Frost on CodePen.
Big Medium | Design for What’s Next.
06:26 What is a design system?
11:48 How do you keep design and code in sync?
Material Design.
Shopify Polaris.
Carbon Design System.
The Design System Ecosystem | Brad Frost.
15:52 How do you use Shopify, WordPress, React, etc. through a design system?
19:19 How is CSS handled?
25:19 What’s the benefit of going all in on web components?
28:49 Do small startups need to worry about design systems?
32:36 How do design tokens work?
37:38 How do you deal with pushback on design systems?
41:05 How do you go outside the guidelines?
44:52 What system do you use for naming things?
49:06 How do you best document your language choices?
50:41 Supper Club questions.
Thinking in Systems.
Miriam Eric Suzanne.
Zeldman on Web and Interaction Design.
57:12 Sick Picks + Shameless Plugs.
Sick Picks Brad: Rubblebucket.
Shameless Plugs Brad: Frostapalooza! | Brad Frost, FROSTAPALOOZA - A Concert Party Happening On August 17th 2024.
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 Lees meer -
769: React Miami Live Show
15 mei 2024 · 34 min
Welcome to a special live edition of Syntax, recorded at React Miami! Join Scott and Wes as they dish out games galore, from Spot the Syntax Error to JS or NAYS, all while engaging with the audience in this lively session of coding camaraderie. Plus, who’s the better programmer? Stay tuned to find out!
Show Notes 00:00 Welcome to Syntax!
00:54 Meet the Syntax team.
01:22 The plan for today.
02:38 .map() .filter() .reduce()
06:39 Syntax Error.
15:37 JS or NAYS.
21:08 Audience Stump’d.
24:51 Q + EH.
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 Lees meer -
768: React 19 is here!
13 mei 2024 · 27 min
Scott and Wes serve up all the deets on the latest React 19 update, exploring new features like actions, web components, use()API, and document metadata. Stay tuned as they discuss the ins and outs of upgrading to React 19 and what it means for your projects.
Show Notes 00:00 Welcome to Syntax!
01:30 Brought to you by Sentry.io.
02:03 What’s in the update?
React 19 Beta Release Notes. 03:03 Actions + server actions. Syntax Episode 766.
04:54 Using server actions for a checkout. Lees meer06:11 Web components. Custom Elements Everywhere.
09:44 use() API. 10:31 With promises.
14:25 With context.
17:32 How does Zustand work? Stately.ai.
X @DavidKPiano.18:26 No more ForwardRef.
20:05 Ref cleanup.
20:43 Document metadata.24:14 Upgrading to React 19.
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
10 mei 2024 · 56 min
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 Lees meer52: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 -
766: React Server Components: Form Actions + Server Actions
8 mei 2024 · 47 min
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 Lees meer04: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 -
765: JS Promises Fundamentals - Part 1
6 mei 2024 · 22 min
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. Lees meer08: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 -
764: Biome JS with Emanuele Stoppa
3 mei 2024 · 52 min
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 Lees meer -
763: Web Scraping + Reverse Engineering APIs
1 mei 2024 · 53 min
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 Lees meer46:42 Wes’ portable refrigerator utopia.
47:25 Sick Picks & Shameless Plugs.
Sick Picks Scott: KeyboardCleanTool.
Wes: Yabai.
Shameless Plugs Scott: Syntax on YouTubeHit 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 -
762: What to Steal. Finding Inspiration in Web Development
29 april 2024 · 38 min
Scott and Wes discuss the delicate balance of what’s acceptable to borrow or be inspired by in web development and what crosses into territory that’s off-limits. Tune in as they share personal experiences, discuss where to find ethical inspiration, and offer tips on how to effectively capture and utilize it.
Show Notes 00:00 Welcome to Syntax!
01:57 Brought to you by Sentry.io.
02:26 What is okay to steal? 02:57 Color palettes.
03:14 Font stacks.
06:26 Type scales. Warp’s CSS Gradient Border.
Sentry’s Date Picker. Lees meer08:52 General layout patterns.
10:39 General vibes.11:20 What is NOT okay to steal? 11:26 Whole site designs.
13:32 Taking too many things from ‘what to steal’ list.
16:30 Text copy. Wes’ Parity Purchasing Power.18:48 What we’ve had stolen + how it feels.
21:45 Where to find inspiration. 21:56 Code inspiration. CSS Scan Buttons.
CSS Scan Box Shadows.
Codrops.
CodePen25:18 Design inspiration. Bentro Grids.
Dribble.
Site Inspire.
SaaS Landing Pages.
One Page Love.
Type Wolf.
Mobbin.
Syntax Newsletter.
Hoverstat.es.
Internet Gems.32:48 UX inspiration. Good UI.
The Component Gallery.
Open UI.
Nicely Done.35:25 How to capture inspiration.
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 -
761: Cloudflare Analytics Engine, Workers + more with Ben Vinegar
26 april 2024 · 52 min
Scott and Wes dive into Cloudflare’s Analytics Engine and Workers with special guest Ben Vinegar, Syntax’s General Manager. Tune in as they explore Clickhouse, data tracking, infrastructure costs, and transitioning from software products to managing a podcast.
Show Notes 00:00 Welcome to Syntax!
01:17 Who is Ben Vinegar?
Episode 434 with Ben.
02:21 Brought to you by Sentry.io.
04:00 Cloudflare analytics engine.
Counterscale.dev.
Episode 634 with Armin.
09:08 What is clickhouse?
11:01 Can Clickhouse be used for things outside of analytics tracking?
13:46 What kind of events are you able to track?
15:00 How do you assign values to track?
Counterscale Schema.
18:40 Data type limitations.
19:55 The troubles with sampling data.
23:57 Sample intervals.
24:24 Pricing for these services.
25:34 How it actually runs.
27:31 Infrastructure costs and pricing models.
30:19 Running production apps in Cloudflare.
31:49 Cloudflare and HonoJS.
32:47 One year with Sentry and Ben’s role with Syntax.
Episode 600 with David.
39:33 How does it feel going from a software project to a media project?
Syntax Team.
43:00 How do you sell Syntax to Sentry?
48:37 Sick Picks & Shameless Plugs
Sick Picks Ben: Randy’s YouTube, Boom.
Shameless Plugs Ben: Counterscale.dev Lees meerHit 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 -
760: Pro VSCode Setups
24 april 2024 · 1 uur 6 min
Join Scott and Wes as they dish out the juiciest VSCode secrets for coding like a boss (or a Tolinski)! From speedy navigation to must-have extensions and the sickest themes, get ready to level up your coding game.
Show Notes 00:00 Welcome to Syntax!
00:47 Brought to you by Sentry.io.
01:44 A recording bug.
03:18 VSCode versions.
05:59 Tabs or no tabs.
10:32 Navigation tips.
11:35 Mouse and trackpad input.
13:43 Move, select and expand by
19:07 Interface tips.
19:17 Sidebars.
24:23 Sticky headers.
26:21 Activity bar.
30:30 Show or hide?
31:35 Profiles.
32:43 Keyboard Shortcuts.
32:49 Renaming.
34:32 Extensions. 34:45 Text pastry.
36:43 Better comments.
39:03 Auto rename tag.
40:02 Change case.
40:25 Permute lines.
41:26 File utils.
43:20 Sort JSON objects.
43:50 SQLite viewer.
44:29 Spell checker.
45:42 APC. Lees meer49:19 Themes.
Syntax Theme53:05 Final tricks.
Log Wrapper57:44 What about the AI stuff?
01:00:10 Sick Picks & Shameless Plugs.
Sick Picks Scott: Flicker Free Ultra Definition Phillips Bulbs.
Wes: Clear Shoe Box Organizers.
Shameless Plugs Scott: Syntax Newsletter.
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 -
759: How to Easily Explore Coding Ideas
22 april 2024 · 32 min
Scott and Wes serve up top tools and tricks for rapid idea execution, from JavaScript services like Valtown and Observable to database solutions including LowDB and Google Sheets integration. Get ready to streamline your development ideation process with these tasty insights!
Show Notes 00:00 Welcome to Syntax!
02:16 Brought to you by Sentry.io.
03:14 JavaScript Services. 03:43 Valtown.
05:44 Observable.
06:35 Notebooks.
08:23 Deno Juypter Notebooks.
09:51 Svelte Repl.
10:32 Playgrounds: TypeScript, Tailwind, etc… Lees meer11:05 CSS Services. 11:10 CodePen.
13:14 Full stack services.
13:47 Your own stack. Hot Tips & Cool Treats. Wes’s Hot Tips.
Scott’s Cool Treats.
21:01 Bun file routing.
24:25 Tooling and tips.26:30 Database. 26:51 Write to a file.
27:40 LowDB.
29:00 SQLite + Drizzle.
29:40 Google Sheets.
30:06 Sheet DB.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 -
758: Web Awesome with Konnor Rogers + Cory LaViska
19 april 2024 · 1 uur 1 min
Font Awesome is back with Web Awesome, an open source library of web components that will work with any framework because it’s based on standards. Today on Syntax we have Konnor Rogers and Cory LaViska here to talk all things Web Awesome.
Show Notes 00:00 Welcome to Syntax!
00:47 Brought to you by Sentry.io.
02:49 What is Shoelace?
07:21 What is Font Awesome?
08:07 Font Awesome is getting into Web Components?
11:35 What is Shoelace’s relationship with Web Awesome?
13:33 Is the idea to make it quick to get up and running?
15:46 What is the autoloader?
16:29 Where does Web Awesome fit in the ecosystem?
18:13 What does the styling game look like?
20:33 What is Part in CSS?
CSS Part mdn web docs Lees meer22:06 The reason we’re so stoked with Web Components.
23:32 Custom elements are a natural progression.
24:51 What are your thoughts on Open UI initiatives?
Floating UIClose Watcher
Can I Use
27:40 Wes’ escape key conundrum.
30:21 A bug on the Syntax site.
31:19 Let’s talk about Kickstarter.
35:24 Do you know what premium inputs will be available in Web Awesome?
36:12 Rich text editor.
40:18 Setting goals.
41:48 Kickstarter giveaways.
42:47 Have you tried drag and drop?
Pragmatic Drag and Drop44:57 The layout component.
48:50 What are your favorite components?
50:29 Sick Picks + Shameless Plugs.
Sick Picks Konnor: Enhance.dev, Extism.orgCory: Lit.dev
Shameless Plugs Cory: Kickstarter
Konnor: Everyone involved in open UI
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 -
757: Potluck: Is Gatsby Dead? Shadow Dom, AI Summaries, Self Hosting + More
17 april 2024 · 49 min
Scott and Wes serve up answers to community questions, from navigating Light DOM vs. Shadow DOM to diving into tools for data extraction. Plus, they dish out insights on Gatsby in 2024, utilizing JavaScript ‘wheel events’, and explore the possibilities of hosting a website at home.
Show Notes 00:00 Welcome to Syntax!
00:51 Brought to you by Sentry.io.
01:17 When should I use Light DOM or Shadow DOM?
03:43 Do you know of any good tools for extracting data/content from Markup/HTML?
LinkeDOM on GitHub Lees meer08:29 Wanted to ask you guys your opinion on the state of Gatsby in 2024.
LocalFirst.fmMeteorJS UI Updates
15:05 Please get the Goodhertz creator on the pod! Would be a great show.
Goodhertz Audio Software16:34 Effects that involve the JavaScript ‘wheel’ event.
Runway.comGSAP Animate Anything
CSS Scroll-Driven Animations
23:15 Best tool for rapidly creating UI from the ground up.
Episode 751Thinkmill.com
27:44 Wes, what’s with your frame rate?
Frame Rate Testing Results on X32:31 Is there any way to host a whole website setting on my PC at home?
CJ and Self-Host 101Hetzner.com
Cloudflare Docs Create a Tunnel
36:52 Offline functionality like saving data and syncing data to database?
Episode 739Local-First Web Development
Syntax Side Dish Explainer Playlist
39:41 Creating a GPT-like tool that can listen to long audio files.
OpenAI Speech to TextInsanely Fast Whisper
Deepgram
43:51 Sick Picks.
Sick Picks Scott: Hair PowderWes: Mini Grease Gun
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 -
756: CSS Is Getting Mixins + Functions
15 april 2024 · 26 min
Scott and Wes chomp through CSS Mixins and Functions, discussing the latest features making their way into CSS. From Tailwind-like classes to fluid typography, join us as we explore the possibilities and practical applications of these new tools.
Show Notes 00:00 Welcome to Syntax!
01:24 Brought to you by Sentry.io Lees meer03:00 CSS Is getting Functions and Mixins!
CSS Mixins and Functions ExplainerCSS Working Group Discussion
06:19 Functions and mixins, how are they different?
07:26 Don’t get hung up on the syntax, or maybe do.
09:12 CSS Functions.
12:02 Some use-cases.
15:58 CSS Mixins.
16:31 Tailwind-like classes.
17:53 Tailwind-like arbitrary syntax.
20:08 Fluid typography.
21:13 Let’s talk about logic.
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 -
755: Chrome Extensions and Ad Blockers VS Google with Oliver Dunk
12 april 2024 · 54 min
We were wrong, Manifest V3 is a big deal. Scott and Wes sit down with Oliver Dunk from Google to dive into the intricate world of Chrome Extensions development. From dissecting Manifest V3 to exploring the evolving landscape of browser security and extension reviews, this conversation covers the present and future of browser customization.
Show Notes 00:00 Welcome to Syntax!
00:32 Who is Oliver Dunk?
02:00 Brought to you by Sentry.
03:17 Manifest V3.
08:59 How many rules can you add?
09:56 What even is a rule?
10:52 Is Google trying to kill ad blockers?
13:56 What are the bad guys doing with Chrome extensions?
15:17 Can a browser extension access HTTP-only cookies?
16:06 Is Chrome reviewing all of these extensions?
19:06 Is there a way to side-step Google’s review process?
Reddit Thread, The real threat of Manifest V3 Lees meer20:32 Do you see the negative chatter?
21:18 Service workers - how do do you access the DOM?
23:32 Do you think we’ll see more DOM APIs in service workers?
25:58 Do you have a favorite Chrome extension?
28:33 Has Google ever explored something comparable to Boost?
SidePanel33:09 Let’s talk about the development stack.
35:54 1Password and Chrome.
38:39 What is the best way to debug an extension?
YouTube Chrome for Developers40:33 Manifest V3 and the web request blocking API.
41:57 Known tracking payloads.
44:04 Do you think there is a path forward that makes ad-block developers happy?
44:45 Do you run an ad blocker?
45:20 Whitelisting and opt-ins.
46:38 What’s your tech setup?
47:18 What do you do to stay up to date?
47:51 Sick Picks + Shameless Plugs.
51:47 Wait, is Safari adopting V3 as well?
Sick Picks Oliver: Defunctland YouTube, LEMMiNO YouTubeShameless Plugs Oliver: Chrome Extensions Getting Started, WebExtension Playground
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 -
754: How to Level Up Your Web Development Career
10 april 2024 · 57 min
Ready to level up your career in web development? Join Wes and Scott as they discuss techniques and best practices for advancing in the field. From mastering technical skills to navigating workplace dynamics, this episode offers actionable advice to help you thrive in your career.
Show Notes 00:00 Welcome to Syntax!
00:17 How can a front-end developer advance in their career?
01:10 Brought to you by Sentry.
01:30 Syntax newsletter.
Snack Pack Lees meer02:02 How do you get better at being a developer? 02:22 Asking questions.
08:09 Get your hands dirty.
Hot Tips, Cool Treats14:07 Share what you know.
17:35 Target your skills for what is needed.
Ryan Carniato TweetEpisode 577
Justin Fagnani Tweet
Episode 595
21:12 Get out of your comfort zone.
26:55 Getting a better job. 27:27 Understand the stakeholders.
29:18 Find the metric the business cares about and do that.
30:01 Make an impression as being the person that gets things done fast and reliably.
31:47 Improve communications.
35:04 Be the person they want to have in meetings.
37:44 Use systems and tools to help your deficiencies.
39:01 Dress to impress.
39:32 Care.
39:40 Cut the cynicism.
Energy Vampire42:16 Don’t put bad stuff out into the world publicly.
44:29 Get your camera + mic dialed in.46:23 Leveling up at life. 46:32 Take care of your shit.
47:40 Exercise.
Episode 74847:57 Eat well.
48:22 Sleep as much as you can.
48:26 Clean your workspace.
49:17 Learn new skills.
49:31 Take care of yourself.
Habit Path54:09 Sick Picks.
Sick Picks Scott: Zeiss Lens Care PackWes: Woosh Screen Cleaner
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 -
753: Cache Ruins Everything Around Me
8 april 2024 · 24 min
Scott and Wes dive into the cache problem, tackling user-specific data and caching security. From marketing A/B testing to content negotiation, they explore various challenges and solutions, including different URL/query parameters, edge logic, and client-side caching.
Show Notes 00:00 Welcome to Syntax!
01:22 Syntax is on YouTube.
02:16 Let’s talk about the cache problem.
03:33 User-specific data and caching security.
06:27 Why might this pop up? 06:29 Marketing A/B testing - cookie based.
06:55 User-selected features - such as themes.
06:58 Language or geo-based items - accept language.
07:11 Images - WebP for some browsers, jpg for others.
07:45 JSON/HTML based on accept header.
08:17 Different encoding. Lees meer08:26 Content negotiation.
08:54 The solutions. 09:04 Provide different URLs/Query parameter.
11:19 Don’t cache the page, cache the data based on query.
15:01 Implement a “Cache Key” - one render for every option.
NetlifyFastly
Cloudflare
18:17 Use edge logic.
19:52 Just do it client-side.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 -
752: React vs Vue vs Angular with Corbin Crutchley
5 april 2024 · 58 min
Which framework is best? Join Scott and Wes as they chat with Corbin Crutchley, author of the “Framework Field Guide”, diving into the world of frameworks, metaframeworks, and tips to stay up-to-date on the latest trends in web development.
Show Notes 00:00 Welcome to Syntax!
00:48 Who is Corbin Crutchley?
02:08 Brought to you by Sentry.io.
02:32 Hilton, like the hotel?
05:57 What is the best framework?
07:23 How do you compare these frameworks?
10:00 Do you feel like the metaframeworks are comparable?
11:02 Exciting announcements from ng-conf?
11:42 Are Wiz and Angular merging?
14:17 Angular signals and Vue comparison.
PreactJS Signals Lees meer17:53 Adding signals to vanilla JavaScript and browsers.
21:02 What is derived state?
23:11 How can we store state within these different frameworks?
24:37 Passing children.
26:40 Which has the best implementation for passing children?
28:52 What’s the approach for building framework agnostic components?
TanStack Store30:31 How much of it is framework specific?
31:35 Headless or DOM-based?
32:48 What are the best practices for writing this?
35:28 What’s the biggest framework pain point?
36:21 Is there a language that requires significantly more code?
38:52 What about Web Components?
39:58 Your book is free?
Framework Field GuideShout-out Eduardo Pratti and Kevin Aguilar.
42:42 What’s the process of writing a book like this?
45:44 Not a physical book?
46:17 Walk us through the tech stack.
48:27 Supper Club Questions.
48:33 What text editor, theme and font do you use?
49:53 What terminal and shell do you use?
50:19 How do you stay up to date?
53:39 Do you have advice for beginners?
55:26 Sick Picks + Shameless Plugs.
Sick Picks Corbin: Shiki Syntax HighlighterShameless Plugs Corbin: Framework Field Guide
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 -
751: UI Components: ShadCN, Tailwind UI, Headless, React Aria, Radix UI
3 april 2024 · 1 uur 6 min
Scott and Wes explore UI Components, discussing functionality, styling, accessibility, and theming. From headless components to styled starters, they share valuable insights to elevate your UI game.
Show Notes 00:00 Welcome to Syntax!
02:39 We’re on YouTube.
03:14 The four categories of UI libraries or frameworks.
03:46 What does a UI component need to do? 04:14 Must be functional.
06:20 They must fit styling.
06:33 They must be accessible.
08:09 “Internationalizationable.”
09:29 They must handle theming and variants. Lees meer10:05 A few common UI components. 10:14 Date Pickers.
12:10 Dropdowns.
13:21 Toast message.
Svelte French Toast15:11 Some honorable mentions.
16:10 Headless components. 18:54 React Aria.
Behavior, Accessibility, Internationalization19:34 Radix UI Primitives.
20:16 Downshift JS.
21:29 Tanstack Table and Forms.26:00 Unstyled components. 28:04 Shoelace.
32:47 React Aria Components.
33:00 Headless UI.
33:04 Radix UI.
37:12 Base UI.38:23 What’s up with Google’s design?
40:22 Styled Starters. React Aria Components StarterShadCN
Tailwind Catalyst
MeltUI
47:50 What is the process for overriding with custom elements.
51:10 UI Kits and Design Systems.
53:06 Some things to consider.
JS Nation55:41 A few more options to consider. Pigment CSS
Base UI
Shoelace
BaseLayer
JollyUI
DraftUI
Radix UI
PenguinUI
Tailwind CSS
TailwindUI
VerveUI
DaisyUI
ChakraUI
Flowbite
FloatingUI
Downshift JS
Mantine
59:02 Sick Picks & Shameless Plugs.
Sick Picks Wes: Battery DaddyScott: Lazy Susan, Rechargeable Batteries, Charger
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 -
750: New CSS and JavaScript You Should Be Using
1 april 2024 · 24 min
Get stoked, jQuery 1.2 is here! Join Scott and Wes as they discuss jQuery Mobile, slicing PSD files, CSS rounded corners, CoffeeScript features, WordPress 2.3, and the rise of Skeuomorphism, shaping the landscape of web development this year.
Show Notes 00:00 Welcome to Syntax!
01:16 Brought to you by Sentry.io.
02:17 jQuery 1.2 released!
07:38 jQuery Mobile.
09:34 Skeuomorphism.
10:25 How do you slice up your .PSDs?
Slicy By MacRabbit Lees meer12:34 Cufon, new font method.
14:06 CSS rounded corners.
CSS3Please15:17 Coda Tip.
16:48 Top 5 CoffeeScript Features.
18:44 Conference Talks to Spotlight.
BatmanJS, your new favorite JavaScript superhero20:35 WordPress 2.3!
21:15 PHP 5.2.0
PHP 5.2.0 Release Announcement21:53 Sponsored by Media Temple.
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