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
JavaScript waitFor Polling / / No Comments As more of the JavaScript developers write becomes asynchronous, it’s only natural to need to wait for conditions to be met. This is especially true in a world with asynchronous testing of conditions which don’t provide an explicit await. I’ve written about waitForever, waitForTime, and JavaScript Polling in the past, but I wanted to have a more modern way of awaiting a given state. Let’s have a look at this super useful waitFor function! waitFor is an async function that allows developers to provide a condition function, polling interval (in milliseconds), and optional timeout (in milliseconds). // Polls every 50 milliseconds for a given condition const waitFor = async... more → Posted in: JavaScript Tagged with: JavaScript, Polling, waitFor
Connecting Cloudflare Workers with Service Bindings / / No Comments I’ll warn you ahead of time and say this post isn’t too much more than what you can find in the documentation, but I wanted to see it work for myself so I had to setup a test locally. Cloudflare Service bindings are a way for one Worker to connect to another. That seems simple enough, but while it defines a "connection", that connection is completely internal to the Cloudflare environment. I.e., incredibly fast with much lower latency. Let’s consider a simple example. The Receiver # I began by creating a worker, named backworker, with just a simple message: export default { async fetch(request, env, ctx) { return new Response('Hello from Backworker'); },}; The Front... more → Posted in: JavaScript Tagged with: Bindings, Cloudflare, Connecting, service, workers
Adding Caching to a Cloudflare Worker / / No Comments Last week I blogged about my first experience building a Cloudflare Worker serverless function. In that post, I built a simple serverless function that wrapped calls to the Pirate Weather API, a free and simple-to-use API for getting weather information. For today’s post, I thought I’d show how easy it is to add a bit of caching to the worker to help improve its performance. As with my last post, I’ve also got a video walkthrough of everything you watch instead. (Or read and watch, go crazy!) The Application # In the last post, I shared the complete code of the Worker, but let me share it again: // Lafayette, LAconst LAT = 30.22;const LNG = -92.02;export default { async fetch(request,... more → Posted in: JavaScript Tagged with: Adding, Caching, Cloudflare, Worker