Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show, a podcast all about frontend Web design and development. I'm Dave Rupert and with me is Chris Coyier.

Chris Coyier: Hey, that's right, and we're going to make true on that, a show all about Web design and development, today for sure. Not that we don't always talk about that, but we're going to get into some browser technology.

Dave: It's the spreadsheets show. We're talking about spreadsheets.

[Laughter]

Chris: Oh, I kind of like spreadsheets, but anyway. [Laughter]

Dave: Div it.

Chris: With us is a long time good fella and acquaintance, Scott Kellum. How are you, man?

Scott Kellum: I'm doing great. Thanks for having me.

Chris: Yeah, sure. We kept threatening to have you on the show for years and finally made good on it, I think, here. Do you have a bio blurb of yourself that you want to do? Are you in New York still?

Scott: I'm in, actually, Washington, D.C., now. Yeah, I've kind of been moving around a little bit. Yeah, I'm working at Mariana Tek right now, which is a boutiques fitness software company. We do all the scheduling stuff for them. I'm a product designer there and then, by night, I work on Typetura, which is the company I'm founding and trying to get off the ground around fluid Web design, which I'm really excited about.

Chris: Awesome. We should start there. Typetura, T-Y-P-E-T-U-R-A .com. You visit that, folks, and you're kind of thrown into -- you see some set type and then you have the option to mess around and play around with it. What's the deal there? What's it do?

Scott: It remaps keyframes to browser width. You can plug in anything into it, so it could remap it to scroll position, mouse position, or whatever. By default, it remaps keyframes to browser width so, instead of using breakpoints, it just kind of interpolates all of the stuff, all of your CSS properties between two points.

I was focused on it as a solution for fluid typesetting, which I know Trent Walton has wrote a post on in 2012, I think it was. I know, Dave, you worked on FitText, but this kind of focus is on really setting text at a large scale in a fluid way, but it's not just limited to the typography. It can do all kinds of stuff.

Chris: The keyframes analogy was apt here. I admit it took me a second to get it, but you open up Typetura.com and, whatever it's at, maybe that's a keyframe already, right? On the left-hand side, maybe you put in font size 18 pixels or something. You literally just type it in and then drag it to some other point because the browser width thing is probably smart that that's the default thing because a lot of us think in that way, like, "What size are my fonts going to be at this size versus this size?"

Then you make another keyframe, perhaps, and you drag it wider and type in a different font size. Now you have two keyframes, right? Then dragging between those two keyframes, you can kind of watch it magically make choices for you between those two keyframes. At a small, it's 18 pixels at some small size and 22 pixels at some larger size. You'll see it kind of minimize out at 18 and maximize out at 22. That's kind of the magic of what's happening here.

Scott: Yeah, exactly. With the layout, you have percentages and you could, say, do 50%. This box fits into 50% of the width of its parent element. With typography, as you're scaling back and forth, you have viewport units, but that's pretty much the extent of that in terms of the control you have. Typetura really enables you to get in there and finetune exactly what you need to do in a visual way without doing lots of complex math.

Chris: Yeah, pretty sweet. All of us have dealt with that. Maybe on your first pass of designing something, you just picked what was given to you in your Figma document or something and it looked great at that size and it looked very not great at some other size. You were forced to think, "Oh, gosh. What should I do? Should I make a single breakpoint in here and just resize it? What should I do?"

In the past, I know I've tried to set everything in Ms or REMs and whatnot and then kind of picked breakpoints at the HTML level to notch down, perhaps, a set pixel size so everything kind of just scales down together in a way. Then you find yourself doing little tiny tweaks here and there to fix things. It doesn't scale as nicely.

I think some of us have seen very exotic solutions with, like you said, viewport units maybe sprinkled with some calk or something for some magic. Then sometimes, in the end, the result is a little inscrutable. You're like, "I don't necessarily know how to adjust this." [Laughter]

Scott: Yeah. Yeah, and I've been given MOX as well to implement and, a lot of times, it's like, "All right, this is the tablet version. This is the desktop version," with no indication of how things change in between those points or what the breakpoint is.

On a project recently, I was just like, "I'm just going to throw these two values into Typetura and it's going to handle it for me." It's kind of like the Goldilocks and the Three Bears. This is too hot. This is too cold. It figures out what is just right in between all of that.

Dave: I like it too. It also has this. I'll give you a little tagline here for free. This is free consulting here.

It's like CodePen for typesetting, in a way, and that's such a core to your business, your brand, your website is how your type sits on the page. I only know this because I work with people who actually care about fonts. It's such a core piece of the brand and the experience of a website or anything that. It's cool to play with it here. Then you get a system, a system that scales up and down.

I think that's nice because I always mess it up, like Chris was saying. On my site, I hate my H3 and I have no idea how to fix it. I hate them. They are the worst.

Scott: Yeah.

Chris: [Laughter]

Dave: Stuff like that. I tried the calc thing on my H1 and it is dumb. It goes into my 34-inch wide ultrawide monitor and it's like 4,000 pixels tall. I'm just like, "Yeah, well, I'm not going to fix that. That's edge case or something."

Chris: Yeah, right. It leaves you wanting for max font size, right?

Dave: Oh, I want that.

Scott: That would be so nice.

Chris: Hopefully, it doesn't put you out of business here, but I'm sure it won't. The output of it is kind of fascinating too. Do you want to talk about that? I don't know that I entirely Grockit yet, but it's kind of like you pick some keyframes. You don't use the word "keyframes" metaphorically, or maybe you kind of do. The actual output is quite literally the keyframe syntax in CSS.

