JavaScript Array Group / / No Comments Managing, sorting, and manipulating data with JavaScript is a skill we’ve often delegated to third party libraries like lodash. As the JavaScript language progresses, however, these features eventually get. added to the JavaScript specification. Two such APIs for grouping of Array data are `Array.prototype.group and Array.prototype.groupToMap. Array.prototype.group To group an array of objects by a given property, call the group method with function that returns the grouping string: const teams = [ { name: "Arsenal", origin: "London", tier: "legendary" }, { name: "Manchester United", origin: "Manchester", tier: "legendary" }, { name: "Liverpool", origin: "Liverpool", tier: "legendary"... more → Posted in: JavaScript Tagged with: Array, Group, JavaScript
Using the Cookie Store API / / No Comments Today while browsing a list of web APIs over at MDN, I ran across one that surprised me – the Cookie Store API. This is clearly marked as experimental (currently only supported in Chrome/Edge) but looks to be fascinating. Cookies are the oldest (as far as I know) way for web applications to store data on the client. They’re also typically the least recommended way of doing so, for many, many reasons. However, sometimes you need to work with cookies, and this looks like a really nice new way of dealing with them. Here’s a quick look. The Old Way # For the past few hundred years or so, working with cookies in the browser involved string parsing. There really wasn’t even... more → Posted in: JavaScript Tagged with: Cookie, Store, using
Working with CloudCannon and Eleventy – My Experience / / No Comments I’ve been working with the Jamstack (in its various iterations and names) for many years now. In that time, one area I had not really looked into is the use of a content management system (CMS). I recently had a chance to look into how CloudCannon adds CMS capabilities to Eleventy and I thought I’d share my experience. I went in, admittedly, a bit concerned. One of Eleventy’s greatest strengths is its flexibility. Unlike other Jamstack solutions that have a proscribed way of doing things, Eleventy is incredibly open to how it can be used to build a site. My assumption was that it would be difficult for a CMS to "grok" a particular Eleventy implementation and support... more → Posted in: JavaScript Tagged with: CloudCannon, Eleventy, Experience, working
Awesome Algolia Updates (and some fixes here…) / / No Comments I’ve been a huge fan, and user, of Algolia for a while now. I first wrote about it back in 2020 when I described how I added Algolia search to Eleventy. Later on, I described how one might migrate to Algolia from Lunr. All in all, I’ve been very happy with Algolia and my usage on this blog. Honestly, I feel like I’m the only one who makes use of my search page but I do so nearly daily so it’s critical to me. (And recently, a friend reached out specifically about my search and I’ll discuss that below.) The only real issue I ran into when using Algolia here was the size of my content. Algolia’s free tier maxed out at ten thousand records. That’s very generous... more → Posted in: JavaScript Tagged with: Algolia, awesome, Fixes, Here, Some, updates
How to Block a Range of IP Addresses / / No Comments As much as content creators want traffic to their website, there is such thing as the wrong type of traffic. Sometimes it’s content scrapers, sometimes it’s malicious bots; either way, it’s important to know how to block problematic IPs from your site. To block a range of IP addresses using an .htaccess file, you can use the * wildcard for pieces of the IP address: Order Allow,Deny Deny from 219.198.*.* Allow from all You can also use a regular expression: RewriteEngine on RewriteCond %{REMOTE_ADDR} ^219\.198\.\. RewriteRule ^ - [F] Don’t let known attackers and problematic bots bring your website to a halt! Be quick to check your site logs and ban addresses that... more → Posted in: JavaScript Tagged with: Addresses, Block, range
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