This week I got to speak with Lee Martin! Lee is a fascinating fella, due in part to him having a job I think we all want: designing weird cool digital experiences for good bands. Fortunately for us, he often writes about them. Just check out the Inter Dimensional Video Player for Lord Huron, for example, or Using Three.js to Hear the Dawn with Jack White. Keep up with Lee on Instagram, Twitter, or his personal site. He’s overflowing with ideas, not just doing all the freelancing but taking some of those ideas and scaling them, like he’s doing with Turn, Mock, and Listening Party. We got a chance to talk about a handful of Lee’s favorite Pens, but there are more in the Collection he made.
Time Jumps
- 00:26 Guest introduction
- 01:35 How do you get to build websites for a band?
- 06:46 It’s more than just an about page for bands
- 10:57 Unlocking an album based on viewers closing their eyes
- 14:16 Never repeat a client idea
- 16:58 Mechanics vs Concepts
- 19:45 Sponsor: Whiskey Web and Whatnot
- 21:01 Banksy Pen
- 23:49 turn.audio
- 27:18 Is the music industry web or native app focused?
- 32:48 Card matching game for Florence and the Machine
Sponsor: Whiskey Web and Whatnot
Whiskey Web and Whatnot is different than your typical dev podcast. We show a lighter, more human side of developers you know and love, like a fireside chat with your favorite devs. Past guests include Tom Preston-Werner, Kent C. Dodds, Charlie Gerard, Wes Bos, and the incomparable Chris Coyier! We have discussed everything from Next.js and TypeScript to Chuck’s past life as a blackjack dealer, favorite power tools, the best casseroles, and of course whiskey!
Transcript
[Radio channel adjustment]
Announcer: Today, on CodePen Radio.
Chris Coyier: Hello, everybody. CodePen Radio #378. I have an incredibly special guest on who I've never met and I'm looking so much forward to get to talking to. He basically has the coolest job in the world. Lee Martin, what's up, man? Thanks for coming on the show.
Lee Martin: Nothing much, man. You caught me at a pretty rare time.
Chris: Yeah?
Lee: I'm actually on a break right now.
Chris: Oh...
Lee: Kicking off a nine-week break.
Chris: Nine weeks, that's wonderful.
Lee: Yeah, I just can't wait to not be doing work. I know we're about to talk about work, but--
[Laughter]
Chris: Yeah.
Lee: It's just sort of a necessity. Need to certainly recharge creatively, and I'm looking forward to it.
Chris: Has that worked for you in the past, that if I'd just unplug for a hot minute, I can get some juice back?
Lee: Yeah, certainly. I mean we're going to talk about it, but I mean a lot of these concepts that I'm building in music are experimental, creative, technical concepts. They don't come from nowhere.
Chris: Yeah.
Lee: They come from space, the ability to think, the ability to explore new technologies.
Chris: Right.
Lee: ...the conversations with clients, so it is certainly. It's better than just jumping from one project to another where you literally have no space to think, which is my usual.
Chris: Yeah, right, because maybe if you did that, you'd - I don't know - be repetitive or boring in what you're doing. I don't know. Not to put words in your mouth, but you said music, and that's clutch for people to realize, I think. That's the kind of work you do. I believe you're "not just" but you're freelancing at the moment despite having worked for many music-related companies, right?
Lee: That's right.
Chris: That's right. But music, I think there are a lot of people that it'd be their damn dream job to get to build a website for a band, and not your local band but big, good bands. That is not something that a lot of people get a chance to do, and you've done it over and over. Tell me. How do you get to build a website for big, good bands?
Lee: Yeah. I mean it happened a long time ago.
Chris: Yeah.
Lee: I actually built a fan site for a band called The Mars Volta.
Chris: Mm-hmm.
Lee: This was back when we were all on message boards (about 20 years ago), and I couldn't afford to keep it running. It kept getting bigger, and the cost of running the forum was actually quite expensive, so the band manager actually got in touch with me and was like, "The band would like to make a donation to help you keep your forum up." That forum was called The Comatorium.
I was like, "Cool," and she was like, "Also, do you want to help us do some stuff?" About a month or two later, she was like, "Hey, your website is better than our website. Do you want to just build our website?"
Chris: [Laughter]
Lee: So, that band was The Mars Volta. They were on Universal Records, and I remember still being in high school, and I would get calls from New York from Universal Records. I'm from Louisiana.
Chris: Mm-hmm.
Lee: And my mom would still scream for me, like across the house, like, "Lee, somebody is on the phone for you!"
Chris: Yeah.
Lee: And I'd be like, "Mom, check the caller ID. If it's from New York, like, I'm running a business here."
Chris: You're like, "It's Don Draper."
Lee: Yeah, so it was -- that was my way in, and I can tell you that that manager, The Mars Volta's manager at the time, this woman, Kristen Welsh--
Chris: Mm-hmm.
Lee: --I talked to her last week.
Chris: Wow. She's been influential in your career.
Lee: Yeah, my relationships that I've built in this career are very important, very meaningful. But basically, that was the way in. You know it's freelancing 101. You do one good thing for one client; you're able to talk about it, which hopefully, leads to another client.
Chris: Yep.
Lee: You do another good thing for them, and you just keep branching. The people that I've worked for -- when I say work for, I mean the digital managers, the labels, the actual people on the ground. Less so the artists themselves.
Chris: Okay.
Lee: The people who are giving me the work, they -- whereas I am still trying to be the same youthful, creative freelancer I've always been, these people that I work with, they are music business people first and foremost. They have climbed a ladder of sorts, and the artists that they were maybe giving me at the beginning are much bigger now. Right? [Laughter]
Chris: Okay. Yeah.
Lee: But they're still asking me for the same thing, just at a different scope. I'd like to think my abilities have become a little bit better too, but that's basically how I'm doing it. The same sort of people who are interested in what I do are hiring me of the same type of work. The names and the artists, they do change. They do get bigger (or smaller). It doesn't matter to me. But that's basically it. It's part of that loop.
Chris: Yeah. That makes sense. Right? I don't know. It's not like the people that do music have intimate knowledge of every Web person in the world. They know that you've done good work, so they need the same type of work again. You call the same person.
If I need a second roof done on a second house, I'm going to call the guy who did a good job on my first roof.
Lee: Pretty much. We become comfortable with the people we know. In the music business, if you think about how much personnel is actually connected to music--
Chris: Yeah.
Lee: --roadies, tour managers, band managers, engineers -- it's very much an industry built upon respect and who gets the job done. And since one of my first jobs was working within a management company, I sort of learned that inner workings in that respect-based business.
Chris: Yeah.
Lee: You do well by someone. You don't screw them over. And hopefully, you get more work because of it.
I love my collaborations, too. I love working for the artists, but I really love working for the people who are attached to it who want to explore the concepts with me, who are keen to use technology in interesting ways.
Chris: Yeah, that's cool. We should get into that because it's one thing to--
It's notable to me that the first band website you did, this one for The Mars Volta, wasn't just like - I don't know - a really cool looking About page for the band. That it had interactive features to begin with, which drew people in and had them talking about the band. It was forums.
Immediately, like the first one you ever did had community aspects to it and probably was -- I mean that was a long time ago, right?
Lee: Yes.
Chris: Even the idea of forums was - I don't know. I don't know how new forums are to the Web, but it's not as easy as today where you'd just be like - I don't know - "Sign up for the Discord," or whatever.
Lee: It was certainly before the social revolution, right? [Laughter]
Chris: Yeah.
Lee: I was there for all of that.
Chris: But now a band needs--
It's not like they want an About page now either. The type of stuff, it seems to me, that you work on-
I'd love to almost see more of your portfolio pieces or whatever, but they're not just like - I don't know - "We're a new band, so here's Jimmy. He's from Texas on the drums." That's boring. That's not what people want out of websites anymore.
"We're about to launch a digital experience," or something, so you do crazy stuff like these listening parties. Tell me about it. What do these bands want?
Lee: To piggyback on what you were saying, I've actually turned down band websites for ten years now.
Chris: Hmm.
Lee: Because people do come to me for, "Hey, we've got a news section. We've got a tour section, discography."
Chris: Yeah.
Lee: I'm like, "Yeah, I don't actually do that. I almost find that that type of work is harder than what I do." [Laughter]
What I do is creative experiences, digital experiences that use interesting Web mechanics that are supposed to live in synergy with a business goal and likely an artistic goal, pneumatics of the record, things like that.
Chris: Okay. Yeah. I saw one where it was like, "Here's a new record about to drop, and you can listen to it online, but only if enough people in your geographic region have unlocked this ability to do that."
Lee: Exactly.
Chris: That's very interesting. It's very webby. It's very business-y. It's very interesting. Yeah.
Lee: Exactly. That was for Future Islands. I loved building that. A lot of my work recently has been a little bit more of a product methodology built into them, right? This is what happens.
When I'm not working for myself and I go work for these companies, like SoundCloud and Songkick, they're almost like educational moments for me because I didn't go to school for any of this stuff. [Laughter] That type of project very much came from my time at Songkick. I read a lot of books about product design and stuff like that.
This was very simply, like, "We want to do a listening event around the new record. They haven't heard the music yet. How do we engage people around this?"
Chris: Mm-hmm.
Lee: There was this idea for simply putting an audio stream that synced for all listeners next to a chatroom. It couldn't be more basic in terms of technology. Then there was this need to make it geographically significant somehow, or kind of figuring out an unlock mechanism that forced them to do something.
In that case it was, if I logged into the application, it would say you were in Louisiana. You need to invite 100 people from Louisiana into this chatroom in order to hear the record.
Chris: Hmm.
Lee: I actually used wiki data to try and figure out a good dynamic threshold for every geographical location, so we really went way far for this.
Chris: [Laughter] Like New York, probably hundreds of people.
Lee: Exactly.
Chris: But if there's a fan in Antarctica, that's an auto-unlock, I would hope.
Lee: Exactly.
Chris: [Laughter]
Lee: We didn't want to lock people out. We want to lock people in. Of course, we had manual controls, so we let people in.
I consider that project a little bit more straightforward, though it was certainly creative and interesting. A lot of people know me for an early idea where I built a website where the only way to listen to a song was to close your eyes.
Chris: Wow!
Lee: This was one of these early, like, open CV (computer vision) concepts, right? Before it was really possible to do this stuff. How easy it is, to this day, people are still asking me about that particular concept.
Chris: That was a big one for you? Okay.
Lee: If I would redo it.
Chris: Yeah.
Lee: I actually never wanted to associate it with an artist. I wanted it to be sort of like this open-source, experimental concept that anyone could use. But one artist actually kind of backed me in a corner about it, and I let them use it one time.
But I would say there's a good balance between just practical stuff like, "Oh, you want to do Spotify-based playlist generation built around a theme. We can build the interface for that. Piggyback off the Spotify platform."
Then there's also artists who come to me like, "What's the wildest thing in your head right now?"
Chris: Whoa. Really? That's funny.
Lee: I'll be like, "Well, I've had this concept for a while where we have a piece of content that the users want, like a new audio file."
Chris: Yep.
Lee: "Wouldn't it be interesting if there was this keyhole experience where you had to allow access to your webcam and also allow access to a stranger to watch you while you consume the content, almost like you were peering through a keyhole."
So, you actually get paired up with a stranger, and you can actually look at another stranger. [Laughter] No one knows who they're looking at because you're always looking at someone different.
Chris: It just makes me think there are going to be a lot of penises. You know? Isn't that how--?
Lee: There actually wasn't as many as you imagine.
Chris: [Laughter] No? That's good.
Lee: Surprisingly. I think, because the fact that you were paired up with a stranger versus paired up with a person you were seeing, made a little bit of a difference.
Chris: It's a niche, right? You had to also like the band, right?
Lee: That's right. Yeah.
Chris: Right. Yeah.
Lee: I mean it was a bunch of dudes. It was a metal band who ended up going for it. But the name of their record was Voyeurist.
Chris: Oh! There you go.
Lee: I'll sit on a mechanic for years. [Laughter]
Chris: It just worked out. That was in your head, and then it just so happened to have the perfect band with the perfect album name.
Lee: Yes.
Chris: Oh, that's amazing.
Lee: And this is what I'm talking about in terms of free time. I need to find another mechanic like that. I need to think about these mechanics have sort of a bag of tricks--
Chris: Yeah.
Lee: --because I'm going to have a conversation with a client in the future, and I want them to say something that matches up with one or two of those things.
Chris: Oh...
Lee: So, I could be like, "I have this stuff. You just said the word voyeurist. Well, I have an idea," and I'll pitch it because I'm a salesman.
Chris: Yeah.
Lee: I'll be like, "I have an idea that people have passed on for years now." You know?
Chris: Oh, that's great.
Lee: "If you want to do it, if you're crazy enough, if you're not afraid of penises, we should do this thing."
Chris: [Laughter]
Lee: They'll be like, "Yes, Lee. Absolutely, let's do it."
Chris: That's wild because you're such a businessman in that regard but then such an artist, almost an anti-businessman in other regards because you'd think if then another band wanted it, you'd be like, "Oh, we already built that. This is going to be fricken' easy. I'm going to sell that to him for--"
Lee: 1000%, I never ever do that.
Chris: [Laughter] Never?
Lee: I actually wrote an article. We can share it as part of the post blog for this, but it's basically called "To Remix or Not to Remix."
Chris: Oh...
Lee: I do get asked a lot about previous concepts. But again, as I talked about, when I'm going from one project to another, I'm not leaving very much room for experimentation. So, it's a necessity of my work that every single project that I take on has at least one thing I haven't done before, so I can force myself to learn.
Chris: Doesn't that make you nervous? Do you like that feeling? [Laughter]
Lee: [Laughter] I like that it works out 99.9% of the time.
Chris: [Laughter] Yeah.
Lee: I don't propose a lot.
Chris: Okay.
Lee: Most of my projects go from concept to execution in two to three weeks.
Chris: Whoa!
Lee: I will have worked out most of the stuff before I ask for it, but there have been cases where I've promised something that we just couldn't quite do.
Chris: Yeah, right, or that its API driven and that company just doesn't have that API or won't give it to you in a timely manner. That could derail the whole thing.
Lee: That's one thing, especially if you think back to the voyeurist concept. That is a Twilio-powered concept. I had a preexisting relationship with Twilio based on other ideas.
Chris: Nice.
Lee: So, I do try and lay the groundwork for those types of relationships (early if I can). If we think more abstractly about all of this stuff, especially with a community like CodePen, there are just so many creative people on the Web, so many creative concepts, so many creative ideas, what I found that my particular industry gives me is sort of a hack to eyeballs, right?
I really want to make a Pen-like experience, a fun mechanic, but I get to associate it with these artists who have lots of fans, and like a product designer, put it to test.
Chris: Okay.
Lee: And then I can absorb the insights from it, like how well did this keyhole concept actually work, and sort of snowball that into my own understandings and learnings.
Chris: Yeah. Yeah. Maybe that should make its way into the remix idea, too, because it does seem like if you--
Because you care about the metrics. You just said so. You're like, I want to know if it was a good idea or not. Isn't there higher chances of success if you do it a second time and can incorporate some of this?
Lee: Well, no, no, no.
Chris: I'm not trying to convince you, you should do the same crap all the time.
Lee: No, I understand.
Chris: [Laughter]
Lee: I think there are mechanics and there are concepts. Something like the keyhole, I consider that a concept. I'm not trying to build keyholes for the rest of my life.
Chris: Yeah.
Lee: But the mechanics of using Twilio video--
Chris: Ah, I see. That's reusable.
Lee: --for Web-based communications like we're currently doing, that's such a fascinating mechanic. And they're really known user experiences, right? Communicating over camera, we do it with Facetime. Somehow, we're doing it right now to record this podcast in a browser.
Chris: Yeah.
Lee: To me, that is power. There's power in users already understanding the way something is going to work but twisting it in a manner that they're not used to or dangling a piece of content that they're trying to get to.
Chris: Right.
Lee: So, I don't want the user to be confused by the interface but, at the same time, I do want them to be surprised by it.
Chris: I saw one the other day. It was -- [Laughter] It reminds me of you. I wonder if it was you. Weezer had a record, and you had to grab your phone and spin your own self like a record in order to listen to it.
Lee: No, but I love that.
Lee: It seems like a Lee Martin idea.
Lee: I didn't do it.
Chris: [Laughter]
Lee: Now I'm frustrated.
Chris: [Laughter]
Lee: Yeah.
Chris: Sorry.
Lee: There's a lot of this stuff happening - for sure. There are a lot of really great people focusing on this niche. It typically is more like agencies that the artists will hire to get it done, less individuals. There were more individuals kind of earlier in my career, I found.
Chris: Hmm.
Lee: But no shortage of people.
Chris: Do you find an agency might need you then if they're like, "Oh, crap. We got hired to do something amazing and we just--"?
Lee: It happens all the time.
Chris: Yeah.
Lee: Yeah. Hilariously so, sometimes, because sometimes an agency will contact me about an artist I've already worked for that I have a good working relationship with. [Laughter] And I'm like -- especially when they're trying to be coy about it, and they're like, "It's a band that's metal," and I'm like, "I know exactly who the [explicit used] you're talking about."
Chris: [Laughter]
Lee: It's this. It's this [explicit used] Viking band. There are only so many Viking bands. You know?
Chris: Yeah, and I don't want to take a little bite out of your bigger bite. I'd rather take the bigger bite myself.
Lee: I don't mind. I like having a collaborative partner. I don't like too much telephone between me and the person who is going to be making decisions.
Chris: Yeah, there you go.
Lee: but that's just freelancing, in general. You kind of get better at that as you continue to do it, or you at least try to.
[Guitar music starts]
Chris: This episode of CodePen Radio is brought to you in part by another podcast. The podcast is called Whiskey Web and Whatnot. You should subscribe to it. I already subscribe to it. I've listened to a bunch of them. I've been on the show, so you can listen to one with me.
Really, a lighthearted, fun, tech-ish podcast. They talk about whiskey, of course. That's the first word in the title of the podcast. They literally ship the guests a whiskey. They talk about it. These guys know what they're talking about with the whiskey.
It ends up really adding to the lighthearted spirit of the show. Really enjoyable stuff.
The two hosts, Robbie Wagner and Chuck Carpenter, they have a lot of experience in the industry. They build lots of stuff for clients. They come at it from lots of different technologies. Have very interesting and storied careers of their own in tech, and they're still interested in it.
They have their strong opinions that are informed by a whole career of working in tech, so lighthearted, really good stuff. They have lots of different guests from all areas of Web development. They've had Tom Preston-Warner on and Kent Dodds and Charlie Gerard and Wes Bos and me, for example, to talk about all kinds of different stuff.
Anyway, I'll just leave it at that. Go look up webwhiskeyandwhatnot.fm or click the link from the show notes, and just give it a listen, give it a subscribe. It's a good show. You'll like it. Bye-bye.
[Guitar music ends]
Chris: All right, man. We'll bunch of links to all that stuff. I already have a bunch of them we'll put in the show notes/blog post that goes with this because you do a good job of writing about the interesting--
That's a particular skill, I'd say, of yours is that you do all these interesting things and then don't let yourself just be dark matter like - I don't know - some guy in New Orleans did that - or something.
Lee: That's right.
Chris: Actually kind of tell the world that through leemartin.dev, which I appreciate. Very cool.
But you put stuff on CodePen as well, which is kind of why we're here. I mean - I don't know. We don't always have to talk about CodePen, but it is CodePen Radio and, certainly, people know you and follow you from that.
Lee: Love CodePen.
Chris: From some hilarious Pens like the Banksy Shredder was a big one of yours that appeared [laughter] shortly after that news article broke. Why don't we start there, and then tell me some other stories?
Lee: Yeah, that was funny because I had the idea immediately, but I was actually doing something that weekend. I had an important family event.
Chris: [Laughter]
Lee: So, that was a rare 48-hour ... on that.
[Laughter]
Lee: I was like, "Someone is going to do this, but I need to get to it." But it ended up being fine, and I shared the CodePen link. That is what actually got distributed.
Typically, if I'm doing a joke, I think it's going to catch on, I'll put it on its own domain. But for this, it was just like a CodePen link.
Chris: Yeah.
Lee: And it got -- the CodePen link was actually shared by all these news outlets, which was amazing.
Chris: Oh, that's funny. That's probably why the views on it are so inflated because there are a lot.
Lee: Exactly. I don't even think it was a debug. [Laughter] I think people were literally going into the code casually.
Chris: Yeah.
Lee: It was funny. I loved it.
Chris: It's hilarious. It had the right timing for a thing, for sure.
Lee: Yes. Timing on the Web, of course. It ended up, as soon as I put it live, there were like five other versions of it in various mediums like virtual reality almost immediately.
Chris: Oh, that's funny.
Lee: Clearly, a bunch of developers were like, "This needs to happen." I wish I did more of that stuff, you know.
Chris: You know there's some connections I'm seeing here. In this Pen, which is called Banksy Shredder on CodePen -- we'll link to it -- there are shreds, which is a version of the actual art. I think it was there. But then yours says, "Click to add art," which brings up a little file picker thing. You can put your own graphics behind it.
Lee: Yes.
Chris: Which is easy enough. I can imagine how you would build that. But the connection I see is to some other stuff that you build.
For example, you've built this website called Turn, turn.audio, which is a lot like that. It outputs these little videos that are kind of Instagram-ready - it feels like. It's the same kind of thing. You click to pick art, and then you click to pick some MP3 or something. Then you must have written some backend Web app that smashes the two together and gives you the file and such.
Lee: Yes, exactly. You're right on it, Chris. [Laughter]
Chris: [Laughter]
Lee: One of the things I am obsessed with is content at scale and the personalization of content. Even my last client project, that sort of Web-based camera app, basically giving a user a tool to put a little bit of themselves in a preexisting visual structure to me is very powerful. You know it's kind of part of the DNA of the Internet, this sort of meme-based economy. We don't know what is going to succeed or fail. The Internet tells us.
Chris: Mm-hmm.
Lee: But it's worth giving it a shot. Turn.audio, yeah, that's a huge product for me simply just (like you said) smashing those two things together, but also catering to a very clear user problem, sharing audio on the social networks.
Chris: Yeah, it's so cool. What a nice little product. And you just give it away?
Lee: That one, it's like a freebie model.
Chris: Oh, there is a paid -- I see, yeah.
Lee: Yeah, so use it for free with the logo in the corner. This is interesting. A lot of people know me from the freelance stuff--
Chris: Mm-hmm.
Lee: --building weird websites all the time, all the time. But I actually run a few Sass apps, and I'm building a new one right now. And I think what happens is I do a lot of this freelance work, and I begin to see some mechanics that I feel could be applicable to a bigger user base, typically of artists, but it could also be designers or other sectors.
Chris: Mm-hmm.
Lee: And I get the urge to build a scalable version of it. That kind of happened with Turn.
Chris: Nice.
Lee: Something like mock, I'm currently building a product called Listening Party that is way more ambitious than usually for me. But I love the idea of (as a product developer) using the client work to put ideas to test, finding the mechanics I think are most interesting, and then trying to turn those mechanics into scalable apps - as I find time to.
Chris: Yeah. [Laughter]
Lee: You know.
Chris: That's cool. You get to keep a foot in both worlds in that way. You know it's so common for people to do client work to not ever touch product work or just because they don't have time for it or don't live in that world. There's so much they fill their day with client phone calls and invoicing and stuff. It's just a different kind of world, and you've managed to kind of do both.
Lee: Oh, I love it. I love it.
Chris: Mm-hmm.
Lee: I mean I don't get to spend enough time on product stuff because I really do love building it. I love helping out users at scale. Right now, that's what I'm doing in my free time.
Chris: Mm-hmm.
Lee: If I am going to open my computer on the break, it would be to play with some of these applications I'm trying to build.
Chris: That's great. We should try to squeeze in a couple of more Pens, but I have to ask you this question about Web stuff. It seems like everything you do is Web API driven in some way and all these Pens, of course. That's all we offer at CodePen is Web technology stuff.
Do you find that the music industry wants Web stuff, or are you asked sometimes to be like, "Oh, actually, no. This needs to be a native app," or something?
Lee: I am Web obsessed and a Web evangelist because it's where I honed my skills. But I argue this quite a bit. It's a key principle of my work, and that's accessibility. The power of sending a link out to an experience that anyone can do (if they have access to a Web browser), to me trumps all, and this is what I explain to my clients. I mean I made some Instagram filters.
Chris: Mm-hmm.
Lee: You know I'll entertain the idea of building an iOS app if we really think that is a requirement. But the Web is -- I just can't think of a better platform for creative pursuits.
Chris: So, if they mentioned it, you'd be like, "Yeah," but almost fight to do it as a Web thing instead.
Lee: It wouldn't really be a fight. I would just be like--
Chris: [Laughter]
Lee: "This is a funnel of users. If we tell them to install an application on one particular platform, you might be cutting the user base in half just to start. Then we're going to cut down the users that actually install the application. Once we get to that tiny subset of users, are they even going to understand what we've built?" [Laughter]
Chris: Hmm.
Lee: And what is the end goal here? Is the end goal to simply get people to listen to your music or buy something? Because if so, we've gone 50 steps too far.
Chris: Yeah.
Lee: Whereas, on a website, a lot of people say, "I've built the most complicated way to hear music," a lot of my concepts.
Chris: [Laughter]
Lee: I did a project for Jack White where the only way to listen to a song was to wake up during the hours of dawn and point your phone at the sun.
Chris: [Laughter]
Lee: You know? That's probably already a bit of an accessibility problem. Even I couldn't do it because I wasn't waking up early enough.
Chris: [Laughter]
Lee: But the truth is if we would have built that as a native application, it would have been even harder to convince anyone to do it.
Chris: Yeah, and then nobody would have done it. You know but it's a tradeoff. You know not a lot of people are going to do it, but the ones that are, are probably going to buy the record. They're probably going to come to his show (when they came around). They're emotionally engaged at this point.
Lee: There are different goals for different projects. Some of those projects were super-serving the superfans.
Chris: Mm-hmm.
Lee: We're just adding something to the universe of that particular artist to excite fans and get them prepared for what's coming. But then there are more abstract concepts like I built a playlist generator for Khruangbin in the past where you could generate a playlist for any flight you were about to take. Much more utility based.
Chris: Hmm.
Lee: So, you typed in your origin airport and your destination airport, and you filled in a little questionnaire like where are you sitting: on the aisle or the window? Are you drinking coffee? Are you drinking tea?
All of these variables went into a playlist generator, and then it gave you a playlist at the end that met the expectations of your flight preferences. It met the duration of the flight. And it even chose music that was related to the places you were going to fly over. Right?
Chris: Hmm.
Lee: That was a project for Khruangbin, an artist you may or may not know, but that is a utility for anyone who is about to take a flight, and a lot of travel blogs wrote about it. So, we could build Jack White's twilight receiver very much for Jack White fans -- or I guess people who like to wake up at that point in the morning. We could also build a more utility open accessibility type concept that really can give usefulness to anybody.
I talk to my clients about this a lot. What are we trying to do here? You know? Do we want it to be open and accessible? Are we trying to reach beyond the fan base? Do we even have a fan base yet?
Chris: [Laughter]
Lee: Versus Jack White where it's--
Chris: Khruangbin does. They just came through Bend, here. I went to go see them.
Lee: There you go. Yeah.
Chris: Yes, they were great.
Lee: Yeah. They are incredible. We keep -- and that particular concept for Khruangbin has become sort of an extension of their brand. We've now revisited it on a new album and built sort of a version 2 of it.
Chris: Ah! See, you do repeat stuff. Yeah.
Lee: I mean this was--
Chris: [Laughter]
Lee: --technically a different concept, though. It was a playlist generator, but this one was pandemic related.
Chris: Ah, nice.
Lee: It was called Shelter in Space, and we were generating playlists related to the things you were doing during the pandemic like cooking or walking - things like that. Yeah. I'll certainly revisit a mechanic, but if someone asks me to build a flight generator--
Chris: I see.
Lee: --a flight playlist generator, I will turn it down. I have turned it down.
Chris: Well, let's do another Pen or so. The first one in this collection is a little mini kind of a concentration game or card matching game for Florence + The Machine. What's the story there?
Lee: So, I had built an actual Florence project. This was not the Florence project.
[Laughter]
Lee: But the Florence project had a lot of these card-based UX problems. And in the middle of it, you know, I told the client. I was like, "First of all, I see all these cards, and all I think about is the solitaire windscreen--
Chris: [Laughter]
Lee: "--and all of these beautiful cards falling."
Chris: Yeah.
Lee: Which I also have a Pen of. But I was also like, I'm also thinking about the Super Mario 3 memory game. [Laughter] I was like, "None of this has anything to do with our project," but I was like, "Probably after this, I'm going to have to go build that or it's going to eat away at me."
Chris: [Laughter] Yeah.
Lee: So, I just built it. Depending on the fan base, you do get really great fans, great fans who are really interested in this type of work. And the fans were crazy about the actual project, which was kind of a tarot card reader based on your Spotify listening history.
Chris: Oh...
Lee: So, as a final thank you to that fan base, I made some time to build this on CodePen and sort of offered it to them as a fun listening experience.
Chris: Nice. Yeah, I see the windscreen version of it too. That's great.
Lee: Yes. That's a lot of fun. I mean we haven't really -- I haven't waxed poetically about you or your companies yet, and I want to make sure I fit it in there, so I'm going to say it real quick. But basically, what you've done for modern Web education in your previous work is unbelievable and very inspiring to me, someone who found comfort in writing and sharing and, as you said, not being a secret weapon out here in Louisiana.
Chris: Mm-hmm.
Lee: So, all of the CSS-Tricks stuff, I certainly have to thank you for that. And CodePen, while some of these fun things do surface publicly on my CodePen account, I can't even express how much I actually use it in my development--
Chris: Oh, is that right? That's cool.
Lee: --which has become very component based on the UX side. So, for every one public Pen you see here, there are probably 50 private Pens of experiments.
Chris: Sure.
Lee: It's just easier for me to throw a Pen open on a little UX experiment that I don't necessarily want to do in my actual project's code base. A design for me is a side of my brain I try to stay away from as long as possible when I'm doing client work because it becomes overwhelming.
Chris: It's too enticing? It's the siren, the call of design?
Lee: Exactly. And when I'm promising something as complicated as the keyhole--
Chris: Yeah.
Lee: --close your eyes -- I want to make sure the mechanic that I propose works 100% of the time in as many environments as possible. So, when I start to sprinkle design on, it's only after the client has signed off on a fully functioning prototype of the thing I promised.
Chris: Okay.
Lee: And then I can start. So, for me, CodePen, not having to bring that design language, the design energy into the actual project is invaluable, especially once you added Vue, which I'm very comfortable using.
Chris: Mm-hmm.
Lee: It just became a great way for me to start prototyping unique components, unique concepts.
Chris: Yeah. Yeah, I see you use that Vue editor. Good. Good. Yeah. We really wanted to--
That was kind of a step towards future CodePen that we were trying out. And I know it's been probably years since that one has been out, but the idea was like, "Oh, maybe we should make a little CodePen for all kinds of different technologies." Then the idea kind of changed, and we think we can do better than that, so stay tuned.
But it was still a good idea. I like seeing people use it and seeing some proof that it was useful in some regard.
Lee: Yeah. To me, if my actual project's code base is Vue, it makes sense for me to be experimenting in a similar type of language.
Chris: Yeah.
Lee: Because I won't copy and paste my CodePen component into my project, but it at least allows me to establish the methods and lifecycle that the component will likely turn into.
Chris: Yeah. Sure.
Lee: It's a little bit easier than just building in pure JavaScript where I know I'll have to change things.
Chris: Mm-hmm. Yeah.
Lee: And Vue is just great in terms of lifecycle methods mounting and unmounting things to spin up these types of technical components really quickly, which is really nice.
Chris: Yeah, nice. Glowing endorsement for Vue. Works good for crazy music ideas. [Laughter]
I really appreciate your time, Lee. It was a pleasure to talk with you. I told you the time would fly by and it certainly has. I'll put the link to the rest of these Pens in your collection in the show notes, as well as all the links for the things that you do, the blog posts we talked about, and things like that, so look forward to that. I hope we get to talk or meet one of these days. That sure would be nice.
Lee: Absolutely. I would love that.
Chris: Yeah. Cheers.
Lee: Cheers, man.
All right, man. Until next time. Until our paths cross again.
Lee: Sounds good.
[Radio channel adjustment]