This week I got to talk to Kristopher Van Sant! Again! This time we got to talk about Kristopher’s professional work as well as some favorite Pens.
Time Jumps
- 00:24 Guest introduction
- 01:35 What is Kristopher doing these days?
- 03:57 Working in a niche industry
- 06:11 SEO challenges
- 07:45 Sponsor: Equinix Metal
- 08:28 PPL Mover pen
- 11:46 Grogu toggle Pen
- 14:37 Olivetti Pen
- 20:08 The Ladybehive Pen
- 21:56 Animation on the web
- 25:50 What’s the tech stack for clients?
- 30:20 Shaping text with CSS
Sponsor: Equinix Metal’s Startup Partner Program
Equinix Metal’s Startup Partner Program helps early stage companies level up. Their experts work with startups like GenesysGo and Cuemby to build their competitive edge with infrastructure. Equinix Metal provides real time guidance and support to help startups grow faster. With up to $100,000 in infrastructure credit, access to Equinix’s global ecosystem of over 10,000 customers and 1,800 networks, see why startups choose Equinix Metal. It’s not just about the infrastructure, it’s about the people behind it. Are you ready to go global?
Visit metal.equinix.com/startups to take your startup to the next level.
Transcript
[Radio channel adjustment]
Announcer: Today, on CodePen Radio.
Chris Coyier: Hey, everybody. CodePen Radio #385. A special guest, Kristopher Van Sant. What's up, Kristopher?
Kristopher Van Sant: Hello! How's it goin'?
Chris: Good. You're coming at it just a long-time CodePen community member and over 100 episodes ago, so I guess it was probably a couple of years ago, were on the show with Marie.
Kristopher: Yes.
Chris: Yeah. Well, welcome back.
Kristopher: Thank you.
Chris: Yeah, I've always loved your work and your community spirit. Back then, it was in kind of the heyday of Pass the Pen and some live collaboration stuff, which I'm not sure what the status is of now, but times have changed.
Kristopher: Yeah. Those were super fun. I definitely miss doing all of those. Maybe we can get another one going soon.
Chris: Yeah. Yeah. Maybe. No pressure.
Kristopher: Yeah. [Laughter]
Chris: I didn't mean to drill you about that. But if we can help it, would love to support it - and all that stuff.
But we can do something else this time. Like many guests in the past on this show, I was like, if you feel like putting together a collection of some of your favorites on CodePen, we can talk about some of those. We could get into those. That's pretty fun. You have a bunch of really good ones and a couple of them in the tens of thousands of views zone.
Kristopher: [Laughter]
Chris: A couple of Pens have really hit, which would be fun to ask about. But what keeps you busy these days, otherwise? You're a freelance Web developer, right?
Kristopher: Yeah, well, actually, I was doing freelance for a little while and, just a few months ago, one of the companies that I was doing most of the freelance contract stuff for brought me on full time as an official employee - and stuff. So, yeah, I'm doing--
Chris: Oh, was that welcome?
Kristopher: It was because you get the benefits and all that and just a little bit more consistency with work and stuff. With just the times and the pandemic and all that, I was happy to just have some more consistent work.
Chris: Yeah, I could see that. Yeah, freelancing -- I never really did -- I only did agency work for a little while and never freelanced because different people feel different ways about it. Certainly, that inconsistency would - I don't know--
Kristopher: Yeah. [Laughter]
Chris: --not be a huge problem, but it would worry me just a little bit, so I get the decision-making. What's the main project? You don't have to talk about the details if you don't want to, but I'm curious.
Kristopher: No, that's cool. The company, they mostly focus on dental and orthodontic websites.
Chris: Mm-hmm.
Kristopher: That's, yeah, their specialty, and so that's what I usually do is just build. Get a design.
Chris: What a niche!
Kristopher: Yeah. [Laughter] It's very, very specific, so it's just dentist sites, orthodontist sites, and that fun stuff. Very specific.
Chris: Is it like word of mouth? It is very specific, so I'm curious. Does even scheduling and stuff come into it, or do they use other established systems for that and these are just the websites for marketing and whatnot?
Kristopher: Yeah, it's mostly for marketing. They do have some scheduling tools that they're using and they're growing with what they're doing. But, yeah, mostly like marketing kind of sites for patients to go, learn more about the stuff, and all that.
Chris: Yeah. Fascinating. Oh, gosh. I have so many questions now.
Kristopher: [Laughter]
Chris: It does stand to reason that sometimes you want a specialist. In a way, that's why you go to a dentist and not a freelance - "I'll clean any surface of your body."
Kristopher: Yeah. [Laughter]
Chris: "Just give me a brush." You know you're like, "No... I'll go to an actual dentist."
Somebody who is hiring a person to make a website, I could see why you might want to go with somebody who their whole existence is building websites for dentists. Obviously, they have some experience when they are going to do it.
Kristopher: Yeah.
Chris: But usually you hear specialists for technologies.
Kristopher: Yeah.
Chris: You know? Like you'll hear a WordPress agency or an Angular agency because they know that technology. Not about what they're going to build with it. You know?
Kristopher: Right. Yeah, so they have, too, I think a lot of people or a lot of practices come to them because they have this whole database of content around what dentistry is.
Chris: Oh, content too.
Kristopher: And, like, orthodontists, like Invisalign content or something else that usually you'll go to the dentist for or something, braces content, yeah.
Chris: Right. The last time I was there, I felt like I was even nervous to tell them because they obviously sell Invisalign. I'm sure that's, whatever, half of dentists do. But I did one of those self-service. I did some competitor to it, and I can't remember, but I feel like I was going to get scolded.
Kristopher: [Laughter]
Chris: "What?! You didn't do Invisalign through us? You bastard!"
Kristopher: Yeah. It was funny when I first started doing contract stuff with them. Then you're just constantly looking at teeth because there's so many pictures of people.
Chris: Just teeth everywhere. You're dreaming about teeth.
Kristopher: People smiling, yeah, and I'm like, "Are my teeth okay?"
[Laughter]
Kristopher: Because you're just like, "I'm just staring at all these people smiling and their teeth and stuff." That was funny.
Chris: Oh, my gosh.
Kristopher: I've gotten used to it now, but at first I was like, "Oh, my goodness."
Chris: Don't just me.
Kristopher: Yeah.
Chris: I brush. I brush twice a day. I even floss. I promise.
Kristopher: [Laughter]
Chris: Oh, that's hilarious. Then does SEO come into it? Obviously -- I don't know. You'd think that that would be a big ask. You know?
Kristopher: Yeah. Yeah.
Chris: They're like, "I want to be the number one dentist in Omaha." Obviously.
Kristopher: Yeah, so they have -- on our team, we have folks that specialize in SEO and all that fun stuff. But myself and other developers just kind of focus on building the thing.
Chris: Building the thing. Right.
Kristopher: Yeah.
Chris: Oh, interesting.
Kristopher: Yeah.
Chris: I would think that would matter a lot and in a way that I'm not used to. You know?
When I used to -- I don't know. It's not that I don't care about SEO, but certainly when I was doing CSS-Tricks too, I cared about SEO because I cared about the SEO globally.
Kristopher: Mm-hmm.
Chris: I want to do good for this keyword whether you're coming from India or Canada or the Virgin Islands or whatever. I don't care. I just want to rate good for it. But a dentist in Omaha could care less about how their SEO is in India. That's irrelevant to them. They want local SEO. Very interesting.
Kristopher: Yeah. Yeah, and then it's funny. There are so many dentists that have similar names to what they named their practice and stuff, so I think having the SEO be super specific for them to help stand out and help people find them.
Chris: Yeah. Or like, "Don't go with Dr. Smith. It's not going to work well for you."
Kristopher: Yeah. [Laughter]
Chris: Yeah, that's cool. All right, well, glad things seem to be going okay there.
[Guitar music starts]
Chris: This episode of CodePen Radio is brought to you in part by Equinix. Equinix Metal's Startup Partner Program helps early-stage companies level up.
Their experts work with startups like GenesysGo and Cuemby to build their competitive edge with infrastructure. Equinix Metal provides real-time guidance and support to help startups grow faster with up to $100,000 in infrastructure credit, access to Equinix's global ecosystem of over 10,000 customers and 1,800 networks.
See why startups choose Equinix Metal. It's not just about the infrastructure. It's about the people behind it. Are you ready to go global? Visit metal.equinix/startups -- the link will be in the show notes there -- to take your startup to the next level. Thanks for the support.
[Guitar music ends]
Chris: Let's get into this collection a little bit.
Kristopher: Okay.
Chris: Some favs. Some favs here. As I go through this, there were ones I was hoping you'd include.
Kristopher: [Laughter]
Chris: Like the people mover or whatever PPLMVR. That one really blew up. I remember that a couple of years ago. It's like this band of people in gorilla suits, I think, just jamming.
Kristopher: Yeah.
Chris: The animation on it is just very cool. It's very unique in that there are these line drawings.
Kristopher: Mm-hmm.
Chris: But they're clearly made from parts, and each part of them is independently animated. I don't know. It's just a vibe, yo. It works. [Laughter]
Kristopher: Yeah. That one, I loved that one so much. We went and saw this band called The Aquabats, and this band, People Mover, opened for them. They literally perform in those costumes, and so their identities are super obscure.
As soon as they came onstage and started playing their music, I was just in love with them. [Laughter] And so, then I was just listening to their stuff on repeat, and then saw this art print that somebody had made. I think it's linked in the details, the original art print.
Chris: Right.
Kristopher: But yeah, I was just listening to their stuff on repeat and was like, "I have to make something!" That's where that came from.
Chris: Nice.
Kristopher: Yeah, I literally traced the painting or the art print in Illustrator.
Chris: I was so curious about that. Right? You made these vectors.
Kristopher: Yeah, so I traced the print and then, yeah, broke each kind of thing into -- I think they are all three separate sections.
Chris: At least.
Kristopher: Yeah, and then animated all of those.
Chris: Yeah. They're cool. Some of them have scale. Some of them have some rotation and stuff. Very detailed.
Then like all great Pens that I've discovered through talking with people and, obviously, looking at lots of Pens, there are always a couple of little details to a great Pen that are a little bit above and beyond. It's like, you could have stopped there and this Pen still would have been awesome. But wait, there's more.
To me, the "But wait, there's more," is the cool star background that moves.
Kristopher: Oh, yeah. Yeah.
Chris: Yeah. Very classic. I love that one.
Kristopher: That one, one of their music videos has the star moving kind of animation in the background, so yeah. I was inspired by that.
Chris: Oh, see. It's all different sources come together.
Kristopher: Yeah.
Chris: Oh, that's awesome. I guess the real lesson here is never skip the opening band. You know?
Kristopher: No.
Chris: It could change your life.
Kristopher: Yes.
[Laughter]
Chris: Nice. What's one of your favorites on here?
Kristopher: Oh, my goodness. There's--
Chris: I mean they all are because you put them in here, so--
Kristopher: Yeah, there are so many. Let's see. I actually am really proud of the Grogu toggle because I've never made a toggle. You know toggles are so popular on CodePen.
Chris: Oh, certainly.
Kristopher: And that--
Chris: There's just something -- almost like if you see a toggle on CodePen, you're like, "All right. What crazy thing is it going to do?"
Kristopher: [Laughter] Yep, so that one I had the idea for a while. But I don't have a ton of experience making SVGs in Illustrator, so it took me a long time to figure out how to--
Chris: Did you have to hand draw this one too?
Kristopher: Yeah, I didn't hand trace it.
Chris: Yeah.
Kristopher: Just making little shapes and putting it all together. But the hard part for me was trying to figure out, since he pops out and is layered.
Chris: Yeah.
Kristopher: To figure out how to layer all the little details of his crib.
Chris: The thing is this is his little -- yeah, it's his little floating crib thing that he hangs out in.
Kristopher: Mm-hmm.
Chris: Which was just amazing that that exists at all in the world. But the way that it opens, it opens from the middle.
Kristopher: Yeah.
Chris: It's not like a lid, like a breadbox or something. It opens up like an eyeball would, or something. Yeah, that's very interesting. That would be tricky for me too. Probably a lot of setting the transform-origin correctly - or something. I don't even know.
Kristopher: Yeah. Figuring out which things come first in the SVG because I think part of the crib is kind of cut.
Chris: Yeah, exactly.
Kristopher: Then I had to get him to line up close so that he would be in front of the back and his ears would overflow on the edge.
Chris: Yeah, they've got to overflow. This would be half the Pen if they didn't stick out like big Grogu ears.
Kristopher: [Laughter]
Chris: I love that stuff when you have an idea and it's so infectious that you're like, "I will figure out whatever it takes to get these stupid ears to pop up."
[Laughter]
Kristopher: Yeah.
Chris: There's the little something extra here. His head comes up and bobs a little bit too.
Kristopher: Mm-hmm.
Chris: It would have been cute if he just came up, and you're like, "Oh, there's Grogu." But it doesn't stop there. He does his little head movement thing. You know?
Kristopher: That's one of my favorite things about Grogu is the little dog head turn thing.
Chris: Yeah. That's the best. That's the best. And he's always so kind and does the right thing.
Kristopher: Yes.
Chris: Then he'll just eat an entire giant frog or something.
Kristopher: Yeah. [Laughter] Yes.
Chris: That's the best.
What does the word Olivetti mean? [Laughter] I see the Pen, and it's a beautiful grid thing, but it feels like it's meaningful somehow.
Kristopher: Yes, so that one -- I love this one too. It's an ad for Olivetti (however you pronounce that) typewriters.
Chris: Oh...
Kristopher: They were a typewriter brand, I guess. This one is one of the first ones that I did where I was like trying to do a lot of responsive where it just changes a lot when you scale the browser or even playing with viewport height stuff.
Chris: Right.
Kristopher: Yeah, there's a link to the original ad and the details, and so I started with that and then just played with kind of breaking it down and resizing it, making it look different everywhere.
Chris: Yeah. I'm a fairly small laptop right now, and so if you look at the thumbnail of it, to me it evokes Swiss design.
Kristopher: Yeah.
Chris: Everything is very, like, this is a grid and we're not afraid to show you the grid. You know?
Kristopher: Mm-hmm.
Chris: There's big, bold lines. Really cool colors too.
Kristopher: Yeah.
Chris: Blacks, reds, and grays. Then that's echoed in the name of it too. But if you looked at the thumb and you opened it on a pretty small browser, you'd just see exactly what the thumbnail does.
Kristopher: Yep.
Chris: But there's a certain height of your browser window. If it's taller than that -- I think that's how it's set up -- then it's like, "Oh, but now you are granted full access to the ad," and the ad is really beautiful too in that it utilizes the grid but breaks it a little bit too.
Kristopher: Mm-hmm.
Chris: Just really cool looking. It looks like you'd be paging through an old magazine or looking at screen grabs of old magazines. It'd be like, "Yep, that's how old ads used to look."
Kristopher: Yep. [Laughter] Yeah, and then if you scale super small, so the smallest you can go width and height, it literally is just the Olivetti.
Chris: Oh, there's--
Kristopher: And, like, nothing else.
Chris: Whoa! That's the most extreme media query I've ever seen.
Kristopher: Yeah.
Chris: It's tiny. Its tiny, little baby. Yeah.
Kristopher: Yeah.
Chris: Yeah, that's cool. It shows you. We do so much boring, day-to-day, like the breakpoints are, you know, basically tablet and phone. But you're like, "Did you do super tiny or super big?"
Kristopher: Yes.
Chris: I love that kind of stuff.
Kristopher: Yeah, so these I just love playing with all the vintage. There are so many cool vintage ads that, when you look at them, scream grid.
Chris: Yeah.
Kristopher: It's a good--
Chris: Scream grid and, in this case, literally CSS Grid.
Kristopher: Yeah.
Chris: Was the tool of choice here. I like the usage of text-align justify too. You don't get a chance to use that very much, but it means the right edge of the text becomes a line, too, in a way that left, you know, ragged right doesn't. Very cool. Just a gorgeous ad. You know it means of the Web, you know? It's beautiful, and any different configuration of it looks nice. but when it moves and morphs to any screen size, ooh, that's the good stuff.
Kristopher: Yeah.
Chris: That's the Web doing what it's good for.
Kristopher: Yeah.
Chris: I assume these dentist websites are responsive too, right? That's the world you live in?
Kristopher: Yeah, they're responsive too. Obviously, since they're more professional, you don't get to be as fun and weird with some of the stuff, unless it's like the pediatric websites are my favorite because those can get really funky.
Chris: Oh...
Kristopher: If you go to a pediatric dentistry, there are always animals or it's like an ocean theme or some kind of creatures everywhere. Those we get to be more creative with what we do.
Chris: My four-year-old daughter has gone two or three times now. Not that many. She's a relatively young thing.
Kristopher: Yeah.
Chris: But yeah, I hadn't thought that they have a kid-themed website just for her or, really, for mom to look at.
Kristopher: Yeah.
Chris: Kind of verify that it looks a certain way. Yeah, that's awesome. That's great. I would love to make a kid-focused website in that way. You get to use bright colors.
Kristopher: Mm-hmm. Yeah.
Chris: Yeah.
Kristopher: Those ones I just love because we get to just do more animation and just really quirky things because they want it to be really playful versus another site, they're like, "We're super serious and professional," and so you can't do as much weird stuff.
Chris: Yeah, that's tricky. I don't really want my dentist to be playful, really.
Kristopher: Yeah.
Chris: Yeah.
[Laughter]
Chris: Interesting. Yeah, it reminds me. I've got to look into that because we just got the bill for our pediatric dentist the other day. I was like, "Oh, that's right. I don't really have her on dental insurance on our plan at work, but maybe I should." You know? Because I was like, "Oh, dang. Is that what dentists cost?"
Kristopher: Yeah.
Chris: Yeah.
[Laughter]
Chris: Dang. All right, well, we might as well do some other ones here. The Ladybehive is fun because, speaking of grids, it's grid-like in that is hexagons, but certainly not CSS Grid. This is more SVG at work.
Kristopher: Yeah. This was one of the first -- I think one of my first -- attempts at making an SVG in Illustrator.
Chris: Mm-hmm.
Kristopher: I had zero clue what I was doing, how to make all the things. And so, I think, if you actually were to look at the SVG or somebody who is a true SVG expert were to look at the SVG code, they'd probably be like, "That's such a mess."
[Laughter]
Chris: I don't know. It depends. You'd have to be a real snob, I think, to think that.
Kristopher: Yeah. [Laughter]
Chris: But it does have that vibe, right? I just saved SVG out of Illustrator and copied it and pasted it in here. But guess what it does perfectly. It looks exactly how you want it to look.
Kristopher: Yes.
Chris: Yeah.
Kristopher: I love the little bees and their little fluttery wings. This one, Steve Gardner did a wood laser-cut print of this one.
Chris: Oh, yeah?
Kristopher: And so, I have that now in our home.
Chris: Oh, that's rad.
Kristopher: This one is super special because I just loved how it turned out. Yeah, I didn't know I could do that.
Chris: Yeah. It looks beautiful and there's extra community involvement. That's great.
Kristopher: Yeah. And so, yeah, now that I literally have a tangible thing, like an interpretation of it, it just makes it even more special to me.
Chris: Yeah. The hairdo on the lady is just the best. It alternates.
Kristopher: The beehive. [Laughter]
Chris: Yeah. It's a beehive haircut. But just the way it's stylized looks so beautiful. And the fact that it's only done in two colors that alternate, it's just really--
Kristopher: Mm-hmm.
Chris: Just a classy look to it, I'd say.
Kristopher: Thank you.
Chris: Once in a while, you get to do animation stuff, particularly on a website that's pediatric-focused. You just get the green light more, or do you try to sell it once in a while?
Kristopher: They just are -- the doctor for those are usually just more open to it. Yeah, they want it to be more unique and more playful and stuff to, I guess, evoke how children are more just carefree and fun.
Chris: Yeah. Yeah.
Kristopher: Usually, we can just do what we want with those and don't really have to ask too much permission, which is nice.
Chris: Yeah, that's cool. I remember I worked for Wufoo back in the day, and the lead designer Kevin Hale, his schtick for the design of the website was a little risqué of a choice at the time was to use bold reds and yellows and stuff. And he would say that it's like if Fischer Price designed a form-building website which, in the end, worked great. I don't know. Somehow, it hit the right cord or something that this was okay to do and that people still trusted it and still used the result of it even though it felt kid-like at the time.
Kristopher: Yeah.
Chris: Because the competition was the exact opposite. The competition was really grays and blues and beiges and stuff, like, "This is for business, and it does important business things." Then to have Kevin come along and turn that all on its head and still have it click somehow is always pretty cool. I don't know. Maybe that's an open door for somebody out there to - I don't know. It's tempting to use stock art of somebody's nice teeth.
Kristopher: Yeah.
Chris: But you can -- I mean don't turn it on its head and show gross teeth. That's not going to work.
Kristopher: Yeah. [Laughter] Yes.
Chris: There might be some unexpected turns you can twist to capture people's attention. I don't know.
Kristopher: Yeah. I think it just makes it more human and relatable when you can add some just more fun stuff.
Chris: Yeah. Yeah, it depends on what the vibe is. Of all the dentists I've had in my life, I remember the one I had in Milwaukee, Wisconsin, the most because I think the dentist was a younger woman, not that that necessarily demands her personality to be one way, but she was a pretty fun person. I think she hired fun people.
Kristopher: Uh-huh.
Chris: Then the vibe in there was very -- they went for the, like -- I don't know. Maybe this is a trend in dentistry or something, but it was a little bit like a spa and there'd be chill music playing. Some of the chairs had little neck massagers built into it and stuff, like, hey, why not.
Kristopher: Oh... I want to go there.
Chris: Yeah. They'd always be laughing.
Kristopher: It'd seem more comfortable.
Chris: Yeah, so that brand, you could pull it off on, whereas--
Kristopher: Yeah.
Chris: Maybe some other brands, you couldn't. It depends on who is behind it all. Yeah, that's interesting stuff, though.
Kristopher: Yeah. I think lately there's been several that have been really into the SVG line drawing kind of thing.
Chris: Oh, yeah?
Kristopher: So, we've been seeing that come around with sites where they have an illustration of something, and they want to do the line draw effect.
Chris: Yeah, have it draw itself.
Kristopher: Yeah.
Chris: Nice.
Kristopher: Those are usually for those kinds of dentist offices that you're talking about that feel more pretty and spa-like.
Chris: Yeah. Then what tech can you--? What's the stack of, say, the most recent one you worked on?
Kristopher: We mostly just use HTML, CSS, JavaScript.
Chris: Ooh...
Kristopher: We do everything in Less.
Chris: Yeah.
Kristopher: But I think we're getting GSAP soon, so that will be--
Chris: Oh, not animation framework. That's cool. So, there's no CMS necessarily when you crack these pages together. They're just raw. It's the raw tech?
Kristopher: They have their own -- the company has its own little CMS that they've custom built that everything is built on top of.
Chris: Oh, I see. Okay. It uses some proprietary something.
Kristopher: Yeah, there is some templating PHP stuff. But it's mostly, yeah, custom to the company.
Chris: Ah, okay. Okay. What choices do you have then? If you're doing HTML and CSS and whatever JavaScript animation, are they grid-based, or are you still thinking about IE 9 and stuff?
Kristopher: [Laughter] Thankfully, there's not too much worry about IE anymore. But we--
Chris: That's good.
Kristopher: Yeah.
Chris: I can imagine, behind the desk, though, at a dentist's office. If anybody is going to have an old PC still kicking it--
Kristopher: Yeah.
Chris: Yeah.
Kristopher: We usually will check to make sure that certain stuff looks good in IE. We can do Flexbox and Grid, as long as we have a fallback for those because, yeah, there are some offices that will have older clients or just people who might have older devices and stuff that you have to think about.
Now, recently, yeah, we're getting to use more of the new CSS stuff and just more new things, in general, compared to when I started there several years ago. They kind of discouraged some of that. There was a lot of just display inline blocks, a lot of floats, and all that kind of stuff.
Chris: Yeah, there are always two things. There's reality, like what do the users actually need. What are the expectations? Then some middleman of, like, what your boss and people think is necessary.
Kristopher: Yeah.
Chris: Yeah, it's tricky.
Kristopher: They're just kind of simple sites, so you don't need really React or Vue or any of that.
Chris: Yeah.
Kristopher: We use jQuery still. [Laughter] So, just classic.
Chris: Whatever. They're classic content sites.
Kristopher: Yep.
Chris: I was almost excited that you didn't have any CMS at all. That would have been kind of cool, or some really basic includes kind of setup or something.
Kristopher: There are -- yeah. We do have the includes for our PHP.
Chris: Yeah.
Kristopher: There's some templating and stuff going on.
Chris: Yeah. But I see if you have this arsenal of content that builds pages for the site, you probably do want some kind of CMS, so that's good.
Kristopher: Yeah.
Chris: Then it just would be a different story if it was self-service appointment making or something, and the website had to support anybody who could log into their account and then change when their appointments were or something.
Kristopher: Yeah.
Chris: That's just different, but I don't know. Certainly, my dentist is like, "You need to change something, you call, and we'll change it."
Kristopher: Yes.
Chris: Yeah. [Laughter]
Kristopher: There's a lot of that, and we do have--
I haven't ever seen the inside of this, but there is a patient portal that people can go to, to log in.
Chris: Mm-hmm.
Kristopher: Then they do have a lot of -- there are a lot of plugins and widgets for scheduling that are for, I guess, the medical industry. We use a lot of those to just plug in this little snippet.
Chris: That's kind of nice, actually. Somebody else has done the work for it.
Kristopher: Yeah.
Chris: Just use it. Yeah.
Kristopher: Yeah, you just plop in their little widget code, and then a little button will be on the site for somebody to schedule appointments or something.
Chris: Yeah. Oh, gosh. God bless you.
Kristopher: [Laughter]
Chris: Scheduling, that's one little script away. Thank you.
Kristopher: Yep. [Laughter]
Chris: You have a couple of Pens in your favorites that are dealing with the CSS concept of shape outside. It's like being able to shape text into shapes that aren't rectangles necessarily.
Kristopher: Yes.
Chris: One of these is called just CSS Shapes Layout Experience. It has some cheetahs at the top and a GIF or video background kind of thing.
Kristopher: Yeah.
Chris: Then it's great. It's this off-kilter triangle and, at the tip of it, the tip touches some text that then mimics that same shape, which is really striking looking. To this day, despite this being not particularly new anymore, you just don't see it all that much.
Kristopher: You don't.
Chris: Yeah.
Kristopher: I finally got to use shape-outside on a recent site, and I was so excited. It was similar. It was like a triangle shape. Not as dramatic as this one, but I think a lot of people either don't know that you can still do this or they're like, "My site is super professional and this is too funky to do."
Chris: Hmm... Yeah.
Kristopher: Maybe you need to have a more artsy site or something.
Chris: Or something. I wonder if it invites it more without a CMS because as soon as the CSS is involved, and assuming it's kind of comprehensive in that it means that you can update whatever on the site--
Kristopher: Yes.
Chris: The text that goes along with this is very important.
Kristopher: Yes. Yep.
Chris: If you were to just dramatically change this text or put a block quote in the middle of it or put an image in the middle of it or something that a CMS would allow, the chances of it turning out nicely like this are pretty slim.
Kristopher: Yeah.
Chris: I particularly like what's below the triangle, though, these little wavy columns.
Kristopher: Uh-huh.
Chris: That's probably the most interesting use of shape outside I've ever seen, maybe, but it's the same technology, really, underneath it, right? Shape outside and whatnot.
Kristopher: Yep. It's still that and then how you were talking about earlier using the text-align justify.
Chris: Oh, right.
Kristopher: It's my favorite thing with shape outside because that is what will give you the really smooth edges on both sides.
Chris: Both sides, which are necessary here.
Kristopher: Yes.
Chris: It would look so weird otherwise, I think.
Kristopher: Some of these, I think, are the more ideal, like the shape inside that I still dream of. That doesn't exist yet. [Laughter]
Chris: Yeah, there's only shape outside, right? Not shape inside.
Kristopher: Yep.
Chris: Shape outside means you've got to float something.
Kristopher: Yeah.
Chris: Then the things fall against the float, whereas shape inside would be like, "Just go in here." I see this is paired a lot with you are also using clip-path. The cheetahs at the top and the lightening bolt at the bottom, in order to clip it like that, you've got to use the very similar but different clip-path.
Kristopher: Yes. Whenever I do the shape outside stuff or clip-path using Firefox as my favorite because they have the path editor, so--
Chris: Oh, exactly! It's one of the reasons that I pop open Firefox still.
Kristopher: Yeah. [Laughter]
Chris: I'm not trying to show shade at Firefox. Firefox is great. But that tool is amazing.
Kristopher: It's the best.
Chris: Yeah.
Kristopher: Most of my demos with the shape outside, I go in and literally move the little points on the path to get it to line up exactly how I want it. It's just so satisfying.
Chris: Yeah. It's so great. Yeah, I love how the -- and I like how clip path uses -- it actually uses--
You can use pixels or REMs or EMs or whatever, too, but it's pretty common to use percentages because then if the whole size of the thing changes, it'll scale along with it.
Kristopher: Mm-hmm.
Chris: Which just makes perfect sense. Whereas some recent -- like offset path or whatever in CSS is similar to all this, but it only supports the path syntax, which just uses SVG-like numbers that don't have percentages or anything.
Kristopher: Mm-hmm.
Chris: It means they map to pixels. I was like, "Oh, this is so half-baked."
Kristopher: [Laughter]
Chris: They don't scale like clip path does. A nice little touch here is when you overlap the text over. The images use text-shadow. That's exactly the same color as the background color.
Kristopher: Uh-huh.
Chris: It gives it a little bit of a vintage look that I think is really cool.
Kristopher: Yes, I think you can see, looking at all of my Pens, there's definitely that vibe that I like going for. [Laughter]
Chris: Yeah.
Kristopher: Just like being super inspired by vintage stuff.
Chris: Yeah, I guess you're right. Vintage for days here. I love it. Do the cheetah images have that red color naturally? Do you even remember? I don't want to put you on the spot here. Is that a filter or something?
Kristopher: Those are doing the mask effect thing that Cassie Evans does a lot with doing the two different GIFs.
Chris: Yeah. Oh, there are two GIFs happening there.
Kristopher: Yeah.
Chris: Oh, I didn't even notice that. Oh, that's awesome.
Kristopher: It's like layering one GIF on top of the other kind of thing.
Chris: Yeah. Oh, man. That makes it twice as cool now. [Laughter]
Kristopher: Because, yeah, I love all her demos with that, so that, I think, is what inspired this one was like, I want to do that, and trying to figure out a way to combine that with the shape outside and doing the kind of funky layout.
Chris: Oh, man. This is tricky, tricky. I love it. I didn't even notice that. Now I'm obsessed with it. Yeah, they're not. The cheetahs, if you just look at the GIF that you have uploaded to regular CodePen assets, it doesn't look anything like how it ends up.
Kristopher: No. [Laughter]
Chris: Nothing at all. Oh, that's amazing. That makes it so much cooler. [Laughter]
Kristopher: [Laughter]
Chris: All right, well, I've kept you long enough. Thanks so much for taking time to talk about what you're up to--
Kristopher: Yes.
Chris: --and what you're building and how things are going. I really appreciate it.
Kristopher: Yes. Thank you for having me.
Chris: Yeah. Yeah. Yeah. My pleasure. Take care, and I hope to see you soon.
Kristopher: All right. Sounds good. Thank you.
[Radio channel adjustment]