Scott: Yeah. I've gone through a few different approaches as to how to tackle this. The first approach was with custom properties. I was passing through, essentially, a flat array as a string into a custom property and then parsing that with JavaScript. There were pixel values in your CSS for each keyframe and then it was transforming that on the fly, which was kind of cool. It was nice to author, but it created a lot of confusion because it was parsing the custom properties with JavaScript. It kind of broke the cascade a little bit in some places.

Getting it to work with native keyframes made it not quite as nice to author, but it's still super nice to author, in my opinion. [Laughter] It's enabled it to work with the regular CSS cascade. How it does that is, there is one custom property written to the body of the page. That is written in there with JavaScript. That just defines what is the with of the viewport here.

Chris: Okay.

Scott: From that, it feeds into an animation property that's applied globally as the default animation for all elements. That animation is paused at the offset of the browser width. As you feed in keyframes to that, it maps to the browser width now because you're pausing it at a function of the browser width.

Chris: It really is using native browser tech to what keyframes natively do under the hood. You hook into that and make it give you the value that you want out of it.

Scott: Yeah, exactly. The only thing that JavaScript is doing is really injecting a value that happens to be the viewport if you want to cascade things that are like element queries. You can just write that custom property on the element and it will cascade into this function and work as … query.

Chris: I've got a keyframe at 500 pixel browser width, let's say, and a keyframe at 700 pixels browser width, let's say, but I'm currently at 600 or something. It knows that I'm halfway in between. I'm at keyframe 50%, and so you can kind of run that animation, pause it at 50%. You probably don't even literally need to run it, right? You can kind of programmatically run it or something, I assume, and then pause it at that moment.

Scott: It just starts at that point.

Chris: It coughs up valuables, and it might be a font size. That's fascinating because what's the difference between font size 13 pixels and 82 pixels? It prevents you from having to do that math, not that that's particularly hard math to do, but you might as well just make the browser do it. Then you steal it.

You're saying it's not just math or it's not just font size. It's line height or color. Color would be a weird thing to have to hand interpolate, wouldn't it?

Scott: Yeah. I have a CodePen, actually, that blends color. It's like SaaS mix mode or SaaS color mixing but with native CSS using this technique.

Chris: Hmm.

Dave: Wow. I'm fascinated because now my little browser window corner thing, the three dashes I use to squeeze my window, that's a scrubber, like a timeline scrubber, right? The browser viewport width becomes a timeline scrubber for an animation that just so happens to animate my type of some colors of something. Wow. That's next level here.

Scott: Thanks. [Laughter] Now pixels, not a traditionally responsive unit, can become responsive. As you're sort of scrubbing back and forth, those can interpolate, so it opens up a lot of interesting possibilities for changing colors, size, layout, not just typography.

Chris: Yeah. It seems like you'd be so tempted right away to just be like, "Oh, I can do all this in JavaScript. I can make all these calculations. Just give me some configuration of what you want me to do and I'll do all the calculation myself."

That's fine, too. It's not like that's a disaster or anything. It's kind of clever to use JavaScript but, ultimately, just pass that data to the browser and make all the calculations for you before setting them. It is, though, dependent on JavaScript, yeah?

Scott: It is, yeah. You could write these custom properties in breakpoints and just map out a bunch of different breakpoints with the width value associated with that and have that cascade into the function. It could be native CSS. It's just having JavaScript write the width value is letting JavaScript do what it's best at. That way, CSS can do what it's best at. Just having the two things work together made sense.

Chris: Yeah, certainly. I would just think if you're trying to remove any doubt from people's mind because some people are like, "Oh, weird. JavaScript for this? Does that mean I get flash of un-styled weirdness or not quite styled all the way flash or something?" Have you dealt with that in a way?

Scott: Yes. In Safari, there are a few bugs with this so it doesn't calculate REMs appropriately on initial load. If you were to go the CSS only directly and you were using REMs, it would sort of miscalculate what the scale of that is. Yeah, that was an issue when I was initially sort of prototyping this up. Loading it in after the fact let's the CSS load and then snaps Typetura into place and makes it work. There is sometimes a little flash of un-styled or not correctly sized text but, what I've played around with, it's not been too bad.

Dave: Well, and what you're feeding the CSS machine is just, hey, "What's the window width?" right? The speed of that will be dependent on when Typetura can measure the window.

Scott: Yeah.

Dave: Yeah. I was going to zing you. [Laughter] Are you ready?

Chris: Ooh!

Dave: I was like, "What happens when I browser zoom? I'm going to bust him," but it works, so good job. [Laughter]

Scott: Yep.

[Laughter]

Dave: I was good. I was like, "I got him."

Scott: I native called your CSS.

Dave: "I got him. I got him." Nope.

Chris: Well, it must fire a resize.

Scott: It does. Yeah.

Chris: It looks like that's what the lib does, yeah.

Dave: Sorry. Again, back to zingers, it's like what other limitations are there? I'm seeing Edge isn't quite doing it.

Scott: Yes.

Dave: But also, Edge goes to Chrome in, like, [laughter] a few months or something. I have no idea.

Chris: Why does everybody -- I feel like that's fascinating, just that little moment. Everybody is like, "Soon. Soon. Soon. Soon." I remember when the announcement was. It was like, "Oh, maybe it's just weeks away." Now, ticktock, ticktock, nothing happens. Nobody is saying anything. What's the deal? When does it ship?

Dave: I don't know. I know people have it and have builds, but I haven't seen it. My guess is there's a lot of work to do, but who knows.

Chris: Is it years? Is it years away? That would be interesting.

Dave: I don't know.

Scott: I bet by the end of the year.

