This week I got to speak with Jake Albaugh. Long-time listeners will remember Jake as an alumnus of Team CodePen. That’s a first for a podcast guest! We looked back a bit, where Marie dug up some of the best Jake classic Pens, and talked with him about what his professional life has looked like post-CodePen.
Time Jumps
- 00:29 Guest introduction
- 02:48 Where is Jake now?
- 04:16 Where’d you go after CodePen?
- 07:29 Sponsor: Memberful
- 09:06 Self-Coding Pen
- 10:52 Chord progression arpeggiator Pen
- 12:21 The tombstone generator Pen
- 13:39 Cheap AI Chess Pen
- 18:00 Having a TypeScript moment
- 21:47 Learning Go
- 22:57 Rectangle packer Pen
- 30:48 Video music Pen
Memberful
Sponsor:Memberful is easy to use, best-in-class membership software for independent creators, publishers, podcasters, educators, and more. We take care of the hard stuff so you and your clients can focus on what you do best, while earning revenue quickly. Memberful seamlessly integrates with the tools you already use, like WordPress, Mailchimp, Discord, and lots more. With Memberful, you have full control and ownership of all things related to your brand, your audience, and your finances. Learn more at Memberful.com and get started for free — no credit card required.
Transcript
[Radio channel adjustment]
Announcer: Today, on CodePen Radio.
Chris Coyier: What's up, everybody? CodePen Radio #380. This is a first. We're 380 episodes in and have definitely never done a show quite like this before where our guests used to work at CodePen. We haven't had that much employee churn, really, so it's kind of cool to have this happen.
Jake, you're still one of the CodePen family. What's up, Mr. Jake Albaugh?
Jake Albaugh: Yo! What's up, everybody? Good to be back.
Chris: [Laughter] Yeah. Jake was an early employee. I'll tell you a story. We used to do CodePen meetups back in the day, and I think this is how it went down. Basically, did one in Chicago.
Jake: Mm-hmm.
Chris: Which I think Matt Soria was running.
Jake: Yep.
Chris: But Jake is obviously--
You still are, aren't you, in Chicago?
Jake: Yeah. Yeah.
Chris: Yeah. Yeah, right on. And then had one and met Jake down there. And, Jake, you're such a personable guy. Everybody likes Jake. And he's so creative and had already built cool stuff on CodePen. It felt like a natural fit. I think we were just walking around.
What we really needed was, despite all this front-end work you did, be like, "Yeah, would love to hire you as a front-end developer, but what we really need is back-end," and you were like, "Whatever. I can do back-end too," you know? Jake, you can kind of do it all.
It ended up working for us for quite a while, and then just kind of--
Jake: I was going to say, I think it was almost three years.
Chris: That was great. There's still code. Do you have that VS Code plugin installed, that get lens or whatever? You can see any line of code you're on.
Jake: [Laughter]
Chris: You can see who wrote it. There's plenty of Jake stuff in there still.
Jake: That's funny. Yeah.
Chris: Especially because right now we're doing this, like, transitioning a big API over to Go.
Jake: Mm-hmm.
Chris: The API was originally written in Rails, so there's a lot of cross-referencing, like, "What's Rails doing over here? Oh, guess who wrote that?" You know?
Jake: [Laughter] That's awesome.
Chris: Yeah. Anyway, yeah, and we have Marie here too. What's up, Marie?
Marie Mosley: Hey, everybody.
Chris: Yeah.
Marie: I insisted on being on this episode. Jake and I were the first cohort of employees at CodePen.
Chris: Mm-hmm.
Marie: I think you're -- are you number two, Jake? Were you number two?
Jake: You know I think I might have been starting at number two, but I think I was officially on the books as -- Rach might have been number two, officially, on the books. I don't know. Who knows?
Chris: Yeah. That's why we call it a cohort because they all kind of happened all at the same time, so the starting dates were close.
Marie: One big group all at once, so, yeah, I just had to be on. [Laughter]
Jake: Yeah. I'm so glad you're here.
Chris: It was awesome, and Marie has done -- you know -- our resident SQL expert has some data on Jake, I'm afraid.
[Laughter]
Marie: Only good stuff. Only good stuff.
Chris: Oh, yeah. [Laughter]
Marie: Yeah.
[Laughter]
Chris: She's been at it for a while, but I want to know. Let's start at the end. You're at Figma now.
Jake: Yeah.
Chris: What's the role?
Jake: I'm a developer advocate at Figma, so I'm the first developer advocate at Figma.
Chris: Hmm.
Jake: We have an advocacy team. But as you might expect, most of the advocates at Figma are design oriented.
Chris: Design.
Jake: Right?
Chris: Yeah.
Jake: So, we're more building the developer advocacy arm at Figma, which is a lot of fun and a great spot to kind of be.
Chris: Yeah.
Jake: Early in terms of this role.
Chris: Is that because it has APIs and stuff, and you can build plugins and stuff? Is that--? Yeah.
Jake: Yeah. The way I talk about it is we have different types of developer experience because we have the extensibility platform because you can build plugins, widgets, use our Rest API, so using the code we write and learning the code we write (for people to use).
But then there's also, like, Figma is a product, and FigJam is also a product that developers use a lot or at least have to engage with. And so, how we improve that for developers--
Chris: Oh, I see.
Jake: --and support developers on that side, that's another aspect of this. So, big picture, there's a whole lot going on there, and there's a lot of room for us to grow there. So, it's really exciting to kind of be involved at an impressionable stage. You know what I mean?
Chris: Yeah. I'm glad. It seems like an interesting role for you. You had so many different experiences.
Jake: Yeah. Yeah.
Chris: At different companies doing different things, but very different things. You know?
Jake: Yeah.
Chris: From really techie back-end decision-making about what tech we're going to use kind of stuff to now where that's so much more established. Walk us through it. I guess we know your life up to CodePen.
Jake: Yeah.
Chris: Then what was the first jump then? Wasn't it to Vinyl Me, Please?
Jake: It was, yeah.
Chris: Yeah.
Jake: Vinyl Me, Please, which is a vinyl record like club. It's fairly e-commerce-y.
Chris: Yeah.
Jake: But I was doing kind of more -- I was taking all my Rails experience that I learned at CodePen and the kind of server-side Rails database stuff. I brought that over to Vinyl Me, Please and was doing Rails app stuff there. I did that for almost two years.
Then from there, I ended up at Tock, which is kind of like a reservation platform for restaurants. That was mostly front-end. I got deep into React and TypeScript and building components and component library stuff.
Chris: Oh...
Jake: Tons of kind of like working with design teams. Tock was a really cool--
Chris: You're back to the front-end.
Jake: Yeah, back to the front-end. The situation at Tock was really cool because it was like we had a very small design systems team with dedicated designer and then I was contributing as an engineer there. But then we also had product designers that have to learn how to use a component library, and you have to convince them that it's a good idea.
Then you have implementation engineers that are implementing the front-end and teaching them how design systems are actually really helping them out and those things that are annoying get solved if they come in earlier into Figma and are talking about the components. It was that perfect kind of size where there are enough people involved where you're learning a lot and helping solve problems for people, but not so big that you disappear in the void.
Then from there, Figma.
Chris: Oh, yeah. Okay. It was a lot of jumps, but you did get it pretty fast, so that's cool. They do seem very different to me. It's rare to me that somebody effortlessly has jumped back and forth between very different roles, Figma being a third very different role.
Maybe you are deep in the codebase. But that's not maybe your day-to-day role.
Jake: Yeah. There's a lot of code, but it's not like Figma app code. Right? This is kind of one of the things that I've learned is I like the lighter weight, like building a plugin, building a widget, experimenting, being creative, showing how to do something. Coding in that world instead of, like, "I'm going to build something that's going to last for seven years." I like a lot of quicker things and quick problem-solving stuff.
Chris: Yeah. Interesting.
Jake: It's almost as if I found a career building Pens is what it really feels like. [Laughter]
Chris: Yeah. I was going to say, because you're known for that. Kind of like, "Here's this," because your Pens are quick but not quick. You know? [Laughter]
Jake: Right. Right.
Chris: They can be pretty fancy. Why don't we do some of those before circling back to some other stuff?
[Guitar music starts]
Chris: This episode of CodePen Radio is brought to you in part by Memberful, which is an awesome piece of software to help you build membership-driven businesses.
Say you're a developer and, just to make this extra developer-y, let's say what you're going to do is build a website in order to sell an online course to other developers. We're a developer ourselves, and we're building things for other developers.
How am I going to do that? How would I, Chris Coyier, build that? I'd probably spin up a WordPress site just because I happen to know WordPress. But that's a smaller consideration knowing that Memberful has a really powerful integration through a WordPress plugin.
What that means is I can build the site any way I want and have a wonderful homepage, have sales pages, have a blog, have a podcast that I know I can protect through Memberful for members only, have the video course page laid out with an ability to mark courses as done. All that stuff, I know that I could build that in WordPress. But then I know, through Memberful, that people will be able to sign up.
I know I'll be able to make annual plans, monthly plans, one-time plans, and team plans, and all the stuff that I need to do. I know that I'll be able to lock down access to different parts of the site and put upsells there depending on whether people are members or not.
I know I'll be able to have different levels, so I can say you get access to this if you're at this level, and these additional things if you're at this level. I know that I'll have all the tools I need as a developer to build the site that I want to build and know that Memberful will take care of so much of this stuff from emailing people and charging cards and repeating charging cards, and that server-side protection of my content and my pages for these paid plans.
It's just that's how I would do it. I would just use Memberful and use WordPress and know that it really would be a nice experience as a developer. Thanks for the support.
[Guitar music ends]
Chris: Marie, what's some classic Jake complicated, weird Pens?
Marie: we're going to go back into the Jake archives here. So, I think the one probably his earliest hit, real hit, was the self-coding Pen.
Jake: Mm-hmm.
Marie: Which was the Pen that would write its own code in the preview. People were blown away by that one.
Chris: Probably before working here, I think.
Jake: Yeah, that was.
Marie: I think it was, yeah.
Jake: I presented that one at the first Chicago CodePen meetup and that was like -- that was what solidified, like, "Oh, community. I love people and doing this," was that first Chicago meetup.
Chris: Yeah.
Marie: Then that one has a companion Pen. Right, Jake?
Jake: Yeah, there's a companion Pen, so there's PwLXXP, which is the hash for the self-coding pen, and then JORVW, or something like that, is its cousin that also executes JavaScript.
Marie: Nice.
Jake: It does a bunch of wild stuff, self-coding.
Chris: I'm glad we didn't screw up your slug.
Jake: Yeah, I know. Right?
Chris: There was a handful of early slugs.
Marie: We had some slug situations. [Laughter] It's not that early, though.
Jake: Yeah.
Marie: He's just under the wire on that one.
Chris: Okay.
Marie: Then that's an early hit, and that was a CodePen community classic.
Jake: Yeah.
Marie: But then there are a couple that I would say are the ones that were the ones that kind of reached outside of the CodePen community and went viral, one being the chord progression arpeggiator.
Jake: Yep.
Chris: Oh, yeah.
Marie: I remember you--
Jake: That one is almost to a million views. I had no idea, and I just checked it before this.
Chris: Seriously, a million?
Jake: We're at 990,000 views.
Marie: Yes. Yeah, and that doesn't surprise me.
Chris: Isn't there one that somebody who works for Brian Eno put it on some kind of like auto-tweeter?
Marie: Yes, Dark Shark.
Jake: Oh, yeah.
Chris: Every two months, it's just the same tweet over and over.
Jake: And it just gets -- [Laughter]
Marie: Yeah, it's that one and then also your Terry Riley "In C."
Jake: Yeah, "In C."
Marie: That's the other one that also gets tweeted by Dark Shark.
Jake: Yep.
Marie: So, yeah, the Brian Eno hive is well aware of our Jake.
[Laughter]
Jake: I mean that was learning. That was me learning Web audio.
Chris: Mm-hmm.
Jake: That's like what's so special about CodePen is it's a place to kind of just like figure out stuff without needing to, like, you know. The social engagement is the justification and you don't need to - I don't know - fit it into work life somehow. You know?
Marie: Yeah.
Chris: Mm-hmm.
Jake: This stuff is so valuable.
Chris: Yeah. It's interesting that people do both.
Jake: Yeah.
Chris: Kind of like, "Oh, this is for work," is kind of nice from a business perspective, but the more fun stuff is, actually. I've talked with so many CodePen people. Often, the best stuff is like, "I did this because not work." [Laughter]
Jake: Yeah. Well, because there's no other place for it. You know? That's why it's a valuable space.
Chris: What do you got, Marie?
Marie: Oh, I've got more. [Laughter] There's one that I refer to quite often, and that is the Tombstone Generator.
Jake: [Laughter] The Tombstone Generator.
Marie: I have used that one. Jake, I have used that one so much.
[Laughter]
Marie: I bring it up in the alumni channel every now and then, but that isn't even half of how often I use that one.
[Laughter]
Jake: It's funny just how goofy and simple it is, but how very useful.
Marie: That one has gotten popular outside of CodePen too. We saw some journalists kind of tweeting that one around a couple of months back, actually. So, that one is the gift that just keeps on giving.
Jake: Yeah.
Marie: And it's a simple Pen. It's just a tombstone, and you can put four lines on it.
Chris: Yeah.
Marie: Boy, do I ever get use out of that. [Laughter]
Chris: But it's done in Canvas, right?
Jake: Yeah.
Chris: It doesn't just--
It would be one thing to just write a text area on top of a jpeg or something.
Jake: Right.
Chris: That would still be kind of funny. But then you couldn't download it, right? You went a little bit further and made it downloadable, so then it can be shared in Slack or whatever.
Marie: You can use it as a picture, yeah, and then also it's like carved into the stone, you know? It looks real. [Laughter]
Jake: Yeah. There's a semitransparent shadow on it or highlight or something.
Chris: [Laughter]
Marie: Beautiful. [Laughter]
Jake: Photorealism.
Marie: It's an absolute classic. Oh, yeah, I'm going to say this is the newer one, a real big one. The AI chest, Jake.
Jake: Oh, yeah.
Marie: That one is incredible.
Jake: That one, that's a classic how Jake thinks about CodePen.
Marie: [Laughter] Yes.
Jake: I wonder how difficult it is to make chess. Then you just start doing it. Then it's like you either give up immediately, or you're like, "Okay, I think this is possible." Then you just kind of go in the hole for a while.
Marie: It's playable, but what's great is it's also beatable. You can beat that AI. [Laughter]
Jake: Yes. Yes, 100%.
Marie: It's nice to get one over on the computer.
Chris: What's the AI source then? Is there some open API?
Jake: No. No, it's called Cheap AI Chess. Basically, I made bad AI billiards, which was based on Yahoo Pool, you know, a style game, except it just randomly chooses the trajectory and power.
Chris: [Laughter] Yeah, right.
Jake: So, it's easy to beat. I wanted to do the same thing for chess, so it's Cheap AI Chess, but in order to make a cheap AI, you need to know what are all possible legal moves at any moment, so I had to do all of that work in order to validate the game of chess and make sure that it's a legal game that's being played.
Chris: Oh, there's no -- you're not hitting an API. This is 1,200 lines of TypeScript that is chess.
Jake: Yep, and so it's validating because you have to know whether or not a move that you're making is putting your king in check in order to know whether or not that move is valid.
Chris: Yeah.
Jake: So, you have to play--
In order to know if your king is then in check, you have to check what the next person would do and whether or not anything would have the king in check. Anyways, it's way more complicated than I thought it was going to be, going into it.
Chris: Yeah.
Jake: But the good thing is, in order to just make playable chess, you basically know all of the legal moves at any point in time, so you can just randomize, just be like, "Uh, make one of the legal moves." You know?
Chris: Oh... You have an array of legal moves.
Jake: Yeah.
Chris: You're like, "Pick one."
Jake: And so, then it's like, okay, make one of them. You know?
Chris: [Laughter]
Jake: Which means you can have it play itself totally randomly and then wager on who you think is going to win or whether or not it'd be--
Chris: Oh, that's satisfying.
Jake: Yeah.
Chris: I love that.
Jake: Then you could speed it up or slow it down. You could play against it. You can also play against yourself. You could turn the AI off if you want to do that too.
Chris: [Laughter]
Marie: Nice.
Chris: I was just at a meetup the other day where we were trying to solve coding challenges together as a group.
Jake: Yeah.
Chris: So, we could yell at each other and be like, "No, you should use .reduce instead," or whatever. That was kind of the point of it, but we picked kind of easy challenges.
Fortunately, Cassidy's newsletter is just full of them.
Jake: Oh, yeah.
Chris: You know every week she sends out a coding challenge kind of thing that ended up being kind of perfect.
Jake: I think I have three private Pens that are solving Cassidy's challenges.
Chris: Nice. Yeah. Yeah, so a guy goes, "Hey, let's do this one." There's this classic chess one called, like, Queen's Move, or something like that.
Jake: Mm-hmm.
Chris: The point is you put -- your challenge and the coding challenge is how many queens can you put on a chessboard that can't kill each other.
Jake: Yeah.
Chris: You know? That they can't take each other. Then it's your job kind of algorithmic to figure it out. But I was kind of like, "Uh, sounds hard."
Jake: Yeah.
Chris: Let's do an easier one. You know?
Jake: [Laughter] Yeah.
Chris: You're like, let's do that but actually all chess. It's amazing.
Jake: Although, that sounds like a very difficult problem.
Chris: Yeah, kind of, because I think you can't just assume that you start in the top left corner and place one and then go.
Jake: And then it's like, well, now you have to be like, if I place a second one in any of these positions. I'm sure there has to be a non-brute force way to think about that. But that's exactly where my brain goes.
Chris: Oh, I would definitely brute force it.
Jake: Yeah.
Chris: [Laughter]
Jake: I mean there's a better way to think about chess, I'm pretty sure. I think Stock Fish is a common algorithm for chess stuff.
Chris: Oh...
Jake: I think they use actual intelligence to know how to play a chess game. But for me, it's literally just brute force figuring out every legal move.
Chris: You're probably right. There is, though.
Jake: Yeah.
Chris: Because queens are so permissively moveable.
Jake: Yeah.
Chris: That you've got to kind of start with only knights moves away.
Jake: Right. Yeah.
Chris: That's all you have. I guess that's a little bit of intelligence you could apply before brute forcing.
Jake: Right. Like it almost sounds like a geometry problem more than -- or something like that. Yeah.
Chris: Right. All right, so this Pen is in TypeScript. I might bring it back to that because even you said that word because I think you were doing design systems at that job when you did it. Then on CSS-Tricks, you wrote about that year. You were like, I had my TypeScript moment. [Laughter]
Jake: Yeah. Yeah, I mean I don't feel too strongly typed about TypeScript. It's like the way I kind of think about it is it's rules for a game.
If you were inventing basketball and you didn't have any rules yet, you were just like, I have a ball and some baskets. I don't even know how many baskets. I don't even know how many balls.
You're like, you're trying to figure out the right combination of rules in order to make an actually good game. Right? There's something about the permissiveness of JavaScript that just allows you to figure out what makes sense.
What TypeScript is really good at is if you need to enforce those rules, or if you know all of the rules and you're trying to do something very complicated or something you're going to have to hand off to someone and they're going to have to follow rules that they might not know yet. TypeScript is really good at making sure that that stuff doesn't break.
But you don't have to use TypeScript to do that. You can also just write very defensive JavaScript and all this other stuff. But the way I've kind of come to see it is it's like, in certain context, it could be really, really, really super helpful, especially if VS Code can use it to suggest things for you, so you don't even have to type. You don't even have to write code. You're just selecting things from dropdowns and that sort of thing.
But I still do most of my work that's fun in just normal JavaScript with no dependencies. I don't like having to build anything.
Chris: Yeah. It sounds like you'd be the kind of guy that would like it both ways. You know? "I like that they both exist." Yeah.
Jake: Yeah, depending on what I'm doing. Yeah. Yeah. I mean at Figma, our plugin API and widget APIs are--
Chris: Oh, I would guess TypeScript.
Jake: Well, they come with types, right? If you installed the types, it's a better document almost than our docs website. You're able to just kind of like learn about this stuff inline as you go, and it's actually super helpful for that sort of context.
Chris: That IDE experience is, to me, at least 51% of the value of it.
Jake: I'd never go as far as to say it's unilaterally better than JavaScript. I think it's literally just different strokes for different needs. You know?
Chris: Mm-hmm. Well, it's interesting for me, as I've been thinking about it. We don't -- we still don't use it at CodePen. Although, I won't say don't use it because our latest employee, Robert, is a fan. Almost like a reluctant fan, which maybe has some similarity to you, in a way. I don't know. But has written a few things in it when it's lightweight and isolated and doesn't affect anything else - or whatever.
But I think it's interesting to think back on the choice of it existing. Typed languages existed when JavaScript was invented. Somebody decided on purpose for it to not be typed.
Jake: Exactly. Yeah. I think that's what I'm saying. Yeah, it's like if you don't know what you're building yet, which is, for me, 99% of the time when I start something. I don't really know what I'm doing yet. You know?
Other people are the exact opposite. Right? But for people like me, I love just being like, "Let's figure out what this is first, and then we can just formalize it later if we even want to." You know?
Chris: Yeah. I thought back on your article recently because I've been doing so much Go work. After the sale of CSS-Tricks, I've been like, "I don't care about the front-end anymore. It doesn't matter. I'm back-end now." Not really but kind of. You know?
Then having this experience of learning this super typed language.
Jake: Yeah.
Chris: It's not TypeScript but Go is like a meanie. [Laughter]
Jake: Yeah. Yeah.
Chris: It's very mad about your types. Anyway, but it's so great because you can hover flippin' anything in VS Code and it's like, "This is what I am."
Jake: Exactly.
Chris: Which is really, really a neat experience. And then contrast it to having to reference Rails in which there's none help.
Jake: Right.
Chris: You're like, "Oh, here's a function I'm calling," or some library method. You hover over it, and you're just waiting for the popup. You're like, "Nothing? Really?" [Laughter]
Jake: Absolutely.
Chris: Anyway... Yeah, go ahead.
Jake: I was just going to say it's really nice. You worry a lot less, but you write a lot more code. That's kind of like the give and take.
Chris: Hey, that's fair. [Laughter] Yeah. What else do you got? Marie has got--
I'm looking at a dashboard here of this executed query.
Marie: There were 100+ picked Pens made by Jake over the years, so I mean it just runs the gamut.
Chris: Woo...
Marie: Every cool thing you could imagine with the front-end, it's in there.
Chris: He's in the hundo club.
Marie: Yes, he is.
Chris: Probably not very many people in that club.
Marie: Not a whole lot of people. There are some, and he's one of them.
Chris: Yeah. Fantastic. What's recent, though? What have you been thinking about recently, or what has bubbled up on CodePen?
Marie: He just had a pick last week, the Blob Tidy.
Jake: Yeah, I did another pick last week.
Marie: Yeah.
Jake: It's not as--
It's kind of a basic pen, but basically if you picture a bunch of rectangles in Figma, a bunch of images or shapes or whatever. You want to just tidy them all together. You know?
You know when you're kind of drawing, kind of like a mosaic of rectangles, and it's just really annoying to kind of just like collect everything in a reasonably orderly way.
I wrote a plugin for Figma that does that, and I wrote the underlying packing algorithm to do it. Then on CodePen, I visualized it as kind of just like -- it generates - I don't know - 500 rectangles and then packs them together in a big ol' blob.
Chris: Yeah, is the blog a nature of the algorithm or does it attempt to be circular on purpose?
Jake: I was just talking to Dave Rupert about this because he's trying to do something that requires packing. It's really interesting because a lot of packing algorithms are really concerned with rotation of shapes and what's the optimal way to rotate things.
But when you're doing something like images on a design file, you don't want to rotate anything. Right? You want them to be preserved, and you don't care about that other stuff. There's not a lot out there for it, but this algorithm in particular, what it does is it actually packs everything into the upper left-hand corner.
And so, in its most natural state, it's just going and doing a row, then a column, inset, row, then a column, inset, row, and a column, up into an upper left-hand corner. Then what I do is I then -- if you have 100 things, I make 4 groups of 25 of them and do 4 upper left-hand corner kind of packs.
Chris: Oh...
Jake: And then rotate them radially to create a blob.
Chris: Ah, you've almost kind of ruined it because now I kind of get it. Before it was magical.
Jake: Yeah, exactly. Well, I got a Twitter -- I built a visualization of it. In order to make it radial, instead of just going the full diameter to do a rectangle, you just gradually bring it in using pi to kind of make it like a quarter circle instead of a square or whatever.
Chris: Hmm.
Jake: Then you just rotate those. Then you have a blob. It's baked into or like the blob thing is always going to be a circle because I'm evenly dividing into four sections that are relatively going to be about the same area.
Chris: Right. It doesn't seem to prefer the largest ones up into the upper left, necessarily, though.
Jake: It depends. Okay, yeah. So, the way that one works, in particular, is the algorithm basically says take the tallest ones and those are going left to right. Then the widest ones are going top to bottom. When I randomly generate rectangles, some of them are just a pixel taller than the others. So, even though they're a smaller area, they're actually taller than the one that comes next to them.
So, it looks like they're not sorted by size, but they actually are. They're sorted by height horizontally, and they're sorted by width vertically.
Chris: Oh...
Jake: If that makes sense.
Chris: A little.
Jake: Even if they're less area than their neighbor.
Chris: Yeah. Okay. And there's just some natural -- like they all share one axis. Well, maybe not. I guess not. Not when you get to the little, tiny ones.
Jake: You should look at my Twitter thread.
Chris: Yeah. All right.
Jake: I have a visualization in my....
Chris: I missed that, so I'll see it.
Jake: It's a lot clearer in the visualization. But yeah, it was a fun one because it was kind of another classic, kind of like what I really value about building on CodePen. I want to just figure out how to pack things into a shape. You're just starting with that idea, and you're just kind of throwing something against the wall and seeing if it works.
Chris: A little side effect to this one is if you run the canvas animation when the iFrame is like five pixels wide.
Jake: Mm-hmm.
Chris: Then stretch it back out. The browser barely knows what to do with it.
Jake: That's funny.
Chris: It's like, "What?!" Yeah, that's cool. I appreciate that it kind of started life as a Figma concept, though. I think that's a strength of Figma, in a way. Sometimes I'll even Google something. I'm like, "How do you do noise?" or something, in Figma. What you won't find is a Figma feature because Figma is pretty trimmed in what it does, but what you'll probably find is a plugin to do it. The plugins, the DX there or whatever UX, I guess, is so chill that you're not afraid to do it.
No shade on Adobe. We've all used their stuff for decades.
Jake: Yeah.
Chris: But if I had an idea for a plugin, I'm not even going to try in Photoshop. That sounds daunting and crazy. And I also am probably a little unwilling to attempt to add it to my Photoshop either.
Jake: Right.
Chris: It's like a real weirdness. But Figma, for whatever reason -- maybe it's its Web-based nature or something -- makes it much more approachable.
Jake: Yeah. That's what really drew me to Figma is the fact that it just works in a Web browser. [Laughter] That's so cool. But with plugins specifically, there's actually the API for doing things in Figma, like create a rectangle, move it to here in the file.
Chris: Yeah.
Jake: Give it a fill of red or whatever. There's that API, so the plugin can do that. But the plugin then can also open up what we call a UI. It's just an iFrame running a website. So, if you know how to code any front-end stuff, you can literally just (in the plugin window) write HTML, CSS, and JavaScript. You can compile React App. You can do whatever you want there, and it communicates to Figma using a post message. You can send things to and from the UI to Figma. If you drew something on a canvas, turn it into image bytes, you can send that over to Figma and paint it as a fill on a rectangle.
Chris: Yeah, they can communicate with each other.
Jake: But it's Web APIs in the UI. That's what's so cool about it is that you could just do website stuff and bring it into Figma.
Chris: Yeah, but there is -- I don't know if it's a secret -- some kind of magic to the whole canvas of Figma, right? The metaphorical canvas because it's not actually canvas, right?
Jake: Yeah. No. Well, it's -- oh, I need to actually look at it again. It's all front-end like WebGL wild world of sports.
Chris: Right.
Jake: With an HTML layer on top of it, right?
Chris: Mm-hmm.
Jake: There are actual buttons in there. There are actual links in there. But then in terms of the actual canvas itself, yeah.
Chris: Yeah, it's truly magic because of how fast things are to open and behave and zoom in and zoom out. you're never waiting for it, which is pretty clutch, a pretty clutch feature.
Is there a final Pen we can talk about? Unfortunately, time goes so fast - so fast.
Marie: Oh, wow. You know it's tough to come up with a good example when there are so many good ones. Jake, do you have a favorite one that I missed?
Jake: You know one that is still kind of like hanging in my mind is the video music one.
Marie: Oh, yes.
Jake: The one where you put a color in front of your webcam and it plays different music based on what color you're putting in front of your webcam.
Chris: What color, like blue, red?
Jake: Yeah. Yeah, so it changes the cord that's being played by an arpeggiator based on what you're holding in front of your camera.
Chris: Oh, man! That works nicely with one of our recent episodes where we had this fellow on named Lee Martin who makes these musical experiences for bands. Yeah, he would love that. I hope he's seen it.
Jake: Yeah. I would assume he has. But I'm still -- I made that Pen a very long time ago, like a very long time ago, 2018, the before time.
Marie: The before time. Yeah.
Jake: But I'm still -- I took that idea, and I'm making -- in the process of making an art installation using a lot of those concepts and using the Web browser and a lot of the thoughts that I had for this fun little Pen. That thing is still very much in my mind.
Marie: Hang on. Art installation? Where? When? What are we talking about here?
Jake: It doesn't exist. Well, the code exists, but I'm trying to turn it into an actual thing you would walk into instead of something you run on your computer.
Marie: Oh, my God.
Jake: Yeah.
Marie: Yes. I love those. We'll have to talk after this. I have seen a whole bunch of really good ones lately. I went traveling after this pandemic. [Laughter]
Jake: Oh, awesome.
Marie: In the middle of a pandemic, you know.
Jake: Yeah.
Marie: We'll talk.
Jake: I would love to.
Chris: Yeah, that would be amazing. We've long dreamed apart that, and probably we got pretty far along trying to have a CodePen-specific one with stuff like that at it that sadly never came to fruition.
Marie: One day.
Chris: One day.
Marie: We will. Yeah.
Chris: Indeed. All right, well, thanks so much for your time, Jake. It was a pleasure to talk to you, as always. We'll put a link to all these Pens and stuff in the show notes. Take care.
Jake: It was great being here. Always, always fun to swing through.
Chris: [Laughter] See you around.
Jake: Thanks, everyone.
Marie: Thanks for listening, everybody. Bye-bye.
[Radio channel adjustment]