Three Cool (to me) Node.js Features

I’ve been using Node.js on the regular now for probably over a decade, but one thing I’ve never done well is keep up to date with its features and new additions. In general, my brain just thinks "use javascript" and that’s all. The last time I really cared about what precisely was supported was when I was using fetch in client-side JavaScript and it wasn’t supported natively in Node. Luckily I could just use node-fetch and be done with it. That being said, I recognize I’ve not done a great job of keeping track of updates to Node itself so I try to notice it when folks mention it. Over the past week or so I’ve encountered not one, not two, but three... more →
Posted in: JavaScript

I’m So Old: Web Edition

Time can be a funny thing. I still remember discovering HTML, CSS, and JavaScript coding. I still remember my first college programming course. I still remember my first day at my first coding job, then my first day at my second coding job, and then my first day at Mozilla. I still remember my first day coding for MetaMask. This year marks my 20th year as a professional software engineer and it’s happened in the blink of an eye. Every once in a while I will make an old programming reference to a much younger engineer and then realize they have no idea what I’m talking about. I’m so old… Webpage layouts were being done with <table>s and this new “CSS float”... more →
Posted in: JavaScript

Mapping the History of the Railway

Martin Brake has created a number of interactive maps which visualize the historical development of transport networks in Germany, London, Paris and Barcelona. His Timemap Timelines project provides an animated map for each featured city which shows how its transit network has grown over time. For example the screenshot above shows the development of the London Underground between 1858 and 1947. Maps Mania… more →
Posted in: Interactive Maps

The 100 Most Segregated School Districts in America

In the United States school district boundaries drawn onto economically and racially segregated neighborhoods ensure that most poor and non-white students receive a much worse education than students in the more affluent school districts.Back in 2016 NPR examined how school funding in the USA is used to ensure that the rich get the best schools. They created an interactive map which visualized Maps Mania… more →
Posted in: Interactive Maps

Responding to HTML Changes in a Web Component

While driving my kids to school this morning, I had an interesting thought. Is it possible for a web component to recognize, and respond, when its inner DOM contents have changed? Turns out of course it is, and the answer isn’t really depenedant on web components, but is a baked-in part of the web platform, the MutationObserver. Here’s what I built as a way to test it out. The Initial Web Component # I began with a simple web component that had the following simple feature – count the number of images inside it and report. So we can start with this HTML: <img-counter> <p> <img src="https://placehold.co/60x40"> </p> <div> <img src="https://placehold.co/40x40"> </div> <img... more →
Posted in: JavaScript

Real-time Air Pollution Alerts

In February the Copernicus Atmosphere Monitoring Service (CAMS) launched an Aerosol Alerts service to provide warnings about upcoming air pollution. You can view an animated map of today’s alerts on the Aerosol Alerts interactive map.Aerosols are tiny particles that are suspended in the air, which can come from both natural and human-made sources.  Natural sources of aerosols include dust Maps Mania… more →
Posted in: Interactive Maps

Not Everyone Commutes by Car

In Canada and the United States 95% of journeys to and from work are made by car. Elsewhere in the world people often walk, cycle or use public transport in order to get to work.Cities Moving is a research project by the Complexity Science Hub of the University of Vienna, which analysed the mode of transport most commonly used for commuting to work in 794 cities in 61 countries around the Maps Mania… more →
Posted in: Interactive Maps

Using Intl.RelativeTimeFormat for Localized Relative Timings

I’ve been singing the praises of the web platform’s Intl object for years now, but it still continues to impress me. While I’ve seen it before, today I came across the RelativeTimeFormat API which looks absolutely fabulous. I played with it a bit and thought I’d share some tips. The Basics # The RelativeTimeFormat API works like so: Given a locale… Given a difference (in either a positive or negative value)… And given a unit of time, like ‘hour’ (or ‘hours’) Report the difference in the user’s desired language. So for example: 3 and day, "in 3 days" -1 and day, "one day ago" 18 and hour, "in 18 hours" Also,... more →
Posted in: JavaScript
1 21 22 23 24 25 190