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

ColdFusion Component for Google Gemini

/ / No Comments
This week I had the pleasure to present on Google Gemini at the ColdFusion Summit. If you weren’t able to make it, I do plan on giving the talk again on the ColdFusion Meetup sometime later this year. After the presentation, I took my ‘rough and ugly’ code that called Gemini and decided to wrap it up in a nice ColdFusion component. This allows for (hopefully) easier use. For example: gemini = new gemini(key="your key", model="gemini-1.5-pro");result = gemini.prompt('why is the sky blue?'); And that’s it. The result variable will contain two keys, a raw value that is exactly what Gemini returned, and a text value that narrows down into the text response. Multimodal... more →
Posted in: JavaScript Tagged with: , , ,

Another Web Component – Table Compressor

/ / No Comments
Earlier this week I was browsing a site that showed a tabular list of data. It initially showed something like ten rows and had a clickable item that showed the rest of the data. I thought I’d whip up a quick web component that mimicked this functionality. My thinking was that you would wrap a regular HTML table (much like my table sorting component) and the component would truncate and add the ‘click to expand’ logic. Now, to be clear, this still means the user is downloading the entire set of data, but visually it would take up less space until the user selects to show the rest of the data. Let me share the component here and then I’ll explain how it works: class CompressTable... more →
Posted in: JavaScript Tagged with: , , ,

Web Component to Generate Image Color Palettes

/ / No Comments
Chalk this up to something that is probably not terribly useful, but was kind of fun to build. A few weeks ago I came across a site talking about the colors used in the Fallout TV show. I grabbed a screenshot of how they rendered it: Unfortunately, I didn’t make note of the site itself and I can’t seem to find it anymore. I really dug how it showed the palette of prominent colors directly beneath the image itself. Using this as inspiration, I looked into how I could automate this with a web component. To get the color palette, I turned to a library I’ve used many times before, Color Thief. Given an image, it can return either the most dominant color of an image or return an... more →
Posted in: JavaScript Tagged with: , , , ,

PDF Embed Web Component Available Via NPM

/ / No Comments
Earlier this month, after being motivated by Thomas Steiner, I went through the not-really-a-hassle process of publishing <table-sort> to NPM. (Table-Sorter Available Via NPM) Today I’ve done the same for another web component, <pdf-embed>. This component wraps Adobe’s PDF Embed API, which, honestly, isn’t an API, but a JavaScript library to embed PDFs inline with the rest of your document. Given this HTML: <pdf-embed url="https://documentservices.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf" width="100%" height="500px" key="33f07f2305444579a56b088b8ac1929e"><p>Read our cool PDF <a href="https://documentservices.adobe.com/view-sdk-demo/PDFs/Bodea... more →
Posted in: JavaScript Tagged with: , ,

Update to My Table Sorting Web Component

/ / No Comments
Just a quick note. Last year, I blogged a demo of a web component that lets you wrap an existing HTML table and progressively add table sorting. I’m rather proud of that demo and was actually planning on doing a quick video about it, but while testing I encountered two small bugs that somehow missed my earlier rigorous testing. (And by rigorous testing I mean a few minutes of clicking around.) Specifically, the issue is in the "when clicking to sort, notice if we sorted this column before and if so, reverse the sort" area: sortCol(e,i) { let sortToggle = 1; if(this.lastSort === i) { this.sortAsc = !this.sortAsc; if(!this.sortDir) sortToggle = -1; } this.lastSort = i; this.data.sort((a,b)... more →
Posted in: JavaScript Tagged with: , , ,

Responding to HTML Changes in a Web Component

/ / No Comments
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 Tagged with: , , ,

An Image Dialog Web Component

/ / No Comments
A lot of the talk (well, on Mastodon at least) lately concerning web components has been on "HTML Web Components". The idea is that web components can progressively enhance "regular" HTML in the DOM instead of completely blowing it away with the Shadow DOM. (You can find a deeper discussion of this in Jim Nielsen’s blog post.) This is something that’s been on my mind for a while now as well and I’ve kept my eyes open for opportunities to build web components that enhance, not replace, content. With that in mind, I built a really simple component that does something fun. We’ve all seen sites that use JavaScript to provide a thumbnail and detail view... more →
Posted in: JavaScript Tagged with: , ,
1 2