Journal tags: play

I really like it when people post their end-of-year music round-up. Colly, Jon, and Naz have all posted about music they listened to in 2025.

I recognise almost none of the albums that they’ve listed. That’s because my musical brain has been almost entirely conquered by Irish traditional music.

2025 was a year filled with music for me. Mostly it was music that I was playing. I think I might’ve spent more time playing music than listening to music this year. I like that ratio.

Brighton has a healthy session scene. Most weeks I get to play in more than one. Even better, I had some great tunes outside of the pub environment, calling around to people’s houses or having them over for a nice cup of tea with some jigs’n’reels.

Most of my travel in 2025 was music-based. The Willie Clancy Summer School in County Clare. Belfast Trad Fest in Northern Ireland. The Cáceres fleadh in Spain. The inaugural Namur Irish Music Festival in Belgium.

There’s nothing better than being in a good session, and I enjoyed some great ones this year. I think my mandolin-playing has benefited from it too.

I also got hold of some albums released in 2025…

The second Copley Street album is, unsurprisingly, excellent.

The second volume of Mná na bPíob is, also unsurprisingly, also excellent.

But I think my favourite album of 2025 is Òran na hEala by Maurice Bradley. Terrific tunes, superb piping, and equally superb fiddle playing.

I’ve been in a session two with Maurice Bradley during previous tradfests in Belfast. I was looking forward to seeing him there again this year to tell him how much I like the album. Alas, he passed away shortly after the album was released. Ar dheis Dé go raibh a anam. A great loss to Irish music.

Oh, I did get one album released in 2025 that isn’t traditional Irish music, and it’s really, really good:

Deep Black Water by Salter Cane.

Okay, that’s cheating because I’m in the band, but honestly, I think the album is genuinely excellent. Every track is a banger, in my somewhat-biased opinion. Have a listen for yourself and see what you think.

My wish for 2026 is that I’ll have plenty of opportunities to play those songs live. In between all the sessions.

Ever since Salter Cane recorded the songs on Deep Black Water I’ve been itching to play them live. At our album launch gig last Friday, I finally got my chance.

It felt soooo good! It helped that we had the best on-stage sound ever (note to the bands of Brighton, Leon at the Hope and Ruin is fantastic at doing the sound). The band were tight, the songs sounded great live, and I had an absolute blast.

I made a playlist of songs to be played in between bands. It set the tone nicely. As well as some obvious touchstones like 16 Horsepower and Joy Division, I made sure to include some local bands we’re fond of, like The Equitorial Group, Mudlow, Patients, and The Roebucks.

Brighton is blessed with plenty of traditional Irish music sessions. You need some kind of almanac to keep track of when they’re on. Some are on once a month. Some are twice a month. Some are every two weeks (which isn’t the same as twice a month, depending on the month).

Sometimes when the stars align just right, you get a whole week of sessions in a row. That’s what happened last week with sessions on Monday, Tuesday, Wednesday, and Thursday. I enjoyed playing my mandolin in each of them. There was even a private party on Saturday night where a bunch of us played tunes for an hour and a half.

There’s nothing quite like playing music with other people. It’s good for the soul.

I’ve been reading lots of modern takes on Greek classics. So when I saw that there was going to be a short of run of Sophocles’s Electra at Brighton’s Theatre Royal, I grabbed some tickets for the opening night.

With Brie Larson taking on the title role in this production, it’s bound to be popular.

I didn’t know anything about this staging of the play—other than it was using the Anne Carson translation—which is how I like it. I didn’t know if it was going to be modern, retro, classical or experimental.

It turned out to be kind of arty, but not in a good way. Arty like art school with all the clichés.

The production somehow managed to feel packed with gimmicks but also seriously underbaked at the same time. There must have a been a lot of “yes, and…”s during the workshopping, but no subsequent round of “no, but…”s. So we got lots of ideas thrown at the wall like spaghetti. Very few of them stuck.

Instead of enhancing the core text—which is, thankfully, indestructable—most of the gimmicks lessened it. It’s like they were afraid to let the play speak for itself and felt like they had to do stuff to it. Most of it ended up creating an emotional distance from the story and the characters.

It wasn’t bad, per se, but it definitely wasn’t good. It was distinctly mediocre.

Now, take all of this with a big pinch of salt because this is just my opinion. The very things that turned me off might tickle your fancy. Like the way it was half way to being a musical, with characters singing their dialogue in that monotone way that they do in Les Mis (but this is like Les really Mis). And the vocal effects that did nothing for me might be quite effective for you.

