Link: AI Focus

I've launched a new blog. It's called AI Focus, and it's dedicated to exploring the intersection of artificial intelligence and web development. My goals of the blog is to cover a range of topics that I think are going to affect the web and web development in the coming years.

Why? I think that the nature of the web has changed and it will change even more in the coming years. I love the web and web development, but I don't think we can idly sit by and assume that "the web will always win". I don't "always bet on the web", I bet on the people who build for the medium that is the web, that is the users, the authors, the developers, the designers, the creators and web browser engineers. I think we are going to have to adapt to the changes that "AI", or at least the technology that is Large Language Models, bring to the web, and I want to be at the forefront of that change.

I'm experimenting with a more essay focus to the writing which pose more questions than answers at the moment. I've been silently writing articles on it for the past couple of weeks, covering topics like:

• The future of embedding?
• The future of linking?
• Will there be a super-app?

My buddy Andre Bandarra has also written some great pieces about Mashups and assistance in web development

Let me know what you think, and also what topics you'd like to see covered in the future. I'm always looking for new ideas and perspectives, and I want to expand my understanding and opinion.

Link: Diving into the Data on Feature Availability and Adoption [BlinkOn 20] - YouTube

This is a great talk from Annie Sullivan at BlinkOn 20 about the availability and adoption of web features. Annie discusses the importance of understanding how features are used in the wild, and how this can inform the development of new features.

I took a few notes on the talk, which I thought were interesting and linked to them below:

• Core Web Vitals: Discusses work on improving web page quality metrics (LCP, INP, CLS) using HTTP Archive data to identify and fix issues [00:00:21], [00:00:50] and how this was the groundwork for the talk.
• Baseline Data: A baseline dashboard by the WebDX community group provides metadata on web features, including their availability status and [00:03:32] and how Annie would use this aligned with usage data to understand the adoption of web features (rest of the talk)
• Key Findings:
  • Wider availability leads to higher adoption [00:05:56] <-- We all had a feeling this was the case, but it's nice to see it backed up with data.
  • Feature adoption isn't significantly skewed by website popularity [00:06:15].
  • 1. we can do splits on data easily, 2) HTML and JavaScript features show clearer adoption patterns than CSS [00:07:19].
  • HTTP Archive data aligns well with real Chrome usage data [00:09:27].
• Analysis Tools: Uses HTTP Archive and BigQuery to analyze feature usage [00:10:14].
• Adoption Factors:
  • Site-building platforms (e.g., WordPress) [00:12:54].
  • Third-party embeds (e.g., YouTube) [00:08:52].
  • Progressive enhancement with fallbacks [00:17:43].

Our team has long been pushing to understand API usage and how collaborating with site-building platforms can help us understand the impact of our work (selfishly for me), but I do think broadly that this type of insight helps us get more investment in to the web platform and helps us prioritize the right things.

Link: From PyTorch to Browser: Creating a Web-Friendly AI Model

I loved this post from Andre about running sentiment analysis in the browser using a model that he'd trained on embeddings generated from a YouTube comments data was great and shows that you don't have to run everything through the full language model and instead can use just the embedding APIs to get a decent result.

The client side part of the code can be seen below:

const input = 'Hello, your video is amazing!'; const embedResult = await genAi.models.embedContent({ model: 'text-embedding-004', contents: [input], }); const embeddings = embedResult.embeddings.map(embedding => embedding.values); const outputTensor = await model.predict(tf.tensor2d(embeddings)); const argmax = await tf.argMax(outputTensor, 1).array(); const labels = ['Positive', 'Neutral', 'Negative']; const results = argmax.map(i => labels[i]); console.log(results);

const probabilities = await tf.softmax(outputTensor, 1).array() console.log(probabilities);

Link: How to Write Blog Posts that Developers Read · Refactoring English

I think this post would be good for every developer to read. It's more about communication than just blogging.

The biggest mistake software bloggers make is meandering.

Often, the author has some valuable insight to share, but they squander their first seven paragraphs on the history of functional programming and a trip they took to Bell Labs in 1973. By the time they get to the part that’s actually interesting, everyone has long since closed the browser tab.

This is me to a tea. I remember when I first started blogging and I would just get traffic, times have changed and I certainly need to be a lot clearer with my writing.

This really resonated with me:

If you want people to read your blog, choose topics that have a clear path to your readers. Before you begin writing, think through how readers will find your post.

I tend to fart out a blog post, and the guidance here is very similar to the guidance I hear from a lot of content creators. Study your medium, understand your audience, how to reach them, and then plan plan plan.

If you're interested in the broader topic of writing for an audience (probably a more business focused one) then I really enjoyed Pyramid Principle by Barbara Minto, it's helped me a lot within my role as a way to communicate more effectively (although, I still have a long way to go).... I've heard it's favoured by McKinsey consultants, while that's not my cup of tea, the principles seem sound to me.

Link: Rainbow Shadow Button · 19 March 2025

background: linear-gradient(to right in oklch longer hue, oklch(95% var(--vibrance) 0) 0 100%);

I know CSS pretty well, but I'm mind blown by what Adam produces. It's like when I draw, I know what I want, but translating it from the image in my brain into something that looks good on paper is a whole other story.

Link: Real-world uses of TypeScript’s utility types - Piccalilli

