Jeremy Keith

Jeremy Keith

Making websites. Writing books. Hosting a podcast. Speaking at events. Living in Brighton. Working at Clearleft. Playing music. Taking photos. Answering email.

Journal 3117 Links 10481 Articles 85 Notes 7641

Sunday, December 15th, 2024

Progressively enhancing maps

The Session has been online for over 20 years. When you maintain a site for that long, you don’t want to be relying on third parties—it’s only a matter of time until they’re no longer around.

Some third party APIs are unavoidable. The Session has maps for sessions and other events. When people add a new entry, they provide the address but then I need to get the latitude and longitude. So I have to use a third-party geocoding API.

My code is like a lesson in paranoia: I’ve built in the option to switch between multiple geocoding providers. When one of them inevitably starts enshittifying their service, I can quickly move on to another. It’s like having a “go bag” for geocoding.

Things are better on the client side. I’m using other people’s JavaScript libraries—like the brilliant abcjs—but at least I can self-host them.

I’m using Leaflet for embedding maps. It’s a great little library built on top of Open Street Map data.

A little while back I linked to a new project called OpenFreeMap. It’s a mapping provider where you even have the option of hosting the tiles yourself!

For now, I’m not self-hosting my map tiles (yet!), but I did want to switch to OpenFreeMap’s tiles. They’re vector-based rather than bitmap, so they’re lovely and crisp.

But there’s an issue.

I can use OpenFreeMap with Leaflet, but to do that I also have to use the MapLibre GL library. But whereas Leaflet is 148K of JavaScript, MapLibre GL is 800K! Yowzers!

That’s mahoosive by the standards of The Session’s performance budget. I’m not sure the loveliness of the vector maps is worth increasing the JavaScript payload by so much.

But this doesn’t have to be an either/or decision. I can use progressive enhancement to get the best of both worlds.

If you land straight on a map page on The Session for the first time, you’ll get the old-fashioned bitmap map tiles. There’s no MapLibre code.

But if you browse around The Session and then arrive on a map page, you’ll get the lovely vector maps.

Here’s what’s happening…

The maps are embedded using an HTML web component called embed-map. The fallback is a static image between the opening and closing tags. The web component then loads up Leaflet.

Here’s where the enhancement comes in. When the web component is initiated (in its connectedCallback method), it uses the Cache API to see if MapLibre has been stored in a cache. If it has, it loads that library:

caches.match('/path/to/maplibre-gl.js')
.then( responseFromCache => {
    if (responseFromCache) {
        // load maplibre-gl.js
    }
});

Then when it comes to drawing the map, I can check for the existence of the maplibreGL object. If it exists, I can use OpenFreeMap tiles. Otherwise I use the old Leaflet tiles.

But how does the MapLibre library end up in a cache? That’s thanks to the service worker script.

During the service worker’s install event, I give it a list of static files to cache: CSS, JavaScript, and so on. That includes third-party libraries like abcjs, Leaflet, and now MapLibre GL.

Crucially this caching happens off the main thread. It happens in the background and it won’t slow down the loading of whatever page is currently being displayed.

That’s it. If the service worker installation works as planned, you’ll get the nice new vector maps. If anything goes wrong, you’ll get the older version.

By the way, it’s always a good idea to use a service worker and the Cache API to store your JavaScript files. As you know, JavaScript is unduly expensive to performance; not only does the JavaScript file have to be downloaded, it then has to be parsed and compiled. But JavaScript stored in a cache during a service worker’s install event is already parsed and compiled.

Century-Scale Storage

This magnificent piece by Maxwell Neely-Cohen—with some tasteful art-direction—is right up my alley!

This piece looks at a single question. If you, right now, had the goal of digitally storing something for 100 years, how should you even begin to think about making that happen? How should the bits in your stewardship be stored with such a target in mind? How do our methods and platforms look when considered under the harsh unknowns of a century? There are plenty of worthy related subjects and discourses that this piece does not touch at all. This is not a piece about the sheer volume of data we are creating each day, and how we might store all of it. Nor is it a piece about the extremely tough curatorial process of deciding what is and isn’t worth preserving and storing. It is about longevity, about the potential methods of preserving what we make for future generations, about how we make bits endure. If you had to store something for 100 years, how would you do it? That’s it.

Thursday, December 12th, 2024

Knowing CSS is mastery to Frontend Development — Anselm Hannemann

