This week I got a chance to talk to Kyle Shook. Kyle has started a new job at Foxtrot so we talked about what that process was like. In addition to creating all sorts of incredibly creative work on CodePen (just look at this Collection of Menus), Kyle helps other people level up their front-end skills too, with sites like Frontend Practice.
Time Jumps
- 00:30 Guest introduction
- 02:09 Where do you work?
- 04:37 How’d you find the new job?
- 12:25 Sponsor: Notion
- 13:18 What kinds of things did employers look for?
- 15:57 Hamburger menus
- 18:31 Bringing text to life series
- 22:51 Women whispering animation
- 25:22 Frontend Practice
- 30:39 Did you design all the projects?
- 32:35 Holiday sweater generator
- 34:27 The mine
- 34:39 Lemons still life
Sponsor: Notion
Notion is an amazing collaborative tool that not only helps organize your companies information, but helps with project management as well. We know that all to well here at CodePen, as we use Notion for countless business tasks. Learn more and get started for free at notion.com/codepen. Take your first step toward an organized, happier team, today.
Transcript
[Radio channel adjustment]
Announcer: Today, on CodePen Radio.
Chris Coyier: Hello, everyone. CodePen Radio #363. Keeping up my streak here talking with interesting people in the world of front-end design and development, as you know CodePen is well suited to that world, so why wouldn't I talk to interesting people in that world? I have Kyle Shook today. How ya doin', Kyle?
Kyle Shook: I'm doing good, Chris. Thank you for having me on the radio.
Chris: You're welcome! Yeah. I don't know that we've ever met in person, but I certainly know you through your work. You're quite prolific.
Kyle: [Laughter]
Chris: Produced all kinds of stuff on and off CodePen, of course. You did me a favor. We're doing this thing lately where I at least suggest to our guests, "Hey, send me some Pens that were interesting to you in some way (yours or others)," and you did both, so we'll get to talk about some of that a bit.
But let's talk about you a little bit first. Kyle Shook, kyleshook.com. Nice.
Kyle: [Laughter]
Chris: Perhaps slightly unusual last name. It opens up some TLD possibilities for you there.
Kyle: I think, with my last name, I have heard every shook related pun or joke.
Chris: [Laughter]
Kyle: With my first name, I've heard every Monster energy drink related joke.
Chris: [Laughter] Between the two? Yeah.
Kyle: Not many people know my first name is Opi, so growing up, I've heard every Star Wars joke, so I have a whole list of names that [laughter] come with strings.
Chris: Yeah. Did you just shed it? You're like, "I don't want to be called Opi anymore. Too much baggage."
Kyle: I always went by my middle name, and I never even knew until I was a young teenager that it was odd, but I liked it. It's my great-grandfather's name.
Chris: It's not odd in my family. My wife goes by her middle name as well, so you're in good company I guess.
Kyle: [Laughter]
Chris: You're in Chicago, right?
Kyle: Yeah, I recently moved here. I moved here last October. I'm still in tourist mode. Google Maps is my best friend every time I leave the apartment.
Chris: Nice.
Kyle: But yeah, I moved here for a front-end developer role with a company called Foxtrot. It's kind of like an upscale corner convenience store/grocery/e-commerce delivery national shipping.
Chris: Mm-hmm.
Kyle: They have 15 or so stores in Chicago, and they have a few others in some other states in the country. It's a really neat site. That was one of the things that drew me to their work. Yeah, I work on the front-end development team there, the e-commerce team. We do a lot of really neat things on the e-commerce space.
Chris: Yeah. I have never heard of this, but you have to go head-to-head with the comic strip. But in my quick Googling here, it looks like you're winning.
Kyle: Good. Good.
Chris: That's good. That's good. Yeah. Foxtrot, it's a lovely looking website too. There's a bunch of brick and mortar versions of it, but it's also online e-commerce also? Just do it all?
Kyle: Yeah, exactly. I think one of their slogans is "It's a store. It's an app. It's a website."
But it's really neat. It's the first place I've ever worked with where it has an actual brick and mortar that you find yourself going to occasionally.
Chris: Yeah.
Kyle: It's really easy to say you work at - I don't know - a big company, but you never actually see the store or anything.
Chris: Go anywhere every. Yeah. Right.
Kyle: It's neat to work on the tech side of it but also go into the stores and that kind of thing and see.
Chris: Dude, the stores look sweet. They look really fancy like somewhere you'd want to hang out or get - I don't know--
Kyle: Yeah. They're really neat.
Chris: --a prosciutto sandwich.
Kyle: Exactly.
Chris: Yeah.
Kyle: They're really neat, really nice. You can tell they put a lot of thought behind it. I guess their main thing was they didn't want to be a 7-Eleven. They wanted to separate themselves and be something more.
Chris: Oh, yeah. You can tell it's not a 7-Eleven with these kind of classy bar stools.
Kyle: Mm-hmm. [Laughter]
Chris: That's not 7-Eleven. Anyway, well, congrats. That's cool. A new gig, six months in maybe - not quite. Something like that.
Kyle: Yeah. Just a little bit.
Chris: Did you find it on a job board or something? Did they reach out to you? Certainly, longer than six months ago, you were kicking out interesting front-end work. You do super creative stuff. You help other people learn it too. We can get into that pretty soon. How did the gig come to be?
Kyle: Yeah, so I was on a job hunt, like people tend to do every now and then.
Chris: Mm-hmm.
Kyle: I remember I had this long spreadsheet, this Google Sheet, and I had maybe about 15 or 20 that I was like, "All right. This week, I'm going to sit down. I'm going to apply. I'm going to through all the hoops and all that."
I was doing one last kind of look through Indeed, and I was on Twitter. I saw someone I knew named Kyle McDonald, and he posted they were hiring front-end developers for this company called Foxtrot.
I was like, "Well, let's look at that," and I ended up knowing another person who worked there (through Twitter). Twitter has been my greatest--
Chris: Yeah, I was going to say I wonder how many people actually get jobs that way. You start at the job boards, but then it ends up being just a word of mouth thing.
Kyle: And so, I reached out to the other person I knew, and I started asking a bunch of questions, like, "Give me the details before I go apply. I want to know."
It's rare that you get to talk to someone before you apply. If you can do it, I always say, reach out and just ask whatever questions you have, if you have the chance.
Chris: I agree because you can ask anything. You have nothing to lose. I mean, yeah, I guess you could ask him their salary and stuff, but short of that, you could ask, "How is your boss? What do you work on? What's the stack? What's your day-to-day life actually like?"
Kyle: Yeah, and I think I asked all of those questions because I wanted to know.
I was kind of at a point where I was looking for something that was going to make me happy. I wasn't going to wake up on Monday and be like, "Oh, God."
Chris: Yeah.
Kyle: I feel like everyone has had one of those. It starts to wear and tear at you after a while.
Chris: Mm-hmm.
Kyle: Yeah. I heard nothing but good things, and I applied. It was the fastest interview process I had ever experienced, and that's just how they do it. I wasn't an exception.
Chris: Hmm.
Kyle: I had an interview. A day later, they sent me a take-home.
Chris: What's that? "Can you make tic-tac-toe work?" or something?
Kyle: Theirs was kind of interesting. It wasn't anything too crazy. It was more or less they gave you a design in Figma, and it was a Grid Layout of an e-commerce page with products and stuff. They gave you the API in JSON, and you were pretty much told to use Next.js and React and build out this one-page layout using the data they had given you.
Chris: Mm-hmm.
Kyle: It kind of showed that you know a little bit about Next, enough to make some API calls, and that you could make a layout that a designer had given you.
Chris: How long did you get?
Kyle: They didn't give me a limit, but I think they said to have it back within the week.
Chris: Hmm.
Kyle: I spent about a day on it and sent it back in because that's one of those things where you--
Chris: Yeah. Maybe that's a test too.
Kyle: Mm-hmm. Exactly. Yeah, it's all mind games. It really is. You also wonder how many other people are doing this right now.
Chris: Right.
Kyle: But yeah, I sent it back in, and I think, a day later, they set up a meeting with two of the engineers on the core e-commerce team, two people that I would be working with.
Chris: Yeah.
Kyle: We just went over the code. They asked me what I struggled with. They asked me what I would improve.
Chris: Nothing. It's perfect.
Kyle: Exactly. It was kind of refreshing that I wasn't just going over my lines of code. They wanted to know what I struggled with and where I could improve and what I thought about it. It wasn't just like, "Tell me why you used this." It was more like they wanted to know more about me through the process.
Chris: Okay.
Kyle: But yeah, and I think, within another maybe like three or four days--
Chris: Offer time.
Kyle: -they sent an offer.
Chris: Yeah.
Kyle: With the caveat that I would move to Chicago.
Chris: Ooh, yeah.
Kyle: I lived in Nashville at the time, and I was single. I am single, so I was like, you know what? Let's just do it. It's a big city. Let's experience it.
Yeah. a month later, I moved to Chicago. I finalized an apartment within like two weeks, which I don't recommend.
Chris: Mm-hmm.
[Laughter]
Chris: Yeah, you had to be like, "Uh, yeah. It looks fine. I'll take it." [Laughter]
Kyle: Exactly.
Chris: Yeah.
Kyle: But I've enjoyed the work. I've been able to have an impact already within six months, which feels rare. You know?
Chris: Yeah. Shipping code. That's good.
Kyle: Mm-hmm. Yeah. I thoroughly enjoyed it. But to sum it all up, Twitter, that's how I landed the role.
Chris: Mm-hmm.
Kyle: I always recommend to reach out as much as you can to people on Twitter.
Chris: Yeah. It'd be so big. If I was looking, that'd probably be my first stop just because - I don't know - there's just something kind of personal about it. You know?
Kyle: Plus, you just never know the power of someone's reference or a retweet or something. You know?
Chris: Mm-hmm. Yeah, that's great. I know the "I don't know. I'm just single, bumming around anyway. I'll go."
I got my first job at a startup. I was in Chicago. I was the opposite of you. Got an offer in Tampa, Florida, and that was contingent that we move there, even though it was mostly remote. Do you go into the office sometimes?
Kyle: Yeah. When I first moved here, we were actually moving to a new office building, the pandemic and all that, that everyone is dealing with still.
Chris: Yeah.
Kyle: Probably for October, I went in a good bit, and then we kind of shifted to everyone working from home for a little bit until probably the last month or so. People are starting to trickle back into the office, and I try to go in one or two days a week. We have kind of a hybrid setup where they know we do our work.
Chris: Yeah, right.
Kyle: They're okay with us being at home if we need to be, so they're very flexible, which is nice.
Chris: Yeah. We didn't even have an office when I moved to Tampa. It was so unusual. It was like, "You have to live here, but we don't even have an office." [Laughter]
Kyle: I don't know. That would be a little weird. It's like, "Why did I move here?" [Laughter]
Chris: It was weird, but it kind of made sense in that we would still get together. We just did it at each other's houses on a rotating thing. It was kind of a clever idea in the end, and I don't really regret it. But yeah, certainly unusual, but you could tell they were unusual going into it, so that was probably the least of the unusual things.
Kyle: I love the remote aspect, but I understand all the people that want to work in an office. You really can't trade having a person-to-person conversation sometimes.
Chris: Yeah. Yeah. Sometimes.
[Guitar music starts]
Chris: This episode of CodePen Radio is brought to you in part by Notion. Love Notion. Thanks for the support.
You know not all work collaboration tools are created equal. Some of them are about organizing your company's information, and some of them are about managing projects. Notion does both.
It's one tool for your whole team to do it all. Beautifully designed, everyone is going to want to use it. I find that to be highly true at CodePen and ShopTalk Show and CSS-Tricks when we are managing that project. All of them, I use Notion for, and people liked using it, even if they didn't use it every day. But the more they used it, the more they liked it - generally.
It's kind of amazing how anything you do in Notion ends up looking good. They've got the controls just right on making sure anything that you produce in Notion looks good. I always appreciated that.
Learn more and get started for free at notion.com/codepen. That's notion.com/codepen to help you take the first step towards an organized, happier team today.
[Guitar music ends]
Chris: All right, well, what do they see of yours? I mean they were looking at some little take-home Next.js e-commerce one-pager project. That's great because they know that, first of all, it's their exercise, so they know what they're looking for and stuff. That's cool. But could they tell?
I'm not straight up saying, "Did they look at your CodePen?" but did they look at your CodePen? Did they look at your personal website? Did they look at anything you've written? Does that stuff help?
Kyle: I'm a big advocate of having a portfolio that shows what you're capable of, whether it's whatever your niche is. I always kind of say, depending on what job you're looking for, you should also maybe fine-tune your portfolio at the time.
Chris: Yeah.
Kyle: If you want to work in e-commerce, maybe you should have an example or two of something that you worked on. But my portfolio is not the same as it was back then. I've kind of chopped it down to one page. But at the time, it did showcase a lot of work I'd done when I previously worked at an agency, so a lot of just building out pages and working with designers and stuff like that.
They had looked at my portfolio and mentioned that and, you know, we're using stuff like that. Like I said, it was people I knew on Twitter.
Chris: Mm-hmm.
Kyle: So, really, I just tweet a lot on Twitter.
Chris: [Laughter]
Kyle: I was always sharing work that I had worked on, and I know that they had seen some of that, which was kind of nice.
Chris: Have they hired people since you?
Kyle: Yeah, since I've been there. I think when I started the team, it was like four people. Now we're maybe in double digits.
Chris: Now you know. I'm sure the culture shifted a little bit, but now you have a sense of what the chatter was probably like as you were being hired. [Laughter]
Kyle: Yeah, there's definitely when someone is like, "Hey, we're interviewing some people," and it's like, "What's people?"
Chris: [Laughter]
Kyle: It's just like, "Let me look at their portfolio," or something.
Chris: Exactly! Right, because you probably have a good sense if they're good or not anyway.
You sent me some links. For example, you have this collection on CodePen of hamburger menus.
Kyle: Mm-hmm.
Chris: Then there are six of them in there, and they're all very, very clever. You can see the hamburger menu right in the middle of the screen on a field of white and then some symbolic stuff behind it related to what the menu is going to do, probably. There's a Great Books one where even the hamburger menu looks like a little stack of books. [Laughter] Then you click it, and it turns into a literal book with even little words in it and stuff. That's the kind of creative stuff that I think of and associate with you.
Now that we're on all this job talk stuff, I think if I saw that in an applicant, I'd be like, "Well, they obviously know what they're doing." [Laughter] It would go a long way for me.
Kyle: Yeah. I think I see all these people who make most creative things and pure CSS stuff. I always see that one comment that's like, "This isn't practical," or "When would I use this?"
It's like, well, first of all, these people are very good at what they do. Hats off to anyone who has ever typed the words "pure CSS" when titling their CodePen because you already know it's going to be awesome.
Chris: [Laughter]
Kyle: But I appreciate you saying that. Personally, I think people who do a lot of creative work have a lot of stuff that they know is not practical, but it's pushed them to learn some things that they normally wouldn't learn.
Chris: Sure.
Kyle: And a lot of these things come back in time, and you're like, "Oh, I think I can do this a different way."
"I made a weird menu once, and I think I could use something from that," that kind of thing.
Chris: Definitely. You can look at the code and see their style a little bit. But more importantly, you're obviously interested in the work too.
Kyle: I was going to say, I would have stopped at one if I didn't want to make something neat out of these. You know?
Chris: Yeah. Right. It's not like you should only hire people whose hobby and passion is work. I'm sure there are lots of good employees out there that just are great employees at work and then go home and - I don't know - knit or whatever. Do something totally different, right? To only hire people whose hobby is also Web design and development is not what I'm suggesting. But when that's the case, that's certainly provably cool.
What else did you send me here? Bringing text to life was a little bit of a series that you worked on. Do you want to tell me about that? We'll put links to all these in the show notes so people can follow along if they wish to.
Kyle: [Laughter] This bringing text to life was an accident. A lot of times, I would just open up my code editor, and I would just start adding CSS properties that probably didn't fit or make sense. I think one of these is background attachment fixed.
Chris: Hmm.
Kyle: I don't know if I have used that anywhere else besides this. I was like, "Well, what if I could--?" I wanted to be able to get the text to show up in an image.
Chris: Mm-hmm.
Kyle: I did that, and the text filled up the image only in stuff that was dark. I was like, whoa!
Chris: Oh, right.
Kyle: I was like, "What if I used a GIF for those?"
Chris: Yeah. Yeah.
Kyle: It started moving the text, and I was like, "Oh, man," so I started looking for interesting GIFs. I shared it. I put it on CodePen and shared it on Twitter.
It was one of the first little things that I had made in an afternoon that felt like it actually had some traction and people loved it. It was also interesting how you can make something that's less than 100 lines of code and it still is interesting and neat.
Yeah, it was an accident, and I attribute it to just trying something just for the sake of seeing if it works. Breaking it until it worked.
Chris: Yeah. It looks like the crux of it is that WebKit background clip, right?
Kyle: Mm-hmm.
Chris: What is it, looking for the--? Oh, and a mix blend mode. There's a lot going on here.
Kyle: Yeah.
Chris: It's quite the combination of things.
Kyle: Exactly. Mix blend mode, this was when I was exploring a lot of mix blend modes because it was very interesting how you could layer background colors and the modes would act differently based on the colors and that kind of thing. It was one of those things where I always kind of attribute it to it's similar to -- you're a music person.
Chris: Yeah.
Kyle: When artists are in their infancy, they don't know about really genres or tempos and drum patterns or BPMs. They're just making music.
Chris: Mm-hmm.
Kyle: Just what they feel and hear. When they start to learn more about that, they start to corner themselves a little more, and they don't really have that creative freedom as much because they think about what they should be doing.
That's how we get in the design world. We make what we think people should make and that kind of stuff. But I was trying the little things that I thought was just weird.
Chris: [Laughter]
Kyle: I don't know. I still do it from time-to-time but, admittedly, not as much. But I still enjoy it.
Chris: Yeah. I've heard that from everybody that I've talked to. There are lots of people that are creative, but it comes in waves.
Kyle: Mm-hmm.
Chris: Mostly just because of life. You get some new job or you were chasing down some idea you had, and you made 16 of something. Then you're like, okay. I think I got that out of my system.
Kyle: [Laughter] Yeah, totally.
Chris: It doesn't mean that the next day you find some new thing that's immediately your next series of work.
Kyle: Yeah.
Chris: Sometimes it just comes and goes in little waves, which is cool.
Kyle: I definitely have the waves. Moving to Chicago, I saw myself not making as much stuff, but also gave myself permission to experience everything around me also.
Chris: Sure. Yeah, I love that phase where you can't even make it to the grocery store without busting out your phone because you're like, "What road is that, again?" Yeah. That's a good phase. It might last a year or so, and then it starts feeling a little bit more like home. Then you've got to decide, is it time to move again and get that new city feel back or am I digging in?
I'm just learning that the one you have of the women whispering in each other's ears as the base animation.
Kyle: Mm-hmm.
Chris: It's tempting to call it a GIF, but it's a WebP. I didn't even know WebP was animatable.
Kyle: Oh, yeah.
Chris: Learning something every day.
Kyle: That's not -- no....
Chris: [Laughter]
Kyle: I mean, yeah. I put that there. I knew that.
Chris: [Laughter] Yeah. I know everything I do. [Laughter]
Kyle: Right.
Chris: Um... Yeah. And another one you sent me, it's kind of like a music poster of The Undertones - Swissted Animation. I've seen other people pick these up too. What's the story? Aren't they just kind of beautiful posters that beg for animation?
Kyle: Well, you are right there. They come from a website called -- most of them come from a website called Swissted.
Chris: Yeah.
Kyle: A guy named Mike Joyce sells design posters, and they're just like a nod to old man posters that use Swiss design. I can't remember the pioneer Swiss designer. What's his name?
Chris: [Laughter] I know what you mean, but that's okay.
Kyle: But they're all a nod.
Chris: They're all a nod to that style?
Kyle: Yeah, and I know Pete Barr has done a lot of them.
Chris: Yeah, exactly.
Kyle: Adam Kuhn has done some also. Yeah, I picked one that I thought was neat and was like, "How can I animate this?" It was neat.
I think one of the things I used here that was neat (at the time) was transform origin left.
Chris: Right.
Kyle: I remember there are some things you just don't use much, and that's what makes it start at that U and swing it down like that instead of just swinging it awkwardly.
Chris: Yeah, in the middle or whatever. What is the default? I think it's probably center-center, right?
Kyle: I think it's center.
Chris: Yeah.
Kyle: Pete would know.
Chris: Yeah.
Kyle: [Laughter]
Chris: Well, I'll just delete this line of code. Fortunately, there's this online code editor where the code is immediately editable, so you can--
Kyle: Oh, man.
Chris: It's actually really quite fun to make it in the middle, too. Although, it doesn't work nearly as well, nor match the poster. But you can see what you're going for there.
Oh, I see. Then there are just a million P elements that repeat. [Laughter]
Kyle: Oh, yeah.
Chris: It works nicely though. Uh, okay. Wonderful. And so, let's move to the educational aspects a little bit. You work, have worked on, and are currently working on -- and I believe plan to ship -- a "new version" of this soon, frontendpractice.com. Another nice URL grab. Good job. [Laughter]
What is frontendpractice.com?
Kyle: Well, it is probably single-handedly my best purchase on Name Cheap.
[Laughter]
Kyle: I couldn't believe it wasn't taken (at the time). The name alone helps with SEO and stuff like that.
Chris: I bet.
Kyle: But yeah, Frontend Practice, I released it last April. Honestly, we're almost coming up on a year. I released it.
I made it because I wanted to build something that was similar to how I learned how to code, honestly. That was just picking a website and recreating parts of it or all of it, like a page on a website that I thought was interesting or had a neat design.
I think some of the ones I created first was Able 10 or a Starbucks page or record label page and stuff like that.
Chris: Yeah. They all look really practical, in a way. If you were going to get a job in front-end development, this is probably the kind of thing that you're going to be building. They have that vibe but are all still different. You have this one that you're building somewhat of a music player. That's pretty unique.
Kyle: Yeah.
Chris: Some of them -- yeah, I mean they're all quite different in their own way but still have that, like, "Yeah, that feels like the job." [Laughter]
Kyle: Yeah. I try to -- with this first version, I tried to pick stuff that I thought wasn't super crazy. It's not like Site of the Day awards kind of animations and stuff like that. More practical things that you probably will be making. And if not, it's still good things to learn. Yeah.
Chris: What's the site then? Do you just provide the design file and do it? Let's say somebody wants to take advantage of this site. What do they do?
Kyle: Right now, it's very much a start from scratch kind of method. I do that, which, in the future, I would like to have some repos and stuff set up for starter files and stuff.
Chris: Hmm.
Kyle: I also haven't done that yet because I don't want to silo people into how I think they should start it or set up a skeleton and that's how it should be because, I mean you know, there's no one way to do something.
Chris: Right.
Kyle: I think by letting people just pick a page with a blank HTML, CSS, JavaScript file and start from the top and work your way down, first of all, it doesn't force you to use whatever I want you to use. If you want to use Vue, use Vue. If you want to use just HTML, that kind of thing.
But yeah, it's very much a start from scratch approach, but I think that that also teaches you the troubleshooting of setting things up from scratch, when you're new to things and you need to go through these motions, and also just starting a project from scratch and seeing it through to the end instead of being handed a 500-line CSS file and saying, "Now we're going to make this one piece." You know?
Chris: [Laughter] Yeah. Yeah, I like this approach then. You give people just enough that it really is begging for front-end development on it, which is kind of the point. You know?
Kyle: Yeah.
Chris: You're preaching to the choir here. It's kind of how I made my career was this kind of like -- you know I also made a video series of this kind of thing and helping people break it down and stuff. I never did it in a world where Next.js existed, but I certainly would and could. It's still the same thing. It just requires slightly different thinking, like, "How would I break this up into components that make sense for the project?" which would be kind of a fun way to do it.
What do you see? Are you seeing "students" do this? If somebody picks one up and does it, do they tweet you about it?
Kyle: I've had a good many people tweet about it. On Tweet Deck, I have a search that's always looking for Front-end Practice, so I catch a lot of people who will share. They'll pick a page, and that's also one thing. It's not like -- I'm not telling you to recreate the entire CSS-Tricks website. I'm just saying, "Here's this one page."
Chris: Yeah.
Kyle: I think it offers a learning opportunity to recreate this page because of X, Y, and Z. And I've had a handful of people reach out and share some things. This one lady, she recreated every project on here.
Chris: Whoa!
Kyle: Which was like ten projects. It was nice. She reached out and told me how it forced her to think outside the box and try things she hadn't learned before.
Chris: Nice.
Kyle: It just made her learn. You know that's the kind of thing that it's for.
Chris: Did you design them all? Did you Figma them up or whatever, yeah?
Kyle: All of the websites, they're real websites, like real companies, real websites.
Chris: Hmm. Yeah, I suppose. Ableton being--
Kyle: At some point, I would like to kind of go through and maybe recreate them all in my own way and that kind of thing. That is one -- probably this year, to add more of an educational aspect to it, a blog, and start dissecting all of these pieces. Start chipping away and showing how I'd make this one and that one and that one.
Chris: Mm-hmm.
Kyle: That's kind of the next big step is to make it more of an educational platform.
Chris: Yeah. Cool. Good luck. I mean it really deservers it here. You obviously have a good eye for what teaching front-end development takes here.
Kyle: I appreciate that.
Chris: It's nice to have them all connected into a place where they're all -- because you can go to Dribbble and look for designs too, and there are literally millions of things to find. But Dribbble is for showing off, in a way, so sometimes they're a little extra too fancy or they're cropped, so you can't really see the complete page, which isn't enough to work from and stuff. I'm sure there's plenty of stuff to find on design sites like that, but this is like, all of these work. [Laughter]
Kyle: Exactly. You can go to the actual website and dig into the dev tools. In my opinion, these are real websites, so this is real practice for someone that is making money using this website. It's not like a fake idea website. These are real. They're designers and developers. They deemed it good enough, so it's definitely good enough to practice on.
Chris: Yeah. Indeed. You pointed out some other people's work too, which is just kind of a fun thing to do here on CodePen Radio, just calling out some other people's excellent work around the CodePen land a little bit. You mentioned Adam. I think you called him Adam "kun" and I was always calling him Adam "koon," and now I'm feeling--
Kyle: Oh, I'm probably butchering it. Sorry, Adam.
Chris: No, I'm sure I'm the one ruining it. [Laughter] But Adam is @cobra_winfrey, who we've had on the show before (a couple of times, maybe). He's just a creative force, and you linked up his Holiday CSSweater Generator, which somehow I had never seen. I feel like, even as a superfan, he's so prolific. You might miss an Adam Pen here and there. This one is particularly fun, though.
Kyle: Yeah. As far as Adam goes, there is a multitude that I could have chosen.
Chris: [Laughter]
Kyle: He is always putting out creative things that feel like set the bar for creativity in front-end development or just development in general. This one always comes to my mind when I think about his work because - I don't know - there's a lot going on and it's just so interesting and so far from what you normally see on CodePen.
Chris: Yeah. Yeah. Just for the people listening, it has this sweater texture on it, which I wouldn't even know how to approach the sweater texture to begin with let alone the rest of the Pen. It's not like he just found some image of a sweater, zoomed in, and made it a repeating pattern. It's literally created with multiple background gradients from scratch, which is impressive by itself. Then it makers a holiday sweater patch of symmetric kind of cheesy looking trees and hearts and patterns and stuff. It's really worth looking at.
You mentioned Jamie Coulter's The Mine, which is just an incredible CSS game that's just in a category by itself of complexion. And Ben Evans's still life painting of lemons, [laughter] which is kind of like, "What?!" [Laughter]
Kyle: I know. I remember when I first saw that, and I was like, this is a joke, right?
Chris: [Laughter] Yeah.
Kyle: Then I go into it, and I already knew when the scroll bar was smaller than my cursor that something serious was going on with that CSS.
Yeah, there are a couple other still life things, and I'm just like, this is art to another level.
Chris: Yeah. Truly. Truly. Thanks for pointing those out. If people haven't seen either of those, we'll make sure that they're in the show notes.
We're over the half an hour I promised you, Kyle. You're a good, talkative guest, and I appreciate that. Any final words for people, advice, questions, or anything to leave the show with?
Kyle: Well, I think, advice, while we're talking about CodePen a lot. I think, when you're first learning to code, just open up a CodePen, start making some weird stuff, and sit back and see what happens.
Explore everyone else's Pens. I can't tell you how much I've learned from just practical and nonpractical Pens. Yeah, there's so much knowledge on the platform and that kind of thing.
Yeah, when you learn to code, just have fun with it. Don't let it stress you out too much.
Yeah, I really appreciate you taking the time to chat with me and having me on CodePen Radio. IT's been awesome.
Chris: It's my pleasure, Kyle. Thanks so much for being on, and I hope to talk to you soon. Take care.
Kyle: Yeah. See ya.
[Radio channel adjustment]