Dave: Let me call the Edge hotline. [Laughter]

Chris: It just changes how we talk about the Web a little bit because we're already like, "Oh, forget it. It doesn't matter if it doesn't work in Edge," generally, because it feels so right around the corner, but maybe that's a lie.

Dave: True. What if we're bailing on this plan? Then everybody is like, "Uh-oh. Better that update that tutorial."

[Laughter]

Chris: Oh, my God. If their goal was to not have people hate them, that would be the worst choice ever.

Scott: Whenever we talk about browser support, I always think of the poor people stuck at work on these machines that can't update from Internet Explorer, and they have no choice. It's easy for us to say, "Just upgrade," but a lot of people don't have a choice in this. Even if Edge switches, I think there're still going to be a lot of people on Internet Explorer, so that's the thing.

Chris: The "can't" is a big deal, when there's no upgrade path at all. That's the case, certainly, on work machines sometimes but, also, even on old iOS devices. Even if you're an iPhone user, at least you can remember what it's like to have an old iPhone or something. You keep it around for three, four years, like hopefully you do. Sometimes, old hardware can only run certain OSs and only certain OSs have no upgrade path whatsoever to the new browser thing.

It is fascinating. It's tempting to be like, "Oh, you have old Safari? Well, even Safari is evergreen." Not only iOS it's not.

Dave: Yeah.

Chris: There are limitations to that.

Dave: I have an iPad mini stuck in iOS 9, and it's just like, "Yeah, we can't do anything more than that." It kind of doesn't run anymore, but it's stuck there.

[Banjo music]

Chris: This episode of ShopTalk Show was brought to you in part by Flywheel. It's GetFlywheel.com, which is WordPress hosting. Perhaps you've heard of Local by Flywheel, which has kind of taken the local development environment for WordPress community by storm.

I feel like I used MAMP for ten years. It still exists and if you use it, that's fine. I'm not crapping on MAMP or anything, but Local by Flywheel, to me, blows any other choice out of the water.

For one, I kind of like little UIs. I like a UI for my git. I like a UI for all kinds of stuff, not that I'm afraid of command line stuff. Sometimes it just like it, thought.

Local by Flywheel is an app that sits in your doc on your Mac or it works for Windows too, which is relevant to us because are redesigning the ShowTalk Show website and I recently moved hosts for it too. That's the connection between these things. Of course, I run WordPress locally on my machine with Local by Flywheel. I spin up ShopTalkShow.local on my local machine to work on the WordPress site. Dave can work on it, too, because Local by Flywheel just spins right up on his Windows environment too, so now we're a team and we can work together.

Moving the site was so great because, right in Local, there's a button, "Connect to Flywheel." Boop. Connected. "Send it up to Flywheel." Boop. It's like two buttons and it shoots up our whole site to Flywheel hosting. You get a little subdomain. You can make sure it's all right. You map the DNS over to the Flywheel hosting and, boom, it's moved.

I feel like I was like, "Oh, I want to get this site over on Flywheel. I'll section off the morning to get this done. Hopefully, I can get pretty far. Maybe I'll get it done."

It's like 30 minutes later, it's done. I love that when you find this hosting product is so good, so easy to use, helps you with local development and live development. Plus, I'm in there, like, "Do you want to turn the CDN on, click CDN on? Click here. You want SSL on, click here."

It's this beautiful UI internally, and I started to demand that from my host too. I'm like, this is a paid software product. It should have a nice, clear, intuitive UI and, of course, it does.

Anyway, love Flywheel. Love Local by Flywheel. Love it all. It's great for us. We use it here on ShopTalk Show to power our WordPress site.

[Banjo music]

Chris: Is your goal with Typetura to be--? It's open source. I see there's an MIT license just sitting on it, but is it to be somewhat business-like in some degree, some kind of paid something-something, or is it just an open source thing; just use it?

Scott: Yeah, there are a few revenue streams that I'm thinking about. Consulting would be one and then, yeah, a paid subscription to it so you could save your work and share it with others. Maybe sell kits. I'd like to make money off some side project in my life at some point. [Laughter]

Chris: [Laughter] This could be it. You didn't launch with too much then, so I guess that's a good thing. If you're on the site now and you're making a bunch of keyframes and getting things just perfectly, I guess it behooves you to make sure you copy that keyframe stuff out of there, right? Otherwise, you might not have a way back to the work you did?

Scott: Yeah, I'd save some local storage. As long as you're on that same computer, you're okay, and as long as you don't clear your cache. Yeah, it's probably a good idea to save that out.

Chris: Or pay for the paid version coming up soon, which you can save it right to your account.

Scott: Yeah. [Laughter]

Chris: $9.99 a month.

Scott: Yeah, I've been thinking about the revenue models of stuff online because you end every show pretty much with, "How can we give you money?" It's like, we put a lot of stuff out there for free and stuff on the frontend is inherently free.

Dave: Mm-hmm.

Chris: Mm-hmm.

Scott: Yeah, so I've been thinking a lot about that.

Dave: No pat on my back, but I finally owned up to the words I've said on ShopTalk, and I went into Open Collective. I started backing some projects, and I feel good. I feel good about that decision, so I recommend it. If you aren't supporting open source or anything like that right now, it's a feel good moment to support projects you use, make money off of, and like.

Chris: I wish we were better at it as a community, to some degree. It's nice that so much stuff is free, but maybe that pushes innovation faster or who knows what the exact implications of that are, but I've certainly benefited from it.

