Today I get the pleasure of talking with Aaron Iker. Aaron builds incredibly delightful bits and bobs of UI that give you the feeling of hey, I bet I could actually use this! And that’s exactly what Aaron wants you to do. He takes care to make sure the code is easy for you to use if you wish. This idea of taking somewhat practical-looking UI elements, like buttons, loaders, toggles, etc, and then making them do something unexpected and fun is a perfect fit for popularity on CodePen. Last year, Aaron occupied 10 spots in the Top 100! Aaron’s advice: keep challenging yourself.

Time Jumps

  • 00:17 Guest introduction
  • 01:13 Designing for usability
  • 03:43 Sharing across multiple platforms
  • 05:03 Are you interested in 3D?
  • 05:54 Sponsor: Netlify
  • 07:18 Where do you get inspiration?
  • 08:58 Is this what you do professionally?
  • 12:52 What do you reach for in tech tools?
  • 15:35 What’s your process for creating?
  • 19:36 Do you use other platforms?
  • 23:47 Feedback differs on platforms
  • 26:07 Any advice for people?

Sponsor: Netlify

Netlify is Jamstack hosting with all sorts of features to help make developing sites easier (have you seen Netlify Dev? You can run the whole platform locally) and deployed sites better. But Netlify is a big place! They do all sorts of community things like Jamstack Explorers, a whole learning platform for leveling up your Jamstack skills. Not to mention several YouTube channels loaded with learning and fun.

Transcript

[Radio channel adjustment]

Announcer: Today, on CodePen Radio.

Chris Coyier: Hey, everybody. Welcome to another CodePen Radio. This is episode 344, and I have a guest today. I am honored to be joined by Aaron Iker. How ya' doin', Aaron? Did I get your name right?

Aaron Iker: Yeah. That was right. Yeah, thanks for having me. I'm good. How about you?

Chris: Yeah, very good. Thank you. I say great pleasure, and I mean it. You've been a member of CodePen for a long time doing really incredible work there. I always think of you for a number of reasons. One of them is when somebody asks me for advice or something or it comes up, like, how do I get my work noticed on CodePen? I'm like, you should pretty much just look at what Aaron does because something about his work really captures people's imaginations, particularly on CodePen.

You do -- I don't know. You talk about your own work together, but I'd tee it up by saying, to me, it feels like a lot of micro-interactions, a lot of toggles and buttons and loaders and things like that. What draws you to that type of work?

00:01:15

Aaron: Yeah. For me, it's always important to make the animations usable. Most of the time, I stick to common button sizes and also for the input so that people can just grab the code and use them right away. I think that's something people really enjoy that they can just grab the code from CodePen and use them on their website and maybe, yeah, do some modifications for that. I think that's something people really enjoy.

Chris: I think so, too. That's interesting that you have that in mind, as you build them, the idea that somebody could just grab it and use it. Maybe it's coded in that way, but I think the aesthetics are that way, too, in that your buttons aren't--

I think a lot of times when you just look at, let's say it's a button, that they just look kind of normal. They just look like a pill. They've got rounded corners. They're in modern grays and things like that.

Aaron: Yeah. I think also a lot of them look really similar, so at least for the default state. But when you hover them or click on them, then something will happen, maybe.

Chris: Yeah. [Laughter] Well, not maybe. For sure. If it's an Aaron button, something weird is going to happen. It might be (like we were talking about two seconds before the show) confetti shooting out of them or some kind of star animation that happens. It's usually not just--

I think a micro-interaction can go a long way just to -- let's say there's a star on the button -- have it just twist once or something. You'd be like, "Woo! Nice! How classy." Yours never do something that easy. [Laughter] I feel like all of yours have some kind of next-level thing where the star will hop up and do two twists in 3D and then follow an animation path to a new location. There's always a little extra something in there that you would never guess from looking at the button.

Aaron: Yeah.

Chris: Is that surprise part of your--?

Aaron: Most of the stuff is also to just challenge myself, so create something new, something I've never seen before. A lot of that is also inspired by some shots on Dribbble, also some, yeah, existing projects on CodePen, but still trying to do something new and something that isn't out there.

Chris: Yeah. Yeah. You nailed that, I think. Something new is a lot.

