Baseline 2025 Features Web Gained in 2025 - CourtneyR.dev's 2nd Brain

Baseline 2025 Features Web Gained in 2025 ![rw-book-cover](https://img.youtube.com/vi/jg8gJz82kZg/maxresdefault.jpg) 🔗 **Source:** [Baseline 2025 Features Web Gained in 2025](https://www.youtube.com/watch?v=jg8gJz82kZg) > [!note]+ Document Notes > tags: [baseline, web-development, css, javascript] > author: Syntax > source: YouTube > reference: https://www.youtube.com/watch?v=jg8gJz82kZg > date created: 2024-12-20 10:30 > > # 🏷️ Title: Baseline 2025 Features - Web APIs and CSS Now Available in All Browsers >  ## 🧰 Action Inbox - [H1] Implement view transitions for CRUD animations — same document API now stable #animation - [H2] Replace window.atob/btoa with uint8array methods — better performance #optimization - [H3] Test popover API for tooltips and dropdowns — baseline stable #ui ## 🧭 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 - [Baseline 2025 Features](https://web.dev/baseline) - [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) ## 📝 Summary - Baseline 2025 adds 24 new web APIs and CSS features available across all browsers - Key additions include same-document view transitions, popover API, and CSS absolute value function - Features enable advanced animations and UI patterns without requiring JavaScript frameworks - Performance improvements through better binary data handling and rendering optimization - Developers can now safely use these features without worrying about browser compatibility ## 📖 Main Content Baseline is a web industry initiative that tracks when features become available across all modern browsers. Unlike Can I Use, which shows complex compatibility matrices, Baseline simply indicates whether a feature is "newly available" or ready to use. The 2025 release includes 24 new APIs spanning CSS animation improvements, better data handling, and enhanced UI capabilities. Same-document view transitions allow smooth element animations within single-page applications. The popover API provides declarative tooltips and overlays. CSS gains mathematical functions and better display property transitions. These features reduce reliance on JavaScript frameworks and bundlers while improving performance through native browser optimizations. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/jg8gJz82kZg?t=0) — [H1] Baseline 2025 Introduction - Key idea: Baseline tracks features available across all browsers, unlike Can I Use complexity - Evidence: "Baseline will just tell you like newly available or like go for it son you know you can use this thing" #### ⏱️ [02:30](https://youtu.be/jg8gJz82kZg?t=150) — [H1] Same Document View Transitions - Key idea: Enables smooth element animations between DOM states without page changes - Evidence: "You can now transition any element to any element, not just when you're changing pages" #### ⏱️ [04:45](https://youtu.be/jg8gJz82kZg?t=285) — [H2] View Transitions Implementation - Key idea: Uses document.startViewTransition API with view-transition-name CSS property - Evidence: "Takes a snapshot of where it is and then in the callback you apply some changes" #### ⏱️ [07:15](https://youtu.be/jg8gJz82kZg?t=435) — [H2] CSS Absolute Value Function - Key idea: CSS gains abs() function for mathematical calculations - Evidence: "CSS has got abs, folks. It makes the value always positive" #### ⏱️ [09:30](https://youtu.be/jg8gJz82kZg?t=570) — [H2] JSON Modules Support - Key idea: Import JSON files directly as ES modules with type assertion - Evidence: "Simply just import your JSON and then you add a with type of JSON onto the end" #### ⏱️ [11:00](https://youtu.be/jg8gJz82kZg?t=660) — [H1] Popover API - Key idea: Declarative popovers with top layer positioning and automatic focus management - Evidence: "Puts it on the top layer which takes things and sets it on a new layer stacking layer" #### ⏱️ [13:45](https://youtu.be/jg8gJz82kZg?t=825) — [H2] Base64 to Uint8Array - Key idea: Better binary data handling replacing deprecated atob/btoa methods - Evidence: "Storing the data as an array is significantly smaller in the DOM" #### ⏱️ [16:30](https://youtu.be/jg8gJz82kZg?t=990) — [H1] Starting Style and Allow Discrete - Key idea: Animate elements entering/leaving DOM with display property transitions - Evidence: "Animate from display none to display block using allow discrete" #### ⏱️ [19:15](https://youtu.be/jg8gJz82kZg?t=1155) — [H2] Promise.try Method - Key idea: Wrap synchronous functions in promise-compatible interface - Evidence: "Allows you to take synchronous methods and use them in a way in which they were a promise" #### ⏱️ [21:00](https://youtu.be/jg8gJz82kZg?t=1260) — [H1] Content Visibility - Key idea: Control element rendering to improve performance with preserved state - Evidence: "Facebook engineers observed up to 250 millisecond improvement in navigation times" #### ⏱️ [23:30](https://youtu.be/jg8gJz82kZg?t=1410) — [H2] Content Visibility Auto - Key idea: Automatically defer rendering of offscreen elements - Evidence: "Things hidden when they are off screen and renders things offscreen later" #### ⏱️ [25:45](https://youtu.be/jg8gJz82kZg?t=1545) — [H3] Implementation Warnings - Key idea: Content visibility requires careful testing to avoid layout shift - Evidence: "You want to be more surgical with it. You want to test with it" ## 📚 References - [Baseline 2025 Official List](https://web.dev/baseline) - [View Transitions Specification](https://drafts.csswg.org/css-view-transitions/) - [Popover API Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) - [Blobfolio Base64 Performance Analysis](https://blobfolio.com/) ## 🗣️ Paraphrase - Baseline 2025 brings 24 web platform features that work consistently across all modern browsers, eliminating the need to check complex compatibility charts - Same-document view transitions enable smooth animations between DOM states, making it easier to create polished user interfaces without heavy JavaScript libraries - New CSS functions like abs() and improved display property transitions give developers more control over styling and animations natively ## 📰 Newsletter **Baseline 2025 Unlocks Native Web Animations and Performance** WordPress developers can now safely use 24 new web platform features across all browsers! The standout addition is same-document view transitions, perfect for animating block editor changes or theme customizer previews. The popover API simplifies tooltip and dropdown creation without JavaScript libraries. For performance gains, try the new content-visibility property on heavy widgets or the updated base64 handling for media processing. These native features reduce plugin dependencies and improve Core Web Vitals. **Key benefits for WordPress:** - Smoother admin interface animations - Lighter themes with native CSS features - Better performance on content-heavy sites Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### WordPress - Core: Evaluate view transitions for block editor state changes, explore popover API for tooltips - Themes: Update animation patterns using native CSS instead of jQuery animations - Performance: Audit heavy widgets for content-visibility opportunities - Documentation: Create guides for baseline 2025 features in theme development ## 🧪 Hypotheses - View transitions will reduce JavaScript animation library usage by 40% in new projects - Content visibility auto will improve initial page load times for content-heavy sites by 15% - Popover API adoption will decrease modal/tooltip plugin installations - Native CSS math functions will enable more responsive design patterns ### 📊 Methodology - Survey frontend developers on animation library usage before/after baseline 2025 - A/B test content visibility on high-traffic WordPress sites measuring Core Web Vitals - Track plugin repository downloads for tooltip/modal solutions over 6 months ### ❓ Questions - How will WordPress core integrate these features into the block editor? - What performance impact will widespread view transition adoption have on older devices? - Which baseline 2025 features provide the biggest accessibility improvements? ### 🔮 Future Research - Measure real-world performance gains from native CSS animations vs JavaScript - Study user experience improvements from smoother web transitions - Explore combining baseline 2025 features for advanced interaction patterns ### 💡 Implications - Practice: Developers can reduce JavaScript dependencies and simplify animation code - Performance: Native browser optimizations provide better performance than polyfills - Security: Fewer third-party libraries reduce attack surface and dependency vulnerabilities - Education: Frontend curricula need updates to include these native capabilities ### 🧠 Learning Styles Assessment Reading level estimate: Grade 9-10 #### 👀 Visual learners - Present: Video demonstrations of view transitions, grid animations - Improve: Side-by-side comparisons of old vs new implementation methods #### 🔊 Aural learners - Present: Podcast format with detailed explanations - Improve: Audio descriptions of visual animations and code changes #### 🗣️ Verbal learners - Present: Clear API explanations with analogies - Improve: Glossary of technical terms and their relationships #### 🧩 Kinesthetic learners - Present: Live coding demonstrations, interactive examples - Improve: Step-by-step tutorials with downloadable starter code #### 🧠 Logical learners - Present: Performance comparisons, browser support timelines - Improve: Decision trees for when to use each new feature #### 🧑‍🤝‍🧑 Social learners - Present: Discussion format between hosts - Improve: Community challenges to implement baseline 2025 features #### 🧘‍♀️ Solitary learners - Present: Comprehensive documentation links - Improve: Self-assessment checklist for feature implementation #### 🌿 Naturalistic learners - Present: Evolution of web standards over time - Improve: Ecosystem impact analysis of new features ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Audio descriptions of visual demonstrations - Improve: Transcript with code snippets marked as such #### Keyboard navigation - Present: Popover API includes focus management - Improve: Examples should demonstrate keyboard accessibility #### Contrast and readability - Present: Video maintains good contrast - Improve: Code examples need higher contrast backgrounds #### Media and captions - Present: Full transcript provided - Improve: Visual code examples need audio descriptions ### 🌍 DEIB Assessment #### Cultural breadth - Present: Technical content accessible globally - Improve: Examples could use diverse naming conventions #### Inclusive language - Present: Neutral technical language throughout - Improve: Avoid colloquialisms like "go for it son" #### Neurodiversity support - Present: Clear section breaks with timestamps - Improve: Chapter markers for easier navigation #### Representation - Present: Technical focus without bias - Improve: Diverse example applications and use cases ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Features in baseline → safe to use → reduced compatibility concerns - Inductive strength: Performance examples from Facebook support broader benefits - Causal reasoning: Native implementations → better performance than polyfills #### Fallacies - Appeal to novelty: Assumes new features are automatically better without considering edge cases - Hasty generalization: Content visibility benefits may not apply to all use cases #### Tone of voice - Overall tone: Enthusiastic and educational with practical focus ### 🛡️ DARVO Analysis - No defensive patterns detected - Content focuses on technical capabilities rather than justifying decisions - Balanced presentation of benefits and limitations ## 🎯 Conclusion Baseline 2025 represents a significant step forward in web platform maturity, providing developers with powerful native capabilities that previously required JavaScript libraries. The combination of view transitions, popover API, and CSS enhancements enables more performant and accessible user interfaces. Developers should evaluate these features for new projects while considering progressive enhancement for existing applications. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] View transitions enable native DOM animation > [!quote] [Baseline 2025 Features](https://www.youtube.com/watch?v=jg8gJz82kZg) by [[Syntax]] via [[YouTube]]. Published 2024-12-20. Accessed 2024-12-20. > "You can now transition any element to any element, not just when you're changing pages." Replaces complex JavaScript animation libraries with native browser capabilities. [view highlight](https://youtu.be/jg8gJz82kZg?t=150#H1) #xref #articleseed ID:rw_baseline2025 ### [H2] Content visibility improves rendering performance > [!quote] [Baseline 2025 Features](https://www.youtube.com/watch?v=jg8gJz82kZg) > "Facebook engineers observed up to 250 millisecond improvement in navigation times." Native control over element rendering states reduces unnecessary computation. [view highlight](https://youtu.be/jg8gJz82kZg?t=1260#H2) #xref ID:rw_performance2025 --- ### 🔖 Atomic Split Pad (Zettel Candidates) Purpose: Promote reusable claims into Atomic notes. Split level: H4 #### [Z1] Baseline tracks cross-browser feature availability - Simplifies compatibility decisions vs Can I Use complexity - Pointer to 00:00 timestamp - Links: [[Browser-Compatibility]] [[Web-Standards]] #### [Z2] Native CSS animations outperform JavaScript solutions - Browser optimizations provide better performance than polyfills - Pointer to view transitions demo - Links: [[Performance-Optimization]] [[CSS-Animations]] --- ### ✏️ Fleeting Queue Purpose: Capture quick actions for Fleeting notes. - [F1] Research view transitions for WordPress block editor — smooth state changes #fleeting #wordpress - [F2] Test content visibility on widget-heavy themes — performance optimization #fleeting #performance - [F3] Evaluate popover API vs current tooltip plugins — dependency reduction #fleeting #ui --- ## Full Transcript [00:00] The end of 2025 is here and the browser [00:04] gained so much cool stuff. We're going [00:06] to be talking about what we gained in [00:09] 2025 for baseline on this episode of [00:13] Syntax. My name is Scott Tolinsky. I'm a [00:15] developer from Denver. With me as always [00:16] is Wes Boss. What's up, Wes? [00:18] >> Hey. Yeah, Baseline is like a project [00:21] from Google and Google started it, but [00:23] basically it's all the like the the web [00:25] industry. Um and and baseline is this [00:28] idea that you aim to show what features [00:30] are usable today or or usable now. Not [00:33] like you know you go to can I use and [00:35] everyone's like oh but like Samsung [00:37] internet from 15 years ago doesn't [00:39] support this and it's kind of hard to [00:41] just glance at that and see if you can [00:42] use it. Whereas baseline will just tell [00:44] you like newly available or like go for [00:47] it son you know you can you can use this [00:49] thing. So, baseline 2025, these are [00:52] features that were added to every they [00:54] they may have been added previously, but [00:55] these are features that you can use [00:57] today because they are part of baseline [00:59] 2025. They are in all browsers. [01:01] >> Yes. And if you have to support Internet [01:03] Explorer 5 today or whatever, [01:07] this ain't for you. [01:08] >> L in the comments for IE supporters. Is [01:10] anyone I'm curious if anyone is still [01:12] supporting IE at all. [01:14] >> I can't imagine. I can't imagine. I'm [01:16] sure there's some like weird like [01:19] embedded devices that have to support [01:20] like a 8-year-old version of Chrome or [01:23] something odd like that, but not as [01:25] common. [01:26] >> Yeah, it's not as common. [01:34] >> All right, let's get into it. Wes, what [01:36] do you got for me? [01:37] >> Yeah, so there is 24 new APIs. We'll [01:40] link up the the actual list of them. [01:43] Some of them not interesting at all and [01:45] some of them are are pretty exciting. So [01:47] we're going to explain what they are. So [01:49] first one is same document view [01:52] transitions. So view transitions in CSS [01:55] allow you to essentially transition [01:57] anything, right? Like we're we're used [01:58] to putting a transition on something. [02:00] You can like transition the the width or [02:02] the height or the opacity, you know? Um [02:05] but when you want to transition [02:07] something from one spot to another, it's [02:10] it's not always doable. So, I I built [02:13] this right here, which is This is Woo. [02:16] Can you Can you guess what this is right [02:18] here, Scott? [02:19] >> Uh, can I guess maybe? What do you mean [02:21] can I guess? [02:23] >> Can you like What do you think? What do [02:24] you think this is built in right here? [02:27] >> What do I think this is built in? I'm [02:28] going to say view transitions. [02:30] >> Yes, this is You got it right. So, this [02:33] is [02:34] >> for people who are not seeing, there's a [02:35] bunch of squares jumbling around on [02:38] screen uh of of Wes's video. uh just for [02:41] the audio listeners so they're not [02:43] wondering what the hell we're talking [02:44] about, [02:44] >> what the hell's going on. So, this is a [02:46] grid of I think 20 20 or so video [02:50] elements and and when I click on [02:53] randomize, I'm essentially just [02:55] randomizing their their place in the [02:58] grid, [02:59] >> the DOM [03:00] >> in the DOM. Not even um the order value. [03:03] Oh, no, it is. It's randomizing their [03:05] value, their order in the DOM, right? It [03:07] takes them out, shuffles them, puts them [03:08] back in the DOM. Normally in the DOM [03:10] that would just be like an instant [03:12] change over but with view transitions [03:14] what you can do is you can give every [03:16] single item a view transition name and [03:20] then you you call an API called [03:22] document.st start view transition and [03:25] what that will essentially do is it [03:26] takes a snapshot of where it is and then [03:28] in the callback of that code you you [03:30] apply some changes. In my case you can [03:33] add or remove classes you can change the [03:34] colors of things. In my case, I'm simply [03:37] just shuffling the order of them in the [03:38] DOM. Um, and then it will just tween [03:42] them from where it was to where it needs [03:44] to go. And you can put custom easings [03:46] and bezier curves and animations on them [03:49] uh all over the place. In in my case, [03:51] I'm shuffling up and putting a kind of a [03:54] fun transition on each of these [03:55] elements. So, the fact that you can now [03:58] transition any element to any element, [04:01] not just when you're changing pages, but [04:04] when you're clicking a button or adding [04:05] a class is really cool. And now that's [04:08] in every single browser. Yeah. You know [04:10] what I will say? Uh, I use view [04:12] transitions all the time and I think [04:15] often times people don't even think [04:17] about using them when they they could be [04:19] the easiest solution to do any [04:21] particular type of animation, especially [04:24] when you have something that you have in [04:26] one place. This has a secondary place [04:29] and you wanted to just tween between [04:30] them like you just said. Like I did an [04:32] example. It was like a a card game. I [04:35] made yuger in the browser and I had my [04:38] cards that were in my hand and when I [04:40] played the card I wanted to just go to [04:42] where it went and all I did was put it [04:43] from one grid to another grid and just [04:46] view transition between the two. Zoop [04:48] and then it's there. It's it's amazing. [04:50] It's a it's an incredible API and I [04:52] think one that is still greatly [04:54] underutilized. You'll see cool demos of [04:56] it all the time. But um now that now [04:58] that we have same document view [05:00] transitions and these are view [05:01] transitions for SPAS single page [05:04] applications um in all browsers you can [05:06] safely feel like you can use them and I [05:09] they're they're fantastic. You can do [05:11] even like I've used them to build all [05:13] kinds of animations from like a [05:15] hamburger menu slide out to anything [05:18] really. And it it is if if you can't do [05:20] it with CSS, just CSS, yeah, you can [05:23] reach for view transitions. And that's [05:25] usually my my way of trying to do things [05:27] like that. I'm going to pick an easy one [05:29] right now, which is a small one, which [05:31] is absolute value. There's now an [05:34] absolute value function in CSS. That's [05:36] right. CSS has got abs, folks. Uh it hit [05:39] the gym 2025 and it got some abs. It got [05:42] a six-pack. Uh, and it could do that [05:44] with the ABS function, which again, it [05:47] does exactly what you would expect it to [05:49] if you have done any kind of absolute [05:50] valuing in math or whatever, and it [05:53] makes the value always positive. For me, [05:55] this is one of those ones that like it's [05:57] put on my nice to have list, and it's [05:59] also put on my when I need it, I'll need [06:02] it. Uh, but I haven't had a use for it [06:04] just yet. I am very I've been doing a [06:07] lot with calculations in CSS lately of a [06:10] lot of calculations [06:12] >> and I know the time where absolute value [06:14] is going to be required will pop up and [06:17] I'm going to be like oh perfect I got [06:18] this now [06:19] >> it's usually people that are doing like [06:21] crazy animations easing curves uh you're [06:26] doing very complicated calculations [06:28] where you need the value to always be [06:31] positive that's when you're you're going [06:32] to reach for it so I certainly certainly [06:34] think as as CSS animations um as calcs [06:38] get more complex, you're going to be [06:39] seeing this a lot more. [06:41] >> Yeah. And maybe that's super related to [06:42] absolute value, but I've been doing a [06:44] lot of math with CSS lately. In fact, I [06:46] just did this demo, which is a color [06:47] picker, and I wanted to do it using only [06:50] CSS. And it's this really neat like CSS [06:53] blob of colors that when you select and [06:56] it's using no JavaScript at all. using [06:59] um checkboxes and elements to grab uh [07:02] the the color the current color of the [07:05] checkbox using you know parent selectors [07:07] or whatever. Either way, there's a lot [07:09] >> move. [07:10] >> Thank you. Yeah, there's a lot of math [07:12] involved in this and I was trying to [07:15] figure out how do I get this value to be [07:18] clamped essentially. I don't even know [07:20] if it's clamping cuz it's not [07:21] necessarily, but I want to uh take a [07:25] value and uh interpolate it between two [07:28] other values. Uh so that way I could I [07:31] could reduce the amount of math in the [07:33] positions that I had for everything. And [07:35] I was getting into some serious I'll try [07:37] to find my most crazy math thing in [07:39] here. Uh because there was like one [07:41] particular function that was like oh it [07:44] wasn't even this one. Sorry. But either [07:46] way, I I do think calc or absolute value [07:48] could have come in handy with this [07:49] because I was working with a lot of [07:51] negative and positive values in here. [07:53] But man, the more and more I I work with [07:56] um calc in CSS, the more you're just [07:59] like, man, the possibilities are [08:02] infinite in this stuff and absolute [08:04] value is just going to help with that. I [08:06] think once we get CSS functions as well, [08:08] that's going to open the door to like [08:10] util libraries um that where you can [08:13] just like somebody will do the hard [08:15] calcs under the hood and then we'll just [08:17] have these nice functions where you can [08:19] pass it your values and get it back. [08:21] >> Yeah, custom funks. If you're out here [08:23] exploring with new APIs, your code is [08:25] probably going to go through some rocky [08:28] times and you'll want to have a tool [08:30] like Sentry on your side to make sure [08:33] that well your users are being well [08:36] supported and like for instance you toss [08:39] in a new API on your site. Uh somebody [08:42] whose browser can't support it, maybe [08:43] it's erroring out, maybe it's throwing [08:45] some type of error. We've we've had that [08:47] situation on syntax before and you want [08:49] to make sure that you're aware of that. [08:51] Who's hitting this error? why are they [08:52] hitting it? What browsers that supported [08:54] it? And you can get AI uh to solve and [08:57] help you debug those things today in [08:59] Sentry. And it is awesome. [09:01] >> It's pretty good. I I used to make the [09:03] joke that like the only thing Sentry [09:06] doesn't do is fix the code for you, but [09:09] now they do. [09:11] >> So, uh they can't make that joke [09:13] anymore. Uh it's it's awesome. Check it [09:15] out. century.iosax. [09:18] That'll get you two months for free. [09:20] Next up, JSON modules um are now [09:23] baseline. So, what this allows you to do [09:25] is simply just import JSON as if it were [09:28] a JavaScript file into your your [09:31] JavaScript. We've been able to do this [09:32] with Noode.js forever. And then when we [09:34] moved over to ESM, we didn't have that [09:36] yet. You might be saying like that's [09:38] that's dumb. Like, why do I need that? [09:40] Um, and I think in a lot of cases people [09:42] are either storing their JSON data as JS [09:45] files so they can import them or they're [09:48] having to do like a fetch where they [09:50] reach outside fetch that data and bring [09:52] it back. And that's annoying because [09:53] then you have to either have a top level [09:55] await or you have to make sure that that [09:56] is loaded. Now you simply just import [09:59] your JSON and then you add a width type [10:01] of JSON onto the end. [10:02] >> Yes. Uh much needed. Uh just another [10:05] thing we don't need bundlers to help us [10:07] with. Right. [10:08] >> Exactly. Yes. All right. Next one is the [10:11] popover API. Now, the popover API was [10:13] added to all browsers in 2024, believe [10:16] it or not, and there was a polyfill that [10:19] worked for it beforehand. So, if you've [10:20] ignored the popover API to this point, I [10:24] think now is the time to learn the [10:26] popover API because u the popover API [10:29] allows you to do what it says to do. uh [10:31] you can have a popover that uh basically [10:34] you can do so declaratively without any [10:37] JavaScript even where you have a popover [10:40] target on a button. You have the popover [10:43] that has the ID and then you have a [10:44] popover attribute on that popover. So [10:48] that way when you click the button the [10:49] popover pops over. There's some default [10:52] styling. It sits on top of everything [10:54] and it works like what you'd expect [10:55] people uses for tool tips, little [10:57] dialogues or toast menus or those types [11:00] of things. [11:01] There's a lot you can do with the [11:02] popover. I would say if you're reaching [11:04] for like a modal, you're probably going [11:06] to look for the dialogue element over [11:08] the popover, but a lot of times when you [11:10] just want something to pop over, uh the [11:13] popover [11:14] >> tool tip, uh drop down nav, um all kinds [11:18] of interesting and we're also getting [11:20] this a lot of this stuff like works [11:22] together, right? like popover dialogue [11:25] CSS anchor and now we're getting the [11:27] interest invoker API which will allow [11:30] you to pop things over when somebody [11:32] simply hovers over top which is so good [11:35] because now you now you can get like CSS [11:38] only [11:39] >> little tool tips on top of your your [11:41] values when you simply hover. [11:43] >> Yeah. And something that the popover API [11:45] does that just simply position fixing [11:48] fixing doesn't or positioning absoluting [11:51] is that it puts it on the top layer [11:53] which is it it's essentially like what [11:55] people use React portals for. It [11:57] essentially takes things and sets it on [11:59] a new layer stacking layer on top of [12:02] everything. Meaning that our Z-index [12:04] woes of popover stuff can go away [12:08] because now you could just use the top [12:10] layer API from popover. It pops over, [12:13] sits on top of everything. And with the [12:16] anchor API, it allows you to actually [12:19] position it where you want, which is so [12:21] funny. This is the top layer API minus [12:23] the anchor without anchor positioning, [12:26] kind of a disaster. It's tough to work [12:28] in. It's tough to position things. But [12:29] with the anchor API where you can anchor [12:31] it to something else, it is uh really [12:35] next level API. Also, anchor positioning [12:37] though not baseline yet. It is behind a [12:39] flag in Firefox still. So, [12:42] checking that out yesterday. There's [12:43] there's been a lot of movement in the [12:45] Mozilla bug in the last couple days. So, [12:47] I'm [12:47] >> there has been [12:48] >> I'm kind of I'm kind of thinking that [12:51] it's going to come soon, but I've said [12:52] that before and been disappointed. So, [12:54] I'm not not getting my hopes up yet. I [12:56] am [12:57] >> feel Firefox has had some movement on [13:00] some APIs lately that I have been kind [13:03] of surprised by. So, [13:06] >> killing it. [13:06] >> Uh oh, yeah. Next one we have is this [13:09] one might not be interesting to you but [13:11] I'll explain why it's interesting to me [13:12] is a B 64 to u int8 array. So what this [13:18] means is that if you have been using [13:21] like windowa tob or b to a to encode and [13:25] decode base 64 um that's always been a [13:28] bit of a weird one because you you look [13:29] up the mdn for b2a which is a a function [13:33] for encoding and decoding uh base 64. it [13:37] says like this is deprecated. We're like [13:38] okay but like why is everybody using it? [13:41] Um and the replacement for that is using [13:44] these new UN8 array APIs. Um and I'll [13:48] explain why this is good because if you [13:51] have B 64 data um using those old APIs [13:56] it stores them as a string. Um and [13:58] that's why like when Scott did the like [14:00] try to crash the browser challenge [14:02] what's what did he go for? He went for a [14:03] big ass B 64 image, right? [14:06] >> Oh, yeah. [14:07] >> And that that's a lot for for the [14:09] browser to to store and to decode and [14:11] all of that. So, this new one allows you [14:14] to store B 64 data not as a string, but [14:18] as a special array, which is a UI 8 [14:21] array. And there's a really neat I I'll [14:24] link it up blog post about this from [14:26] Blobfolio. and he he kind of looked into [14:29] it and he says storing the data as an [14:33] array is is actually quite a bit bigger. [14:37] Um, however, [14:39] in in the DOM, it's significantly [14:41] smaller because instead of having like [14:44] image source equals and and any type of [14:46] binary data can go into a a an array, [14:50] right? where you probably see it most [14:52] often in web development is like an [14:55] image that's been B 64 encoded. If you [14:58] want to then display that as an image, [15:00] not as a string because like those [15:02] things are massive and often it's it [15:04] gets really chuggy to decode them. What [15:07] you can do is you can use the uh create [15:11] object URL similar to if you've ever had [15:13] a video stream and you want to set it to [15:16] a video tag. You'll often see that like [15:18] blob URL where it links to like a unique [15:20] ID. You can do that with images as well [15:23] where you create a URL that points to a [15:26] binary data, a blob. What the benefit of [15:29] that is is if you need to use it in [15:30] multiple places, it's still pointing to [15:32] one spot. Um, and it's also the DOM [15:35] doesn't have to deal with this massive [15:37] huge string. So, um, apparently the blog [15:40] post shows that it's overall better and [15:43] faster for both the DOM rendering and [15:46] for for painting. [15:47] >> So, don't use next time you have to B 64 [15:51] decode something, reach for this API. [15:53] Nice. Yeah, I I didn't even notice that. [15:57] Did not know. And it is funny cuz when [15:59] you you preemptively called me wondering [16:02] why it was important or why I should [16:04] care, I was currently wondering why I [16:06] should care. So, thank you for doing [16:08] that. Uh, I'm going to show you next one [16:12] that actually was baseline 2024, but I [16:15] went looking for it in baseline 2025 and [16:18] was shocked to see that it was baseline [16:20] 2024 because we got starting style last [16:23] year, which was um the ability to [16:26] declare CSS that is something before or [16:29] like at the state at which it enters the [16:31] DOM. So therefore, you'd be able to then [16:34] uh animate from that state to its end [16:38] state. Uh allowing you to do all kinds [16:40] of animations where things came into the [16:42] DOM. In fact, um this actually used to [16:45] be and and maybe how some people still [16:47] do it, how like React transition used to [16:49] work where they would add a class or [16:50] even Angular transitions. They would add [16:52] a class to something with the initial [16:55] with the starting style and then add [16:58] another class and then remove that [16:59] class. So they they the way they did [17:01] classes to do animations was simply [17:03] having a starting style class and then [17:05] the ending state style class [17:08] >> like like a like a millisecond later you [17:10] would apply that second class and then [17:11] that gave you then an A to a B, right? [17:14] Cuz if you just apply styles to [17:16] something right out of the gate, it's [17:18] going to be rendered with those styles. [17:19] So you need an A to a B. You can't just [17:21] go straight to B. So starting style will [17:23] allow you to to give yourself a an a so [17:27] that you can trans and and most likely [17:29] what is this used for like like uh [17:30] animating in a modal like it it can it [17:33] can [17:35] >> right come out from the bottom. [17:37] >> Yes, you can do all kinds of stuff with [17:38] this but I always felt like this API was [17:41] underserved without this other API allow [17:45] discrete. Now allow discreet was the one [17:47] that I did not realize also was in [17:49] baseline 2024. So you can put on a [17:52] transition. Let's say uh display. So you [17:56] do a transition display 0.3 seconds [17:59] allow discrete. Now anybody who's done [18:02] CSS transitions will know that you [18:04] cannot apply transitions to things like [18:07] display. So to go from display none to [18:09] display block. And many of these things [18:11] like dialogue or popovers, they have [18:13] display none on them, right? So [18:15] animating them when they come into the [18:16] DOM even with starting style was not [18:18] super effective. But with this allow [18:21] discrete, what it does is it actually [18:24] applies the display property. So that [18:27] way it can it it applies it early or [18:30] later depending on animating in or out. [18:32] That way it will essentially be uh [18:35] display block and then allow you to uh [18:38] show in something or whatever the [18:40] display visible. What display block [18:43] display wait [18:45] >> display none to display block. You can [18:48] now none to display block or whatever it [18:50] is, whatever the initial value is. So [18:52] that way you can do those transitions [18:53] whether that is from translating or [18:55] fading or whatever. [18:56] >> Scale zero to scale one like literally [18:59] anything you can. So here I I have in my [19:02] on my site here and I'll link this up is [19:04] a demo that shows how to do a hamburger [19:07] sliding menu using popover starting [19:10] style and allow uh allowed discrete to [19:13] do a full animating animating out [19:16] popover hamburger menu while it leaves [19:19] the DOM. It's not just simply that this [19:21] thing is animating on and off. It's [19:23] actually entering and leaving the DOM. [19:25] And you can use it again for all kinds [19:27] of other things like that. You can use [19:29] it to animate accordians. You can use it [19:31] to animate uh you can use it to do [19:34] dialogues or drawers. So, um uh man, it [19:38] is uh it is a really really cool API [19:43] that allows you to do just an endless [19:45] amount of stuff. Like I have essentially [19:48] a dialogue that acts as if it is a swipe [19:52] up dialogue or a swipe up drawer uh [19:55] animation using only CSS. It's [19:58] incredible. [19:58] >> You know why I think you were confused [20:00] is because I'm just looking at can I use [20:02] for this and allow discreet was only I [20:05] think it landed in Safari in September [20:08] 2024. So kind of near the end of the [20:10] year. However, the specifically display [20:13] none to display block transition. That [20:16] is not in Firefox yet [20:19] >> still. [20:19] >> So yeah, but it's not the end of the [20:22] world because you know what happens when [20:23] you don't support it? it just doesn't [20:26] transition, you know, like it's not [20:27] going to break your app. It's simply [20:29] just going to not fade in. It will just [20:31] show up immediately. [20:32] >> So, that makes me wonder why they would [20:34] add allow discreet to Firefox and not [20:38] >> I I think it was allowed discreet was [20:41] added in 2014 to Chrome. [20:44] >> Yeah. [20:44] >> Right. But then the the ability to [20:47] transition it [20:49] >> Yeah. a transition behavior [20:52] was only added recently in all these [20:55] browsers. So, [20:56] >> so that is really surprising. But I do [20:58] love uh APIs like this like view [21:01] transitions when it didn't work. It just [21:04] uh changed the page like normal. But [21:06] then people who are in browsers that [21:08] have full set of features would then be [21:10] able to get that transition. And Firefox [21:13] users, yes, we love progressive [21:15] enhancement. Uh that's always great when [21:18] you have to do it when you can get [21:19] progressive enhancement without having [21:20] to yeah [21:21] >> um just sacrifice or rewrite a massive [21:23] amount of code. So either way you can [21:25] use starting style allow discreet today [21:27] if you want to sacrifice some animations [21:29] on Firefox. Next up I have promise.try. [21:32] This is very simple API method that [21:35] allows you to take synchronous methods [21:38] and use them in a way in which they were [21:40] a promise. So this problem comes about [21:43] where if you're using multiple methods [21:46] that are all promisebased. If your whole [21:48] API is promisebased, it's so beautiful [21:50] because you can you can chain them [21:52] together. You can add a catch on the [21:54] end. You can use promise.all and get all [21:56] the results at once. You can use [21:58] promise.all settled. This is all [22:00] beautiful until there's one API which is [22:03] like synchronous and it doesn't have a [22:05] promise-based API you know like um at [22:08] the very basic like a confirm [22:11] >> you know if a confirm or like um [22:15] fs.right write file sync a lot of the AI [22:18] loves using the synchronous versions of [22:20] the file system any of those APIs if [22:23] they were to throw an error you can't [22:25] use them in the same beautiful chaining [22:28] promise way that I was just talking [22:29] about so now promise try will allow you [22:32] to just wrap a nonpromisebased [22:35] function or method and then it will if [22:38] it throws it will it will catch it in [22:40] the catch if it returns a value it will [22:42] return it in your promiseall settled So [22:45] you can use any API as if it were a [22:48] promise or not. So it's really nice. [22:51] >> Love that. Uh the last one I have for [22:53] you is content visibility. Now content [22:56] visibility is an interesting API and [22:58] it's one of those APIs that when you [23:00] first hear about it, you're like, "Ooh, [23:02] this would be like good to make the [23:04] whole website out of the black box type [23:06] of thing, right?" Um if you you catch [23:10] you make the whole plan out of the black [23:11] box because it's so powerful. Whatever. [23:12] It's so strong. No, but the what this [23:14] API allows you to do is control the [23:16] rendering of elements in a way that uh [23:20] essentially pauses the rendering of an [23:23] item. So it preserves its rendering [23:25] state where if you display none, it has [23:28] to rerender when it comes back and it [23:30] removes it from the DOM. Visibility [23:32] hidden [23:34] keeps it in the DOM but is constantly [23:39] still rendering it. it's just visibility [23:41] hidden where this if you do content [23:44] visibility hidden what it does is it [23:47] doesn't render uh it hides the element [23:50] but it preserves its rendering state so [23:53] that way if you were to toggle it back [23:55] then it's preserved that rendering state [23:57] and then it updates the rendering state [24:00] um after you toggle it back the the way [24:03] that I find this API to be the most [24:05] interesting I will say is with content [24:07] visibility auto and what that does is it [24:10] basically has things hidden when they [24:12] are off screen and that way it does the [24:15] initial load and then it then renders [24:18] the things that are offscreen which is [24:21] really useful if you have sections of [24:24] big things that are rendering offscreen. [24:26] Uh like a lot of times people reach for [24:28] sometimes virtual lists, virtualized [24:30] lists for this type of thing. Uh but [24:32] this might be something that you could [24:34] use if you're having a performance [24:36] impact of rendering because you're [24:37] rendering a lot of big things or a lot [24:40] of things offscreen and uh content [24:42] visibility auto on the things off screen [24:45] will then allow you to delay that. But [24:48] you do have to be careful with it. It [24:49] can cause layout shift. It feels like at [24:52] first glance you're like oo I'll just [24:54] put every single thing that's offscreen [24:56] content visibility auto. But I think you [24:59] want to be more surgical with it. I [25:01] think you want to test with it. I want [25:03] you [25:03] >> I had an issue where I added it to a [25:05] whole bunch of stuff and it started to [25:07] chug or I had it on a website and it was [25:09] faster and then they changed something [25:12] >> and it started getting chuggy and then [25:14] the the way I fixed it was I simply [25:16] removed it which is great like ideally [25:18] the browser will figure out these things [25:20] for you but there are some cases where [25:22] you'll have to you know better and you [25:24] can explicitly step in and apply that. [25:26] It's it's like will change where it's a [25:29] a feature that can help if you know what [25:33] you're doing with it and you test to [25:35] make sure. But just a simply yellow [25:37] applying it to everything is probably [25:39] not the right call. But when it does [25:41] work, like there's like a a use case on [25:43] Facebook. It says Facebook engineers [25:46] observed up to 250 millisecond [25:48] improvement in navigation when uh times [25:51] when going back to previously cached [25:53] views. Being able to like have that [25:56] control in the right circumstance I [25:58] think can help. Uh so whether that is [26:00] content visibility hidden or auto it's a [26:04] cool API to learn. [26:05] >> Uh all right I think that is that it [26:07] >> that's all I have. Peace. [26:13] One of my thumbnail ideas because CSS [26:17] got absolute value was to have CSS [26:20] having abs. [26:24] >> It's ridiculous. That's a great idea.  [[3. Resources/Readwise/Full Document Contents/Articles/Baseline 2025 Features Web Gained in 2025|Full Document Contents]] ## Document Notes --- tags: #baseline #web-development #css #javascript author: Syntax source: YouTube reference: https://www.youtube.com/watch?v=jg8gJz82kZg date created: 2024-12-20 10:30 --- # 🏷️ Title: Baseline 2025 Features - Web APIs and CSS Now Available in All Browsers ## 🧰 Action Inbox - [H1] Implement view transitions for CRUD animations — same document API now stable #animation - [H2] Replace window.atob/btoa with uint8array methods — better performance #optimization - [H3] Test popover API for tooltips and dropdowns — baseline stable #ui ## 🧭 Table of Contents - [[#📝 Summary]] - [[#📖 Main Content]] - [[#🗒️ Notes]] - [[#📚 References]] - [[#🗣️ Paraphrase]] - [[#📰 Newsletter]] - [[#✅ Action Items]] - [[#🧪 Hypotheses]] - [[#📊 Methodology]] - [[#❓ Questions]] - [[#🔮 Future Research]] - [[#💡 Implications]] - [[#🧠 Learning Styles Assessment]] - [[#📊 Accessibility Assessment]] - [[#🌍 DEIB Assessment]] - [[#✅ Logical Validity]] - [[#🛡️ DARVO Analysis]] - [[#🎯 Conclusion]] ### 🔗 References - [Baseline 2025 Features](https://web.dev/baseline) - [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) ## 📝 Summary - Baseline 2025 adds 24 new web APIs and CSS features available across all browsers - Key additions include same-document view transitions, popover API, and CSS absolute value function - Features enable advanced animations and UI patterns without requiring JavaScript frameworks - Performance improvements through better binary data handling and rendering optimization - Developers can now safely use these features without worrying about browser compatibility ## 📖 Main Content Baseline is a web industry initiative that tracks when features become available across all modern browsers. Unlike Can I Use, which shows complex compatibility matrices, Baseline simply indicates whether a feature is "newly available" or ready to use. The 2025 release includes 24 new APIs spanning CSS animation improvements, better data handling, and enhanced UI capabilities. Same-document view transitions allow smooth element animations within single-page applications. The popover API provides declarative tooltips and overlays. CSS gains mathematical functions and better display property transitions. These features reduce reliance on JavaScript frameworks and bundlers while improving performance through native browser optimizations. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/jg8gJz82kZg?t=0) — [H1] Baseline 2025 Introduction - Key idea: Baseline tracks features available across all browsers, unlike Can I Use complexity - Evidence: "Baseline will just tell you like newly available or like go for it son you know you can use this thing" #### ⏱️ [02:30](https://youtu.be/jg8gJz82kZg?t=150) — [H1] Same Document View Transitions - Key idea: Enables smooth element animations between DOM states without page changes - Evidence: "You can now transition any element to any element, not just when you're changing pages" #### ⏱️ [04:45](https://youtu.be/jg8gJz82kZg?t=285) — [H2] View Transitions Implementation - Key idea: Uses document.startViewTransition API with view-transition-name CSS property - Evidence: "Takes a snapshot of where it is and then in the callback you apply some changes" #### ⏱️ [07:15](https://youtu.be/jg8gJz82kZg?t=435) — [H2] CSS Absolute Value Function - Key idea: CSS gains abs() function for mathematical calculations - Evidence: "CSS has got abs, folks. It makes the value always positive" #### ⏱️ [09:30](https://youtu.be/jg8gJz82kZg?t=570) — [H2] JSON Modules Support - Key idea: Import JSON files directly as ES modules with type assertion - Evidence: "Simply just import your JSON and then you add a with type of JSON onto the end" #### ⏱️ [11:00](https://youtu.be/jg8gJz82kZg?t=660) — [H1] Popover API - Key idea: Declarative popovers with top layer positioning and automatic focus management - Evidence: "Puts it on the top layer which takes things and sets it on a new layer stacking layer" #### ⏱️ [13:45](https://youtu.be/jg8gJz82kZg?t=825) — [H2] Base64 to Uint8Array - Key idea: Better binary data handling replacing deprecated atob/btoa methods - Evidence: "Storing the data as an array is significantly smaller in the DOM" #### ⏱️ [16:30](https://youtu.be/jg8gJz82kZg?t=990) — [H1] Starting Style and Allow Discrete - Key idea: Animate elements entering/leaving DOM with display property transitions - Evidence: "Animate from display none to display block using allow discrete" #### ⏱️ [19:15](https://youtu.be/jg8gJz82kZg?t=1155) — [H2] Promise.try Method - Key idea: Wrap synchronous functions in promise-compatible interface - Evidence: "Allows you to take synchronous methods and use them in a way in which they were a promise" #### ⏱️ [21:00](https://youtu.be/jg8gJz82kZg?t=1260) — [H1] Content Visibility - Key idea: Control element rendering to improve performance with preserved state - Evidence: "Facebook engineers observed up to 250 millisecond improvement in navigation times" #### ⏱️ [23:30](https://youtu.be/jg8gJz82kZg?t=1410) — [H2] Content Visibility Auto - Key idea: Automatically defer rendering of offscreen elements - Evidence: "Things hidden when they are off screen and renders things offscreen later" #### ⏱️ [25:45](https://youtu.be/jg8gJz82kZg?t=1545) — [H3] Implementation Warnings - Key idea: Content visibility requires careful testing to avoid layout shift - Evidence: "You want to be more surgical with it. You want to test with it" ## 📚 References - [Baseline 2025 Official List](https://web.dev/baseline) - [View Transitions Specification](https://drafts.csswg.org/css-view-transitions/) - [Popover API Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) - [Blobfolio Base64 Performance Analysis](https://blobfolio.com/) ## 🗣️ Paraphrase - Baseline 2025 brings 24 web platform features that work consistently across all modern browsers, eliminating the need to check complex compatibility charts - Same-document view transitions enable smooth animations between DOM states, making it easier to create polished user interfaces without heavy JavaScript libraries - New CSS functions like abs() and improved display property transitions give developers more control over styling and animations natively ## 📰 Newsletter **Baseline 2025 Unlocks Native Web Animations and Performance** WordPress developers can now safely use 24 new web platform features across all browsers! The standout addition is same-document view transitions, perfect for animating block editor changes or theme customizer previews. The popover API simplifies tooltip and dropdown creation without JavaScript libraries. For performance gains, try the new content-visibility property on heavy widgets or the updated base64 handling for media processing. These native features reduce plugin dependencies and improve Core Web Vitals. **Key benefits for WordPress:** - Smoother admin interface animations - Lighter themes with native CSS features - Better performance on content-heavy sites Resources: [Learn WordPress](https://learn.wordpress.org/), [Developer Docs](https://developer.wordpress.org/), [WP-CLI](https://wp-cli.org/) ## ✅ Action Items #### WordPress - Core: Evaluate view transitions for block editor state changes, explore popover API for tooltips - Themes: Update animation patterns using native CSS instead of jQuery animations - Performance: Audit heavy widgets for content-visibility opportunities - Documentation: Create guides for baseline 2025 features in theme development ## 🧪 Hypotheses - View transitions will reduce JavaScript animation library usage by 40% in new projects - Content visibility auto will improve initial page load times for content-heavy sites by 15% - Popover API adoption will decrease modal/tooltip plugin installations - Native CSS math functions will enable more responsive design patterns ### 📊 Methodology - Survey frontend developers on animation library usage before/after baseline 2025 - A/B test content visibility on high-traffic WordPress sites measuring Core Web Vitals - Track plugin repository downloads for tooltip/modal solutions over 6 months ### ❓ Questions - How will WordPress core integrate these features into the block editor? - What performance impact will widespread view transition adoption have on older devices? - Which baseline 2025 features provide the biggest accessibility improvements? ### 🔮 Future Research - Measure real-world performance gains from native CSS animations vs JavaScript - Study user experience improvements from smoother web transitions - Explore combining baseline 2025 features for advanced interaction patterns ### 💡 Implications - Practice: Developers can reduce JavaScript dependencies and simplify animation code - Performance: Native browser optimizations provide better performance than polyfills - Security: Fewer third-party libraries reduce attack surface and dependency vulnerabilities - Education: Frontend curricula need updates to include these native capabilities ### 🧠 Learning Styles Assessment Reading level estimate: Grade 9-10 #### 👀 Visual learners - Present: Video demonstrations of view transitions, grid animations - Improve: Side-by-side comparisons of old vs new implementation methods #### 🔊 Aural learners - Present: Podcast format with detailed explanations - Improve: Audio descriptions of visual animations and code changes #### 🗣️ Verbal learners - Present: Clear API explanations with analogies - Improve: Glossary of technical terms and their relationships #### 🧩 Kinesthetic learners - Present: Live coding demonstrations, interactive examples - Improve: Step-by-step tutorials with downloadable starter code #### 🧠 Logical learners - Present: Performance comparisons, browser support timelines - Improve: Decision trees for when to use each new feature #### 🧑‍🤝‍🧑 Social learners - Present: Discussion format between hosts - Improve: Community challenges to implement baseline 2025 features #### 🧘‍♀️ Solitary learners - Present: Comprehensive documentation links - Improve: Self-assessment checklist for feature implementation #### 🌿 Naturalistic learners - Present: Evolution of web standards over time - Improve: Ecosystem impact analysis of new features ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Audio descriptions of visual demonstrations - Improve: Transcript with code snippets marked as such #### Keyboard navigation - Present: Popover API includes focus management - Improve: Examples should demonstrate keyboard accessibility #### Contrast and readability - Present: Video maintains good contrast - Improve: Code examples need higher contrast backgrounds #### Media and captions - Present: Full transcript provided - Improve: Visual code examples need audio descriptions ### 🌍 DEIB Assessment #### Cultural breadth - Present: Technical content accessible globally - Improve: Examples could use diverse naming conventions #### Inclusive language - Present: Neutral technical language throughout - Improve: Avoid colloquialisms like "go for it son" #### Neurodiversity support - Present: Clear section breaks with timestamps - Improve: Chapter markers for easier navigation #### Representation - Present: Technical focus without bias - Improve: Diverse example applications and use cases ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Features in baseline → safe to use → reduced compatibility concerns - Inductive strength: Performance examples from Facebook support broader benefits - Causal reasoning: Native implementations → better performance than polyfills #### Fallacies - Appeal to novelty: Assumes new features are automatically better without considering edge cases - Hasty generalization: Content visibility benefits may not apply to all use cases #### Tone of voice - Overall tone: Enthusiastic and educational with practical focus ### 🛡️ DARVO Analysis - No defensive patterns detected - Content focuses on technical capabilities rather than justifying decisions - Balanced presentation of benefits and limitations ## 🎯 Conclusion Baseline 2025 represents a significant step forward in web platform maturity, providing developers with powerful native capabilities that previously required JavaScript libraries. The combination of view transitions, popover API, and CSS enhancements enables more performant and accessible user interfaces. Developers should evaluate these features for new projects while considering progressive enhancement for existing applications. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] View transitions enable native DOM animation > [!quote] [Baseline 2025 Features](https://www.youtube.com/watch?v=jg8gJz82kZg) by [[Syntax]] via [[YouTube]]. Published 2024-12-20. Accessed 2024-12-20. > "You can now transition any element to any element, not just when you're changing pages." Replaces complex JavaScript animation libraries with native browser capabilities. [view highlight](https://youtu.be/jg8gJz82kZg?t=150#H1) #xref #articleseed ID:rw_baseline2025 ### [H2] Content visibility improves rendering performance > [!quote] [Baseline 2025 Features](https://www.youtube.com/watch?v=jg8gJz82kZg) > "Facebook engineers observed up to 250 millisecond improvement in navigation times." Native control over element rendering states reduces unnecessary computation. [view highlight](https://youtu.be/jg8gJz82kZg?t=1260#H2) #xref ID:rw_performance2025 --- ### 🔖 Atomic Split Pad (Zettel Candidates) Purpose: Promote reusable claims into Atomic notes. Split level: H4 #### [Z1] Baseline tracks cross-browser feature availability - Simplifies compatibility decisions vs Can I Use complexity - Pointer to 00:00 timestamp - Links: [[Browser-Compatibility]] [[Web-Standards]] #### [Z2] Native CSS animations outperform JavaScript solutions - Browser optimizations provide better performance than polyfills - Pointer to view transitions demo - Links: [[Performance-Optimization]] [[CSS-Animations]] --- ### ✏️ Fleeting Queue Purpose: Capture quick actions for Fleeting notes. - [F1] Research view transitions for WordPress block editor — smooth state changes #fleeting #wordpress - [F2] Test content visibility on widget-heavy themes — performance optimization #fleeting #performance - [F3] Evaluate popover API vs current tooltip plugins — dependency reduction #fleeting #ui --- ## Full Transcript [00:00] The end of 2025 is here and the browser [00:04] gained so much cool stuff. We're going [00:06] to be talking about what we gained in [00:09] 2025 for baseline on this episode of [00:13] Syntax. My name is Scott Tolinsky. I'm a [00:15] developer from Denver. With me as always [00:16] is Wes Boss. What's up, Wes? [00:18] >> Hey. Yeah, Baseline is like a project [00:21] from Google and Google started it, but [00:23] basically it's all the like the the web [00:25] industry. Um and and baseline is this [00:28] idea that you aim to show what features [00:30] are usable today or or usable now. Not [00:33] like you know you go to can I use and [00:35] everyone's like oh but like Samsung [00:37] internet from 15 years ago doesn't [00:39] support this and it's kind of hard to [00:41] just glance at that and see if you can [00:42] use it. Whereas baseline will just tell [00:44] you like newly available or like go for [00:47] it son you know you can you can use this [00:49] thing. So, baseline 2025, these are [00:52] features that were added to every they [00:54] they may have been added previously, but [00:55] these are features that you can use [00:57] today because they are part of baseline [00:59] 2025. They are in all browsers. [01:01] >> Yes. And if you have to support Internet [01:03] Explorer 5 today or whatever, [01:07] this ain't for you. [01:08] >> L in the comments for IE supporters. Is [01:10] anyone I'm curious if anyone is still [01:12] supporting IE at all. [01:14] >> I can't imagine. I can't imagine. I'm [01:16] sure there's some like weird like [01:19] embedded devices that have to support [01:20] like a 8-year-old version of Chrome or [01:23] something odd like that, but not as [01:25] common. [01:26] >> Yeah, it's not as common. [01:34] >> All right, let's get into it. Wes, what [01:36] do you got for me? [01:37] >> Yeah, so there is 24 new APIs. We'll [01:40] link up the the actual list of them. [01:43] Some of them not interesting at all and [01:45] some of them are are pretty exciting. So [01:47] we're going to explain what they are. So [01:49] first one is same document view [01:52] transitions. So view transitions in CSS [01:55] allow you to essentially transition [01:57] anything, right? Like we're we're used [01:58] to putting a transition on something. [02:00] You can like transition the the width or [02:02] the height or the opacity, you know? Um [02:05] but when you want to transition [02:07] something from one spot to another, it's [02:10] it's not always doable. So, I I built [02:13] this right here, which is This is Woo. [02:16] Can you Can you guess what this is right [02:18] here, Scott? [02:19] >> Uh, can I guess maybe? What do you mean [02:21] can I guess? [02:23] >> Can you like What do you think? What do [02:24] you think this is built in right here? [02:27] >> What do I think this is built in? I'm [02:28] going to say view transitions. [02:30] >> Yes, this is You got it right. So, this [02:33] is [02:34] >> for people who are not seeing, there's a [02:35] bunch of squares jumbling around on [02:38] screen uh of of Wes's video. uh just for [02:41] the audio listeners so they're not [02:43] wondering what the hell we're talking [02:44] about, [02:44] >> what the hell's going on. So, this is a [02:46] grid of I think 20 20 or so video [02:50] elements and and when I click on [02:53] randomize, I'm essentially just [02:55] randomizing their their place in the [02:58] grid, [02:59] >> the DOM [03:00] >> in the DOM. Not even um the order value. [03:03] Oh, no, it is. It's randomizing their [03:05] value, their order in the DOM, right? It [03:07] takes them out, shuffles them, puts them [03:08] back in the DOM. Normally in the DOM [03:10] that would just be like an instant [03:12] change over but with view transitions [03:14] what you can do is you can give every [03:16] single item a view transition name and [03:20] then you you call an API called [03:22] document.st start view transition and [03:25] what that will essentially do is it [03:26] takes a snapshot of where it is and then [03:28] in the callback of that code you you [03:30] apply some changes. In my case you can [03:33] add or remove classes you can change the [03:34] colors of things. In my case, I'm simply [03:37] just shuffling the order of them in the [03:38] DOM. Um, and then it will just tween [03:42] them from where it was to where it needs [03:44] to go. And you can put custom easings [03:46] and bezier curves and animations on them [03:49] uh all over the place. In in my case, [03:51] I'm shuffling up and putting a kind of a [03:54] fun transition on each of these [03:55] elements. So, the fact that you can now [03:58] transition any element to any element, [04:01] not just when you're changing pages, but [04:04] when you're clicking a button or adding [04:05] a class is really cool. And now that's [04:08] in every single browser. Yeah. You know [04:10] what I will say? Uh, I use view [04:12] transitions all the time and I think [04:15] often times people don't even think [04:17] about using them when they they could be [04:19] the easiest solution to do any [04:21] particular type of animation, especially [04:24] when you have something that you have in [04:26] one place. This has a secondary place [04:29] and you wanted to just tween between [04:30] them like you just said. Like I did an [04:32] example. It was like a a card game. I [04:35] made yuger in the browser and I had my [04:38] cards that were in my hand and when I [04:40] played the card I wanted to just go to [04:42] where it went and all I did was put it [04:43] from one grid to another grid and just [04:46] view transition between the two. Zoop [04:48] and then it's there. It's it's amazing. [04:50] It's a it's an incredible API and I [04:52] think one that is still greatly [04:54] underutilized. You'll see cool demos of [04:56] it all the time. But um now that now [04:58] that we have same document view [05:00] transitions and these are view [05:01] transitions for SPAS single page [05:04] applications um in all browsers you can [05:06] safely feel like you can use them and I [05:09] they're they're fantastic. You can do [05:11] even like I've used them to build all [05:13] kinds of animations from like a [05:15] hamburger menu slide out to anything [05:18] really. And it it is if if you can't do [05:20] it with CSS, just CSS, yeah, you can [05:23] reach for view transitions. And that's [05:25] usually my my way of trying to do things [05:27] like that. I'm going to pick an easy one [05:29] right now, which is a small one, which [05:31] is absolute value. There's now an [05:34] absolute value function in CSS. That's [05:36] right. CSS has got abs, folks. Uh it hit [05:39] the gym 2025 and it got some abs. It got [05:42] a six-pack. Uh, and it could do that [05:44] with the ABS function, which again, it [05:47] does exactly what you would expect it to [05:49] if you have done any kind of absolute [05:50] valuing in math or whatever, and it [05:53] makes the value always positive. For me, [05:55] this is one of those ones that like it's [05:57] put on my nice to have list, and it's [05:59] also put on my when I need it, I'll need [06:02] it. Uh, but I haven't had a use for it [06:04] just yet. I am very I've been doing a [06:07] lot with calculations in CSS lately of a [06:10] lot of calculations [06:12] >> and I know the time where absolute value [06:14] is going to be required will pop up and [06:17] I'm going to be like oh perfect I got [06:18] this now [06:19] >> it's usually people that are doing like [06:21] crazy animations easing curves uh you're [06:26] doing very complicated calculations [06:28] where you need the value to always be [06:31] positive that's when you're you're going [06:32] to reach for it so I certainly certainly [06:34] think as as CSS animations um as calcs [06:38] get more complex, you're going to be [06:39] seeing this a lot more. [06:41] >> Yeah. And maybe that's super related to [06:42] absolute value, but I've been doing a [06:44] lot of math with CSS lately. In fact, I [06:46] just did this demo, which is a color [06:47] picker, and I wanted to do it using only [06:50] CSS. And it's this really neat like CSS [06:53] blob of colors that when you select and [06:56] it's using no JavaScript at all. using [06:59] um checkboxes and elements to grab uh [07:02] the the color the current color of the [07:05] checkbox using you know parent selectors [07:07] or whatever. Either way, there's a lot [07:09] >> move. [07:10] >> Thank you. Yeah, there's a lot of math [07:12] involved in this and I was trying to [07:15] figure out how do I get this value to be [07:18] clamped essentially. I don't even know [07:20] if it's clamping cuz it's not [07:21] necessarily, but I want to uh take a [07:25] value and uh interpolate it between two [07:28] other values. Uh so that way I could I [07:31] could reduce the amount of math in the [07:33] positions that I had for everything. And [07:35] I was getting into some serious I'll try [07:37] to find my most crazy math thing in [07:39] here. Uh because there was like one [07:41] particular function that was like oh it [07:44] wasn't even this one. Sorry. But either [07:46] way, I I do think calc or absolute value [07:48] could have come in handy with this [07:49] because I was working with a lot of [07:51] negative and positive values in here. [07:53] But man, the more and more I I work with [07:56] um calc in CSS, the more you're just [07:59] like, man, the possibilities are [08:02] infinite in this stuff and absolute [08:04] value is just going to help with that. I [08:06] think once we get CSS functions as well, [08:08] that's going to open the door to like [08:10] util libraries um that where you can [08:13] just like somebody will do the hard [08:15] calcs under the hood and then we'll just [08:17] have these nice functions where you can [08:19] pass it your values and get it back. [08:21] >> Yeah, custom funks. If you're out here [08:23] exploring with new APIs, your code is [08:25] probably going to go through some rocky [08:28] times and you'll want to have a tool [08:30] like Sentry on your side to make sure [08:33] that well your users are being well [08:36] supported and like for instance you toss [08:39] in a new API on your site. Uh somebody [08:42] whose browser can't support it, maybe [08:43] it's erroring out, maybe it's throwing [08:45] some type of error. We've we've had that [08:47] situation on syntax before and you want [08:49] to make sure that you're aware of that. [08:51] Who's hitting this error? why are they [08:52] hitting it? What browsers that supported [08:54] it? And you can get AI uh to solve and [08:57] help you debug those things today in [08:59] Sentry. And it is awesome. [09:01] >> It's pretty good. I I used to make the [09:03] joke that like the only thing Sentry [09:06] doesn't do is fix the code for you, but [09:09] now they do. [09:11] >> So, uh they can't make that joke [09:13] anymore. Uh it's it's awesome. Check it [09:15] out. century.iosax. [09:18] That'll get you two months for free. [09:20] Next up, JSON modules um are now [09:23] baseline. So, what this allows you to do [09:25] is simply just import JSON as if it were [09:28] a JavaScript file into your your [09:31] JavaScript. We've been able to do this [09:32] with Noode.js forever. And then when we [09:34] moved over to ESM, we didn't have that [09:36] yet. You might be saying like that's [09:38] that's dumb. Like, why do I need that? [09:40] Um, and I think in a lot of cases people [09:42] are either storing their JSON data as JS [09:45] files so they can import them or they're [09:48] having to do like a fetch where they [09:50] reach outside fetch that data and bring [09:52] it back. And that's annoying because [09:53] then you have to either have a top level [09:55] await or you have to make sure that that [09:56] is loaded. Now you simply just import [09:59] your JSON and then you add a width type [10:01] of JSON onto the end. [10:02] >> Yes. Uh much needed. Uh just another [10:05] thing we don't need bundlers to help us [10:07] with. Right. [10:08] >> Exactly. Yes. All right. Next one is the [10:11] popover API. Now, the popover API was [10:13] added to all browsers in 2024, believe [10:16] it or not, and there was a polyfill that [10:19] worked for it beforehand. So, if you've [10:20] ignored the popover API to this point, I [10:24] think now is the time to learn the [10:26] popover API because u the popover API [10:29] allows you to do what it says to do. uh [10:31] you can have a popover that uh basically [10:34] you can do so declaratively without any [10:37] JavaScript even where you have a popover [10:40] target on a button. You have the popover [10:43] that has the ID and then you have a [10:44] popover attribute on that popover. So [10:48] that way when you click the button the [10:49] popover pops over. There's some default [10:52] styling. It sits on top of everything [10:54] and it works like what you'd expect [10:55] people uses for tool tips, little [10:57] dialogues or toast menus or those types [11:00] of things. [11:01] There's a lot you can do with the [11:02] popover. I would say if you're reaching [11:04] for like a modal, you're probably going [11:06] to look for the dialogue element over [11:08] the popover, but a lot of times when you [11:10] just want something to pop over, uh the [11:13] popover [11:14] >> tool tip, uh drop down nav, um all kinds [11:18] of interesting and we're also getting [11:20] this a lot of this stuff like works [11:22] together, right? like popover dialogue [11:25] CSS anchor and now we're getting the [11:27] interest invoker API which will allow [11:30] you to pop things over when somebody [11:32] simply hovers over top which is so good [11:35] because now you now you can get like CSS [11:38] only [11:39] >> little tool tips on top of your your [11:41] values when you simply hover. [11:43] >> Yeah. And something that the popover API [11:45] does that just simply position fixing [11:48] fixing doesn't or positioning absoluting [11:51] is that it puts it on the top layer [11:53] which is it it's essentially like what [11:55] people use React portals for. It [11:57] essentially takes things and sets it on [11:59] a new layer stacking layer on top of [12:02] everything. Meaning that our Z-index [12:04] woes of popover stuff can go away [12:08] because now you could just use the top [12:10] layer API from popover. It pops over, [12:13] sits on top of everything. And with the [12:16] anchor API, it allows you to actually [12:19] position it where you want, which is so [12:21] funny. This is the top layer API minus [12:23] the anchor without anchor positioning, [12:26] kind of a disaster. It's tough to work [12:28] in. It's tough to position things. But [12:29] with the anchor API where you can anchor [12:31] it to something else, it is uh really [12:35] next level API. Also, anchor positioning [12:37] though not baseline yet. It is behind a [12:39] flag in Firefox still. So, [12:42] checking that out yesterday. There's [12:43] there's been a lot of movement in the [12:45] Mozilla bug in the last couple days. So, [12:47] I'm [12:47] >> there has been [12:48] >> I'm kind of I'm kind of thinking that [12:51] it's going to come soon, but I've said [12:52] that before and been disappointed. So, [12:54] I'm not not getting my hopes up yet. I [12:56] am [12:57] >> feel Firefox has had some movement on [13:00] some APIs lately that I have been kind [13:03] of surprised by. So, [13:06] >> killing it. [13:06] >> Uh oh, yeah. Next one we have is this [13:09] one might not be interesting to you but [13:11] I'll explain why it's interesting to me [13:12] is a B 64 to u int8 array. So what this [13:18] means is that if you have been using [13:21] like windowa tob or b to a to encode and [13:25] decode base 64 um that's always been a [13:28] bit of a weird one because you you look [13:29] up the mdn for b2a which is a a function [13:33] for encoding and decoding uh base 64. it [13:37] says like this is deprecated. We're like [13:38] okay but like why is everybody using it? [13:41] Um and the replacement for that is using [13:44] these new UN8 array APIs. Um and I'll [13:48] explain why this is good because if you [13:51] have B 64 data um using those old APIs [13:56] it stores them as a string. Um and [13:58] that's why like when Scott did the like [14:00] try to crash the browser challenge [14:02] what's what did he go for? He went for a [14:03] big ass B 64 image, right? [14:06] >> Oh, yeah. [14:07] >> And that that's a lot for for the [14:09] browser to to store and to decode and [14:11] all of that. So, this new one allows you [14:14] to store B 64 data not as a string, but [14:18] as a special array, which is a UI 8 [14:21] array. And there's a really neat I I'll [14:24] link it up blog post about this from [14:26] Blobfolio. and he he kind of looked into [14:29] it and he says storing the data as an [14:33] array is is actually quite a bit bigger. [14:37] Um, however, [14:39] in in the DOM, it's significantly [14:41] smaller because instead of having like [14:44] image source equals and and any type of [14:46] binary data can go into a a an array, [14:50] right? where you probably see it most [14:52] often in web development is like an [14:55] image that's been B 64 encoded. If you [14:58] want to then display that as an image, [15:00] not as a string because like those [15:02] things are massive and often it's it [15:04] gets really chuggy to decode them. What [15:07] you can do is you can use the uh create [15:11] object URL similar to if you've ever had [15:13] a video stream and you want to set it to [15:16] a video tag. You'll often see that like [15:18] blob URL where it links to like a unique [15:20] ID. You can do that with images as well [15:23] where you create a URL that points to a [15:26] binary data, a blob. What the benefit of [15:29] that is is if you need to use it in [15:30] multiple places, it's still pointing to [15:32] one spot. Um, and it's also the DOM [15:35] doesn't have to deal with this massive [15:37] huge string. So, um, apparently the blog [15:40] post shows that it's overall better and [15:43] faster for both the DOM rendering and [15:46] for for painting. [15:47] >> So, don't use next time you have to B 64 [15:51] decode something, reach for this API. [15:53] Nice. Yeah, I I didn't even notice that. [15:57] Did not know. And it is funny cuz when [15:59] you you preemptively called me wondering [16:02] why it was important or why I should [16:04] care, I was currently wondering why I [16:06] should care. So, thank you for doing [16:08] that. Uh, I'm going to show you next one [16:12] that actually was baseline 2024, but I [16:15] went looking for it in baseline 2025 and [16:18] was shocked to see that it was baseline [16:20] 2024 because we got starting style last [16:23] year, which was um the ability to [16:26] declare CSS that is something before or [16:29] like at the state at which it enters the [16:31] DOM. So therefore, you'd be able to then [16:34] uh animate from that state to its end [16:38] state. Uh allowing you to do all kinds [16:40] of animations where things came into the [16:42] DOM. In fact, um this actually used to [16:45] be and and maybe how some people still [16:47] do it, how like React transition used to [16:49] work where they would add a class or [16:50] even Angular transitions. They would add [16:52] a class to something with the initial [16:55] with the starting style and then add [16:58] another class and then remove that [16:59] class. So they they the way they did [17:01] classes to do animations was simply [17:03] having a starting style class and then [17:05] the ending state style class [17:08] >> like like a like a millisecond later you [17:10] would apply that second class and then [17:11] that gave you then an A to a B, right? [17:14] Cuz if you just apply styles to [17:16] something right out of the gate, it's [17:18] going to be rendered with those styles. [17:19] So you need an A to a B. You can't just [17:21] go straight to B. So starting style will [17:23] allow you to to give yourself a an a so [17:27] that you can trans and and most likely [17:29] what is this used for like like uh [17:30] animating in a modal like it it can it [17:33] can [17:35] >> right come out from the bottom. [17:37] >> Yes, you can do all kinds of stuff with [17:38] this but I always felt like this API was [17:41] underserved without this other API allow [17:45] discrete. Now allow discreet was the one [17:47] that I did not realize also was in [17:49] baseline 2024. So you can put on a [17:52] transition. Let's say uh display. So you [17:56] do a transition display 0.3 seconds [17:59] allow discrete. Now anybody who's done [18:02] CSS transitions will know that you [18:04] cannot apply transitions to things like [18:07] display. So to go from display none to [18:09] display block. And many of these things [18:11] like dialogue or popovers, they have [18:13] display none on them, right? So [18:15] animating them when they come into the [18:16] DOM even with starting style was not [18:18] super effective. But with this allow [18:21] discrete, what it does is it actually [18:24] applies the display property. So that [18:27] way it can it it applies it early or [18:30] later depending on animating in or out. [18:32] That way it will essentially be uh [18:35] display block and then allow you to uh [18:38] show in something or whatever the [18:40] display visible. What display block [18:43] display wait [18:45] >> display none to display block. You can [18:48] now none to display block or whatever it [18:50] is, whatever the initial value is. So [18:52] that way you can do those transitions [18:53] whether that is from translating or [18:55] fading or whatever. [18:56] >> Scale zero to scale one like literally [18:59] anything you can. So here I I have in my [19:02] on my site here and I'll link this up is [19:04] a demo that shows how to do a hamburger [19:07] sliding menu using popover starting [19:10] style and allow uh allowed discrete to [19:13] do a full animating animating out [19:16] popover hamburger menu while it leaves [19:19] the DOM. It's not just simply that this [19:21] thing is animating on and off. It's [19:23] actually entering and leaving the DOM. [19:25] And you can use it again for all kinds [19:27] of other things like that. You can use [19:29] it to animate accordians. You can use it [19:31] to animate uh you can use it to do [19:34] dialogues or drawers. So, um uh man, it [19:38] is uh it is a really really cool API [19:43] that allows you to do just an endless [19:45] amount of stuff. Like I have essentially [19:48] a dialogue that acts as if it is a swipe [19:52] up dialogue or a swipe up drawer uh [19:55] animation using only CSS. It's [19:58] incredible. [19:58] >> You know why I think you were confused [20:00] is because I'm just looking at can I use [20:02] for this and allow discreet was only I [20:05] think it landed in Safari in September [20:08] 2024. So kind of near the end of the [20:10] year. However, the specifically display [20:13] none to display block transition. That [20:16] is not in Firefox yet [20:19] >> still. [20:19] >> So yeah, but it's not the end of the [20:22] world because you know what happens when [20:23] you don't support it? it just doesn't [20:26] transition, you know, like it's not [20:27] going to break your app. It's simply [20:29] just going to not fade in. It will just [20:31] show up immediately. [20:32] >> So, that makes me wonder why they would [20:34] add allow discreet to Firefox and not [20:38] >> I I think it was allowed discreet was [20:41] added in 2014 to Chrome. [20:44] >> Yeah. [20:44] >> Right. But then the the ability to [20:47] transition it [20:49] >> Yeah. a transition behavior [20:52] was only added recently in all these [20:55] browsers. So, [20:56] >> so that is really surprising. But I do [20:58] love uh APIs like this like view [21:01] transitions when it didn't work. It just [21:04] uh changed the page like normal. But [21:06] then people who are in browsers that [21:08] have full set of features would then be [21:10] able to get that transition. And Firefox [21:13] users, yes, we love progressive [21:15] enhancement. Uh that's always great when [21:18] you have to do it when you can get [21:19] progressive enhancement without having [21:20] to yeah [21:21] >> um just sacrifice or rewrite a massive [21:23] amount of code. So either way you can [21:25] use starting style allow discreet today [21:27] if you want to sacrifice some animations [21:29] on Firefox. Next up I have promise.try. [21:32] This is very simple API method that [21:35] allows you to take synchronous methods [21:38] and use them in a way in which they were [21:40] a promise. So this problem comes about [21:43] where if you're using multiple methods [21:46] that are all promisebased. If your whole [21:48] API is promisebased, it's so beautiful [21:50] because you can you can chain them [21:52] together. You can add a catch on the [21:54] end. You can use promise.all and get all [21:56] the results at once. You can use [21:58] promise.all settled. This is all [22:00] beautiful until there's one API which is [22:03] like synchronous and it doesn't have a [22:05] promise-based API you know like um at [22:08] the very basic like a confirm [22:11] >> you know if a confirm or like um [22:15] fs.right write file sync a lot of the AI [22:18] loves using the synchronous versions of [22:20] the file system any of those APIs if [22:23] they were to throw an error you can't [22:25] use them in the same beautiful chaining [22:28] promise way that I was just talking [22:29] about so now promise try will allow you [22:32] to just wrap a nonpromisebased [22:35] function or method and then it will if [22:38] it throws it will it will catch it in [22:40] the catch if it returns a value it will [22:42] return it in your promiseall settled So [22:45] you can use any API as if it were a [22:48] promise or not. So it's really nice. [22:51] >> Love that. Uh the last one I have for [22:53] you is content visibility. Now content [22:56] visibility is an interesting API and [22:58] it's one of those APIs that when you [23:00] first hear about it, you're like, "Ooh, [23:02] this would be like good to make the [23:04] whole website out of the black box type [23:06] of thing, right?" Um if you you catch [23:10] you make the whole plan out of the black [23:11] box because it's so powerful. Whatever. [23:12] It's so strong. No, but the what this [23:14] API allows you to do is control the [23:16] rendering of elements in a way that uh [23:20] essentially pauses the rendering of an [23:23] item. So it preserves its rendering [23:25] state where if you display none, it has [23:28] to rerender when it comes back and it [23:30] removes it from the DOM. Visibility [23:32] hidden [23:34] keeps it in the DOM but is constantly [23:39] still rendering it. it's just visibility [23:41] hidden where this if you do content [23:44] visibility hidden what it does is it [23:47] doesn't render uh it hides the element [23:50] but it preserves its rendering state so [23:53] that way if you were to toggle it back [23:55] then it's preserved that rendering state [23:57] and then it updates the rendering state [24:00] um after you toggle it back the the way [24:03] that I find this API to be the most [24:05] interesting I will say is with content [24:07] visibility auto and what that does is it [24:10] basically has things hidden when they [24:12] are off screen and that way it does the [24:15] initial load and then it then renders [24:18] the things that are offscreen which is [24:21] really useful if you have sections of [24:24] big things that are rendering offscreen. [24:26] Uh like a lot of times people reach for [24:28] sometimes virtual lists, virtualized [24:30] lists for this type of thing. Uh but [24:32] this might be something that you could [24:34] use if you're having a performance [24:36] impact of rendering because you're [24:37] rendering a lot of big things or a lot [24:40] of things offscreen and uh content [24:42] visibility auto on the things off screen [24:45] will then allow you to delay that. But [24:48] you do have to be careful with it. It [24:49] can cause layout shift. It feels like at [24:52] first glance you're like oo I'll just [24:54] put every single thing that's offscreen [24:56] content visibility auto. But I think you [24:59] want to be more surgical with it. I [25:01] think you want to test with it. I want [25:03] you [25:03] >> I had an issue where I added it to a [25:05] whole bunch of stuff and it started to [25:07] chug or I had it on a website and it was [25:09] faster and then they changed something [25:12] >> and it started getting chuggy and then [25:14] the the way I fixed it was I simply [25:16] removed it which is great like ideally [25:18] the browser will figure out these things [25:20] for you but there are some cases where [25:22] you'll have to you know better and you [25:24] can explicitly step in and apply that. [25:26] It's it's like will change where it's a [25:29] a feature that can help if you know what [25:33] you're doing with it and you test to [25:35] make sure. But just a simply yellow [25:37] applying it to everything is probably [25:39] not the right call. But when it does [25:41] work, like there's like a a use case on [25:43] Facebook. It says Facebook engineers [25:46] observed up to 250 millisecond [25:48] improvement in navigation when uh times [25:51] when going back to previously cached [25:53] views. Being able to like have that [25:56] control in the right circumstance I [25:58] think can help. Uh so whether that is [26:00] content visibility hidden or auto it's a [26:04] cool API to learn. [26:05] >> Uh all right I think that is that it [26:07] >> that's all I have. Peace. [26:13] One of my thumbnail ideas because CSS [26:17] got absolute value was to have CSS [26:20] having abs. [26:24] >> It's ridiculous. That's a great idea. ## Highlights - >> All right, let's get into it. Wes, what do you got for me? >> Yeah, so there is 24 new APIs. We'll link up the the actual list of them. Some of them not interesting at all and some of them are are pretty exciting. So we're going to explain what they are. So first one is same document view transitions. So view transitions in CSS allow you to essentially transition anything, right? Like we're we're used to putting a transition on something. ([View Highlight](https://read.readwise.io/read/01kd3z0nb8fgs6j95qycf2vvm3)) - Tags: 👻 ai highlighted - not just when you're changing pages, but when you're clicking a button or adding a class is really cool. And now that's in every single browser. Yeah. You know what I will say? Uh, I use view transitions all the time and I think often times people don't even think about using them when they they could be the easiest solution to do any particular type of animation, especially when you have something that you have in one place. This has a secondary place and you wanted to just tween between ([View Highlight](https://read.readwise.io/read/01kd3z0nbm8k9g9036sa9qn70w)) - Tags: 👻 ai highlighted - transitions and these are view transitions for SPAS single page applications um in all browsers you can safely feel like you can use them and I they're they're fantastic. You can do even like I've used them to build all kinds of animations from like a hamburger menu slide out to anything really. And it it is if if you can't do it with CSS, just CSS, yeah, you can reach for view transitions. And that's usually my my way of trying to do things like that. I'm going to pick an easy one right now, which is a small one, which ([View Highlight](https://read.readwise.io/read/01kd3z0nca9mwp7czwja4d5bv4)) - Tags: 👻 ai highlighted - to animate uh you can use it to do dialogues or drawers. So, um uh man, it is uh it is a really really cool API that allows you to do just an endless amount of stuff. Like I have essentially a dialogue that acts as if it is a swipe up dialogue or a swipe up drawer uh animation using only CSS. It's incredible. >> You know why I think you were confused ([View Highlight](https://read.readwise.io/read/01kd3z0ng5frpnxnctrt7kznyt)) - Tags: 👻 ai highlighted - transitions when it didn't work. It just uh changed the page like normal. But then people who are in browsers that have full set of features would then be able to get that transition. And Firefox users, yes, we love progressive enhancement. Uh that's always great when you have to do it when you can get progressive enhancement without having to yeah >> um just sacrifice or rewrite a massive amount of code. So either way you can use starting style allow discreet today if you want to sacrifice some animations on Firefox. Next up I have promise.try. ([View Highlight](https://read.readwise.io/read/01kd3z0nn3hpx0wt26ygqs5nw2)) - Tags: 👻 ai highlighted ## New Highlights added 2026-02-28 at 7:48 PM - >> All right, let's get into it. Wes, what do you got for me? >> Yeah, so there is 24 new APIs. We'll link up the the actual list of them. Some of them not interesting at all and some of them are are pretty exciting. So we're going to explain what they are. So first one is same document view transitions. So view transitions in CSS allow you to essentially transition anything, right? Like we're we're used to putting a transition on something. ([View Highlight](https://read.readwise.io/read/01kd3z0nb8fgs6j95qycf2vvm3)) - Tags: 👻 ai highlighted - not just when you're changing pages, but when you're clicking a button or adding a class is really cool. And now that's in every single browser. Yeah. You know what I will say? Uh, I use view transitions all the time and I think often times people don't even think about using them when they they could be the easiest solution to do any particular type of animation, especially when you have something that you have in one place. This has a secondary place and you wanted to just tween between ([View Highlight](https://read.readwise.io/read/01kd3z0nbm8k9g9036sa9qn70w)) - Tags: 👻 ai highlighted - transitions and these are view transitions for SPAS single page applications um in all browsers you can safely feel like you can use them and I they're they're fantastic. You can do even like I've used them to build all kinds of animations from like a hamburger menu slide out to anything really. And it it is if if you can't do it with CSS, just CSS, yeah, you can reach for view transitions. And that's usually my my way of trying to do things like that. I'm going to pick an easy one right now, which is a small one, which ([View Highlight](https://read.readwise.io/read/01kd3z0nca9mwp7czwja4d5bv4)) - Tags: 👻 ai highlighted - to animate uh you can use it to do dialogues or drawers. So, um uh man, it is uh it is a really really cool API that allows you to do just an endless amount of stuff. Like I have essentially a dialogue that acts as if it is a swipe up dialogue or a swipe up drawer uh animation using only CSS. It's incredible. >> You know why I think you were confused ([View Highlight](https://read.readwise.io/read/01kd3z0ng5frpnxnctrt7kznyt)) - Tags: 👻 ai highlighted - transitions when it didn't work. It just uh changed the page like normal. But then people who are in browsers that have full set of features would then be able to get that transition. And Firefox users, yes, we love progressive enhancement. Uh that's always great when you have to do it when you can get progressive enhancement without having to yeah >> um just sacrifice or rewrite a massive amount of code. So either way you can use starting style allow discreet today if you want to sacrifice some animations on Firefox. Next up I have promise.try. ([View Highlight](https://read.readwise.io/read/01kd3z0nn3hpx0wt26ygqs5nw2)) - Tags: 👻 ai highlighted