Even as I was watching it, I was thinking to myself, “Well, this isn’t really for me, but I can kind of appreciate that they’re trying to experiment.”

But then towards the end of the play, it went too far. Over the PA came samples of reporting of recent news stories; graphic, grisly, and crucially, real. If you’re going to attempt something like that, you need to earn it. Otherwise you’re just cheapening the real-world suffering. This play absolutely did not earn it.

Elektra has finished its run in Brighton and is now heading to London where it’s supposed to play until April. I’m curious to see how it goes.

Those HTML web components I made for date inputs are very simple. All they do is slightly extend the behaviour of the existing input elements.

This would be the ideal use-case for the is attribute:

<input is="input-date-future" type="date">

Alas, Apple have gone on record to say that they will never ship support for customized built-in elements.

So instead we have to make HTML web components by wrapping existing elements in new custom elements:

<input-date-future>
  <input type="date">
<input-date-future>

The end result is the same. Mostly.

Because there’s now an additional element in the DOM, there could be unexpected styling implications. Like, suppose the original element was direct child of a flex or grid container. Now that will no longer be true.

So something I’ve started doing with HTML web components like these is adding something like this inside the connectedCallback method:

connectedCallback() {
    this.style.display = 'contents';
  …
}

This tells the browser that, as far as styling is concerned, there’s nothing to see here. Move along.

Or you could (and probably should) do it in your stylesheet instead:

input-date-future {
  display: contents;
}

Just to be clear, you should only use display: contents if your HTML web component is augmenting what’s within it. If you add any behaviours or styling to the custom element itself, then don’t add this style declaration.

It’s a bit of a hack to work around the lack of universal support for the is attribute, but it’ll do.

When I play music, it’s almost always instrumental. If you look at my YouTube channel almost all the videos are of me playing tunes—jigs, reels, and so on.

Most of those videos were recorded during The Situation when I posted a new tune every day for 200 consecutive days. Every so often though, I’d record a song.

I go through periods of getting obsessed with a particular song. During The Situation I remember two songs that were calling to me. New York was playing in my head as I watched my friends there suffering in March 2020. And Time (The Revelator) resonated in lockdown:

And every day is getting straighter, time’s a revelator.

The song I’m obsessed with right now is called Foreign Lander. I first came across it in a beautiful version by Sarah Jarosz (I watch lots of mandolin videos on YouTube so the algorithm hardly broke a sweat showing this to me).

There’s a great version by Tatiana Hargreaves too. And Tim O’Brien.

I wanted to know more about the song. I thought it might be relatively recent. The imagery of the lyrics makes it sound like something straight from a songwriter like Nick Cave:

If ever I prove false love
The elements would moan
The fire would turn to ice love
The seas would rage and burn

But the song is old. Jean Ritchie collected it, though she didn’t have to go far. She said:

Foreign Lander was my Dad’s proposal song to Mom

I found that out when I came across this thread from 2002 on mudcat.org where Jean Ritchie herself was a regular contributor!

That gave me a bit of vertiginous feeling of The Great Span, thinking about the technology that she used when she was out in the field.

I’ve been practicing Foreign Lander and probably driving Jessica crazy as I repeat over and over and over. It’s got some tricky parts to sing and play together which is why it’s taking me a while. Once I get it down, maybe I’ll record a video.

I spent most of Saturday either singing the song or thinking about it. When I went to bed that night, tucking into a book, Foreign Lander was going ‘round in my head.

Coco—the cat who is not our cat—came in and made herself comfortable for a while.

I felt very content.

A childish little rhyme popped into my head:

With a song in my head
And a cat on my bed
I read until I sleep

I almost got up to post it as a note here on my website. Instead I told myself to do it the morning, hoping I wouldn’t forget.

That night I dreamt about Irish music sessions. Don’t worry, I’m not going to describe my dream to you—I know how boring that is for everyone but the person who had the dream.

But I was glad I hadn’t posted my little rhyme before sleeping. The dream gave me a nice little conclusion:

With a song in my head
And a cat on my bed
I read until I sleep
And dream of rooms
Filled with tunes.

Brighton has a thriving Irish music scene. Some sessions are weekly—every Sunday afternoon in The Bugle and every Wednesday evening in The Jolly Brewer. Some are every two weeks, like the session in The Fiddler’s Elbow. Others are monthly, like the session in The Dover Castle and the session in The Lord Nelson.