At the same time, it's like, if it's entirely on Dave Rupert's shoulder to make sure that he goes out and supports everybody involved, I feel like that points to maybe we're just not as entrepreneurial and we could and should be. The fact that we're not means that there's more dead projects around, too, and that has negative implications. I don't know.

Dave: Hmm. Fair. Yeah.

Chris: I don't do nothing for free. [Laughter] Not that I'm some perfect example.

Dave: [Laughter] What I'd pay for, for fonts, is sample type pairings. I know you can find them. There's that Hello Google Fonts, which is pretty awesome; I go to a lot. It's got good type pairings, but a type pairing plus a type setting and I have access to some kind of type tool that would give me out of the box recommendations of really pro set up type setups, oh, boy, Scott.

Scott: Yeah.

Dave: Wink.

Scott: Most people don't want to worry about that.

Chris: Yeah, if it was good enough where I would put no typography into my own project; I would just do it all here and grab it all out and drop it into my project somehow. Easier said than done, perhaps, but that would be nice to not have to manage that particular part of it.

Dave: It's that weird thing. It's like, I don't want to do all the work, but I want a good one. [Laughter] You know?

[Laughter]

Scott: Yep.

Dave: I know what I like, so that would be--

Scott: Yeah, and sometimes I think, "I'm excited about this stuff. Why aren't other people excited about this stuff?" Then I think about all this tooling that I use and I'm just like, "I don't want to think about this stuff," so I'm super happy that somebody else has.

Chris: You've been messing with this stuff for a while. This is not your first toe dip into the world of typography and modular typography or responsive typography or whatever. It's been years and years, right? I think of your modular scale project, which was kind of related here, right?

Scott: Yeah, that's right. Yeah.

Dave: Kind of like the predecessor of sorts?

Scott: Yeah, in a sense. I wish we could sort of build in a modular scale calculator into this. I think, until Houdini really takes off and we can register custom properties reliably, that's going to be a little bit difficult to do.

Chris: What was the deal there? Why do you need that? Is the problem is keyframes can't--I don't know--have an easing to them? Is easing kind of part of the idea of modular scale?

Scott: Yeah. Yeah, so the thing that you kind of want to transition when you're working with a module scale is, as you're changing that ratio, you're changing the contrast of the typography. A larger ratio makes sort of bigger headlines to whatever the text size is and a smaller ratio, sort of closer to one, makes more uniform headlines. If you're on a big screen, you kind of want these big, chunky headlines with small text that kind of creates a really dynamic--

Chris: You just have more visual opportunity for hierarchy, in a way. But on a tiny screen, you don't have as much.

Scott: Yeah. Yeah, on a small screen. You're going to fit one character per line. [Laughter] That's not going to work, so it's a little like a shift in perspective. That's the number that you would want to slide and that number doesn't map to any current CSS property, so you would have to make a custom property. In order to transition that property, you would need to register that property in a Houdini-like API.

Dave: Are you saying a CPL, like characters per line property of some kind? Could we invent that?

Scott: I wasn't thinking that, but that would be interesting. You could also do maxed with whatever CH.

Dave: Yeah. Yeah, which is pretty common. Okay. Interesting. All right. [Laughter] You've also worked with Molten Leading. I think that was a Tim Brown, like a joint. Is that when you guys collab? A collab, a Tim Brown collab?

Scott: Modularscale was our collab. I haven't worked directly on Molten Leading, but it's definitely something I'm aware of, yeah.

Dave: I thought you were all involved in that.

Chris: Because Typetura works on keyframes, it doesn't really expose -- at least at the moment, it doesn't look like it exposes what easing it uses. Is it just linear easing or couldn't, if you applied an easing thing to these keyframes, doesn't that in a way change the modular scale?

Scott: You could apply any easing you would want and it wouldn't change the modular scale. Well, if you're between two keyframes, two settings.

Chris: Yeah, but when you're at one setting -- yeah, right. It's like you need easing-easing or something.

Scott: Yeah. [Laughter] Yeah, but you could still -- I left that as a custom variable, so you can type whatever easing you want to use within Typetura. You can change it from linear to something else.

Chris: I don't know. The impact of that is probably a little minimal, but who knows, right?

Scott: It's kind of cool if you set a watch size screen and then a massive screen. Then you can kind of set the curve to exactly what you want and not worry about any keyframes in between. There are some cool things you could do with it.

Chris: I have heard of really weird scenarios in which a designer is like, "Actually, I want it somewhat small on a phone screen or whatever, like a couple inches wide, and then only a little bit bigger than that on desktop," for some reason, eyesight, who knows. Then for whatever reason, they biggest size is on a medium-sized tablet. [Laughter] That's weird, but it's kind of true. Then maybe you could even put one of those really weird easing curves into it that goes off the rails weird in the middle.

Scott: Yep.

Chris: Like outside of the boundary. That would be crazy.

Scott: Yeah, you could totally do that.

Chris: What do you call those? A cubic Bezier?

Scott: Yeah.

Dave: Like a mountain?

Chris: Beyond one. A mountain, right.

Scott: [Laughter]

Chris: I was doing that with my hands and realizing not only can you not see me or the audience not see me, but we don't even have video on ourselves.

Dave: [Laughter]

Chris: Nobody can see my mountain.

Dave: Zero one zero.

Scott: It doesn't even exist.

Chris: [Laughter] Okay, well, best of luck on all that. That's fascinating because it's pretty Web native. The JavaScript part of it is pretty minimal. It's even funny to call it Typetura JS when the JS part of it is ten lines or something. [Laughter]

Scott: Yeah, it's about 600 bytes.

Chris: Six hundred bytes. Not even a K! Can you believe that?

Scott: [Laughter]

Chris: Let's call it Typetura.jss.

