Responding to HTML Changes in a Web Component

While driving my kids to school this morning, I had an interesting thought. Is it possible for a web component to recognize, and respond, when its inner DOM contents have changed? Turns out of course it is, and the answer isn’t really depenedant on web components, but is a baked-in part of the web platform, the MutationObserver. Here’s what I built as a way to test it out. The Initial Web Component # I began with a simple web component that had the following simple feature – count the number of images inside it and report. So we can start with this HTML: <img-counter> <p> <img src="https://placehold.co/60x40"> </p> <div> <img src="https://placehold.co/40x40"> </div> <img... more →
Posted in: JavaScript

Using Intl.RelativeTimeFormat for Localized Relative Timings

I’ve been singing the praises of the web platform’s Intl object for years now, but it still continues to impress me. While I’ve seen it before, today I came across the RelativeTimeFormat API which looks absolutely fabulous. I played with it a bit and thought I’d share some tips. The Basics # The RelativeTimeFormat API works like so: Given a locale… Given a difference (in either a positive or negative value)… And given a unit of time, like ‘hour’ (or ‘hours’) Report the difference in the user’s desired language. So for example: 3 and day, "in 3 days" -1 and day, "one day ago" 18 and hour, "in 18 hours" Also,... more →
Posted in: JavaScript

Converting a Vue 2 App to Alpine.js

A little over two years ago I published an "idle clicker game" built in Vue.js. I called it "IdleFleet" and was heavily inspired by games like A Dark Room, where I relied on simple text graphics and game mechanics that would change as you played. In my last <Code><Br> session, I walked through the process of building a simple text game and brought up IdleFleet as an example. While playing the game to refresh my memory about what I actually built… I discovered I actually really liked it. I decided it would be good to give it some attention with new features and other updates, but before I could do that, I knew I needed to switch from Vue to Alpine.js. Why... more →
Posted in: JavaScript

TIL – submit() versus requestSubmit()

Today I learned (well, technically, a few days ago, the week has been a lot), that the web platform supports a requestSubmit method. Since the beginning of time (or the beginning of JavaScript), we’ve been able to submit forms like so: var myForm = document.getElementById('theform');myForm.submit(); I intentionally used getElementById there as a reminder of what we had before jQuery. Given that, why do we need another method? Two important requests. Reason the First # When using submit, any validation of form fields is completely skipped. Consider this form: <form method="post" id="theForm"> <p> <label for="name">Name</label> <input... more →
Posted in: JavaScript

Testing Multiple Variations of Generative AI Prompts

In nearly all of my recent explorations of Generative AI, I’ve come to realize how important prompts are. That hasn’t necessarily translated me into writing better prompts all the time, but being aware of the problem is at least one step towards correcting it, right? One of the things that I thought would help me personally would be to have a tool to quickly compare and contrast different prompts. Obviously, I could just open up multiple tabs in a browser, but I really wanted something more direct and simplified for my purposes. With that in mind, let me share what I’ve built. Prompt Tester # Prompt Tester is my incredibly imaginatively named tool to… um… test prompts.... more →
Posted in: JavaScript

Adding a Guestbook to Your Jamstack Site (Yes, Seriously)

Don’t do this. I’m serious. Or do it, I certainly don’t listen to reason when it comes to building demos. I’ve been in web development for a very, very long time, and I’ve seen many trends come and go. Guestbooks were a way for folks to leave a comment on your site as a whole. I haven’t seen one in ages, but some still linger. In fact, Ana Rodrigues has an absolutely lovely guestbook driven by Webmentions. And if you really want to, you can still download a Perl CGI guestbook over at Matt’s Script Archive. I haven’t written Perl in decades, but I absolutely loved it back in the 90s. That being said, I had a free hour yesterday, was bored, and decided,... more →
Posted in: JavaScript

Using Generative AI to Organize Video Game Screenshots

Way back in January (remember January), I wrote a blog post describing how to use gen ai to improve image filenames. This worked by uploading the image to Google Gemini, asking for a short description, and using that description for a new filename. Recently I was thinking about that demo and was curious how well it would work for video games. As always, I did a few quick tests in Google AI Studio. I did some quick Googling for various games and screenshots, and the results were pretty impressive. Here are three mostly modern examples: And here’s a first failure, identifying this as Final Fantasy 14, not 16. It did well for one really old game, although to be fair the name is in the picture: Although... more →
Posted in: JavaScript

Google Gemini 1.5 Announced (and more new features)

In general I don’t tend to blog about stuff that isn’t quite out yet, but as I’ve got early access (and permission to share), and as it’s pretty darn cool, I thought I’d share. Plus, some of the new stuff is available to everyone, so you can try it out as well! Today, Google introduced its newest language model, Gemini 1.5. You can, and probably should, read the marketing/nicely polished intro by Google here, but I thought I’d share some highlights and examples here. I’ve had access to this for a grand total of four hours so please consider this my first initial impressions. As the title says, this is not yet released, but you can sign up for the waitlist... more →
Posted in: JavaScript
1 2 3 74