What’s Missing From the Web Platform - CourtneyR.dev's 2nd Brain

What’s Missing From the Web Platform? 🔗 **Source:** [What’s Missing From the Web Platform?](https://www.youtube.com/watch?v=bdw10C0wxiQ) > [!note]+ Document Notes > tags: [web-platform, web-apis, browser-development] > author: Syntax > source: YouTube > reference: https://www.youtube.com/watch?v=bdw10C0wxiQ > date created: 2025-01-26 22:30 > > # 🏷️ Title: What's Missing From the Web Platform? >  ## 🧰 Action Inbox - [H1] Research customizable select implementation — current browser support #web-platform - [H2] Test content visibility CSS property performance — compare with virtualization libraries #css - [H3] Explore Bluetooth/Serial APIs for device integration — check Safari support status #apis ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [Syntax Podcast](https://syntax.fm) - [Open UI Community Group](https://open-ui.org) ## 📝 Summary - Comprehensive review of missing web platform features across DOM primitives, JavaScript syntax, APIs, CSS, and browsers - Focus on practical developer needs like better form controls, TypeScript integration, device APIs, and styling capabilities - Discussion covers current implementations, browser support status, and realistic timelines for adoption - Key stakeholders include web developers, browser vendors, standards committees, and the broader web community - Balance between idealistic wishes and practical constraints of web standards development ## 📖 Main Content Wes Boss and Scott Tolinski explore the current gaps in web platform capabilities, examining what developers need most for building modern web applications. The discussion spans five main categories: DOM primitives, JavaScript language features, Web APIs, CSS improvements, and browser enhancements. The conversation highlights the tension between developer desires for comprehensive native solutions and the complex reality of web standards development. Many proposed features require careful consideration of backwards compatibility, security implications, and cross-platform consistency. Key themes include the move toward customizable, accessible UI primitives (like the new customizable select), the ongoing push for TypeScript integration, and the need for better device integration APIs. The hosts acknowledge their "idealistic" perspective while recognizing the valid constraints that slow standards adoption. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/bdw10C0wxiQ?t=0) — [H1] Introduction and Context - Key idea: Web platform has improved dramatically but gaps remain for optimal app development - Evidence: "Last two or three years, we've gotten this massive swath of APIs" #### ⏱️ [03:45](https://youtu.be/bdw10C0wxiQ?t=225) — [H2] Better DOM Primitives - Key idea: Current form controls lack styling flexibility and good defaults - Evidence: "Nobody uses those primitives aside from input type text and email" #### ⏱️ [05:23](https://youtu.be/bdw10C0wxiQ?t=323) — [H3] Customizable Select Success - Key idea: New customizable select demonstrates proper approach to modern primitives - Evidence: "Full control over CSS without giving up accessibility and keyboard control" #### ⏱️ [08:15](https://youtu.be/bdw10C0wxiQ?t=495) — [H2] Date Picker Complexity - Key idea: Date pickers too complex for universal browser primitive - Evidence: "Range inputs, prices for flights, not allow selecting certain ones - far too complex" #### ⏱️ [12:45](https://youtu.be/bdw10C0wxiQ?t=765) — [H1] JavaScript Syntax Additions - Key idea: TypeScript integration and pipe operator top developer requests - Evidence: "Types as comments proposal - browser would treat TypeScript syntax as comments" #### ⏱️ [15:30](https://youtu.be/bdw10C0wxiQ?t=930) — [H3] Pipe Operator Status - Key idea: Long-requested pipe operator stuck in standards limbo - Evidence: "Stage two and last updated 3 years ago - not looking great" #### ⏱️ [18:20](https://youtu.be/bdw10C0wxiQ?t=1100) — [H1] Cookie Banner API Need - Key idea: Standardized consent management could solve web's cookie banner mess - Evidence: "Cookie banners coded poorly, dark patterns all over the place" #### ⏱️ [22:10](https://youtu.be/bdw10C0wxiQ?t=1330) — [H2] Device Integration APIs - Key idea: Bluetooth and Serial APIs exist but lack cross-browser support - Evidence: "Safari says no way, Firefox hasn't implemented it" #### ⏱️ [25:40](https://youtu.be/bdw10C0wxiQ?t=1540) — [H3] Native Reactive Templates - Key idea: Browser-native reactivity would eliminate framework overhead for simple cases - Evidence: "Variable in DOM, when variable updates, so does DOM" #### ⏱️ [28:15](https://youtu.be/bdw10C0wxiQ?t=1695) — [H2] CSS Improvements Needed - Key idea: Speed-based animations and strict mode could modernize CSS - Evidence: "Specify pixels per second rather than duration" #### ⏱️ [32:30](https://youtu.be/bdw10C0wxiQ?t=1950) — [H1] Browser Engine Diversity - Key idea: Safari moving to Chromium would harm web ecosystem - Evidence: "Do not want single browser engine - causes web to stagnate" #### ⏱️ [35:45](https://youtu.be/bdw10C0wxiQ?t=2145) — [H2] AI API Considerations - Key idea: Premature AI APIs could repeat web components mistakes - Evidence: "Don't rush APIs based on current needs - people won't use them" #### ⏱️ [40:20](https://youtu.be/bdw10C0wxiQ?t=2420) — [H3] Local AI Model Access - Key idea: Browser access to device AI models could enable private, fast inference - Evidence: "Chrome downloading small model, runs on machine - slow but promising" ## 📚 References - [Customizable Select Specification](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) - [Open UI Community Group](https://open-ui.org/) - [Web Bluetooth API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API) - [TypeScript Types as Comments Proposal](https://github.com/tc39/proposal-type-annotations) ## 🗣️ Paraphrase - Web developers want better native form controls that can be fully styled while maintaining accessibility - TypeScript integration into browsers would eliminate build steps for many projects - Device APIs like Bluetooth and Serial exist but need broader browser support for mainstream adoption - CSS needs modernization through strict mode and physics-based animations - AI APIs should wait until use cases mature to avoid premature standardization ## 📰 Newsletter **Web Platform Wishlist: What Developers Really Want** The web platform has evolved tremendously, but key gaps remain that force developers toward complex toolchains and third-party libraries. The biggest wins would come from better native form controls (following the customizable select model), broader support for device integration APIs, and eventual TypeScript integration. For WordPress developers, these improvements could mean simpler admin interfaces, better mobile experiences, and reduced plugin complexity. Native reactive templates could replace some jQuery dependencies, while device APIs could enable innovative WooCommerce integrations. **Key Takeaways:** - Test the new customizable select for accessible dropdowns - Monitor Bluetooth/Serial API support for device integrations - Consider how TypeScript adoption affects WordPress development **Resources:** [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### DevRel - Developer advocacy: Create demos showcasing new web primitives, track browser support metrics - Education: Workshop series on modern web APIs, progressive enhancement strategies - Developer experience: Documentation gaps for emerging APIs, SDK updates for new primitives - Developer marketing: Content series on web platform evolution, practical migration guides - Community management: Gather developer feedback on missing features, browser wishlist surveys #### OSPO - Policy & Governance: Web standards participation guidelines, browser compatibility policies - License Compliance: Review new web API implementations, open source browser components - Security Management: Device API security assessments, permission model reviews - Software Inventory: Catalog web platform dependencies, track polyfill usage - Developer Support: Browser compatibility tooling, feature detection training - Community Engagement: W3C working group participation, standards body coordination - Strategic Alignment: Web platform roadmap alignment with product goals #### Community - Maintainers: Browser API polyfill maintenance, feature detection libraries - Contributors: Web standards specification contributions, implementation feedback - Sponsors: Browser engine funding transparency, standards development support - Ecosystem: Cross-browser testing coordination, progressive enhancement advocacy #### WordPress - Core: Native web API adoption timeline, jQuery dependency reduction strategy - Core Performance: Web platform optimization opportunities, bundle size impact analysis - Core AI: Local AI model integration planning, privacy-first implementation - Mobile: Progressive Web App enhancements, device API integration opportunities - Playground: New web feature demonstrations, compatibility testing environments - Community: Developer education on modern web APIs, best practices documentation - Design: Native form control styling strategies, accessibility compliance with new primitives - Documentation: Web platform feature coverage, browser support matrices ## 🧪 Hypotheses - Native web primitives will reduce JavaScript bundle sizes and improve accessibility compliance - TypeScript integration will accelerate adoption of type-safe development practices - Device APIs will enable new categories of web applications previously requiring native apps - CSS modernization will reduce preprocessing tool dependency ### 📊 Methodology - Browser compatibility tracking across primitive implementations - Performance benchmarking of native vs library-based solutions - Developer adoption surveys for new web platform features - Accessibility testing with native primitives vs custom implementations ### ❓ Questions - How will AI APIs balance local processing with cloud capabilities? - What security models will enable safe device integration? - Can CSS strict mode provide meaningful backwards compatibility breaks? ### 🔮 Future Research - Impact of local AI models on web application architecture - Performance characteristics of native reactive templates - Developer productivity gains from reduced toolchain complexity ### 💡 Implications - Practice: Simplified development workflows, reduced dependency management - Policy: Browser vendor coordination on feature priorities, standards development funding - Security: Device access permission models, privacy implications of local AI - Education: Updated curriculum for modern web development, framework-agnostic approaches - Funding: Resource allocation for standards implementation, cross-browser compatibility testing ### 🧠 Learning Styles Assessment Reading level estimate: 12th grade #### 👀 Visual learners - Present: None in audio format - Improve: Browser compatibility charts, API architecture diagrams, timeline visualizations #### 🔊 Aural learners - Present: Full podcast discussion available - Improve: Timestamped audio clips for specific topics #### 🗣️ Verbal learners - Present: Clear explanations of technical concepts, real-world analogies - Improve: Glossary of web standards terminology #### 🧩 Kinesthetic learners - Present: Code examples mentioned - Improve: Interactive demos of new web APIs, hands-on tutorials #### 🧠 Logical learners - Present: Structured progression through categories, cause-effect relationships - Improve: Decision trees for API selection, compatibility matrices #### 🧑‍🤝‍🧑 Social learners - Present: Discussion format, community feedback references - Improve: Developer survey results, collaborative wishlist building #### 🧘‍♀️ Solitary learners - Present: Individual listening experience - Improve: Self-assessment checklist, personal project planning templates #### 🌿 Naturalistic learners - Present: Evolution metaphors for web platform development - Improve: Ecosystem thinking about browser diversity, sustainability considerations ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Audio content with clear topic transitions - Improve: Transcript with proper heading structure, landmark navigation #### Keyboard navigation - Present: Standard audio player controls - Improve: Keyboard shortcuts for timestamp navigation #### Contrast and readability - Present: Audio format removes visual contrast concerns - Improve: High-contrast transcript styling #### Text resizing and reflow - Present: N/A for audio content - Improve: Responsive transcript layout #### Media and captions - Present: Full transcript provided - Improve: Synchronized captions, downloadable transcript #### Forms and interactions - Present: Simple audio playback interface - Improve: Accessible timestamp jumping, chapter navigation ### 🌍 DEIB Assessment #### Cultural breadth - Present: North American perspective on web development - Improve: Global browser usage patterns, international standards perspectives #### Inclusive language - Present: Technical discussion with some informal language - Improve: More careful use of ableist language ("that sucks"), gender-neutral examples #### Neurodiversity support - Present: Clear topic segmentation, consistent format - Improve: Content warnings for strong opinions, summary bullets #### Representation - Present: Two white male voices discussing technical topics - Improve: Diverse guest perspectives, broader community input #### Psychological safety - Present: Respectful disagreement, acknowledgment of constraints - Improve: More explicit validation of different viewpoints, beginner-friendly framing ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Browser engine diversity argument well-structured (32:30) - Inductive strength: Good pattern recognition from past API failures (35:45) - Causal reasoning: Clear connections between missing features and developer pain (03:45) - Analogical strength: Effective comparison to jQuery adoption (40:20) #### Fallacies - False dichotomy: "Just do TypeScript" vs complex standards process - oversimplifies implementation challenges - Appeal to popularity: "Everyone uses TypeScript" - doesn't address technical constraints #### Tone of voice - Overall tone: Enthusiastic but pragmatic, acknowledges idealism while respecting constraints ### 🛡️ DARVO Analysis - Deny: No denial patterns present - Attack: Mild criticism of slow standards processes but constructive - Reverse victim/offender: No victim/offender dynamics - Emotional cues and rhetoric: Passionate advocacy balanced with technical realism ## 🎯 Conclusion The web platform has made tremendous progress but still lacks key primitives that force developers into complex toolchains. The most impactful near-term improvements would be broader support for existing APIs (Bluetooth, Serial) and completion of in-progress primitives (customizable select, combo box). Longer-term wins like TypeScript integration and AI APIs require careful consideration to avoid premature standardization mistakes. Developers should engage with standards processes, test new features as they become available, and provide feedback to browser vendors. The balance between developer convenience and platform stability requires ongoing collaboration between the community and standards bodies. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] Customizable select enables accessible custom dropdowns > [!quote] [What's Missing From the Web Platform?](https://www.youtube.com/watch?v=bdw10C0wxiQ) by [[Syntax]] via [[YouTube]]. Published 2025-01-26. Accessed 2025-01-26. > "Full control over all of the CSS, what it looks like, without having to give up accessibility and keyboard control" Demonstrates proper approach to modern web primitives - functionality with customization. [view highlight](https://youtu.be/bdw10C0wxiQ?t=323#H1) #web-primitives #accessibility ID:rw_001 ### [H2] Cookie banner APIs needed for standardized consent > [!quote] [What's Missing From the Web Platform?](https://www.youtube.com/watch?v= --- ## Full Transcript [00:00] Welcome to syntax. Today we're talking [00:02] about what is missing from the web [00:04] platform. The the web platform, [00:06] JavaScript, CSS, browsers, runtimes, [00:10] syntax, APIs, all of that stuff. The [00:12] last I don't know, maybe two or three [00:14] years, we've gotten just this massive [00:17] swath of of APIs that if if you walk up [00:20] to most developers and say, "Hey, like [00:22] like what do you need? What's missing?" [00:24] Uh, a lot of people will go, hm, like, [00:27] man, things are actually in a pretty [00:29] good shape, but there's still a handful [00:32] of things that are are missing from the [00:35] web, from us being able to build the [00:37] best apps possible. So, what we're going [00:39] to do is we asked uh we asked on [00:41] Twitter, me and Scott have a huge list [00:43] ourselves, a big wish list. We're going [00:45] to go through all of the different [00:46] things that we wish we had from like [00:48] primitives in the UI, different types of [00:51] syntax we'd like to see added to to [00:53] JavaScript, different APIs we'd like [00:55] added, um, Bluetooth, serial, NFC, and [00:59] then CSS, browsers, as well as, of [01:02] course, we'll talk about the AI access, [01:04] um, and what those APIs might even look [01:06] like in the browser. My name is Wes [01:08] Boss. I'm a developer from Canada. With [01:09] me as always is Scott Tinsky. Scott's a [01:12] little hurt today. You want to give us [01:14] the lowdown? [01:14] >> I don't, you know, I'm always hurty. I [01:16] feel like uh I feel like every other [01:17] episode we do, I got some something [01:19] going on. [01:20] >> Some ailment. [01:21] >> Some ailment. Yeah. No, I had I had an [01:23] elective surgery done. I couldn't [01:26] breathe. I had a deviated septum, so [01:28] they had to go in and uh uh let I'll [01:32] save any of the gory details. They [01:34] opened things up and fixed all that [01:35] stuff right up. Yeah. So I can breathe. [01:38] Like I I was snoring and stuff and it's [01:40] not like sleep apnnea. It's just because [01:42] I broke my nose or whatever happened. [01:45] Recovery is not usually that bad. I was [01:46] supposed to be good by like Saturday, [01:49] Sunday, you know, after a surgery on [01:51] Wednesday. And for the most part, my [01:52] nose feels great, but I had some from [01:55] the trachea they put in. My throat is [01:57] all jacked. So, I got I got throat [01:59] numbness going on. I'm on some drugs, [02:01] but I I feel I feel ready to go. I I can [02:04] talk. Yeah, let's go. I'm I'm excited [02:06] about this actually because I was [02:07] looking over your episode notes and I [02:09] had a couple of wild ideas myself of [02:11] things that are are not likely. But um [02:13] >> yeah. [02:14] >> Yeah. I No, I'm I'm I'm curious because [02:16] the web uh does seem like there's just [02:19] awesome stuff all the time these days [02:21] and I'm excited for what could be, you [02:25] know. Yeah. All right. So, the first one [02:27] we have here is better primitives um in [02:30] the DOM, right? So, what that means is [02:32] that like we have select, you've got [02:35] like radio checkboxes, you've got uh [02:38] date picker, things like that. But [02:41] typically, nobody uses those primitives [02:45] aside from maybe input type of text and [02:47] input type of email [02:49] >> and and then past that everybody's npm [02:51] installing something and and using a [02:53] whole bunch of JavaScript. And that's [02:54] because like the the primitives suck [02:56] like the input type of date sucks, [02:59] right? That's not a good experience to [03:01] be able to do it. You can't style it how [03:03] you want. You can't have full control [03:04] over it. So, the the web platform knows [03:07] about this and they've been working on [03:08] it. And the the first big one we've had [03:10] in terms of a very good primitive is the [03:14] customizable select. And what that [03:16] allows you to do now is you can now [03:18] create a drop down with a select [03:22] element, but you have full control over [03:24] all of the CSS, what it looks like, all [03:26] of that great stuff without having to [03:28] give up any of the downsides of like [03:30] accessibility and keyboard control, [03:32] things like that. As well as like you [03:33] don't have to install a whole bunch of [03:35] stuff, which is the customizable select [03:37] is absolutely awesome. [03:38] >> Huge improvement. [03:39] >> Like this is almost like like moving [03:41] into like headless UI as well. meaning [03:44] that like headless UI is the browser [03:46] will bring the functionality or your [03:48] JavaScript library brings the [03:49] functionality and you bring the divs, [03:51] you bring the CSS and you can sort of [03:53] render it out and and add whatever divs [03:55] or spans or anything you want inside of [03:57] there. Now that's great. And now they're [04:00] working on like multi select as well as [04:02] combo box, you know, be able to like [04:04] filter, find people, drop down, and then [04:06] a lot of people are saying like [04:09] >> what other inputs do we need? Like date [04:11] picker is the big one as well. are [04:13] working on combo box. I I didn't catch [04:15] that. [04:16] >> Yeah, combo box is is being worked on [04:18] right now, which is [04:19] >> huge because you you want to be able to [04:21] like filter um and select multiples, you [04:24] know, and and [04:25] >> uh select the three tags from this list. [04:27] You want to filter and select the items [04:29] and have a list of the tags that you've [04:30] selected. Yeah, I'm always looking at [04:32] open UI for ideas for a lot of these [04:34] things because it's like a a W3C [04:38] community group where they're [04:39] researching just UI elements and and [04:41] what could be and it's a good place to [04:44] to list through the kind of things that [04:47] we we would need. But yeah, I I think [04:50] that the first one you have here as date [04:52] picker. Yeah, we have a date picker. [04:54] It's questionable. I don't I I I use it [04:59] when I'm lazy. I'll say that. I I'll use [05:01] the date picker when I'm lazy, but it [05:03] ultimately isn't as functional or as [05:06] useful as other, you know, JavaScript [05:09] based date pickers. So, to me, I I think [05:11] that there's just like a major [05:13] opportunity there to improve that. Um, [05:15] make it stylable, too. Like, come on. [05:18] Uh, all this stuff I don't feel I feel [05:20] like nothing should be added that can't [05:22] be stylable anymore. [05:23] >> No, I don't think anything will ever be [05:25] added to that can't be styled like any [05:28] longer, right? because [05:30] >> those days those days have passed. If [05:32] you're if you're making any new [05:34] primitives to to the browser, [05:37] you got to be able to fully control it. [05:39] You got to be able to render out the [05:40] different parts of it. You can't just [05:42] like write [05:43] >> video tag and then and then that's it, [05:46] right? You should be able to have access [05:48] to all of the like a default UI. That's [05:51] a lot of people were saying that as [05:52] well. It's like have good default UI [05:53] that that's nice, but also give us full [05:56] control over these these. So, I don't [05:58] think we'll ever see a date picker. And [06:00] I'll tell you why. Because a date picker [06:02] is so complex, right? You you have range [06:05] inputs. You want to sometimes you want [06:07] to be able to put things on the [06:08] different days, like maybe you want to [06:09] put prices for like a flight or Airbnb. [06:12] Um, you want to be able to not allow [06:14] selecting of of certain ones. It is just [06:16] far too complex for that type of thing. [06:19] So, I don't think we'll ever see a date [06:22] picker. And in that case, if you have a [06:24] complex date picker, that's something [06:26] that you probably should still reach for [06:28] an external UI for. [06:31] >> Yeah. Yeah. I think that probably [06:33] tracks. It is one of those things that [06:34] feels like you need more often than not [06:36] and then every single time you're you're [06:37] doing it, it's just, you know, uh [06:40] >> Yeah. [06:40] >> Yeah. Yeah. [06:42] >> There's good ones out there. I think the [06:43] idea with a lot of these primitives that [06:46] we're getting, you know, like [06:47] customizable select, accordians, pop [06:49] over, anchor, a lot of these primitives [06:52] are not meant to be like you'll just use [06:54] this thing straight. It's like here is a [06:57] primitive which you can then customize [06:59] yourself or [07:01] >> like shad CN is going to use these [07:03] primitives in there and that means [07:05] they're going to need a lot less [07:07] JavaScript in order to make it work and [07:09] you can simply just pop it in and you [07:11] can you could just slap a select in [07:13] there and then you can import some [07:15] external CSS library and the thing will [07:17] start looking pretty good. [07:18] >> Yeah. Uh I have tabs on here. Uh, like, [07:22] bro, tabs have been like the most [07:25] common, one of the most common UI [07:27] elements of all time. And how do we not [07:30] have a tab HTML system? I mean, we have [07:33] accordionss, details, and stuff like [07:34] that. They could do anything with tabs. [07:37] I I I feel like this is just long [07:40] overdue, personally. [07:41] >> Can't you do that with an accordion or [07:44] like like a details? [07:46] >> I mean, no. Not Not to the degree that [07:48] you would want to. Like the thing is is [07:50] that you you'd want it to just function [07:51] like tabs, like how how they how they [07:54] function. And [07:55] >> you don't want have to hack it. [07:56] >> You don't want to have to hack it. And [07:57] and so for me, I I feel like this is [08:00] >> the obvious one. But [08:01] >> uh another one for me is like a file [08:03] upload, at least being able to style it. [08:06] And if it's like a like an image, you [08:07] could preview it. Um anytime you want to [08:09] like preview an image that somebody has [08:11] uploaded, you got to you got to get the [08:13] file reader API out. You got to read [08:15] that thing into like like a binary blob. [08:17] Um, and then you got to paint that [08:18] thing. You you either then convert that [08:21] blob into like a URL which you can then [08:23] display as like an image or you can [08:25] paint that thing to a canvas and then [08:27] you can resize it based off of that. But [08:30] so many times I've just wanted a simple [08:32] file upload and then I want like like a [08:34] half decent being able to style it. Um, [08:38] >> the the default styling for the default [08:40] file upload is one of the worst things [08:44] on the web. [08:45] It's it's I I've made so many drop zone [08:48] components for dropping files and stuff [08:50] like that. And it's like yeah, I always [08:52] hate having to to like uh do that [08:55] without an actual JavaScript based [08:57] component. I actually do have something [08:59] that is just a CSS version of that in in [09:01] my graffiti UI library. Uh that is like [09:04] a drop zone nicely styled, but it [09:06] doesn't have the previews and stuff like [09:07] that. So I can totally see one that I [09:09] have here is toggles. Yeah, we have a [09:11] checkbox and yes, Safari does have [09:15] toggles. Just add it to Chrome, add it [09:18] to Firefox, like uh do it already [09:21] because the toggle is such a ubiquitous [09:26] standard UI element at this point. The [09:29] fact that Safari is the only one that [09:32] has added it as an option uh to be [09:34] default styled and stuff, just do it. [09:37] Make it stylable toggles. Come on. [09:40] >> Yeah, this is is so key because like [09:42] like what are you going to do otherwise? [09:43] You're going to make it not accessible, [09:45] right? You're going to put a whole bunch [09:46] of divs over top of the thing. You're [09:48] going to hide the actual checkbox and um [09:51] you got to spend a whole bunch of extra [09:53] work trying to get that thing to be [09:55] accessible. Um or you're going to [09:57] install some third party component. Um [09:59] toggle J. Such a a good primitive that [10:01] we should we we need to have, right? We [10:03] have progress. We have like the progress [10:06] bar. [10:07] >> That's you're almost there, right? Yeah. [10:10] Yeah. All of these ones. And again, like [10:12] Safari did it. So, uh it's not like [10:14] nobody's doing it and it that that [10:16] should be enough of a a good start. I [10:18] don't know. Not adding this just feels [10:21] weird to me at this point. [10:23] >> I also have native drag and drop that [10:25] doesn't suck. You know, the the drag and [10:27] drop just kind of aesthetic that like [10:29] ghosts it out in the way that native [10:32] drag and drop works. like it's another [10:35] one where it just feels halfass in terms [10:37] of the implementation not matching how [10:40] people actually want to use drag and [10:42] drop in real life. So, you know, it's [10:45] fine. [10:45] >> That's never going to happen. [10:46] >> It's never going to happen. [10:48] >> If you take a look at Atlassian's [10:50] pragmatic drag and drop, we had the [10:52] developer on the show [10:53] >> that drag and drop is such a can of [10:56] worms that I think they did the right [10:57] thing in that they they gave us the the [10:59] correct browser primitives for dragable, [11:02] droppable. They gave us the correct [11:04] primitives for like drop zone where you [11:06] are allowed to drop things. They gave us [11:08] all of the JavaScript events for that [11:10] type of thing. But there's so many [11:12] things like what happens when you start [11:13] dragging it? Does it leave the old thing [11:15] behind? Yeah. [11:16] >> And and then ghost it out or does it [11:18] immediately like move up? Like if you're [11:19] dragging an item from a list, should it [11:21] immediately take it out of there? And [11:22] what happens when you drop it? Does it [11:23] make a copy of it? What? There's so much [11:26] to it that I think that this is [11:29] absolutely one of those things where you [11:30] need to reach for a library. And I don't [11:32] think there's anything wrong with that. [11:33] >> I feel like you're going to hear a fully [11:37] version version of idealistic Scott [11:39] talking in this episode. I I I feel like [11:42] there's a lot of people are going to be [11:43] like, "Yeah, this doesn't work. This [11:44] doesn't work." And I will admit to my [11:48] ideas here. A lot of the ideas in here [11:50] being just fully idealist, not thinking [11:53] about edge cases, not thinking about [11:56] reality. I'm fully living in my I just [11:59] want this uh mode in this episode. But I [12:01] I'll say that [12:03] >> um in terms of syntax for the language, [12:05] a lot of people said they want type [12:07] annotations, which is they basically [12:09] just want Typescript in JavaScript. Um [12:12] and there are kind of like two movements [12:15] for that already, right? There is a [12:17] proposal for something called types as [12:19] comments, meaning that you would be able [12:21] to put your your TypeScript code in the [12:25] browser um but the browser would simply [12:27] just ignore it. meaning that it would it [12:29] would treat the syntax of like the added [12:32] TypeScript syntax. It would just treat [12:34] that as a comment, meaning it would then [12:36] ignore it. Um, so that's being worked [12:38] on. Whether we'll ever get that or not [12:40] um remains to be seen, but it seems to [12:42] be that the the browser will not care [12:45] about that or not will not use any of [12:47] that that information. Uh what do you [12:49] think? Should should TypeScript be added [12:51] to it? Like it's in Node already, right? [12:53] You can run.ts files in Node with no [12:56] problem. install nothing and it just [12:58] works. [12:59] >> I feel like we are so far be belong the [13:02] point of where Typescript was a question [13:05] mark. I have not written non-typescript [13:08] in just about I don't know when the last [13:11] time I wrote JavaScript was [13:12] >> seven eight years. [13:14] >> Oh, it it has been it's been so long [13:16] since I've made ajs file. I it's it it's [13:20] actually wild because there was a point [13:22] during this I mean this podcast has been [13:23] around a long enough that uh typescript [13:25] was uh competing with what was it flow [13:27] and with reason uh there I mean there [13:29] was there was no like guarantee that [13:31] typescript is going to become the thing [13:33] but typescript is not just the thing to [13:35] me typescript is javascript at this [13:37] point I I don't I don't see it any other [13:39] way and I would be shocked if if people [13:41] are out there writing javascript today [13:42] like straight up shocked um especially [13:44] because now it's so much easier to just [13:46] run typescript whether you have bun or [13:48] anything here. [13:49] >> Yeah. [13:50] >> So, like at this point, just do it. [13:53] Yeah. It's got to be it. [13:55] >> Yeah. [13:55] >> This is one of those things where I I [13:57] don't mind them taking their time [13:59] because it's not that big of a pain in [14:01] my butt to run TypeScript in the [14:03] browser. The the amount of times I have [14:05] to like, oh, I can't copy paste this [14:07] into my like terminal. Maybe that's the [14:09] thing is I just want Chrome DevTools to [14:11] be able to strip it out for me when I [14:13] sometimes paste TypeScript into that. [14:15] But [14:15] >> there is a world where Typescript is not [14:18] it and type JavaScript looks like [14:20] something else. So taking a look at that [14:23] whole landscape, not necessarily like [14:24] what it does cuz this this is simply [14:26] just syntax, but um looking at [14:30] how how what are the downsides to to [14:33] TypeScript and and maybe we could make a [14:36] some improved syntax and and allow that. [14:39] >> Yeah. Why are we thinking about [14:40] downsides? Just do it. [14:43] No, that's the thing is that if you [14:46] everybody said that with jQuery as well, [14:48] you know, just just add jQuery to the [14:50] browser. [14:51] >> And they took their time and they [14:53] figured out like [14:54] >> like what actually works for the [14:57] long-term health of the web. And I think [14:59] that is fine. [15:00] >> This is why you don't let me on any of [15:01] these committees. I am I'm way too [15:03] yellow at I'm just like yeah, I'm too [15:06] far gone in that direction on [15:07] everything. [15:08] >> Type operator is one that I would [15:10] absolutely love to see. So in [15:13] JavaScript, if you've got like like [15:14] imagine you have like a whole bunch of [15:16] promises that are are chained um then [15:18] then then then right like that's not the [15:20] pipe operator but that allows you to [15:22] read your code sort of like top to [15:24] bottom or or sync a weight, right? But [15:26] sometimes you're you're not dealing with [15:28] with code that looks like that and you [15:30] simply just want to take the output of [15:32] something and then pipe that into [15:34] something else and and right now what [15:35] you have to do is you have to wrap those [15:37] functions. So you you end up with this [15:39] like sort of bloom and onion of [15:40] functions where if you want to know what [15:42] it does, you go to the middle and then [15:45] you start like like stepping it back [15:48] until you you reach the outsides. A pipe [15:51] operator would be so nice to be able to [15:53] just like run a function, take the [15:55] output of that and immediately pipe that [15:56] into the next function. And it's been a [15:58] proposal for many, many years. I'm not [16:00] sure we'll ever get it, but I would love [16:01] it. [16:02] >> Yeah, it it is one of those ones that [16:04] just been hanging around. It does feel [16:06] like some of these things just sit in [16:08] limbo forever and I I mean again I the [16:12] the entire like process of that needs to [16:14] take time for the reasons we've already [16:16] outlined. So yeah it's I it's something [16:19] I would absolutely take. Um [16:20] >> it's stage two and was last updated 3 [16:23] years ago. [16:24] >> Oh okay cool. [16:25] >> So [16:26] >> wow [16:27] >> not looking great. [16:28] >> Yeah [16:28] >> not looking great. [16:30] >> Yeah just in limbo. Yeah. [16:32] >> Next one is APIs. Um, these are APIs [16:35] that we want to be added to the web [16:37] platform. Um, one API, this is not [16:39] something I want, but something that was [16:41] really cool is I I just started up [16:43] Riverside here with with Scott and he's [16:45] like, "Yeah, your your video is a little [16:46] choppy." And then Riverside popped up [16:48] this little thing that says, "Hey, plug [16:50] your computer in and you'll get better [16:53] you'll get better PF, right?" Like [16:55] browsers will sometimes throttle things [16:57] in the browsers if you're on battery. [17:00] And as soon as I plugged it in to power, [17:03] that little thing went away. And that's [17:04] the navigator.get battery API. And [17:06] that's a [17:07] >> beautiful, beautiful use case of that [17:10] API. And those are the types of things [17:11] where you we used to complain that like [17:14] native had a lot of these APIs. And now [17:16] we that's just in a website that works [17:18] great. [17:19] >> Yeah. [17:19] >> But [17:20] >> things we actually want, please. Oh, [17:23] please. Oh, please give me an API for [17:25] doing cookie banners. I am so sick of [17:28] the web. You visit any website, you're [17:30] blasted with a cookie banner and like [17:33] they never remember what you want, you [17:35] know, like accept all cookies or [17:37] whatever and you got to sit there and [17:38] think about what do I want? I don't [17:40] care. Get it out of my face. I know that [17:42] there's browser like extensions you can [17:45] like you can ignore them and all that. [17:46] Yeah, [17:47] >> we need a set of APIs for opting in to [17:52] cookies, opting consent integration, [17:54] what people have consented to, saving [17:57] that in the actual browser. We need [17:59] those APIs like yesterday because the [18:02] web is a mess with cookie banners. [18:04] >> Yeah. And so many of the cookie banners [18:06] are coded poorly or they feel like they [18:09] they they're like dark patterns all over [18:11] the place. It's like either Yes. Uh I [18:14] want the browser to accept all my [18:16] cookies or no this is dangerous. You [18:18] don't accept it. Like the so many people [18:20] are like the the way that they present [18:22] these banners to you are not nice. I'll [18:24] just say that they're not nice for the [18:26] user in in in many ways. So yeah, [18:28] standardizing it I I feel like at this [18:30] point needs to have happened. [18:32] >> You know what's a nice website that [18:33] doesn't absolutely blast you in the face [18:35] with cookie banners? [18:36] >> Ooh, I got a feeling right. Yeah. Ooh. [18:39] Yeah. [18:40] >> This sentry at centry.io/sax [18:43] is they got rid of all of their cookies [18:46] on their website and they had like a [18:48] massive project to go through. Like [18:50] something as little as embedding a [18:52] YouTube video requires a cookie banner. [18:55] It doesn't mean that you have to get rid [18:56] of all cookies, right? like like a login [18:58] cookie, a recession cookie, those are [19:00] fine, but like a cookie that tracks you [19:01] across the web. Those you have to [19:04] actually opt into. So, Sentry went on [19:06] this huge thing to remove them from [19:08] their platform entirely, which was [19:11] absolutely awesome. So, you you should [19:14] probably use Sentry for uh for your [19:16] website, for your bugs, for fixing your [19:18] code. They got this AI thing called Seir [19:20] that will uh take a look at your bugs [19:22] and automatically fix them and send you [19:24] a pull request. It's fantastic. syntax [19:26] centry.io/sintax. [19:28] >> Yeah. Did you know, Wes, that like [19:30] there's a billion companies that use [19:32] Sentry? Like Claude, uh, Anthropic uses [19:35] uses Sentry. Um, Disney Plus uses [19:39] Sentry. There there's just like some of [19:41] the Pelon uses Sentry. Every time I'm on [19:44] my my dang Pelon, I think about that or [19:46] Tonal. So, uh, shout out to all the [19:49] companies using Sentry out there in the [19:51] world. Um, next one I have here, this is [19:54] uh I I don't know if this will be [19:55] controversial, but identity. Oh, there's [19:58] so many I don't I'm going to say I don't [20:00] know how this would work. Technical [20:01] details seem like a nightmare for this. [20:03] We log in. Most of us are logged into [20:05] our browser like it should be easy [20:07] enough to use that state of login [20:09] whether it is via pass key or whatever [20:11] to use that login state on an app. Now, [20:15] I get it. A lot of people are going to [20:16] hate this idea because you want to have [20:19] the individual app have the login and [20:21] everything like that, but it does feel [20:23] like there has to be some sort of way to [20:27] use identity easy on your site and not [20:31] have to reinvent the the off wheel on [20:33] every single website. [20:35] >> Just it just feels like there has to be [20:36] some way to do that. [20:38] >> Yeah. Some sort of like Pasy was [20:42] >> not entirely that, right? But pass key [20:44] was an attempt to make the pain of [20:46] logging in [20:48] >> much easier. And I love it when it [20:51] works, man. Log into GitHub with a pass [20:54] key. [20:55] >> Absolutely love it. Right. But I I think [20:57] that at the end of the day, this is [20:59] going to be a a phone in your pocket [21:01] thing. Um people are going to be able to [21:04] sign in with the phone in their pocket [21:07] >> or scan your retina or something like [21:09] that. Yeah. Like why can't like like [21:10] Face ID be the thing? I guess you're [21:13] almost there with like sign in with [21:15] Apple, right? [21:15] >> You're Yeah, sure. But it's still at the [21:18] end of the day what it's doing is it's [21:19] creating a record in the database with [21:21] the email address and whatever and then [21:24] that is control like I don't know. Yeah, [21:27] >> I don't know. I again idealistic Scott [21:29] says, "Hey, we're reinventing the wheel [21:31] so much here." Um yeah, [21:33] >> one thing I have wanted for the longest [21:35] time and I've actually written this [21:37] function myself is get element by text. [21:40] meaning that like you can select an [21:41] element based on its ids or attributes [21:43] or or based on the children it has or if [21:46] it has a specific thing but you cannot [21:49] select an element based on the text that [21:51] is inside of it either in JavaScript or [21:54] in in CSS. Um and I would love love love [21:58] especially with a lot of these agentic [22:01] browser things you know MCP server with [22:03] playright you can select an element by [22:06] text. I would love a native API for [22:09] that. I don't know if we'll ever get it. [22:11] Um, it was doable with XPath. Before we [22:13] had [22:14] >> not before we had document.query [22:16] selector all not before we had document [22:19] getelement by ID. We had this thing [22:20] called XPath which was a way for you to [22:23] select elements based on their XML [22:26] indentation. And there was something in [22:27] there that would allow you to select [22:29] based on the actual text of the element. [22:33] And that would be sick. [22:35] >> Yeah. Did you ever think that we had uh [22:37] X Path the same time we had XOXO? Do you [22:40] remember X? [22:41] >> What's XOC? [22:43] >> He was like a a a 2000s era professional [22:46] wrestler. [22:48] >> Oh man. [22:53] H [22:54] >> Oh, I just Googled him. He's doing the [22:56] sucket. You man. [22:57] >> Yes, he he was he was the guy. He was [22:59] the sucket guy. He was the guy. Oh, [23:02] yeah. Yeah. I mean, he might not have [23:04] been the only I mean, he's definitely [23:05] not the only guy, but he was like he was [23:08] Mr. Suck it, I think, for sure. [23:10] >> I did not watch wrestling growing up. I [23:13] had no idea, but we me and my friends [23:14] would walk around school being like, [23:16] "Suck it." And we had no idea what that [23:18] meant, you know? Just just saying. [23:21] Nobody knew what they were doing. Now [23:22] I'm older. I'm like, "Oh, I probably [23:24] shouldn't have been saying that." [23:26] >> Oh, yeah. There was a time I think when [23:27] I was in like ninth grade where I I [23:29] don't think you could have not watched [23:30] wrestling for that one year. [23:32] >> I' I don't I've maybe watched like one [23:35] or two wrestling and then what's the one [23:37] where everyone beats the [ __ ] out of [23:38] each other but it's real. [23:41] >> Oh, I don't know. [23:42] >> No, it's like it's huge right now. [23:44] >> Backyard wrestling or [23:45] >> Dana White. Um [23:46] >> Oh. Oh, UFC. Oh, okay. [23:48] >> Yeah, UFC. I went to a UFC party once. [23:50] Holy hell. Not for me. That's awful to [23:53] watch. [23:53] >> I watch a lot. Well, I don't lately, but [23:56] I did watch a lot of uh MMA. Uh to the [23:58] point where I was watching like minor [24:01] league circuit stuff and stuff. Um but [24:04] yeah, no, I I I like combat sports, [24:06] that's for sure. I don't watch uh [24:08] professional wrestling, though. [24:09] >> All right, this is probably high on my [24:11] list with browser primitives, and this [24:13] is just native reactive templates. Um, [24:17] meaning that you have a variable, you [24:19] put that variable in the DOM somewhere [24:20] and when that variable updates, so does [24:23] the DOM, right? Some sort of templating, [24:26] some sort of reactive variables, whether [24:29] that is with um like signals or whatever [24:33] they choose to do. I would absolutely [24:35] love something because I myself if I'm [24:38] coding up something very quickly in in [24:40] vanilla JavaScript, I'll always just [24:42] make some sort of like rerender string [24:44] where you watch the variable to change. [24:46] It would be great to have that as a a [24:47] browser primitive. [24:49] >> Yeah, here's another one. Uh sync [24:51] protocol. Wouldn't it be great if you [24:53] had some kind of uh CRDT sync setup that [24:56] you could just access like fetch? Now [24:58] granted, there's got to be a server [25:01] involved, so you'd have to have some [25:02] sort of a sync server. Um, but like the [25:06] again, this is never going to happen, [25:07] but like a primitive for accessing sync [25:11] with a CRDT or even creating that server [25:15] >> like I mean we have websockets, right? [25:16] >> That's what I'm saying. some something [25:18] along a protocol like websockets or even [25:21] even how about this in terms of the same [25:23] world of a data or a local first or [25:26] whatever just databases that don't don't [25:29] suck built into the browser [25:32] because what do we have we've got like [25:34] local storage not really database got [25:36] more of like a key value string store [25:38] you've got index DB right [25:40] >> um there's implementations of SQLite [25:44] >> but you want something that's that's a [25:46] little better Yeah. Yeah. Something [25:48] along lines what they're doing with like [25:49] Postgress in in Wom, you know. [25:52] >> Yeah. Virtualization that doesn't suck. [25:54] What do you mean by this? [25:55] >> Yeah. Like virtualized lists, you know, [25:58] all all the virtualized list solutions, [26:00] especially in like react list or react [26:03] virtualize or whatever that was. [26:04] Virtualization for people don't know is [26:06] that it renders you could you could have [26:08] a wrapper that like if you have a list [26:11] of 100 items and that wrapper is only [26:13] like five items visible. the additional [26:16] 100 items or 95 items are not going to [26:19] render. Uh basically saving your browser [26:22] from having to do that work. The problem [26:24] is is a lot of these virtualization [26:25] libraries then break search and then if [26:28] you do command F on the page, it doesn't [26:30] find the item because it's not being [26:31] loaded. So like [26:33] >> uh something that uh controls rendering [26:36] in that way that still doesn't break [26:38] command F. Um those types of things. [26:41] >> Content visibility in CSS is supposed to [26:44] do this. Um, so the it's a controls [26:47] whether an element renders its contents [26:49] at all along with forcing a strong set [26:51] of containment allowing agents to [26:53] potentially omit large swatches of [26:56] layout and rendering work until it [26:57] becomes needed. Meaning that like you [26:59] have a list of 20,000 list items. Um, [27:03] you can put a content visibility [27:06] property on there and then the browser [27:08] will defer rendering it until it thinks [27:10] it it actually needs it. This is one of [27:12] those things where I don't think we need [27:14] APIs for this. Um, I just think that [27:16] like like I've had I've had problems [27:19] with content visibility where I took it [27:20] off and my performance drastically [27:22] increased. It was way better, right? I [27:24] think that browsers just need to sort [27:26] this out and then we can just we can use [27:28] as much HTML and [27:29] >> and you figure it out, right? You're the [27:31] rendering agent. [27:32] >> Yeah. Yeah. I don't why why am I figur [27:35] you you should know if something is on [27:36] the screen or not and and control how [27:38] that works and [27:39] >> Yeah, for sure. Um, Olly Williams, hype [27:42] dev on Twitter says, "We want put, [27:44] patch, and delete on form." So form [27:46] elements in the browser can only do two [27:49] things, get or post, right? And if [27:52] you're building an API, you should be [27:55] using the rest of those, which is put, [27:57] patch, delete. I think there's a couple [27:59] other ones, options. That's a stumped [28:01] question for later. Uh, but if you're [28:04] trying to build your app in a way that [28:07] will ideally work without JavaScript or [28:10] you're trying to build on like web [28:11] standards and then using JavaScript to [28:13] like progressively enhance, if you're [28:16] updating an item and you want to like [28:18] use a patch or like a put or if you're [28:21] deleting something and you want to [28:22] simply just have a button that deletes [28:24] that item via a form submission, [28:27] >> you're kind of out out of luck. You got [28:28] to like you got to put that into a a [28:30] post, right? and then you got to put it [28:32] on a different endpoint of like delete [28:34] item. So that would be that would be [28:36] pretty nice as well. [28:38] >> Yeah, I'll take that. I never understood [28:39] why we have those verbs and they're not [28:41] just all there. [28:42] >> That's a great question. Like why why [28:44] did they invent those as the browser or [28:47] not? They didn't invent it as a browser. [28:49] They built it as part of like networking [28:50] stack. [28:51] >> Yeah, [28:51] >> but why did we never implement those in [28:54] it? Um, another one from Carl. Um, Snorl [28:58] TV says, "Text metrics get bounding box [29:01] of individual characters. [29:04] Being able to measure the actual size of [29:07] it and we the textbox trim has been a [29:12] fantastic addition to CSS. mean that if [29:14] you've ever had that weird thing where [29:16] your your your text is a certain height, [29:19] but like the text is at the bottom of [29:21] like the line height and it's not [29:22] centered. Textbox trim takes care of so [29:25] many of those use cases. Um, which [29:27] honestly is probably better than having [29:29] to measure characters. But there still [29:31] are, especially in like an animation [29:32] world, there's still lots of cases where [29:34] you would want to measure how big a [29:37] letter is. And right now, your only [29:39] option is sparan wrap. Wrap every single [29:41] character in a span. [29:43] >> Yeah. Hell yeah. Um, for low lower level [29:46] of connections, you have like Bluetooth [29:49] listed here. Am I wrong? I thought there [29:51] was a Bluetooth API. I I I haven't used [29:53] this, by the way. Yeah. [29:55] >> So, there is a Bluetooth and a web [29:58] serial API which allows you to talk [30:01] directly over obviously Bluetooth or [30:04] USB. Um, and this is super handy for [30:07] things like uh programming [30:08] microcontrollers or being able to update [30:11] the firmware on your headphones without [30:13] having to download like some sketchy [30:16] like install thing just to simply update [30:18] the firmware, right? Um, and that's why [30:20] a lot a lot of devices if you want to [30:22] update the firmware, you you don't [30:24] download an app, you don't visit a [30:26] website, you you get the iPhone app, [30:27] right? And the iPhone app is going to be [30:29] able to do it. So there are Bluetooth [30:31] and web serial fantastic APIs, but they [30:35] have not made their way into standards. [30:37] They've not made their way. Safari says [30:39] no way. Firefox hasn't implemented it. [30:41] So um that would be really nice to have [30:45] control over those things. Sockets, you [30:48] we have web sockets, right? And this is [30:50] a security thing as well. you're not [30:52] going to be able to access sockets [30:54] directly. But, uh, when I was driving my [30:57] Roomba with JavaScript and when I was [30:59] flying the drone with JavaScript, both [31:01] of those things communicate from the [31:05] computer to the the wireless device over [31:07] a socket. So, you open up a socket and [31:09] then you just have these these lanes [31:11] where you can send data back and forth. [31:13] And in order to actually access that [31:16] data in the in the browser, you need to [31:18] create a server that runs on your [31:20] computer. And you got to hot potato the [31:22] data. So the data goes from the drone to [31:24] a node server and then the node server [31:26] sends it over a web socket so you can [31:27] actually access it in the browser. NFC, [31:30] RFID, again that those things would be [31:34] fantastic in the browser, especially if [31:35] you're trying to you're making like a [31:37] progressive web app where you want to be [31:39] able to [31:40] >> scan something with RFID. [31:42] >> Yeah, dude. NFC is so underrated in [31:45] general. Yeah, [31:46] >> it's it's really good. Look at this. [31:47] I've got I've got like a a Yoto that [31:51] I've been been hacking right here. And [31:52] here's the the NFC card. [31:55] >> And I've got this little [31:56] >> um this is called a Prox Mark III little [31:58] NFC RFID writer. [32:00] >> Oh, cool. [32:01] >> I've been using that for my Bamboo Lab. [32:04] The little things that go on the spools [32:06] of filament [32:07] >> so you can write them. It's It's a wild [32:10] world. Very fun. I'm gonna say Wes, uh, [32:13] one thing I love about you, you always [32:15] got some [ __ ] on your desk that's going [32:17] on. That's That's cool [32:18] >> a lot. Can I Can we play What are the [32:20] most random things you can find on your [32:22] desk? [32:22] >> Yeah. [32:23] >> Um, USB UART. [32:26] >> Um, so this is connecting [32:28] >> serial. My sister got like a some broken [32:31] thing and I I soldered to it and I could [32:33] see the boot logs of that device. What [32:36] else I got here? Some glue. I have a a [32:39] terminal screen. [32:41] I love this thing. [32:42] >> Oh, that's cool. [32:43] >> Yes. Do you know the terminal screen can [32:45] last for months because it doesn't [32:47] update the data on it? It doesn't hit [32:50] the web very often. So, it has a set [32:53] number of screens that it changes [32:55] between [32:56] >> an e- in display for our audio [32:57] listeners. [32:58] >> Oh, yes. It has it's an e- in display [33:00] and you set up essentially scenes and [33:03] those scenes uh change every 15, 20 [33:05] minutes or whatever. But you can also [33:08] say, "Hey, don't hit the web to update [33:10] your data unless it's every like 4 hours [33:12] or even every day or whatever." And [33:15] therefore, because of that, just on this [33:18] little battery in here, the screen just [33:21] lasts forever. I mean, it's like got my [33:24] calendar, all kinds of stuff on here. [33:26] Just [33:27] >> cycling through everything. Yeah. Love [33:28] it. [33:29] >> Love that. For some reason, I have an [33:31] iPhone 3 um cuz one of my kids had it [33:34] the other day and I was like, "Hey, [33:36] that's history. Don't. Where did you [33:37] find that? They probably went through my [33:38] boxes and took it out. Salad spoon. I [33:41] was I was writing or making some bins [33:44] for my 3D printing. So, I was measuring [33:46] the spoon and I never brought that back [33:47] up. [33:48] >> What? You got a blower? [33:49] >> A Wolf Box blower. It's blowing. I got a [33:52] a silicon soup thing that Do you have [33:54] one of these? [33:55] >> Silicon soup thing. No, [33:57] >> you put it in the microwave and then you [33:59] put your soup on it whenever you're [34:00] microwaving it. And then if I need to [34:02] carry it to my office, like I often do, [34:04] you just pick up this and carry it into [34:06] your office like that. [34:08] >> Uh, that's what your sleeves are for. [34:10] >> Bro, I've spilled so much soup. I I've [34:13] I've burn Yeah, I got to have a silicon [34:15] soup sleeve. [34:16] >> I got the MadCSS logo, by the way. If [34:19] you haven't checked that out, go to [34:20] madcss.com. We're doing a major CSS [34:23] battle tournament. It's going to be [34:24] awesome. [34:25] >> Yeah. Wow. The rest of the stuff on my [34:28] desk is related to my surgery. I'll tell [34:30] you that. [34:31] >> I could go I could go all day, but I [34:32] think that's enough. Let's talk about [34:34] CSS. Things that we want in CSS, aside [34:37] from some of the like primitives being [34:38] able to style them. Um Nick Williams [34:41] says a way to specify speed. Example, [34:44] pixels a second for transition [34:46] animations rather than just a duration. [34:49] >> That's that's really cool, right? [34:51] Because if you have an animation, you [34:54] tell it, I don't know, 100 seconds or [34:57] 300 milliseconds, 200 milliseconds, but [34:59] you don't know how far that is actually [35:01] going. And if you want all of your if [35:03] you want them all to feel the same way. [35:05] Same thing where like if you like cancel [35:07] a transition halfway through, um it [35:10] would be cool to get the physics of that [35:12] rather than just break it in the middle [35:13] of a bezier curve and then just reverse [35:15] it from from there on out. That would be [35:17] sick in CSS. Yeah. [35:19] >> Yeah. Yeah. I agree. I I I don't know if [35:21] yeah if I I'm dying for that but yeah [35:24] more the merry [35:24] >> CSS strict mode there's a lot of like [35:28] baggage in in CSS right like what how [35:30] long has CSS been around for 100 years [35:33] so there's a hundred years of baggage in [35:35] CSS and there are a lot of weird [35:38] >> like oddities that you just kind of have [35:40] to deal with because they don't you [35:41] can't break backwards compat of the web [35:43] but what if we could what like in in [35:45] JavaScript we did it right you you just [35:48] have like a use strict [35:50] you can pop at the top of your [35:51] JavaScript file. Or if you simply just [35:53] use an ES module, then that's considered [35:56] strict mode and all of the baggage of [35:58] the weird web is is gone. You break [36:00] those APIs. So, can't we also get strict [36:03] mode, right? Turn border box um on by [36:07] default. [36:08] >> Yeah. And there there's so many dumbly [36:11] named properties and stuff like [36:14] I'm fine with breaking things if you if [36:16] you have a version or a strict mode or [36:18] whatever. I'm fine with that. Um, get [36:20] rid of some of the croft uh stuff that [36:21] you don't need. Uh, and make Yeah. [36:25] >> Uh, one for browsers. Christopher [36:28] Vanhton says, "I'd like to see Safari [36:30] move to Chromium." You hear this a lot. [36:32] A lot of people say, "Everybody just [36:34] move to Chromium. It would be so much [36:36] easier for me." I I'm going to tell you, [36:39] you do not want that. We do not want a [36:41] world where there is one browser engine. [36:44] As easy as it would make your life to be [36:46] able to just run one engine and run [36:48] everything and it runs absolutely [36:49] everywhere, [36:50] >> you do not want a single browser engine. [36:53] That's going to cause the web to [36:54] stagnate. That's going to cause a whole [36:56] lot of a lot of pain. You do need these [36:59] things to compete. [37:00] >> I want iOS Safari to be to be blank. [37:04] That's it. That's it. Yeah. I don't know [37:06] how like iOS Safari is the dumbest one [37:08] to to debug and I have so many issues [37:11] with it and there's so many like little [37:12] things here and there with iOS Safari. [37:15] You can get you can have normal Safari [37:17] on WebKit. Keep the uh keep the variety [37:20] going or whatever, but like iOS Safari [37:22] or just give me effing Chrome with Blink [37:26] on iOS, please. Like I'm so sick of of [37:29] >> But give it to everybody though cuz [37:30] otherwise like normies are not going to [37:33] change their browser engine on iOS. I [37:35] just Yeah, just for my own personal uh [37:37] sanity, [37:38] >> some countries have already done it. We [37:39] talked about that a couple episodes ago. [37:41] >> They shouldn't have to have the [37:43] countries force the company to do the [37:45] right thing. [37:46] >> Yeah. [37:47] >> Um AI access as a native API. Um I'm [37:52] going to tell you, and I actually had [37:54] several calls with folks that work on on [37:56] Chrome, and I don't think we need this [37:58] yet because I don't think that we have [38:00] figured out what these APIs need to look [38:03] like. And if you rush these APIs out the [38:06] door based on like what we need right [38:08] now, which is like prompting and [38:10] streaming back text into a chat, then [38:14] these are the APIs where you just people [38:15] are just not going to use them because [38:16] they're just well, these are not nearly [38:18] as good as as what we have. But [38:19] >> that's what happened with web [38:20] components. [38:22] Yes, we do eventually need, I think, [38:26] some sort of AI access in the browser [38:29] that will allow you. And my my idea is [38:33] that eventually we're going to get to a [38:35] spot where you will be able to use your [38:38] computer's bakedin model if if you want [38:41] to. Meaning that like hopefully in my [38:43] ideal world this API would be you can [38:46] use the local AI that lives on the [38:49] device or you can swap that out for a [38:52] model that you load in yourself kind of [38:53] like transformers.js maybe you load like [38:56] I don't know a gig model um into your [38:58] application because it's well worth it [39:00] for that. Um or you can hit like an [39:02] external API for that type of thing. one [39:04] API that will be able to do that and [39:06] then if you can access your your like [39:08] the iOS model or your Mac model or [39:11] whatever that is on there then it [39:14] becomes private it becomes free right [39:17] >> yeah the user is paying for it in their [39:20] battery in their device but it's it's it [39:22] could be significantly faster like what [39:24] happens when you can run inference on [39:26] absolutely everything what happens when [39:28] it's extremely fast where it doesn't [39:30] take four five 100 milliseconds a second [39:33] to come back. What happens when it's [39:35] like an instant? Um, that opens up a lot [39:39] of possibilities. [39:40] >> Yeah, really cool. I I've been I've been [39:42] thinking a lot about this kind of stuff [39:43] lately. Yeah, for sure. [39:45] >> Chrome is working on this. They have I'm [39:49] in I'm in the beta um that you can like [39:51] test it out. There's like local AI [39:52] models and what it does is Chrome just [39:54] downloads a small enough model and then [39:56] it will run it on your machine and then [39:58] you can just ask it for things. But it's [40:02] slow. It's not very good and it's at a [40:04] spot now where people will go cool demo [40:06] but I'm not actually going to use that [40:09] because it's it's not very good. I'm [40:10] just going to use the the paid one. [40:12] Yeah. [40:12] >> But like even things like date picker [40:15] input like natural language to date [40:17] picker, right? The date picker of the [40:19] future will simply just be me typing in [40:21] February 18th 3 years ago or the last 40 [40:26] days starting from next Tuesday. you [40:29] know, you'd be able to just type those [40:30] in in natural language, have a model [40:32] compute what that actually is, and then [40:34] return to you some temporal durations [40:37] that will match it. [40:38] >> A AGI is me entering my credit card [40:42] expiration date in any gosh darn format [40:44] that I want and having it just [40:48] understand it. [40:50] Oh man, let me tell you about postal [40:53] codes inputs in Canada. Holy hell. So, [40:56] postal codes in Canada are uh like like [40:59] a like a letter, a number, I don't even [41:01] know. But it's so obnoxious because [41:03] first of all, on iOS, you have to switch [41:06] between every other letter. You have to [41:07] switch between the keyboard and the [41:09] number input. And sometimes they have to [41:12] be capitals and you generally you put a [41:15] space in between the first three and the [41:17] the second three numbers or or digits, [41:20] but sometimes you don't. And then like [41:22] the validation on postal codes is a [41:25] nightmare. [41:26] >> Sucks. I sucks. [41:28] >> We need AI for these things, you know? [41:29] Like I I know a lot of you listening are [41:32] big thumbs downers on our AI episodes, [41:35] but like you got to you got to agree [41:37] with me that like a like an AI local [41:40] free private model that can parse data [41:44] inputs for you or just like simply just [41:46] like fix your validation errors that are [41:49] oh I've put a space after my email [41:51] address, you know. [41:53] >> Yes, I I'll [41:54] >> that seems like a good use case. I'm [41:56] going to uh uh to echo David Kramer's [41:58] sentiment lately and it's it's the the [42:02] people in in January 2025 who are still [42:06] loling about AI coding not being useful [42:10] or good, bro. You are missing it. You're [42:14] you're missing it entirely. I I think I [42:17] think you you got to update your brain [42:19] because [42:20] >> yeah, [42:21] >> things have changed. The the landscape [42:22] has changed. Everything has changed. I [42:24] can understand ethical in in those types [42:27] of stances on things, but if you're if [42:29] you're loling it because you think it's [42:31] not capable, you are [42:32] >> it's not good. It makes so many [42:34] mistakes. [42:36] >> Tailwind. [42:37] >> Yes. [42:37] >> I was thinking about that as an episode. [42:39] What do you What do you think about that [42:40] is like let's go on Blue Sky and ask [42:44] what people's hang-ups are. [42:45] >> Mhm. [42:46] >> Um and like like not just like h it's [42:49] actually really good cuz like there a [42:50] lot of it sucks, right? freaking have [42:52] you ever tried to like fix a CSS bug [42:54] with AI? It's it's awful at that. [42:58] >> There's all kinds of things. Yes. And [43:00] some things take longer. Absolutely. Uh [43:02] >> it's not worth it. And lots [43:03] >> some things are absolutely not worth it. [43:05] When I did the the hack week project, uh [43:08] for our sin hacks, our CSS battles [43:10] thing. Uh man, it was way faster to do [43:13] all that by myself. Uh that that's for [43:16] dang sure. But like [43:18] >> there's a lot of things that it can save [43:20] you a whole ton of time on for sure. [43:22] >> All right, I'm going to I'm putting that [43:24] on. I'm going to Blue Sky. I'm going to [43:26] get absolutely destroyed. But we'll uh [43:29] we we'll like put together all of like [43:31] people's thoughts and like why they [43:33] don't use it. Um and then we'll we'll [43:36] just like kind of go through them and [43:37] say like that's valid or that's I I [43:39] think you are wrong there. Here's how [43:41] you could you can fix that type of [43:42] thing. And people when you are defending [43:46] your stance on not using AI, [43:49] >> would it hurt you to not be such an [43:52] [ __ ] Like crazy. People are just [43:55] yelling at people all like, "Look at [43:57] this stupid loser who's using AI." Wes [43:59] did something. Wes had some tweet about [44:01] 3D on AI and and there's just some [44:05] absolute loser on Twitter uh just [44:10] calling him names for no reason. Like [44:12] >> what was this? [44:14] >> Somebody called me a name. [44:15] >> Bro, you were quote tweeting them. [44:18] >> Oh, [44:20] I forget what that was. [44:21] >> But you Yeah. You're [44:24] >> to be fair, there is so many obnoxious [44:26] people in this space. [44:27] >> There are so many obnoxious people. Yes. [44:30] >> And like people that have obviously [44:31] vested interest [44:33] >> in saying that this is the next thing [44:34] and lots of people just straight up [44:36] lying. Um, so I get it, but I feel like [44:40] I'm not one of those people and I feel [44:42] like I have a pretty good stance on this [44:43] stuff. [44:44] >> Yes, [44:45] >> that's where we're at. [44:46] >> Just be reasonable, folks, please. [44:49] >> All right, last thing we got here is [44:50] APIs in Node, Bun, Dino, whatever. Um, [44:55] Justin White says, "I want the web [44:57] speech API in bun or node." [45:00] >> Yeah, [45:00] >> I I agree. And I I don't know that that [45:04] you want just like a straight up like [45:05] that's that's what happened to Chrome. [45:07] Chrome implemented the web speech API. [45:09] >> Yeah. [45:09] >> Nobody uses it cuz it sucks. [45:11] >> Sounds bad, [45:12] >> you know? [45:12] >> Yeah. [45:12] >> It's it's awful. Or like and we're [45:14] talking both like text to speech and [45:16] speech to text. Um and there's always [45:18] going to be better models out there. Um [45:20] so what we really need is yes, you [45:23] should be able to use like the Siri [45:25] voice built into the browser if you if [45:27] you want, but you should also be able to [45:29] load in additional models. And and I [45:31] think that this gets wrapped up in some [45:33] sort of AI APIs that are built into the [45:36] browser that let us optionally use the [45:39] things that are available on the user's [45:40] device. Yes. You know what? In that same [45:44] regard, like give us good [45:48] uh text to speech. I just did a [45:49] texttospech server myself and it's not a [45:53] problem. I have a texttospech server [45:55] running full-time on my my laptop and [45:57] anytime I need text to speech, uh [46:00] whether it is through my agent setup or [46:02] whatever, it just pings my laptop. It's [46:04] got the voice, it's got the whatever. [46:06] And it's it's it's it's like really [46:08] really good quality compared to uh any [46:11] of the APIs that are in the browser. And [46:13] it wasn't that hard. [46:14] >> Bonsy buddy sounding, [46:17] >> right? And and the voice it it's not [46:19] like uh what's the one that we 11 Labs. [46:22] It's not like 11 Labs good, but it's [46:24] approaching that good. And it's it's way [46:26] better than than a robot voice. I'll [46:28] tell you that. I love text to speech. [46:30] I've been using text to speech so much [46:33] with my setup that's generating [46:36] uh it it's taking research topics for me [46:39] and turning them into personalized [46:41] podcasts uh and those types of things. [46:44] And setting that text to speech up has [46:46] been such a nice thing for me in my [46:48] learning capabilities cuz I'm not [46:50] reading anymore. I'm not using the [46:52] built-in Mac OS one that also sucks. Um, [46:55] so yeah, Texas Beach, make it nice. [46:58] >> Um, Alibaba just released a model called [47:01] Quen TTS. [47:03] >> Um, which is [47:05] >> in my opinion as good as a lot of the 11 [47:08] Lab stuff. Um, and you can you can [47:11] apparently you can run it on like [47:13] relatively normal hardware. Like you [47:15] could run it on your laptop if if you [47:16] wanted to or you can 10 cents per 10,000 [47:20] characters, which that's a lot, right? [47:24] You want to you want to read a 5,000word [47:26] blog post? Oh, no. 5,000 characters. [47:29] Yeah, [47:29] >> it probably can get expensive, but it's [47:31] it [47:32] >> it's not that expensive. [47:34] >> And you can train it on your own voice, [47:35] which is again another ethical [47:38] >> ethical problem. [47:39] >> Yeah, I don't I don't need anything to [47:41] replace my voice. I don't need anything [47:43] like that. I just want to listen to [47:44] somebody teach me things rather than um [47:47] >> Yeah. [47:48] >> Yeah. [47:48] >> Beauty. All right. Let us know down [47:51] below in the comments. What is the web [47:53] missing for you? What do you want to see [47:55] added? Cuz [47:57] people are watching. People that do the [47:59] standards are are constantly asking this [48:00] question. They want to hear what do [48:02] people actually want. Leave them down in [48:04] the comments. Let us know down below [48:06] what you know. Um let's do sick picks. [48:09] Wes, you got a sick pick? I got a sick [48:11] pick while you're waiting. Uh you know [48:12] what? Uh, I was just talking to producer [48:14] Randy the other day about like budgeting [48:17] and stuff like that and it made me [48:20] remember that I I've sick ppicked this a [48:22] couple times before but not recently and [48:24] it is new year. I lean really hard on [48:27] budgeting software and uh it's important [48:30] to to have a good handle on your your [48:32] finances at all times. So, I I pay for a [48:35] service called Monarch. And Monarch was [48:38] like a good successor to like Mint if [48:39] you used Mint, but it's so much better. [48:42] And anybody who says Mint was like the [48:45] pinnacle of this kind of stuff is just, [48:47] you know, nostalgia, uh, whatever. But [48:51] they recently redid their goals system [48:54] because their goals were like one of the [48:55] things that was lacking. The goals are [48:57] so much better. They give you like sand [48:59] key reports of where your money is going [49:01] every month, every year, whatever. And I [49:04] got to say, the whole thing is just a [49:06] beautiful, well-made app. It alerts you [49:09] for uh reoccurring transactions that you [49:12] you can be cutting back on, and it helps [49:14] with so much. And Courtney and I now go [49:17] through this our budget every other [49:20] weekend um and go through the accounts [49:22] and are all working on it together. And [49:24] it's such a nice great system. So check [49:26] it out, Monarch. I'll have a link in the [49:28] show notes if you aren't using it. [49:30] >> All right, my sick pick. I've sickpicked [49:31] this a couple years ago, but I do it [49:33] again cuz it's one of those things I [49:35] just absolutely love. [49:36] >> Wow, that looks so cinematic on camera [49:38] right now. [49:39] >> Does it? [49:39] >> I think it's probably cuz you're using [49:41] the teleprompter. It's like giving a [49:43] nice diffuse look. It's Wow, it's [49:45] beautiful. [49:45] >> Yeah, it's hitting the glass of the [49:46] teleprompter. Anyway, this is a Sloanic [49:49] rechargeable headlamp. I've had this [49:50] thing for probably four years. It is [49:53] freaking fantastic. I'll tell you tell [49:55] you what I like about it. It's USBC [49:56] rechargeable. It has a removable 18650 [50:00] cell, meaning that if if this thing [50:02] dies, it's not e-waste. You know, you [50:03] just you you buy one little battery, you [50:05] replace it. Um, it is bright as heck, [50:09] you know, like I'm always working on [50:11] something where it's super dark and I [50:12] just want to light the thing up or I'm [50:13] at the cottage and it's like super dark [50:15] and I want to see where the dog is. Um, [50:17] go into the washer, make sure he doesn't [50:19] get eaten by a wolf. It is awesome. The [50:22] elastic on it has like out over four [50:24] years, it is still in really good shape. [50:26] It just is comfortable on my head. I've [50:28] My kids have some really crappy [50:30] headlamps I've gotten as gifts and they [50:32] always take mine cuz this one is the [50:34] best. So, if you are looking for a nice [50:36] quality headlamp, it's a very dad [50:37] purchase, but check out these Sloonic [50:41] headlamps. Yeah. Heck yeah. Cool. Well, [50:43] check us out on YouTube, check us out on [50:45] your podcast player, all that good [50:46] stuff. And we will see you next time. [50:48] Peace. Peace.