Anselm isn’t talking about becoming a CSS wizard, but simply having an understanding of what CSS can do. I have had similar experiences to this:

In the past years I had various situations where TypeScript developers (they called themselves) approached me and asked whether I could help them out with CSS. I expected to solve a complex problem but for me — knowing CSS very well — it was always a simple, straightforward solution or code snippet.

Let’s face it, “full stack” usually means “JavaScript”—HTML and CSS aren’t considered worthy of consideration. Their loss.

Wednesday, December 11th, 2024

THE AI CON - How to Fight Big Tech’s Hype and Create the Future We Want

A shame that this must-read book won’t be out in time for Christmas—’twould make a great stocking filler for a lot of people I know.

A smart, incisive look at the technologies sold as artificial intelligence, the drawbacks and pitfalls of technology sold under this banner, and why it’s crucial to recognize the many ways in which AI hype covers for a small set of power-hungry actors at work and in the world.

Tuesday, December 10th, 2024

Monday, December 9th, 2024

Sunday, December 8th, 2024

Thursday, December 5th, 2024

Wednesday, December 4th, 2024

Cocolingo

This year I decided I wanted to get better at speaking Irish.

Like everyone brought up in Ireland, I sort of learned the Irish language in school. It was a compulsory subject, along with English and maths.

But Irish wasn’t really taught like a living conversational language. It was all about learning enough to pass the test. Besides, if there’s one thing that’s guaranteed to put me off something, it’s making it compulsory.

So for the first couple of decades of my life, I had no real interest in the Irish language, just as I had no real interest in traditional Irish music. They were both tainted by some dodgy political associations. They were both distinctly uncool.

But now? Well, Irish traditional music rules my life. And I’ve come to appreciate the Irish language as a beautiful expressive thing.

I joined a WhatsApp group for Irish language learners here in Brighton. The idea is that we’d get together to attempt some converstation as Gaeilge but we’re pretty lax about actually doing that.

Then there’s Duolingo. I started …playing? doing? Not sure what the verb is.

Duolingo is a bit of a mixed bag. I think it works pretty well for vocabulary acquisition. But it’s less useful for grammar. I was glad that I had some rudiments of Irish from school or I would’ve been completely lost.

Duolingo will tell you what the words are, but it never tells you why. For that I’m going to have to knuckle down with some Irish grammar books, videos, or tutors.

Duolingo is famous for its gamification. It mostly worked on me. I had to consciously remind myself sometimes that the purpose was to get better at Irish, not to score more points and ascend a league table.

Oh, did I ascend that league table!

But I can’t take all the credit. That must go to Coco, the cat.

It’s not that Coco is particularly linguistically gifted. Quite the opposite. She never says a word. But she did introduce a routine that lent itself to doing Duolingo every day.

Coco is not our cat. But she makes herself at home here, for which we feel inordinately honoured.

Coco uses our cat flap to come into the house pretty much every morning. Then she patiently waits for one of us to get up. I’m usually up first, so I’m the one who gives Coco what she wants. I go into the living room and sit on the sofa. Coco then climbs on my lap.

It’s a lovely way to start the day.

But of course I can’t just sit there alone with my own thoughts and a cat. I’ve got to do something. So rather than starting the day with some doomscrolling, I start with some Irish on Duolingo.

After an eleven-month streak, something interesting happened; I finished.

I’m not used to things on the internet having an end. Had I been learning a more popular language I’m sure there would’ve been many more lessons. But Irish has a limited lesson plan.

Of course the Duolingo app doesn’t say “You did it! You can delete the app now!” It tries to get me to do refresher exercises, but we both know that there are diminishing returns and we’d just be going through the motions. It’s time for us to part ways.

I’ve started seeing other apps. Mango is really good so far. It helps that they’ve made some minority languages available for free, Irish included.

I’m also watching programmes on TG4, the Irish language television station that has just about everything in its schedule available online for free anywhere in the world. I can’t bring myself to get stuck into Ros na Rún, the trashy Irish language soap opera, but I have no problem binging on CRÁ, the gritty Donegal crime drama.

There are English subtitles available for just about everything on TG4. I wish that Irish subtitles were also available—it’s really handy to hear and read Irish at the same time—but only a few shows offer that, like the kid’s cartoon Lí Ban.

Oh, and I’ve currently got a book on Irish grammar checked out of the local library. So now when Coco comes to visit in the morning, she can keep me company while I try to learn from that.

Older »