Yeah. I talked to George Francis the other day, and there are some similarities there in that he's got--

Like you, you're on Dribbble, and you're on Instagram. You're on Twitter with all generally using the same name or close to it and stuff. But it's all you and your work. It's all really consistent across that. Just kind of covering the ground of - I don't know - where you should be as a front-end developer and designer, I guess. Is that pretty intentional?

00:04:15

Aaron: Yeah, just cross-posting between the platforms, but it's also really interesting how people are different across the platforms. I receive a lot of valuable feedback on CodePen code-wise and also some design feedback on Dribbble.

Chris: Mm-hmm.

Aaron: Then there are more casual people on Instagram, yeah, like people you meet outside which aren't in this developer/designer bubble, maybe.

Chris: Right. Right. Right. Right. People that you might just meet on the street or whatever. But at least on your Instagram, it's pretty much just your work. It's not like me where it's a burrito in a tree and a website. [Laughter]

Aaron: Yeah. It's really hard to find a personal image there.

Chris: Yeah. [Laughter] That's great, though. Once in a while, you play with 3D. Are you into that kind of thing? Where does that land in your interest?

Aaron: Yeah. I think, a more recent thing. Yeah, at least for the last year, I think a lot more people are excited about 3D, especially Blender in combination with Three.js. Also, that's something I wanted always to learn, yeah, diving into the 3D stuff. Yeah, it's still in progress, but I enjoyed the first projects with that.

Chris: I don't know much about Blender. What is Blender?

Aaron: Like Cinema 4D, but free. There's a huge community around that. You can basically export stuff from Blender and import that in Three.js. Just move it around, so that's awesome.

Chris: Yeah. Yeah. Yeah. Cool. And free. Nice. [Laughter]

00:05:54

[Guitar music starts]

Chris: This episode of CodePen Radio is brought to you in part by Netlify. High-five, Netlify, for the support.

You know I've talked a number of times about how Netlify is this website host for your Jamstack website. It's the static hosting at its root, but then they do all kinds of stuff for you. In fact, you can run the whole Netlify platform locally, meaning it'll run your build process. It'll run your build plugins. It'll run your cloud functions and emulate them locally so you can test them. Really tremendous.

This is actually kind of amazing what the Netlify CLI can do. Really powerful stuff. Netlify Dev, they call it. Pretty cool.

Netlify is such a big place these days. Just go to netlify.com/community and check out that there is this whole ecosystem of build plugins, which is fascinating to check out. They have a store, if you're so into Netlify to check out the swag.

They have elaborate docs. They have this thing called Jamstack explorers, which is a video learning platform to teach you all about Jamstack and the benefits of building in that way.

Of course, there are support forums of a big community talking about all kinds of things related to Netlify. That's one of the places you can go to get help. They have the YouTube channel with the stuff from their conferences. It's just a massive organization over there.

There's a lot to know about this whole world of building on Jamstack. Not only is Netlify the place to host your Jamstack websites; the place to go and learn and level up and just become a part of the whole Jamstack world. Thanks for that, Netlify.

[Guitar music ends]

00:07:39

Chris: All right. What about the inspiration bit a little bit? I know you mentioned, ah, you might see something on Dribbble or an existing CodePen project or something. But it seems like there's got to be a little bit. There's got to be a little of something more there just because of how prolific you are.

Aaron: I started, yeah, just picking concepts from Dribbble and try to implement them in real code. As I mentioned before, just to challenge myself and create something that isn't out there yet. That's also awesome to learn, for example, timing and some more natural easing because the concepts are already animated, and you just need to rebuild them and maybe modify them.

Chris: Right. Where do they come from on Dribbble? I know what you mean. You might go on Dribbble, and you see some beautiful -- the thing is already animated, so they made a GIF of it somehow. But then they don't post any code.

Aaron: Yeah, because they basically built with After Effects or any other animation tool, yeah, so from designers.

Chris: That was never designed for Web.

Aaron: Exactly, yeah.

Chris: They're more like pure designers. They're like, "Somebody else will implement this."

Aaron: Yeah, and most of the concepts are just too good to not implement them in real code to use them. As they were just, yeah, forget somehow.

