This week I got to speak with Chris Nager! I’ve known Chris quite a while. I remember being inspired by his hand-drawn SVG plus symbol and subsequent guide to <path>
commands, which inspired my own shortly after I was properly obsessed with SVG. We talk about all sorts of things like accessibility, how far CSS has come, and some of the amazing stuff that has shipped recently in Safari Technical Preview. Check out Chris’ Twitter, personal site, and classic great project Give ‘n’ Go, a CodePen/Dribbble crossover website.
Time Jumps
- 00:24 Guest introduction
- 01:56 Hand drawing SVG
- 04:07 Dribbble and CodePen
- 06:55 Accessibility as a focus
- 09:04 Color-contrast function
- 11:30 Color mix function
- 13:20 inert and letting trim
- 15:37 Clamp function
- 16:28 Accessibility and JavaScript or React
- 22:12 Deploy previews are amazing
- 28:31 CSS logical properties and values
- 30:16 ThingUI
- 33:34 Using ch
Transcript
[Radio channel adjustment]
Announcer: Today, on CodePen Radio.
Chris Coyier: What's up, everybody?! CodePen Radio 362. I have another special guest. I have known this guy for a long time. Haven't we known each other for a long time? It feels like a long time, kind of. We cross paths (every once in a while) in interesting ways. Mr. Chris Nager. Is Na-jer right? Did I say it right? You correct me.
Chris Nager: It's Na-ger.
Chris Coyier: Nager. Chris Nager. Sorry. I should have known. But welcome to the show. Yeah. Are you still in New York?
Chris Nager: Yeah. Over here in Brooklyn. It's been a little over a decade now. It's pretty wild.
Chris Coyier: Ah, you're an old-timer.
[Laughter]
Chris Coyier: Where are you at? What's keeping you employed these days?
[Laughter]
Chris Nager: Yeah. I'm actually at a fintech company right now building a product called CartaX at Carta. It's pretty interesting work.
Chris Coyier: Yeah. I don't know anything about CartaX, but I know Carta as being the thing where everybody has their options - or whatever. Right? Isn't that the--?
Chris Nager: Yeah. Yeah, it's all about cap tables. Yep. Yep. CartaX essentially introduces liquidity, so you could actually do something with your equity. Anyway, just pretty interesting stuff that we get to work on, for sure.
Chris Coyier: Yeah. Yeah, I suppose. The CodePen's cap table is right there in Carta, so rock and roll. The reason I'm like, "Oh, we've known each other forever," is because it's not like we've gotten a chance to hang out a million times, but you've been -- I think of you as a kindred spirit in that the things that I see from you are so varied. I feel like I do that too. We know a little bit about a lot of stuff. We're both kind of designers and kind of developers and have bounced around between all kinds of different technology over the years and all that stuff.
There's a Pen that happens to be just weirdly popular of yours on CodePen. It's just a plus symbol.
Chris Nager: [Laughter]
Chris Coyier: I'm sure you know what I mean. It's like, "Why is a plus symbol such a big deal?" But I remember seeing it and being like, "Wow, is that clever!" Sometimes they call it code-golf - or whatever - that uses the SVG path syntax to hand-draw this thing in such a way that you'd have to know the syntax to make this work. There is no way on Earth Adobe Illustrator is outputting code that's that tiny.
Chris Nager: [Laughter]
Chris Coyier: I was like, How the heck does that work? Then I think you put together on Medium (a million years ago) -- literally 2014, so sorry for the old hits here -- a little guide to the SVG syntax. I'm like, "Oh, that's so cool." That was inspirational to me. Years later, I looked back on it, and then I kind of made my own guide to the syntax, referencing yours and trying to expand on how that syntax in SVG works. Thanks for the inspiration, man.
Chris Nager: Of course. Yeah, I definitely got really into hand-drawing SVGs for a while, or at least understanding as much as I could about how to actually manipulate SVGs with code.
Chris Coyier: Yeah. It's satisfying stuff. If somebody was getting into it now, they'd have a more fun time doing it, in a way, because there are less quirks and you can transform them a little easier. CSS can even animate them (to some degree) now. Back then, it was the wild west.
Chris Nager: [Laughter]
Chris Coyier: Nobody was doing that stuff, even though SVG is quite old. I shouldn't say nobody. As a tech, it's as old as HTML, practically. I'm not sure. Don't quote me on that number, but it's not exactly hot and fresh technology.
Right on, and then possibly, just so I don't forget to mention it, because this is so crucial to all the people I've talked to recently on CodePen Radio that do creative technology stuff, there's this long-term, weird synergy between Dribbble and CodePen. You recognized that long ago and made this website, which I'm sure you haven't updated in forever, but that's just the way it is.
The point was, it was calling out that connection really clearly. It looked like a Tumbler or something. I don't even know what the tech is behind it, but it has that vibe. Then the point was, here's the Dribbble shot on the left and the CodePen on the right. It was just fun to browse. It was just cool to call out people's creative connection between those things, and that was you. You made that.
Chris Nager: Yeah. Wow. That is a throwback.
Chris Coyier: [Laughter]
Chris Nager: Let's wind the clocks back to 2013 is actually when that launched.
Chris Coyier: Yeah.
Chris Nager: It was called Give 'n' Go.
Chris Coyier: Oh, yeah, Give 'n' Go.
Chris Nager: Exactly what you were talking about. The name itself was a bit of a play on the basketball theme of dribble. Essentially, the illustrator passing off the ball to the front-end developer, essentially, so it kind of had a little play in there. This was essentially similar to what you were saying. I was noticing that people were recreating Dribbble illustrations and animating them and doing lots of fun things in front-end on CodePen, and so this was a place where people could submit, and it was built on Tumbler as a CMS. [Laughter] That was a thing at the time.
Chris Coyier: It was really Tumbler?
Chris Nager: Yeah.
Chris Coyier: Nailed it.
Chris Nager: Yeah. [Laughter] But yeah, that was a ton of fun. Able to use the embedded CodePens and pair them with their Dribbble partners. It gained a little steam, had a nice little community for a while. I even had stickers made at one point. But yeah, that was a ton of fun. Maybe have to pick that back up someday.
Chris Coyier: Yeah. Literally, I guess almost ten years later, there are still people doing that. That's a long time for this connection to exist. I think that's pretty cool.
Time moves on. Now you're in fintech. You have a lovely personal website, I see, even tracking the progress of creating it in Notion.
[Laughter]
Chris Coyier: Which I like. I see one of your to-do items is RSS feed, though. You've got to get on that, man. That was the first thing I did. I was like, "I wonder if I'm on Chris's RSS feed. Oh, doesn't exist yet."
Chris Nager: Yeah.
Chris Coyier: But there's a ticket for it. There's a ticket. You got it.
Chris Nager: I'll get to that. [Laughter]
Chris Coyier: Yeah. [Laughter] That's cool, and so what else? Tell me what you're into now, though. I forced, dragged you back in time too far. You've lived a lifetime since then. What's up with you now?
Chris Nager: I think the driving thing throughout has been accessibility. It's something I've always been pretty passionate about. I feel like, everywhere I work, I tend to be one of the advocates or starting little groups or joining councils or things like that. IT's always been something near and dear. There's such a need in the world for it.
I'm very excited about where CSS is going. It seems like it's making a lot of these things much easier to do. I was just playing around with the color contrast. It's like a color function that CSS now has only for the Safari tech preview with an experimental feature flag turned on.
Chris Coyier: Uh-huh.
Chris Nager: But it's really, really fun stuff where you can essentially compare a color to a color set and just have the browser give you the color with the greatest contrast. Things like this, obviously they're not widespread at this point, but CSS is just making the in-browser experience so much better, so much more accessible, or at least giving us the tools to be able to do these types of things.
Chris Coyier: Yeah, that's great. Isn't it nice how they do the feature flags in Safari where it's just a menu? [Laughter] You just turn it on or off like a checkbox thing. It's always awkward in blog posts to be like, okay, then in Firefox or Chrome, you have to type about:flags - or whatever it is - then search for the thing, then find it, then restart the browser - or whatever crap. Safari is just like, "Uh, it's a menu, and you just click it on." So much better.
But anyway, yeah, literally, you were talking about color-contrast(), the actual function. That is a beautiful one, especially for any kind of dynamic or user-driven colors. I could imagine it being particularly useful because it's one thing if it's your codebase. It's your responsibility to make sure that your colors are the correct [laughter] -- you know. That they have enough color contrast. But in a world where perhaps the user is setting a background color or something, they could screw it up. I would think, with this color contrast function, you could say, "Okay. Well, I'm going to give you the choice of at least white text and black text, and then compare it to the dynamic color," and make sure that it shows the one with the proper contrast. That's pretty slick. Yes! That's so cool that it's built into CSS now.
Chris Nager: I did a recent Pen. [Laughter] CodePen is where I go to try stuff out. Actually, I wanted to use that, and I wanted to be able to find out the highest contrast of a gradient.
[Laughter] Now, I decided to come up with my own kind of way of finding that out. But essentially, I kind of built off the work that Adam Argyle did with the gradients and going through all the color spaces.
Chris Coyier: Oh, man. That's a whole world. Yeah.
Chris Nager: [Laughter] But anyway, I was able to essentially (all with CSS) pull out the midpoint color of these gradients per each color space. So, as you did a two-point gradient from, let's say, yellow to blue, find that midpoint color, put it into the color contrast function in CSS, be able to find out the color space gradient with the most contrast based on if you have a black or white background based on whether you're in dark mode or light mode, and apply that gradient. It was all done in CSS, and it just blows my mind what you can do now with all this stuff.
Chris Coyier: Yeah. How did you--? What do you mean by--? I know what you mean conceptually by plucking out the midpoint color. But how do you get access to that color in CSS?
Chris Nager: Yeah. Let me pull it up. I want to remember exactly so I don't tell you--
Chris Coyier: That's just an interesting idea.
Chris Nager: I used the color mix function. Essentially, I said, "Color mix," and then I chose in whatever color space it was. Then I set the two colors as a start and end colors for the gradient. That gave me the midpoint color.
Chris Coyier: A single color. Okay.
Chris Nager: Yeah. Anyway, it was just a really fun little experiment. I love being able to spin this kind of stuff up in a platform like CodePen because I don't have to--
Yeah, it's just so nice. It's very simple.
Chris Coyier: Yeah. Yeah, thanks. I like that kind of stuff, too, because then it will just sit there and last forever, too. You're not going to lose it. It's not like - I don't know - messing up some organizational scheme you have elsewhere. And people just get to benefit from it forever. If I need to look up how to draw a cross with rounded corners (ten years later) I got it. This is clever. I've got to look into more details of this. I know less about color mix. It's cool that it exists, but I haven't played with it at all yet. It's interesting that you can mix in the different color spaces. Ooh... juicy.
Chris Nager: [Laughter]
Chris Coyier: Those midpoints are so different. You just went from blue to red in this Pen, and the midpoints range from eye-popping pink to dull, boring purple. Depending on the color space, it's really super dramatic how different they are. That's wild.
Chris Nager: Yeah.
Chris Coyier: That's wild. There's more. Didn't Safari--? I feel like I got this wrong the other day, sharing it around, so I want to be careful about it. Safari, I think, originally said they shipped inert attribute and then didn't actually do that [laughter] but are working on it to some degree. But I don't know if you saw that, but inert seems like it's going to be pretty huge for accessibility reasons. Right?
Chris Nager: Yeah. I mean I've only read a little about it, but excited. Very excited. I'm also excited about letting trim, I think it's called. Totally unrelated - kind of - not really accessibility focused, but just great for design and baseline aligning text and all sorts of--
Chris Coyier: That's the one where there's not this arbitrary weird amount of pixels, like sort of above and below.
Chris Nager: Absolutely, yeah, kind of like cuts it where you might expect a design tool to cut the text.
Chris Coyier: Yeah. Yeah. Yeah. You know I just used the other day was -- what's the one--? Hanging punctuation.
Chris Nager: Ooh...
Chris Coyier: Where if a sentence starts curly quotes or something, it'll just yank them back to the left a little bit to line up the first word instead. It only works in Safari, as far as I know, but it's nice. It's one that I would never forget to put on because I feel like it deserves to be on there - in a way.
But yeah, the inert thing is cool. I don't know if I have this entirely right, but you can inert the entire rest of the document except for a modal, for example, and then, instead of having to hand-craft your own focus trap for the modal because I think that's one of the accessibility requirements of a modal is that, as you tab around the page, you're just tabbing within the modal. Your focus has to be trapped in there. You can't accidentally tab out underneath the modal to some unrelated focusable feature. It has to stay in there, and that's been such a pain in the butt to code for - what - decades. [Laughter]
Chris Nager: Oh, yeah.
Chris Coyier: Now inert is going to be, like, just making it almost trivially easy. Oh, that'll be great. So, are there other accessibility features you have your eye on?
Chris Nager: No, I was just thinking of clamp. There's so much we're able to do with the clamp function.
Chris Coyier: Oh, dude.
Chris Nager: Mostly from a typography standpoint, but I think people could get creative with how far we could take that.
Chris Coyier: Yeah. It is particularly nice for typography, isn't it, that font sizing stuff. I was just evangelizing that the other day that it's like you get this opportunity to express fluid type, but without the dangers of it ever being too big or too small because clamp gives you that safety that it's going to be handled well. I just love it. It's so good.
Chris Nager: Yeah. [Laughter] It's fun.
Chris Coyier: But for somebody that's, like, you're the accessibility guy. You find yourself in that position a lot. But you're also a modern JavaScript developer. Your site is in Gatsby. You've been playing with React for half a decade, it seems like. Do those worlds ever collide for you in awkward ways? I feel like React even specifically gets a bad rap sometimes about that kind of stuff.
For example, you make a single-page app in React because it all but encourages you to do that. You click a link, and you go to a different URL. What happens in a default React setup is just - I don't know - some content gets replaced and your focus is wherever it is. But in another type of app where it's not in a single page app, the focus gets restored to the beginning of the page, which are very different accessibility things. Reacts gets prodded at for that, like, "Why didn't you deal with that? Why don't you help us with accessibility problems like that?"
Chris Nager: Yeah. I mean these are very situational. Obviously, there are more choices now in how to render your application, which can affect how things load, what will be focused first.
I think one thing React does sometimes take some flak on about accessibility is people do away with semantic HTML. That's something I still hold near and dear, and it might be because of the time when I started developing. But I think it's very important for people to take the time to really just continue to use your semantic HTML within your React apps. It does not have to be mutually exclusive. You don't have to enter kind of a div soup situation just based on the technology you chose.
Chris Coyier: No. Certainly not. It's not like React itself says, "Please use all divs." Right? That's always confused me a little bit. But yet, here we are. You're far from the first person that has mentioned that React, in particular, kind of--
It's not that, like I said, the framework is guilty. But if you look at general React codebases, you see so much of that: div, div, div, div, div, div, div, div. Or worse, div on click. Div on hover.
Chris Nager: [Laughter]
Chris Coyier: Certain stuff that you're like, "That's not a thing."
Chris Nager: Yeah.
Chris Coyier: So, what is that? Speculate for me, if you will. [Laughter] Why does that happen at all?
Chris Nager: Honestly, I don't know. It could be, in some cases, maybe a developer coming more from a full-stack working on a front-end. That could potentially be an issue. I only say that because, for some reason (over the years) I've seen HTML kind of put to the side of importance, and it's like the basic building blocks of the entire Web. You can't actually have any interfaces without HTML.
It's hard to see when that gets kind of overlooked, especially with buttons and accessibility, like basic accessibility type things. But again, I don't actually -- [laughter] Yeah, I've seen that case before. That is obviously not every case. That is just something I've noticed.
Chris Coyier: No. Certainly. It feels like there are only so many hours in the day, or that there are so many days in the curriculum, as it were. We have to get through all this stuff because we're producing students here at Bootcamp X or whatever it is. And that HTML might just get less playtime than it did for you or I coming up 15, 20 years ago. That's all there was to learn, so we spent time learning it.
Chris Nager: [Laughter] Right.
Chris Coyier: Whereas, even five years ago, I was working with kids, more than I do now. I'd like to get back to it more. But the first thing they learned was Git, which I thought was a very cool, interesting approach because you've got to learn that anyway. Then they were able to put their assignments in Git and learn. Then by virtue of that, they were learning the command line because that's how the interfaced with Git, so they got comfortable with that.
Then while they were at the command line, the curriculum taught Node a little bit because it was like, okay, we're going to start learning JavaScript. But rather than kick you to the browser right away, we'll just do it right here at the command line, so you could type math stuff and anything that JavaScript can do, but just do it right at the command line.
I was like, "Wow! These kids, they feel smarter than me already," because they were doing stuff that isn't necessarily super comfortable for me, still. Then the curriculum moved into client-side JavaScript a bit. It felt like that's already so much. You're already doing so much work that it didn't surprise me that HTML, there wasn't as much time to cover it.
On the one hand, I liked the curriculum and thought it was clever. On the other hand, I'm like, "No wonder these kids are all picking divs," because they don't know. HTML was barely a part of what they're learning. I don't know. Sorry for the tirade there. That's just what I see.
Chris Nager: No. For sure. There's a lot that a front-end developer takes on these days, and it's a ton of fun. There are so many tools at your disposal. But you can't know them all 100%. I do understand it.
Chris Coyier: Even your site, it looks like it's Gatsby on Netlify, right? It's funny how you can build a site these days and host it and get perfectly great hosting for it and involve no -- you almost need to know nothing about servers and back-end technology at all, and you have a perfectly functional site.
Chris Nager: I have loved using Netlify and other services that allow me to -- essentially, deploy previews are just one of the best things ever. [Laughter]
Chris Coyier: [Laughter]
Chris Nager: It doesn't matter what you're using. If it has deploy previews, it's just an excellent tool for that reason. At least it's good at that thing because getting reviews on things is just so much faster, prototyping--
Chris Coyier: Yeah.
Chris Nager: --any kind of things. I've been really impressed with it. I get to use these technologies personally, professionally.
Chris Coyier: At work... [Laughter]
Chris Nager: It's just like the tools are amazing. For sure. Over the past decade, they've just gotten so helpful.
Chris Coyier: They've gotten good, but for specific things. I still work on some WordPress sites, and none of my WordPress anything has any notion of deploy via Git commits or a deploy preview from that Git commit or pull request. It's like, okay, fine. I get that it's a little bit more complicated because, in order to do a deploy preview of a WordPress site, you'd have to - what - spin up a temporary staging environment with a MySQL database that's a replica that probably can't be spun up in 18 milliseconds. It probably takes several minutes to provision all that stuff. But it does feel like a divide of development styles and stuff. If you happen to have jumped on the Jamstack thing and have blazing fast local development environment where you save a local file and you benefit from all the hot module reloading and this amazing local development environment, and then you just shoot up a pull request to master and Netlify gives you a URL for you to go check out and make sure everything is okay. Get people to sign off and merge it into master. It goes live in two minutes. That type of workflow is amazing, but it's equally amazing that other types of development -- like the developers are starting to be dissatisfied when they don't have it. [Laughter]
Chris Nager: [Laughter] Yeah. Yeah. It's like the output is now insanely faster, and so all expectations, obviously, rise as time is cut.
Chris Coyier: Yeah.
Chris Nager: Yeah, but it's been great. One cool thing Netlify does is I've gotten to use its analytics tool, and it's neat because, unlike typical client-side, like certain analytics tools where you essentially have to load a script, these are all done server-side. You just kind of log in and see what they were without having to add extra ... to the site.
Chris Coyier: Yeah.
Chris Nager: I know other platforms do that too, and it's just been--
But I've personally experienced Netlify's, and it's been pretty impressive.
Chris Coyier: I love it! Yeah, because there is the usage of browser tools that block client-side JavaScript. What'd they start, half a decade or longer ago? And have just gone up and up and up and up and up. You know? The reliability of the data that you get from client-side JavaScript-only analytics is starting to get less and less accurate. There exists this doubt in your mind, like, how accurate is this? What percentage of my audience is using a blocker for that stuff?
You'll never know. There's no way to answer that question. The only way to answer that question is don't do client-side analytics. Do, like you said, server-side analytics. I don't even know if it's--
I mean I guess it's server-side, but it's almost at the logs level.
Chris Nager: Yeah. Yeah. I'm not sure if I'm using the correct terminology here.
Chris Coyier: Oh, yeah.
Chris Nager: But just not the client-side.
Chris Coyier: It's the server.
Chris Nager: Yeah. Yeah.
Chris Coyier: Yeah, and then there's nuance to it, as far as I know, because I'm sure Netlify analytics, it's super. It does advanced, interesting things, I'm sure. Nothing against their analytics, but also that they're a much smaller team and it's a much newer product than Google Analytics, to the point where there's, I think, some rough edges to the point of, like, for example, there are a zillion bots that just zoom across the Internet doing who knows what, requesting your website.
As far as I know, I don't know if Netlify is particularly susceptible to this or if it's other "server-side analytics stuff," but it doesn't really filter that stuff out. If you're using Google Analytics, it definitely does. Who cares if some rando bot came by your website. That's not a useful piece of information, analytical information. But it's not filtered out in some of that server-side stuff just by virtue of it being a newer product and less advanced - in a way.
It might look like, 'Wow! I have eight times more traffic than I thought I did!" It's like, no you don't, actually.
Chris Nager: [Laughter]
Chris Coyier: A lot of that stuff is just random bot stuff. I don't know. I probably gave that too much airtime because I can't speak super intelligently about it. It's just something I've heard and noticed to some degree.
New CSS stuff, do you have anything else on your mind that you're particularly excited about in CSS land? Boy, there's a lot going on, isn't there?
Chris Nager: Well, one of them, I guess it goes back to kind of the accessibility stuff. This isn't brand new, but the CSS logical properties and values.
Chris Coyier: Ooh...
Chris Nager: Where you essentially pair it with writing mode. It's the first time I've seen CSS be able to define both start and end values in one, other than the shorthand. For example, if I were to set the padding in-line (with the left to right or right to left) writing mode. I forget the values of writing mode, but you would be setting the padding left and right in one value, which is just really neat.
Chris Coyier: That didn't even exist before. There is no non-logical version of that. Wasn't there? Because logical properties are like you said. If the writing mode switches the direction of the padding, margin, border, or left or right, whatever, it all comes along with it, which is so great because anybody who has ever had to deal with not just translating but changing the entire writing mode, literally, of a website would know that you're going to have trouble. You're going to have to write a whole different CSS file and override it. It just feels right to write it in that way, but we've got some bonus things like padding in-line. There's no non-logical version of padding in-line.
Chris Nager: Right.
Chris Coyier: That didn't exist before.
Chris Nager: I've been using something called Theme UI. It's essentially one of those--
Chris Coyier: Ooh... What's that?
Chris Nager: Brent Jackson put it out, but it was something where, anyway, it has one of those. It has a prop, an SX prop, and you can pass in something like PX, which I know this has been used in CSS frameworks forever. But essentially, it's all about setting both left and right padding at the same time.
Chris Coyier: Oh, right, right, right.
Chris Nager: Something at the very basic level, being able to do that, kind of like a PYPX. It's just neat that that kind of stuff is making it to CSS, and it's being done in a much more accessible way where it actually is ready to handle and flip if you're going to use a different writing mode.
Chris Coyier: Mm-hmm.
Chris Nager: Or if a user just goes to the site in a different writing mode.
Chris Coyier: Also, even if you never do it, even if you never change writing mode, it somehow just feels more logical to me, like how my brain thinks. I already know what in-line elements are. I learned that so long ago. A span, naturally, is in-line. The in-line direction is the in-line direction.
Chris Nager: Right. [Laughter]
Chris Coyier: Put padding in the in-line direction. It's like the words stay meaningful as a system over the time. I know sometimes it's hard to break that left-right mentality a little bit. But I think, if you do, I think it'll feel more natural. As a language, it just seems to all fit together really nicely.
I've seen it in multiple ways. They've been talking about container units. Have you seen those?
Chris Nager: Oh, yeah.
Chris Coyier: They're part of the container query's world, but rather than a viewport unit, they're a percentage of the container itself. How cool is that? There are versions of it that are container width, so something like QW or something like that. I forget the exact name of it. But there are logical versions of it. It almost seems like we should all just--
It almost seems like they should only ship logical versions of it. QI is the in-line width of the unit. It's like, yeah, you should use that. Use that one. Don't use the width one.
Chris Nager: I like that. [Laughter] I was actually thinking about that. I was talking about this Pen I recently did, and it deals with gradients. At one point, I was writing the phrase "to right" where you're kind of defining which way the gradient needs to start to the endpoint.
Chris Coyier: Right. Yeah.
Chris Nager: It made me wonder, as I was fusing all these logical properties and values, is there one for that? I haven't looked into it.
Chris Coyier: Is there?
Chris Nager: I don't know.
Chris Coyier: There's got to be.
Chris Nager: I feel like there's got to be because, eventually, we have to move away from left, right, top, bottom.
Chris Coyier: What would it be? In-line end, I guess.
Chris Nager: To in-line end.
Chris Coyier: To in-line end. Yeah. I guess. Yeah. But it would have to do both, right? You can go to top right, so in that case, it would be, because that would be valid syntax, right? You'd have to also support to in-line block end. It would get weird when you're combining them.
Chris Nager: Ooh...
Chris Coyier: Not weird, but it would just be mind bendy to get the syntax right.
Chris Nager: Yeah. Yeah, so I don't know the best way to do those, or if it's necessary. Maybe you want the same gradient in both writing modes. Maybe that doesn't matter.
Chris Coyier: Oh, good point. Yeah.
Chris Nager: Just some stuff that I was--
[Laughter] It's just these types of things, like when CSS Grid came out. I just start looking at the Web and how it is.
Chris Coyier: Right.
Chris Nager: And just wondering, like just with all the new units you were talking about. Those are the latest and greatest, but even CH units, which I guess those have been out for a while.
Chris Coyier: Right.
Chris Nager: But VW, all that kind of stuff.
Chris Coyier: I haven't used one of those in a while, but I should.
Chris Nager: Yeah. I found the CH making a comeback in the stuff that I do.
Chris Coyier: I seem some max, like line length stuff using CH seems to feel good for some reason.
Chris Nager: Yeah. I recently did it. I do it for that because I've heard, I've read, I've been taught that humans, when reading, don't want to -- it's easiest on the eyes when it's -- I think it's between like 60 and 75 characters.
Chris Coyier: Right. Right. Right.
Chris Nager: Or maybe 50 and 80. You know somewhere in that range.
Chris Coyier: Right, and if that's what the rule is, then write the rule that matches the rule.
Chris Nager: Yeah.
Chris Coyier: Rather than the abstraction between - I don't know - 800 pixels, I guess. [Laughter]
Chris Nager: I used CH recently on a button height, so like 3CH height with 1CH padding. I think it was a little extreme. I probably didn't need to use it there.
Chris Coyier: [Laughter] Yeah.
Chris Nager: But it was just kind of neat to think about.
Chris Coyier: Right. It is. I like that. You should have clamped it.
Chris Nager: [Laughter]
Chris Coyier: You should be like, clamp the 1CH minimum in a 2 container units plus 1 viewport unit.
Chris Nager: [Laughter] Just abstract it away.
Chris Coyier: It's early days for this stuff. Yeah. It's going to get really weird.
Yeah, and in those container queries themselves, too, you'll see. I feel like I've seen some tutorials saying, oh, at container, and then min-width 300 pixels - or whatever. Be like, "Uh-ah-ah," you know? Don't use width. Why isn't it min in-line size 300 pixels? You know?
Chris Nager: [Laughter] Right.
Chris Coyier: Ideally, we're not even using width anymore. We're not using left. We're not using right. We're not using width. We're not using height. We're using all logical.
Chris Nager: But I love it. We have completely moved away from the pixel-perfect kind of world that definitely existed for quite a while. I'm glad to see that we're accommodating screens and interfaces that we might not even know about at this point.
Chris Coyier: Yeah. That's a nice sentiment to end on, Chris. It was a pleasure talking to you. I love getting to bounce around and talk about all this great, very exciting world we're living in these days. Is there anything else on your mind that you want to shout out at the end here? Advice, perhaps.
Chris Nager: Advice? Man.
Chris Coyier: [Laughter]
Chris Nager: [Laughter] Well, I just want to say that I studied design. I want to, as I get to speak to you -- and I know it's a little more rare than I would like -- I do want to say that resources like CSS-Tricks and CodePen, these have been so important to my development and, I know, so many others just in this front-end world. So, just want to end on a thank you, really, to you, Chris.
Chris Coyier: Oh, that's very nice. Right back at you, sir. I have appreciated the work you've done in the past, too. [Laughter] I'm still staring at your accessible gradients Pen here. There's a lot to learn just in this one Pen alone, so thanks for that.
Yeah. Take care, man. I hope we get to chat again soon. Bye for now.
Chris Nager: Yeah. Thanks for having me.
[Radio channel adjustment]