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.
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.
Seeing as my personal brand could be summed up “so late to the game that the stadium has been demolished”, I decided to start a podcast in 2020. It’s the podcast of my agency, Clearleft, and it has been given the soaringly imaginative title of The Clearleft Podcast. I’m really pleased with how the first season turned out. I’m also really pleased with the website I put together for it.
The website isn’t very big, though it will grow with time. I had a think about what the build process for the site should be and after literally seconds of debate, I settled on a build process of none. Zero. Nada.
This turned out to be enormously liberating. It felt very hands-on to write the actual HTML and CSS that will be delivered to end users, without any mediation. I felt like I was getting my hands into the soil of the site.
CSS has evolved so much in recent years—with features like
Don’t get me wrong—I totally understand why complicated pipelines are necessary for complicated websites. If you’re part of a large team, you probably need to have processes in place so that everyone can contribute to the codebase in a consistent way. The more complex that codebase is, the more technology you need to help you automate your work and catch errors before they go live.
But that set-up isn’t appropriate for every website. And all those tools and processes that are supposed to save time sometimes end up wasting time further down the road. Ever had to revisit a project after, say, six or twelve months? Maybe you just want to make one little change to the CSS. But you can’t because a dependency is broken. So you try to update it. But it relies on a different version of Node. Before you know it, you’re Bryan Cranston changing a light bulb. You should be tweaking one line of CSS but instead you’re battling entropy.
Whenever I’m tackling a problem in front-end development, I like to apply the principle of least power: choose the least powerful language suitable for a given purpose. A classic example would be using a simple HTML
button element instead of trying to recreate all the native functionality of a button using a
Instead of reaching for all-singing all-dancing toolchain by default, I’m going to start with a boring baseline. If and when that becomes too painful or unwieldy, then I’ll throw in a task manager. But every time I add a dependency, I’ll be limiting the lifespan of the project.
My new year’s resolution for 2021 will be to go on a diet. No more weighty
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
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.
Making the Clearleft podcast is a lot of fun. Making the website for the Clearleft podcast was also fun.
Design wise, it’s a riff on the main Clearleft site in terms of typography and general layout. On the development side, it was an opportunity to try out an exciting tech stack. The workflow goes something like this:
Comparing this to other workflows I’ve used in the past, this is definitely the most productive way of working. Some stats:
I have some files. Some images, three font files, a few pages of HTML, one RSS feed, one style sheet, and one minimal service worker script. I don’t need a web server to do anything more than serve up those files. No need for any dynamic server-side processing.
Netlify suits my hosting needs nicely. It also provides the added benefit that, should I need to update my CSS, I don’t need to add a query string or anything to the
link elements in the HTML that point to the style sheet: Netlify does cache invalidation for you!
The mp3 files of the actual podcast episodes are stored on S3. I link to those mp3 files from
enclosure elements in the RSS feed, which is what makes it a podcast. I also point to the mp3 files from
audio elements on the individual episode pages—just above the transcript of each episode. Here’s the page for the most recent episode.
I also want people to be able to download the mp3 file directly if they want (or if they want to huffduff an episode). So I provide a link to the mp3 file with a good ol’-fashioned
a element with an
I throw in one more attribute on that link. The
download attribute tells the browser that the URL in the
href attribute should be downloaded instead of visited. If you give a value for the
download attribute, it will over-ride the file name:
<a href="/files/ugly-file-name.xyz" download="nice-file-name.xyz">download</a>
Or you can use it as a Boolean attribute without any value if you’re happy with the file name:
<a href="/files/nice-file-name.xyz" download>download</a>
There’s one catch though. The
download attribute only works for files on the same origin. That’s an issue for me. My site is
podcast.clearleft.com but my audio files are hosted on
download attribute will be ignored and the mp3 files will play in the browser instead of downloading.
I added a file called
_redirects to the root of my project. It contains one line:
/download/* https://clearleft-audio.s3.amazonaws.com/podcast/:splat 200
That says that any URLs beginning with
/download/ should redirect to
clearleft-audio.s3.amazonaws.com/podcast/. Everything after the closing slash is captured with that wild card asterisk. That’s then passed along to the redirect URL as
:splat. That’s a new one on me. I hadn’t come across that terminology, but as someone who can never remember the syntax of regular expressions, it works for me.
Oh, and the
200at the end is the status code: okay.
Now I can use this
/download/ path in my link:
<a href="/download/season01episode06.mp3" download>Download mp3</a>
Because this URL on the same origin, the
download attribute works just fine.
Now this is the kind of response I was hoping to stir up with the first season of the Clearleft podcast!
With echos of design’s subjugation reverberating across all six episodes, this first season inadvertently told the story of how my profession has been captured by a desire to serve business interests above all others, while being disarmed by its tendency for introspection and need to be recognised.
Can digital design redeem itself? I hope so. Maybe in the next season of the Clearleft podcast, we’ll find out how.
The Clearleft Podcast has finished its inaugural season.
I have to say, I’m pretty darned pleased with the results. It was equal parts fun and hard work.
Design Systems. This was a deliberately brief episode that just skims the surface of all that design systems have to offer. It is almost certainly a theme that I’ll revisit in a later episode, or even a whole season.
The main goal of this episode was to get some answers to the questions:
I’m not sure if I got answers or just more questions, but that’s no bad thing.
Service Design. This is the classic topic for this season—an investigation into a phrase that you’ve almost certainly heard of, but might not understand completely. Or maybe that’s just me. In any case, I think that coming at this topic from a viewpoint of relative ignorance is quite a benefit: I have no fear of looking stupid for asking basic questions.
Wildlife Photographer Of The Year. A case study. This one was a lot of fun to put together.
Design Ops. Again, a classic example of me asking the dumb questions. What is this “design ops” thing I’ve heard of? Where’d it come from?
My favourite bit of feedback was “Thanks to the podcast, I now know what DesignOps is. I now also hate DesignOps”
I couldn’t resist upping the ante into a bit of a meta-discussion about whether we benefit or not from the introduction of new phrases like this into our work.
Design Maturity. This could’ve been quite a dry topic but I think that Aarron made it really engaging. Maybe the samples from Bladerunner and Thunderbirds helped too.
This episode finished with a call to action …with the wrong URL. Doh! It should’ve been surveymonkey.co.uk/r/designmaturity
Design Sprints. I like how the structure of this one turned out. I felt like we tackled quite a few angles in less than 25 minutes.
That’s a good one to wrap up this season, I reckon.
If you’re interested in the behind-the-scenes work that went into each episode, I’ve been blogging about each one:
I’m already excited about doing a second season …though I’m going to enjoy a little break from podcasting for a little bit.
As I say at the end of most episodes, if you’ve got any feedback to offer on the podcast, send me an email at email@example.com
And if you’ve enjoyed the Clearleft podcast—or a particular episode—please share it far and wide.
It comes in at just under 24 minutes, which feels just about right to me. Once again, it’s a dive into one topic that asks “What is this?”, “What does this mean?”, and “Where did this come from?”
I also asked ex-Clearleftie Jerlyn to have a chat. You’ll notice that’s been a bit of theme on the Clearleft podcast; asking people who used to work at Clearleft to share their thoughts. I’d quite like to do at least an episode—maybe even a whole season—featuring ex-Clearlefties exclusively. So many great people have worked at the agency of the years, Jerlyn being a prime example.
I’d also like to do an episode some time with the regular contractors we’ve worked with at Clearleft. On this episode, I asked the super-smart Tom Prior to join me.
I recorded those three chats over the past couple of weeks. And it was kind of funny how there was, of course, a looming presence over the topic of design sprints: Jake Knapp. I had sent him an email too but I got an auto-responder saying that he was super busy and would take a while to respond. So I kind of mentally wrote it off.
I spent last week assembling and editing the podcast with the excellent contributions from Jerlyn, Chris, and Tom. But it did feel a bit like Waiting For Godot the way that Jake’s book was being constantly referenced.
Then, on the weekend, Godot showed up.
Jake said he’d have time for a chat on Wednesday. Aargh! That’s the release date for the podcast! I don’t suppose Monday would work?
Very graciously, Jake agreed to a Monday chat (at an ungodly early hour in his time zone). I got an excellent half hour of material straight from the horse’s mouth—a very excitable and fast-talking horse, too.
That left me with just a day to work the material into the episode! I felt like a journalist banging on the keyboard at midnight, ready to run into the printing room shouting “Stop the press!” …although I’m sure the truth is that nobody but me would notice if an episode were released a little late.
Anyway, it all got done in the end and I think it turned out pretty great!
Have a listen for yourself and see what you make of it.
This was the final episode of the first season. I’ll now take a little break from podcasting as I plot and plan for the next season. Watch this space! …and, y’know, subscribe to the podcast.