Chris: Now you've built hundreds if not thousands of these things. Is it what you do professionally? Do you have to do boring React work like the rest of us?

Aaron: Yeah. It's a combination of both. In my job, I am still a front-end developer, and a little bit of a combination of design and developer. But I always try to implement some of micro-interactions at work as well.

Chris: Mm-hmm.

Aaron: But mostly it's in my free time, yeah, building new stuff - outside of the job.

Chris: Right. Right. Is there some degree of freelance involved, too, or no?

Aaron: Yeah. From time to time, I'm also creating some animated icon loaders and also UI stuff as freelance gigs. But yeah, it depends how much time.

Chris: Yeah. Is it you saying yes? I'm curious what an incoming ask for freelance is for you because your work is so consistent in these beautiful micro-interactions. Do you get an email that's like, "We want a button like that. Make us one"?

Aaron: Yeah. Also, there were some emails like people searching on Dribbble for some cool buttons and said, "Yeah, I'll respond to you, so here's my freelance gig. I want this button or this button with slight modifications." So, that's maybe most of the time that people are picking some stuff from me and asking if I could do something similar for them.

Chris: Yeah. Oh, that's the dream, I guess. Right? At least have something that you're known for, so when they ask for something, they're not like, "Hey, can you build me the Postgres database for a recipe app?"

Aaron: Yeah, social media.

Chris: You're like, "No." You're like, "No. No, I want to design a cool switch."

Yeah, in fact, I saw a cool switch. Let's see. You never know. You've been around on CodePen so long. Oh, it was about this time last year, actually. There's one called Check Switch that you did, a beautiful kind of 3D-looking switch toggle. Then you switch it enough times and there's a thing that says, "Can't get enough? Follow our journey on Twitter," and it's for some, you know, "Join Check on Twitter," or something. Was that an example of a little miniature freelance project?

00:11:08

Aaron: No, that's basically a side project. Except these Pens, I'm also doing some side projects also just to integrate these micro-interactions in a real live app.

Chris: Yeah. Right.

Aaron: That's, yeah, basically a to-do list, which I'm creating for some colleagues.

Chris: Wonderful. Now that I mention it, I feel like I maybe have seen this. Still in early access, check.so. Check it out, people, or don't, or I'll cut this from the show if Aaron prefers that I do that.

Aaron: Yeah... [laughter] leave it in.

Chris: [Laughter] Okay. Let's leave it in. Yeah, that should be fun. That's cool. You have kind of a real-life place. I can think of a to-do app as being just a ripe crowd for loads of micro-interactions: adding a new one, checking one-off, all those things.

Aaron: Also, there are a lot of to-do apps outside of the world, but it's still maybe the most common app tool. Yeah, create something on your own and try to do something different.

Chris: Right.

Aaron: Try to add some animations.

Chris: If it's beautiful, you'll get some users. It is funny how hard it is to tear people away from the one they use. I feel like most people have some kind of task manager something that they use. I almost recoil when another app asks me to do it.

I tried out some other app this morning that wasn't all about to-dos, but in order to make it really work, you had to kind of put your to-dos in it. I'm like, "No! I have my own fricken' place for to-dos."

Aaron: Yeah. I think for something like this, you would just need to create it for your own, and then maybe also people would like that because you're integrating features which you are missing on other apps.

00:12:52

Chris: Tech-wise, is there anything you're particularly into? What do you tend to reach for? There's plenty. You've seen GreenSock at least once in a while, but do you always reach for it or reach for different tools at different times?

Aaron: Yeah, so currently maybe most of my animations are done with GreenSock because I'm really enjoying it and I'm basically doing always the same, just finding some custom CSS properties and animating them with GreenSock. I think you can do the same with keyframes in CSS directly, but GreenSock gives way more control over that. Yeah, that's my go-to library for that.

For 3D, it's obviously Three.js. Also, they are working well together, so you can animate stuff in Three.js with GreenSock, so that's really great.

Chris: Nice! I guess I didn't really realize that that's--

So, you set up a lot of the animations in CSS custom properties, like the colors and positions, I guess.

Aaron: Yes.

Chris: Then to animate the custom properties, you use GreenSock.

Aaron: Exactly, yeah.

