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”

Using Sibling Selectors to Style the Element Before the Match

The original question for the below answer was wanting to hide a link when a button that’s next to the link has a “selected” class. This is interesting because this requires a sibling selector, but sibling selectors in CSS are a bit funky… with a sibling selector, the target element is always _subsequent_. That meansContinue reading “Using Sibling Selectors to Style the Element Before the Match”

CSS Clamp: The Goldilocks of CSS Math Functions

There is a problem I have wrestled with a couple of times, which was frustrating to solve… but can now be easily solved using clamp, which is currently in an Editors Draft of the CSS Values and Units Module Level 4 specification. It is sat alongside similar mathmatical CSS nuggets, such as min and maxContinue reading “CSS Clamp: The Goldilocks of CSS Math Functions”

HTML Challenge: Toggle Switch vs Checkbox

The toggle switch has very suddenly become a ubiquitous feature of web user interfaces. You can’t hardly fill in an HTML form these days without finding one; especially as 99% of forms we now fill in are concerned with “cookie consent”. Why isn’t the toggle switch a first-class citizen of HTML, you may ask… toContinue reading “HTML Challenge: Toggle Switch vs Checkbox”

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”

HTML Loading Attribute for Lazy Loading Images and Iframes

If you have been writing websites or web apps for any length of time, you will almost certainly have implemented some form of lazy-loading using JavaScript. I recently worked on a web app that implemented a search that benefitted to the tune of half-a-gig by deferring the loading of images until those images were actuallyContinue reading “HTML Loading Attribute for Lazy Loading Images and Iframes”

Cross Domain Iframe Resizing

If you have ever integrated third party components on your website, you will have found a dazzling variety of integration methods, from JavaScript snippets, to iframes, to server-side APIs. Many of the integrations seek to inject content onto your page, but I sincerely advise against this. You don’t need to spend long reading the OWASPContinue reading “Cross Domain Iframe Resizing”