Tags: play

Layoutit Terra - CSS Terrain Generator

It’s wild what you can do with CSS these days!

Optimizing PWAs For Different Display Modes — Smashing Magazine

There’s really good browser support for display-mode media queries and this article does a really good job of running through some of the use cases for your progressive web app.

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.

Cold Album Drumming - full-album drum covers by Brad Frost

This is a great new musical project from Brad:

Brad Frost plays drums to the albums he knows intimately, but has never drummed to before. Cover to cover. No warm-up. No prep. Totally cold. What could possibly go wrong?

I really enjoyed watching all of The Crane Wife and In Rainbows.

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.

MomBoard: E-ink display for a parent with amnesia

Technology doesn’t have to be terrible. Here’s an absolutely wonderful use of an e-ink display:

I made as much use of vanilla HTML and CSS as possible. I used a small amount of JavaScript but no framework or other libraries.

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.

daviddarnes/play-button: A Web Component to play audio or video with a button

Isn’t this a lovely little HTML web component? All it does is hook up a button element with an audio or video element: exactly the kind of discrete drudge work that’s good to automate away.

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.

Introducing Enhance Music — Begin Blog

I also think the number of situations in which an SPA architecture can be recommended is dwindling, chiefly due to how good the web platform has become (and how much better it’s getting every day). And because so much of the rest of the ‘struggle stack’ (transpilers, unique dialects, etc.) was built to get around gaps in the web platform that no longer exist, the use cases for these tools is dwindling in tandem.

This is good news: not only can we avoid piling up transient knowledge about a seemingly endless stream of dependencies, we can also eject from the routine stress of those dependencies changing or breaking under our feet and throwing wrenches into our workflows — all while delivering more robust and performant websites to end users.

Bruce Lawson’s personal site  : HTML popover, videos and display:blackhole

Bruce raises an interesting question with media playing in popovers—shouldn’t the media pause when the popover is closed? I agree with Bruce that this is a common use case that should be covered declaratively.

Begging for Treats - blog.lmorchard.com

As flies/cats to wanton boys are we to the gods/Kardashev Type II civilisations—they play with us for their sport.

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.

Spotify – dConstruct 2022

If you were at dConstruct on Friday and you enjoyed the mood music during the breaks, this is what you were listening to.

Notes from a gopher:// site - daverupert.com

The result of adding more constraints means that the products have a broader appeal due to their simple interface. It reminds me of a Jeremy Keith talk I heard last month about programming languages like CSS which have a simple interface pattern: selector { property: value }. Simple enough anyone can learn. But simple doesn’t mean it’s simplistic, which gives me a lot to think about.

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!

PlymouthPress – A Letterpress Image Font

An experimental image font made using the University of Plymouth’s unique letterpress workshop.

Grungy!

The font is intended for display purposes only, and not is suitable for body text.