Scott: dot tiny. [Laughter]

Dave: Yeah! We need dot tiny. Not just .min. We need .tiny for actually small things.

[Laughter]

Dave: One repo in your GitHub that I want to talk about that I don't think is getting enough positive press in the trades is Momentum. Can you talk about Momentum because it is such a cool project?

Scott: Thanks. It's a lot like Typetura, only it doesn't have the CSS piece of it and it's just about providing those values so, just like Typetura provides the width value of the viewport, it provides all of these other things that you have to be like, all right, what is the scroll position? How far away is this from the top, offset top? All these things that you might query JavaScript for to be like, "All right, what is this?" and then do some styling off of this allows you to bring those values into CSS to run through calc and then do styling off of.

Dave: It's stuff like viewport Y and viewport X and all those, all the hits.

Scott: Yeah. [Laughter] Yeah, device orientation.

Chris: I could even see that being in native CSS someday. It's funny that, with just these few--again, this thing is 100 lines of code--provides you, in CSS, just all kinds of stuff about the viewport. It's almost weird that CSS doesn't know these things already.

Scott: Yeah, I thought that too. It's something I want to style off of. We've got viewport units. Why can't there be orientation units or something else.

Chris: Yeah. Certainly, these scroll units are probably the most common use case for someone wiring up some JavaScript in which to send to CSS. It's nice to have a function, too, because you've probably dealt with the performance of it all, which is always a concern with stuff like this. If I write it myself, it's so tempting to just be like, you know, whatever. Add event, listener, un-scroll, un-resize, set property, done, which it's not debounced. It doesn't do anything intelligent whatsoever about making sure that it does those things responsibly.

Dave: If you have ten of those, they all register ten times, and so now you have ten window event listeners or whatever, by accident, rather than just one. "Hey, window. Tell me what your scroll is."

[Laughter]

Scott: CSS is already so performant at rendering things through calc. Why not just use that?

Dave: I've done a few experiments. I know Dan Wilson has kind of done a lot of transforms based on CSS custom properties, like the variables, and stuff like this, like viewport, scrolls, and stuff like that. I'm so convinced this is 'the way' to style and do animations. Yeah, I don't know. I'm looking.

Well, I actually almost used this in a production situation. Unfortunately, we have to go pretty far back on our browser support. But you know, like, somebody dropped in a thousand lines of jQuery to kind of do these measurements. I was like, "Ooh, I've got a secret library that does all this."

[Laughter]

Dave: It's so far. Yeah.

Scott: Well, when you can use custom properties in your full browser support list, I'm excited to see what you come up with.

Dave: Yeah, well, and we just did the, like, "Okay, let's get the vars CSS going as CSS." [Laughter] I was like, "Man, I might just spit all these out in a root, in a root statement as well." That comes with vars. If you import vars, we import the root variables so that the frontend has it, you know.

Scott: Right.

Dave: People can mess with it.

Chris: What about you guys? Why did it take hold in CSS custom property land where everybody applies them to the selector colon root? That's so bizarre to me. Nobody uses that selector ever for anything else. It doesn't matter if you use it. People do use the HTML selector, which is the same thing. I know what the differences are. They're like, "Well, if you were to move this to SVG, then the root is not the HTML element. It's actually the SVG element." I'm like, "Who puts style blocks in SVG?" I'm sure some people do but, when you do, you know what you're doing.

Dave: I didn't know that. I didn't know that. [Laughter] But I do know probably Addy Osmani put it in a blog post and now that's what I do. That's what I do know.

Scott: Yeah. If you want global, that's where you go.

Chris: Yeah, if you want to do global, but it's literally identical to putting it on the HTML selector. I feel like it -- I'd like to trace it back because it proliferated in such a strange way that I think some people just assume, oh, if you're going to use custom properties, you have to use this weird selector at the top of your file. That's where you put them.

Scott: Yeah, my biggest concern with that is there is a lot of value to put it sort of in a local scope. Are people afraid to do that? There can be a lot of value in local overrides to those custom properties.

Chris: Yeah. I would hope that that doesn't get smoked because you're right, the fact that they cascade. Although, I feel like even after all these years of writing CSS, I still am always like, I have a twitch of worry that I use that word incorrectly, but whatever.

[Laughter]

Chris: That's how I think of it. They cascade down to more specific selectors and they're happily overridden at that level, if you want them to be.

Dave: Yep.

Scott: Yeah.

Dave: It's almost like classical inheritance [laughter] inside some sort of CSS class of sorts. It's nice. That's cool.

Scott: Thanks. Thanks.

Chris: What else do you got going on, Scott? Any other projects? Do you want to hint at some future things for Typetura or talk about other use cases you've seen in the wild?

Scott: That's kind of like where my head is at these days. Other than that, I'm making CodePens, playing with recursion and all kinds of fun stuff. Doing that, as usual.

One of my favorite things to play with, just got to give a shout out to this because it's a really old and underused thing, the Cicada Principle. Do you all remember that article?

Dave: Ah, yes.

Chris: I think so. That's the one where, if you use it, it looks more random.

Dave: Your website makes noises every two years.

[Laughter]

Chris: It had something to do with overlapping and making it look really--I don't know--exotic looking.

Scott: Yeah. It's using prime numbers, so patterns, multiple patterns built on prime numbers to create the illusion of something random. It repeats to whatever the multiplier is between them all.

Chris: Yeah.

Scott: I've been playing around with that a lot in animations and it's been a blast because it looks like this organic thing that's moving randomly around. I don't know. It's just one of my favorite things to play with on CodePen.

