Recent content on Modern Web Development with Chrome
A run of recent posts on aifoc.us that I did not plan as a series but which turned into one. The thread is that the web a model sees is staler and thinner than the one you ship, and I have mostly been trying to find ways to see it.
ua-tracer is a tiny site that attempts to show you what a user agent fetches, follows, and executes when it loads a page. I built it because we have almost no visibility into what bots and AI agents actually see when they crawl the web.
Where my head is at with LLMs and the future of the web... Quite focused actually.
I've created the <generate-html> Web Component, an LLM-powered tool that generates and renders interactive HTML or SVG images securely using Google Gemini or Chrome's built-in AI. It features a "Double Iframe" architecture for security, supports multiple providers, and has zero framework dependencies. It also allows for template context to guide LLM output.
I've been exploring how to integrate advanced AI agents into my daily workflow, and email remains the most universal interface for asynchronous tasks. I built a "Deep Research" agent using Val Town that allows me to trigger complex research tasks simply by sending an email. It uses Google's Deep Research model to perform the heavy lifting. It is pretty simple to get started, you just need to send…
What if every website you visited didn't actually exist until the moment you asked for it? What if the entire web was a unique, AI-generated experience, created just for you, on the fly? That's the core idea behind my latest project, Fauxmium. Fauxmium is a proof-of-concept that explores what it's like to browse an effectively infinite web. Everything you see inside the Fauxmium browser is…
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.
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…
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…
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…
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…
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…
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…
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…
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…
Link: How Google Chrome’s autofill feature helps both shoppers and merchants One of Shopify’s key metrics is Checkout Conversion Rate (CCR), which measures the rate of successful checkouts completed over a period of time. Through testing, Shopify found that removing unnecessary steps led to more customers completing their checkouts. Guest checkouts using autofill had a 45% higher CCR than guest…
Link: Interop 2025: another year of web platform improvements It's exciting to see the web platform continue to evolve and improve. Interop along with Baseline are aimed to solve some of the top challenges that developers have when building for the web. Ultimately we only make progress as a platform when the major user-agents make shared and consistent progress on the platform and this has been a…
Link: WikiTok This is such an amazing site and has become a bit of a daily habit for me. It's a brilliantly simple idea that means I'm browsing more of Wikipedia than I ever have before. I built a similar demo a while ago using the now-defunct Portals API because I want to explore what a Web Browser could be if it had a UI like TikTok. My hypothesis was that while links are amazing, what is behind…
It may come as no surprise to the people who get emails from me, but I failed GCSE English. I loved reading, but I struggled to articulate my thoughts clearly and I struggled with basic grammar. It wasn't until I was 20 that I could explain a verb and a noun.... A good friend read my final year dissertation about Fraud Detection and his main comment was: "Did you learn how to use a semi-colon?
Link: Why I use Cline for AI Engineering - by Addy Osmani In this post Addy describes his use of Cline (Jan 30). It was the first time I'd heard of it. I was kinda surprised because I've been on top of tooling for a while now. For the longest time I'd been using Replit, it had a nice flow to it. I could ask it to help me solve a problem and it would just apply the code to the project.
I've been noodling on how we might lower the cost to create prototypes of sites for people who aren't technical. When I speak to a lot of people about websites, they kinda know what they want and can describe it, but it's a lot of work for them to get a functional skeleton of a site working, so ultimately they don't build that site or they just go and post something on facebook instead.
This great post by Dion "English will become the most popular development language in 6 years" is worth a mull imho. There's obviously a lot of push back on LLM's be it what they were trained on and how much energy they use. However the technology is here, and Dion poses a great question: Will natural language become the way people control their computers? Two things resonated with me: The reason…
I fondly remember the early days of the web. I remember my first time on the Web in an Internet cafe with my friend Bob, patiently waiting for the only thing we knew to load (cnn.com). It was a time intertwined with a lot of other personal discoveries: ICQ, uh-oh and a/s/l; software modems that didn't work with my Cyrix P150+, Quake @ 2fps on the same computer; and a thing called email via…
Link: https://webkit.org/blog/16413/the-success-of-interop-2024 I saw The success of Interop 2024! in Stefan Judis's Web Weekly Newsletter. Jen Simmons at Apple on WebKit pulled together this great post about the progress that has been made in 2024. In 2024, there were 17 such focus areas: Accessibility, CSS Nesting, Custom Properties, Declarative Shadow DOM, font-size-adjust, HTTPS URLs for…
Link: My approach to running a link blog I really like Simon's approach to running a link blog and his principles really resonate with me I always include the names of the people who created the content I am linking to, if I can figure that out. Credit is really important, and it’s also useful for myself because I can later search for someone’s name and find other interesting things they have…
My buddy Dion made a great post "English will become the most popular development language in 6 years". Dion's vision is pretty expansive, but it really tickled my brain. I've been creating a fair number of web-apps with Replit. These "agents" are awesome, they take me through the entire app process. But what if I just want a small bit of my application written in English? How far can we get?
I get a lot of newsletters, and I love them. They often contain a wealth of deep insight that I can't easily find while browsing the web. Yes, there are RSS feeds that publish their protected content, but since I spend so much time in my email, I effectively use it as a way of browsing. I really wanted a way to get quick summaries of the newsletters I read, so I built one.
I love RSS feeds (and ATOM too (and JSONFeed)) but one thing that frustrates me is when a feed doesn't include all of the content. https://full-rss.paulkinlan-ea.deno.net was created to partially solve this. If there is a feed that you really wish was full-content and isn't then you can replace that feed with…
Generating web apps with AI agents like Replit is incredibly powerful, enabling rapid prototyping and deployment. My experience building tldr.express, a personalized RSS feed summarizer, highlighted the importance of a detailed specification. While initial prompts yielded impressive results, I iteratively refined the app through configuration and additional prompts to address issues like email…
Curious about who's visiting my site, I built a user-agent tracker using Vercel middleware and KV storage. It logs every request and displays a live table of user agents and hit counts, refreshing every minute. Check out the code on GitHub!
I created a simple countdown timer web app that lets you track time until important events. It's built with a focus on no-code using Replit, including a cool integration with Black Forrest Labs' image API via Replit's Agent feature. Check out the live app and source code!
Building apps with LLMs and agents like Replit has been incredibly productive. The generated code is often vanilla and repetitive, raising questions about the future of frameworks. While frameworks offer abstractions and accelerate development, LLMs seem to disregard these patterns, focusing on implementation. This shift in software development driven by agents may lead to a world where direct…
Wow! Just realized I've been blogging for over 20 years, starting way back in August 2004 on kinlan.co.uk with Blogger. The journey has taken me through Posterous and landed me here on paul.kinlan.me with Hugo (and maybe Jekyll at some point). Sure, there's some cringe-worthy stuff in the archives, but it's my history. And honestly, I wouldn't be where I am today without this little corner of the…
This blog post lists various web apps I've generated using Repl.it and WebSim,
Reflecting on my journey with computers, from the C64 and Amiga 500 to the present day, I've found a renewed excitement in software development. New tools like repl.it and websim.ai empower rapid creation of full-stack, disposable web apps – software built for personal use and easily discarded. This ease of creation removes the barrier to starting projects, making the web an ideal platform for…
Experimented with WebSim, a simulated web environment, creating sites like a personal blog, timezone converter, interactive globe, and a travel site. The experience was reminiscent of the early web's playful exploration and highlighted WebSim's potential for creativity and interactive experiences.
In this blog post, I share some findings from my exploration of HTTP Archive data. I discovered that a significant number of websites using manifest.json files are using the default configuration generated by Create React App. I plan to investigate this further and determine how prevalent default manifest files are across the web.
I'm exploring a new way to build reactive applications using an 'Agents' API. Inspired by Preact Signals and my previous reactive-prompt project, this toolkit uses Chrome's prompt API. Each Agent has a persona, task, and context, reacting to input changes. You can chain Agents, passing data between them. I've created different Agent types like a 'Human' Agent representing user input and a…
I've created a small library called reactive-prompt that lets you easily manage prompts in a reactive way, similar to how you'd build a web app with React. It uses Preact's Signals to track changes to inputs and automatically re-runs prompts when those inputs update. This allows for efficient chaining of prompts, where the output of one becomes the input of another, and only necessary prompts are…
I've created a new Breadboard kit for TransformerJS, which allows you to run HuggingFace models locally on devices. This is useful for LLM-related tasks where cloud access isn't ideal. The kit is available on GitHub ( https://github.com/PaulKinlan/transformerjs-breadboard-kit ) and can be installed via npm with npm i @paulkinlan/transformerjs-breadboard-kit . Included is an example of creating a…
I created "The Critic", a tool to help review text from different perspectives, like accessibility or API design. It uses LLMs to simulate multiple "agents" who provide feedback, streamlining the review process. It's built with Breadboard and aims to enhance, not replace, human review. While the UI is basic, it effectively identifies potential improvement areas, sparks discussions, and integrates…
I built tldr-site.vercel.app to help me quickly understand web development trends. It summarizes search results and news snippets, giving me a high-level overview before I dive into specific details. I use it frequently, for example, to research community feedback like on the Web Environment Integrity API. The code is on GitHub and uses Breadboard to manage data flow. It works well, but could be…
I've made a couple of small changes to the blog. I removed the personal journal section and added my projects to the RSS feed so you can see what I've been working on with Generative AI. Happy New Year!
I've created the Claude Breadboard Kit, a simple plugin to easily connect your Breadboards with the Claude API. It features a single generateCompletion node for streamlined integration. Add it to your breadboard runtime using addRuntimeKit(Claude) and start using the generateCompletion node.
I created tldr.rocks, a simple site that summarizes Hacker News posts and comment sentiment. As a DevRel, it's crucial to understand developer sentiment towards our work. This tool helps me quickly identify key comments and critical challenges, although it doesn't replace direct engagement with the community. It's built with Hugo, uses Breadboard to manage the Generative AI, and leverages…
I explored using ChatGPT's Code Interpreter to analyze browser compatibility data from the BCD project. My goal was to determine the latest released versions of different browsers. While the initial results weren't perfect, through a few iterations of feedback, the Code Interpreter generated a Python script that accurately extracted the desired information. I was impressed by the speed and…