So it sometimes happens that if the calendar aligns just right, there are many sessions in one week. This was one of those weeks. I managed a streak of five sessions in a row.

The first was the regular Sunday afternoon session in The Bugle.

Then on Monday, it was The Fiddler’s Elbow.

The night after that there was a one-off session in the Hand in Hand, which will hopefully become a regular monthly occurrence.

On Wednesday it was the regular session at The Jolly Brewer.

Finally on Thursday it was the monthly session at The Lord Nelson.

I’m very lucky to have so many opportunities to play the music I love with my fellow musicians. I don’t take it for granted.

This Is My Jam was a lovely website. Created by Hannah and Matt in 2011, it ran until 2015, at which point they had to shut it down. But they made sure to shut it down with care and consideration.

In many ways, This Is My Jam was the antithesis of the prevailing Silicon Valley mindset. Instead of valuing growth and scale above all else, it was deliberately thoughtful. Rather than “maximising engagement”, it asked you to slow down and just share one thing: what piece of music are you really into right now? It was up to you to decide whether “right now” meant this year, this month, this week, or this day.

I used to post songs there sporadically. Here’s a round-up of the twelve songs I posted in 2013. There was always some reason for posting a particular piece of music.

I was reminded of This Is My Jam recently when I logged into Spotify (not something I do that often). As part of the site’s shutdown, you could export all your jams into a Spotify playlist. Here’s mine.

Listening back to these 50 songs all these years later gave me the warm fuzzies.

Usually an end-of-year music round-up is a list of favourite recordings released in the year. But in 2022 I wasn’t paying very much attention to new releases. I bought a few albums on Bandcamp. They were mostly of—surprise, surprise—traditional Irish music.

Still, I had a very music-filled 2022. Mostly I was playing mandolin in sessions, both here in Brighton and wherever else my travels took me.

These moments were undoubtedly highlights of the year for me.

It’s said that the best way to learn about something is to teach it. I certainly found that to be true when I was writing the web.dev course on responsive design.

I felt fairly confident about some of the topics, but I felt somewhat out of my depth when it came to some of the newer modern additions to browsers. The last few modules in particular were unexplored areas for me, with topics like screen configurations and media features. I learned a lot about those topics by writing about them.

Best of all, I got to put my new-found knowledge to use! Here’s how…

The Session is a progressive web app. If you add it to the home screen of your mobile device, then when you launch the site by tapping on its icon, it behaves just like a native app.

In the web app manifest file for The Session, the display-mode property is set to “standalone.” That means it will launch without any browser chrome: no address bar and no back button. It’s up to me to provide the functionality that the browser usually takes care of.

So I added a back button in the navigation interface. It only appears on small screens.

Do you see the assumption I made?

I figured that the back button was most necessary in the situation where the site had been added to the home screen. That only happens on mobile devices, right?

Nope. If you’re using Chrome or Edge on a desktop device, you will be actively encourged to “install” The Session. If you do that, then just as on mobile, the site will behave like a standalone native app and launch without any browser chrome.

So desktop users who install the progressive web app don’t get any back button (because in my CSS I declare that the back button in the interface should only appear on small screens).

I was alerted to this issue on The Session:

It downloaded for me but there’s a bug, Jeremy - there doesn’t seem to be a way to go back.

Luckily, this happened as I was writing the module on media features. I knew exactly how to solve this problem because now I knew about the existence of the display-mode media feature. It allows you to write media queries that match the possible values of display-mode in a web app manifest:

.goback {
  display: none;
}
@media (display-mode: standalone) {
  .goback {
    display: inline;
  }
}

Now the back button shows up if you “install” The Session, regardless of whether that’s on mobile or desktop.

Previously I made the mistake of inferring whether or not to show the back button based on screen size. But the display-mode media feature allowed me to test the actual condition I cared about: is this user navigating in standalone mode?

If I hadn’t been writing about media features, I don’t think I would’ve been able to solve the problem. It’s a really good feeling when you’ve just learned something new, and then you immediately find exactly the right use case for it!

I had a double-whammy of a stress dream during the week.

I dreamt I was at a conference where I was supposed to be speaking, but I wasn’t prepared, and I wasn’t where I was supposed to be when I was supposed to be there. Worse, my band were supposed to be playing a gig on the other side of town at the same time. Not only was I panicking about getting myself and my musical equipment to the venue on time, I was also freaking out because I couldn’t remember any of the songs.

