Adobe Firefly in Beta / / No Comments I’m currently at Adobe Summit and this morning at the keynote we announced the beta of Adobe Firefly. Firefly is a generative AI service, which by itself isn’t new, but Firefly has a strong commitment to being a more responsible AI service. You can read more about that and Adobe Sensei here if you would like. As an Adobe employee, I’m obviously biased, but the focus on having a responsible service that respects creators feels like a pretty important differentiator. While there are a lot of good uses for this, I decided to have some fun with it and see how well it would do something business-critical… with cats. For my test, I looked up a list of Dungeons and Dragons classes... more → Posted in: JavaScript Tagged with: Adobe, Beta, Firefly
How to Control CSS Animations with JavaScript / / No Comments When it comes to animations on the web, developers need to measure the animation’s requirements with the right technology — CSS or JavaScript. Many animations are manageable with CSS but JavaScript will always provide more control. With document.getAnimations, however, you can use JavaScript to manage CSS animations! The document.getAnimations method returns an array of CSSAnimation objects. CSSAnimation provides a host of information about the animation: playState, timeline, effect, and events like onfinish. You can then modify those objects to adjust animations: // Make all CSS animations on the page twice as fast document.getAnimations().forEach((animation) ={ animation.playbackRate... more → Posted in: JavaScript Tagged with: animations, Control, JavaScript
JavaScript print Events / / No Comments Media queries provide a great way to programmatically change behavior depending on viewing state. We can target styles to device, pixel ratio, screen size, and even print. That said, it’s also nice to have JavaScript events that also allow us to change behavior. Did you know you’re provided events both before and after printing? I’ve always used @media print in stylesheets to control print display, but JavaScript provides beforeprint and afterprint events: function toggleImages(hide = false) { document.querySelectorAll('img').forEach(img ={ img.style.display = hide ? 'none' : ''; }); } // Hide images to save toner/ink during printing window.addEventListener('beforeprint',... more → Posted in: JavaScript Tagged with: events, JavaScript, print
Detect Browser Bars Visibility with JavaScript / / No Comments It’s one thing to know about what’s in the browser document, it’s another to have insight as to the user’s browser itself. We’ve gotten past detecting which browser the user is using, and we’re now into knowing what pieces of the browser UI users are seeing. Browsers provide window.personalbar, window.locationbar, and window.menubar properties, with the shape of { visible : /*boolean*/} as its value: if(window.personalbar.visible || window.locationbar.visible || window.menubar.visible) { console.log("Please hide your personal, location, and menubar for maximum screen space"); } What would you use these properties for? Maybe providing a warning to users... more → Posted in: JavaScript Tagged with: Bars, browser, Detect, JavaScript, visibility
Detect the Content Type in the Clipboard / / No Comments A user’s clipboard is a “catch all” between the operating system and the apps employed on it. When you use a web browser, you can highlight text or right-click an image and select “Copy Image”. That made me think about how developers can detect what is in the clipboard. You can retrieve the contents of the user’s clipboard using the navigator.clipboard API. This API requires user permission as the clipboard could contain sensitive data. You can employ the following JavaScript to get permission to use the clipboard API: const result = await navigator.permissions.query({name: "clipboard-write"}); if (result.state === "granted" || result.state === "prompt") {... more → Posted in: JavaScript Tagged with: Clipboard, Content, Detect, type
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