Chris: Interesting. That's fast. Imagine a library having to tell CSS to animate something, but it ends up -- I just feel like with everything GreenSock -- always incredibly performant.

Aaron: Also, you get a great control over the timeline. While developing, I always enjoy zooming in and also slowing the whole timeline a little bit down just to make them pixel perfect.

Chris: Right.

Aaron: That's super easy with GreenSock.

Chris: Yeah, which would be a pain in the butt (to say the least, probably) with CSS. Interesting. Interesting. And I guess I would imagine there are no limits to what you can change.

I know I've lately been playing with custom properties and wanting to -- let's say you had a gradient that had an angle on it, like linear-gradient 45 degrees - or something - and you wanted to animate the 45 degrees part of that animation. It's really only recently that you were able to do that at all. Even then, what you have to use is that CSS @property thing to declare it as an angle before you animate it. Then even that only works in Chrome and friends these days, and stuff. But I would suspect GreenSock has no such limitation.

Aaron: Yeah. You can do everything with custom properties nowadays. It's really nice.

Chris: That's great. That's great. That's just your go-to. How interesting. [Laughter]

How about the process? You see the Dribbble. You got two hours in front of you - or whatever - in the day. You're about to build one of these things. Do you build it locally and then paste it into CodePen later, or do you work directly in CodePen usually or sometimes or all the time?

00:15:54

Aaron: Yeah. For most of the content, I'm just sketching it in Figma, so I've got the point sample as we've got the button. Then we got the default state. Then I am also wireframing maybe a loading state and the success state. Then I'm just -- yeah. Most of the time, I'm developing it locally and then just uploading it to CodePen.

Chris: Later, yeah. Everybody's process is a little bit different. Yeah, that's cool. I'm curious then. In CodePen land, you use it enough. Just in case, if you have any advice for us or any ideas of things that you'd like to see or make easier, I'd be all ears on that. Although, we don't have to do it right on this show. Feel free to email me or anything if there's anything you think of.

Aaron: Yeah. I think CodePen has got awesome features towards the development online. It's just a personal preference to do it locally. But if I ever want to change stuff, I'm always doing that at the CodePen editor directly. I've got some prepared templates for, yeah, maybe having the Twitter link at the top button for every Pen - stuff like that. Great usage of templates.

Chris: Oh, I see what you mean. Yeah, a lot of your Pens have that kind of like, "Follow me on Twitter," icon below. I love that people do that. That's kind of nice. How do you pull it off? A template?

Aaron: Adjust the Pen, yeah.

Chris: I see, and then it's stuck right into the HTML and stuff. I've seen people have a JavaScript file that they link up on all their Pens that injects that stuff so that there's one place to change it - or whatever. To each their own, really.

Any other tech that you're watching or are particularly interested that's going to help your work out there?

00:17:37

Aaron: I think mostly not. All the Pens are created from scratch every time. Maybe reusing some old code from other Pens, so I don't have everything.... But most of the time it's created from scratch.

Chris: Yeah. I mean Web platform stuff or interesting - I don't know - frameworks and things.

Aaron: There are so many out there; it's crazy. Yeah, most of the time--

Chris: Especially in animation.

Aaron: Yeah. Exactly. Most of the time, I try to stick with GreenSock because I love it. But there are also any major S-grid for some stuff. Yeah, there are a lot out there.

Chris: Yeah, that's cool. I was curious because you mentioned that you like the idea that some of the things that you build are easy for someone else to use. Like, "It's just a button. Here's the code. Go ahead," which is also very generous of you. Cool. I think that's nice.

But it's still just some HTML, some CSS, and some JavaScript. They're not exactly bundled up or isolated or anything. I'm curious if you think about, "What if I made them into a Web component and put them on NPM or something? Then when people use it, they could just go import trash button from trash button."

Aaron: Yeah.

Chris: Drop it in HTML as an angle bracket trash button or something. Is that appealing? Are you like, "Eh... If somebody else wants to do that, go ahead, but I'm not."

Aaron: Yeah. I'm open for anyone to want to create React components or something like that out of that, but yeah. I'm fine. I'm fine with that, of course. But for me, it's enough to have them, yeah, under that JavaScript, maybe with GreenSock and some basic CSS and HTML. And that's it.