You don’t have to be Sigmund freaking Freud to figure out the meanings behind these kinds of dreams. But usually these kind of stress dreams are triggered by some upcoming event like, say, oh, I don’t know, speaking at a conference or playing a gig.

I felt really resentful when I woke up from this dream in a panic in the middle of the night. Instead of being a topical nightmare, I basically had the equivalent of one of those dreams where you’re back at school and it’s the day of the exam and you haven’t prepared. But! When, as an adult, you awake from that dream, you have that glorious moment of remembering “Wait! I’m not in school anymore! Hallelujah!” Whereas with my double-booked stress dream, I got all the stress of the nightmare, plus the waking realisation that “Ah, shit. There are no more conferences. Or gigs.”

I miss them.

Mind you, there is talk of re-entering the practice room at some point in the near future. Playing gigs is still a long way off, but at least I could play music with other people.

Actually, I got to play music with other people this weekend. The music wasn’t Salter Cane, it was traditional Irish music. We gathered in a park, and played together while still keeping our distance. Jessica has written about it in her latest journal entry:

It wasn’t quite a session, but it was the next best thing, and it was certainly the best we’re going to get for some time. And next week, weather permitting, we’ll go back and do it again. The cautious return of something vaguely resembling “normality”, buoying us through the hot days of a very strange summer.

No chance of travelling to speak at a conference though. On the plus side, my carbon footprint has never been lighter.

Online conferences continue. They’re not the same, but they can still be really worthwhile in their own way.

I’ll be speaking at An Event Apart: Front-end Focus on Monday, August 17th (and I’m very excited to see Ire’s talk). I’ll be banging on about design principles for the web:

Designing and developing on the web can feel like a never-ending crusade against the unknown. Design principles are one way of unifying your team to better fight this battle. But as well as the design principles specific to your product or service, there are core principles underpinning the very fabric of the World Wide Web itself. Together, we’ll dive into applying these design principles to build websites that are resilient, performant, accessible, and beautiful.

Tickets are $350 but I can get you a discount. Use the code AEAJER to get $50 off.

I wonder if I’ll have online-appropriate stress dreams in the next week? “My internet is down!”, “I got the date and time wrong!”, “I’m not wearing any trousers!”

Actually, that’s pretty much just my waking life these days.

Alright, so I’ve already talked about some gotchas when debugging service worker issues. But what if you don’t even realise the problem has anything to do with your service worker?

This is not a hypothetical situation. I encountered this very thing myself. Gather ‘round the campfire, children…

One of the latest case studies on the Clearleft site is a nice write-up by Luke of designing a mobile app for Virgin Holidays. The case study includes a lovely video that demonstrates the log-in flow. I implemented that using a video element (with a poster image). Nice and straightforward. Super easy. All good.

But I hadn’t done my due diligence in browser testing (I guess I didn’t even think of it in this case). Hana informed me that the video wasn’t working at all in Safari. The poster image appeared just fine, but when you clicked on it, the video didn’t load.

I ducked, ducked, and went, uncovering what appeared to be the root of the problem. It seems that Safari is fussy about having servers support something called “byte-range requests”.

I had put the video in question on an Amazon S3 server. I came to the conclusion that S3 mustn’t support these kinds of headers correctly, or something.

Now I had a diagnosis. The next step was figuring out a solution. I thought I might have to move the video off of S3 and onto a server that I could configure a bit more.

Luckily, I never got ‘round to even starting that process. That’s good. Because it turns out that my diagnosis was completely wrong.

I came across a recent post by Phil Nash called Service workers: beware Safari’s range request. The title immediately grabbed my attention. Safari: yes! Video: yes! But service workers …wait a minute!

There’s a section in Phil’s post entitled “Diagnosing the problem”, in which he says:

I first thought it could have something to do with the CDN I’m using. There were some false positives regarding streaming video through a CDN that resulted in some extra research that was ultimately fruitless.

That described my situation exactly. Except Phil went further and nailed down the real cause of the problem:

Nginx was serving correct responses to Range requests. So was the CDN. The only other problem? The service worker. And this broke the video in Safari.

Doh! I hadn’t even thought about service workers!

Phil came up with a solution, and he has kindly shared his code.

I decided to go for a dumber solution:

