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
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: Component, Dialog, Image
ColdFusion Component for Adobe Acrobat Services / / No Comments Last month, I wrote up a post demonstrating how to use Adobe Acrobat Services with ColdFusion. This week I took some of the code I had written for that post and turned it into a proper GitHub project. You can find the latest code here: https://github.com/cfjedimaster/coldfusion-cfc-acrobat-services To use this, you’ll need credentials, which you can get and use for free for up to 500 transactions. (The docs go into detail about how that works.) Currently I only have a subset of our APIs supported, but I plan to hit most of the rest in the next day or so. To give you an example of how it works, here’s a sample that uses our Extract API. First, you instantiate the component with your... more → Posted in: JavaScript Tagged with: Acrobat, Adobe, ColdFusion, Component, Services
Supporting PDF Embeds in an Eleventy WebC Component / / No Comments Way back in the old days, in August of 2021, I wrote up an example of adding support for Adobe’s PDF Embed API as an Eleventy plugin: "An Adobe PDF Embed Plugin for Eleventy". When I find time, I need to update that to the newest URL for the library, but more recently I was curious if I could recreate support using the WebC template language. While it was a bit difficult at times (and a big thank you goes to Zach for patiently helping me), I think it’s at a point now where it can be shared. I will warn folks that I’m still struggling a bit with the best way to work with WebC, and at least one feature I’m showing isn’t documented yet (but I’ve confirmed... more → Posted in: JavaScript Tagged with: Component, Eleventy, Embeds, Supporting, WebC
Another Update to my Slideshow Web Component – JavaScript Support / / No Comments Last month I shared a simple web component I built to embed slideshows onto web pages. If you didn’t get a chance to read that, you can see it in action in this CodePen below: See the Pen Slideshow Web Component by Raymond Camden (@cfjedimaster) on CodePen. After I wrote this, Šime Vidas shared an excellent update to my component with some great modifications. I talked about this version in a blog post, and it’s the version I’ll be using for my post today. What am I covering today? When I demonstrated how to use my web component, it was done via a script include (well, it’s on CodePen, but you get the idea), and then a bit of HTML. Here’s an example. (And... more → Posted in: JavaScript Tagged with: Another, Component, JavaScript, Slideshow, Support, update
A Simple Slideshow Web Component / / No Comments As I continue to play around with and learn more about web components, I thought I’d build a simple component to make it easier to add a slideshow. By that, I mean something that renders one picture but provides controls to go to more images. I’ve probably built this many times in the past, both in JavaScript and server-side code, and I thought it would be a nice candidate for a component. As with most of my demos so far, there’s a lot more that could be done with it, but I thought I’d share what I have so far. Once again I want to give a shout-out to Simon MacDonald for helping me get this code working. (At the end of the post, I’ll share the mistake I made, as... more → Posted in: JavaScript Tagged with: Component, simple, Slideshow
Building a Placeholder Web Component with No External Dependencies / / No Comments As my readers can tell, I’m on something of a web component kick, and while I’m enjoying building silly examples, today I wanted to share one I thought might actually be useful – a placeholder component that doesn’t use any external services. Raymond Camden… more → Posted in: JavaScript Tagged with: building, Component, Dependencies, External, Placeholder
A PDF Embed Web Component / / No Comments I’m still pretty new to web components (see my post back in May, My First Web Component), but I’ve been playing with them, and other libraries that wrap them, off and on. Recently I decided to revisit something I had tried at the time I first played with the technology, a wrapper for Adobe’s PDF Embed library. Raymond Camden… more → Posted in: JavaScript Tagged with: Component, EMbed