Here Maps Scroll Wheel Temporary Fix

As my grandma used to say, “there’s only one thing worse than a scroll-linked positioning effect and that’s not being able to scroll at all”. So, with this in mind I have written a temporary fix for the issue in the latest version of HERE Maps that prevents users from scrolling past the map withContinue reading “Here Maps Scroll Wheel Temporary Fix”

AJAX Request Interceptor

This is a little funky script to intercept AJAX requests and raise a simple custom event for everything else in your app to listen to. To use this, you just need to listen for a custom event named `AjaxDetected`. The method, url, and any data is passed in the event detail. document.body.addEventListener(‘AjaxDetected’, function (e) {Continue reading “AJAX Request Interceptor”

Investigate JavaScript Execution Times Using Edge Dev Tools

This is a quick exploration of how to use Edge Dev Tools to investigate JavaScript execution time issues. We’ll quickly run a performance profile and identify what part of the JavaScript is the “most responsible” for any performance issues. The idea is to show just the quickest way to find the source of an issue,Continue reading “Investigate JavaScript Execution Times Using Edge Dev Tools”

Avoid Expensive innerHTML Manipulation with insertAdjacentHTML

It is pretty well known these days that fiddling with innerHTML is terribly inefficient. It triggers serialization, and it can result in invalid markup. Nevertheless, you’ll still find this being done in many applications. elem.innerHTML = elem.innerHTML + ‘<a href=”https://www.example.com”>Visit Example Dot Com</a>’; // or elem.innerHTML += ‘<a href=”https://www.example.com”>Visit Example Dot Com</a>’; You can avoidContinue reading “Avoid Expensive innerHTML Manipulation with insertAdjacentHTML”

Set a Minimum Font Size

This is just a little script I needed to use to increase text size conditionally. It only increases text below a minimum size and leaves everything else. (function () { var minFontSize = function () { $(“.content-zone *”).each(function () { var $this = $(this); if (parseInt($this.css(“fontSize”), 10) < 16) { $this.css({ “font-size”: “16px” }); }Continue reading “Set a Minimum Font Size”

Debugging Adobe Analytics

Adobe Analytics can sometimes be a bit of an enigma, so people often turn to browser extensions to help them with debugging Adobe Analytics. However, for those of us who spend most of our lives in browser tools; there’s a simple way to get x-ray vision into what Analytics is thinking. Let’s get straight downContinue reading “Debugging Adobe Analytics”

Fixing CSS object-fit for Internet Explorer

A common problem with images, especially if they are user-generated, is that they don’t have the correct aspect ratio for their intended purpose. Also, as we re-flow pages for many different devices, we often want the image to work with different aspect ratios. This is where the CSS object-fit property comes in very useful. ThereContinue reading “Fixing CSS object-fit for Internet Explorer”