if ( request.url.match(/\.(mp4)$/) ) {
  return;
}

That tells the service worker to just step out of the way when it comes to video requests. Now the video plays just fine in Safari. It’s a bit of a shame, because I’m kind of penalising all browsers for Safari’s bug, but the Clearleft site isn’t using much video at all, and in any case, it might be good not to fill up the cache with large video files.

But what’s more important than any particular solution is correctly identifying the problem. I’m quite sure I never would’ve been able to fix this issue if Phil hadn’t gone to the trouble of sharing his experience. I’m very, very grateful that he did.

That’s the bigger lesson here: if you solve a problem—even if you think it’s hardly worth mentioning—please, please share your solution. It could make all the difference for someone out there.

Andy Parker kindly deposited a couple of books on my desk recently. One was The Martian. I had already read that one, thanks to Tim Kadlec’s recommendation. The other was the much-hyped Ready Player One.

I read it while I was travelling to and from Bulgaria. It was the ideal travel companion—an airport novel for geeks. It’s not exactly the finest prose ever written, but it’s thoroughly enjoyable popcorn entertainment. It reads like fan fiction and I mean that in a good way. It’s like Scott Pilgrim crossed with Snowcrash. It certainly passed the time on some airplane rides.

Right after I wrote about combining flexbox with responsive design—to switch the display of content and navigation based on browser size—I received an email from Raphaël Goetter. He pointed out a really elegant solution to the same use-case that makes use of display:table.

Let’s take the same markup as before:

<body>
<div role="main">
<p>This is the main content.</p>
</div>
<nav role="navigation">
<p>This is the navigation.</p>
<ol>
<li><a href="#">foo</a></li>
<li><a href="#">bar</a></li>
<li><a href="#">baz</a></li>
</ol>
</nav>
</body>

The source order reflects the order I want on small-screen devices (feature phones, smart phones, etc.). Once the viewport allows it, I’d like to put that navigation at the top. I can do this by wrapping some display declarations in a media query:

@media screen and (min-width: 30em) {
    body {
        display: table;
        caption-side: top;
    }
    [role="navigation"] {
        display: table-caption;
    }
}

That’s it. It works much like box-orient:vertical with box-direction:reverse but because this is good ol’ CSS 2.1, it’s very well supported.

We can solve the other issue too: making those list items display horizontally on larger screens:

[role="navigation"] ol {
    display: table-row;
}
[role="navigation"] ol li {
    display: table-cell;
}

Once again, I’ve put a gist up on Github (get me! I’m like a proper computer nerd).

Update: And Remy has put it on JSbin so you can see it in action (resize the live preview pane).

So there you go: we’ve at least two different mechanisms in CSS to re-order the display of content and navigation in response to screen real-estate. The default is content first, navigation second—a pattern that Luke talked about in this interview with Jared:

Yeah, one of the design principles that I’ll be talking on the tour about, for mobile, is content first, navigation second; which is just really putting something up right away that somebody can engage with, and saving the pivoting and the navigating for later.

There’s, basically, UI patterns that you can use to make that happen. I’m still surprised at how many, both mobile websites and applications, the first thing they give you is a menu of choices, instead of content.

Don’t get me wrong, the menu’s important, and you can get to it, but it’s actually the content that the immediacy of mobile, and the fact that you’re probably on a slower network, and in some cases you’re even paying for your data transfers, right? Giving you a list of choices as your first time experience tends not to work so well.

Now that the BBC iPlayer has been sensibly implemented in Flash, rather than as a proprietary Windows-only app, it turns out to be quite useful. Should I ever miss an episode of Doctor Who or, God forbid, University Challenge, I can catch up at my leisure.

But there are two major problems with the iPlayer:

1. It is only available in the UK,a condition imposed by the licence fee system and enforced with IP sniffing.
2. Programmes are available for seven days. Then they’re gone.

Both of these limitations are unwebby but that second bit of self-crippling is particularly galling as the boffins at the BBC, in their attempt to appear more 2.0, have added a “Share” button to every show on the iPlayer, prompting you to bookmark the current episode on sites like Digg, Del.icio.us and Stumbleupon. I’d be very curious to find out if anyone is actually making use of these links. I don’t know who should be considered more idiotic: the BBC webmonkeys for encouraging people to link to a time-limited URI or the people foolish enough to actually bookmark a resource that has just a week to live.

To quote Sir Timbo: Cool URIs don’t change.