JavaScript closest / / No Comments When it comes to finding relationships between elements, we traditionally think of a top-down approach. We can thank CSS and querySelector/querySelectorAll for that relationship in selectors. What if we want to find an element’s parent based on selector? To look up the element tree and find a parent by selector, you can use HTMLElement‘s closest method: // Our sample element is an "a" tag that matches ul > li > a const link = document.querySelector('li a'); const list = a.closest('ul'); closest looks up the ancestor chain to find a matching parent element — the opposite of traditional CSS selectors. You can provide closest a simple or complex selector to look upward... more → Posted in: JavaScript Tagged with: closest, JavaScript
Want to learn Alpine.js? / / No Comments For the past two weeks or so, I’ve been releasing videos on YouTube all about learning Alpine.js. Each video is relatively short (although longer than a Tiktok video) and can be quickly consumed, with the entire playlist coming in under an hour. Each video has links to CodePens that let you immediately play with the concepts I cover. I really like Alpine (as you can see by many other posts on the topic) as it’s an incredibly simple, and practical, JavaScript framework. There’s no build process, no hundreds of megabytes of download, and it’s something you can pick up rather quickly, as I hope my video series demonstrates. Check it out, leave me a comment, and let me know... more → Posted in: JavaScript Tagged with: Alpine.js, Learn, want
Divorced, Befriended, Married or Died / / No Comments Madrid’s Almendra Central is an island of bachelors surrounded by a sea of married couples. Spanish newspaper El Confidencial has used 2021 census data to map out whether there are more single people or married couples in every census tract in Spain. An interactive map in the paper’s Singles in Your Area, Street by Street colors every neighborhood in the country depending on whether the Maps Mania… more → Posted in: Interactive Maps Tagged with: Befriended, Died, Divorced, Married
Creating a Blackjack Game with Alpine.js and the Deck of Cards API / / No Comments Some time ago I ran across a pretty fascinating service, the Deck of Cards API. This API handles everything imaginable related to working with decks of cards. It handles creating a shuffled set of cards (containing one or more decks), dealing out a card (or cards), and even reshuffling. Even better, it includes card images you can use if you don’t want to find your own: It’s an incredibly feature-filled an API and best of all, it’s completely free. No need for even a key. I’ve known about this API for a while and have contemplated building a card game with it, but realized that games can quickly go from simple to fairly complex. In fact, my friends strongly urged me not... more → Posted in: JavaScript Tagged with: Alpine.js, Blackjack, Cards, creating, Deck, Game
Mapping Loch Ness Monster Sightings / / No Comments The best place to spot the Loch Ness Monster is on or around Loch Ness in Scotland. In When, where and how to see the Loch Ness Monster – based on 1,500 years worth of data! the Press and Journal has mapped the locations of Loch Ness monster sightings over the last 83 years in order to determine the best location where you are most likely to spot Nessie. After hours of analysis the newspaper Maps Mania… more → Posted in: Interactive Maps Tagged with: Loch, Mapping, Monster, Ness, Sightings
You Don’t Know Africa / / No Comments Let’s face it your geographical knowledge of African countries is woefully inadequate. If you had to identify the location of Burkina Faso on a map you would probably end up pointing to the Philippines. Well it’s time to change that. Today you are going to improve your knowledge of Africa and have fun while doing so. You Don’t Know Africa is a collection of three online map games which will Maps Mania… more → Posted in: Interactive Maps Tagged with: Africa, don't, know
JavaScript: Reverse Arrays / / No Comments Manipulating data is core to any programming language. JavaScript is no exception, especially as JSON has token over as a prime data delivery format. One such data manipulation is reversing arrays. You may want to reverse an array to show most recent transactions, or simple alphabetic sorting. Reversing arrays with JavaScript originally was done via reverse but that would mutate the original array: // First value: const arr = ['hi', 'low', 'ahhh']; // Reverse it without reassigning: arr.reverse(); // Value: arr (3) ['ahhh', 'low', 'hi'] Modifying the original array is a legacy methodology. To avoid this mutation, we’d copy the array and then reverse it: const reversed = [...arr].reverse();... more → Posted in: JavaScript Tagged with: Arrays, JavaScript, Reverse
Discovering the Dissolution / / No Comments I live near Abbey Road in East London. The road is named for Langthorne Abbey, which used to be one of the largest Cistercian abbeys in England. At the beginning of the 16th Century the abbey owned most of the land in East London. It also owned a number of local mills and controlled a number of local industries including brewing, shearing, weaving, tannery and farming. Then came the Dissolution Maps Mania… more → Posted in: Interactive Maps Tagged with: discovering, Dissolution