Chris: Yeah. Yeah, that's just like, why bother taking it further than that?

In that same vein, but different, is what other--? You're on CodePen and Dribbble and Instagram, but those type of things tend to change over time. Have you ever thought, "Oh, my process is so refined. Maybe I'll share it with people. Maybe I'll become a YouTuber. TikTok is so cool right now. Maybe I should be on TikTok"? Does that stuff ever occur to you?

00:19:58

Aaron: From time to time, also, people are asking if I've got a YouTube channel or stuff like that, but I couldn't (just based on time issues). I would love to create some videos explaining how to do a button. At least it's also because people are asking about that. But yeah, time issues. That's it.

Chris: Yeah. When you give away so much, too, it'd be yet another thing to give away. [Laughter] You know? Yeah. I wonder.

Aaron: Maybe something for the future.

Chris: How can we make Aaron more money?

[Laughter]

Chris: Make a tutorial or something. Yeah, I'm not sure. I think if there was an easy way to do it, people would crack it. Yeah, I'm so curious. I haven't seen--

There are developer jokes on TikTok and stuff, but I haven't seen anybody do any--

Aaron: Oh, you are on TikTok?

Chris: I'm not. I'm just curious. I want to know what's next. I don't want to miss something that's important to people.

Aaron: Yeah. I think TikTok is huge, but I'm not sure.

Chris: Yeah, but I'm not that into -- I'll like a good joke and all that. That sounds fun to me. But I think, personally, my bread and butter is more like, "I want to help you know the stuff I think you need to know." I want to just be educational in some way.

Aaron: Also, I think for the last couple of months, there are more and more Twitch streamers, for example, explaining Web stuff. I'm really enjoying it. For example, the stream from Alex Trust is pretty good.

Chris: Yeah. Oh, like Twitch stuff.

Aaron: Yeah.

Chris: Yeah.

Aaron: That's great.

Chris: I like that different -- it's a little bit of a different vibe because streaming kind of implies a level of informality.

Aaron: Yeah.

Chris: Whereas somehow YouTube is more polished or something. I expect this is going to be a tutorial. It's probably going to have intro music and stuff. Whereas streaming is like, "Oh, I'm firing up my editor."

Aaron: Yeah.

Chris: "Just come hang out." You know?

Aaron: Twitch is also more ... maybe just for explaining stuff.

Chris: Yeah. I don't know. I don't know. Just interested in seeing what's next, what the important places to be are.

What's up with--? Not what's up, but I'm just curious. Why no personal website? It feels like if you have to do build a to-do app to do micro-interactions, you've got to get aaroniker.com, man.

Aaron: Yeah. Also, time issues. [Laughter]

Chris: [Laughter]

Aaron: There is some work in progress stuff, but yeah. Also, I think it's so hard to do a personal website because you are not -- yeah, it's hard to finish something personal because you're not confident with what you are creating. Then you wait maybe a month, and you don't like it anymore. Then you create something new.

Chris: I know. Yeah.

Aaron: Personal websites are always horrible.

Chris: [Laughter] It does seem like a lot of pressure. Right. If you don't like it anymore, you don't feel like it's reflective of your best work, I could see you wanting to just be like, "Oh, no! Tear it down!"

Aaron: Yeah. Then you are creating something new and, yeah, just will never finish.

Chris: Even more time sink. Yeah. Yeah. Maybe you got it right, then, because it looks like you do have one. It's just kind of like, "I don't know. Go follow me on these other places," kind of thing.

Aaron: Just like a link tree.

Chris: Yeah. Yeah. I could see that lasting. You'll get a good year out of that. [Laughter]

Work locally on the code, you said, and clearly have a GitHub, I'm seeing, from your personal website. Does each little button end up as a little repo on GitHub, too, or do you not really take it that far?

00:23:31

Aaron: No. They are just on CodePen right now because, yeah, I think that's enough.

Chris: Probably. Don't need a pull request on one button.

Aaron: Yeah. Then people are creating issues there, and then you won't get them. Yeah.