Chris: 7/13/17 or something. Cicada is a little bug, right, and it comes out at years that it seems random. Whatever species they eat, don't they eat some other kind of bug? That other kind of bug is tripped out by their schedule. They can't figure it out. It's just like once in a while they just get eaten and they're like, "God dang it!"

Scott: [Laughter]

Chris: But it if was every other year, they would catch on. They'd be like, "Oh, I get it. They come out every other year."

Scott: I think they're predators. Yeah, they're predators. They're like, "I'm going to have a feast right now," and they don't know when the feast is going to come, so they're just overwhelmed. Then the cicadas just go on to reproduce some other year because they come out in a very unpredictable way.

Chris: It turns out it is predicable, but it's not something that any other -- it's hard to catch onto evolutionarily.

Scott: Right. Even if it was predictable, it's like, all right, we can get this pattern, but the pattern goes on for such a long period of time because these are prime numbers and they compound." Every time there's a new cycle added to it, it just kind of staggers it out even longer, which is perfect for use in CSS animations because, if you want to sort of create something that looks random with only a few moving parts, you can dial into that and make something.

Chris: How would you use it? Would you move something 70 pixels, then 130 pixels, then 170 pixels, or would you put keyframes at 7%, 13%, 17%? Is it just all over the place all the time?

Scott: I usually do it with the animation duration.

Chris: Hmm.

Scott: Just kind of adjust the animation duration and then stack multiple of those animations on top of each other so that they kind of diverge and they almost never converge because they're on this staggered schedule. They converge eventually, but it's very infrequent.

Chris: That's great. Yeah. [Laughter] Shout out to 2011, for the Cicada Principles back.

Scott: Yep, it's my favorite thing and I really want to bring it back, so it's the coolest.

[Laughter]

Dave: I've got one. I've got one. Are you ready?

Scott: Uh-huh.

Dave: Whenever you talk about parallax, somebody will say, "Oh, you do it in CSS." They link to not your original creation of the CSS Parallax, but some weird one that doesn't work. [Laughter]

Do you recommend using the CSS Parallax method? Maybe we can step back and describe how you created that, but do you recommend that? What are your feelings on the CSS Parallax?

Chris: We should define it first, like what is it?

Scott: Pure CSS Parallax. I assume you're talking about that CodePen that I authored.

Dave: Yeah, probably 15 years ago now. [Laughter]

Scott: Yeah, so it is actual how parallax works. As you're driving in a car and you see trees in the distance are moving a lot slower than the trees in front of you, I think a lot of times parallax is conflated with just scroll jacking.

To mimic the actual effect of parallax, we already have 3D functionality in CSS. As long as you can lock the perspective to the viewport, you get a parallax effect. But in order to lock the perspective to the viewport, you have to essentially lock the body to be 100 view height tall.

Dave: Mm-hmm.

Scott: In the version that I made, viewport units were not as reliable as they are today, so I used percentages to do that. It works; it works well across lots of browsers. But because it is doing something so weird, I don't necessarily recommend it. A lot of browsers sort of prerender a whole page and scroll that as one unit as opposed to this technique where it sort of has to paint as you're scrolling it because it doesn't have this sort of long image that it's just moving up and down. It works; it works really well.

Chris: Wasn't the idea--? To set the stage, let's say you render a page and it's got a hero image across the top. There's a couch, a plant, and a vase or something. You scroll down, and you're like, "Surprise! They're all independent objects." The couch moves away really slowly, but the plant flies away really quickly, and the vase flies away at some medium speed or something.

That could be considered parallax even though it doesn't mimic reality because, in reality, the farther things away move slower and things that are really close to your eye move faster. It's still kind of using the spirit of parallax in that it's just fake. It's like if there was a giant tree or the couch was actually 50 times bigger than it was and shot or whatever.

Your technique, didn't it shrink them with a transform and then rescale them bigger some way so it's like the scroll effect moves faster or slower because it has been transformed already? There was some kind of magic in there, wasn't it?

Scott: Yeah, so it does. It's very honest to the original representation of parallax, the natural representation of parallax. If you transform something in 3D, like a plane, you'll see the top of the plane and then the bottom of the plane as it moves up the screen. How we normally see parallax is just flat rectangles and sort of vary the speed of those, but it is actually CSS 3D and things are moving past a fixed perspective, so I guess, yeah. [Laughter]

Dave: I think it's clever. You're using that perspective, so perspective 100 is close to me. Perspective 1,000 is farther away. Perspective 3,000 is farther away, so that 3,000 will just move. You've almost set up a 3D scene in CSS.

Chris: Yeah, and it's just kind of fun, right? It's not to be used all the time, but it's kind of a clever thing. What's cool is it's not technically scroll jacking because it's not doing anything that native scrolling isn't doing already. There should be no performance hit whatsoever from this, none.

Scott: Right.

Chris: That's what's kind of appealing about it.

Dave: Yeah, I like that.

Chris: Scroll jacking is when you scroll down and the couch comes flying at you because it hit a certain weight point and JavaScript was watching for that and something happened. Even that type of stuff can be done performantly-ish, but it's definitely not as clean as just this pure CSS approach of pushing it away and pulling it forward with transforms and perspective and all that stuff. If you're going to do it, try to do it that way first. [Laughter] That's much nicer to some degree.

Worse, the worst kind of scrolling is when you're trying to scroll down and it's like, "Whoa! Slow down there buddy! I have a panel I need to snap into place first before you're allowed to scroll past that one." That's where the scroll jacking comes in and is appropriately termed because it has stolen away from you your natural scroll down-ness.

