You might recognize Ben Evans from his absolutely incredible CSS “paintings”, like the portrait of his daughter or the still life. Paintings aren’t the quite word as Ben designs them all to be entirely scalable. And sometimes they have interactivity, like the slight parallax in the Vaccum from Space. Like so many other great artists, Ben’s skills aren’t isolated to CSS trickery, his portfolio reveals artist exploration across nearly every creative outlet there is, including moss, and as I learned in our conversation, even music.

Time Jumps

  • 00:42 Guest introduction
  • 02:02 Working in mediums other than computers
  • 03:42 How do you do this with just CSS?
  • 06:48 How many divs are needed for hair?
  • 11:00 Is it easier to use a drawing app or divs?
  • 13:50 Sponsor: Notion
  • 15:38 Why do you build these?
  • 17:25 SVG vs CSS
  • 19:44 How did you end up in tech?
  • 26:51 Learning Blender
  • 28:35 Making a CSS game
  • 31:52 What are you excited about in the future?

Sponsor: Notion

For companies of all sizes, Notion provides one central and customizable workspace that can be tailored to fit any team, and bring all teams together to get more done and move faster. Notion is an all-in-one team collaboration tool that combines note-taking, document sharing, wikis, project management and much more into one space that’s simple, powerful, and beautifully-designed. Find out how Notion may be the missing piece your team needs to grow, get more done, and delight everyone who uses it in the process.

Transcript

[Radio channel adjustment]

Announcer: Today, on CodePen Radio.

