I got to speak to Jon Kantner! Jon is an incredibly prolific creator, and I believe has the most appearances in the CodePen Spark of any creator. Like so many other creators I’ve talked to Jon also shares what he knows in a variety of ways, like writing (see his personal site, or articles he wrote when I ran CSS-Tricks). We got to chat about some of his iconic Pens, his work, and some past fascinations like Tweet-sized code experiments. Follow him on Twitter here.
Time Jumps
- 00:26 Guest introduction
- 02:44 What’s a day like as a front end dev?
- 05:48 SVG Pens
- 06:48 Skateboard spinner Pen
- 10:38 Acrobatic tree loader
- 11:50 Input progress Xmas Pen
- 13:40 Writing about obsolete technology
- 16:02 Code golfing
- 19:25 Navigating without CSS
- 21:22 What new web tech are you excited about?
Transcript
[Radio channel adjustment]
Announcer: Today, on CodePen Radio.
Chris Coyier: Hey, everybody. CodePen Radio 371. Another super special guest on; incredibly creative dude, good writer, sharer of front-end stuff, front-end developer himself, Jon Kantner. How ya doin', Jon?
Jon: Good. How are you, Chris?
Chris: Good! Good. Oh, fantast. Yeah, just kind of a long-time CodePen user. When I was making my list of all the people I wanted to talk to, I was just kind of flipping through things that I've liked, and your name came up a bunch. I've starred a heck of a lot of Pens from Mr. Kantner here. A lot of just interesting, creative stuff. Very different stuff. Maybe you recognize Jon from the Emoji Train, one of my favorite Pens of all time.
Jon: Oh, yeah. My boss loves that one.
Chris: [Laughter] Really?
Jon: Yeah. [Laughter]
Chris: Which is from a bunch of years back. It looks like you kind of updated it at one point, but just to refactor some Sass, which I feel you, man. I feel you.
But anyway, before we get into all that specific code stuff, what are you doing lately? It sounds like your Twitter bio -- in fact, the T-shirt that nobody can see is representing a place called OneTrust. That's where you're still at?
Jon: Yeah, so I'm a front-end developer there. The company provides programs for privacy, security, and governance. I'll talk about privacy laws like the GDPR. It's really all about staying ahead of the game, complying to, and implementing best privacy and security practices. They're based in Atlanta, Georgia, and London or the UK.
Chris: Uh-huh.
Jon: I work on a part of the document production app called redacted.ai. It's like an online PDF viewer, but pieces of sensitive information on the document are automatically detected and redacted after upload. It's a pretty mind-boggling process--
Chris: Wow!
Jon: --of how all that works. Then you can manually redact more content or undo some redactions and review everything to ensure you're satisfied with the redactions.
Chris: Right.
Jon: I've been coding many of the audit components drawn by the UX designer as well as writing Ember tests (since the app is built on Ember).
Chris: Yeah.
Jon: Yeah, there are times that I had to fix some bugs and accessibility issues. Either I find them or somebody else approaches me with them.
Chris: That's the job is building components, working in Ember, writing Ember tests, and then whatever else comes up at you. Yeah. Fixing bugs.
I don't know. What kind of problems are you solving day-to-day? We covered the "what" and stuff, but I'm always interesting in, like, what does it look like. You wake up, and you sit down to work. You're a front-end developer. It's what it says in your business card. What's a day like in the day of Jon at OneTrust?
Jon: Well, when I first get on, sometimes I see change requests on PRs. Sometimes I see a bunch of new tickets created for me on some platform we use called Linear.
Chris: Uh-huh. So, there's enough people there. I've never heard of Linear, actually, but I imagine it's -- oh, an issue tracking tool. Sure.
Jon: Yeah.
Chris: It's like when people say, Jira, it almost means Jira and/or something else like that. Tickets in which that you tag people in and stuff. There are enough people working there. I mean if you've got two offices, one in London even, I'm sure the number of employees is relatively high. And one of the ways you all unpack is this Linear tool?
Jon: Yeah. Yeah, they've got offices around the world, so just like ... places.
Chris: The PDF redaction, I think of PDFs as kind of an accessibility problem in themselves. That'd be a funny ticket to wake up to, to be like, "You know what? We're getting out of the PDF game. Just kidding." [Laughter]
Jon: It does do more than PDFs. It also does emails and CSV files, which kind of looks like Microsoft Excel. It's really interesting. It even redacts stuff in CSVs and emails.
Chris: Yeah. What is that? That's some other technology. I'm sure you're a part of that too, but there's some artificial intelligence brain that sucks in a file and is like, "Ooh, gosh. This stuff in column number eight it social security numbers, so we better go into those cells and turn them into Xs or something because that's going to fail your security compliance for sure." Is that the idea?
Jon: The AI detection is managed by the back-end, I think.
Chris: Right.
Jon: Yeah, so it's mostly the UI stuff and client-side of scripting things.
Chris: Yeah, that's cool. All right, so you're working at OneTrust. You're building components, making them accessible. The beauty of being a front-end developer, all that work. But you clearly have an extremely creative side as well. I don't know how much you get to flex that at work or is that why you turn to creative coding at other times? Something like the Emoji Train, like I mentioned, is just an incredible piece of creative work.
Jon: Yeah, well, there are times I had to pull off a couple of tricks on some of the components I've been building. It was like accordions, kind of jQuery-like.
Chris: Mm-hmm.
Jon: And a couple of other animations like for splash screens, like how to get the page turning to work.
Chris: The page-turning, are there animations involved, like click from page one to page two and something satisfying happens?
Jon: Yeah, they had an SVG illustration, like five different ones, actually, because when you turn the page, the illustration continues off from the previous. I got to use a lot of my SVG skills there.
Chris: Yeah, that's awesome. I was curious about SVG, in general. You have a couple of great Pens, like the Longcat Scroller, the Longcat Spinner. It seems like some of those leverage a little bit of SVG, right?
Jon: The Longcat, that's pure CSS.
Chris: Is it?
Jon: Yeah. Yeah, I've been using SVG for a couple of those, the spinners I made. You've got the acrobatic one, the skateboard, and the one where the worm just ricochets and then gets back on track.
Chris: [Laughter] Tell me about one of them, like the skateboard spinner. I'll describe for the audience. There's just a circle. There's a little part of the circle that travels within the path. You're like, "Oh, I get it. I could make that happen." But then, all of a sudden, the thing flips in the middle of the air and does a flip, and then slides right back into the circle. Super clever. Can you tell me how it was built a bit?
Jon: Of, for sure. All three of these start off with an ordinary ring where the worm just goes around and around, and a gradient for an interesting effect.
Chris: Uh-huh.
Jon: So then, I would draw the path in Illustrator and export them. And then there goes the hour or two or three of adjusting the animation until it feels right.
Chris: Uh-huh.
Jon: The skateboard one, however, was awfully tricky and the hardest to do of the three. If you ever watched snowboarding or skateboarding, the ramp tricks are what this resembles.
To pull this off, there had to be two other versions of the worms on the sides, so I planned all this out in Illustrator using paths that start straight and then curve halfway. Then the worm would need to straighten out while in the air, so that's what the straight side is for. Then I had to get the transfer of origins right as well.
Chris: Yeah, I bet.
Jon: Yeah, so it was really, really tricky in those because you had transfer of origins in SVG is not exactly the same as it is in typical CSS because the origins is always in the top left corner.
Chris: Right, but you can move it with transform-origin.
Jon: Yeah.
Chris: Dang. This is wild. Yeah, I remember. It was kind of one of the reasons people -- at least in the past. I don't know if the situation has gotten better -- reached for GreenSock to do some of these animations because that was even part of their marketing was, like, "You know how transform-origin sucks in SVG? Don't worry. We normalize it across browsers." But no JavaScript in use at all here. Pure CSS.
Jon: Definitely no.
Chris: [Laughter] It's good. There's some subtle stuff happening on all three of these, which are just absolutely epic Pens, I must say. But the straightening out that you mention is a nice touch because I can imagine taking that little curve nugget that fits within the circle and just leaving it the way it is and making it spin in the air and come back down, but I don't think it would feel right.
It's so nice that it's straight when it comes back into the circle and it looks like it's the circle itself that's kind of forcing it back into that shape. That's nice. [Laughter] Really, it probably took you just as much time to do the straightening as anything else.
Jon: Yeah. Yeah, sometimes I think of extra effects to put in there, like for the ricocheting one, for example.
Chris: Yeah, the--
Jon: Add this extra physics because they kind of look too plain without them.
Chris: See, that's another good point, right? This would be a pretty nice Pen if all -- I think it'd be a pretty nice Pen if all it did was go around in a circle because the colors are nice. The grays are nicely chosen. The blues are nicely chosen.
But no, of course, it goes the extra mile, and it goes, "Ah!!" and it looks like gravity pulls it off the top because it's going too slow. Then it starts bouncing around. This would be easy to miss, but you're saying that the physics being, like, when the worm hits the bottom of the circle, it's like the worm has weight, and it jiggles the circle. It's so cool. That's what you're talking about, right? The physics of weight.
Jon: Yeah.
Chris: That's great. Then there's one more, the acrobatic pre-loader, which I guess is a little smoother. Again, it's this little worm that jumps out of the circle, but no physics here, but still a very satisfying thing to watch.
Jon: Yeah.
Chris: What a clever idea. Did you get to use these anywhere, or were they purely just kind of creative exercises?
Jon: Well, they are merely creative exercises. There are a couple of times I use SVG on the job, like for some splash screens, for example.
Chris: Right. Right. Right.
Jon: Yeah.
Chris: There are so many things like this, and that satisfying little UI component thing. There is a stepper component that you did. It's really kind of beautiful. You click through one, two, three, four, five, like a number input. Only the numbers slide horizontally, and they get bigger, and they change opacity. It's like there are all these opportunities that's like it would be pretty good with just the stuff I described, but then there's little extra touches like, as you click, a little circle emanates from it, like material design and stuff. You have a good knack for adding just enough extra pizzazz to a UI component to make it really satisfying.
It's like an input type progress kind of thing. Although, it looks like, in this case, it's a div with the proper ARIA roles on it, but for Christmas. [Laughter] It's like candy cane loading.
Jon: Yeah. Okay. I was going to say, were you talking about the countdown thing?
Chris: [Laughter] Yeah. Sorry to keep throwing random ones at you, but there are just so many to choose from and talk about. It's great. And you can see your accessibility desire come out through these, having all of these ARIA roles on there. It would be so easy to do some of this stuff totally ignoring accessibility things.
I don't know if it's part of the culture of CodePen or we just lucked out and got nice people, but I think a lot of the demos you see in CodePen, they don't just throw accessibility to the wind. They take care of it, and I think that's cool to see.
Jon: Yeah. Accessibility is something we take seriously. Sometimes, we just take it too lightly. I always go around with a screen reader to make sure you can interact with a component without having to use a mouse.
Chris: Right.
Jon: Yeah. The screen reader I use is voiceover, so it really helps out with how certain things should be read.
Chris: Yeah, absolutely. I suppose it might be your work rubbing off on you. I don't know. Maybe that's why you got this job. But if you're working at a place and the whole vibe of the place is compliance, you'd think that even if you don't directly help with accessibility compliance that the website itself better take it pretty seriously. It is a pretty good accessibility culture at OneTrust?
Jon: Yeah, it's something we take into account.
Chris: Well, that's good. So, you've done some writing as well. That's kind of cool.
I used to run CSS-Tricks, as you know. And you wrote a number of articles for me over there, which I appreciate. Thank you. Wrote some articles on dev.2, wrote some articles over on even CodePen back when we had posts as well.
Jon: Oh, yeah. I had like one on there. It was about online tech had died in the 2010s, but I had this huge table of everything that discontinued. It was a lot of Google products, though. There is a graveyard for dead Google products.
[Laughter]
Jon: I was like, "Wow!"
Chris: This is a pretty darn comprehensive list. Is this kind of a side project of yours to watch declining tech usage or did this data come from somewhere else?
Jon: Well, I've been doing my research. I've been thinking about everything that just wouldn't be supported anymore or went out of business.
Chris: [Laughter]
Jon: Declined usage or whatever else.
Chris: Yeah. Oh, you even list the reason, which is actually ultra-interesting. Declining usage, it feels like any one of them could have said that. There's a lot of interesting--
You're right about the Google, though. Let's see. Google Search Wiki, Google Base, Google Gears, Google Hotspot, Google Blog Search, Google Labs, Google Squared, Google Rebang. [Laughter] I haven't heard of half of these. Google Buzz....
Jon: Yeah. I hadn't even heard of 90% of them.
Chris: Yeah.
Jon: It's ridiculous.
Chris: Google Video, rendered obsolete by YouTube. God, that feels like 10,000 years ago, but it wasn't really. But ten. Oh, that's interesting to be the ten-year anniversary of Google Video death. Man, there's a lot. I wonder. Part of it is sad, right? There's a level of trust that gets broken then if you're like, "Oh, a new thing." You're like, "Well, what is it 50/50 if this is even going to stick around? Why would I invest my time in the usage of this thing?"
Then probably on the flip side, people are like, "Hey, they're trying stuff. That's how startups work."
Jon: Yeah.
Chris: Another one to ask you about that I think is interesting is you did some writing on dev.2 as well.
Jon: Yeah.
Chris: Is that what they call it, the dev community? You plucked one off from your old blog, I think, but two of your articles on there are essentially about code golfing, like taking an idea and trying to squeeze it down into a tweet-sized thing. There's snow, I think, and another one, like flappy bird or something in the size of a tweet. That's just so different.
Jon: Yeah, because I have a Git Repo adding those. It is a challenge. It's inspired by that Tron thing.
Chris: A Tron thing, like the movie Tron?
Chris: Yeah. There's a game called that. It kind of looks like Snake.
Chris: I don't know. How do you start? What's the process? It looks like, in both of these cases, you used the body element for some reason. Maybe it's less characters to use the onload of the body or something than a script. Generally, they're canvas-based, right? You can draw onto the canvas with a few succinct commands.
Jon: Yeah, and you drop it, the colon tags, and say, "Just take out bytes," so all you really need, though, is an opening body and an opening canvas. You could even leave out the ... as long as there's only one value. A single value of capital C for Canvas.
Chris: Yeah.
Jon: Yeah, you don't even need to use get element by idea.... It just works that way.
Chris: Oh, right, like if you give the canvas an ID, and you might as well just make it one character because who cares. Then window dot that character is a reference without you ever having to do anything. Yeah.
I see that a lot on CodePen because people are making little, tiny demos. Why fill them up with boilerplate code? Even if you're not doing this minification code golfing stuff, sometimes it's just nice to just go - I don't know - window.button rather than have to query selector for it or get element by ID or something. It's like a quirk, but it's so built into the platform that it's like, why not use it? There's nothing wrong with using IDs in HTML. Because that exists, why not use it?
SVG, pure CSS, crazy animations and ideas and concepts, and JavaScript, and canvas. I'm finding that true of creative people I talk to is that it's not so much a leaning into any one particular technology. It's more about picking the technology that works for the idea. Is that true for you, or do you go on little technology-specific benders?
Jon: Well, I really like to hop around trying different things. It really helps me gain experience in those areas.
Chris: It'd be specific. It'd be like, "You know what? I don't actually know Canvas that well. I'm going to work on Canvas."
Jon: Yeah. I haven't done any of those in a while. Yeah, I should do those sometime again.
Chris: Well, don't do it on my account, but I think the end results are really astoundingly cool. Yeah, you come up with clever ideas.
When you wrote for CSS-Tricks, and I realize it's been a couple of years ago, there was constant chatter about JavaScript not running on the Web. Like, "There's a good chance your JavaScript can fail. It can fail for any of ten reasons. Maybe you should build a website without JavaScript."
"No! That's stupid." It's just kind of a classic thing that developers like to yell at each other about.
But this article for CSS-Tricks is, "What about CSS, though?" [Laughter] What if I intentionally disabled all CSS and then browsed the Web that way? What would that be like?
This was just kind of a -- I don't think you were trying to be intentionally hilarious, but it kind of worked out that way. Can you manage to buy a product on Amazon with no CSS?
Jon: I don't think I would. It's kind of funny just what that looks like. I was like, "Where am I?"
Chris: [Laughter] It's funny to see some things that end up laying out okay because - I don't know - somebody accidentally used a table or something and that implied some structure where you wouldn't expect it. But for the most part, it's just like a column of long text, essentially, right?
Jon: Yeah, it's like a lot of things with missing text and it looked like an accessibility nightmare.
Chris: Oh, yeah. Is that what it surfaces? That's interesting. Of course, the page is going to look broken, right? If it tells me, "Oh, I turned CSS off," well, yeah, the page is going to look like crap then.
But theoretically, if it's coded really well (from an HTML perspective), it should make some level of sense. But if you just see ten radio buttons with nothing next to them, that does highlight an accessibility problem, right? It's saying, "There is no label next to this thing."
Yeah. Well, if you look at DuckDuckGo, it could have been worse. It almost feels like we should have applied an A through F rating to it or something, but it's still pretty satisfying.
What else is on your mind? Are you excited about any particular new tech? Are you playing with anything right now that you think is cool?
Jon: Well, I do look forward to the new has selector in CSS, so I'm waiting for that to get wide support.
Chris: Is there anything that pops to mind as to why?
Jon: I think it's going to make certain challenges easier. I have yet to see what real good use cases there are for that.
Chris: Yeah, it's hard to say. There are certainly some, right? I don't know. Like form has invalid or something. You could put a big red border around the entire form rather than just needing to select just the input that's invalid or something. I think that will be really interesting. That would be a CSS-Tricks post that'd be like begging somebody to write, like, "Ten Interesting Use Cases for Has." Yeah. I think it happens a lot.
It's almost like you need to keep a little developer diary or something because I feel like, over my career, in years of CSS work, the times where your brain goes, "Man, if I only had a parent selector," essentially, which is basically what has is, "then I could accomplish this thing I need to do. But I can't, so I need to think of some workaround or do it with JavaScript or something." That's come up in my mind.
But then when you're asked, like, "What was it?" I'm like, "I don't know. I can't remember." [Laughter]
Jon: [Laughter]
Chris: But there are good ones. I think it will be different than header has H2 - or something. That's so simple. But I think the more interesting use cases will come up with pseudo selectors and combinations of classes and stuff. Yeah, that one is going to be juicy. What's the deal right now? I think it's in stable Safari and nothing else. Do you happen to remember?
Jon: Yeah, I think Safari now supports it by default in the latest release. I'm just waiting for the other browsers to catch up.
Chris: Yeah.
Jon: The other thing that came to mind is container queries. Oh...
Chris: [Laughter]
Jon: Yeah, that looks exciting.
Chris: [Laughter] Heck, yeah. Especially if your day-to-day job is working in componentry. Are you imagining these Ember components that you're authoring, like pulling container query styles right into those components and having it literally help out your day-to-day work?
Jon: Well, it kind of feels hacky just using JavaScript to do things, so using just good old media queries for parts of those.
Chris: Yeah. Oh, you're being forced to use now or whatever? Yeah. I don't know. I just picture that if your site is built on a JavaScript framework anyway, and you're scoping the styles in there anyway, the container queries are just -- oh, they're just perfect for that world. I can't wait, too. Yeah, I would think you put your finger on it, the two best things.
I know the list of stuff that's coming in CSS in 2022 is long, and there's scope, and there's cascade layers and all kinds of interesting stuff. I like it all, but I think I agree with you that those two are probably the best things that CSS is going to get in a long time.
I'll put links to learning more about those in the show notes. I bet there are some pretty good experiments right on CodePen itself I could point you to as well.
Jon: Yeah. Lots to look for.
Chris: Yeah. A lot of stuff out there. I'll put a link to everything that we talked about in the show, in the show notes, including Jon's Pens and experiments and writings and all that stuff, so you can find and follow Jon.
A pleasure to have you on, Jon. Any last words for the people?
Jon: I don't think so.
Chris: [Laughter] Yeah. Right on and have a good day. We'll see you next time. Bye-bye.
Jon: Yeah. Thanks for having me.
Chris: Pleasure.
[Radio channel adjustment]