Scott: Yeah. I found it really interesting that sort of slow sites and bad performance is so heavily associated with parallax. I don't think it has to be, but you know it is. [Laughter]

Dave: Well, I think your Momentum would be a perfect example. If you just want to move something a little slower, use calc and position absolute or whatever or fixed and scrollY, you know. I think that's so much easier. Eh! It makes it more….

Scott: That would be my recommendation today, yeah.

Chris: You can still screw it up, though. Just because you have scrollY I your CSS, if you use it then to set the top position on something, well, we know top isn't the most performant thing to set, especially rapidly, right? That's why JavaScript animations don't use it, so you still have to be a little careful.

Dave: I think there are two main limitations, like the browser doesn't report subpixel scroll. You can't scroll 321.025 pixels, so your measurements are always rounded. Yeah, maybe you'll get some snapping.

Then the other thing is, I think, yeah, like what you were saying. You can't measure window.scrollY at 60 FPS or something. I think you can, but idea there is it's an expensive measurement or something. Doing it on whatever request animation frame is probably going to be kind of slow, so idle key, idle frame, or something. Idle callback, that's the one.

Chris: Request idle callback?

Dave: Mm-hmm.

[Laughter]

Chris: It's well named, isn't it, that particular API, because you're like, "Oh, I get it. The browser will only call this when it's like the thread isn't blocked and it's ready to do something more computationally intense. I've never actually used it. I'm still afraid of stuff like that. If I'm about to do something gnarly, I'm just scared to do it, period, regardless of if I get a request idle callback.

Dave: Yeah.

Chris: Anyway, what other CSS stuff are you excited about, Scott? Do you have anything in mind that's like, "Ooh, that's fun to play with," that doesn't have to do with bugs?

Scott: [Laughter] I think recursion is my other favorite thing to play with. Just with Ms and how things effect the things that are nested inside of them.

I think, when I talk with people about authoring CSS, I do design at my day job, not author CSS. It's because I like to play with stuff and I like CSS's sort of poetry as opposed to writing instruction manuals for production stuff. [Laughter] Yeah, recursion, just how properties cascade down and sort of change as they do that, I think is super fascinating. You can create some really not performant things because it has to do the calculation on the parent, then the child, and then that child, then that child.

Chris: Is the classic example that, like, oh, LI font size 1.1m? That's just killed people over the years. They're like, "Oh, it looks fine," and then somebody writes an article that's got three nested lists in it and the font size gets huge in them. Somebody is like, "What is happening here?"

Scott: Yeah. I found this really interesting bug in Safari as well with animations. They are self -- if you apply an animation with an M unit on top of an M unit, an element with an M unit, it's self-recursion. I don't know the word. It creates a recursion loop within itself and it's super interesting.

Chris: How does it play out? It's only in Safari?

Scott: Yeah.

Chris: Hmm. Like it's a bug; it's like an accident, probably.

Scott: Oh, it's a bug, but it would be really fun to play with if it wasn't so different from everything else.

Chris: What else does that? You'd think unit list things would, but do they in the same way? If you set line height 1.1 or whatever, does it compound on itself as you nest elements within itself or would it have to be M to do it?

Scott: I think it's more dependent on the property than the value.

Chris: Really?

Scott: Font size can have sort of a recursion loop because it references its parent, but line height only references itself.

Chris: Oh, it's not an inherited property.

Scott: It can, and it's inherited, but it only references the font size of itself, so it's referencing a property other than line height, so 1.1 is referencing font size.

Chris: Right. Okay, it's referencing and then it stops there, kind of, because it only has to look at one level, whereas font size has to look at -- there's nothing it's referencing on itself. It's referencing a parent, which references a parent, which references a parent.

Scott: Yeah, box model stuff, you can create recursion loops with. So, as you're sort of nesting an element inside of an element inside of an element, you can. For example, width of 50%, as you're sort of going down, it will get smaller and smaller, but you can also not set a width and just sort of have them layer out like rings of a tree or something like that.

I made a CodePen recently where it's sort of these concentric circles moving around each other and there's no width or height set on anything. It's just sort of based around the borders and how much space those take up to sort of form these concentric circles.

Chris: Really? About the 50% example, I think people can wrap their head around that, right? You have 20 nested divs and they're all set to the width 50%. It just cuts in half, cuts in half, cuts in half. It forms a kind of natural easing too, doesn't it? Does that map to any easing that we think of normally or is it its own weird--? [Laughter]

Scott: Yeah, it's a long, rhythmic scale. You can map these out on modularscale.com [laughter] to get a full circle. Yeah, if you set 0.5 or if you set a scale using the ratio of 2, it will be twice whatever the child is. As you go up, you could kind of see things build up and up and up on sort of a more logarithmic scale as opposed to a linear scale.

Chris: Got it. Fascinating. Logarithmic is a little quick.

[Laughter]

Scott: Yeah, which is why I like type sizes and Ms, I think. They're fun to play with together. I know that they can be kind of difficult to manage in production code. The golden ratio is really interesting. I don't think it's particularly useful in many practical purposes. But if you sort of have nested things with a monstrous scale of the golden ratio and sort of are one step below the scale in the context of it, everything within it will be exactly the size of one step below on a modular scale. That kind of recursion is very predictable with inside a golden ratio, which is partly why it's so interesting.

Chris: I think I've heard you say in that past that you'd think a guy like you, Scott, which plays with modular scale and helping us with keyframe out, our typography, and anything, all of this type of thing that you'd be really into the idea of vertical rhythm, which is, I feel like, a concept of typography that comes along with this bucket of thought, doesn't it?

Scott: Yeah.

