Building a Document Q&A System with On-Device AI

Every now and then I build a demo for a presentation and think to myself – this deserves its own blog post. I then promptly forget to actually do that. Even better, I completely forget to even show the demo in the presentation. A few weeks ago I made my first presentation at RenderATL and gave my talk on Chrome’s on-device AI technology. I’ve been blogging about this particular set of APIs for a few years now and I’ve given talks on it at numerous conferences. While these APIs are still evolving, many of them (and the ones I’m using today in particular) are now fully GA for Chrome. For this demo, I put together a few things I’ve done before into one cohesive... more →
Posted in: JavaScript

Building Agentically and Celebrating Watches

I’ve shared past experiences with vibe coding and it’s been a fascinating way to experiment and build on a small scale, but while it works well for POCs and other small utilities (I won’t say ‘toys’ as I’ve built useful, if small, things now multiple times), it isn’t really a "process" and not one that would work over a project with a longer time frame. This is where "Agentic Development" comes in. It’s not always referred to as such and it’s a huge topic, but let me give you my opinion on it and then demonstrate how I used it to build my newest project, I Watch Watches. Agentic Development in a Nutshell Vibe coding is... more →
Posted in: JavaScript

Building Custom Form Selection Boxes – Working on Accessibility

Whenever I find myself needing to update a previous blog post, I either correct it inline and add a small note on top, for small tweaks, or write a whole new piece for larger changes. My last blog post talked about how to use CSS to style a "block" such that it acted like a form radio button. When I worked on that demo, I was a bit worried about accessibility. I did one quick check with an online tool, and thought I was ok. I was not. When I shared my post on LinkedIn, Kevin Bonett shared this feedback with me: I would argue that, despite using correct semantic HTML, the “custom” radio buttons are inaccessible. If you’re a sighted keyboard user, how will you know... more →
Posted in: JavaScript

Building Custom Form Selection Blocks – no JS, all CSS

I apologize for what may be a slightly misleading title. The topic for this post is something I’ve had on my list of things to explore for some time now, and while I wait for the new job to start, I’ve found myself with time to kill. Let me explain what I’m talking about and hopefully it will make a bit more sense. You are, dear reader, familiar with form controls and how to build forms both big and small. One type of user interface I’ve seen from time to time is the ability to select an item where the "item" is an arbitrary block of code. What do I mean by that? Typically a choice element in a form is either a select, checkbox, or radio set. But I’ve seen... more →
Posted in: JavaScript

Building a Form Handling Service in Val Town

Many years ago, I made the switch from building primarily app-server backed sites (using Node, ColdFusion, PHP, etc) to fully static sites using tools like Jekyll, Hugo, and Eleventy. For the most part, it was a great shift in how I build, but there were a few things I had to figure out in that new world – one of them was simple form handling. While I could have used serverless just fine, it felt like overkill. Luckily, there were a few services out there that catered to this need. You would simply use a unique action for your form and that service would handle collecting the form data, emailing it to you, and redirecting the user back to the site. A great example of this, and one I used... more →
Posted in: JavaScript

Building a Simple Markdown PWA App

While I didn’t share it on the blog, last week I tasked Claude with using Electron to build a Markdown viewer app. It was part test (how well can Claude work with Electron) and part real need – I work with Markdown files all the time but didn’t have a simple "view focused" application for it. I was sure there open source or paid app options out there, but I wanted my own. Claude did a pretty good job (you can see the source here) but one thing stood out to me – the size of the bundled app. I created both a Mac and Windows distribution and both were around 90 megs. That’s not huge of course, but still felt like a lot for what could – in theory –... more →
Posted in: JavaScript

Building My Own Social Network Poster in Astro

Today is a big day for Astro, not only do you get Astro v6 (it just released a few hours ago!), you also get one of my demos! Ok, one of these is more important than the other, but, I’m really excited about v6 and hope to have a demo of the new features to share soon. With that being said, I’m also sharing a demo I started work on a few weeks ago and finally wrapped up this past weekend – Social Beast. What is Social Beast Social Beast is a web app meant to be run locally (although I have some thoughts on that restriction and will share at the end) that handles posting to multiple social networks at once. Right now "multiple" is two: Mastodon Bluesky It doesn’t... more →
Posted in: JavaScript

Building a Bluesky Sentiment Dashboard with Alpine and Chrome AI

Good morning, programs! Today I’m sharing yet another example of Chrome’s on-device AI features, this time to demonstrate a "Bluesky Sentiment Dashboard". In other words, a tool that lets you enter terms and then get a report on the average sentiment for posts using that word. I actually did this before (and yes, I forgot until about a minute ago) last year using Transformers.js: Building a Bluesky AI Sentiment Analysis Dashboard. I also built this for Twitter, before it went down the toilet, killed off API access, etc. etc., but I can’t seem to find it in my archives so maybe I’m hallucinating. That being said, earlier this week I thought I’d try building... more →
Posted in: JavaScript
1 2 3 5