Adding Translation with a Web Component and Chrome AI / / No Comments A few days ago, I blogged about using Chrome’s built-in generative AI features (which are still super duper too early to even consider for production) to add on-device translation capabilities to a web app. It got me thinking, what if we could do translation automatically via a web component? If for some reason it failed, that would be fine as the original text would still be there, but in cases where it could work, it would be automatic. Here’s what I built. First, I whipped up a quick HTML demo of the text I’d like translated: <translate-text>Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the... more → Posted in: JavaScript Tagged with: Adding, Chrome, Component, Translation
Adding AI Insights to Data with Google Gemini / / No Comments Yesterday, Elizabeth Siegle, a developer advocate for CLoudflare, showed off a really freaking cool demo making use of Cloudflare’s Workers AI support. Her demo made use of WNBA stats to create a beautiful dashboard that’s then enhanced with AI. You can find the demo here: https://wnba-analytics-ai-insights.streamlit.app/ I found this incredibly exciting. I last looked at Cloudflare’s AI stuff almost an entire year ago ("Using Cloudflare’s AI Workers to Add Translations to PDFs"), and I haven’t quite had a chance to try it again, mostly because I’ve been focused on Google Gemini for my Generative AI work. From an API/usage perspective, Cloudflare’s... more → Posted in: JavaScript Tagged with: Adding, data, Gemini, Google, Insights
Adding Your Buttondown Email Stats to Your Website / / No Comments I’ve been using Buttondown for almost a full year now (I blogged about the setup here). After having a few issues with Mailchimp and my newsletter, I was pleasantly surprised by how easy Buttondown was and how quick it was to set up. I ended up paying for it as I knew I’d end up paying for some solution and Buttondown worked great and wasn’t expensive. For a while now, I’ve had a custom-built stats page on my blog that’s primarily built for me. It reports on multiple different parts of my site and its biggest use is to let me quickly judge how well I’m keeping to my publishing schedule (a post a week). One stat it didn’t have that I’ve been checking... more → Posted in: JavaScript Tagged with: Adding, Buttondown, email, Stats, Website
Adding Recommendations to my Blog with Algolia / / No Comments I’ve been using Algolia for my site’s search functionality for a few years now and it works great, especially once the free tier expanded to cover the size of my content somewhat better. In that time, I’ve mainly just stuck to basic search functionality and haven’t really touched any of the more advanced features. This weekend I took a look at one I’ve been meaning to play with for some time, Recommendations. My thinking was, of course, a way to recommend/suggest content related to the current blog post you may be reading. This distinction is important because as I looked at the Recommendations marketing and documentation, the content is heavily focused on product... more → Posted in: JavaScript Tagged with: Adding, Algolia, blog, Recommendations
Adding a Guestbook to Your Jamstack Site (Yes, Seriously) / / No Comments 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 Tagged with: Adding, Guestbook, Jamstack, Seriously, Site
Adding URL Parameters to an Interactive Map / / No Comments It’s Saturday so I have decided to give myself a 30 minute break. Today I will only be spending ½ an hour on the One Hour AI Map Challenge. In these 30 minutes I want to create URL parameters for Meet in the Middle which will allow us to replace the Google Maps link for shared meeting points with a link back to our own map.Prompt No.1:how can i add url parameters to a leaflet.js map to show Maps Mania… more → Posted in: Interactive Maps Tagged with: Adding, Interactive, Parameters
Adding Music Previews to My Now Page / / No Comments About two months or so ago I added a Now page to my site. It shows my current reading list, my last watched movies, my Untappd beer check-ins, and my most recent Spotify tracks. You can see that part here: When I built it, I used a Pipedream workflow to wrap calls to Spotify’s API. My Pipedream workflow gets my most recent tracks, slims down the data quite a bit, and returns just what I need. I use some client-side code to hit that endpoint and then render it out on the Now page. (I also use a bit of caching with LocalStorage such that the endpoint is only hit every ten minutes.) Currently, when rendering each track, I link to its URL and Spotify users can listen to the track completely.... more → Posted in: JavaScript Tagged with: Adding, Music, Page, previews
Adding Simple Routing to Cloudflare Workers / / No Comments I’ve been "playing" with serverless for years now, but honestly still feel new to it. When it comes to organization in a project that uses serverless functions, I’ve typically tried to build one function per operation. So for example, if I had a need to get a list of cats, I’d have one function. If I had a need to get information about a cat based on an identifier, I’d probably build a second one. That being said, I recently came across an example Cloudflare function that did something cool – it used a router, specifically the very lightweight itty-router. Let me share an example of how it works. What is a Router? # So I kinda assume most folks know what... more → Posted in: JavaScript Tagged with: Adding, Cloudflare, Routing, simple, workers