Testing Out the Alpine.js Intersect Plugin / / No Comments A few weeks ago, I finally got around to looking at the official plugins Alpine.js supports and built a little demo that integrated the Intl spec with the Mask plugin. (You can read the post here: Integrating Intl with Alpine.js Mask). Today I thought I’d take a look at another plugin, Intersect. What Is It? # The Intersect plugin is a wrapper for the Intersection Observer API. This is a pretty cool web platform API that lets you monitor when DOM elements come into the visible part of a web browser. I first dug into this a few months ago in an article I wrote for Cloudinary, "Automatically Loading High-Quality Images with Cloudinary and IntersectionObserver". In that article,... more → Posted in: JavaScript Tagged with: Alpine.js, Intersect, plugin, Testing
Unveiling 15+ Essential Tools & Resources for Web Designers and Agencies in 2023 (Sponsored) / / No Comments You’ve visited countless websites, and now you’re designing your own. Stop and think for a minute about what you’ve liked and didn’t like about some of those you visited. Was it the front page, the layout in general, or the functionalities that either met with your satisfaction or turned you off? The helpful tools and resources for designers presented here should help you avoid what’s bad and capture what’s good in your own design creations. They will also save you the trouble of having to devote what could be many hours searching for tools and resources for designers you believe you should have and use. One or more of these should help you deliver work in a timely manner that engages... more → Posted in: JavaScript Tagged with: 2023, Agencies, Designers, essential, resources, Sponsored, tools, Unveiling
Fun With Front Matter: Part 4 – Featured Posts / / No Comments It’s been a few days since my last post in this series. I’d like to blame something in specific but honestly, it’s just life. Today’s tip will – again – be short and sweet but hopefully helpful. The idea of a "featured" post is that there may be content that, no matter the age or view count in your stats, you want to highlight. It could be your first blog post. A post announcing a new job or life event. Or anything really. How can we use front matter to support this? Marking Featured Content # One approach to marking content as featured could be to simply add a featured value to the front matter, like so: ---layout: posttitle: Gamma Post 7tags: postsdate:... more → Posted in: JavaScript Tagged with: Featured, Front, Matter, part, posts
Integrating Intl with Alpine.js Mask / / No Comments I’ve been using Alpine.js for quite a while now (although I still make silly mistakes, see the p.s. at the end) but haven’t yet looked at the "official" plugins. Listed in the docs, those plugins include: Intersect – a simple hook to recognize when an element is visible (I plan on blogging about this later) Persist – a simple hook to add persistence to Alpine data (another plugin I plan on blogging about) Focus – a way to manipulate focus Collapse – a simple UI plugin for collapsible content Morph – another UI plugin that attempts to transform one set of HTML into another (I honestly don’t quite get this one – yet) And finally,... more → Posted in: JavaScript Tagged with: Alpine.js, Integrating, Intl, Mask
Use XHR/fetch Breakpoints! / / No Comments Web debugging tools are so incredibly excellent these days. I remember the days where they didn’t exist and debugging was a total nightmare, even for the simplest of problems. A while back I introduced many of you to Logpoints, a way to output console.log messages without needing to change the source files. Another great breakpoint type is XHR/fetch breakpoints, allowing you to pause execution when an AJAX call is made. Let’s look at XHR/fetch breakpoints! To set an XHR/fetch breakpoint, open your browser’s Developer Tools and click the Sources tab — the same tab you open for other breakpoints. Under the XHR/fetch accordion item, click the big “+” button.... more → Posted in: JavaScript Tagged with: Breakpoints, XHR/fetch
Working with the Storage API / / No Comments Earlier this year at WWDC, Apple announced a whole set of new features coming to Safari in version 17. While that is not out yet, it’s still a pretty large set of updates. I’ve not been shy about my view that Safari has been holding the web back for a while, but I’m happy for any improvements that show up. While looking at the long list of updates, I saw Storage mentioned: WebKit has made some big updates to the storage quota policy. Previously, an origin had a starting storage limit of 1 GB. When exceeding the limit, the subsequent storage operation would fail in Home Screen web apps, or the user would see a prompt asking to increase the quota for the origin in Safari. Starting... more → Posted in: JavaScript Tagged with: storage, working
queryLocalFonts / / No Comments One of the larger downloads when requesting a webpage are custom fonts. There are many great techniques for lazy loading fonts to improve performance for those on poor connections. By getting insight into what fonts the user has available, we can avoid loading custom fonts. That’s where queryLocalFonts comes in — an native JavaScript function to gather user font information. queryLocalFonts is an async function that requires user permission via a browser prompt when first executed. queryLocalFonts returns an array of FontData objects which contain information about all available fonts: const localFonts = await window.queryLocalFonts(); // [FontData, FontData, ...] /* { family:... more → Posted in: JavaScript Tagged with: queryLocalFonts
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