This week I got to speak with Jase Smith, a kindred spirit bouncing across the designer/developer line out of Denver, Colorado. Before you know it, we’re doing a bit of a rundown of Jase’s career path, all the way from that all-too-familiar fake-it-til-you-make it early days to being a successful developer and mentoring as a form of industry payback.
We didn’t get to talk about as many of them as I would have liked, but Jase graciously made a Collection of some of his favorites. Quite a few explorations of color!
Jase is on Twitter as @CSSBites, has a site of the same name, and is on LinkedIn.
Time Jumps
Sponsor: Reflect
Reflect is an automated no-code testing tool that enables you to shave countless hours off of your end-to-end testing timeline, from writing and maintaining tests to root-causing and debugging errors. Features include cross-browser testing, email/SMS validation, visual validation, and more. All plans include unlimited users and unlimited test creation.
As a special offer for CodePen listeners, get a free t-shirt when you sign up through our referral link. To start your free two-week trial and claim your free t-shirt, visit reflect.run/codepen.
Transcript
[Radio channel adjustment]
Announcer: Today, on CodePen Radio.
Chris Coyier: Hello, everybody. CodePen Radio #377. Another special guest. Super creative dude, loads of Pens on CodePen you should be checking out, and I just can't wait to talk to him for the next half an hour, so Jase Smith. How ya doin', Jase?
Jase Smith: Good. Thanks for inviting me on. This is amazing.
Chris: Yeah, sure. My pleasure. Yeah, we met ages ago, and I think once or twice. Haven't stayed super close in touch, but I obviously follow your work because you just do all kinds of creative stuff on this little thing called CodePen.
Jase: Oh, man. The CodePen stuff is amazing.
Chris: [Laughter]
Jase: It was the 2016 CSS Developers Conference, I think. It was in San Antonio, maybe.
Chris: San Antonio? Yeah. Yeah, man. That one was, yeah, with all those little -- that little river that runs through the town.
Jase: Oh, yeah.
Chris: And the Alamo and all that. Yeah, that's cool. I would have almost guessed it would have been something near because you're in Denver, right?
Jase: I am. Oh, yeah!
Chris: Yeah.
Jase: A CodePen meetup if you were out here for that.
Chris: Yeah, maybe! Did we do one in Denver? I think we did.
Jase: I brought my....
Chris: I was thinking there was a CSS Dev Conf that was in -- I don't know. It wasn't Denver, but it was one of those towns nearby. You know some mountain town. What's the one with the shiny hotel up there? Does that ring a bell?
Jase: Oh, Estes Park.
Chris: Estes Park, yeah, man. There was one up there too, but maybe you missed that one.
Jase: I missed that one.
Chris: It would have been just a little drive for you. Yeah, anyway, @CSSBites on Twitter. That's your website as well. Kind of a CSS dude, as it were.
[Laughter]
Jase: I love it. I love it. all this stuff, it's so much fun. Every job I've ever had (since I started in Web development), I've come to this point where just give me the right class name on the right element. That's the whole point for JavaScript. And let me take over and do what I want to do in CSS. [Laughter]
Chris: [Laughter] Nice. So, what are some of those jobs, though, anyway? I mean how does that manifest itself? You're kind of a creative dude, so kind of a designer and developer.
Jase: Yeah, so my first real Web job was a place called Youth Specialties. It was in San Diego. It's where I grew up. I knew nothing. I went into this job making T-shirts for the youth group, right? I don't know how I got connected to that.
I do know how I got connected to that. It's a long story.
Chris: [Laughter] Yeah.
Jase: My first job was there. I worked there for about five years. We were in charge of--
Half the site was content management, articles and all kinds of content online. It was all done with a PHP site. Every header, every footer was self-contained on each page. There were no includes. This was back in 2000, right?
Chris: Yeah.
Jase: I worked there for about five years. The other half of the company was an events-driven company, so we put on conferences and stuff for youth workers and stuff around the country.
Chris: Right.
Jase: It was pretty cool. I got to go to a lot of fun places. I did that for about five years, and then did some....
Chris: Five years! Interesting. I feel like, similarly, rolled into my first Web job not knowing a damn thing, really. But I feel like maybe a lot of people feel that way about their first job. You've got to scam your way into something somehow.
Then I spent about five years, too, so it was kind of get a little loyalty. You can't be bouncing around too soon. I feel like a year after you start a job like that, you're not all that much better than you were when you started. You know?
Jase: No, not at all.
Chris: You've got to give it some time. Yeah.
Jase: No, there's been a handful of people. Each job, there's been somebody -- more or less, somebody -- that has kind of been in a mentorship position. You know?
Chris: Nice. Yeah.
Jase: So, I love the idea of mentoring and helping the younger Web generation get their feet underneath them.
Chris: Right, because somebody was there for you.
Jase: Yeah.
Chris: Yeah.
Jase: Yeah, so I was at this job -- this was kind of a fun story for me -- working inline styles, right? I didn't understand half of the stuff that was going on. I don't know why they hired me, but they did.
Chris: Okay.
Jase: A friend of mine, he was like, "Hey, Jase, you should learn how to do CSS."
Chris: Hmm.
Jase: I was like, "What's that? I don't understand that." He's like, "Oh, yeah. Instead of doing everything inline, you can just do it in a style sheet thing." I was like, connecting wires. I don't know. I'm out. [Laughter]
Chris: That's so strange. You were basically doing it anyway. You just didn't even know it was possible to pull out into another file?
Jase: I know, right?
Chris: Yeah.
Jase: There's so much stuff you just don't know.
Chris: Yeah.
Jase: And then pick up along the way, so I am eternally grateful to my friend who taught me.
Chris: Yeah, so you pull into another. This is the second job you were at already?
Jase: That was my first job.
Chris: Oh, first job. Okay.
Jase: Yeah.
Chris: So, now you're extracting styles. [Laughter]
Jase: Yeah.
Chris: And then at some point, what? You're five years deep. You feel confident enough to bounce.
Jase: Yeah. I learned quite a bit. Did some database stuff, MySQL stuff, but I jumped into the deep end a few times and drowned a few times.
Chris: Hmm.
Jase: We left San Diego. Had a two-year layover in Alabama before we landed here in Colorado. I did some freelance for a while. That was really tough. We had two little kids.
Chris: Yeah? Did you think that the working from home would help you -- I don't know -- be around more or something? Yeah?
Jase: Yeah, and it just about killed me.
Chris: [Laughter]
Jase: I don't want to do all the business stuff. I just want to make things. Right? I want to make fun things.
Chris: Sure.
Jase: And so, having to go get clients and deal with business and all that stuff, I was like, "I'm not well cut out."
Chris: Yeah. How did you even start? Did you have a good lead right away?
Jase: Yeah.
Chris: So, you're like, "I don't know. I guess I'll just charge you directly." Yeah.
Jase: Yeah.
Chris: Yeah, so you didn't have to bother with making a super promotional personal website and hoofing it for clients?
Jase: No.
Chris: Yeah.
Jase: I tried doing my own website so many times, and I just am never satisfied with it.
Chris: Yeah.
Jase: It ends up being nothing. I have so many failed ideas sitting in my dream house....
[Laughter]
Jase: It's just funny. Okay, so I went from there. We did some freelance for a while. Then I was like, "We've got to get out of here. We've got to get out of Alabama, and I need to get a real job because we need health insurance and all this stuff," blah-blah-blah.
Chris: Right. Right.
Jase: Oddly enough, I went from doing that to being the "Internet Director" -- I'm air quoting here -- of WayFM, the radio station.
Chris: Oh, okay.
Jase: They ... stuff all over the country, and their headquarters was based in Colorado Springs. And so, we moved from Alabama to Colorado Springs. The next day, I started this job, worked there for about a year and a half, and I was in charge of everything. I, again, didn't know hardly anything.
Chris: Wow. Right.
Jase: There was an entire Web team of one and a half.
Chris: Wow. Yeah. Okay. Why did the radio station need a website? I mean everything needs a website, but was it trying to be like a place that you could listen to their radio station on it or something?
Jase: Yeah, they would do a lot of promotions. You can get concert information.
Chris: Yeah.
Jase: Different things like that, so there were like 13 different radio stations.
Chris: Ooh.
Jase: From East to the West Coast.
Chris: Yeah. And you're like, "I can do this. I'm going to be the one guy." [Laughter]
Jase: The one guy, right?
Chris: Yeah.
Jase: So, I built this central content management system. I took what I knew about MySQL and PHP and built this horrible....
Chris: Okay.
Jase: Where all 13 radio stations could pull content from this single repository and add it to their instance of their website.
Chris: Yeah.
Jase: And then put their own content in that they can share with other people. And all I really wanted to do was make the graphics and do the design stuff.
Chris: Hmm.
Jase: But I was like, "Yeah, I can do that. Yeah."
Chris: That's too bad. But you knew that even then.
Jase: Yeah.
Chris: You were like, "Okay." You're writing SQL statements, but not because you enjoy it. Oh, that's too bad, but you felt like you had to do it because, you know, you said you needed a real job and you got one.
Jase: I did until that one -- I got burned out pretty quick on that, and then we moved up to Denver, and then my next big job. I bounced around for a little bit.
Chris: Mm-hmm.
Jase: My next big job was SurveyGizmo. It was based in Boulder. That was another--
Chris: Did you have to move?
Jase: Yeah.
Chris: Yeah.
Jase: We moved from Colorado Springs up to the Denver metro area and have been here ever since.
Chris: Mm-hmm.
Jase: I was at Survey Gizmo for about five years. Their name changed.
Chris: Five years.
Jase: I think they're called Alchemer now - or something. I don't know.
Chris: Okay.
Jase: It's gone through--
Chris: Made surveys, though, I assume.
Jase: Yeah.
Chris: Yeah.
Jase: It was kind of like a Survey Monkey, but not a direct comparison. There was so much capability in that software. That was a fun time. We had a lot of fun. I met a lot of fun people that I still--
Chris: That's interesting. I've never even heard of it, despite also spending some time in the survey business.
Jase: Yeah.
Chris: In a couple of them. But it was more capable? I always think of Survey Monkey as pretty complex, actually. But this was more so?
Jase: A more comparable company would be something like Qualtrics.
Chris: Oh, okay.
Jase: I don't know. Welcome to the survey nerd world, right?
Chris: Yeah. [Laughter]
Jase: Qualtrics was high end database stuff.
Chris: Yeah.
Jase: SurveyGizmo was like this. You can run an entire -- anything you could think of. What ended up happening, and we realized this partway through, was we ended up creating a language that allowed you to create interface with data and do all this stuff online. It was really cool. A lot of fun.
Chris: Wow! There was enough graphics-like work to be done that it--?
Jase: Oh, yeah.
Chris: You didn't burn out as quickly? [Laughter]
Jase: No. No. No.
Chris: Yeah.
Jase: We started inventing question types that people can add. You have to style and design the interactions for those.
Chris: Hmm.
Jase: That's when I really started getting into application design, and that's all I've been doing mostly since is turning away from the marketing side of the Web into the more app-driven side.
Chris: I can see that. What always appealed to me about it is that I've spent so much time doing and talking to other developers, and I don't really plan on changing that. But in the survey space, there was money to be found there because people always talk about verticals when you make apps that are like, this app is for teachers or this app is for women - or whatever - people that are about to get married. You know there's some slice of humanity that it's for.
Surveys always had this, like, "It's for everybody ever." [Laughter] Because it's like, at some point, everybody needs to figure out something about their own market, so there's just more. It's like every vertical. Just kind of a nice place to be.
Jase: One of the cooler projects that I remember from that time, this organization was a nonprofit organization, and they were tracking homeless teenagers. Their deal was they would give them a phone, and all they had to do every day was check in and fill out this survey. "Did you eat today? Did you sleep today?"
Chris: Yeah.
Jase: "Did you get a shower today? What's your general and specific activities?" and things like that. They used our system to track that.
I don't know what happened with that one, but I just thought, "Wow, that's a really cool use case for a survey."
Chris: Yeah. Right. Presumably, the goal was to do some good.
Jase: Yeah.
Chris: Well, that's cool. So, five years there. You sound like you speak fondly or remember the time fondly, which was cool.
Chris: Oh, yeah.
Chris: Now you've leveled up enough that you're probably being mentored and the mentor. [Laughter]
Jase: Correct.
Chris: Yeah, okay.
Jase: ...for somethings. Yeah, so SurveyGizmo. Worked for EMC for a little while, about three years. They got bought out by Dell. They came in doing application stuff, building in-house design systems for other teams to build the software on top of and use our componentry, and that's where I did the flip from the jQuery-centric, DOM-centric development to Angular and the whole Reactivity and all that kind of stuff.
Chris: Really early for that, I'd say.
Jase: Yeah. Yeah, that was 2013 - around.
Chris: Yeah. I don't know when Angular was invented, but it couldn't have been too much before that.
Jase: It was Angular one point something, and it was a nightmare.
[Laughter]
Jase: It was cool. It was fun learning how to do all that stuff. Again, a very dear to my heart friend worked there. I worked with him at SurveyGizmo and then went to work with him again at EMC.
Chris: Ah, yeah. Some small-world stuff.
Jase: Yeah....
Chris: But I suppose it's all Colorado, huh? So, not too small.
Jase: Yeah, it's not a huge -- it's not like Silicon Valley. We call it the Silicon Mountain.
Chris: Yeah. Silicon Mountain? I somehow haven't heard that. I like it.
Jase: At least in the Boulder area and some of the tech center in Denver. Yeah, it's cool. You kind of run into the same people.
Chris: I bet. Yeah. To this day, we still have to explain to people once in a while. We never really built a good solution when Angular went to 2 and beyond where it was more like an assumption of a whole file system and stuff. Angular 1 was kind of built to just sit on top of HTML.
Jase: Yeah.
Chris: That was perfectly fine to use on CodePen. Then we never really--
We kind got around to making projects and making it more React focused and for people who want to use Angular, which is still -- you know they're almost dark matter developers. You know? It's like I don't hear that much about Angular, but there are a ton of people that use it still.
Jase: Yeah.
Chris: Yeah. We hear about it once in a while.
Jase: A lot of my earlier Pens are Angular based because that's where I was at the time.
Chris: Yeah. Yeah. I was way behind the understanding that that was the future. I think I spent a lot of years just being scared of what was coming. After really feeling like, "Ah, jQuery, I get it. I finally get it." You know? I can do anything I want to do with this. Not that I don't have my limits of understanding of stuff, but that next generation of JavaScript, when it came down the pipe, was just like, "Oh, man. This is just totally different."
Jase: Yeah.
Chris: And I totally don't get it. [Laughter] Then part of your brain wants to be like, "Maybe you're just all wrong."
Jase: Right.
Chris: You know? Maybe this is just a bad path, and I'm going to be the right one for not taking it.
Jase: What else can I do because I'm not good at this?
Chris: Yeah. [Laughter] Yeah, what else can I do?
Jase: Yeah.
Chris: Is now the time for me to learn basket weaving - or whatever?
Jase: Right.
Chris: Oh, that's funny. Anyway, we all get over it. Now we know, hopefully, some of us. Or if you jumped ship at that time, more power to you. There are definitely some people out there that are just like, "You know what? I just like the HTML and CSS thing and can stick with that."
You know you hear some stories of that being harder and harder to pull off. You know? That if you're looking -- especially in the job search game. Perhaps you had a job for a long time where you were really effective at just those things, but then you start putting your -- I don't know. Start looking for a job again and all the requirements -- the chances of a front-end job role just saying HTML and CSS, these days, even if you'd end up being a great employee because of your specialty, man, good luck even getting the interview.
Jase: Well, my last three jobs, oddly enough, kind of fall in that category.
Chris: Yeah. Weird.
Jase: When EMC started -- you know the whole culture changed with Dell. For better of for worse, it just was what it was.
At that time, one of my best friends -- his name is Chad -- he was like, "Hey, you've got to come work with me. We're doing this little travel startup." He's like, "We're going to use Vue to do it."
I was like, "What's Vue?" He was like, "Oh, you'll love it."
Chris: Hmm.
Jase: He was right. I love it.
Chris: [Laughter]
Jase: Read things like Zen and the Art of Motorcycle Maintenance, which I'm three chapters in and have been that way for the last six years.
Chris: [Laughter] Yeah, I have a copy of it somewhere, too. I don't think I ever finished it, but I get the gist of it.
Jase: Yeah, right. The search for quality and just breaking things down to their parts and trying to understand what makes things work. And Chad has been this big influence in my life. Again, that mentorship cycle that continuously happens.
He's like, "Let's go do this," and that started a string of he and I following each other back and forth from one job to the next over the past six years.
Chris: Ah, interesting.
Jase: At one point, the travel startup fell apart after three months. It was fun for three months, and then it wasn't. And then I went and needed to get a real job again, and so I worked with another friend of mine at a place called Zoll, which was a medical device company. Here in Denver, there's the data side of it.
Chris: Hmm.
Jase: It's devices like heart monitors, AEDs, and all that kind of stuff. It was all back East somewhere; I think in Massachusetts.
Chris: Okay.
Jase: But the data side of all their online stuff was here in the Denver area, and so I worked there. I was brought in to do the same kinds of things again; build a design system, be the HTML person to help everybody that runs into these problems on the browser.
Chris: Nice.
Jase: That was fun. I loved it. I worked on -- this was first time I worked for a company that had a UX, specific UX team, and everybody on the team was embedded in a different project, but we had like dual citizenship.
Chris: Hmm.
Jase: We would make decisions as a UX team for multiple products going on in the company. That was really neat way to do that. It was cool.
Chris: Nice. Okay.
Jase: Consistency around the products.
Chris: Yeah. It's interesting to see people's full journey like that going all the way from "I don't know anything" to clearly senior and beyond, so that's nice, you know, without losing it, necessarily. You know? No shade on anybody that chooses to bifurcate their career - or whatever. [Laughter]
[Guitar music starts]
Chris: This episode of CodePen Radio is brought to you in part by Reflect. That's reflect.run is the URL. Super cool. /codepen -- go to that to get your free two-week trial and get a free T-shirt when you sign up through that link. So, you might as well, huh?
It's a code testing tool for your end-to-end tests, so you spin up their simulated browser environment, you click around, and you do stuff. Then say, "This is what I expect to happen," and that's the test. You didn't write any code to do it.
Now you have the test. You can run it at any time. Ideally, you kind of run it against your PRs, for example, so it's constantly testing your website, making sure you don't ship things that are broken. That's the value of tests. They're amazing.
Reflect makes it easy to build those tests. It makes it easy to maintain those tests. End-to-end tests are really powerful. If those are passing, a lot of stuff is going right on your website. So, super-duper cool, and it runs cross-browser, which is extra fancy and extra cool: Safari, Chrome, Firefox, Edge. Email and SMS validation.
All plans include unlimited test creation and unlimited users. What a cool tool. Check it out. Again, that's reflect.run/codepen.
[Guitar music ends]
Chris: We didn't get a chance to jump into any of your Pens yet. It's interesting to see how these relate to what you do and what those jobs were. They don't have to. I've talked to plenty of creative people who, the stuff that they make on CodePen (almost on purpose) has nothing to do with their professional work because it's like, "I don't know. I like code but don't get a chance to do this stuff at work, so it's got to come out somewhere," and it comes out through their code instead.
Jase: Yeah. There's definitely a large aspect of that, like the sleepless nights. Like, I have this idea, I want to do something, some stupid little widget that just was so fun to build.
I use CodePen (and still do). I use it a ton for work. I ended up getting one of the Pro accounts so I could keep all that stuff sort of private when it's in development, and some of it there's proprietary whatever because it's work.
Chris: Yeah. Right.
Jase: ...to the Web. It's HTML and CSS. How can you proprietize that? I don't even know if that's a word, but I just made it up.
Chris: Yeah, it can be. Even if it's not proprietary, some people -- I don't know if it applies to you -- are like, "Well, it's still something that isn't out yet. I don't want to let the cat out of the bag," or whatever. Even if it doesn't tell the whole story, it might be a hint that they don't want out there.
I would ask you, just while I have you, on the work thing for a minute.
Jase: Yeah.
Chris: Wonder about keeping things private I think is -- you know we've always kept that promise with Pro is that you mark the thing as private. It does not show up in search. It does not show up on CodePen search. And we do our best to keep it out of more global searches like by adding robot stuff to make sure the Web doesn't index it and stuff. And it doesn't show up on your profile or anything.
But you do ultimately just get a URL to it, which is this unguessable string of characters. Then you can just send it to somebody, and they can see it. CodePen is old enough that clearly that's worked to some degree.
Jase: Yeah....
Chris: But I'm curious if you've ever had any pushback on, "How come people can just see this?!" You know?
Jase: That's such a good question. I don't think there's been hardly any pushback, and I don't know if it's because most of the people that can make that decision either they aren't that concerned about it or they don't understand it or they just don't care.
Chris: Right.
Jase: They don't even think about it.
Chris: One of those three?
Jase: Yeah.
Chris: Yeah, that makes a lot of sense to me. Yeah.
Jase: Or they just trust that the people they've hired are doing the right things. [Laughter] You know? Not blasting stuff out....
Chris: Yeah. Right. Some trust. Actually, those are four pretty strong reasons. We've heard about it once in a while. Somebody will be like, "Somebody is concerned," or maybe the culture of where they are, they're used to typing in passwords for stuff, so there's been some desire to have something that's private. If it's shared with somebody else, it requires some kind of auth. Maybe not, you have to have a CodePen account to see it, but you've got to type in some password or something, and then it will unlock and show you the thing. Even if it's a little theatrical or something, it's more protected than it would be.
Not promising that, anybody listening to the podcast, necessarily, but we've talked about it for years, especially because -- you just said it -- keeping things private was somewhat important to you and part of the Pro feature of CodePen. It's clearly the top-selling Pro feature, which is so funny because, as a product is concerned, making something private was not a particular stretch of technological ability at CodePen. We're working on so much more complicated and solving so much harder problems that we'd like to think that the complicated stuff is why people would eventually go Pro. But just privacy alone tends to be a big one.
Then internally, we're like, "Why don't we double down on that? If privacy is so important to people, why not offer them as much different privacy features as they want?" Maybe we will. [Laughter]
Jase: There's been so many. I loved watching the interface for CodePen change over the years. You know? It's like watching an application grow up. You know?
Chris: Yeah.
Jase: I imagine you've got that sense, too. I've had that sense for....
Chris: It's fun for me, too, but it's more -- I don't know. It might be more fun from the outside because it probably doesn't feel as slow as it does to me. [Laughter] I'm like, "Oh, yeah. We're working on so much stuff that I just want everybody else to see," but we can't just -- I don't know. We have to be very careful these days. We're old enough to know the dangers of technical debt and stuff. But rest assured, we are hard at work evolving this thing, and it's all very exciting.
Jase: Yeah.
Chris: One thing I'd be remiss if I didn't ask you about is color, essentially, because so many of your Pens are some kind of interesting exploration of color pallets or color interpolation or things like that. But you didn't really mention color so far, as we've talked in this thing.
Jase: No. No, I can talk....
Chris: What's the fascination with color?
Jase: I just love color. I've loved color since I was a kid. You know? "What's your favorite color?" that question, right?
Chris: Yeah.
Jase: I can't answer that. All of them. Every color is important. They all have a purpose and a need, and they all convey something in some way on so many different context.
The combination of math that can make color, it just -- I could -- I wish that was my job.
Chris: [Laughter]
Jase: Make things that take math calculations. I'm not that great at math. The Internet is great at math. Right? I'm not great at math, but I love using it, and I love trying to figure out how to sort a random collection of colors into a harmonious, side-by-side display instead of just this random batch of colors that kind of looks like, "Hey, you're too close to the TV," or whatever.
Chris: [Laughter]
Jase: Or old TVs. [Laughter] Yeah, color experiments, just, I can't get enough of them. I love it.
Chris: Yeah, it's so cool. Even just a Pen that doesn't have anything with color. Just to pick one out of the top of your collection, you have this Pen, A Portal to Tomorrow, that's so great. It's a bunch of circles all layered on top of each other, but they're not perfect circles. They have a little bit of -- you know you'd make a circle in CSS, generally, by just border-radius 50%.
Jase: Yeah.
Chris: You know it'll kick that thing down to a circle, but you can always tweak how much of a corner is more rounded than each other. Whatever. Border radius, the syntax for border-radius, could fill a book, really. It's pretty frickin' complicated.
Jase: Oh, yeah.
Chris: But these are, by virtue of that, multi-value. Syntax are a little, not quite circular. Then as they layer on top of each other with some transparency and some different colors and some shadows all hanging off each other, it looks very organic and otherworldly. They're all spinning and very funky.
But if you had to pick one thing that was really making this Pen, it's the color. Really. It's like mostly white and a dark background, but where the edges of the circles are, are such interesting, weird, vibrant colors. It really works.
Jase: Yeah, that one was fun to do, and there's no JavaScript, I don't think, in that one. It's all CSS transition.
Chris: Mm-hmm.
Jase: With hue rotation, transform rotation, using blending modes. When browsers -- you know -- when the CSS spec came out with blending modes, I was like [gasp].
Chris: Oh, is that why these colors look so strange? I bet it is because--
Jase: Yeah.
Chris: --they layer on top of each other and blend. Wow. Juicy.
Jase: And then playing with CSS variables or custom properties, I guess is the official term for those. When that came out, that blew my mind.
Chris: This Pen is from 2016, and it's littered with custom properties.
Jase: Yeah.
Chris: Early days for those. It's cool to see the Web at its best here. This Pen just works absolutely fine.
Jase: And it's so simple. And I heard -- I think I was listening to some streaming music and a song came on. It was like, "What is this song?" I'd never heard of the band before. It's called Vessels, and I'd never seen this album before, but the Vessels' album artwork for their album called Dilate is where the inspiration came for this.
Chris: Oh, nice.
Jase: It's an album cover. It's a nonmoving picture of a design that somebody made. I was like, "How can I do that in code?" and that was the experiment.
Chris: Yeah. That's great. Some of these other Pens have that same kind of vibe. There's a really cool cassette that clearly the inspiration came from somewhere.
Jase: Yeah.
Chris: Some of them are a little private, too, so I will mention in this that Jase took the time to put together a collection of some of his favorite Pens that, I guess with his permission, we'll link up the collection itself. But the collection itself has some private Pens in it, so Pens that you'll see nowhere else. [Laughter]
I love this one, the Huey Luminous and the Views, which is one of those private Pens that I wish wasn't private, but that's your call to make.
Jase: I feel like it's not done. That's why it's private. I'll maybe make it public at some point. But it's like a color pallet collection. You can add your own -- create a collection, and you just hit the plus button, and it adds a random color.
Chris: Hmm.
Jase: Then it sorts them. And the fun part on that one is if you hit the decimate button in the top right corner.
Chris: Right.
Jase: Decimate was this iPhone app that you could take a photo, and it would just glitch the hell out of the photo.
Chris: [Laughter]
Jase: There are a couple of knobs and buttons you can do to it, but it would make some really cool glitch artwork.
Chris: Uh-huh.
Jase: That's the word decimate comes from there. But if you click the decimate button, then you get these little extra controls.
Chris: Yeah, that's awesome. I did not make that connection nor heard of that app, but that's cool. I hope it still exists. Yeah, but even without hitting that, the pinwheel effect of them is all very, very cool. It's one of those shapes that it looks simple, and maybe the more you know about the Web, the more impressed you are by it - in a way. If you didn't know anything, you'd be like, "Yeah, look. It's like a pinwheel shape. Big deal." But you're like, "Yeah, but how do you do that on the Web?" You know.
Jase: Right. It's a bunch of circles that layer on top of each other.
Chris: Yeah.
Jase: With one degree Y rotation or X rotation so that they actually layer. You know?
Chris: Yeah, right. The Z index works out.
Jase: Yeah.
Chris: It's interesting to see that the center actually feels satisfying, too. It doesn't get too glitched out. It's sometimes little stuff like that becomes a problem.
Jase: As long as you're not ... in Safari. Safari doesn't--
Chris: [Laughter] Oh, no.
Jase: ...so well. I love Safari. I've tried to make that my default browser for the last little while or so just to--
Chris: Yeah.
Jase: --I don't know, jump around the room once in a while. I used Brave for a long time, and I'm trying to figure out what breaks, what does Safari -- what can it not handle?
Chris: I don't know. It might be the year of Safari. You might be right. Their pace at shipping new stuff is really darn fast these days.
Jase: Yeah.
Chris: Yeah, it's interesting. Are they going to be--? I feel like there's still a little bit of a race for who is going to ship container queries, like for real for real, first. You know what I mean? Out of beta and all that. They might win that race, which might win them some people.
Jase: Yeah, that would be cool.
Chris: Anyway, there are so many Pens here we could talk about. Sorry we didn't get a chance to talk about more of them, but I'll put the link to the collection in the show notes for people to check out. It was very cool hearing your story and journey and all that. I'm sure people will either see themselves in it in some way or be inspired by it because they're earlier in their journey than you are.
Jase: And stick with it if you're young in this stuff. This is so much fun.
Chris: Nice.
Jase: If you've been around for a while, find somebody to impart your knowledge on because a lot of the stuff that we deal with is such tribal knowledge and it's not written down anywhere. We keep this stuff in our heads. There are so many things that I've wanted to talk about and tell people about, and it's like--
Chris: Yeah.
Jase: You know I fall into that trap of, like, "Eh, nobody wants to hear this." I don't know.
Chris: Yeah. Yeah. Dangerous. Get a blog. Get a blog, Jase.
Jase: Well, that's what CSSBites was supposed to be.
Chris: Yeah. [Laughter]
Jase: Dumb little bite-sized things about fun stuff or useful stuff for CSS, and I think I did one or two posts on it. I'm like, "I'm busy...." [Laughter]
Chris: [Laughter] I know. It's hard.
Jase: But I'm tired....
Chris: It's hard but it's sitting there. It's sitting there waiting for you.
Jase: I know.
Chris: All right. A pleasure to talk, Jase. Take care. We'll talk to you soon.
Jase: Yeah. Thanks so much.
[Radio channel adjustment]