Updates to my Table Sorting Web Component / / No Comments It’s been a while since I touched my <table-sort> web component, but last night I had a few interesting ideas and thought I’d do a quick update. For folks who may not remember, I first blogged about this way back in March of 2023. The basic idea was to take an existing table, wrap it in my web component, and sorting would be added automatically. Nice and simple. As an example: <table-sort> <table> <!-- existing table here --> </table> </table-sort> The only real "feature" was that if you included numeric="X", it would consider the Xth column as numeric and ensure sorting worked properly. X in this context could be one column,... more → Posted in: JavaScript Tagged with: Component, Sorting, table, updates
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
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: ColdFusion, Component, Gemini, Google
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: Another, Component, Compressor, table
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: Color, Component, Generate, Image, Palettes
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: available, Component, EMbed
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: Component, Sorting, table, update
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: changes, Component, HTML, Responding