The City of Women Subway Map / / No Comments Barcelona, like New York and London, now has a reimagined subway map designed to celebrate and recognise the lives of some of the city’s most remarkable women. The Barcelona City of Women subway map highlights the extraordinary contribution of women to the Catalan capital. On the Ciutat de Dones map every station on Barcelona’s metro network and all the stops on the city’s railway network has Maps Mania… more → Posted in: Interactive Maps Tagged with: City, Subway, Women
Detect the Content Type in the Clipboard / / No Comments A user’s clipboard is a “catch all” between the operating system and the apps employed on it. When you use a web browser, you can highlight text or right-click an image and select “Copy Image”. That made me think about how developers can detect what is in the clipboard. You can retrieve the contents of the user’s clipboard using the navigator.clipboard API. This API requires user permission as the clipboard could contain sensitive data. You can employ the following JavaScript to get permission to use the clipboard API: const result = await navigator.permissions.query({name: "clipboard-write"}); if (result.state === "granted" || result.state === "prompt") {... more → Posted in: JavaScript Tagged with: Clipboard, Content, Detect, type
The Map of Home Heating / / No Comments The Washington Post has been exploring how Americans heat their homes. Their are four main energy sources used by Americans to heat their homes: electricity, natural gas, propane and fuel oil. Which one is used is mainly determined by geographical and historical reasons.In How Americans Heat Their Homes the Post has produced a map which shows that fuel oil (in red) is the most used source of home Maps Mania… more → Posted in: Interactive Maps Tagged with: Heating, home
Supporting PDF Embeds in an Eleventy WebC Component / / No Comments Way back in the old days, in August of 2021, I wrote up an example of adding support for Adobe’s PDF Embed API as an Eleventy plugin: "An Adobe PDF Embed Plugin for Eleventy". When I find time, I need to update that to the newest URL for the library, but more recently I was curious if I could recreate support using the WebC template language. While it was a bit difficult at times (and a big thank you goes to Zach for patiently helping me), I think it’s at a point now where it can be shared. I will warn folks that I’m still struggling a bit with the best way to work with WebC, and at least one feature I’m showing isn’t documented yet (but I’ve confirmed... more → Posted in: JavaScript Tagged with: Component, Eleventy, Embeds, Supporting, WebC
The Undeniable Truth on Street View / / No Comments To mark the one year anniversary of Russia’s illegal war on Ukraine the website ‘Undeniable Street View’ has been launched. By providing virtual walks through six Ukrainian cities with custom made 360 degree panoramic ‘Street View’ imagery the Undeniable Street View allows you to see for yourself the damage that Russia has inflicted on Ukrainian infrastructure. The cities of Kyiv, Irpin, Maps Mania… more → Posted in: Interactive Maps Tagged with: Street, Truth, Undeniable, View
Update to My Eleventy Blog Guide / / No Comments Last January, I announced the release of a guide I had written for building a simple blog in Eleventy. Now that Eleventy has hit 2.0, I took some time this morning to look at the guide and see what could be updated. The first thing I noticed was that I had a heck of a lot of typos. I fixed those. I then went through the two main versions of the blog (before and after UI was added) and updated the dependencies to the 2.0 release of Eleventy. That being said, I didn’t do anything else. This is not to say that the 2.0 release wasn’t lacking in new features, but as my guide is meant to be as simple as possible, I wasn’t on the lookout to add any new features if it didn’t make... more → Posted in: JavaScript Tagged with: blog, Eleventy, Guide, update
Document.elementFromPoint / / No Comments Reacting to events with JavaScript is the foundation of a dynamic experiences on the web. Whether it’s a click event or another typical action, responding to that action is important. We started with assigning events to specific elements, then moved to event delegation for efficiency, but did you know you can identify elements by position on the page? Let’s look at document.elementFromPoint and document.elementsFromPoint. The document.elementFromPoint method accepts x and y parameters to identify the top-most element at a point: const element = document.elementFromPoint(100, 100); // If you want to know the entire element stack, you can use document.elementsFromPoint: const... more → Posted in: JavaScript Tagged with: Document.elementFromPoint
Lightship Earth / / No Comments Dutch broadcasting company KRO-NCRV has released an interactive map which visualizes light pollution in the Netherlands. Spaceship Earth allows you to enter any address in the Netherlands to discover how many stars can be seen from that location. The map also explores some of the most (and least) light polluted areas in the country.Spaceship Earth begins with a little scrollytelling tour of the Maps Mania… more → Posted in: Interactive Maps Tagged with: Earth, Lightship