Chris: All right. That's cool. You said there are some differences between platforms on kind of the feedback that you get. You said maybe there's some code feedback on CodePen, design feedback on Dribbble, which is, I guess, exactly what you'd expect, right? Dribbble being more of a platform for designers and CodePen perhaps being more code-oriented.

Is that feedback -- I don't know? Is it helpful? Is it what you want? Do you wish there was more of it?

Aaron: It really depends. On Dribbble, there's also just random feedback like nice colors or [laughter] some not really helpful. Yeah, I'm happy for every feedback.

Chris: Yeah. It seems like an awful lot of that. Yeah, even if it's just that.

Aaron: Yeah, but it's also super cool to have some valuable feedback on CodePen like you can do it also like this or like this, or you can improve that.

Chris: Right.

Aaron: That's really enjoyable.

Chris: I've always wanted to encourage that. That's kind of my job, in a way, is to get the most out of community and make those things happen because I think everybody feels that way. When you get good feedback, it's great. You have to think about it in the opposite direction, too. How do we prevent gross crap, spam, trolling, and whatever else. But we don't really -- miraculously, in ten years of running CodePen, don't have too much of that and have tooling in place to stop it, so I'm not too worried about that.

I'm more worried about how do we get better at that, encouraging comments and stuff. Dribbble, also for ten years, is notoriously just like you said, "Wow! Great colors."

Aaron: Yeah.

Chris: "Cool stuff, man." You know? Which is flattering, in a way. I feel like they've never cracked it either.

Aaron: Yeah.

Chris: That's the default comment, 99% of comments on Dribbble.

Aaron: I think it's also hard to prevent that.

Chris: CodePen as well. The single word comment is probably--

Aaron: Yeah, that's the most common one.

Chris: It's just what it is.

Aaron: Yeah....

Chris: Yeah, but not on Twitter. People chat. Nobody responds to a tweet and just says, "Cool."

Aaron: Yeah, that's true.

Chris: It's interesting. I wonder how we can encourage better chat or something. Not exactly overflowing with ideas, but maybe we'll get there. Maybe we'll get there.

All right. So, any advice for people, as we wrap up? You mentioned you particularly like to challenge yourself, which is probably good advice, generally. That's how you get good and stay good, right? You're always challenging yourself.

Aaron: Yeah.

Chris: Doing bigger and better things. What else would you say, for anybody that wants to be the next Aaron Iker, super button creator?

Aaron: Yeah, I think just for people who are just getting started, yeah, just start. I think you will see a lot of great, great results pretty early. Yeah, always rethink the existing elements like UI elements or any other stuff. There's always room for improvement and something new. Yeah, just getting started and coding right away.

Chris: Yeah. Yeah. That's great. I'll end with reminding people that, for whatever reason on CodePen, that practical UI stuff that you'll see in Aaron's work (and a lot of other popular work) has that air of, like, "You know I could use this. It's just a button. I could use this on any website. It's just a nice little loader. I could use that on my website." If you can inspire that, "I could use this," vibe, you're going to do well on CodePen, if that's your goal. Whatever. It's nice to get some likes, so I wouldn't blame anybody for wanting. I want likes too, gosh darn it.

Aaron has hit that so well with his work. You've got to go look at it. In fact, last year -- and in a month from now or a little bit more, we'll be publishing the most hearted of 2021. It's a thing we do always in the year. I think by my count, in 2020, Aaron had 10 of the top 100 spots on the CodePen list, so there's just something about Aaron's work that you might want to check out if your goal is to get a bunch of likes. [Laughter] Really cracked the code, whatever that code is.

Aaron: It's not only about the likes, right? [Laughter] Yeah.

Chris: No, no, no. There's more to life, but I think some people want to--

It's symbolic of other things, of some success in the field, I'd say. If you're producing the kind of work that other people like that your chances of getting the job you want are higher. The chances of landing the clients you want are higher. Chance of being in a tight-knit community with people you respect is higher. There are just side effects of producing work people like.

Aaron: I think it's like getting more visibility of just creating visible things.

Chris: Good. Good. Good. All right. Final words, Mr. Aaron?

Aaron: Yeah. Thanks for having me. I really enjoyed it and looking forward for the next episodes.

Chris: Thanks very much, Aaron. Take care.

Aaron: Thanks. Bye.

[Radio channel adjustment]