Chris Coyier: Hey, everybody. It's CodePen Radio #346, and I have a special guest with me today who has done some incredible work on CodePen. That's how I know them, but then (as you'll find out) has done incredible work all over the place and in different mediums. I'm so interested to hear more about that. It's Mr. Ben Evans. How ya doin', Ben?

Ben Evans: Hello. I'm good. Thank you for having me. I'm honored.

Chris: Well, it's my pleasure, really. There've been a few things that you've put on CodePen (kind of over the years) that I think have blown a lot of people's minds. It's possible that they're listening -- they've seen those things and are listening to those podcasts and can put those things together. A couple of them are a CSS only portrait of a child's face: Isla.

Ben: My daughter, yeah.

Chris: That's your daughter! I didn't know. Just incredible. Then a still life -- maybe it was one of the first ones I saw -- of a glass of water and lemons. More recently, this big [laughter] mechanical monster with legs.

You always put pure CSS in the title, so it's one of those things. When people see that, they're like, "Are you kidding me?" You know? [Laughter] What kind of magic allows that to happen? I'd love to talk about that.

But then your website is tinydesign.co.uk. When you pop over to that--

Ben: It's very old. I've neglected it.

Chris: I see. The old personal website problem. But even if it's old, it's still things that you've literally done. You can go and see. Oh, gosh. Ben has done -- you know, he's just like us. He's done just website builds, WordPress, and whatever else, for Disney and Marvel, and some interesting clients. Responsive design work and that type of thing.

But then also, painting, sculpture, drawing, and all kinds of artwork, too, that has nothing to do with computers, or at least not on the surface. There's a lot going on there, Ben.

00:02:22

Ben: [Laughter] Yeah, well, I started off doing paining, obviously, and kind of went to college. Did a foundation course in art and design. A foundation course is -- I don't know what you call it in America -- you try everything to see what you like best.

Chris: Oh, interesting. Like, I don't know what I want to do when I grow up, so let me try it all. Okay.

Ben: Yeah, so I tried it all. Then you're supposed to sort of pick one and then go to university or something with that one you could pick. But I couldn't ever actually decide [laughter] what to do.

Chris: [Laughter]

Ben: I enjoyed so much.

Chris: Ah, interesting.

Ben: Yeah, I ....

Chris: Was art just one of the things that you try in a foundation course?

Ben: Oh, no they're all art.

Chris: They're all art.

Ben: It was animation to start with. Then I did fine art. Then I did illustration. Then I actually went to university to do illustration. But then I went back and did -- I did a foundation course three times.

Chris: [Laughter]

Ben: I went back and did sculpture after that.

Chris: Sculpture, yeah, I see some photos. I know you consider your own website old, but there are some - you know - one that you listed as concrete and moss as the mediums in use.

[Laughter]

Ben: Yeah.

Chris: Yeah, you don't see moss listed very often as a thing.

Ben: [Laughter]

Chris: If we fast forward a little bit and talk about the CSS stuff, then I think it would be interesting to circle back and see how it's all related (in a way). I think when people see something like a CSS portrait, it'd be interesting to cover the basic questions of what somebody might ask and see if that matches up with what you've actually been asked.

Part of it is, "Holy cow! How?!" Tell me how it's done.

00:04:14

Ben: It's not -- it's pretty basic stuff. It's just moving divs around into different shapes and sizes.

Chris: [Laughter] Quite literally there's no -- you didn't design special software that just happens to output in that way or that helps you find--

Ben: Right. I wish I was clever enough to do that but sadly not. I just spent days just moving divs around. [Laughter]

Chris: Absolutely. But is it -- you know if you were talking about how you would do an oil painting, you'd probably start with some foundations and build up vertically from there.

Ben: Well, from the first ones I did, I worked out that you can't use z-index, so you can't correct your layers mistakes quite easily with z-index--

Chris: Okay.

Ben: --because it doesn't work. I think it was ... didn't work, so you have to plan ahead and work from the back.

Chris: Right. Interesting. Don't even try. If z-index comes up in something this complex, just start over or move the DOM around?

Ben: Or you can just move the stuff around, yeah. Yeah, you have to work from the back.

I did a few paintings on the back of glass before, so I was aware you have to work the wrong way around for that, so you have to start at the foreground because that was in the back of the glass, which would be the front.

Chris: Oh, my gosh.

Ben: You have to work backwards to the back, and you even have to sign it backwards because it'd be the other way around.

Chris: Wow! Not the case here. At least with this, you could kind of -- if you needed to go down to the bottom (temporarily) you could, right? You could comment on some stuff?

Ben: It's semantically correct.

[Laughter]

Chris: I notice you don't always stay away from things like pseudo elements and stuff. Is that because you want some tight connection between one element and another?

Ben: I'm a bit obsessed with using as little HTML as possible, which means I use every part of every -- I say div, but I don't call them divs. I just make up--

Chris: Make up something. Sure.

Ben: Make up something. Yeah, so I use the div in the before and the after.

Chris: Yeah.

Ben: And do whatever I can. I don't go into Lynn Fisher's standards of making everything in one div.

Chris: [Laughter] Right, where she uses -- yeah, comma separated shadows and gradients and all that to get a bunch of "free elements," I guess. [Laughter]

What else is to know there? Some of this stuff has -- you know just looking at the portrait of your daughter, there's hair! How many divs do you need for hair? You just add a couple and then you're like, "Nah, that's not enough. I need 82 more"?

00:07:05

Ben: Yeah. They're all done in different ways depending on which kind of bit -- how that bit of hair looked. Some of it is stripey backgrounds or radial backgrounds. Some of them are just lots of divs next to each other.

Chris: Yeah.

Ben: That's usually the easy way because you can just repeat it.

Chris: Right. Right. Right. Right. That's not always -- It's not always just a -- some of these are -- it's every trick in the book, right?

Ben: Yeah.

Chris: There's shadow and gradient.

Ben: That's the fun -- that's what I love about it is you get to your section you want to do, and you go, "Well, how am I going to do this with CSS and just ... boxes?"

Chris: Mm-hmm.

Ben: And so, you have to kind of work out the best way to achieve it. Like with the portrait one, I think I went a bit too far, and it kills most people with browsers. It's too much.

Chris: [Laughter]

Ben: Too much going on, so I try to avoid that. Although, my last one was a bit -- my vacuum from space is a bit heavy.

Chris: Yeah. It's the opposite way around on my computer. The vacuum from space kills it, but the portrait is fine. You never know. You never know. That is the pain of too much DOM, though, I guess.

Ben: Yeah.

Chris: It just can't do it.

Ben: I'm trying to find the balance. For the vacuum from space, I tried to avoid using image filters as much.

Chris: Mm-hmm.

Ben: Like masking to see if that helps. But no, it doesn't, sadly.

[Laughter]

Chris: Interesting. What's so fascinating to me about these, I mean there are a hundred things I could list, but I wouldn't even know how to draw one piece of hair let alone every other thing going on here.

CSS doesn't give you a way to draw a curve that isn't just kind of boring, like border radius. You can do a little bit with it, but it'll end up looking like border radius. But you have curves that seem to follow any curve that mimics reality here.

Ben: Yeah. [Laughter]

Chris: I always think of, do you ever get that, "Why not SVG?" or something? Which I don't really like the premise of that because, you know, why not use any other kind of technology?

Ben: Yeah.

Chris: But surely, it crossed your mind.

00:09:32

Ben: Yeah. Go back to the point of the hair. It's just box shadowing on a border radius, so it sort of gets narrower, so it looks more like hair. You can mix colors up.

Chris: Oh, that's how you get the tapering at the end is that it's cut off by the nature of the box shadow is only on one side of the element?

Ben: Yeah.

Chris: Oh...

Ben: You just got it on one side. To go back to the other thing, I originally fell into doing CSS drawing. I was illustrating. I was writing a book -- or trying to write a book. I'm not very good at writing. I'm dyslexic, so I'm terrible at it.

Chris: Hmm.

Ben: But I sort of pushed my boundaries and go for write a story and illustrate the story. And so, it was laziness that I couldn't be bothered to get an illustration package. I couldn't afford one, really, and I didn't really want to pick up a paper and pen. So, I thought, "I'll just do it with CSS." [Laughter]

Chris: That's amazing! So, if you had something like the latest copy of Adobe Illustrator or something, maybe you would have reached for that--

Ben: Definitely.

Chris: --but that cost money and divs don't. [Laughter]

Ben: Yeah. Exactly.

Chris: Wow! Yeah.

Ben: Yeah. I do avoid work in illustration.

Ben: CorelDRAW was always one of my favorite things, which is an old thing.

Chris: Does it feel like 100% easier to use CorelDRAW than divs, or does it feel almost somewhat similar?

Ben: It's similar, really.

Chris: Yeah.

Ben: Uh... CorelDRAW, well, it's more like drawing, like technical drawing, whereas drawing with CSS is more like painting, I think.

Chris: Hmm.

Ben: Because you're layering it up.

Chris: Yeah. Yeah, the layering. Interesting. I just think of some of those primitive UX experiences like having a pen tool where you just click here and then click and drag and produce a curve. But that seems - I don't know - somehow more what I expect from drawings whereas, in HTML, you've got be like angle bracket body part, and then move over to a CSS panel. Think of the X-Y position of it and stuff.

Yours often are scalable as well, aren't they? That's an interesting side effect of it. I think certainly a lot of drawings are just kind of exact coordinates. You've managed to not do that. In fact, even the vacuum from space is beyond just scalable but also has some movement to it, doesn't it?

00:12:22

Ben: Yeah. Yeah, I think I've made all of them responsive. I'm very used to doing responsive stuff.

Chris: Right.

Ben: I mean the first one I did, the glass, I used M, EM to make it, and then just scaled the M depending on the width (to make it responsive). Then I've moved on to REM when I realized that was far better.

[Laughter]

Ben: It's pretty easy to do. You just use REM for everything. Then you scale the font size, the group font size, with the browser width.

Chris: But there's no JavaScript. You don't have to do it that way.

Ben: No. The root font size is a view width.

Chris: Oh, a viewport unit or whatever?

Ben: Yeah.

Chris: Oh, my gosh.

Ben: Everything runs off that, so it just scales itself. It's quite simple.

Chris: Oh, my gosh. So, there's no -- really hardly any trickery at all. You just set that root font size once. REM was easier. Was M the trouble? Occasionally, you like to do nesting, right?

Ben: Yeah.

Chris: If you have some area of the drawing that it's easier to position things with more localized coordinates.

Ben: Yeah. You can use M in some cases (if you need to do that) based on different sizes.

Chris: Yeah. I'm a REM guy myself, but I also am not a CSS painter. [Snorting laughter] I just set font sizes on websites.

Ben: [Laughter]

00:13:50

[Guitar music starts]

Chris: This episode of CodePen Radio is brought to you in part by Notion. Learn more and get started for free at notion.so.

Not all work collaboration tools are created equal. Some help you organize your company's information, like wiki or - I don't know - folders full of Word files or whatever. Others allow you to manage projects together, so they're designed specifically for project management only.

Notion does both and more, really. I think it's kind of famous for that. Like, "I used to use these three tools and now I just use Notion," and it can happen organically. It's not like Notion on purpose is like, "Put your to-do lists over here. Put your wiki over here." It's not regimented like that. It does it in a more soft spoken, elegant way where it's just documents.

You organize the documents how you want, and these documents are nested, and they can really be anything. They can look like a document. They can look like a checklist. They can look like a database or spreadsheet of information that you can access all over the place. They can have synced blocks, and the design of them is just beautiful. You can really do anything with it.

We use it for all kinds of stuff at CodePen ourselves. We use it for managing projects and displaying our databases like Kanban boards where people have tickets and they're assigned to them, and they're dragging them around and having conversations in them. But we use it to take notes for what's happening during our week. We use it as a company database for things like employees and information about them.

I use it to take private notes and to have little meeting notes between me and my cofounder - things like that. Notion can do all of this stuff. It's really been game-changing (over the years) for us at CodePen. Really, every other project I work on, I make a new workspace in Notion.

You can check it out on your own and invite as many other people as you want to see how it works. Take the first step toward an organized, happy team today, again at notion.so.

[Guitar music ends]

Chris: Well. Well, amazing. What have other people asked? I have questions of my own, but when these go out, usually they make a bit of a stir, right? I'm sure you watch the comments roll in (any number of places). I'm sure they blow up on Reddit and whoever knows what else. What do people say? I'm sure it's mostly amazement, but--

Ben: It's mostly, "Wow!" or something like that, or the most common other one is, "Why?" [Laughter]

Chris: [Laughter] Right.

Ben: Yeah, I don't really know why other than I like to push the boundaries. I think it's in one of Lynn Fisher's YouTube videos where she said that you can only become a master at something by understanding it completely. So, you have to push the boundaries to the limits, which is kind of what I'm trying to achieve by breaking everyone's browsers in the process.

Chris: [Laughter] Yeah. That's kind of an unfortunate side effect.

Ben: [Laughter]

Chris: I wish that wasn't. Don't you wish that wasn't the case, that you could load one of these up and it would cause no problems whatever? But I guess then you're not finding the limit, huh?

Ben: Yeah. Yeah. I'm trying to find the limit. I do go a bit extreme sometimes.

Chris: [Laughter] Yeah, I think you answered the "why" pretty well. There's definitely some interesting stuff in there.

Also, let's say you just chose SVG instead. To me, it would be the same struggle. You'd just be using a different syntax, but you'd be doing the same type of work. It would just be using the path syntax instead of a transform and positioning. It would be just trading one thing for the other.

00:17:48

Ben: The thing I like about CSS is you're not supposed to use it for that, so it's like breaking the rules. Whereas SVG, I mean that's what it's for.

Chris: That's true.

Ben: That's a bit boring.

[Laughter]

Ben: I like the way that, as browsers change, things start to fall apart. That means every drawing is a bit like a sandcastle. Eventually, it disintegrates over time.

Chris: [Laughter] Yeah, I wonder if that will -- because there's enough fancy CSS stuff in use here that I wonder if, ten years from now, if you loaded this up in a browser, will it render exactly the same or will there be subtle things that--?

Ben: I don't think so. There was quite a big change recently to 3D transforms that broke quite a lot of it. There's a lot of people on Twitter saying, "Oh, no. Nothing. My CodePen is broken because of the 3D transforms."

Chris: Yeah, right, and that's just one thing, right? In ten years, there'll probably be more.

God, it reminds me of something. Oh, that's terrible radio when the host is trying to remember something, but I feel like there was something like this. I don't know if it was a CSS drawing, but it kind of showed screenshots over the years, and it did deteriorate like a sandcastle. It progressively got worse.

Ben: It might have been Dianne's first one.

Chris: Yeah! I think that is what it is because she's -- yeah, she's been at it for a while and browsers have evolved since that first one. How interesting. Yeah.

Or maybe this is what it was. Somebody picked it up and they tried to load it in IE6 or something.

Ben: Oh, yeah. Yeah.

Chris: What does it look like in a browser that doesn't support border radius? It ended up looking terrible but interesting. You know? Yeah. [Laughter]

Ben: Like Picasso.

Chris: Yeah, exactly. Exactly.

I was going to ask you about art school in that you did it. Not only art school, but all these foundation courses as well. How did you end up in tech then? What's the story, the life story?

00:20:00

Ben: I think the case was that I couldn't find -- I kept doing the foundation course because I couldn't really find the thing that I was really wanting to do.

Chris: Mm-hmm.

Ben: And so, I dropped out and became a manager in a cook shop.

Chris: Well, there you go.

Ben: Then they needed a website, so I decided to build it and learnt and taught myself how to build it from basically Googling stuff.

Chris: Yeah.

Ben: Mostly looking at your CSS-Tricks site.

Chris: [Laughter] Well, that's funny. Yeah, some people have the -- "I was in a band and we needed a website." You were at a restaurant and needed a website.

Ben: Oh, yeah ....

Chris: Yeah. [Laughter] Of course.

Ben: Good point. That was before the cook shop.

Chris: [Laughter] Yeah, so many stories like that. I love that, too. But there must have been something else there, like some desire to create and desire to share. Even--what was it--this week? You have a new Pen where there's some kind of calligraphy or scripted text, and then you use CSS techniques to kind of [laughter] replicate that. Pretty interesting, but it's accompanied by a YouTube video. So, there must be some kind of desire in there to share process. Yeah?

Ben: I really want to be good at making YouTube videos, but I'm really bad at it (at the moment).

Chris: [Laughter] Yet another tech skill.

Ben: Yeah. I want to get into it more, but I'm struggling to find a piece of software that can make stop motion videos well.

Chris: You work for eight hours. Nobody wants to watch an eight-hour YouTube video, right?

Ben: Yeah, so I screenshot every single movement and I've just got this huge bank of screenshots that I just copy/paste into something.

Chris: Hmm.

Ben: There's something I can't find-- [Laughter]

Chris: There's got to be something. I bet you could do it at the OS level, like tell your computer to take a screen shot automatically of your entire screen every eight seconds, or whatever it is. Yeah, maybe. I'm sure you'll find it.

I had a designer I worked with (back when I worked at Wufoo) who wanted to get into that, but from a boring but just UX design thing. Like, "I'm literally going to sit down for four hours in Figma, Sketch, or something. I want people to see what it's like, all the mistakes I make and the weird things that I try, and watch stop motion of that." He figured it out somehow, and I feel like that's what it was.

He certainly didn't hit Cmd-Shift-4 or whatever.

Ben: [Laughter]

Chris: But that's what you did, huh? That's how you made that latest video?

Ben: Yeah. Yeah. I've made videos of all of them, and I always just do a screenshot of every single movement, as I do it, so it's quite easy to do.

Chris: Yeah, so it's locked into your mind, like, "Oh, there's a little moment." Boop, and you hit the key command.

Ben: I basically press Ctrl-F5 and then press Windows print screen every time.

Chris: Yeah, and then they just plop into a folder. Then you--

Ben: [Laughter] Yeah.

Chris: Hopefully - hopefully, the next part after that becomes easier. You found a way to automate a series of images into a video, I hope.

Ben: Well, that's the problem I'm having. Everyone I find -- I'll probably have to pay for one. Everyone I find, the last one was a bit blurry.

Chris: Oh--

Ben: The one before that was really bad UI. I couldn't get used to it.

00:23:22

Ben: Anyway, the latest CodePen, the pipe, was supposed to be--

Every now and again, I keep going back to the same thing of trying to write procedural generated CSS.

Chris: Hmm--

Ben: That's how that started. I thought, I'll just copy Magritte's pipe and do it with procedural generated CSS, but I worked out, after doing about - I don't know - 100 lines of it, that it looked like I'd used some software to do it. So, I thought, [laughter] I better not so it.

Chris: Oh, so you're talking maybe like use loops and math and stuff to do it? Yeah.

Ben: The loop could fill the variables from a map, and the map would just be every single REM and percentage.

Chris: We can't see that one because you threw it away, or whatever. You didn't like the result.

Ben: Yeah. I put a screenshot of the start of it on Twitter, but then I abandoned it. And so, it'd be interesting to make Magritte's pipe in 3D. It's really difficult to make a tube three-dimensional, so I thought that would be my challenge for that one.

Chris: Yeah, I can't even imagine. Uh! You kind of hover over it in different spots and it turns left to right and top to bottom. What's the trick? Is it too secret? [Laughter]

Ben: No. The top of it and the tip of it are both natural three-dimensional. Then the rest is flat, apart from I'm moving the shininess around to make it look 3D.

Chris: Oh...

Ben: It's not perfect, but it was great. It will do. [Laughter]

Chris: Yeah, you could be fooled here because there is basic 3D stuff in CSS, right? But like you're saying, really it's just the top of the pipe. What's the other part? You said you used -- by that you mean literally translate 3D, right?

Ben: Yeah. Rotated on the X-axis and the Y-axis.

Chris: Yeah, but not the whole thing because every time you see 3D tutorials in CSS, it's a cube. You know?

Ben: You'd have to have a lot of divs to map -- wrap the whole thing into the cone shape.

Chris: Yeah, that'd be about two pixels wide each, right? Yeah. I see. I see. Yeah. Even if you see something that isn't a cube, it looks like the complexity immediately skyrockets, you know, something that has six sides instead of four or whatever.

Ben: Mm-hmm.

Chris: To make it circle, you just have to fake it, right? You'd have to have 200 of them or something. Ay yi yi yi! I'm sure that'll be your next thing, though. [Laughter]

00:26:16

Ben: Yeah. I keep messing around with 3D a bit. The vacuum had parallax scrolling, but not proper 3D. The reason I did that one (the vacuum from space) was because I wanted everything -- most of the other things I'd done before were copies from photographs whereas this one couldn't possibly be a copy of a photograph because it's something that doesn't exist.

Chris: Right.

Ben: I wanted to do something completely original, and so that image doesn't exist anywhere other than there. It's not a tracing of anything. It's just there. I had to learn Blender in order to work out how to draw the machine. [Laughter]

Chris: No kidding! Really?! Then you could have output from Blender, but then didn't. Then started over.

Ben: Yeah, well, I kind of traced the image from Blender, but tracing is quite hard. My new video about the pipe is about tracing. Tracing is quite hard because once you cover the bit up, you can't see it.

Chris: [Laughter]

Ben: So, it's not as easy as you think.

Chris: Can't you opacity 0.5 or something?

Ben: Yeah, but then you can't really tell the levels of the shine and all that kind of thing.

00:27:30

Chris: Oh, yeah. Yeah. You screw yourself one way or the other. [Laughter] Yeah.

I had a job one time where my whole job was to cut clipping paths over photographs. It was a place that sold furniture, but they had--

Ben: Oh, I did that when I built our shop's website. Yeah, that's funny.

Chris: Oh, nice. You know I probably did 50 a day - at least. They didn't want -- they wanted each image to be saved as a Photoshop file with a variety of masks, so here's just the couch, and here's the couch and the lamp, and here's the couch and the family and the lamp all in one clipping path and a separate clipping path for each.

Ben: [Laughter]

Chris: It was a thing, and there was a lot of that. I need to trace around the edges just perfectly, but also I've got to see what I'm doing, so the line can't have much thickness to it or be a color.

Ben: Yeah.

Chris: Otherwise, you're covering. Like you said, you're covering up the information that you need. Oh, fascinating.

There are so many other things. You've made a CSS game as well -- quite a fun one, actually -- that you have to click around and figure out what's going on with the game. It's not really teaching you the rules as it goes, but there's kind of a win state at the end. Yet another artform that not everybody has. Just because you're good at CSS painting doesn't mean you're good at game design as well. Was that yet another - I don't know - challenge you decided to set your sights on?

00:29:02

Ben: I just had the idea how to do it. It's based on another game that's quite good, but I can't remember the name. Called Townscape, I think, which is quite a fun game. I just thought that would be fun. The vision, the idea was sticking, clicking on two -- what are they called -- checkboxes and building a house. As they connect with each other, they change.

Chris: Mm-hmm.

Chris: If that makes sense.

Chris: It's that check selector in CSS kind of powering it with the old tilde?

Ben: Yeah. Yeah, exactly. I mapped out a whole sort of if it was four squares across, you had a different image than if it was two squares across.

Chris: Mm-hmm.

Ben: I drew a different sort of house for each one. Then I realized about three months into it that there were so many possible combinations that that was impossible to do. I would never finish. So, I had to work out a way to do it.

Chris: With just less combos?

Ben: With less combos but also get it to work. Say if you build up from the ground, they come up as brick houses. If you build up from the trees, they're like treehouses. They shed. If they touch each other, then you get a yellow house if it was once a treehouse. There are lots of--

[Laughter]

Chris: Weird little rules? Yeah.

Ben: ...in the background. I just wanted it so people could mess around with it, basically.

Chris: Yeah, and it had the right level of challenge where you definitely didn't just click-click-click, "Oh, I got it!" You definitely had to dig in there and think. That's such a weird thing to think of that CSS, as a language, is capable of expressing that.

Ben: The bit I found fun about it was ... code is on CodePen, you can obviously hack it yourself to win if you want or you could ... the code to work out how it....

Chris: [Laughter] Sure. I wonder how many people did. Probably a few, but it's more fun to click, certainly. It's just a different game to search through the code. It's not like it would be immediately obvious, probably.

Ben: No. Some people worked out, somehow, from the -- I left the checkboxes up in the top corner. I can't remember the checkboxes or radio buttons.

Chris: Oh, I see, that you could just click those instead? Yeah. Nice. Like a debug mode.

Ben: Yeah.

Chris: Yeah, that's great. Nobody is paying you to build that or these still lives, certainly. This is just an expression, right?

Ben: Yeah, just what I do in the evenings to pass the time.

Chris: Yeah, that's a crossword puzzle for Ben Evans, I guess.

[Laughter]

Chris: Is there anything kind of -- do you keep an eye on browser tech? Is there any particular tech stuff you're interested in (coming down the pipe, or anything like that)?

Ben: I haven't seen anything.

Chris: Yeah, that would change your -- capture your interest. That's okay.

00:32:11

Ben: The most recent one that happened is having gap into flex because I use Flexbox all the time.

Chris: Oh, I bet. Yeah.

Ben: I didn't really get into Grid that much. Grid is very similar to flex, except that you can do a few other things with it. Then when they put the gap from grid into flex, it was game-changing.

[Laughter]

Chris: I agree. That's such a big one. It was such a pain in the butt, otherwise, to have to think about, "Well, I guess I'll use margin, but then I've got to remove it in one spot, and it kind of messes up my math - or whatever - because I have to pick--"

Ben: Yeah.

Chris: I can't say I want the gap in the same FR units. Flex sometimes just has no units with the flex grow and all that.

Ben: Yeah.

Chris: Yeah, it's like gap, one REM, call it a day. I love it.

I was just messing with it this morning, again, and I had just two things next to each other and put a flex gap between them. They didn't wrap quite where I expected to go. It's there and it's useful, but I think there might be a little bit of smoothing out to do there a little bit.

I'm also curious. A lot of people that I've talked to that make big, complicated CodePens don't actually use CodePen for the process, at least during the authoring. They use something else and ultimately paste it in there. Is that true for you as well? Does it start somewhere else, or do you occasionally use CodePen itself?

00:33:40

Ben: I'm so used to Visual Studio that I use that for everything.

Chris: Yeah.

Ben: But if I go on holiday, I use CodePen because I take my Chromebook with me rather than something that Visual Studio will work on.

I once built a zero div animation. I don't know if it was a girl. It looks a bit like my daughter, but an animation of that walking with no divs at all. It's just an option on the body class.

Chris: Just ... yeah. It's just body and before and after, but you didn't even need after.

Ben: Then it's box shadows.

Chris: Ah, yeah. Nice.

Ben: That took ages to draw all those box shadows, so I did that whilst on holiday and I used CodePen to do that. Although, I actually broke CodePen because it's too big for it. [Laughter]

Chris: Yeah, there's some perf file size limits there, I think, that might catch you.

Ben: I've had to link to the CSS into my domain from CodePen, which is good. CodePen is so flexible that you can do all those kinds of things.

Chris: Yeah. Nice. Yeah, that makes sense.

Early days, you don't exactly quite expect what people are going to do with it.

Ben: Right. [Laughter]

Chris: Even if we did have this particular guess, I'm not sure that we can optimize for the CSS oil painting use case. [Laughter] Anyway, that's cool.

It's interesting that VS Code probably will run in your Chromebook these days with that vscode.dev and stuff.

Ben: Yeah, code does. I don't use ... actual Visual Studio rather than code.

Chris: Oh, you use actual Visual Studio. Wow, the big daddy. Cool.

Ben: But recently, I used Video Studio code if I need to search for anything because the search in Visual Studio is abysmal.

Chris: Oh, my gosh.

Ben: [Laughter]

Chris: You'd think they would be on par with all the best features. Well, anyway, that's funny. Well, it was a pleasure to talk to you, Ben. Is there anything else you want to share, point people towards to have them check out? You are @ivorjetski on Twitter.

Ben: I have a jet ski. Yeah. That's why I'm called that, which is from school, I think.

Chris: [Laughter]

Ben: It stuck.

Chris: Just stuck. I get it.

Ben: Yeah. Yeah. No, I'm there. I put most of my links on all the things. I'm on Twitter. I'm usually on Twitter the most.

Chris: All right, Ben Evans on Twitter and CodePen, @ivorjetski, and the website is tinydesign.co.uk. But as Evan says, it's old.

Everybody's website is old. [Laughter]

All right. Take care. It was a pleasure to talk to you, Ben.

Ben: Thank you very much.

[Radio channel adjustment]