In this Hasty Treat, Scott and Wes talk about headings on your website, why you should care, how to structure your headings, and what tooling is there for testing your website? Show Notes   00:26 Welcome  01:21 Syntax Brought to you by Sentry  01:41 Why do we care about Headings?   How-to: Accessible heading structure - The A11Y Project  03:12 Heading design provides an outline for your website  08:45 Using H1 classes?  10:28 Is the logo an H1?  13:03 Giving an ARIA level  17:14 Can headings be visually hidden?  21:00 Benefits of good heading design  22:27 Tooling  Heading outlines - ADG   HTML Standard  Polypane, The browser for ambitious web developers   HeadingsMap - Chrome Web Store  HeadingsMap – Get this Extension for 

674: A11y Treats - Heading Design

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

 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.    00: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

778: 11 Habits of Highly Effective Developers

 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.    07: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

777: The Modern Dev CMS - Pocketbase

 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.    41: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

776: How 1Password Uses WASM and Rust for Local First Dev With Andrew Burkhart

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.    18: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

775: Components We Need on Every Project

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.    06: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

674: A11y Treats - Heading Design

Download our free app to listen on your phone