Jeremy Keith

Notes & Narratives on Vimeo

Here’s the talk I gave yesterday at Na Píobairí Uilleann in Dublin all about The Session. True to the title, I played some notes on my mandolin to accompany the narrative.

The golden rule of Customizable Select | WebKit

This is excellent advice and I’m glad to see this getting addressed nice and early in the era of customisable select elements:

always provide text content or accessible text attributes for your option elements.

This is a collection of short stories by one of Ireland’s best playwrights.

I think you can tell that these stories were written by someone who’s at home with the stage. The dialogue really shines. And some of the stories feel like scenes in a play.

But that’s no bad thing. If most short stories are like mini-novels, why not have short stories that are like mini-plays?

Some of the stories are very short indeed, just long enough to convey the mood of the piece. That mood is often wistful, melancholy, or nostalgiac.

This collection comes with an equally brief introduction by the brilliant Louise Kennedy.

This slim volume makes for a great travel read. Slip it into your pocket and you’ll have an instant portal to a bygone time and place in the west of Ireland.

Storied Colors

Storied Colors is a catalogue of named colors — pigments, dyes, lakes, glazes, and a small number of digital hues — each accompanied by the documentary evidence required to call it by its name. The launch corpus opens at two hundred and fifty entries. It is maintained as a single-author project.

CSS Grid Lanes has started to ship in browsers. It’s in Safari and behind a flag in Chrome and Edge.

It enables masonry layouts, where items get packed together in the most efficient way possible.

Unsurprisingly, I’m a fan of a layout tool where the browser does all the hard work. It very much aligns with the idea of declarative design; you specify the boundary conditions, and then browser does the maths and heavy lifting.

There’s a handy website called The Field Guide to Grid Lanes where you can play around with possibilities.

At the most recent CSS Day, Patrick Brosset gave a great talk showing what you could do with Grid Lanes. I immediately started playing around with it, and I spotted what I think could be a useful pattern…

Over on The Session, I added a little enhancement to the events and sessions listings recently. I make a call to the Google Places API to see if I can find a match for the venue, and if I do, pull in some photos.

Sidenote: right now there’s a major issue with this. None of the photos come with text descriptions. This is something I need to fix, and I’ve got some ideas on how to do that.

Anyway, these photos are just nice-to-haves so I’ve tucked them away into a details element with a simple summary like “Ten photos” or “Twenty photos”. If you open up that details element you get the photos in a horizontal swipable row. A carousel, if you will.

This works fine, but on larger screens I think it would be okay to show all the photos at once. That’s where Grid Lanes comes in.

Take a look at an event or a session in Safari to see what I mean.

Here’s the CSS that creates a carousel:

.gallery {
    display: flex;
    align-items: center;
    inline-size: fit-content;
    max-inline-size: 100%;
    overflow-inline: auto;
    scroll-snap-type: inline mandatory;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}
.gallery > * {
    flex-shrink: 0;
    scroll-snap-align: center;
}

And here’s the media query that turns it into a masonry layout:

@supports (display: grid-lanes) {
    @media all and (min-width: 56em) {
        .gallery {
            all: initial;
            display: grid-lanes;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 0.5em;
        }
        .gallery > * {
            inline-size: 100%;
        }
    }
}

I’m using all: initial to unset the previous styles, which is a bit of a sledgehammer but it works.

I think this could be a useful responsive design pattern. Masonry layouts are great for large screens but kind of rubbish for small screens where you end up with just a single column. Carousels aren’t much cop on large screens but maybe have their place on small screens where real estate is at a premium.

Oh, and needless to say, this is a progressive enhancement. If a browser doesn’t yet understand display: grid-lanes it continues to get the carousel layout.

How building an HTML-first site doubled our users overnight

This is a great case study featuring a really useful HTML web component called validation-enhancer.

The results? When we launched, the number of people completing the form doubled. The analytics people didn’t even know where these users were coming from. Of course, your javascript-based analytics package doesn’t see the users you are bouncing because of javascript failures. It was a flood!

I’m giving a talk this week.

Usually this wouldn’t be a big deal. I’ve been giving talks for over twenty years now. But this one is different.

I’m going to speaking at Na Píobairí Uilleann, the Society of Uilleann Pipers, in Dublin. They have a monthly series of lectures called Notes and Narratives all about Irish music, and they’ve asked me to deliver this month’s talk.

So this will not be my usual audience. I will be talking about a website, The Session, but I won’t be talking about the technology. There won’t be any mention of HTML, CSS, or JavaScript. Instead I’ll be talking about the origins of the site and how it—and its community—has evolved over time.

Oh, and at these Notes and Narratives talks, they also want some music interspersed to illustrate the points. So that’s something a bit different to my usual tech talks.

I’m not going to lie, I’m kind of nervous about this one. But I’m also excited. I’m genuinely honoured to be able to give a talk at such a fine institution.

I’m speaking on Thursday, June 18th at 8:30pm at the headquarters of Na Píobairí Uilleann, which is 15 Henrietta Street in Dublin. Doors open at 8pm. If you want to come along, tickets are €10/€5. The talk will also be streamed live online.

Wish me luck!