How to Override width and height HTML attributes with CSS

One of the HTML elements that frequently comes into collision with CSS is the img element. As we learned in Request Metrics’ Fixing Cumulative Layout Shift Problems on DavidWalshBlog article, providing image dimensions within the image tag will help to improve your website’s score. But in a world where responsive design is king, we need CSS and HTML to work together. Most responsive design style adjustments are done via max-width values, but when you provide a height value to your image, you can get a distorted image. The goal should always be a display images in relative dimensions. So how do we ensure the height attribute doesn’t conflict with max-width values? The answer... more →
Posted in: JavaScript

Looking at the JavaScript Promise Collection Methods

Let me begin by saying that "Promise Collection Methods" is not something I’ve seen mentioned elsewhere, but is my own way of referring to the various methods of the Promise API that work with multiple promises. They are: Promise.all Promise.allSettled Promise.any Promise.race I’ve used Promise.all many times in the past, and I was aware of the other methods but had not taken the time to actually build a demo of them. This weekend I changed that. After spending a few hours in Sanctuary grinding my Necro character, I put down the controller and picked up the laptop. Here’s what I built. As a note, everything shown here works in modern browsers, but you can check MDN... more →
Posted in: JavaScript

The Most Controversial Interactive Map

One of the earliest popular uses of the Google Maps API was Gawker Stalker. The now defunct Gawker Stalker interactive map tracked the movements of famous celebrities thanks to the detailed stalking carried out by Gawker and their readers. Now similar concerns are being raised regarding potential privacy infringements related to Jack Sweeney’s TheAirTraffic, particularly involving the Maps Mania… more →
Posted in: Interactive Maps

Detect Caps Lock with JavaScript

Anyone is capable of having their caps lock key on at any given time without realizing so. Users can easily spot unwanted caps lock when typing in most inputs, but when using a password input, the problem isn’t so obvious. That leads to the user’s password being incorrect, which is an annoyance. Ideally developers could let the user know their caps lock key is activated. To detect if a user has their keyboard’s caps lock turn on, we’ll employ KeyboardEvent‘s getModifierState method: document.querySelector('input[type=password]').addEventListener('keyup', function (keyboardEvent) { const capsLockOn = keyboardEvent.getModifierState('CapsLock'); if (capsLockOn)... more →
Posted in: JavaScript

Where to Watch April’s Solar Eclipse

On April 8, 2024 people across large parts of the USA will be able to see a total solar eclipse. If it isn’t cloudy.In 1999 I traveled to France to experience a total solar eclipse. Unfortunately the experience was ruined slightly by overcast skies. What made it even more galling was to discover that a friend of mine had traveled independently from me and had a cloudless view of the eclipse Maps Mania… more →
Posted in: Interactive Maps

– First Episode

Just a quick note to share that today I did my first episode of the <Code><Br> show. I had a great audience with some great questions and comments. My next show will be in two weeks and I hope to see you there! Raymond Camden… more →
Posted in: JavaScript

The 12 Best Daily Map Games

Ever since Josh Wardle released his very popular daily Wordle game in 2022 there has been a plethora of daily geography challenges which have been unleashed upon us, the geographically challenged public. The latest of these is Unzoomed.Every day Unzoomed presents you with the satellite image of a random city, which could be located anywhere in the world. All you have to do is name the city. You Maps Mania… more →
Posted in: Interactive Maps

Car Commutes are Getting Longer

During the height of the Covid epidemic a number of visualizations were created to show the drop in road traffic and public transit use. As people were forced to quarantine and work from home our roads and transit networks saw an observable fall in traffic.For example Buzzfeed teamed up with Mapbox to create a series of interactive mapped visualizations showing the reduction in road traffic in Maps Mania… more →
Posted in: Interactive Maps
1 27 28 29 30 31 193