An audio mix for every year of recorded sound, 1859 to the present.
Currently up to 1936.
An audio mix for every year of recorded sound, 1859 to the present.
Currently up to 1936.
The Clearleft podcast is currently between seasons, but that’s not going to stop me from yapping on in audio files at any opportunity.
I’ve been continuing my audio narration of Jay Hoffman’s excellent Web History series over on CSS tricks. We’re eight chapters in already! That’s a good few hours of audio—each chapter is over half an hour long.
The latest chapter was a joy to narrate. It’s all about the history of CSS so I remember many of the events that are mentioned, like when Tantek saved the web by implenting doctype switching (seriously, I honestly believe that if that hadn’t happened, CSS wouldn’t have “won”). Eric is in there. And Molly. And Elika. And Chris. And Dave.
If you’re not completely sick of hearing my voice, you can also listen to the latest episode of the Object Oriented UX podcast with Sophia V. Prater. Our chat starts about eleven minutes into the episode and goes on for a good hour.
It was nice to be on the other side of the microphone, so to speak. The topic was Resilient Web Design but the conversation went in all sorts of directions.
I do enjoy a good natter. If you’ve got a podcast and you fancy having a chat, let me know.
I enjoyed this conversation with Sophia (our chat starts around the 11 minute mark) prompted by Resilient Web Design.
Design Leadership. Lots of smart people in this one. And I like that the source material is a real mix: conference talks, a roundtable discussion, and an interview.
Employee Experience Design. More of a deep dive than a broad overview. It’s pretty much a two-hander from Chris and Katie.
Accessibility. This one got a lot of attention, and rightly so in my opinion. It’s got three excellent contributors: Laura, Léonie, and Cassie. My job was to get out of the way and string their knowledge bombs together.
Prototyping. I had three good stories to work with from Benjamin, Lorenzo, and Trys. Then at the last minute I was able to add an interview with Adekunle which ties the whole thing up nicely.
Diversity and Inclusion. I think this might be the highlight of the season. Again, it’s got a mix of source material from conference talks and interviews. The quality of the contributions is exceptionally good. Once again, I found my job was to mostly get out of the way and line things up so they flowed well.
Remote Work. I wish I could see that it was my perfect planning that led to this episode being released exactly one year on from the start of lockdown. But really it was just a very fortunate coincidence. It did give this episode some extra resonance though. And I like that the final episode of the season has the widest range of contributors. It’s like the whole cast came back for the season finale.
I also wrote a bit about what I did behind the scenes for each episode of this season:
My sincerest thanks to everyone who contributed to this season of the Clearleft podcast, especially everyone outside Clearleft who kindly agreed to be interviewed: Temi, Laura, Léonie, Adekunle, Rifa, and Elaine.
The Clearleft podcast will take a little break now and so will I. But I’m already thinking about topics for the next season. I feel like I’m starting to get a feel for what’s working so you can another six-episode season down the line.
I didn’t interview anyone specifically for this episode. Instead, whenever I was chatting to someone about some other topic—design systems, prototyping, or whatever—I’d wrap up by asking them to describe their surroundings and ask them how they were adjusting to life at home. After two season’s worth of interviews, I had a decent library of responses. So this episode includes voices you last heard from back in season one: Paul, Charlotte, Amy, and Aarron.
Then the episode shifts. I’ve got excerpts from a panel discussion we held a while back on the future of work. These panel discussions used to happen up in London, but this one was, obviously, online. It’s got a terrific line-up: Jean, Holly, Emma, and Lola, all dialing in from different countries and all sharing their stories openly and honestly. (Fun fact: I first met Lola three years ago at the Pixel Up conference in South Africa and on this day in 2018 we were out on Safari together.)
I’m happy with how this episode turned out. It’s a fitting finish to the season. It’s just seventeen and a half minutes long so take a little time out of your day to have a listen.
As always, if you like what you hear, please spread the word.
This might be my favourite episode so far. That might be because I’m not in it very much at all. I’ve kept my editorialising to a minimum to focus on the important voices.
Margaret Lee tells a powerful personal story from her talk at Leading Design in New York two years ago, Insights from a Reluctant Leader.
From the same event, there’s Farai Madzima talking about Cultural bias in design(ers). If you’ve seen Farai speak, then you know how engaging he is. This segment also gave me the opportunity to splice in some music. That was a fun technical challenge.
I also talked to Rifa. As well as getting her story for the podcast, it was just really great to catch up with her again. It’s been far too long.
The mission is to make workplaces fairer, happier and more productive. Through bespoke workshops, coaching and consultancy services; we support organisations to make sustainable changes that are relevant for today’s societal and business needs.
It was a real pleasure to take these four fantastic voices and put them together into one narrative thread. I have to say, I’m really pleased with the end result. I hope you’ll give it a listen. It’s 23 minutes long.
And please share this episode if you think it deserves a wider hearing.
The Right Number is a gentle, noncommercial space where your only job is to be yourself. Upon dialing you’ll be connected to a voicemail box and given a brief prompt. You have three minutes to answer however you’d like.
There’s a bit of a narrative thread in there about airplanes, kicked off by a great story Benjamin tells about testing a physical prototype …of the inside of a transatlantic airliner. Lorenzo recounts his story of mocking up a fake CMS with readily-available tools. And Trys tells of a progressive web app he whipped up for our friends at Suffolk Libraries. There’s even a bit about Hack Farm in there too.
But just to make sure it isn’t too much of a Clearleft love-in, I also interviewed an outside expert: Adekunle Oduye. It was very kind of him to give up his time, especially considering he had just moved house …in a pandemic!
There are some great words of wisdom, immortalised in the transcript:
Prototypical code isn’t production code. It’s quick and it’s often a little bit dirty and it’s not really fit for purpose in that final deliverable. But it’s also there to be inspiring and to gather a team and show that something is possible.
If you’re building something and you’re not really sure if it’s a right solution, use the word prototype versus design, because I feel like when people say design, that’s like the end result.
I always think of a prototype as a prop. It’s something to look at, something to prod. And ideally you’re trying to work out what works and what doesn’t.
If you like what you hear, please spread the word. Tell your Slack colleagues, your Twitter friends, your LinkedIn acquaintances. And if you’re not already subscribed, you can remedy that on Apple Podcasts, Google Podcasts, Spotify, Overcast and anywhere that accepts RSS.
The latest episode is on a topic close to my heart: accessibility. But I get out of the way early on and let much smarter folks do the talking. In this case, it’s a power trio of Laura, Cassie, and Léonie. It even features a screen-reader demo by Léonie.
I edited the episode pretty tightly so it comes in at just under 15 minutes. I’m sure you can find 15 minutes of your busy day to set aside for a listen.
This topic came out of conversations with Katie. She really enjoys getting stuck into to the design challenges of the “backstage” tools that are often neglected. This is an area that Chris has been working in recently too, so I quized him on this topic.
They’re both super smart people which makes for a thoroughly enjoyable podcast episode. I usually have more guests on a single episode but it was fun to do a two-hander for once.
The whole thing comes in at just under seventeen minutes and there are some great stories and ideas in there. Have a listen.
And if you’re enjoying listening to the Clearleft podcast as much as I’m enjoying making it, be sure to spread the word wherever you share your recommnedations: Twitter, LinkedIn, Slack, your own website, the rooftop.
What rough beast, its hour come round at last, slouches towards your podcast player of choice to be reborn?
Why it’s season two of the Clearleft podcast!
Yes, it’s that time again when you can treat your earholes to six episodes of condensed discussion on design-related topics at a rate of one episode per week.
The first episode of season two is all about design leadership. This was a lot of fun to put together. I was able to mine the rich seam of talks from the past few years of Leading Design conferences. I found some great soundbites from Jane Austin and Hannah Donovan. I was also able to include the audio from a roundtable discussion at Clearleft. These debates are a regular occurrence at the UX laundromat, where we share what we’re working on. I should record them more often. There was some quality ranting from Jon, Andy, and Chris.
I think you’ll enjoy this episode if you are:
Actually, the lessons here probably apply regardless of your field. Engineers and lead developers will probably relate to the quandaries raised.
The whole thing clocks in at just over 21 minutes.
If you’re not already subscribed to the podcast, you might want to pop the RSS feed into your podcast player.
I went to art college in my younger days. It didn’t take. I wasn’t very good and I didn’t work hard. So I dropped out before they could kick me out.
But I remember one instance where I actually ended up putting in more work than my fellow students—an exceptional situation.
In the first year of art college, we did a foundation course. That’s when you try a bit of everything to help you figure out what you want to concentrate on: painting, sculpture, ceramics, printing, photography, and so on. It was a bit of a whirlwind, which was generally a good thing. If you realised you really didn’t like a subject, you didn’t have to stick it out for long.
One of those subjects was animation—a relatively recent addition to the roster. On the first day, the tutor gave everyone a pack of typing paper: 500 sheets of A4. We were told to use them to make a piece of animation. Put something on the first piece of paper. Take a picture. Now put something slightly different on the second piece of paper. Take a picture of that. Repeat another 498 times. At 24 frames a second, the result would be just over 20 seconds of animation. No computers, no mobile phones. Everything by hand. It was so tedious.
And I loved it. I ended up asking for more paper.
(Actually, this was another reason why I ended up dropping out. I really, really enjoyed animation but I wasn’t able to major in it—I could only take it as a minor.)
I remember getting totally absorbed in the production. It was the perfect mix of tedium and creativity. My mind was simultaneously occupied and wandering free.
Recently I’ve been re-experiencing that same feeling. This time, it’s not in the world of visuals, but of audio. I’m working on season two of the Clearleft podcast.
For both seasons and episodes, this is what the process looks like:
Lots of podcasts (that I really enjoy) stop at step two: record a conversation and then release it verbatim. Job done.
Being a glutton for punishment, I wanted to do more of an amalgamation for each episode, weaving multiple conversations together.
Right now I’m in step three. That’s where I’ve found the same sweet spot that I had back in my art college days. It’s somewhat mindless work, snipping audio waveforms and adjusting volume levels. At the same time, there’s the creativity of putting those audio snippets into a logical order. I find myself getting into the zone, losing track of time. It’s the same kind of flow state you get from just the right level of coding or design work. Normally this kind of work lends itself to having some background music, but that’s not an option with podcast editing. I’ve got my headphones on, but my ears are busy.
I imagine that is what life is like for an audio engineer or producer.
When I first started the Clearleft podcast, I thought I would need to use GarageBand for this work, arranging multiple tracks on a timeline. Then I discovered Descript. It’s been an enormous time-saver. It’s like having GarageBand and a text editor merged into one. I can see the narrative flow as a text document, as well as looking at the accompanying waveforms.
Descript isn’t perfect. The transcription accuracy is good enough to allow me to search through my corpus of material, but it’s not accurate enough to publish as is. Still, it gives me some nice shortcuts. I can elimate ums and ahs in one stroke, or shorten any gaps that are too long.
But even with all those conveniences, this is still time-consuming work. If I spend three or four hours with my head down sculpting some audio and I get anything close to five minutes worth of usable content, I consider it time well spent.
Sometimes when I’m knee-deep in a piece of audio, trimming and arranging it just so to make a sentence flow just right, there’s a voice in the back of my head that says, “You know that no one is ever going to notice any of this, don’t you?” I try to ignore that voice. I mean, I know the voice is right, but I still think it’s worth doing all this fine tuning. Even if nobody else knows, I’ll have the satisfaction of transforming the raw audio into something a bit more polished.
Yes, I’m being a little vague on the exact dates. That’s because I’m still in the process of putting the episodes together.
So if you’ll excuse me, I need to put my headphones on and enter the zone.
Remember when I wrote about Web Audio weirdness on iOS? Well, this is a nice little library that wraps up the same hacky solution that I ended up using.
It’s always gratifying when something you do—especially something that feels so hacky—turns out to be independently invented elsewhere.
I told you about how I’m using the Web Audio API on The Session to generate synthesised audio of each tune setting. I also said:
Except for some weirdness on iOS that I had to fix.
Here’s that weirdness…
Let me start by saying that this isn’t anything to do with requiring a user interaction (the Web Audio API insists on some kind of user interaction to prevent developers from having auto-playing sound on websites). All of my code related to the Web Audio API is inside a
click event handler. This is a different kind of weirdness.
First of all, I noticed that if you pressed play on the audio player when your iOS device is on mute, then you don’t hear any audio. Seems logical, right? Except if using the same device, still set to mute, you press play on a
audio element, the sound plays just fine. You can confirm this by going to Huffduffer and pressing play on any of the
audio elements there, even when your iOS device is set on mute.
So it seems that iOS has different criteria for the Web Audio API than it does for
video. Except it isn’t quite that straightforward.
On some pages of The Session, as well as the audio player for tunes (using the Web Audio API) there are also embedded YouTube videos (using the
video element). Press play on the audio player; no sound. Press play on the YouTube video; you get sound. Now go back to the audio player and suddenly you do get sound!
It’s almost like playing a
audio element “kicks” the browser into realising it should be playing the sound from the Web Audio API too.
This was happening on iOS devices set to mute, but I was also getting reports of it happening on devices with the sound on. But it’s that annoyingly intermittent kind of bug that’s really hard to reproduce consistently. Sometimes the sound doesn’t play. Sometimes it does.
Following my theory that the browser needs a “kick” to get into the right frame of mind for the Web Audio API, I resorted to a messy little hack.
var audio = new Audio('1-second-of-silence.mp3'); audio.play();
I’m not proud of that. It’s so hacky that I’ve even wrapped the code in some user-agent sniffing on the server, and I never do user-agent sniffing!
Still, if you ever find yourself getting weird but inconsistent behaviour on iOS using the Web Audio API, this nasty little hack could help.
I spent the last couple of weekends rolling out a new feature on The Session. It involves playing audio in a web page. No big deal these days, right? But the history involves some old file formats…
The first venerable format is ABC notation. File extension:
.abc, mime type:
text/vnd.abc. It’s an ingenious text format for musical notation using ASCII. The metadata of the piece of music is defined in JSON-like key/value pairs. Then the contents are encoded with letters: A, B, C, etc. Uppercase and lowercase denote different octaves. Numbers can be used for note lengths.
The format was created by Chris Walshaw in 1997 when dial-up was the norm. With ABC, people were able to swap tunes on email lists or bulletin boards without transferring weighty image or sound files. If you had ABC software on your computer, you could convert that lightweight text file into sheet music …or audio.
That brings me to the second old format: midi files. File extension:
audio/midi. Like ABC, it’s a lightweight format for encoding the instructions for music instead of the music itself.
Think of it like SVG: instead of storing the final pixels of an image, SVG stores the instructions for drawing the image instead. The instructions in a midi file are like “play this note for this long on this instrument.” Again, as with ABC, you need some software to turn the instructions into sound.
There was a time when lots of software could play midi files. Quicktime on the Mac, for example. You could even embed midi files in web pages. I mean literally embed them …with the
embed element. No Geocities page was complete without an autoplaying midi file.
But times have changed. These days it’s hard to find software that plays midi files. Quicktime doesn’t do it anymore. And you’d need to go to the app store on iOS to find a midi file player. It’s time to phase out the midi files on The Session.
I still want to provide automatically-generated audio though. Fortunately ABCJS gives me a way to do this. But instead of using the old technology of midi files, it uses a more modern browser feature: the Web Audio API.
Not only is there a separate short mp3 file for each note in seven octaves, but if you want the sound of a different instrument, you need samples for all seven octaves in that instrument. They’re called soundfonts.
The reason why Benjamin has a repo of soundfonts is because he needed to create midi-like audio in the browser. He wanted to do this for a project on September 28th and 29th, 2013 …at Science Hack Day San Francisco!
I was there too—working on my own audio-related hack—and I remember the excellent (and winning) hack that Benjamin worked on. It was called Symphony of Satellites and it’s still online along with the promo video. Here’s Benjamin’s post-hackday write-up from seven years ago.
It’s rare that the worlds of the web and Irish music cross over. When I got to meet Paul—creator of ABCJS—at a web conference a couple of years ago it kind of blew my mind. Last weekend when I set out to dabble with a feature on The Session, I certainly didn’t expect to stumble on a connection to Science Hack Day! (Aside: the first Science Hack Day was ten years ago—yowzers!)
Anyway, I was able to get that audio playback working on The Session. Except for some weirdness on iOS that I had to fix. But that’s a hack for another day.
I somehow missed this post from last year by Karin Taliga on different ways of using Huffduffer:
- As an Instapaper but for audio
- Listen to own recordings in a podcast player
- Create a podcast feed from youtube videos
- Gather your podcast guest appearances in one place
- Share a custom curated playlist
- Share supplemental material to an online course you have
James made a radio programme about “the cloud”:
It’s the central metaphor of the internet - ethereal and benign, a fluffy icon on screens and smartphones, the digital cloud has become so naturalised in our everyday life we look right through it. But clouds can also obscure and conceal – what is it hiding? Author and technologist James Bridle navigates the history and politics of the cloud, explores the power of its metaphor and guides us back down to earth.
Recently Jay started publishing essays on web history over on CSS Tricks:
Round about that time, Chris floated the idea of having people record themselves reading blog posts. I immediately volunteered my services for the web history essays.
So now you can listen to me reading Jay’s words:
Each chapter is round about half an hour long so that’s a solid two hours or so of me yapping.
And if you just can’t get enough of my voice, there’s always the Clearleft podcast …although that’s mostly other people talking, thank goodness.