Integrating Intl with Alpine.js Mask / / No Comments I’ve been using Alpine.js for quite a while now (although I still make silly mistakes, see the p.s. at the end) but haven’t yet looked at the "official" plugins. Listed in the docs, those plugins include: Intersect – a simple hook to recognize when an element is visible (I plan on blogging about this later) Persist – a simple hook to add persistence to Alpine data (another plugin I plan on blogging about) Focus – a way to manipulate focus Collapse – a simple UI plugin for collapsible content Morph – another UI plugin that attempts to transform one set of HTML into another (I honestly don’t quite get this one – yet) And finally,... more → Posted in: JavaScript Tagged with: Alpine.js, Integrating, Intl, Mask
Geolocating General Surovikin / / No Comments The investigative journalists at Bellingcat have been developing some important tools and methodologies for geolocating images. On Wednesday they applied their investigative geolocating powers to identify the location of General Sergey Surovikin. On September 4th a photograph of Surovikin was posted online, accompanied by the message “General Surovikin has emerged. He’s alive and well, home Maps Mania… more → Posted in: Interactive Maps Tagged with: General, Geolocating, Surovikin
Mapping the Great Kantō Earthquake / / No Comments 100 years ago yesterday, on September 1st 1923, the Great Kantō earthquake struck Japan. The earthquake struck near midday, at a time when many people were cooking lunch. In Tokyo, during and after the earthquake, fires spread across the city. In the 46 hours after the quake around 40% of Tokyo burned to the ground. Japanese newspaper Nikkei has marked the 100th anniversary of the Great Maps Mania… more → Posted in: Interactive Maps Tagged with: earthquake, GREAT, Kantō, Mapping
Use XHR/fetch Breakpoints! / / No Comments Web debugging tools are so incredibly excellent these days. I remember the days where they didn’t exist and debugging was a total nightmare, even for the simplest of problems. A while back I introduced many of you to Logpoints, a way to output console.log messages without needing to change the source files. Another great breakpoint type is XHR/fetch breakpoints, allowing you to pause execution when an AJAX call is made. Let’s look at XHR/fetch breakpoints! To set an XHR/fetch breakpoint, open your browser’s Developer Tools and click the Sources tab — the same tab you open for other breakpoints. Under the XHR/fetch accordion item, click the big “+” button.... more → Posted in: JavaScript Tagged with: Breakpoints, XHR/fetch
NIMBY Mapping / / No Comments In July the German government introduced a draft bill to legalize cannabis for personal use. However, under the draft bill, the consumption of cannabis will remain prohibited within a 200-meter radius of schools, children’s and youth facilities, playgrounds, publicly accessible sports facilities, and in pedestrian zones between 7 am and 8 pm. According to the Berliner Morgenpost these Maps Mania… more → Posted in: Interactive Maps Tagged with: Mapping, NIMBY
Working with the Storage API / / No Comments Earlier this year at WWDC, Apple announced a whole set of new features coming to Safari in version 17. While that is not out yet, it’s still a pretty large set of updates. I’ve not been shy about my view that Safari has been holding the web back for a while, but I’m happy for any improvements that show up. While looking at the long list of updates, I saw Storage mentioned: WebKit has made some big updates to the storage quota policy. Previously, an origin had a starting storage limit of 1 GB. When exceeding the limit, the subsequent storage operation would fail in Home Screen web apps, or the user would see a prompt asking to increase the quota for the origin in Safari. Starting... more → Posted in: JavaScript Tagged with: storage, working
A New Google Map of the Brain / / No Comments If you’ve ever wanted to look inside someone’s brain then you might like the European Commission’s new ‘Google Map’ of the human brain. This new 3D map allows you to take a look inside a human skull and explore atlases of the brain’s regions and neural connections.The European Brain Research Infrastructure (EBRAINS) is funded by the European Commission to accelerate brain research and Maps Mania… more → Posted in: Interactive Maps Tagged with: Brain, Google
queryLocalFonts / / No Comments One of the larger downloads when requesting a webpage are custom fonts. There are many great techniques for lazy loading fonts to improve performance for those on poor connections. By getting insight into what fonts the user has available, we can avoid loading custom fonts. That’s where queryLocalFonts comes in — an native JavaScript function to gather user font information. queryLocalFonts is an async function that requires user permission via a browser prompt when first executed. queryLocalFonts returns an array of FontData objects which contain information about all available fonts: const localFonts = await window.queryLocalFonts(); // [FontData, FontData, ...] /* { family:... more → Posted in: JavaScript Tagged with: queryLocalFonts