I have a bit of love-hate relationship with TypeScript, but there are parts of the typescript Type system that I really like. This article from Piccalilli is a great introduction to TypeScript's utility types (which is one of the areas I like, even though it is a bit complex)

Utility types are types that modify other types. You can think of them as functions, but they operate on types instead of values. It’s mind bending at first — especially if you’re coming from languages that don’t have anything similar — but we’re going to walk through a load of examples to see how they work.

Mind-bending indeed.

One of my favorite types that I've made is here in Breadboard. It could take a function and return a proxy for that function that had the same calling parameters.... I think... I'm not sure, I wrote it a while ago... heh, that's the "hate" part of the relationship. :D

Link: Adactio: Journal—Command and control

I’ve been banging on for a while now about how much I’d like a declarative option for the Web Share API. I was thinking that the type attribute on the button element would be a good candidate for this (there’s prior art in the way we extended the type attribute on the input element for HTML5).

I'm fully aligned with Jeremey on this one, there's a heap of commands and actions that a user invokes in the browser that should be more accessible from the client and be able to be invoked without JavaScript.

Turns out there is work being done around this area for dialog and popover elements, with scoping for more elements in the future.

Things have been rolling along and invoketarget has now become the command attribute (there’s also a new commandfor attribute that you can point to an element with an ID). Here’s a list of potential values for the command attribute on a button element.

Right now they’re focusing on providing declarative options for launching dialogs and other popovers. That’s already shipping.

More details about what Jeremy is talking about can be found in this developer.chrome.com article.

I agree with where Jeremy wants to see this head, as the article says "We welcome community input—if you have suggestions don't hesitate to file an issue on the Open UI Issue Tracker."

Maybe we can get button command="bookmark"... I joke... kinda... we used to have an API for this back in the day and while I don't think we would want an API to your bookmarks, I could see a world where a lot of the Fediverse's issues could be solved with a few more declarative commands.

Link: Browser adaptation

Something that I've been thinking about a lot recently is that the medium that is the web. It enables a lot of things that only the web can so this post by Brad Woods really resonated with me and it talks about how the web can be used to adapt stories to different mediums.

Different mediums convey information in unique ways and creators interpret the same story through unique perspectives. Tolkien gives relatively little detail of what Middle-earth looks like, leaving much of the work to the reader's imagination. Jackson on the other hand paints vivid pictures. Tolkien emphasizes the length of the journey by detailing every step, making readers feel the weight of the adventure. Jackson focuses on the major events, creating a fast-paced narrative. Neither approach is superior. Each explores Middle-earth from a different angle. Adaptations allow audiences to make a deeper connection with the story, enriching their understanding and appreciation of the original work.

What the browser offers

The browser offers the following communication tools:

▪text ▪image ▪video ▪sound ▪interactivity ▪video game environments (2D and 3D) With these, we can recreate most story mediums. For example, using image and text to make a comic book or sound to make a podcast. This gives the creator freedom to choose the communication tool(s) that best fit the story they want to tell.

Yes. YES. YES! I love it.

He also discusses the idea of Personalization and Interactivity. Quadruple yes! The web as a medium is so incredibly versatile and I love seeing people explore that.

In 2014 Jeremy Keith published a post "Continuum" and it touches on a different aspect of the value of the web: it's resilence and ability to adapt to the devices it runs on and the browsers it runs in.

I'm still working on how I want to be able to express the value of the web more, especially in a world where it looks like the youth of today who grew up with mediums such as YouTube, TikTok, Facebook and Instagram don't naturally see the web as a medium that they can use to express themselves (or even enjoy).

As a side note, this blog is a gold mine of neat experiments and explainers

• https://garden.bradwoods.io/notes/svg/draw-on-scroll
• https://garden.bradwoods.io/notes/css/blend-modes
• https://garden.bradwoods.io/notes/javascript/web-api/intersection-observer
• https://garden.bradwoods.io/notes/javascript/web-api/intersection-observer/dynamic-header
• https://garden.bradwoods.io/notes/misc/news
• https://garden.bradwoods.io/notes/game-dev-journal/03-persistence

Link: Planet Igalia

When I was preparing the Interop post yesterday, I found one of the agalia links didn't work and while I was hunting for the new link, I found Planet Igalia. :mind-blown:

I've always wondered what's happening at Igalia and while I love the podcast, I do love a good Blog.... I'm really not sure how I missed this entire part of the site, but it's go so much good information and often frequent deep dives in to browsers. For example Maxsim Sisov's post on "Unmasking Hidden Floating-Point Errors in Chromium’s Ozone/Wayland" - such an awesome read into an area I had zero knowledge about.

Triff and marv.

Link: ESLint now officially supports linting of CSS - ESLint - Pluggable JavaScript Linter

We feel that validation and enforcing baseline features are the minimum that a linter needs to support in 2025, and so we spent a lot of time making the no-invalid-at-rules, no-invalid-properties, and require-baseline rules as comprehensive as possible.

Love it!! Absolutely love it.

One of the areas that we would love to see more of (and we hope to work) is more integration of Baseline in to developer workflows. That could be Linters (like ESLint), boot-strappers, IDEs, compilers, frameworks, DevTools. You name it, I think it would help the entire ecosystem if we could get see increase awareness and usage of Baseline and therefore adoption of the features that all the browsers implement natively in to the hands of developers.

Exciting times.