This week I got to speak with Chris Smith! We got to talk about all sorts of things from blogging, to pushing the boundaries of CSS, to logic in CSS, to digging into some of Chris’ most interesting Pens, to Chris’ actual favorite Pen of all time.
Time Jumps
- 00:22 Guest introduction
- 01:19 What do you do?
- 04:01 Using WordPress for a blog
- 05:38 The dangers of logic in CSS
- 08:31 Sponsor: React Summit
- 09:20 How do you use CodePen?
- 12:19 Fallout 4 Pipboy screen
- 15:29 Knots and Crosses Pen
- 20:14 All time fav Pen
- 22:40 Accessibility
- 24:48 Responsive comic book layout
- 27:35 Looking through the dirty glass Pen
- 28:08 The ZX Spectrum Pen
Sponsor: React Summit
Ken Wheeler, Tejas Kumar, Sara Vieira, Tanner Linsley – these are just a few of the names coming to this year’s React Summit, the biggest React conference worldwide. Discover the future of the React and meet thousands of front-end and full-stack engineers!
The format of the event will be hybrid. The first day, June 17, will be streamed from the Amsterdam venue. The second day, June 21, and numerous free workshops will be streamed to the global audience online.
Would you like to participate? Get 10% off on remote & in-person tickets with our discount code CodePen.
Transcript
[Radio channel adjustment]
Announcer: Today, on CodePen Radio.
Chris Coyier: Hello, everybody. CodePen Radio #369. I have a special guest, someone who just does incredible work on CodePen and elsewhere on the Internet, a big fan of him, Chris Smith. How ya doin', Chris? Welcome to the show.
Chris Smith: I'm really good. Thanks very much. A thrill to be here.
Chris Coyier: Yeah. Awesome. You are chris22smith on CodePen as your handle. People might recognize you from the pink background, but you never know.
Chris Smith: [Laughter]
Chris Coyier: You could just up and change it tomorrow.
Chris Smith: Yeah, it's pretty difficult to get a username with my name, so that's why I put the numbers in there.
Chris Coyier: Yeah.
Chris Smith: Harder with domains.
Chris Coyier: There's a few of us Chrises out there, and you have it worse with Smith. That's rough.
Chris Smith: Yeah.
Chris Coyier: [Laughter]
Chris Smith: Yeah, it's petty tough to get a domain.
Chris Coyier: Yeah, I bet. 22 works out just fine, though. Any particular significance there?
Chris Smith: No, just a bit of a lucky number, really, from when I was younger.
Chris Coyier: It's a good one.
Chris Smith: Something to put it out.
Chris Coyier: Mm-hmm. And you're over there in Wales, still, yeah?
Chris Smith: Yeah. It's very, very quiet.
Chris Coyier: And just a front-end developer, right? That's how you're coming at the world. Tell me about what you do and your place in this industry a bit.
Chris Smith: Yeah, so I work for a company called Muddy Boots Software who are now part of TELUS Agriculture. So, it's software that is for the farming and food industries. So, it's kind of following things through from people growing stuff to getting it into stores. And it's tracking data for everything right through, so it's a huge industry there. So, various software products that, yeah, follow that journey.
Chris Coyier: Nice. Okay. What's the company name again?
Chris Smith: Well, it's Muddy Boots Software.
Chris Coyier: Muddy Boots. [Laughter]
Chris Smith: Yeah, and that's because of the origin in, you know, working with farmers.
Chris Coyier: Right. Right. Right. What's your role in the organization? You're pretty specifically a front-end developer?
Chris Smith: Yeah, I am. I'm also a team leader now, so I've got some management kind of responsibilities as well.
Chris Coyier: Mm-hmm.
Chris Smith: Yeah, my main focus is front-end.
Chris Coyier: Yeah. Wonderful. And your website is chrissmith.xyz. Killer TLD. Good job. Love it.
Chris Smith: [Laughter] Pretty hard to get much else. Yeah.
Chris Coyier: Yeah, but you did get that. Had a deep dive into the bucket of weird top-level domains, but got chrissmith, dang it. Love it. Certainly, who knows when that was first released, right? But it wasn't 10 years ago, let alone 20, right? I'm sure at some point you had to migrate to that domain.
Chris Smith: Yeah. Yeah. Exactly. Yeah, I had some pretty weird ones before that.
Chris Coyier: Your personal -- I point people to it because I always think this is interesting when people started their personal site, if you can dig. You don't make people dig. You have blog posts going back to 2008 on that site, so a long time personal website blogger. Got to appreciate that.
Chris Smith: Yeah. I don't really do much on it now. It's kind of -- I've lost my momentum on it a bit.
Chris Coyier: Oh, that's all right.
Chris Smith: I think my last post is about a year old, but yeah, there's a lot on there.
Chris Coyier: Sure. I don't mean to force you to talk about that. But that's okay. I feel like that's personal.
Chris Smith: Yeah. That's fine.
Chris Coyier: It doesn't have to be absolutely actively developed. It's just cool to have one.
Chris Smith: That's it. It's there for when I want it. It's got links to other things.
Chris Coyier: Yeah, and it looks like it's WordPressed up. Near and dear to my heart a little bit. It's a good little piece of software for that. Has it gone through any evolutions besides that, or is it just--?
Chris Smith: No, it stayed pretty solid throughout. Yeah, I discovered WordPress in 2008, and that was it. Kind of stuck with it throughout. I've always loved it as a platform, partly because it's so nice to use. But just the fact you've got things like a mobile app and stuff, it just means you can be out and about. You can suddenly have an idea for a post. You can just start on it offline.
Chris Coyier: Yeah.
Chris Smith: That just makes it easier.
Chris Coyier: That's funny. I haven't heard people talk about that one that much, but you're right. I've used it before, too. They have a pretty first-class citizen mobile app, WordPress does. And it's often pointed out. I've heard Matt Mullenweg say this a number of times. When they made Guttenberg or what they call the block editor now, that it wasn't just designed to be Web-only. It's that it works the same way in that mobile app, too. So, when they're designing that block editor, that kind of block editing experience makes its way to that mobile app as well, which is kind of--
Chris Smith: Yeah. Yeah, it's very consistent. Yeah.
Chris Coyier: To be two totally different technologies and work in the same way is pretty cool.
Chris Smith: Yeah.
Chris Coyier: Yeah, and you just don't get that if you roll your own thing. Sometimes you've got to buy into the larger ecosystem, so you get freebies like a mobile app. Pretty rad.
Chris Smith: Yeah.
Chris Coyier: So, you've written some posts on there. One of them I like -- well, a lot of them I like -- March 2020, "The Dangers of Logic in CSS."
I had this same thought, almost in the early days of CSS variables, which aren't exactly logic but they require logic to think about, in a way. Do you remember this one? What was your thinking?
Chris Smith: Yeah. I mean it's danger as in you can make life harder for yourself. It's not a security danger or anything like that.
Chris Coyier: Mm-hmm.
Chris Smith: Yeah, it's just because you can do so much logic in CSS now with things like the plus and the tilde kind of selectors, and you can do things like the checkbox hack. There's just this danger that you go too far with it, and you end up doing your logic in CSS. Then you make a small change somewhere, and it's a huge amount to rewrite.
Chris Coyier: Right.
Chris Smith: Whereas if you'd done it in JavaScript or something, it would be an easy change. Yeah, it's just kind of the idea is about not making this mountain for yourself to climb.
Chris Coyier: Yeah. Yeah, I can definitely see that. I wonder if--
I just saw, I think it was, in the last month, certainly. There's been a little progress on specs for CSS toggles, which is more of like a specific syntax for basically one of those, like, I know y'all are doing this anyway with things like the check selector. Maybe we can invent a syntax that's more explicit about what you're doing.
Then I wonder how this thinking factors in. Isn't it like, "Oh, at least it's being expressed in a more understandable way, so it solves this danger," or does it make the danger worse?
Chris Smith: Maybe it tempts people into using it more. Yeah.
Chris Coyier: Right. Right. Right. I don't know the answer to that, but it does seem like you're right in that just a little bit of logic on the JavaScript side. It's mostly the syntax that makes it make more sense because when you see input checked tilde div dot show, or something, it really requires some mental gymnastics to understand what's happening there. It doesn't say, "If active then show panel." Those words are pretty close to what you'd read in JavaScript, which makes logical sense (both to yourself and to somebody finding that code later).
Chris Smith: Yeah. Yeah, absolutely.
Chris Coyier: We'll find out. We'll find out.
[Guitar music starts]
Chris: This episode of CodePen Radio is brought to you in part by React Summit. React Summit is a conference. It's coming back with in-person participation.
They're doing a hybrid format on June 17th, which means it's remote if you want to check in that way, meaning anywhere in the world with an Internet connection. Awesome. And in-person in Amsterdam if you happen to be there or can get there or want to travel there. I sure do. Then on the 21st of June, it's an all-remote version of React Summit as well.
React Summit, you all, React lovers, go. Check it out. See what's new. You get 10% off your ticket with the code CODEPEN. Meet the stars of the React.js scene like Ken Wheeler, Tejas Kumar, Sara Vieira, Tanner Linsley. These are just a few of the names coming this year to React Summit.
Again, 10% off remote or in-person tickets with the discount code CODEPEN.
[Guitar music ends]
Chris Coyier: From the CodePen angle a little bit, it's not like we have to dwell on CodePen. I don't care. We can talk about whatever, but I can't help but be curious as to how you use it sometimes and how it fits into your life a little bit.
Chris Smith: Yeah, so in a few different ways. The public side of it, I guess, the published Pens are just generally me having fun with front-end technology, trying things out, experiments. New features come out. I want to play with them. It's a good place to do that. It's a good place to be creative, so I've got that side.
But I've also done quite a lot of work, like for my day job, in CodePen where I kind of do prototyping and design work in there. Where a lot of people might use Photoshop or one of these fancy UX tools, I prefer just to jump straight into code and write, draw out my divs for layout.
Chris Coyier: Yeah.
Chris Smith: And get straight into it. Yeah, I find that's what I like to do. I like to jump straight in and do that. Then you don't have to be translated into code later. It's there and ready to go.
Chris Coyier: Yeah, that's true. That's true. Does it end up collaborative some of the time, none of the time? You create one, you've got a prototype. Then do you show it to someone right in or was it mostly for your own edification?
Chris Smith: Yeah, it's generally to have a bit of back and forth with people. So, if I'm working with someone less technical, it means I can just share a link with them. They can have a look. Then give me feedback. And using live mode and stuff, I can even make changes right in front of them sometimes. Yeah, it's just a good way of sharing bits of UI.
Chris Coyier: I love that particular version of showing off. I think most people are used to meetings being like, you know, you ideate a little bit, and you write some notes, and then next time you get together, maybe there are some reflections on those changes. But you're like, "Oh, no. You mean like this?" Dup, dup, dup, dup. You know?
Which is great because it moves along the timeline a lot faster. There's no reason that we have to wait to look at that. I find that mostly works okay. Sometimes it can be a little distracting because you're like, "Are you listening, or are you playing with your code?"
Chris Smith: Yeah. Yeah, it depends what it is. But it's a nice way to show off, as you say. Yeah.
Chris Coyier: Push along that conversation. A couple of Pens you've got going here, which is fun. We'll link them up in the show notes to look a little bit.
You've recreated the Pipboy screen in CSS. What was that? What was that game? I remember it. It's like you're living in the post-apocalypse a bit.
Chris Smith: Yeah. Fallout 4 was the game.
Chris Coyier: Fallout! Yes!
Chris Smith: Yeah.
Chris Coyier: I loved that game. It was so scary but was also cartoon-y and cheesy at moments. That was so cool.
Chris Smith: Yeah.
Chris Coyier: Then wasn't this on his wrist? He'd bring up a little computer?
Chris Smith: Yeah, that's right.
Chris Coyier: The Pen itself is about the screen of the Pipboy, and it's this green text on a gray background. It has kind of lines through it. What's going on here?
Chris Smith: Yeah, so it's really just when I do more creative kind of Pens. This is kind of where it comes from, really. I don't tend to just imagine things. I tend to see things in other places, like in gaming or in real life.
Chris Coyier: Right.
Chris Smith: Yeah, kind of think, "Could I do that in CSS?"
Chris Coyier: Heck yeah.
Chris Smith: Yeah, so it's kind of not only can I do it; can I do it without putting extra divs in, and can I keep the markup clean and just do it with pseudo-elements and backgrounds and shadows and that kind of thing? It's that being able to challenge myself, really, and seeing if I can do it, which is quite satisfying when you can.
Chris Coyier: Yeah, that's a good point. In this case, it's just -- if you ask me -- 100% semantic HTML. I think that was partially probably the limitation, right? If you wanted to recreate the visual of the Pipboy screen and you had no limitations at all, well, you'd just go into Photoshop, maybe, and get it done here.
Chris Smith: Yeah.
Chris Coyier: But this is being done with perfectly semantic HTML that you'd see on any other website. It has no accessibility problems, nothing at all. It's just a fricken' paragraph, essentially, on the screen.
Chris Smith: Yeah.
Chris Coyier: Then you layer CSS on top of it to accomplish all these effects, which in this case are many. It's the gradient in the background. Perhaps the most interesting to me is the little lines that sit over the text, which are just designed just so. It doesn't really impact the readability. It's just kind of a classy look. Then probably the most striking thing about it is that the screen has this kind of like refresh effect. Slowly, this green gradient thing goes down over the top of it. Not even really any additional HTML at all. It's just a pseudo-element that you're moving.
Chris Smith: Yeah, so there's one pseudo-element which has that kind of way of coming down. And then the lines are just another pseudo-element with repeating gradient, I think it is, over the top.
Chris Coyier: Good thing you only needed two because that's all you get.
Chris Smith: Yeah, exactly. [Laughter] Yeah.
Chris Coyier: [Laughter]
Chris Smith: That is the limitation.
Chris Coyier: Great. It's wonderful. You linked up another one here. HTML and CSS only, Knots and Crosses, or tic-tac-toe, as we might call it over here across the pond. Hilarious, especially considering the blog post we just talked about. "The dangers of logic in CSS," and here you go.
Chris Smith: Yeah. This entirely that. Yeah.
[Laughter]
Chris Coyier: Pretty cool, though. How does it work?
Chris Smith: Yeah, this one is about challenging myself in another way, so it was kind of, yeah, going against that article and saying, "Right, we've got the checkbox hack. How far can we go with it? What can it do?"
Chris Coyier: Yeah.
Chris Smith: Could I make a whole program just doing the logic in there? Yeah, and I managed to do it.
The way it works, it's basically in a form. There are a load of invisible radio buttons that kind of hold state for each square.
Chris Coyier: Each square is either checked or not checked? No, there are three states, right? It's nothing or zero or X.
Chris Smith: Yeah, and then it's using labels over the squares to fire one or the other, knot or cross.
Chris Coyier: Yeah.
Chris Smith: Yeah, the inappropriate option, if you like, gets hidden with CSS, so you can only hit the one.
Chris Coyier: Oh...
Chris Smith: And it alternates.
Chris Coyier: I could see it being, like, accept -- still hard, logic-wise, because there are, I guess, eight win conditions. Three across, three down, and two diagonals.
Chris Smith: Yeah.
Chris Coyier: But eight, either way, so I guess kind of 16. [Laughter] Notably, I was looking for the SCSS, looking for some kind of thing that you're like, "Obviously, I made loops and stuff to help with this," but it's not. It's just regular CSS.
Chris Smith: No. I did it the long way.
[Laughter]
Chris Coyier: Yeah, you sure did. You hand-coded this. Do I have that about right, to hand-code 16 win conditions?
Chris Smith: Yeah.
Chris Coyier: But it looks like that's not quite how it is because you have these comments in there that's like, "After the second turn, this is the logic. After the third turn, this is the logic," which is a different approach that I don't quite get, I guess.
Chris Smith: Yeah. That's for the individual turns, so that's just showing, either showing all the labels that will trigger a knot or a cross because knots always starts. It basically just alternates. I'm sure there's a much easier way of doing that with a mix ... something.
Chris Coyier: Oh, I see what it is. These logics are whose turn is it, essentially.
Chris Smith: Yeah. That's it.
Chris Coyier: Right.
Chris Smith: Then I've got little when conditions at the end.
Chris Coyier: If all you did was say, "Which one do you want to start, knots or crosses?" that would have just doubled the logic.
Chris Smith: Yeah. Yeah, it would. Yeah, absolutely.
Chris Coyier: Oh, that would suck. I see, so it's turn-based logic and then when conditions.
Chris Smith: Yeah.
Chris Coyier: All right. It's still a little beefy. [Laughter]
Chris Smith: Yeah, it is.
Chris Coyier: I wouldn't want to mess with it, but you got it pretty satisfying. Pretty satisfying. You should do battleship next. It'll be easy.
Chris Smith: Yeah, but it's quite interesting when people talk about that whole conversation about is HTML a programming language, which kind of bores us all.
Chris Coyier: Mm-hmm.
Chris Smith: But it kind of shows that you don't need any JavaScript, and you can make a program. I mean it's CSS doing all the lifting, not HTML, but yeah. You can do a lot without JavaScript.
Chris Coyier: Yeah, I mean it's really a combo, though, because the HTML has to be just so. You definitely need to use those squigglies, right? What do you call that, general sibling combinators or whatever? If you decided to put all those inputs in a div or something, nope, it's going to ruin your logic. Clearly, some interplay there.
You know what would be interesting? Because it's just HTML and CSS, I always think of that when I see these examples of interesting interactivity and such. You could put this in an email. [Laughter] It probably wouldn't work in every single email client.
Chris Smith: Yeah.
Chris Coyier: But the ones that are pretty CSS capable, they would take it, I bet. Certainly, Apple mail, you could play tic-tac-toe in Apple mail. That would be cool. [Laughter] Why not?
Chris Smith: I hadn't thought of that. That would be really cool.
Chris Coyier: Just do some kind of decent fallback, and it would be all right, I guess.
You also took the time here to point out one of your all-time favorite Pens, which is an awesome idea. Now I'm going to ask everybody that I talk to that to see if they have one or not. You pointed out one of Steve Gardner's Pens. He's been on the show. Super nice dude. He has an animation newsletter and just a super creative dude himself.
Perhaps you'll recognize one of my favorites. He made this 3D present gun or present cannon, and you shoot presents out of it. This is not that. You pointed out his Clip Clop Clippity Clop CSS only pen. Tell me about that.
Chris Smith: Yeah. I think it's from a while back now, but it's this animation of a horse kind of running across the desert or something. It's beautifully animated. But the thing I absolutely love is you then click it, and it kind of shows all the moving parts in dotted outlines.
Chris Coyier: Hmm. I've never seen this. I'm seeing it for the first time.
Chris Smith: Oh, right. Yeah.
Chris Coyier: Wow!
Chris Smith: It's kind of like he lifts the lid on how it's done, which I absolutely love.
Chris Coyier: Right.
Chris Smith: You kind of realize it's not magic. It's actually moving shapes.
Chris Coyier: A lot of shapes. Perhaps more than you would think. You kind of look at it, and you're like, "I bet there are a lot of shapes there." Then you click it, and you're like, "Whoa! [Laughter] How about 30, maybe."
Chris Smith: Yeah.
Chris Coyier: You know?
Chris Smith: Yeah, there's a lot going on. Yeah.
Chris Coyier: That's fricken' wild. You know I saw, and I was, speaking of horses, I was reading Alex Trost Frontend Horse newsletter the other day, and shared a Pen. Then he added a little clip that's like, "Hey, if you want to see the behind the scenes, go down to line seven," or something, "and add this bit of code," and you'll be able to understand how this Pen is working because it shows some skeleton of what's happening.
I like that. It's even cooler when the author themselves does it. They help you understand what's happening. Wow. It's incredible.
Chris Smith: Yeah.
Chris Coyier: Good work, Steve.
Chris Smith: Yeah.
Chris Coyier: Thanks for sharing that, Chris. I like that there are seven lines of JavaScript and it's just a comment that says, "Why use JS when you can take 20 times longer making it in CSS only?" [Laughter]
I have some doubts, though. I think even JavaScript this would be pretty complicated.
Chris Smith: Yeah, definitely. Yeah, there's a lot of work gone into that.
Chris Coyier: Yeah. You're kind of accessibility-focused, too, generally, aren't you? I don't know. I know we just got done talking about a CSS horse, that probably not particularly huge accessibility concern, but in your general work.
Chris Smith: Yeah, definitely, because we're shipping software and stuff. I think it's a very important thing. As far as I'm concerned, if you're a front-end dev, it's part of the job.
Chris Coyier: Mm-hmm.
Chris Smith: It's not an extra thing you learn on the side. It's quite important, learning how to do the markup right and keep things accessible.
Chris Coyier: Has it come up recently? Have you had any interesting accessibility run-ins? I find that to be common. Maybe I've scooted by for a couple of weeks, but then all of a sudden something will come, and I'll be like, "Ooh, there's one. Got to take care of that." It's kind of ongoing gardening.
Chris Smith: Yeah. Generally, not too bad. We're kind of currently working on a bit of a design system and trying to make sure we do things right from the start.
Chris Coyier: Hmm.
Chris Smith: We don't let anything in is kind of our main focus at the moment.
Chris Coyier: Preventative or something.
Chris Smith: Yeah.
Chris Coyier: At least doing it from the start, which is so rare, right? I think it's more common and, in fact, there's probably a whole industry built around the idea that people don't think about it first.
Chris Smith: Yeah. There's so much work to kind of retrofit and fix things. It's so much easier to start out right. Yeah.
Chris Coyier: Well, that's nice. It's not just idealistic. It's the right approach for saving yourself time, money, stress.
Chris Smith: Yeah, it also seems to fit in well. We do a lot of automated testing and things. It seems to fit in well with that. If you've got an accessible page, it's much easier for a machine to understand the content for testing purposes as well.
Chris Coyier: Right.
Chris Smith: Yeah. It saves us a lot of time.
Chris Coyier: That's cool. I'm looking at a few of your other Pens here. Lots of stuff. Make sure to check out Chris's profile, chris22smith on CodePen, as well as Twitter, I think, right?
Chris Smith: Yeah.
Chris Coyier: Speaking of just accessible content, another one, you have this responsive comic book layout that's pretty satisfying to look at that's really just semantic HTML. Each panel is a div. Each piece of text that's appropriately a paragraph is a paragraph. There are class names to kind of position them where it is. But it has that comic book style in which the panels aren't just -- it's not just three in a row, a perfect grid. The grid is staggered. Some of the column lines don't even line up with column lines below it. It's very freeform.
Chris Smith: Yeah.
Chris Coyier: It looks very comic book-like. But then as you resize the screen, all kinds of stuff happens. It does ultimately boil all the way down to a single column thing if it absolutely has to, but not until the last minute, I feel like. [Laughter]
Chris Smith: Yeah. It was just trying to take something that's a very fixed layout and try to see if we could make it responsive. It's one I've always wanted to take further and put more content inside those panels and see what could be done. Maybe have some animation in there and really try and bring it to life.
Chris Coyier: Yeah. Yeah. It looks good, though. It has some other touches as well, like the speech bubble approach, and then boxes that the text go in aren't necessarily just squares. They have some tilted angles and stuff to them. It really has a cool comic book feel to it.
Chris Smith: Yeah.
Chris Coyier: I think the Flexbox thing is appropriate. I think a lot of times my brain looks at stuff like this and is like, "Okay, how can I do this in Grid because it looks like a two-dimensional grid?" but Flexbox is, I think, more appropriate here in the way that it wraps and the way that there isn't necessarily a strict set of columns. They just fill the space.
Chris Smith: That's it. You don't necessarily want everything to line up. Yeah, it felt like a better choice.
Chris Coyier: Yeah, just let it wrap. Let it wrap.
Chris Smith: Yeah.
Chris Coyier: That's cool, and then that last one just kind of forces itself to be full. Well, not necessarily. Yeah, there's a lot of Flexbox trickery here. That is a little odd. I think if I was forced to stand in front of a classroom right now and tell people when they should use Flexbox and when they use Grid, I'm sure I could recite some pretty simple differences and stuff. But when it gets down to these, it's nuanced, I'll say.
Chris Smith: Yeah. [Laughter]
Chris Coyier: It's definitely not clear cut both ways in that there are situations where you're doing something really one-dimensional that makes more sense to use Grid and doing something two-dimensional like this that makes more sense to use Flexbox. A lot of exceptions, darn it.
Chris Smith: Yep. [Laughter]
Chris Coyier: All right. Any other favorites? I could probably throw some at you. You know there's "Looking through the dirty glass," I remember distinctly because it's just so unusual looking, these layered PNGs that have movement to them that looks otherworldly.
Chris Smith: Yeah. That was based on watching the opening titles of The Walking Dead.
Chris Coyier: Oh, yeah? Nice.
Chris Smith: That was a small extract of that, those opening titles where, yeah, there was this kind of glass effect, so yeah, I wanted to try that.
Chris Coyier: The pinned Pen on your profile at the moment is called the ZX Spectrum, which looks like a very old-timey device. I couldn't even tell you what it does.
Chris Smith: Oh, yeah.
Chris Coyier: It's a keyboard that's a calculator or something.
Chris Smith: It's a microcomputer that's just recently turned 40.
Chris Coyier: Oh...
Chris Smith: It's from 1982. Yeah, I used to have one as a kid when I first got into video games and things. We'd play very basic--
Chris Coyier: Nice, so you'd plug this device?
Chris Smith: Yeah, so you'd control things actually pressing these -- it had like little rubber keys like a calculator or something.
Chris Coyier: Right.
Chris Smith: Yeah, it was like this home computer that you could program yourself and do things, except nobody did. Everybody just played games on it.
Chris Coyier: Yeah. Right. I know a lot of people are nostalgic for, like, the Commodore 64 and such. That's one that I had.
Chris Smith: Yeah.
Chris Coyier: I loved that thing. I absolutely loved it. And the only thing I ever did is put a disk in and play a game. I didn't learn to program it. Pfft. Get out of here. I was playing Commando and shit. Yeah, that's cool.
This is great, though. I had Sarah Fossheim on a couple months back, I think.
Chris Smith: Yeah.
Chris Coyier: She's made a bunch of Pens that are kind of an homage to old technology like this is. Kindred spirits in that regard. Yeah, very cool.
Well, Chris, thanks so much for being on the show. Is there anything you want to leave people with for your fellow CodePen people, advice for being as creative and accessibility-minded as you are?
Chris Smith: Not really. As I say, I just see things in real life and kind of wonder, "Could I do that in CSS?" or "How could that be done?" and that's what leads onto these things. Yeah, don't necessarily look online for inspiration. Look offline as well and see what you can find.
Chris Coyier: Yeah, I love that. And if that seems daunting to you out there, and I can get that, right? There are a lot of things in this world that I don't just see it and then want to build it. I'm not like, "Oh, look at that little motorbike. I'll my own motorbike." I'd be like, "I don't even know where to start."
Chris Smith: [Laughter]
Chris Coyier: But the more you know about the Web, I would doubt that Chris here knew exactly how to do everything that he saw. He just gave it a shot. Then the more you learn, the more doors open for you. I suppose we'll leave it at that.
Thank you so much for being on the show, Chris Smith. I hope to cross paths with you someday, and that would be great.
Chris Smith: Yeah. Thank you very much. Also, thank you for teaching me SVG. I got your book a long time ago.
Chris Coyier: Oh, wonderful! Still in print on A Book Apart. Cheers. Talk later, man.
Chris Smith: Okay. Thanks very much.
[Radio channel adjustment]