Chris: Like vertical rhythm. Let's say, you bought some transparent grid paper from the craft store and laid it over your computer screen that the typography on that screen could or perhaps should match perfectly onto those grid lines. Regardless of anything else on the page, that the baseline of an H3 lines up with the baseline of the H1 up above and that, if it does that, there is some spine tinglingly perfect thing that happens.

Dave: Dieter Rams appears in your room.

[Laughter]

Dave: Pats you on the back and says, "Well done."

Scott: Yep, that's the way to solve it.

Chris: It's tricky. [Laughter] Yeah. You have to do it three times, though, on different websites.

Scott: Yeah.

Chris: What is vertical rhythm? Is it true that you kind of don't care about it? [Laughter]

Scott: Ah, yes. That's true and it is the idea of sort of aligning everything to a more base unit. Let's say you have a four pixel baseline grid and then all of your font sizes and line heights need to be a multiple of that. I don't particularly agree with that, and there are a few cases where I think aligning to a baseline grid is important. That is if you have columns of text next to each other. It can be useful but, on the Web in particular, it's extremely difficult to maintain that vertical rhythm.

Text on the Web is also rendered in half letting so, as you apply line height to something, anything over the difference from one, so like let's say you have 1.2 line height. There's 0.1 letting applied to the top and point letting applied to the bottom of each line.

Chris: Really?!

Scott: Yeah.

Chris: I never knew that.

Scott: [Laughter] Yeah, so everything has this weird half letting, but that pushes the baselines off. If what you're trying to do is align the baseline of all of the typography, the larger text with maybe a little bit more letting relative to the size--

Chris: 1.4, sure.

Scott: Yeah, it's still going to be kind of misaligned with whatever smaller text comes next to it.

Chris: That's what's always killed me about this. I found that so hard because, at some point, you kind of give up, right? You're like, "Well, I can't put 1.4 on these headers because it's screwing it up too weird and it's forcing me to use weird negative margins or something, which I don't want to do."

If I just set it back down super low, that kind of fixes it and I can just scootch things around with margins, positive margins. Then you're like, "This is a mess. I feel like I'm fighting a ghost here and for what?" The end result doesn't seem like it's any better.

Then I talk myself out of it because I'm like, "Well, on the Web, I'm looking at probably a sixth of the overall thing at all." It seems like, oh, sure; if I open a newspaper because I'm sitting at a park bench, I can see everything, the entirety of the content of everything. I can see a vertical or the matters in that scenario but, on a website, you can only see a little piece of it at a time anyway. What does it matter if the top of this website has the perfect grid alignment after I've scrolled down 4,000 pixels? Who cares?

Scott: Yeah. In some cases, it is nice to see it but, yeah, the vast majority of times, yeah, it's going to drive you crazy and it's not particularly worth it. I think there was a spec that Adobe wrote, a draft spec to include vertical rhythm on the Web in CSS, but I don't think it gained too much traction. It would be interesting to see it. I wouldn't be opposed if it were a lot easier to do but, because it just creates such a fragile mess, it's not something that I particularly care for.

Chris: Yeah, if you could just get it for free or something, that seems cool. Yeah, I could see how you mean columns of text next to each other. Does CSS columns do anything fancy to handle it? Let's say you add an H3 in your first column but not in your second column. Does that make that second column's baseline not align or do browsers do something smart about that?

Scott: From what I know, no, they don't. Yeah, I don't recall they do anything.

Dave: I think it's topline.

Chris: That's a little funky, right? You'd think, in that second column over, if it was all misaligned baselines, all that small copy that's set in the columns, if it didn't share a baseline, that would be very awkward.

Scott: Yeah. Yeah.

Chris: What are you going to do? Just put a big old grid gap on it. What is it called, column gap? It better be.

[Laughter]

Dave: I think it's called….

Chris: I wonder if that new gap property -- because we have grid gap. They renamed it gap. It works with flexbox now, sort of. I wonder if that will map to columns too. Hmm.

Dave: Hmm.

Chris: Question mark.

Dave: Question mark.

Chris: Don't know.

Dave: Well, cool. Hey, I think we are hitting our time limit for shows here.

Chris: Oh, my gosh, we are. That went fast.

Dave: Yep. Yep. Yep, sorry. I'm the timekeeper here, official timekeeper. Scott, thank you so much for coming on the show. We really appreciate you coming on. For people who aren't following you and giving you money, how can they do that?

Scott: Yeah, thanks for having me. I'm @ScottKellum on Twitter and I'm at Kellum.me on Mastodon. Go to Typetura. Use it if you like it. We will have ways for you to give me money, hopefully, at some point soon.

Dave: Excellent. Wonderful. Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show. Follow us on Twitter, @ShopTalkShow, for tons of tweets a month.

If you hate your job, head over to ShopTalkShow.com/jobs and get a brand new one because people want to hire people like you.

Just a tiny bit of housekeeping. We are adding transcripts to every episode. We are working with our transcript friend, Tina, to do that. We're probably a week or two behind, Chris?

Chris: Yeah, I'm sure it's not Tina's fault. I'm sure it's just us. It's new. We're working out the workflow and stuff, and it takes a little time. What we don't do is not publish the show because we don't have a transcript. We just publish it and then add them later. If you're really into transcripts, just slow down your life a little bit, you know.

Dave: We'll try to get it at as soon as possible into the post page and maybe we'll do a better job on Twitter tweeting when we have that. Anyway, just wanted to say that it's there. It's coming. It's something we're committing to. Yay, transcripts. Anyway, that's all. Chris, do you have anything else you'd like to say?

Chris: Hey, ShopTalkShow.com.