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: , , ,

Next Code Break – Blogging with Eleventy

/ / No Comments
Hey folks – my next <Code><Br> will not be this Tuesday as I’ll be presenting at API World (assuming American gets me there today) so I’ve pushed back the livestream till Thursday, November 7th. Usual time – 12PM CST. You can read more about the event here: https://cfe.dev/talkshows/codebreak-11072024/ I’m going to be discussing Eleventy and building a basic blog. I’ve wanted to cover Eleventy on my show for a while but was waiting for 3.0 to come out. Now that it has – I can’t wait to introduce it to folks. Hope to see you there! Raymond Camden… more →
Posted in: JavaScript Tagged with: , , , ,

Links For You (10/28/2024)

/ / No Comments
This post was meant to go out on the weekend, but I got sucked into video games, baking cookies, and, well, watching the Saints suck. I’ve mentioned this already I think, and I’m pretty sure I talked about it on my stream, but my anxiety which had taken a bit of a back seat for nearly a month has come raging back in. November is going to be kind of a crazy month for me – I’ve got two trips, six presentations total, and a major holiday. I’m also just a teeny bit worried about, oh you know, the entire country going to hell, but for today, today I’m just going to focus on tackling things one by one. And with that… your lnks. Converting HTML to Image in Node.js First... more →
Posted in: JavaScript Tagged with: ,

Using Chrome AI for Translation

/ / No Comments
I’ve done a couple blog posts now on Chrome’s efforts to bring generative AI to the browser. It’s still somewhat of a rough process (remember, you can sign up for access to test and learn more at the intro post from the Chrome engineers), but it’s getting better over time. One thing I mentioned in my last post ("Using Chrome AI to Rewrite Text") was how the Chrome team is shipping focused APIs for specific purposes, not just general Q and A. In that previous post, I demonstrated an example of the Rewriter API. As yet another example of this, you can now test out on device translation. As with everything else I’ve shared in this space, you should consider... more →
Posted in: JavaScript Tagged with: , ,

Using Parallel Requests to Improve Web Performance

/ / No Comments
Yesterday I blogged about a change I made to my bots page and in it, I mentioned how the performance wasn’t necessarily as good as it could be. I had made the decision to go from server-side and build-time for the page to a purely client-side solution. At the end of the post, I asked folks to let me know if anyone would like to have me work on that performance issue, and, honestly, it kept popping up in my head so I figured I should tackle it. Before I begin talking about what I changed, let me review what I had done, and what the issues are. The Current Solution You can go to the bots page yourself, but in general, this is the process: Given a list of bots… For each one, get the... more →
Posted in: JavaScript Tagged with: , , , ,

Getting and Displaying a Mastodon Post in Client-Side JavaScript

/ / No Comments
I’ve got a few pages here that are primarily built for my own use. One of them, my bots page, is a list of all the dumbsuper useful bots I’ve built for Mastodon (and Bluesky). The idea on this page is to show the latest post from each bot. The bots page makes use of two different shortcodes written in Liquid to do this. The first uses the RSS feed of the bot to get their last toot ID: const lastToot = async (instance, user) => { let rssFeedURL = `https://$ {instance}/users/$ {user}.rss`; try { let feed = await parser.parseURL(rssFeedURL); return feed.items[0].guid.split('/').pop(); } catch(e) { console.log(`getting last toot for $ {user} returned an error`); return... more →
Posted in: JavaScript Tagged with: , , , , ,

Take a Code Break Tomorrow

/ / No Comments
Just a quick note to my faithful readers out there – tomorrow, October 22nd, at 12PM CST (Cool Standard Time), I’ll be hosting my next episode of <Code><Br>: In the previous stream, I talked about charting with JavaScript, specifically using Chart.js. In this followup, I’ll attempt to use another library so we can compare and contrast. I don’t know about you, but that sounds like a lot of fun. (I really enjoyed the last stream.) And with this being the last stream before Halloween – I may even dress up! Raymond Camden… more →
Posted in: JavaScript Tagged with: , , ,

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: , , , ,
1 2 3 4 5 … 88