Chris and Dave are answering questions live from An Event Apart, spring 2022 edition. What new CSS features are exciting? What would you add to CSS? What do you think creates the designer developer gap? Web components and two screens! And more!
Time Jump Links
- 01:28 Dave's slide deck presentation
- 04:32 Who won the conference?
- 06:00 Coining the new thing
- 12:00 Why is birds?
- 13:13 Are there any accessibility factors to take into account with web components?
- 19:23 Sponsor: Linode
- 20:28 What new CSS features are you excited about?
- 24:33 What would you add to CSS? How are you planning to use new CSS?
- 35:19 What's the journey of maintaining a job board?
- 40:58 Is it beneficial to use a web component when the content is static?
- 47:52 What do you think creates the designer developer gap?
- 53:03 Web components and two screens
- 57:01 Reduced test cases
Eric Meyer: Hello to everyone, and welcome, Chris and Dave of ShopTalk Show. I'm basically going to say hey, everyone. Thanks for tuning in to this special live edition of ShopTalk.
I'm going to go away and let the boys do their thing.
Chris Coyier: Aww!
Eric: Well, I'll be hanging around--
Eric: --if you have some particular need to call me back. I don't know why you would because you guys have got this. You're pros.
Dave Rupert: Oh, I think we have the perfect to question to bring you back in for.
Eric: Oh, boy.
Chris: I think I remember which one it is.
Eric: Chris, Dave, let's go make a podcast.
Dave: Let's go....
Chris: Let's go.
Dave: Chris, are you going to banjo? Are you going to banjo?
Chris: I was going to pour a cocktail.
Dave: Oh, okay. Cocktail time. After hours, baby!
MANTRA: Just Build Websites!
Dave: Hey there, Shop-o-maniacs. You're listening to an afterhours edition of the ShopTalk Show, a podcast all about front-end Web design and development. A live podcast. This is live. We are live at An Event Apart Spring Summit 2022 - online together.
Chris: There's a special feel to it that I really like. Yeah.
Dave: What's that? What's that?
Chris: Just the live feel. It's been a minute since we've had that kind of live spirit.
Dave: It has. It's been a year plus, so yeah. [Laughter] You know I think everyone maybe knows this was supposed to be in-person, I think, for a little bit, and then the COVID numbers, not to be a bummer, right.
It would have been great to see everybody together in-person. The next time that all goes down, we'll all be in the same room chatting.
Chris: Yeah. Do you have--? I feel like you made us some kind of slide deck or something.
Dave: Thank you for mentioning that. I'm going to power up the old jumbotron here. I've got a few slides, a presentation I'd like to get through real quick.
Chris: I don't even remember what you used. It was some kind of Markdown thing?
Dave: Sli.dev. Right now, you're looking at sli.dev, and participants should be able to see my screen. [Laughter] Hopefully, it's a PowerPoint. Yeah, okay.
This is ShopTalk at An Event Apart.
Chris: It really is a random background. Refresh it. Let's see what you get.
Dave: Yeah. Yeah. Sure.
Chris: Refresh it.
Chris: Oh, I like that one.
Dave: Ocean content.
Chris: Do it again. Do it again.
Dave: Here we go. Ooh... Oh...
Dave: Is that a--?
Chris: Why is everyone amazingly classy?
Dave: Santorini. Oh, yeah. Then here we go. Ooh... Yeah, that was splash, baby.
Chris: Oh, is it on splash...?
Dave: ...Images for free. Yeah. Yeah.
Chris: You should stop refreshing because there might be a sexy one that comes up.
Dave: Oh, shoot. Yeah. Well, I'll stop then. Let's just -- Boom! Zip in.
Today, I'm excited. Everyone is here. I want to talk to you about the five core benefits of ShopTalk.
Benefit one: Weekly.
Benefit two: It's free.
Benefit three: It's peer reviewed.
Benefit four: Ska.
Chris: I like...
Dave: Oh, go ahead.
Chris: I just like that we -- I don't remember ever talking about Ska, but you informed me that it's not that we talk about it, it's that you think about Ska as we do the show.
Dave: Oh, yeah.
Dave: Like 90% of my whole day is spent thinking about Ska, and so definitely it's in there, mixed in there, sort of composed. If we don't talk about it, we're thinking about it. Right?
And we're a lifestyle brand. We do life and style together.
Dave: Yeah, so that's what you need to know about ShopTalk getting started. You know?
Then, going straight into it, coding a podcast from scratch is just one media query now. Thanks, CSS. The hard stuff is now easy. No more hacks, right?
Then, to wrap up my presentation, I would like to ask, "Who won?"
Dave: Who won the conference, Chris?
Dave: Here, I'll stop the share. Who won the conference? I think we all want to know who won it.
Chris: I mean, do I vote for you? It did occur to me. Do you have an idea?
Dave: I mean me, right?
Dave: I mean, right? No? No.
Chris: You know who I'd hand it to? I'm going to give it to Ethan Marcotte for his 2010 presentation "Responsive Web Design."
Chris: I feel like Ethan is still out there winning the day - later. But it really was. It's almost hard to write a talk and not toss an Ethan slugger in there, still, especially because it all happened at An Event Apart. You know?
Dave: Yeah. Totally.
Chris: I think we'll get to this later. As cool as that is, that was literally 2010. 2010! That's a long time ago. Normally, a decade goes by and then it's different then. But we already passed that. That was 2020.
Dave: We're not doing it anymore?
Chris: It's 2022, yeah.
Dave: I mean, right?
Dave: I'm still doing responsive Web design.
Chris: Or it's just real different and you have that, like, "Hmm... It's different."
Chris: But it's really weirdly not that different. But it's about to get different. And there are people out there slugging for it, right? I mean we might as well just do this because now we started it, right?
Dave: Well, a number of things I'm doing--
Chris: Differently than--?
Dave: --for ten years.
Chris: Media queries.
Dave: Git. [Laughter]
Dave: No, there's not much--
Dave: HREF, still doing HREFs. Barely though.
Dave: [Laughter] But, yeah. Sorry. Sorry. You were saying, get into it. Do you want to--?
Chris: Well, kind of, only because we just started that there's this--
The last to talk and has her new responsive thing.
Chris: Which I think is a good name almost because she didn't try to coin something new. Not that there's any problem with coining something new. If anybody coins the new thing, you win a million dollars, essentially.
Dave: Mm-hmm. Okay.
Chris: So, I don't blame people for trying to coin the new thing right?
Dave: Blast off Web design!
Dave: I'm it.
Chris: I don't think that's going to take it, but--
Dave: Okay. Still workshopping.
Chris: And so, there's some incentive to win the new term.
Chris: But the new responsive isn't even trying to win the new term. She's just trying to say, "Look. Stuff got way different." You know? Anyway...
Anyway, there's a scrambling for the, like, "Yeah, Ethan was right. What's the next thing?"
Chris: It's been years now of that, and I think it's just on the verge. It's just on the verge of breaking because of the slew of 2020 Web stuff. Container query is holding the pitchfork, leading the charge. Not a pitchfork. Something more positive than a pitchfork.
Dave: A wizard staff.
Chris: Like the Olympic torch or something.
Dave: Olympic torch, that's a good one. Yeah.
Chris: Yeah. That charge is actually different because it's different in approach and everything then responsive design was.
Chris: Now we've done it. It's just that there are so few people doing the production thing with container queries.
Dave: Yeah. No, I think we're one--
It was always like you needed the Boston Globe for the responsive Web design.
Dave: We needed the Boston Globe.
Dave: But do people--?j
Chris: Who is going to be?
Dave: Who is it going to be?
Chris: Is it going to be like GitHub or something? I don't know.
Dave: Probably something.
Chris: People are so brand lovers. [Laughter]
Dave: It's got to be a thing. it's got to be FAANG--
Chris: Yeah. Yeah.
Dave: --because if FAANG doesn't do it, it doesn't matter. You know what I mean?
Chris: Ugh! I hate that. But it could be like FAANG light, though. [Laughter]
Dave: FAANG light.
Chris: It doesn't have to be quite that big.
Dave: It's not FAANG anymore because Facebook changed their name, so I think it's MANGA. Is that the new one?
Dave: Or if you're American, MANGA. [Laughter]
Chris: I don't know, but somebody is going to do it big. You know?
Chris: Then it also has to have this seminal blog post.
Dave: Yeah. Yeah.
Chris: Just setting it off. Then it's over - because we haven't had any blog posts yet. All the blog posts now are, like, how to do container queries.
Chris: They're not like "The 10 pitfalls of container queries," or whatever. Those haven't been written yet. You know?
Dave: I want to write that. Yeah.
Dave: That's actually a good point. I'm actually more interested in when somebody has used something and they've hit the rough edges. I'm way more interested in the rough edges.
Chris: Oh, for sure.
Dave: When do you find out it explodes in your face? You know? But yeah, I don't know. It could be really cool because there's a lot of stuff, you know, fluid type.
Dave: I think your talk was talking about fluid type, container queries, and all this stuff like QI units and stuff like that. Are we just real close to just this UI that dances? It just sings and totally squishes and it's just harmonious all the way through. It could be really cool.
Chris: Well, and that you have every tool that you even want. There was such a long period of time where the wants were so many. They were palpable.
Chris: It was like, I guess we can get this done, but it's nowhere near good. We're at this area now where we're like, I basically can't even think of anything else. I have a little tiny wish list left, but it's barely anything and it's not that big of a deal.
Dave: Yeah. Yeah.
Chris: Now - oh, my God - we're almost impressed because we keep getting new stuff and it's almost like, "Slow down!"
Dave: It's a hot year for CSS and potentially HTML, so I'm excited.
Chris: Yeah. It sounds like it is.
Dave: Yeah. Especially tooling there is all about speed, so hopefully, that kind of starts impacting, you know, just like, "Oh, you know what? These tools are all super-fast. So, if your site is slow or it's slow to compile or slow to run or whatever, it's because it's slow."
Dave: The tooling has got out of the way to where now our perception of performance is way different.
Dave: It took four seconds for Webpack to recompile. You're like, "Yeah, whatever. I just wait on that." [Laughter] But now, when it's subframe, I think we looked at something the other day that loaded under 16 milliseconds or something like that.
Chris: Oh, yeah! I remember that. Remember that?
Chris: Yeah. They called it like request animation frame loading - or something.
Dave: Yeah. Yeah.
Chris: Isn't there a good Eric Meyer quote that's something like that? Your browser is a first person shooter for content - or something. It's something like that.
Dave: We could bring him in. Yeah, let's bring him in. Eric!
Dave: Eric, what was your quote? Eric's...
Eric: I describe ... as first-person scrollers.
Chris: Ah, there it is!
Dave: That's it.
Chris: That's good stuff.
Dave: That's it.
Chris: That's good stuff.
Dave: All right. Thank you.
Chris: Thanks, Eric. [Laughter]
Dave: We'll catch you in the Q&A.
Chris: First-person scroller. That's just good. That's good stuff.
Dave: First-person scroller.
Chris: Let's get to the questions, though. We haven't answered a single question. Unless you have some plans ahead of it.
Dave: No. No, we can do the question and the answer. So, meat and potatoes here at ShopTalk Show, a weekly podcast. We take questions. We do answers. Sometimes we have guests and stuff like that.
So, let's get into question number one.
Dave: Why is birds?
Dave: Why is birds? Eric!
Chris: [Laughter] Don't bother Eric.
Dave: Eric. Eric, why is birds? [Laughter]
Eric: Because birds is good.
Dave: Oh, is birds good or is birds bad?
Eric: Birds is good.
Dave: Even blue jays?
Eric: Oh, yeah, 100%.
Dave: No. Cardinal is good. Blue jay is bad.
Dave: All right. Well, thanks, Eric. [Laughter]
Dave: Can we do this 100 more times? Oh....
Chris: We could run it through a Nickelodeon show or something.
Chris: Open our lockers. "Hey, Alison!"
Dave: Yeah. [Laughter] Oh, no! That's good. We need slime next time we do this.
All right. Well, now that we got that one out of the way, let's go to the next question here.
Hey! This is from Jodana. Do you want to read this one, or can you read it?
Chris: Yeah. "I'd be interested to hear if there are any accessibility factors to take into account with Web components." Web components was your talk, and you've done a workshop on them recently. You've been living in this world quite a bit. Really cool. I think you're a dang hero for doing so, Dave.
Chris: Let's talk about accessibility, though. What comes to mind for me is they all have the little DOM inside of them, so tabbing in and out of them freaks me out a little bit. I could invent a really cool slider component that everyone would use and nefariously make it a focus trap. What are you going to do about it? Or something like that, but--
Dave: Right. Right. I'm going to stay off camera. I'm still sharing my screen for a bit.
Dave: I wanted to share some blog posts. There are some accessibility things that you want to be concerned about, but they're mostly -- it's stuff that's hard to do in normal Web design or coding, normal HTML, and it's also difficult in the Shadow DOM realm.
One is managing focus, like if you opened a modal and you need to return the focus back to a button or something like that. Well--
Chris: Hmm. That's hard anyway, right, though?
Dave: That's hard anyway. People don't do it that successfully. But this is double hard in the Shadow DOM because the Shadow DOM can't query the document, so you can only talk to the element. You can't really be like, "Hey, document. Tell me everything you know." You know?
Dave: That doesn't work that way.
Chris: If you were making a modal component, you better think about that and have some API for passing in previously focused element, or something like that.
Dave: Yeah, or pattern, or whatever. So, Nolan Lawson, he gets into it. He has this emoji picker, so it's kind of a perfect example about how he's managing focus.
You actually get quoted at the bottom of the article, Chris.
Dave: For the inert attribute, which is kind of like how you make something part of the DOM not work and then part of the DOM--
Chris: When you open an emoji picker, you inert everything that's not the emoji picker, temporarily. Hopefully, that's possible.
Chris: Then when you un-inert it, is the--?
I don't remember having any part of this article, but thanks, Nolan. But does it mean that the browser should get involved and refocus what was focused before it had inert on it? Is there any evidence that the browser is actually going to do that?
Dave: Yeah. We've talked about delegating focus and what happens here, quite a bit in organizations like Open UI and stuff like that. I think there are patterns to be had and Web component people know about this.
In the Web Components Community Group, we're working on a focus, a lot of focus, sort of proposals. That's one thing.
The other thing would be form controls, like if you have an input, my custom input. How do you basically focus that input? There's a delegate focus thing, but how do you pass focus or how would you do validation, element validation? If it's its own little realm, it's not attached to the parent form, it's in its own little shadow realm.
Chris: Okay. Okay. You've made--
There are a lot of people out there that are delivering design systems. Let's say you deliver that design system via Web components and it's - I don't know - Verge input, Verge input, Verge input (three of them in a row). The Shadow DOM inside of it has an actual input inside of it.
Chris: But you're doing this because they're stylized, and that's what every design system on Earth delivers. Are you saying that it would be hard to--?
Like when I press the tab key, it doesn't necessarily know how to focus the next?
Dave: Yeah. I think the tabbing is going to work fine, but something like when you hit submit and you had required on there, how would it know? It doesn't know that it's participating in the form.
Dave: You need to basically make it a participant. There's this thing called element attach internals. Then there's also this thing called form data, which basically serialized your form as a JSON object. It's this thing that not enough people are using because it's kind of actually cool. It would make great for single-page apps. But anyway, this stuff exists.
This stuff is hard, but then it's also hard in Web component land. Then there's another specific use case where if you have a label outside of my custom element input--
Chris: Oh... It has trouble attaching the for to name.
Dave: Yeah. Where does your for attribute hook into? And does your Web component know the ID, know its own ID, or whatever? Can you pass an ID down to a child? It's a sticky situation.
Chris: It's surmountable, it sounds like, so that's cool.
Dave: Yeah. I think there are workarounds and then what are you--? What's your thought there?
Chris: Okay. Accessibility and Web components. There's a little bit, but it's not so bad. I even asked you earlier.
Let's say it's just a card or something, and it has a header and an image and a description and a link, or something.
Chris: There's not going to be any problem with that. You'll tab right through it like anything else. You'll tab and reverse through it on the way back. It's pretty well handled.
Dave: Yeah. It should work great. It's just the situations where it needs to be a participant. Not to say it's not something to consider, but I think you'd need to test it and know it.
[Banjo music starts]
Chris: This episode of ShopTalk Show is brought to you in part by Linode. Linode makes cloud computing simple, affordable, and accessible, allowing you to focus on your customers, not your infrastructure. Visit linode.com/shoptalkshow and get a free account with $100 of credit in it. Pretty cool.
Here are some things that you should know. For one thing, great, you go get a server. What do you do with the server? Well, one of the things is you could just one-click install some apps on it. One click, install WordPress. One click, make it a Minecraft server. One click, put Plesk on it, which is like a UI for managing the server in a more detailed way. Pretty cool.
Every plan comes with Linode's amazing human-powered customer support. If you need help, and we're talking 24/7/365, someone will pick up the phone or respond to your email or reply to you on social media. They are all over it, which is pretty great.
Aside from cloud hosting, Linode recently added GPU hosting plans for things that are built for machine learning and neural net usage. They're built with RTX 6000 GPUs.
Thanks for the support, Linode. Again, check them out at linode.com/shoptalkshow.
[Banjo music stops]
Dave: Um, well, cool. Here. We can switch to our next question.
Chris: More questions! Thanks, everybody.
Dave: This was a big one. I'm hearing there's a little choppy audio when I'm sharing. I apologize. It sounds like the Zoom Meeting works a little bit better. But here we go.
"What are the biggest new upcoming CSS rules (I think, features) that you're excited about and how do you think they are going to change the Web?" From Victor.
We kind of talked about this a little bit. Huh? We have another similar question.
Chris: Well, yeah. We got all excited about container queries, which it just can't overstate the greatness of them. Yeah, but it's like it's not alone. Doesn't it feel like when Flexbox, Grid, and stuff were shipping? They somehow got to spotlight all to themselves.
Dave: Yeah, but--
Chris: Not anymore - kind of.
Chris: But it's like, what else? What else is exciting that's coming out that you're particularly excited about? I could just hit you with stuff because I tossed this on the hat as we were just briefing each other earlier. I was like, what's the opposite of this question? Just for fun, like, what's the boringest newest feature? [Laughter]
Chris: Is it scope because scope is cool but not really because you can just write a class and then all the CSS that you write under that class is scoped to that class. It's not the most--
Dave: I disagree. I like scope quite a bit.
Dave: I'm going to use it. I'm going to be the jerk in the office who insists on using it all the time everywhere, even where it's not appropriate. That's going to be me.
Chris: Fine. You love it. You love it. I know it's got the donuts and it's got some cool proximity stuff. It's interesting. But of all the new stuff coming out, scope is the least fun to me.
Dave: I feel like it's a theme that's been going on in this whole conference, Chris. You've got to pay attention.
Dave: Look at my chart. The hack is becoming the feature, right?
Dave: We had BEM. BEM is kind of a hack, man. It's great, but it's kind of a hack because I'm going to explicitly name this and hyphenate and underscore it and make it perfect.
Scope says I want this thing. Give me this scope and don't go past that.
Dave: That's the @scope thing. That's my--
Chris: There's some explicitness to it.
Dave: Yeah. And words around words mean--
Chris: Words mean things.
Dave: Words mean things, right? Will--
You're expressing this, right, and it means this and this in this context. Jeremy talks--
Chris: What an interesting connection to Will's talk. That's good. Where he had all that stuff about the Amish and it doesn't necessarily mean -- it means high quality in certain context.
Dave: Yeah. It means a handmade table sometimes. You know?
Dave: But to some people, it means people who drive buggies.
Dave: Yeah, it's like, great.
Chris: But in code, you're saying scope means scope. It doesn't mean--
Dave: Scope means scope. Yeah. I don't mean like - whatever - card component primary dash left align underscore heading. I mean, at this scope, do this thing. I'm stoked on it from that standpoint.
Chris: All right, but other things that we're excited about. It seems like it's all pretty exciting. I know people are excited about has, and there's this moment where--
Actually, why don't you just do the next question? Doesn't it blast right into it?
Dave: Oh, yeah, we do. Yeah. Let me zip into this. This was from Andrew from the D-d-d-d-discord. I kind of truncated this just a smidge, but he's saying container queries, has, cascade layers are big features that take more than normal effort to introduce and settle into his CSS brain.
Dave: A two-part question. Would you add anything to the list of soon to be features that you think will fundamentally change how we approach and write CSS? Two, second, how are you planning to bring all those things into your wheelhouse so that you use them on production sites? That you even remember to use them, you know.
Chris: My suspicion is that the list -- and if the list is container queries, container units, has -- what was the other one?
Dave: Cascade layers, which is like your building to sort of like--
Chris: That! That's the one I would pull out of the bucket.
Dave: Oh, really?
Chris: The rest of those, I feel like I would trust your brain because there are moments when you're writing CSS, and you're like, "Uh, I wish I could select under this circumstance because the child has this class, but I'm really trying to reach the parent," or whatever. I feel like "has" has been on CSS developers' brains forever, and your brain will continually remind you how annoying it is that we don't have it, and that you should just trust that your brain will continue to do that.
But all of a sudden, you'll be like, "Oh, poops. We can do that now. Sick." You know?
Dave: Yeah. I think--
Chris: I don't think you need to retrain your brain for that one. It's just going to ask for it. I think container queries are in that bucket, too, that there are all these moments that you're like, "I really don't want to think about how wide the browser window is. I don't care." That your brain will just do the right thing with it.
Dave: Mm-hmm. Mm-hmm.
Chris: I'm not so sure your brain will do the right thing with cascade layers. I think it's too weird that you're going to have--
Dave: I think, yeah, you have to be really intentional about introducing a layer and know exactly what it's going to do.
Dave: It's similar to scope in what it can do. I was thinking I feel like has is one of those things every CSS developer spends about one or two days a year trying to trick the browser into doing.
Dave: You spend one or two days a year trying to write--
Chris: Yeah. You're like, jQuery had it.
Dave: Yeah. You're writing the best selector on the planet, but it takes two days and you fail. I think that's a good one.
One thing I was thinking about was color, the new color functions: LAB, LCH.
Chris: Those are crazy town.
Dave: Display P3. I don't have muscle memory for that, so I don't know how I'm going to bring that into my work wheelhouse, especially because if you work across the aisle with designers and stuff like that, you have to also -- they also have to speak P3, Display P3, or LAB colors. They're probably just going to hand you a Figma with HEX.
Dave: How are you going to be like, "Well, actually, there's a whole other spectrum. Open your mind"? You know? I don't know how you do that.
Chris: I think tooling is going to assist with it.
Chris: But I have a suspicion with all this that they're not going to be--
I think the temptation is to be, "Oh, we have a new color space. Let's find the best color space for this project, and then we'll apply that color space consistently throughout the project.
Chris: That's tempting for my brain because I look at LCH, and I'm like, "Oh, that's the one that clicks with me because it's got all these great features. The gradients are better and the syntax is sensical," yadda-yadda. Like, "Oh, cool. We'll use LCH for this project." I don't think that's going to be the case. I've talked myself out of that.
I think what's going to be the case is you're going to decide. A color space is on a one-off basis because every time I see a comparison of, like, what a gradient looks like across eight different color spaces, there's no clear winner.
Dave: Right. Right.
Chris: I think, per gradient, you're going to choose which gradient looks best. I think tooling ultimately is going to assist with that just because you pick a gradient off of--
I'm sure you can imagine a tool that's like, "Which one of these eight gradients do you want to pick?" and then it just barfs out the syntax and you use it.
Dave: Mm-hmm. Yeah. Yeah.
Chris: It's just like the Panic's website - or whatever - that has the crazy pink or the crazy yellow on it. Not crazy, but just very vibrant.
Dave: Yeah. Yeah.
Chris: I shouldn't use that word. That's a one-off, and you use it, but it doesn't mean stop using hex codes. People know what EEE is. It's cool, light gray. You're going to keep using that.
Dave: Well, and I think breaking that muscle memory is going to be hard. People are just going to--
Chris: Or they're set as custom properties, and then you use the custom property and you don't even think about ultimately what value it has. You're using --superpink.
Dave: Right, and so super pink goes to whatever somebody says, super pink is, or whatever the browser--
Chris: You thought about it once or twice two months ago and now you're not continuing to think about it.
Dave: Right. Yeah. No, it's like the clock from Jeremy's talk that goes backwards. [Laughter] The reverse clock. It's going to take a while for me to break out of what I was doing or the way it's been done. I don't know.
How am I planning on bringing things into my wheelhouse? It is always side projects. My big thing is don't rush. Don't rush too new stuff to production. Just play around with it on your side project. Learn the rough edges.
Chris: Yeah. I'm curious. Talking about tooling for one second. Grigsby had this whole thing where it was very well laid out of what the next design tool will need to be and be like. There's a moment where he's like, "It'll be browser rendered." I mean you could try to fake it, but why bother faking it? Browsers are pretty good at rendering browsers. [Laughter]
Dave: Mm-hmm. Mm-hmm.
Chris: Maybe the design tools should be browser rendered. I was like, "Hmm...." You know? That idea has been floating around forever.
Chris: Isn't it a bummer? Figma will roll out something. They're like, "Look! As you type more characters into a button, the button expands." We're like, "Wow!"
Chris: Like an inline block element?
Dave: Like a button.
Chris: Like a button does?
Dave: Look, the text on the paragraph wraps to the next line--
Dave: --when it hits the edge.
Chris: Yeah. Suck that, SVG.
Dave: Geesh! Yeah.
Chris: [Laughter] But is he right? Part of me is like, crack so far at designing in the browser. I mean there's no crack on designing the browser. It is right. The final design stuff, decision-making, back and forth, and all that feels so positive to me to happen in the browser.
Chris: To have your designers be browser people too is clutch. But I think there's a difference between that experimental design space and mock ups and stuff that I'm not so sure has to be in the browser. In fact, sometimes I think the browser is a little bit of a distraction when you're in that mode.
Dave: I think so too. Yeah, he had Tyler - was it - Tyler Sticka from his company on to do, like, for the interview kind of thing. And it was just like, I want to draw circles. You know? The Web is not -- circles are a new thing. We just got circles.
Chris: Yeah. We just got them.
Dave: A couple of years ago, so this idea that I just want to draw a circle and be in this experimental - drag stuff around - mode, yeah, I don't know that--
I want to see how it plays out. We've been playing with Figma and stuff like that, just like how Jason has. But how do you--? If you have your components list, official-official components right there--
Dave: --and then are you going to draw circles, or are you just going to go straight for the components? Can you have those two mental modes of exploration?
Chris: Dude, Dave. That's the moment. For lack of a better way to explain it, because I know this is not how the brain actually works, but it's a pretty good metaphor. There's left brain thinking, which is, to me, more HTML and CSS; how can I get this done? I'm in that mode of thinking.
There's right brain: I'll take my paint brush out and just go swoosh on the canvas and make big, bold design decisions, and I'm less apt to make big, bold, swooshy decisions in the browser context.
Dave: Yeah. Yeah. Well, is that the clock?
Chris: That's just....
Dave: Going back, we're used to a way of doing it. You know.
Chris: Right. I'm not saying that I'm right and everybody else is wrong.
Dave: Yeah, but there's -- yeah. Yeah, I don't--
I tried to do YouTube thumbnails. Okay? This is Dave Rupert school of design, right? I'm doing YouTube thumbnails in Figma - or whatever.
Chris: I'll do one.
Dave: I have a hard time because even those are very systematized. It's very much like I want these all to look the same. Blah-blah-blah. You know? I'm in my systems brain. I'm not really into, like, man, let's just throw paint on the wall and see what's cool. I'm not. That's, again, maybe my skill level and stuff like that. I don't just go silly or stupid with filters in Grunt and layers. I don't go overboard like you maybe would in Photoshop or something like that.
Chris: Yeah! You might because you just opened the filters menu. You're like, "Oh, what do we have here?" Well, munge mode, or whatever. You know?
Dave: Yeah. Yeah.
Chris: Gone to blur.
Dave: Yeah. I've got five filters and mixed blend mode.
Dave: Multiply. But you're not like, "Let's just go. Let's just do this weird. Let's go weird."
Chris: It's not like I never do that in CSS, but what I'm less apt to do is grab the footer and make it the header.
Chris: Well, that's an HTML change too. I have to use multiple modes of thinking to do it.
Dave: Yeah. Yeah. Well, hey.
Chris: What else do we got?
Dave: Here we got. I've got another question here. This one is about something we talked about briefly in episode 508. We have a podcast. Like and subscribe.
"What's the journey of launching and maintaining a Web developer job board? Could you elaborate on the best and worst parts? Anything totally unexpected?" Drew.
We had a job board. It was the CodePen job board. It was also on CSS-Tricks. It was also on ShopTalk Show. But then it went away. What's the story, Chris?
Chris: Well, I can tell you our story really briefly. It was the ShopTalk Show job board too, but we had a job board on CodePen. Why not?
It was almost - I don't know if greed is the right word, but certainly we knew Dan Cederholm from previous stages of AEA, surely, and Rich Thornett and stuff who were running Dribbble, who straight up got rich having a job board on Dribbble.
Dave: They did well. Yeah.
Chris: That was the main financial driver of Dribbble. I was like, "Yeah, but their designers, and I have front-end developers. There is a strong CodePen-Dribbble connection. I know they're bigger and, well, by all accounts more successful so far - gentlemen.
Dave: Right. Right. Right.
Chris: Still working on that. I thought maybe a job board could be an answer for us. We even worked with Rich (post Dribbble) because he saw so much potential in what we were doing. And we've never been able to crack it to nearly the level that they did.
But here's the most important thing. It's not just about success. It's about focus. There are developers who are listening to this right now who could install a WordPress, put a job board plugin on it in five minutes, and have a job board. The technology of the job board--
Dave: Before this episode is over. [Laughter] Before this is finished.
Chris: Well, that's my theory.
Chris: I could because I just know how to spin up a WordPress and know how to google a plugin really quick. I've literally seen WordPress powered job boards. It doesn't have to be WordPress. Whatever technology you pick, the technology of a job board is not hard. You're not breaking any new ground. You're not going to win the day because of your technology of your job board. It's not interesting.
Even if you have some idea, your idea will be small. It will be like, oh, a new way to filter it, or I'm going to focus my job board on remote jobs - or something. Everybody has already thought of that stuff.
I don't want to minimize technology because there are some developers, probably, who are listening too, who are like, "Actually, building a job board sounds kind of complicated to me." Fair enough. You're early in your journey and you're not just reusing tech like I would. [Laughter] I don't know. It might take me a minute to build a crud app, too, from scratch if I was using new technology or something.
But the point is, nobody really cares about the technology of a job board. What they want to do is find a job, and it's a two-sided marketplace, which I always think is complicated. You need two types of people.
Dave: Two customers.
Chris: You need people looking for jobs and you need people who are going to post jobs. I always squint my eyes a little extra hard at that as a startup idea. You're like, "I'm going to have a dog walking app." Then you're like, "You need dog walkers and you need people who have dogs that need to be walked." That's a hard problem to solve.
Dave: Right. Right. I know behind the scenes, too, it's not just a turn on money machine, go. It's not just free money, a money printer. It was you get support requests, like, "Why is the link not working on this job post?"
Dave: You're like, "Well, I didn't write it, so I don't know."
Dave: But it's my job board, so--
Chris: You're like, "The link started with http://, did you think of that?"
Dave: Then you have to take your Saturday, go SSH into the database, and manually fix the link.
Chris: Fix their link or whatever. Yeah.
Chris: Or write an admin screen that makes fixing it easier. Or deal with refund requests or answer presale requests for the job board and/or fix the cron job that didn't take down the old job properly. It's a question of focus.
It was like the job board wasn't nothing. It made actual dollar bills. So, maybe yours would too, reader.
Chris: But it didn't make so much. If it was making money hand over fist, I would be reveling in it. I'd be happy to answer your questions all over email. I would be like, "This is my job now." The thing is it never quite like made it over that hump where it was worth it for us.
As a company who is not a job board company -- we're an in browser IDE company -- it just didn't--
Dave: It was a little out of the--
Chris: It was, and I absolutely don't regret spinning it down. We refunded the last final jobs or just let them run out, maybe, or something, and just kind of -- kind of slowly let it go away. And it wasn't a big deal. A handful of people were like, "Hey, I got my job through that. Where did that go?" I was like, oh, sorry. It's just a question of focus.
I'd say focus above all else. If you're ready to fully mentally commit to a new startup, hey, rock and roll. Do it.
Dave: Right. Well, yeah. Hopefully, it makes enough money you can pay somebody to focus on it so you can do your actual job - or whatever. You know. All right.
Chris: There's some competition out there. You know?
Dave: You've got to think about that.
Chris: Cameron Moll might give you a call. [Laughter]
Dave: There's a lot, too. Yeah.
Chris: There was a time in this town were Cameron Moll ran job boards around here. I'm just saying.
Dave: [Laughter] Hey... Nice job board. It would be a shame....
Dave: All right. Hey, here we go. Here's a question from Shaun about Web components. "Is it beneficial to use a Web component when the content within that component is completely static?"
Chris: We mentioned Shaun's question earlier. I wanted to know your thing. But because--
Okay. Sorry. I just started talking too loudly.
Dave: Oh, you can talk. Talk. Talk.
I think your answer was great. I'll tee it up for you that I don't know that static or not static is the right metric there.
Dave: Yeah. I think if you have more interactivity, maybe it does warrant, like all the behavior is self-contained. But for me, it all comes down to that, like, is it reusable? Do you want to reuse this? Maybe that's five pages down, or maybe that's on a different website. I think Una had that really great example of the bustle design system, or BDL. BDS. Anyway, BDG. [Laughter]
It was the related products bricks and how they looked totally different on the different websites.
Dave: You don't want to recode the related products bricks. You want to style it different, but you don't want to recode it necessarily. That would be a great point where my "static stuff" -- because it's really just for looping through some JSON or from some WordPress database or whatever. That's where the static stuff might be great in a Web component being reused. Right?
Chris: It's about reusability and then we were also kind of shooting around that it's variations too. I think reusability is on top.
Chris: Reuse it.
Chris: Even on the same website, if you used it 50 times, that's a lot of times.
Chris: Even on a loop or something, like, I need ten blog posts over here. That's a lot of HTML to rewrite over and over and over. You're saving yourself the HTML, meaning you're saving yourself having to refactor that HTML. That's pretty bold. But there's also sometimes it has an image and sometimes it doesn't. That's a variation. Variations can be handled in Web components via attributes, which is so cool. Would you write it like that? Would you write, like, "No img, or something like that?"
Dave: Yeah. I mean--
Chris: Or would you just not have an image in the Light DOM and then it would just do it....
Dave: Yeah. Not have an image in the Light DOM. I mean you've got a lot of options with Web components. It's kind of interesting because not everything is a prop, right? You can pass whatever you want in, image or not image, and then--
Chris: Do you still have to use data attributes for attributes?
You could turn that off. You could set it as an attribute, like it has an image or whatever - something like that. There's a lot you could do that. I don't know.
Dave: You have a lot of flexibility, and I think that would be my other thing is you can graduate into Web components. That's what's kind of cool about them, too. The tooling stuff is totally if you want it. It comes at the end. It's not like a React project or a Svelte project. Svelte, quite literally, the tooling has to be there. Svelte doesn't work without its compiler. I feel like that's a safe statement, right? I'm not overstretching?
Chris: Of, for Svelte, yeah.
Dave: Okay. Yeah. Okay.
Chris: No, that's the whole point of Svelte. Yeah.
Dave: Phew! Don't want to say something wrong on the Internet.
Dave: Or if you use single file component, it doesn't work without Vue in the mix - or whatever. So, Web components, though, you can baby step into it. You can just wrap everything in your custom element, like a fake custom element, and it's just going to say, "Oh, that's a div. I didn't understand what that is. It's a div."
Chris: Oh, right.
Dave: You could namespace where you want components. You could kind of sketch it out like comments and then go through and add custom elements in if you want.
Chris: It's more interesting thinking about let's say you've already used something component-based.
Chris: Because I was talking to even Jeffrey about this earlier about the burrito website. Should I make a burrito card?
Chris: Because the whole website is burrito cards. I'm like, meh. It's already an Astro component. I'm already not rewriting that HTML, so I'm not particularly compelled to do it. But then in talking to you later, you're like, "It's not so much that you need it. It's just that you could do it."
Dave: You could. Yeah.
Chris: You can sprinkle Web components in a way that all other component architectures ever were unsprinkleable.
Dave: Yeah. Yeah.
Chris: Maybe React tried to pretend, like, "You can just use this for a little part of your Web app," where you're like, "Hmm..." [Laughter]
Dave: You're lying. [Laughter]
Chris: Let's try to hmm in major thirds.
Dave: Did we do it? I don't know.
Chris: That's really good. I think it was a fourth, but--
Dave: I am not the harmony in my family, so I'm more of the melody. Yeah, so--
Chris: Yeah. Not really, though. But for Web components, you really can because the overhead for a Web component is what: 1K, 2K, maybe?
Dave: Yeah. Really nothing. Then if you use something like Lit, it's like 7K, but you amortize that cost across X number of Web components.
Dave: If you have 70 components in your design system, that comes out to 0.1 kilobyte per use.
Dave: I'm not crying about that. [Laughter]
Dave: I'm not crying about 100 bytes.
Chris: I know it's all bytes are different depending on what they are, but yeah, dude. You've optimized one jpeg and you pretty much are on your way.
Dave: Yeah. Yeah. Yeah, you optimize a jpeg or you just - whatever - reorganize the crud in the head of your website. You know? In the head element, you just clean that out a bit and do the weed whacking and get through that. You could probably earn that all back.
Chris: Here's one for you, Dave. It's not on your slide deck, but Jason writes in that you mentioned that you're working on Luro.
Dave: Yes, sir.
Chris: Designed to help bridge the designer-developer gap. What do you think creates that gap?
Chris: What are you looking to help?
Dave: Man, I have some wild ideas. [Laughter] Do you want the business answer or the wildcard answer? Which one do you play with?
Dave: You've got me at a good time.
Chris: A wildcard, Dave! I'll take the wildcard answer, please.
Dave: Okay. I think the problem is CapEx and OpEx. I think it's a systemic fricken' problem because OpEx is all development stuff. CapEx is design stuff. And you bill different. That's why you have product and engineering in two different buildings - or whatever - because they bill differently - or whatever. I think that's the problem.
Chris: Bill like B-I-L-L?
Dave: Yeah, like for some of our clients, we have to make two invoices -- one for CapEx, one for OpEx -- because they all bill and sort differently and whatever - get reported into taxes different.
Dave: I think that's part of the problem. I think there are systemic business problems in just how we treat design and development. Nothing is set up for these funnels. Then any time you have to go cross-management, too, is a deal. Right? You have to go -- what is it -- manager, manager, manager, manager. You have to cross the manager tree to talk to somebody. That stinks too.
Then people do these -- "Oh, we got the lateral, the horizontal team with one of every kind of person in the club," you know? It's like, I don't know, man.
Chris: Ooh, we should almost try to do a major third again.
Chris: [Laughter] No.
Dave: [Continue humming]
Dave: [Speaking in a singing voice] Open pit barbecue sauce.
Dave: Okay. I'm ready.
Chris: [Speaking in a singing voice] ...baby back, baby back...
Dave: When you do a horizontal, and you're like, "Oh, we're going to have these delivery teams of every single type of employee in the company," I also don't think that works. I think you need grouped up people. I think you need--
But I think the best thing you can do is hire more generalists, to be honest. I mean people who have cross-skill. That's....
Chris: No! You already lost it. You lost your pitch.
Chris: You buy Luro.
Dave: You can also buy Luro. [Laughter] You can also buy my product.
Chris: There you go. VRL.
Dave: Hmm... You know I think it's interesting times. Like I said before, I think, especially Astro, Slinkity, and 11ty. They kind of bring this idea.
Chris: ...no JS, no JS.
There's also Remix is doing some cool stuff with how it's server rendering stuff first. Svelte Kit as well, it really kind of goes into the server first mode or Next.js solves....
Dave: Sure. Sure.
Chris: Yeah, it's come full circle. I mean is there a way to go left, still? Yeah. Yeah. Unfortunately, I think no JS is a little bit of a stretch. [Laughter] I don't know that most people, including most developers, actually care that much. The AEA audience notwithstanding.
Dave: I think that's good and I welcome it. Yeah.
Chris: Yeah. Speaking of just to go somewhere totally different for a second--
Dave: Go for it. Go. Go.
Chris: Web components, you have some good demos where it's kind of like there are lots of good examples -- not enough, really -- of Web components that are like, just pull it down and now you have an image slider or whatever.
Chris: Stephanie's whole talk had so much interesting CSS for dealing with multiple screens.
Chris: I think is so cool, like legitimately. I had a dream once where I had a two-panel phone and it was so visceral that it was like -- I have never been able to shake it. I'm like, eventually, with our Adderall ridden youth, we will -- two apps is the minimum amount of apps that should be open at any given time. [Laughter]
Dave: I want one so bad.
Chris: I need to watch my YouTube and do my email at the same time. Yeah.
Dave: I purely can't because it's the green text thing, and I know that's terrible, but even my mom was like, "What's up? You got--"
I tried Android for a week, and my mom was like, "Why do you have a green text?" I'm like, "What, mom?! You're putting me on blast?"
Chris: Miranda was on green bubbles forever and was pulled back. Just listen to her rant about it. And I agree. It's a little classist.
Dave: Unfair. It's not fair. Yeah.
Chris: It really isn't fair. I really don't like that it exists. But now that she's back on blue bubbles, I really don't. I also don't. I prefer it. Our family runs a little smoother. Not just because of texts, but because we can share literally everything.
Dave: Calendars or whatever. Yeah.
Chris: Yeah, and iPhoto.
Dave: Well, but the thing was, it's not just -- but I want one so bad because I do audiobooks a lot. If you go to my website, my bookshelf, it's a lot of audio books, like 50 a year or something.
I would love an audiobook on one and then the actual Kindle book on the other so I can highlight passages rather than I type them out in Notion right now. It's terrible.
Chris: Oh, there are a million examples. It's almost like any two apps are a good match.
Dave: Yeah. TikTok and Tweets, and then you just....
Dave: You just....
Chris: Tweet the Tok.
Dave: ...and then you....
Chris: Oh, Tweet Tok, yeah.
Dave: I just--
Chris: But what I was getting at with Stephanie's talk is, with Web components, there was so much CSS and stuff in there that it was like, what if you just can't even be bothered to learn all the different things? Those could all express themselves as little Web component blasters.
Dave: Oh, little--
Chris: Where you're just like panel one and panel two. Done.
Dave: A little layout Web components. Hmm.
Chris: Where all that CSS just comes along for the ride.
Dave: Because there are so many. Even just the apps, just like the dialog space or whatever. You'd want that. You want it in one frame, right? You don't want it on two.
If I could just get a Web component that did that for me, that'd be pretty cool.
Chris: Think of -- I feel like Jen Simmons used to be like, "Oh, somebody is going to make a CSS grid framework, and they really don't need to," [laughter] because it's so easy to express in that way.
Dave: That's -- yeah. That's....
Chris: But there were a lot of developers that reached for that because they were like, "I choose not to be bothered by layout."
Chris: "I choose the bootstrap path."
Dave: Yeah. Yeah.
Chris: You're not going to -- those developers aren't going to disappear because you made a nicer API.
Dave: Hey. Leave Tailwind alone, Chris.
Chris: So, like two -- [Laughter]
Dave: [Laughter] Come on. Come on. People might like it. They want to be here.
[Banjo music plays]
Dave: All right.
Chris: Okay. But because those developers exist, you could make -- you can make Web components for them that are like the no think. You could register an LLC, The No Think Club - or something. All you do is make no think Web components.
Dave: Oh, man. Wouldn't that be great? Just like, "Hey, this is just--"
"Oh, you want this? Here's this." You know? You need a sommelier. Some sort of, "Oh! Would you like a 1998 layout?"
Chris: Oh, yeah.
Dave: Yeah. I could get you that. Yeah. Yeah.
Chris: [Laughter] I love the beau repair.
Dave: Yeah. Oh, man.
Chris: Okay. Well, that was fun. I'd like to shout out to Rachel Andrew for spreading the love of reduced test cases.
Chris: The best.
Dave: Oh, yeah. I quit taking GitHub issues without them because I was like, "I don't know what you're talking about. Please just show me how you broke your website, and then I can help you."
Chris: I have been in that club for so many years that it's still hard, though, because it's so tempting -- in the moment of something being wrong -- to just be like, "I don't know. I don't know. It's just wrong! Help me!" You know? [Laughter]
Dave: Yeah. Yeah.
Chris: I resort to really toddler behavior in Slack. I'm like, "I don't know! I don't know what's wrong! Just help me!"
Chris: But I'm like, "Okay. Take five minutes. Make the little reduced test case."
Dave: Make the problem 80%, 90% chance you'll realize that the problem is you. But--
Chris: You know what I like she said about it was above and beyond, which wasn't just, "You're making it for you to reduce the problem to understand it," because there is also a literal 50/50 chance that, as you're making the reduced test case, you're like, "Oh, yeah. That's my bad." [Laughter]
Dave: Yeah. Yeah. Yeah.
Chris: I screwed that up. Ugh! You know? So, you solve your own problem.
Then the other chance, okay, I've isolated. Now I can ask for help in a reasonable way because anybody can wrap their head around how little code is being presented here.
Then there's the chance that you still just did it wrong, and somebody can actually help you with that. Or now you have the perfect thing to submit as a bug or something. I know sometimes those go to browsers.
Chris: To me, that's extreme. That happens to me once a year.
Dave: Yeah. Yeah.
Chris: That I find some actual thing. But for the most part, they go into GitHub issues or something, like, "Look. This is busted. Can we deal with this, our own problem?" You know?
But she brought up the case that it's also like, because you have that, it's also the perfect proving ground for a workaround.
Dave: Right. Yeah. Like you can figure out the problem and potentially a solution, but then yeah. I had that go on with, like, "Oh, well, if you're--" [Laughter]
Chris: Oh, no!
Dave: He's back! All right. Well, good timing.
Chris: That's some Monty Python god stuff.
Dave: That's, hey, good--
Dave: Good timing, Eric.
Dave: We've got one more question for you, Eric.
Dave: Are you ready?
Eric: I've got like a minute.
Dave: All right, here you go. The last question that got sent in was, "Am I pregnant? Am I--?"
Dave: Okay. Great. We're done. That's all we got. Like and subscribe at ShopTalkShow. [Laughter] Thanks, Eric.
Eric: Thank you, guys. And thanks, everyone, for joining in. We really appreciate having you here. As always, a good time.
Chris: Yeah, it really is. Thanks so much for having us. That was just a pleasure to watch all the other speakers and participate there.
Chris: That was awesome.
Chris: Signing off, so there you go.
Dave: Thank you. Bye!