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
Update to My Eleventy Blog Guide / / No Comments Last January, I announced the release of a guide I had written for building a simple blog in Eleventy. Now that Eleventy has hit 2.0, I took some time this morning to look at the guide and see what could be updated. The first thing I noticed was that I had a heck of a lot of typos. I fixed those. I then went through the two main versions of the blog (before and after UI was added) and updated the dependencies to the 2.0 release of Eleventy. That being said, I didn’t do anything else. This is not to say that the 2.0 release wasn’t lacking in new features, but as my guide is meant to be as simple as possible, I wasn’t on the lookout to add any new features if it didn’t make... more → Posted in: JavaScript Tagged with: blog, Eleventy, Guide, update
Document.elementFromPoint / / No Comments Reacting to events with JavaScript is the foundation of a dynamic experiences on the web. Whether it’s a click event or another typical action, responding to that action is important. We started with assigning events to specific elements, then moved to event delegation for efficiency, but did you know you can identify elements by position on the page? Let’s look at document.elementFromPoint and document.elementsFromPoint. The document.elementFromPoint method accepts x and y parameters to identify the top-most element at a point: const element = document.elementFromPoint(100, 100); // If you want to know the entire element stack, you can use document.elementsFromPoint: const... more → Posted in: JavaScript Tagged with: Document.elementFromPoint
CSS ::file-selector-button / / No Comments We all love beautifully styled form controls but, due to the differences between operating system displays, styling them can be painful. Due to that pain, we’ve created scores of libraries to mock these controls. Unfortunately that sometimes comes at the cost of accessibility, performance, etc. One control that has traditionally been tough to style is the input[type=file] element. Said input variation visually contains a button and text, all being clickable. Bit of a Frankenstein’s monster if you ask me. Can we style the button part though? We can! To style the button button portion of input[type=file], you can use ::file-selector-button: input[type=file]::file-selector-button... more → Posted in: JavaScript Tagged with: fileselectorbutton
Detect XR Support with JavaScript / / No Comments A few years ago I wrote an article about how to detect VR support with JavaScript. Since that time, a whole lot has changed. “Augmented reality” became a thing and terminology has moved to “XR”, instead of VR or AR. As such, the API has needed to evolve. The presence of navigator.xr signals that the browser supports the WebXR API and XR devices: const supportsXR = 'xr' in window.navigator; I really like using in for feature checking rather than if(navigator.xr), as simply invoking that could cause some initialization to take place. In future posts we’ll explore identifying and connecting to different devices. The post Detect XR Support with JavaScript appeared... more → Posted in: JavaScript Tagged with: Detect, JavaScript, Support
How to Open a Tor Brave Window from Command Line / / No Comments I love the Brave web browser for many reasons: ad blocking, Brave rewards, crypto integration, and even a Tor tab feature. I’ll often use the Tor feature but wanted to know how I could automated opening Tor windows from command line. To open a Brave Tor tab, you can use the following command: open -a "Brave Browser" --args --incognito --tor Any time I want to remotely open a Tor tab, I can do so via a shell script. Commands are such an underused but valuable utility for apps! The post How to Open a Tor Brave Window from Command Line appeared first on David Walsh Blog. David Walsh Blog… more → Posted in: JavaScript Tagged with: Brave, Command, from, line, open, Window
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
How to Create a Diff of Two Images / / No Comments When I was a child, I loved looking for Waldo in the “Where’s Waldo?” book series. These days I’m a sucker for TMZ’s “What’s the Big Frigin Difference” images, where TMZ slightly changes an image and you have to spot the differences between the two. That got me to thinking — how easily could I automate diff’ing two images? This StackOverflow post was gold. To create a diff of two similar images, we’ll use ImageMagick’s convert command line utility with a large host of configurations: convert '(' image1.png -flatten -grayscale Rec709Luminance ')' '(' image2.png -flatten -grayscale Rec709Luminance ')' ... more → Posted in: JavaScript Tagged with: create, Diff, images