439: Container Queries, Desk and Cable Routing, and Designing a Clicky Keyboard
Chris talks about his desk and cable organization in his new office, Dave talks about his new custom keyboard, and then they go for a deep dive into container queries.
Guests
Chris Coyier and Dave Rupert
Time Jump Links
Transcript
[Banjo music]
MANTRA: Just Build Websites!
Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show. I'm Dave--at home with the kids--Rupert and with me is Chris--in the booth. You know the booth is going to move soon--Coyier. Hey, Chris. How are you?
Chris Coyier: That's right. Yeah. My office address is moving from, like, chronologically one integer away because it's this big office building. Not big, but big by Bend standards. I'm just moving to the building right across the street, so it just goes from an even number to an odd number and two suites over. Yeah.
Dave: Hey, big shakeup. Big shakeup.
Chris: Big shakeup but the new office, there's nothing in there yet, so the sound is terrible. The first thing I do is set up my desk, right? Which I posted a picture of my desk last night, which you arrested me for. Sorry.
Dave: I saw that horror show. You've got cables coming out the wazoo.
Chris: I know. I know you've struggled with that too, but even now you choose not to run a -- you just run a USB mic, right?
Dave: I just run a USB mic. I know all the cool podcasters do the full setup, the Scarlett into the DBX into the -- you know.
Chris: Yeah! Just those alone are responsible for a lot of wires if you run the DBX and an audio interface. [Whistles] Then I have that at my desk because I just wanted to try it. That was like a pandemic thing. I have that in the booth here, too, but I wanted it at my desk and I know that's a privileged ass thing to say but, once in a while, I'll do video and video calls and stuff. I already invested in the nice webcam. You know it's my hobby. I nerded out on it a little bit.
I have the cloud lifter, too, which is before the DBX, which increases the gain on the mic. Holy cow, that's a lot of wires, not to mention just all the regular stuff I like. I like a wired keyboard, et cetera.
Dave: They're all different size devices, too. It can't be some uniform thing you put in a rack. It is a little tiny boy for the cloud lifter, a medium boy for the Scarlett or the Apogee or whatever you're using, and then the big one for the DBX.
Chris: Exactly. Let's see if I can find--
Dave: Yeah.
Chris: I posted the picture just on purpose, like this horror show thing, you know.
Dave: Yeah.
Chris: Knowing that there are some solutions to this, but I wanted everybody else's solutions too. Everybody has got an opinion, you know, "Use the wire ties," and then more people are like, "Never use wire ties. Velcro only because, otherwise, you've got to clip the wire tie," et cetera.
Then I think the biggest gain for a desk like I have is -- what do they call them -- a cable runner kind of thing. It's like--
Dave: Yeah, like a gutter behind your desk.
Chris: A gutter. It turns out, and I knew this, my desk had one of those things. I just hadn't installed it because I kind of didn't care.
Dave: Nice. Yeah.
Chris: That was one of the funniest comments, "Push it against the wall and forget about it," which honestly is not the worst idea. That horror show picture -- if people haven't seen the picture, the front of the desk looks fine. The back of the desk is just -- I wouldn't call it a tangle but it's just drooping wires everywhere.
Dave: Yeah.
Chris: The reason I wouldn't call it a tangle is because I just plugged all that stuff in. There is nothing tangled up in there. It looks droopy and sloppy, but there's nothing tangled.
Actually, if I need to go back there and make changes, it's ready to rock for that. It's very easy to do that. It has some functional UX advantage just leaving it like that but it is quite sloppy.
You would have arrested me twice over if you saw the context in which the desk is in because it's this beautiful office space and then there's what would be probably a conference room in an all-glass part of the office, but I don't have any need for a conference room so I put my office in the glass cube. When you're in the office and you're looking at the glass cube, you're looking at the back of my desk, which is this horror show of wires. It takes this beautiful space and it turns it into this really not beautiful space.
Dave: I did notice you have a nice brick wall with some big oak beams, kind of texture, but you pointed your camera at the beige wall. [Laughter]
Chris: I know. It's tricky because the beige white wall has some advantages like there's zero distraction. You're not looking at anything but me when you're looking at me on camera, which I don't mind. Then if I want to green screen out, I can do that pretty easily.
Dave: Sure. Sure. That's easier.
Chris: Which is kind of neat.
Dave: Yeah.
Chris: I don't know what I'm going to do. I'm only on the first couple of days in the office and I have the booth. I'm going to keep the booth. If I need to do high-quality audio, I've got that.
Dave: Yeah.
Chris: Anyway, the gutter is cool. Putting eyelets on the bottom of the desk to run wires. The trick for me is going to be to hug a lot of that wire mess up under the bottom of the desk so it just doesn't look so droopy and ridiculous. That's one of the solutions.
Another really interesting one is just a backdrop for the thing. Like you're in college and you hang a Pittsburg Pirates flag behind it.
Dave: A flag?
Chris: Yeah, just hang a dang flag behind it. I probably will do something like that just to hide, to some degree, the back of the desk.
Dave: A little skirt.
Chris: A skirt. Yeah.
Dave: Yeah.
Chris: Anyway, that was more talk about that than I planned.
Dave: Yeah. You have gromets in your desk, so you're up. That's an advantage, a competitive advantage for cable management.
Chris: Yeah.
Dave: Just run them through there. One thing I saw Sam Breed, I think it was -- you know how you can get those -- it's like a little clip-on for your mic stand? It's like you clip an iPad to a mic stand or something like that. You know how people do that?
Chris: Yeah. Yeah. Oh, the Elgato. Well, there are a couple of companies that make them, but you're talking about that pro stand or whatever. Yeah.
Dave: Yeah, and you can put your camera on that thing so it just clips to your Jarvis arm or your monitor.
Chris: Oh, I immediately went to try to buy one and the good one was sold out, because I have a tripod. People were like, "Get rid of that bulky tripod."
Dave: Right.
Chris: Mr. Joel Hooks said if you have one of those gorilla pod things, those will work too. That was the first thing I did this morning; got rid of the tripod.
Dave: Just bought one of those gorilla things?
Chris: A gorilla are these little -- I already had one. I just never used it. I'm like, "Oh, thank God. This is a great solution."
I don't know that I trust it entirely. It doesn't feel gripped on to the top of the monitor as strong as I might want my DSLR camera to be.
Dave: Sure. Sure. Sure.
Chris: I bought a knockoff one of those stands that clamps behind that. I already use one of those stands for my Key Light anyway, which is yet another ridiculous thing that I have.
Dave: No, you should have the Key Light. I want Key Lights, but I just haven't taken the time to sync to it. I've used a selfie stick before.
Chris: Mm-hmm.
Dave: Some of the selfie sticks have a little three-prong stand, so I've used that for my Logitech little webcam.
Chris: That's nice.
Dave: I'm getting good mileage out of my Logitech. I don't look like garbage.
Chris: I like the idea of clamping things to the desk. That way it can't move. The Key Light clamps.
Dave: Yeah.
Chris: The mic has a boom arm that clamps and now the DSLR will have a clamp too. The clamp also, because they're so strong, they take up less room. It's just one little metal pole.
Dave: Mm-hmm.
Chris: Anyway, I liked the idea of Velcro ties. A lot of people said that, so I think once you get the basics right and everything is plugged into the right place, then you can kind of go around with some Velcro and get the aesthetics of it a little nicer. Some people also pointed out these sleeves. Some of them are even cut to size.
Dave: Yeah.
Chris: You wrap a bunch of cords around it. Some of them have zippers on them so you can -- it makes a bunch of cords -- it combines them but also makes them look a little nicer. I like that idea.
Dave: Yeah. You can go into the Container Store, I guess pre-Corona times. You could just go into the Container Store and they have tons of little gadgets and gizmos for that. I could probably go bankrupt trying to do it all. My setup right now is pretty terrible, but I kind of have my cables going a little too far.
Chris: Hmm.
Dave: I need two longer cables and I think I can then cable manage efficiently.
Chris: I bought some--they were called--world's most powerful fishing magnets, or something. My desk is metal and I was looking at these 3M stick-them-on eyelets. The eyelet can help hug a cord up to the bottom of the desk. I was like, world's strongest fishing magnets, yes, please.
It's just such a nerdy, fun little thing so I can slide them around, but they're really strong. I can use those. I haven't actually tried those yet. I just ordered them, but I think that'll be a fun thing to try.
Dave: I've got some little gummy rubber ones and they work okay but it's like if the humidity changes or something like that, they'll just pop off. Over time, they fall apart. But $10 for a pack of 50 or something, it's pretty decent.
Chris: That's cool.
Dave: Yeah.
Chris: Of all the responses, my favorite was a post from October 2019 from Garrett Dimon.
Dave: Mm-hmm.
Chris: I've known Garrett for a long time. He's made some cool products and stuff, but his post is called Designing Your Workspace. We'll put it in the show notes. Here. I'm going to put it in the show notes right now so you can see it. [Laughter]
Dave: Yeah. Perfect.
Chris: It was my favorite one of these "here's what I did with my desk" posts ever, ever, ever, because his desk, it ultimately looks clean but there is a lot going on in his desk, so it's a miracle to me that it looks clean at all. Really impressive.
Dave: Wow.
Chris: He's got the DBX and he's got to mounted under the desk by where his chair would go in, but it's a standing desk too. It is an impressive setup, I must say.
Dave: Oh, wow. Yeah. Oh, he under-mounted all the things. Okay. He's got a desk on wheels. Wow. This is real clean and the gutter.
Chris: Under-mounted is a cool, cool thing, I think.
Dave: Yeah, I was talking with him. I got a weird new keyboard, Chris. I did it.
Chris: [Loud gasp] Tell me! I saw it already. It's the cool white one with the rainbows. [Laughter]
Dave: Yeah, it's the Moonlander is the edition. It's a riff on the ErgoDox, which I was using before. But then I kind of switched back to the--
Chris: Yeah.
Dave: I loaned the ErgoDox out but I switched over to that Microsoft Sculp that you and I both like, or the ergo one.
Chris: The newest, newest version, right?
Dave: The newest wired one, yeah, because the wireless Surface ergo, it's awesome but it is wireless and kind of spotty on starting your computer back up.
Chris: This is the Sculpt, or not the Sculpt? I don't know.
Dave: I think it's just the Microsoft ergonomic keyboard, $60. [Laughter]
Chris: Okay. You wanted to go mechanical?
Dave: Mechanical, yeah, and that's what the ErgoDox was doing. Then this Moonlander came out and it's got a few improvements. The shape, it's a lot thinner. I just was like, you know, I'm going to treat myself to it because even using that Microsoft ergo, I can sort of feel the wrists kind of get angry at me.
Chris: Hmm.
Dave: I have to be -- it's a little bit too much for me. Anyway, I'm one day into it here but it's pretty cool. I'm enjoying it quite a bit.
Chris: It looks like you're landing a unicorn spaceship. It's amazing looking.
Dave: It's science fiction. It really is but it's cool. It's fun.
Chris: It is cool.
Dave: Yeah.
Chris: Beautiful keyboard. What makes me nervous is that I'm still in Mac land. Could I get the key bindings to my liking if I did something like that?
Dave: Yeah, totally.
Chris: Yeah?
Dave: That's kind of the whole mechanical keyboard or anything other than a full keyboard. The mechanical keyboard mantra is you can basically program this however you want.
Chris: Okay.
Dave: I can make any -- I could make--
Chris: But do I have to run Karabiner-Elements or one of those weird things? What software would I use?
Dave: No. No, you actually use their software, at least on the ErgoDox. But every keyboard kind of has their own thing. You basically flash the firmware. There's an Arduino inside of it and you basically reprogram the computer. You download a little file from the browser and then flash the firmware.
Chris: Oh!
Dave: Any time I update it, I can just download a thing, drag it onto this app, and then hit one key. Then it'll reset my whole keyboard and remap it.
Chris: It's almost hardware-level powered. It's not like the keyboard comes in and goes through some middleware to decide which key you pressed.
Dave: No. No.
Chris: It's just a legit keypress. Hmm.
Dave: On this version, I put the emoji key, which is a new Windows feature, but it basically is Win key plus period and that's what it maps to. I can just hit that key and I get an emoji picker and my custom character picker, which is what I'm more excited about. [Laughter]
Chris: Is it mechanical too, or is it not?
Dave: It's mechanical, so it has Kailh Copper.
Chris: So, it goes clickity-click-click-click-click. Put it up to your mic right now and clicky on it.
Dave: Here. I'll give you the little ASMR edition of the--
Chris: Yeah.
Dave: "Hi. Welcome to the ASMR podcast."
Chris: Ooh, you got me.
Dave: ShopTalk Show.
Chris: Oh.
Dave: Here we go. Oh, you feel it? Okay. I'll just go--
[Keyboard clicking]
Chris: Oh!
[Keyboard clicking]
Chris: Is that full typing?
Dave: Yeah, just--
Chris: It's not that loud.
Dave: No. No, so these switches, these are Kailh coppers, which are a silent switch.
Chris: Oh.
Dave: But they have a little bit of tactile feedback, so I did Kailh silence totally, like Kailh silvers before, but they were a little loosey because I thought I wanted the more Mac, but I think with mechanical keyboards, you want a little bit of tactile feedback but I don't want noise. I respect myself too much.
Chris: When you ordered, how come yours is rainbow? On the website, it's not rainbow.
Dave: Oh, so on another layer, you can just program. You can change the color cycles. It's like LEDs back there, so there are a few presets. You can just dial it into whatever color you want.
Chris: Sick.
Dave: You like a specific hex code; I could get you that specific hex code.
Chris: Oh, okay. Okay. What else here? Let's say I wanted to run -- all mechanical keyboards share some kind of standard? Could I buy Cassidy's Scrabble keys and put those keys on this thing?
Dave: Yeah, so you could. You could buy those and I think there are versions of this online with the exact keycaps you're talking about or the Scrabble keys. What's the Sailor Moon one she made? They're really cool.
Chris: You went white, too, though. There's a perfectly good black one and you went white. Hmm.
Dave: Hey.
Chris: (Indiscernible)
Dave: I am into white peripherals.
Chris: That's cool.
Dave: Sorry. That's who I am.
Chris: That's who you are. Okay, so key switches are the things that make the keys feel different, which I absolutely have no idea.
Dave: Mm-hmm. Yeah.
Chris: There's cherry, which has tactile.
Dave: Yep.
Chris: Cherry MX blue. Brown is tactile. Blue is clicky.
Dave: Yep.
Chris: Which that's what I think of mechanical keyboards is very loud.
Dave: That's going to be one of the louder ones.
Chris: Yeah, and then there's some kind of Kailh box red, which is linear. Does linear describe a gradient of response?
Dave: Yeah. Yeah, basically if you think of a chart, when you push it, it'll be the same speed all the way down. But a cherry brown or something like that will have a little more resistance as you go down. They add a little piece of metal that bends. The resistance will be different.
Chris: You're literally bending a piece of metal? That's how these work? That's amazing.
Dave: Well, it's like a paperclip. It's just like a little bit of resistance or whatever. Then you push down and then some of them will do a click and some of them don't. That's basically just the metal.
Chris: Oh, it'll say click. It'll say clicky.
Dave: Yeah.
Chris: You did not go clicky?
Dave: I did not go clicky, but I went tactile, so I get the tactile response that the key was pressed, so I push down and I get a tick, but it's very -- it's a linear key with a tactile feedback, if that makes sense.
Chris: Did you know? Have you tried the other ones? What if you want to change? Can you change?
Dave: I can. On some boards now, you can just pop out the whole entire switch. You just yank it out with the switch puller, and so you can actually reset the whole thing and set it up exactly how you want it. I've tried other switches, like the silvers without the tactile that I had.
Chris: Did you like them?
Dave: This is Kailh keycaps with -- I did, but they were a little too fast, and so I would type and not know if I hit the key. Does that make sense?
Chris: Yeah.
Dave: Then I bought another keyboard, which happens.
Chris: Well, there's copper and brown are all tactile, too, so how do you know?
Dave: Copper is tactile but brown is going to be a little bit of a heavier switch, so a little bit more finger pushing. Because my hands hurt when I type, I didn't want heavy stuff. But, yeah, so you can put little rubber O-rings, basically, on every key and slow it down a bit, give it a bit more resistance and stuff like that. I did that on my shift key just to make it feel like, okay, I hit the shift key.
Chris: Really?! Key-by-key, you can change? Oh, my God.
Dave: You can dial it in. That's the thing. It's fully customizable and that's what I think the advantage of a mechanical keyboard is. You can build a keyboard for you.
Chris: It's also what makes -- I mean there's a buy button right here that I just might click on, but now I'm all nervous because I've got to pick the keys. I've got to pick the key switches. I've got to pick the color.
Dave: Yeah.
Chris: I'm nervous. What if I don't like it? Then if I don't like it, I don't know that I don't like it. It just means that one of those choices might have been wrong.
Dave: Yeah. With this keyboard, in particular, the one I'm using, I would honestly recommend not buying this. I would try to borrow one.
Chris: Oh.
Dave: There's a whole lot going on with my keyboard. It's a split ergonomic, which means two-handed, independent hands, right?
Chris: Yep.
Dave: It's mechanical, so that's a whole other different look and feel, right?
Chris: Right.
Dave: It's tented, which means it tilts up almost like if you move your hands from flat on a table to standing straight up. You can tent it to almost any angle you want. You can go kind of extreme.
Chris: Okay. You could go extreme, 45-degree angle kind of.
Dave: like 45-degree tent, you know.
Chris: Uh-huh.
Dave: Then ortholinear or columnar is the other part, so you know how, on a normal keyboard, all the keys are kind of staggered, right?
Chris: Oh.
Dave: Your Q key is halfway over your A key.
Chris: I don't know anything about this one. Tenting I can deal with. I don't understand this one. What's going on here?
Dave: This is ortholinear or columnar, so it's the idea that your fingers only move in a column, so they only move up or down. They aren't constantly going side-to-side.
Chris: Hmmm--
Dave: I'm making hand motions in the webcam.
Chris: Is it weird?
Dave: If I'm on J key to go up to U, I just move my finger up. I don't move it side-to-side. I just only go straight up.
Chris: That somehow feels less ergonomic to me. I don't have a keyboard in front of me, but I'm doing it on my normal staggered keyboard and the position of my arms feel like the staggering is more natural somehow.
Dave: I would say it's maybe over-hyped, you know.
Chris: Okay.
Dave: But that's my personal opinion.
Chris: Is this your first time using a columnar keyboard full-time?
Dave: No, I mean the ErgoDox is also columnar.
Chris: Okay.
Dave: I think it's overhyped. I think there are some advantages, like my fingers aren't moving on every keypress. But as a programmer who also has to use the entire keyboard and hit all kinds of keys and weird combos and stuff like that, I'm a busy typist. It's a little different than just doing emails all day, is what I'd say. I'm moving around. That said, I'm not moving on every keypress, like side-to-side.
Chris: Okay. Okay.
Dave: I think that it saves me a little bit of dancing, but not a lot.
Chris: I like your point here, though, is that there's a lot going on here. To just buy this and assume that you're going to like it, it's a little -- if you're moving from a pretty normal keyboard, there's a lot of change happening here.
Dave: Yeah, there are like four or five different dimensions, like literal dimensions with the tenting, that you're up against. It's all about finding what's right for you. For me, at least, it's about finding what my body responds to. Even changing that up, right?
Chris: Yeah.
Dave: The reason you have a standing desk is so you can do sitting and standing.
Chris: Right.
Dave: I think I would have problems if I stood all day. I would have problems -- I have problems when I sit all day.
Chris: Right.
Dave: I think this is if all of a sudden I feel like I need a change in keyboard, I can just bail out.
Chris: Oh, you can.
Dave: I think what helps me, though--
Chris: Mahdieh does that at CodePen because she's so adept at using Excel from her days in finance that she has a special keyboard that she flops out just when she does Excel work.
Dave: Yeah.
Chris: I think that's....
Dave: I might get a ten-key thing because I love those little calculator keyboards. I might get a ten-key dedicated.
Chris: That's fun. Is there a beginner mode on this thing? For one thing, we should say, this is like $370 too. It's not a cheap--
Dave: Yeah, it's $380. For me, I can talk about that. It's expensive but, A) I don't have hobbies. This is what I do.
[Laughter]
Dave: I host a podcast so I can buy keyboards. But then B) for me, either chuck $400 at my wrist problem or start going to a doctor and maybe get surgery, which is how many thousands of dollars? You know what I mean?
Chris: Yeah, that's clearly a big deal.
Dave: If I spend $400 to get some variety in my life, it's worth it for me. If I type a little slower, that's fine too.
Chris: Right.
Dave: I just don't want to absolutely--
Chris: It's not only a good point, but you also don't have to apologize for buying cool crap. Come on.
Dave: Oh, yeah. Yeah. No, no, but I'm just saying if it's expensive to you, don't do it. I would actually recommend that $60 Microsoft one you and I use.
Chris: Mm-hmm.
Dave: Because that's a great introduction into the split idea and the tenting idea.
Chris: Yeah.
Dave: You'd have to reprogram very little when you do that.
Chris: Right.
Dave: Maybe your B and V keys.
Chris: I can't. I can't. I can't hardly go back. I love it. It's $50.
Dave: Yeah.
Chris: I finally got it up here. It is not the Sculpt. The Sculpt was like a bad phase, I think. Those had some problems, but this one, they have sorted it all out. For one, it's only $50. Two, it's an amazing keyboard. I love it so much.
I can't help but drool a little bit at your setup here. It makes me want to at least try it. But I kind of want to baby step it and make sure that whatever I buy is the least disruptive, so I can attempt to like it.
Dave: Here's what I'll say is it takes about two weeks to get onboarded. You buy it; for two weeks, you're going to be typing like an idiot and accidentally hitting return.
Chris: Yeah.
Dave: If your world depends on not looking like an idiot, it's going to be a hard sell.
Chris: Yeah.
Dave: But that said, for me, it was typing versus no typing, and so I'll do it.
Chris: Right.
Dave: Or I'll put up with it. I think, for me, the splitness is actually the biggest factor and the tenting because I can kind of get it where I want, lined up with my shoulders versus when you pinch your wrists together and type on a little tiny keyboard. That hurts my body. I know when I go to conferences and type on my laptop for a week, my hands are wrecked, fully wrecked, and I have data. I wrote down notes and journaled my heart.
Chris: I'm the same. Yeah. If you only can use a laptop keyboard for a long period, I'm in trouble too.
Dave: Yeah.
Chris: I hate it.
Dave: Yeah. Conference season, it was happening every August and it was like, oh, because I had two conferences every August. I finally put it together why I was hurting myself. So, anyway, this new Moonlander 2 has a case, carrying case. Pack it up. Go on a trip. I'm going to go on a little trip to see grandparents, so I'll hopefully be able to evaluate it on the road, too.
Chris: Yeah, that's cool. The little case it comes with is pretty sweet. Okay, gear talk. Wow. That was fun.
Dave: I went big. If you have cool gear, folks, send us cool gear recs. We're a gear podcast, gear only.
Chris: [Laughter] Yeah. It's fun, though. It is kind of a sub-hobby of being a computer nerd.
Dave: I'm looking at Garrett's desk. This thing is outrageous, dude.
Chris: It is outrageous.
Dave: This is so cool.
Chris: Make sure to click the link, people, in the podcast, people. He is a good dude.
[Banjo music starts]
Chris: This episode of ShopTalk Show is brought to you by Equinix. Equinix has just launched a new product, Equinix Metal. Equinix has been around. They're the world's digital infrastructure company. They've been around for over 20 years, before this digital infrastructure was even really a thing. They have been at this for a long time.
They're like, "You know what? We are developers too. We're going to build a product that's for developers by developers - by us," because they know what good digital infrastructure is. They know what developers want in this world.
You're buying digital infrastructure from them, servers, powerful, global servers. They have data centers all over the world. You're buying low latency, high performance, everywhere infrastructure.
They want you to try it out and give us your feedback on the thing, too. They're very generously giving away $100 in free credit to play with this, so info.equinixmetal.com/shoptalk. The link will be in the show notes too.
You might as well take them up on that. [Laughter] Have a play. Buy some servers. Build something with it. See if you like it. See if their tendencies as developers match you. That's a free $100 there.
Fully automated, bare metal as a service. They don't care what you're building on this. These are servers to build. They give you total freedom to build any way you want, anywhere you want it. Equinix Metal, thank you.
[Banjo music stops]
Chris: Okay, well, we have a really big topic. This will probably be a point where you can link to in the podcast if you want to hear us just talk about container queries.
Dave: Hey-oh!
Chris: There was some big news again. Although, by big news, I want to make a big asterisk in this podcast and say that absolutely none of this is final. This is just some rumblings from Chrome and nothing is shipping. Nothing has even been started, I don't think. This is just somebody noticed a post on a Google group that said, "Intent to prototype," or something, "container queries," and people went wild. Then backchannel, some of us heard from other Google people that said, "Oops. Super sorry about that. We meant to announce this about a month from now when we could clean up the message and talk about it more intelligently and what the plan is, et cetera." But this is open-source software.
Dave: I think it was leaked, or whatever, on Election Day, which is just the stupidest.
Chris: [Laughter]
Dave: That was a big, stupid on their part.
Chris: Yeah.
Dave: I'm getting people messaging me, "Hey, Dave. That feature you asked for, for ten years, is out, man. Hey, check it out." I'm like, "Dude, I'm a little busy right now."
Chris: Yeah. [Laughter]
Dave: A little busy right now.
Chris: Yeah.
Dave: Still a little busy, to be honest.
Chris: Yeah.
Dave: But anyway.
Chris: That was a weird week for it. Before we get too far, there is a lot of excitement here because container queries is, oh, I'd say easily by far the number one asked for thing in CSS. Dave, can you do 30 seconds on a reminder of what container queries are and why it's such a hotly asked for thing?
Dave: Yeah, so we have media queries, right? But media queries only respond to the viewport. If viewport is 400 pixels wide, do this thing. That's okay until you start putting something in a column because your component is inside a column. Now it actually doesn't care about the viewport. The viewport becomes a pretty dumb or lazy proxy for the size of the thing because it could be one column, two columns, five columns, or whatever.
What you actually want is to respond to its parent sizes, its container's size. Container queries or element queries, they've been called, is just the idea that you can now respond to the parent's width or height - theoretically.
Chris: Yeah. It doesn't sound like much, but it's a very big deal. I think one that might work for mouth blogging is, let's say you're on an iPad on a website. It's a decent-sized screen but it's not as big as desktop, but it's clearly bigger than your phone. Imagine you're looking at a seven-day weather forecast, Sunday to Saturday or whatever. it might make sense to see them horizontally in a row: Monday, Tuesday, Wednesday, Thursday, Friday. Oh, great. That's a nice looking layout.
But then on desktop, that widget, that weather widget, which is full screen on an iPad, actually gets put over into the sidebar on the desktop layout. The screen actually got bigger, but the place that this widget is in got smaller. [Laughter]
That's a weird media query to have to write. "On a bigger screen, then adjust the Flexbox to Flexbox column instead of row." It's just odd. There's some indirection in the media queries that you have to write and they're error-prone and weird.
What you want to write is a media query that says, "When I am this big, then I want to display in the row layout."
Dave: Like flex column or flex row - whatever.
Chris: Yeah, and this is grid. It could be anything: font sizes, grid, whatever. We want to say, "When I am this big or my parent, my direct parent is this big, then write these rules." It's been said that something like 80% of all media queries would be rewritten as container queries because that's what they're trying to do. It just so happens we had media queries. They were easier to implement. We've lived with them for a long time. Now our minds are used to them. But what we're trying to say is, we're trying to write rules that respect individual components a lot more so than the entire page, so it's a big deal.
Dave: Yeah.
Chris: Okay. We probably said that about 20 times, different ways, on the show. What's happening now? Well, I'll catch you up on the conversation real quick. The last time I think it came up in a serious way--not that I'm central to this debate. I'm certainly not--I published, in October of 2019, reminding people, like, "Hey, do not forget about this. This is a big deal. Philip Walton has a wonderful post that shows you examples of why this matters," but it seemed to be forgotten at that time.
Fast forward to February 2020, Brian Kardell, who we've had on the show, kind of floated an idea for something that might work. The idea was a function in CSS called Switch. But again, these are just prototypes. They haven't even been coded yet. It's just code sketching, really.
The idea was that, on a per-property level, like the value of a property, we could set different values of that property based on the inline size of the element itself. It was clever. It isn't exactly the same as an element query, but it still would have been cool.
It's not like Brian was trying to invent a crappy syntax. He very much was not and is very aware of all this stuff. But what it did was it got some browser vendors to say, "Oh, yeah. I think we could do that." That's been the number one problem.
Dave: It changed the temperature, right?
Chris: The temperature of the room was cold, cold, cold on this saying that element queries are just not how browsers work. It requires multiple passes. There are infinite loop problems. There are all kinds of problems that browsers were just saying, "No. We cannot do this. It's too hard. Literally, it's not possible to do in browsers." That was the temperature of the room.
When Brian floated this, and also David Baron from Mozilla has his own thing, which we'll get to in a minute, the temperature of the room started to change. Browsers were starting to say, "I think actually that might work." By browsers saying that, it's probably one person or something. This isn't like organizations having big meetings to talk about this. That's not how standards work. It's probably a little bit of interest from one person, but that's the kind of political game you've got to play.
Dave: I think there are people like Jen Simmons who was at Mozilla at the time, now at WebKit, but was talking with customers and getting feedback, "We want container queries." You know?
Chris: Yep.
Dave: I think she was kind of integral in raising awareness or getting some of the ball rolling.
Chris: Oh, yeah.
Dave: I think, yeah, so--
Chris: Brian's thing, I don't know if that went anywhere, but David Baron also had his own kind of thing and just published it on GitHub as kind of a proposal kind of thing of syntax that looked different. I'll say that a lot of this was related to the contain property of CSS, which is a very interesting, fancy thing. There's a good post on Smashing Magazine. We have it documented on CSS-Tricks.
It's a thing that tells -- it's a CSS property that kind of gives some information to the browser about -- [laughter] -- it's complicated. It's kind of like overflow. It's kind of like saying, "This isn't going to a change," a little bit like will change. I can't say that I totally grok it perfectly, especially right now in the middle of this podcast when I feel on the spot to do it.
The idea is, if you are using contain on a property, the browser is a little bit more sure about what's going on and it's more possible that you can use a container query on it because maybe it solves that multiple passes problem of the lay. I'm not sure I totally understand it but, because it exists, that's the thing that's warming the room for this to be like, "Okay. Well, if you put some kind of strict containment on this element, maybe we could do media queries then, or element queries then."
Dave: Yeah. that, I think, is kind of in the -- that's building towards the syntax of at container min-width 100 pixels. Right? That's kind of feeding into that sort of syntax?
Chris: Yeah.
Dave: Like this contain thing. That's sort of what I think Miriam Suzanne posted this week or last week, got leaked or whatever, was kind of just this sort of softball. Again, these are not implemented. These are not happening. Please don't hop into the repo and be like, "I think it should be in German," or whatever you want, weird quirk you've got.
[Laughter]
Dave: But it is just sort of like a softball, like, let's not bikeshed the syntax quite yet is what I'm saying. I think it's a softball of, like, this theoretically, mechanics-wise, might be able to work.
You have the containment. I think she proposed contain size. Is that right? j
Chris: Well, contain size, that already exists and is shipped in browsers, so that's the containment thing that would be required on the parent to unlock a container query being possible. I think if you didn't do that then the container query would just fail.
Dave: Mm-hmm.
Chris: You put the size containment on the parent and then you do an at container and this is very -- it's not the real thing. We're not using media queries here, but it'd be an at --what do they call these -- at rules, I guess, in CSS.
Dave: Mm-hmm.
Chris: At container and then you put a selector saying this is the parent. Then you put the rule. The syntax in Miriam's gist here, which is what -- Miriam is just as important to this whole story because Chrome asked her to do this and she did. Then they looked at it and were like, "Whoa! Sweet!" Then they were like, "Well, why don't we prototype this?" Hence, why we're talking here.
Dave: Yeah, that's what showed up in the "intent to prototype" email.
Chris: Yeah. I think Miriam was, to be fair, not super pleased about how that all went down because it was kind of like, "Hey. I had ten minutes to do this. Now my name is plastered all over this thing and it didn't get a fair shake." You know, but to me, I'm like, "Miriam, you can make a gist in ten minutes and move mountains. Eh, you're amazing. Good job."
Dave: That's a superpower.
Chris: Yeah. [Laughter] It's ultimately a very positive thing, but I can see wanting to control the message a little bit more.
Dave: Sure. Sure. Sure.
Chris: This syntax is sweet. The reason I didn't like Brian's idea even though any movement in this direction, like if I had to stab a fork into my thigh and twist it to get any kind of container query-esque thing, I would do it. Please, give me Brian's idea too. I don't care.
The problem was, having to write on value-by-value-by-value basis, repeat yourself so much to get container queries, the syntax is like, um, not my favorite. I'd much rather be able to say, "Here is the situation," on the element or on the parent or the container or whatever, "and then all the CSS within here applies under that situation." Just very clean. I think that's what Miriam's gist here kind of unlocks with that container block and the media query stuff inside of it. Then whatever is inside there goes. That is clean, clean, clean. I like it.
Dave: Yeah, well, and that's sort of what I envisioned a hundred years ago, or whatever. This is -- I'm like, ship it! Ship it!
Chris: Yeah. It feels right, doesn't it? Yeah.
Dave: I think I've heard from Brian Kardell, like, this idea and the available inline size switch statement stuff aren't mutually exclusive whatsoever. They can kind of help inform each other. I don't want to tell anybody this, Chris, but I'm looking at a secret Chrome branch right now, not for landing. It's tagged and there's a switch statement in there.
Chris: Oh, really?
Dave: Inside the Chrome.
Chris: Oh! So, they might--
Dave: It was only 482 lines of code and I'm impressed because that's a very lightweight edition that brings a whole bunch of power to your grid template syntax.
Chris: What's the syntax in side switch? Does it use that available inline size syntax?
Dave: In this situation, this is not for landing. It's just a prototype branch here. This is a ShopTalk exclusive here. It's this switch statement like grid template columns switch.
Chris: Yeah, switch.
Dave: Available inline size.
Chris: It is available inline sizes. Okay.
Dave: Yeah, yeah, and it works sort of like the picture element, like you start big and go small.
Chris: Yeah.
Dave: But, to me, this is kind of cool. I think CSS having a switch statement is kind of pretty awesome, you know? I think you have a whole bunch of problems, maybe. It could create problems, but I don't know. It's kind of cool. For those major layout shifting, this is actually a pretty cool utility.
Chris: Yeah.
Dave: It's almost like you wrote 15 media queries into one little property syntax. That's kind of cool to me. How many of your media queries are just like nudging the grid, eight pixels, or whatever?
Chris: Right. Right.
Dave: As you kind of like write it out.
Chris: You're saying it's kind of the opposite of what I just said. I think that syntax is messy but it's kind of not. If all you're doing is changing a grid but you need to do it four times, doing it right on one declaration is kind of sweet.
Dave: And you're not doing it on the viewport. You're doing it on the parent, so again that's kind of--
Chris: It's not even its parent. It's itself. Right?
Dave: Itself, yeah. It's available inline size, so anyway. Exciting times for--
Chris: Yeah. This container query thing from Miriam, you do have to do it on the parent. You don't do it on itself, really.
Dave: Right. Right because that goes back to the cyclical problem, which everyone was worried about.
Chris: Yeah.
Dave: At container or add element, whatever, my thing. Min width 200 pix with 100 pix, or whatever. You just basically create a rule that invalidates the rule that then now it reevaluates the rule and then it invalidates the rule. You can create big problems.
I think even border was the biggest one. You add a border to something; it changes the width of it and then it would just go into a fugue state.
Chris: Yeah. I wish I understood this problem more because it seems like, well, then solve it. Can you detect that this happens and then choose one state or the other and just not let the browser freak out? Maybe. I don't know what the difficulty level of that is, but it seems like you could spec that and say, "In this infinite loop scenario, then take the pre-state," or something. And it already exists. You can write a hover state for a container that changes the size of that container and then, to the point where your mouse cursor is no longer inside of it because the size of it has changed, which then the hover state doesn't apply, which changes the size again and whatever.
I wrote a post in like 2007 called "CSS Jitter Man," and it was this image that would go, "Arrrr," when you go over it because that was the infinite loop situation. I know that the point is, okay, don't -- you know, we had problems in the past. That doesn't mean repeat those problems. I could see you not wanting to add more. [Laughter] It doesn't sound like the end of the world, you know. I don't know.
Dave: Well, and if you did a bad, that's your fault you did a bad. It's not really the browser. It's not the user. I don't know. It's not a competent author's problem. It's a "I did a bad."
There is an example. Have you ever done position sticky?
Chris: Sure.
Dave: The client says, or whatever is like, "Hey, make that stick to the top. You've got to position sticky, my dude." Done. This is easy.
Then they're like, "Oh, but when it sticks to the top, I want you to shrink it." You're like, uh-oh.
Chris: [Laughter]
Dave: So, you shrink it and then, boom, you're just in this stuck, unstuck, stuck, unstuck, stuck, unstuck. It just hits this infinite loop of, it's stuck and unstuck, just with how it resizes padding from the top and the bottom, like incrementally and stuff like that. Anyway--
Chris: I see. I wonder if that's why we don't have a stuck pseudo-class.
Dave: I think it's very close.
Chris: It's infinite loop related. I saw a nice trick.
Dave: Yeah.
Chris: I think I maybe just posted about the other day.
Dave: Yeah, I saw that.
Chris: I just copied it from David Walsh's blog because we don't have colon stuck in CSS. I think there is a polyfill for it and polyfill is the wrong word because there is no evidence that we'll ever get a stuck CSS selector. It's one of those very theoretical things.
Dave: Yeah. Yeah.
Chris: The idea was that you can use intersection observer to observe the thing and it's pretty clear if it's in its stuck or not stuck state with a little tiny trick. I liked it.
Dave: Mm-hmm.
Chris: It's not exactly a polyfill, but you can, with three lines of code, pretty accurately tell if something is stuck or not stuff. That was kind of cool.
Dave: The secret was top minus one pix or something. You just basically move it a smidge and so it triggers a smidge earlier than usual or something.
Chris: Yeah, it's a little tricky to wrap your mind around. I had it wrapped around my mind when I wrote it, but I think the idea is that there's a ratio with intersection observer.
Dave: Yeah.
Chris: Is it offscreen a little bit? You can tell. Because it has negative one pixels, then it is offscreen just a little bit and that ratio becomes under one. Then you can tell. Whereas if it was zero, that ratio would be zero, one, or whatever, and it wouldn't trigger.
[Banjo music starts]
Chris: This episode of ShopTalk Show is brought to you by AWS Amplify. AWS Amplify is the fastest, easier way to develop mobile and Web apps that scale. It gives you tools to build real-world, full-stack Web apps using their existing skillsets.
You don't have to be a super expert here about every-every-everything full-stack. No need to have deep knowledge around back-end, DevOps, scalable infrastructure, all that stuff. You can largely bring your front-end skillset to the party and have that go a long way in building apps that are absolutely huge production apps. Amplify handles all this for you.
It's available free, so you just build, build, build. Then you only pay for the back-end services that you actually use that happen to cross the free threshold.
It's also a CLI. I think that's kind of a main important part of this. You're using the CLI to scaffold out your app to set up things that might otherwise be a little tricky on AWS. You're like, "Oh, it has all these great media storage things and other storage, database type of stuff. What do I do with all my data?" you can use the CLI and it'll walk you through setting all that stuff up.
"I'd like to add this type of storage. I'd like to add this type of API to my app." It walks you through that at the command line, setting it all up.
That's powerful stuff, not to mention it's kind of based on the JAMstack, too. There's a deployment center for this thing, so you're building your app. It kind of assumes a JAMstack architecture, but it is otherwise really unopinionated on what you do with it.
You want to build a React native thing? Cool. You want to build a Vue app? Sure. Fine. You want to use a static site generator for the base of things? Yeah, go for it.
Pretty rad. Thanks for the support, Amplify.
[Banjo music stops]
Dave: I might play with this because I wonder. I like this clever, like, "Oh, if the top is negative one, then it works." I've done the sentinel Observer Pattern, which I think that's Eric from the old Chrome sticky sentinel pattern which basically you put ghost elements. You inject them above and below the thing you're sticking.
When that ghost element goes out of viewport, intersection observer not less than one or whatever, then the element becomes stuck. It's pretty cool but, yeah, Eric Bidelman. Sorry. I should have known Eric's last name.
Yeah, so basically you create this custom sticky change event. Anyway, it's worth checking out. That's how I worked around it in a production situation, but it still has its quirks. I don't know if I could fully-fully recommend it.
Chris: Oh, I find that general knowledge of intersection observer is a little light. I think we'll do a ShopTalk Show callout here and say, "You should look at that API," because it's super good and super useful.
What it does is, I think, 99% or perhaps 100% of usage of a scroll observer, like a window add event listener scroll. You can probably do what you're trying to do with an intersection observer and get a lot of free performance out of it. The absolute number one code smell, to me, is any time you add an event listener to scroll. How many times do we have to be told that that is not particularly performant? User intersection observer. It's cool.
Dave: You have to. Yeah. Scroll and resize are brutal, but sometimes you have to do it. But it's just not fun. There's now resize observer, which is sort of the same. It's event-driven development and then intersection observer, the same thing.
Chris: Yeah.
Dave: You just say, "Observer, watch this."
Chris: I think these have something to do with container queries too. I know they don't sound directly related, but I think some of the infrastructure that made them possible is going to help out with particularly resize observer.
Dave: You know that was always -- with container queries, it was always like, wait for resizes or wait for containment. What for -- you know.
Chris: Yeah. Right.
Dave: We waited and then it's like, now what? Then it was like, it's too hard. But you know that story changed.
Chris: Yeah.
Dave: Literally last year.
Chris: There was some -- some of the answer is, now that you've got it, use it. There are plenty of solutions for container queries in JavaScript. Some of them are quite clever, like the watched box is really nice. I like some of them. Some of them are a little too polyfill-y, like, "Just write it in CSS. We'll parse your CSS, figure out what you mean, and then do it." For some reason, my body rejects that idea. I'm like, "Stay out of my CSS until it's a real syntax," kind of thing. I don't like fake syntax.
Dave: Yeah. I don't like fake syntax because that can also cause problems. jQuery or MooTools kind of level problems, right?
Chris: Yeah. [Laughter]
Dave: Just because if you want something, it would be gone. It's a reserved keyword now because you wrote fake CSS.
Chris: Yeah. I know this is unpopular, but it makes me not like PostCSS at all because it was very encouraged to make up CSS syntax that's as close to possible as what you think it might be like and then just ship it as a plugin. Then every app has all these plugins in it. It's like, oh, just confusing as hell. I hate it.
Dave: Well, we now have custom properties, which is kind of cool. But beyond custom properties, you can be like, this property is a number. You can be like--
Chris: Yeah, you can declare the type of custom properties. That is a big deal.
Dave: CSS got types before JavaScript, and I don't think people appreciate that.
Chris: [Laughter]
Dave: You know what I mean?
Chris: Yeah.
Dave: [Laughter]
Chris: But it's not in Firefox, so it's one of those things. I know we talk about this a lot, but how many commits have landed since all those firings at Mozilla? Has the platform evolved over there? I haven't really watched, so it's not fair.
Dave: Four.
Chris: Oh, you've seen?
Dave: I don't know. No, I don't know.
Chris: But what are the chances container queries are going to land over there when you fire your whole Web platform team? This is very interesting to watch how that's going to play out.
Dave: We heard, like, "Hey, we're working on it. We're still active."
Chris: Cool. Great.
Dave: Sort of feedback but, yeah, I'm not seeing the messaging. You know what I mean? [Laughter] I'm not, like, "Oh, here's this new in Firefox this week," or whatever. You know?
Chris: Yeah. Right. That's the tricky part.
Dave: I'm somebody who is plugged in. That's the scary part, right? You and I pay attention to this dumb crap because we have a podcast about this dumb crap. What is going on? Let us know. Send us an update.
Chris: The types thing, the reason I say it's a big deal is because I published a couple of tricks on CSS-Tricks already. We have this guest author. Carter Li has been locking into some of the cool things that you can do with that.
For example, if you are familiar with custom properties already, you could set dash dash Dave is 99 or something. Well, it turns out that 99, without declaring a type on it first, is just basically a string. You can't do anything. You can't set font size with it, really. You'd have to set 99 PX so that the string becomes pixels. It just doesn't know what 99 is.
But if you tell it ahead of time, like predeclare that that valuable is going to be a number, then it knows it's a number and it can be interpolated like a number, too. Meaning, you can even animate it like a number, which is really weird.
Dave: Yeah. If you go from zero. You can say, animate zero to auto, and it knows how to do that. Right? It's not just animating a string.
Chris: I don't know if auto will work, but that would be awesome if it did. But maybe it will now. That would unlock some seriously big stuff. Certainly, you can say, animate it from zero to 100, and it will literally animate that number from zero to 100, which was totally not possible before - at least with a custom property.
Dave: Well, and animating background gradients and stuff was a big one, too, because those have to be hexes, right?
Chris: Right.
Dave: Like color values, not just strings.
Chris: Yeah. If it's a custom property, yeah, tell it to be a color. It's just good. Not to mention there's some inherent safety to typing variables and stuff too, which is pretty cool.
Now, speaking of all this and container queries, just today [was] published this article called "The Raven" by Mathias Hulsbusch. Sorry if I screwed that up, Mathias. It's a lot to wrap your mind around but it is just CSS and just custom property driven container queries in CSS. You can do it today if you go down this rural whack road.
Dave: [Laughter]
Chris: It's not whack in a bad way. It's just mind-bending how it all works and it has to do with using the clamp property and a bunch of math and stuff.
Dave: Wow.
Chris: When these media queries hit, you're toggling variables to other values and kind of making it all work. Now, I don't even want to try to mouth blog this. It took me a while to wrap my mind around it and I barely got it. I have it enough to know that it works and I kind of get how it works. It also has to do with there's some of that -- what is Hayden's really cool -- flex by the holy albatross stuff going on in here.
Dave: Holy albatross.
Chris: It's similar, but there's other stuff going on. It also utilizes when you set a CSS custom property to inherit, and it can also be white space. I know I'm just saying words here, but [laughter] believe me. When it all comes together, you can pull off, essentially, container queries, again on a per property value, not like a selector, a parent, or whatever. You can kind of pull off container queries today using this technique and it's pretty cool.
Dave: These are fun. If you needed it, needed it, you could roll it out.
Chris: Yeah, if you needed it, needed it, and the browser support was where you needed it to be.
Dave: What I like -- this sort of reminds me of those big calc for fluid type.
Chris: Yeah.
Dave: Like the big calc strings. You know?
Chris: Right.
Dave: Where it's like -- I like that. It's just, I don't want to maintain that. I rarely know what's going on when I do that. But it doesn't take away from its cleverness. It's very clever. You're using the tools we have that exist today and making something awesome. It's always impressive and useful. If this is a huge, critical demand you have today, it might be totally worth rolling this in.
Chris: Yeah. Right.
Dave: Or incurring this technical debt, basically.
Chris: It also is neat that it requires no JavaScript. If you're like, "I really, really, really need container queries today. I'm sick of waiting. I'm going to do it," there are ways to do it with JavaScript - pretty clean ways.
Dave: Mm-hmm.
Chris: But that is a -- immediately, it's with JavaScript. So, what if JavaScript fails? What if you miss a semicolon? What if the CDN is down?
Dave: What if it's not fast?
Chris: Yeah.
Dave: Yeah.
Chris: What if it's -- yeah.
Dave: Shows up late.
Chris: Shows up late. There are issues with that. Even really clean solutions like watched box, which kind of work with both, it's JavaScript powered. This is not. It's entirely CSS, so that's a plus one in that category. Still a lot to wrap your mind around but check it out. Check out "The Raven," Mathias called it. We published on CSS-Tricks about it. It's pretty wild.
Dave: No, that's cool. Well, hey, that was a lot of CSS chat. I think we should wrap this one up. That was a lot of fun. If you have something you saw in the CSS, let us know.
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.
Chris, did you have anything else you wanted to say?
Chris: You know our friends at Automattic are often hiring for job positions. Let's do one of those.
Hey, ShopTalk Show listeners, a job mention for you. Automattic is looking for a senior software engineer. They call them a Code Wrangler. You know Automattic. They work on WordPress.com, but they work on all kinds of projects: Jetpack that has been a sponsor for here a long time, and WooCommerce. You know the Gutenberg editor inside of WordPress, Automattic was behind that. They worked on that.
Lots of big software projects that's all open-source, which is kind of a cool way to work, isn't it, for a world that's increasingly less that - more walled gardens. Automattic is kind of the opposite of that. You're working on software that tons and tons of people use and then the code is open-source for it, too. Just kind of nice.
It's going to be some JavaScript. It's going to be some PHP. Bonus credit if you know WordPress stuff. Do you know a lot about tooling and build systems and stuff? That's all kind of extra credit, too.
Just check out the job posting. It's going to be in the show notes for this episode. That's again for a senior software engineer at Automattic.
ShopTalkShow.com