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--in the shed--Rupert... I forgot my last name. With me is Chris--in the office--Coyier. Hey, Chris. How's it going?

Chris Coyier: Yeah, great. Thanks. Uh... pretty good. We're recording a little bit in advance here, so we're going to attempt to not do any news and just talk generally about Web stuff. You know it's the summertime. We take trips, see the fam.

Dave: Yeah, and we haven't... After 15-whatever years we've been doing this... [Laughter] What is it? Ten years? Whatever. We haven't quite mastered the, "Let's take vacations at the same time," thing, really. [Laughter]

Chris: No. No.

Dave: You peel in June. I peel in July. It's like, "Whoops!" Oh, well.

Chris: Yeah. There's more coming up. We'll both be at Frostapalooza. We'll figure that one out.

Dave: Frostapalooza, gotta figure out that.

Chris: Maybe we'll record live on the scene.

Dave: Yeah. We could just base.

Chris: Yeah.

Dave: Base and banjo jam kind of deal.

Chris: Dude!

Dave: [Be-bopping]

00:01:25

Chris: But we have some from the question coffers this week. I thought that would be kind of fun here. Some follow-ups and things like that. Let's start with one from John Ellwood.

He was listening to one back when we had Adam on, Adam Argyle.

Dave: Mm-hmm. Mm-hmm.

Chris: Listening. In ended up being a show about Masonry. Remember that? There was a little... [clears throat]

Dave: There are two competing specs, right?

Chris: Right, Display Grid or Display Masonry. Competing was even a strong word because, in the end, it was like we can do all the stuff both of them want to do, so how competing really is it at this point?

Dave: Mm-hmm.

Chris: We still don't know - for the record. I feel like I'm a little annoying about this, but there were those two big blog posts and then nothing. But it's funny because as we're recording this, the CSS working group is in Spain. You can just tell because, if you follow enough CSS people online and stuff, they're talking about the things that are going on, like, "What should we talk about? What can get on the agenda?"

One of them that came out as a big surprise to me is if, so if with--

Dave: If statements, yeah.

Chris: With parentheses on it. I said we weren't going to do news. This is the damn first thing that we did.

It's kind of cool. What if can do then is test if a custom property is some particular value. So, it's mostly something to superpower custom properties a little bit. There is an extremely weird, exotic way you can do this without if now.

Dave: Mm-hmm.

Chris: But this just makes it... You know. Use the word if. It's a lot more clear. Then I think it takes multiple parameters like "if true," "if false," kind of thing. So, it ends up being like... What do you call the question mark in JavaScript, the ternary operator? I think it behaves a bit like that.

Dave: It's like... Yeah. It's like if, and then you say - whatever - --accent:red do this and then that's your true statement. Then your false statement, I think.

Chris: Yeah, so then it ends up returning a value. Meaning that if you had ten values to set, you'd have to have ten if statements.

Dave: Yeah.

Chris: So, it's not like an if block. It doesn't look like, anyway. I saw all of one tweet about it from Leigha, so... [Laughter] I didn't read the spec.

Dave: But I think, with that style query, it's kind of like an inline style query, sort of. It's kind of... Which are not fully out in every browser, but it's there.

00:03:53

Chris: No... Man, my brain reels with those things. So, a style query, like Dave was saying, is that then you can have a block. So, I can write @containerstyle. Then in the parentheses that follow that, say --x:true, or even just --x, if X has any value at all is set.

Dave: Mm-hmm.

Chris: Then it will. Or a particular value. Then I can have a whole set of stuff. To me, that reads very much just like a mixin. That may not be fair because I think there's different stuff happening in terms of mixins, but it's kind of a mixin. It's kind of like, "If that thing is true on this particular container," so it is subject to some of the container rules, "then do this whole block of stuff."

You could say variant large and then it gets more padding. The border gets bigger. The header and side of it gets a bigger font size. You can do all kinds of styling just by setting one variable. That's what I mean by a mixin.

Dave: Mm-hmm. Mm-hmm.

Chris: That's available. So, what you're saying is, with this if statement, you could use the if statement, then set... to set. Use the if statement to set a style or a custom property and then that custom property could then trigger a style query.

Dave: Mm-hmm.

Chris: I think that's fair. Then you wouldn't need... Like I was saying, you wouldn't need to use the if statement ten times. You'd probably abstract that into a style query.

Dave: Dude, just a big block.

Chris: Whew! That was hard to radio mouth-blog. Sorry if we lost you there, folks.

00:05:30

Dave: Well, and it's all kind of new. What I find very interesting about that -- again, we're not talking about news today, everybody. We're not talking....

Chris: [Laughter]

Dave: But what I find very interesting about this new development in CSS [laughter] is all the people who say, "CSS is a programming language." Well, it has types. It has if statements now. It has the ability to respond to different queries and things about the browser. It has variables. It has -- what else does it have? It has calculating functions. It has math functions like sin, tan. What else do you need to call it a fricken' language?

Chris: What else do you need? Yeah. It is kind of silly. As far as being an advanced language, clearly it has arrived.

It doesn't execute. The browser asks for it and it does things with that file. But you can't call it at the command line. I think that's the--

Dave: Yet...

Chris: [Laughter] Yeah.

Dave: That's true. Well, there's--

Chris: You can't console.log from it - or whatever.

Dave: You can css.registerproperty. I did that this week, so there you go.

Chris: You can't do that without a JSON file, either, or XML - or whatever. Maybe they....

Dave: Or a JavaScript file without Node. You know what I mean?

Chris: [Laughter] Right.

Dave: So...

Chris: So, there.

Dave: Maybe it's just the runtime is missing, the CLI runtime. You know?

00:06:58

Chris: We had John Ellwood and he wrote in (listening to that show by Adam). He was looking at some of the demos on the WebKit blog because that blog post from Jen Simmons was full of all kinds of interesting... Like this newspaper demo caught both of our attentions, right? It had some... the rag, the vertical rag in it was like a little light, but it really felt like a newspaper. When you see it, you're like, "Ooh!" That's just the kind of subtle, cool, like, "How'd you do that?" vibe that is attractive with differently-sized columns that end at weird places.

Dave: Mm-hmm.

Chris: And all this kind of....

Dave: Mm-hmm. Mm-hmm.

Chris: "I'm thinking it would be neat to dynamically assign a weight to items in this layout that would impact the size. For example, on this demo page, if one of the articles was about a topic that was trending (on whatever social media platform still exists), the articles with those keywords or tags would be given a higher weighted value and they would have an X% larger size. I'm not experienced enough to know how a grid has calculated the size of each element on the page, but this layout is super cool. And to be able to have the decision of which articles get a little more room to be handled is pretty intriguing."

Yeah, I like that. Could you turn the system to be so sophisticated that all you have to do is say, "Article weight equals eight," or something.

Dave: Mm-hmm.

Chris: That it places itself on this grid in a more bigger, emphatic way, and other stuff kind of flows around it that has a lower percentage weight. I'm attracted to that idea, too. I do think it's probably possible, especially in CSS Grid. There's this concept of grid flow dense - or something like that.

Dave: Mm-hmm.

Chris: Are you familiar with that?

Dave: Mm-hmm. Yeah.

Chris: Then you can place something on that grid and the things kind of fill the gaps around it in an auto kind of way. That's a good thing to know about CSS Grid. Perhaps when you're learning it for the first time, your brain might go, "Okay, I'm setting up these rows and these columns, and I can place things upon these columns at really specific places," or I can let things just fall into it.

You can set up three columns and you have three divs. They're just going to fall into those three columns naturally. You don't have to explicitly place them there. Explicit is a good word there. There's explicit placement and implicit placement meaning, one, you put it there; the other, they just fall into it.

What you should know then is it can be a combination. You can explicitly put something somewhere and also have stuff just fall into place as well.

Dave: Mm-hmm. Mm-hmm.

Chris: You could say, "Hey, this thing that has a weight of eight (because it's a big, trending article about the election or something)." You could say, "Well, if anything has a weight of eight, then have it span at least three columns. Just give it that much information. That's going to make it bigger naturally. There are probably other things you can do styling-wise to give it higher weight and yet have other things just flow in around it. Great idea. Totally possible.

00:10:01

Dave: Yeah. I feel like it's the future of news. We need it. This idea of a blog column where every post is the same, even on my blog that's not the case. I have bangers occasionally. [Laughter]

Chris: Right!

Dave: I want those to really stand out.

Chris: That's a blog post. What do you do with the bangers?

Dave: I mean nothing right now.

Chris: Right.

Dave: They just sit in my 700-item long archive page.

Chris: Right. All it takes from a data perspective is one little custom field or something, one little piece of front matter, one little WordPress custom field, and all it has to be is banger true or false. Now you've got the data. What do you do with it?

Dave: I mean, yeah.

Chris: It could be as simple as font size 125%. Even that would go somewhere as far as getting attention drawn to the thing.

Dave: Mm-hmm.

Chris: But then does it degrade, for example? It's priority eight for six hours, let's say, on a big news site. Then does that automatically degrade - or what?

Dave: Yeah. I mean on those situations, you probably have a nice, little traffic with your stat. I don't know. Just a pretty simple algorithm of, like, "I'm going to probably peel this down after a day."

Chris: Yeah.

Dave: It's probably old news after a day, or there's newer....

Chris: Sure. Or on your archive pages, the banger value doesn't matter anymore. That's not calculated and it's just the homepage for that piece of data.

Dave: Yeah, but even on my archive page, it might be good to be like, "Yeah, this was on Hacker News. It was on the top five of Hacker News." That's kind of a big... If you came here, if you remember me from that - whatever. I'm just throwing stuff out there, but you think about news, like election news.

Right now, if you go to CNN or whatever, some Wisconsin judge is the same weight as a criminal trial of a president - or something like that.

Chris: Right.

Dave: It's just like that's wrong. That's not relatively... There's a relative importance there. We need to be able to express that on the Internet without reinventing the world. I feel like that's what that demo, that newspaper demo that Safari had, really sort of shows. Yeah, so hopefully, one day it'll be that easy just to be like, "Here's a weight," and then put it on there. Maybe you have to sort by weight or something like that, eventually.

00:12:45

Chris: I think it's possible now.

Dave: Yeah.

Chris: I think the tools are there--

Dave: Auto pack it.

Chris: --to make your internal weight value do something interesting on a grid.

Dave: Yeah. Yeah.

Chris: Then part of this story, speaking of relatively new stuff, is let's say you put it in, and the weight then shifts everything else around on the grid. That shifting around means that, like, what is happening to the tab order? We've talked about that during this show, too.

If you have this dense auto-flow on and it has chosen to slot something up into some unusual position on the grid, guaranteed the tabbing order has now become a bit weird for that grid.

Dave: Mm-hmm.

Chris: Especially if you're affecting the order and the rows and that kind of thing. It was kind of good news. Rachel Andrew followed up on her personal blog saying, like, "There is a CSS property that's being kind of actively discussed." It has something to do with just generic reading order.

Dave: Mm-hmm.

Chris: And it'll probably be applied to these specific layout methods. But it's not tied to them. It's something like saying reading order visual, which is just what we need here so that you can do weird crap changing the order. Get crazy with where you're placing stuff on the grid and not worry that the DOM order is totally different than the visual order, which is something we worry about now. You convinced me that it's important to worry about.

Dave: Well, it's just slightly... There were places where it was off and it would be cool to be able to adjust that or have, yeah, reading order separate from--

Chris: Well, we talked about hockey pucking. That's a little annoying to do that. But hockey pucking is a little bit of a bummer. But it gets - I don't know.

For example, the hockey puck can fly all across the whole dang ice rink. For example, if a tab takes you 8,000 pixels down the page... [laughter]

Dave: That's bad.

Chris: Which it totally can.

Dave: Yeah.

Chris: That's different than just, like, "Oh, it's tabbed 30 pixels up on the next row." That was a little awkward but, eh, aint nobody care about that. What you do care about is losing the entire position of what you're looking at entirely.

00:15:00

Dave: Mm-hmm. Yeah, so I think it makes sense to me to separate those concerns, the tab order and the rendering order, sort of. Hopefully, it kind of aligns to grid.

I think there was a reading order grid or something like that, if I remember. Anyway, it would just be cool to be able to control it in situations where I have knowingly messed it up. That would be cool.

Chris: Yeah.

Dave: Or just help me out. Can I get smarter algorithms? Can Houdini come back to life and then do--? Can it do this super-custom tab order algorithm and specify that out? That would be - I don't know - interesting stuff.

Chris: Yeah. I definitely prefer the CSS where you're like, "Just fix this." You just push the "Just Fix This" button and it works.

Dave: We have a lot of "Just Fix This" buttons lately. I'm just realizing, man. I've been deep into popover and things like that this week.

Chris: Have you? Nice.

Dave: Where you just say, "Button popover target my popover," and then you have a div called "My Popover" with a popover attribute.

Chris: Yeah?

Dave: It just does it.

Chris: Incredible.

Dave: It does ARIA expanded and all this crap. It's just like, man, we're spoiled now. It's great. It's really, really needed.

00:16:45

Chris: You know what I did? I should show it to you. You know Michelle Barker, I'm sure. CSS super genius.

Dave: Michelle Barker.

[Laughter]

Dave: Sorry. I can't say Barker without an Australian accent now.

Chris: That's the one. I'll put it in our secret admin channel.

She had a Pen that I thought was really smart. I had done this, too, a little while back. What do you call the sup position numbers like within a paragraph? You know.

Dave: Mm-hmm.

Chris: Like a footnote kind of thing, right?

Dave: Footnote, yeah. Yeah, yeah.

Chris: Yeah, and you want to click the little one because you want to say a little something in that sentence, but you didn't want to--

Dave: Mm-hmm.

Chris: You wanted to push it down to a footnote. Well, it's a nice use case for popover because, when you click on it, sure, that's fine that it pushes you down to the footnotes. But wouldn't it be nicer if it just opened right where the thing is (if it can)?

Dave: Mm-hmm.

Chris: That's what she built. But in her demo, you put the footnotes at the bottom of the page and the footnotes are the popovers.

Dave: Ooh...

Chris: But in her case, she was like, "Well, you can't really do that. You have to duplicate the popover up ahead," so I forked her Pen. I haven't blogged about this yet, but I think it's worth doing.

She's like, "You should have the footnotes down there, too." When you put the popover attribute on an element, Dave, it just disappears. It's gone.

Dave: Mm-hmm. Mm-hmm.

Chris: Then you click to open it up later.

Dave: Mm-hmm.

Chris: But she's like, "Oh, it'd be nice if you could just see the footnotes, too."

Dave: Mm-hmm. Mm-hmm.

Chris: But then if you click, then they're still there. I'm like, "Well..." In hers, she just did content duplication, which isn't the end of the world but isn't ideal. But I wrote ten lines of JavaScript that grabs all of the footnotes, duplicates them, makes those the popover versions.

Dave: Oh...

Chris: Just make sure they're ARIA hidden true.

Dave: Yeah. Wow! Yeah, yeah, yeah.

Chris: Isn't that nice?

Dave: That's clever. This is what I want. I get so jealous when I go to blogs and they have those little inline footnote popover things.

Chris: Oh, I know.

Dave: The three dots.

Dave: Dude, it's just infuriatingly cool.

Dave: I'm just like, "I fricken' want that!"

Chris: [Laughter] I know! I know. Well, now you can have it with no additional libraries or technology. This is all just straight Web tech.

Dave: You're just doing anchor bottom - or whatever - block end or whatever.

Chris: Oh, right.

Dave: Yeah.

00:19:08

Chris: What we didn't talk about is the anchoring in here. Her anchoring is great. It did a great job on how that should work out. The problem is anchoring is just in super new Chrome.

Dave: Mm-hmm. Yeah, yeah.

Chris: And Edge and friends, so that you can't rely on very much. But she coded it very cleverly. You'll see some @ supports in the CSS where it's like, "If anchoring isn't really available, then just bail."

Dave: Mm-hmm. Just don't do it. Yeah. Okay.

Chris: Just don't do the tooltip at all because they're just footnotes and their anchor, they're semantic HTML links down to the footnote.

Dave: Oh, man.

Chris: It's a little funny to totally bail on the whole idea if just anchoring isn't available but I kind of agree with the choice.

Dave: Yeah.

Chris: Otherwise, A, you have to use JavaScript, so that was what my earlier blog post was on. I used a library called Floating UI to just replicate it instead.

Dave: Yeah, yeah, yeah.

Chris: I'm okay with it, but it's a little heavy for just that.

Dave: It's 15.6 kilobytes, but yeah.

Chris: Yeah. Is that chill or not? It's not just that cost, though. It's the cost of thinking about it and maintaining it and stuff.

Dave: Yeah. The challenge I've been dealing with is if I'm only going to staple it to the bottom, I can just use position absolute. You know what I mean?

Chris: That's true.

Dave: I don't need a whole floating UI.

Chris: If you're reading a blog post and you click the little "1".

Dave: Yeah.

Chris: Is it cool to just pop up from the bottom? You know what? It might be, especially on mobile.

Dave: Yeah. Yeah.

Chris: Where there's not that much room anyway.

Dave: Right. On mobile, it'll, in theory, push the DOM down I think maybe. Let's say it's at the bottom of the page - or whatever.

Chris: Right.

Dave: You have a little popover on your colophon.

Chris: Yeah.

Dave: I think it'll just push the page down. I need to test that. But that's fine.

Chris: Yeah.

Dave: But if it's anchor positioning and I have anchor positioning, I have that enhancement and I can do the try block and flip it block, you know, do the flip block and that's cooler. But anyway, I'm going to steal this, Chris. Thank you for this.

Chris: Yeah. Well, it's really--

Dave: I'm going to just steal this.

Chris: It's a few lines of code from me and mostly Michelle Barker's work.

Dave: Michelle Barker.

Chris: Sorry. Yeah, I said it wrong. Yeah.

Dave: Sorry. You've got to have the accent in there.

Chris: I did. I do.

Dave: Barker.

Chris: I don't know how we got talking about that but it's a great idea. Here, I have another trick for you.

Dave: Maybe it's just like CSS that's here but kind of not, and CSS working group is doing things. Anyway, yeah.

00:21:42

Chris: I've got a PR update against the React docs.

Dave: [Laughter] Your PR'ing gets you in big React. Okay. Okay. I was like, "Dang, Chris!"

Chris: I don't know if I can even--

Dave: You must have been very upset. [Laughter]

Chris: Yeah. [Laughter]

Dave: Just take any heat like that, yeah.

Chris: It was just the docs and it was work-motivated, too, because they have an installation page on the React docs, which are new and nice and whatever. Right? But there's also a thousand PRs against them. It's one of those weird--

Dave: Yeah.

Chris: You just did a ton of work on this. What's the staff situation on dealing with these PRs? It's very strange to me.

Dave: I think it ebbs and flows is probably the answer. You know?

Chris: Probably there's a sprint or something to deal with that.

Dave: Yeah.

Chris: But it was six months it was sitting there. The problem is there's a link that says, "Try it on CodePen," on there. And this makes us look horrible. It makes me look stupid right now saying it. But it went to a 500 page.

Dave: Mm-hmm.

Chris: Whoever put that link in there did it in some strange way with some weird URL parameters that were just wrong.

Dave: Hmm...

Chris: And our system did not deal with those URL parameters well, and it threw a 500. I didn't want to fix it, Dave. I didn't want to just be like, "In this circumstance when you get these exact URL parameters, then do a weird edge case thing." I was like, "No, I want them to fix the URL." [Laughter]

Dave: Yeah, yeah, yeah.

Chris: They're using undocumented, weird stuff. So, I just put the PR up. I'm like, "You fix it."

A little nuance to it - or whatever - that... I don't know. I'm not even going to get into that. But I thought I'd get some kind of response or something in six months. And I'm not that salty about that. This isn't me being mad about the PR thing. It's mostly about, in the end, how do we get it merged?

Well, we got enough feedback on it that Robert on our team was like, "Oh, I know how to work the system a little bit." He had this great idea is that you find people active in the repo who have recently merged PRs, which is a thing you can do on GitHub.

Dave: Okay.

Chris: Look at recently merged PRs and see who it was that merged it.

Dave: Yeah.

Chris: That's proof positive that they're active in there. They're doing and thinking about that repo. Then you ping them -- chill-like, you know. You have to use a little social grace here.

Dave: Yeah.

Chris: But ping those people by name that are actively working in there. Then they'll look at the PR and just be like, "Oh, yeah. Boop." And that's exactly what he did and it took him, like... After he did it, it was like eight minutes after he did it.

Dave: Wow!

Chris: Then they just hit "merge" on it. You know?

Dave: Wow! That's some social engineering. That's good. Yeah.

Chris: It is a little bit. It's kind of a nice trick. I think it only works in pretty specific situations. But the PR was just lost in the woods, man.

Dave: Mm-hmm.

Chris: You'd have to paginate eight times to find that PR at all.

Dave: Yeah.

Chris: Nobody is going to find it.

00:24:49

Dave: The project I'm working on has like 200 open pull requests and there'll be just some herculean day where somebody closes out 10, just [loud groan].

Chris: Yeah.

Dave: You know?

Chris: Yeah.

Dave: Then guess what. All the CIs update. Bermp. Oh, we got to bump a code. Beep-boo-beep. Bump the version number. PR, PR, PR. You know?

Chris: Yeah.

Dave: You're just like, "Dang it!" [Laughter]

Chris: I see there's a lot of automation that happens when new code gets shipped.

Dave: Yeah. Yeah, so it's almost like you'll never ever catch up or just even by the time you fix something, somebody is like, "Great. They fixed my thing. Now my next weird thing I really am interested in." You know?

Chris: Yeah.

Dave: Or the change from something that was broke now needs a rollout over 20 components - something like that. It's hard, dude. Big repos, I have a lot more empathy now that I'm on kind of a big one.

Chris: Right.

Dave: It's very high volume. I'll close. I'll check my email. Bing, you've got an email.

Chris: Yeah.

Dave: Not Microsoft Bing but just "bing" the noise. I get an email. Okay, I'll check my email. Cool. Delete it. Not my thing.

Two seconds later, by the time I minimized it, another email shows up. If I go to a meeting, there'll be 100 unread emails just from things getting merged and CIs happening.

Chris: Oh, my gosh.

Dave: All this stuff, and so it's just a huge volume of stuff that I can only imagine React is like 20x that.

Chris: Hmm... Yeah.

Dave: It's so much stuff. I have to carve out times in my day to do email just because I'm like, "Dude, that's--"

00:26:43

Chris: Now I'm fascinated by that specifically. Could you or would you turn off email notifications for repo activity? That seems like a little heavy for email, 100 an hour.

Dave: It's so much, yeah. Well, and I would maybe consider it, but then there's stuff I would have to pay attention to.

Chris: Yeah.

Dave: Yeah. It's pretty easy. People will hopefully flag their issues with what technology they're using. They're supposed to, like, "This is React menu item," or whatever. I'm like, "Oh, okay. I'm not on the React stuff."

Chris: Yeah. That's a tricky situation because you need. The signal is so important that at this point you're willing to dig through a shitload of noise to find it.

Dave: Yeah. Yeah, and then--

Chris: Ooh...

Dave: Ideally, I could tell GitHub, "Don't email me CI stuff."

Chris: Right.

Dave: The fact that the robots participate as a human, that's the one part I kind of don't like. Ideally, you're getting, "Don't merge this," or something or "All tests fail. You need to pay attention to this," or something like that, that might be cool.

Chris: Right.

Dave: But I wish it was more deciduous. I wish you could--

Chris: Is it just one repo? You definitely have per-repo control.

Dave: Yeah. Yeah, it's one big mono repo. That's kind of the issue, too.

Chris: Hmm... Yeah.

Dave: Every component gets... You update one dependency; it's actually ten packages that get updated. Yeah.

00:28:13

Chris: God, yeah. I told you the other week; we upgraded to Yarn 4 - or whatever.

Dave: Mm-hmm.

Chris: We have the mono repo thing going. We actually had a little defector for a while. There was one little piece of it. They were like, "Man, you know what? We're just going to have to bust this piece off."

Dave: Mm-hmm.

Chris: We broke the holy sacrament of mono repo. There's one piece of the app that wasn't--

Dave: Mono repo plus one. [Laughter]

Chris: Yeah and it just sucked so bad that eventually we... Yarn 4 was able to -- once we got that done -- kind of bring them both back together.

Dave: Yeah.

Chris: It felt great to be mono repo'd again. Though, in our particular circumstance, without getting into too many details--not that they're propriety; they're just probably boring--is that we kind of don't want some of the aspects of a mono repo like shared dependencies. Sometimes the purpose is to have, like, "Oh, you have three projects and they all depend on Lodash - or something." Lodash goes in the node modules folder app, the root, so that there are not three copies of it - or something. That's not the whole point of it, but it's a little bit of it.

Dave: Yeah, yeah, yeah.

Chris: Shared dependencies is something. And not even all package managers even work like that, so that's a little reductive. But it's kind of the point.

We had some of that going on and now consider it like a problem. Each like each folder in the mono repo really should have unshared dependencies. It shouldn't have to look up.

Dave: Be it's own island. Yeah.

Chris: Yeah, like every single thing that it needs, you should be able to pluck it off and deploy it by itself and have it not be... One problem is a ghost dependency; it uses something that isn't declared within itself, and it never showed up as a problem in the mono repo because Node happily looked up one level and found what it was looking for.

Dave: Yeah.

Chris: Boo!

00:30:00

Dave: We had that. It wasn't in our package but it was in our package.

Chris: Yeah.

Dave: It just was magically included, which is--

Chris: Nope.

Chris: --kind of scary, actually. You know?

Chris: Yeah.

Dave: But yeah. I don't know. Yeah, that part is kind of weird where it's like... I think we have a one-version policy, just like one storybook version.

Chris: Yeah. Yeah. Then it's tricky because something like Prettier, you want shared.

Dave: Mm-hmm.

Chris: You don't... You know. It's not a problem to me to have each package.json in each folder in the mono repo say, "I need Prettier," but it's a little bit of a bummer because it can be one version off - or something. This is on my little to-do here.

We're on vacation. It's one of those things to pluck around at that I kind of like is one of the things in our mono repo is just general packages, like all our shared components are packages.

Dave: Mm-hmm.

Chris: We have a separate one called library. Those are the dumb components that have no queries or anything. The design system kind of ones.

But we have all sorts of different packages for different reasons, and one of those packages could be formatting. Then that has Prettier in it. And all of the other things in your mono repo, you have that as a dependency.

Dave: Mm-hmm. Mm-hmm.

Chris: You know what I mean?

Dave: Yeah.

Chris: I don't know how common that is, but it seems right to me.

Dave: That's what we did for Luro.

Chris: You did?

Dave: We had... Well, I think we had a Luro Prettier - or whatever - package that was basically that, like formatting.

Chris: That's actually kind of stifling because, if you don't do that and you include Prettier in every single project just raw, it means that every project (if you really needed to) you could chuck your own little Prettier RC file in there and configure it slightly differently. That can be nice, right? It gives you a little power to change things. That's not going to happen using it the other way where it's just a dependency.

Dave: Yeah.

Chris: That's, in our case, good. Don't have your own little bespoke configs, please.

Dave: Yeah. We decided on indentation. We're just going to do it this way.

Chris: Yeah.

Dave: There are places where you need to bail or kind of modify, I guess.

Chris: Yeah. Test is classic. You know you might be testing the fact that the code is malformed or whatever.

Dave: If you're in a pure JavaScript project and a TypeScript project, they probably want different things going on.

Chris: Mm-hmm.

Dave: Yeah, I don't know. It can be hell. [Laughter] I feel like repo designer might be a job. Just somebody who can architect the whole thing.

Chris: Yeah.

Dave: Fully understand it, explain it very well what's going on and how to fix this problem, how to make it cool, feel cool, CLIs.

00:33:03

Dave: We saw that. I shared with you that Charm. Was it?

Chris: Yeah!

Dave: Dot SH, I think is what it was. Don't go there. It might install a virus. Let me verify it. Yeah, charm.sh. Not a virus.

Chris: [Laughter]

Dave: Seriously, I'm saying, "Go to SH domains." Don't do that, Dave!

Chris: [Laughter]

Dave: It's just like pretty CLI tools, right? It's fun CLI tools. I just was like, "Oh, that would--" If I had some energy, I would maybe go make the CLI tools a lot more fun using some of these Charm packages. They're all kind of--

Chris: These are amazingly... They're really cool but their popularity is just outstanding to me. It's like this bubble tea package has more stars than React, practically.

[Laughter]

Dave: Yeah, which is--

Chris: People love this thing.

Dave: It's basically like putting a form inside a stinkin' CLI tool. Pretty cool.

Chris: Yeah. They have modals and stuff, right, in CLI? It's wild.

Dave: Pretty cool.

00:34:11

Chris: Pretty cool. You know, speaking of living in VS Code and such, I know not everybody uses it. A lot of people don't. I'm not even going to talk about that specifically, but do you use Copilot? You have it on, right? You're generally a fan, right?

Dave: I have Copilot on. Yeah, yeah. I use it.

Chris: Yeah.

Dave: I am not... It's funny. It sometimes does real bad, but you know. Generally, I appreciate what it's doing. It kind of gets me close.

Chris: Yeah.

Dave: It's kind of like golfing for me. It's kind of like, "Okay, that chipped me pretty close to the hole, so I can finish it from here."

Chris: Yeah.

Dave: I don't know. That's sort of how I'm treating it now.

Chris: Is that where you're at now?

Dave: Yeah.

Chris: I want to take our temperature on it monthly - or something - to see how it's changed.

Dave: Yeah.

Chris: I feel like my opinions on it change a little bit. Not through analysis but just through usage.

Dave: Where are you at? What's your--?

Chris: Well, I don't know. Part of me feels like if I turned it off I wouldn't die. I don't know. It's fine. It's just a little helper machine. As far as the inline completions, this is just weird to me. It might just be a phase I'm in or the type of things that I'm working on. But what I'm using more and more and more is the chat feature of it.

Dave: Oh, really? Okay.

Chris: I don't know. I'm sure raw usage, I'm sure I'm using more inline completions or whatever. But I've been in situations where I need to sort out some problem. I'll highlight a bit of code and then go over the little chat thing, which I think you have to install separately somehow.

Dave: Uh... yeah.

Chris: I think it's--

Dave: It used to be a separate plugin, but I think it's the same thing now.

Chris: Yeah, maybe it's not anymore.

Dave: Yeah.

Chris: Then you go to the little chat box and be like, "On these three lines of code, why is the CI throwing an error that says...?" You know? I need that type of help, and I'm finding that particularly valuable.

Dave: Yeah.

Chris: Weirdly.

Dave: I've been using the "Explain This," you know.

Chris: Yeah.

Dave: Where there's a bug or attempt to fix just because part of it is lazy. Part of it is TypeScript is mad and I don't know how to make it unmad.

Chris: Oh, my god, the TypeScript.

Dave: It's just like, "Tell me what to do. Just make it shut up."

Chris: I love hovering over a red TypeScript thing, scrolling down to the bottom of the tooltip, and saying, "Fix with Copilot."

Dave: Yeah.

Chris: And it's like, bloop.

Dave: It's like, "Yes, I know exactly what it wants."

Chris: And if it fixes it, I don't care because I do feel like TypeScript is in this.... Tools, generally. We should have this. We should hold this strong. I basically got this from Alex, who I work with, who feels this way about tools and brings it up (or at least has many times). "Tools are for you."

Dave: Mm-hmm.

Chris: You use this tool so the tool can help you. I use scissors so I can cut through a piece of paper. But if I woke up and my scissors were like, "Feed me," I'd be like, "No!"

Dave: Yeah.

Chris: You're a weird scissors. I don't--

[Laughter]

Dave: I love this analogy. Yeah, this is really good.

Chris: [Laughter] I just made that up on the fly, but that's the idea. TypeScript is there to help me. But if it's not helping me and it's basically saying, "Feed me."

Dave: Mm-hmm.

Chris: You can just be like, "No! Not feeding you."

Dave: Yeah.

Chris: "Bye!" You know?

Dave: Well, yeah. It's like two things. Like Dennis Nedry from Jurassic Park where he's like, "Ah, ah, ah. You didn't say the right word," or whatever.

Chris: Yeah.

[Laughter]

Dave: I feel like it's that. But then the feed me is so, like, every time I type "is whatever foo instance of," like foo item.

Chris: Yes.

Dave: Gawd! I'm just like, "You--"

Chris: Got to be kidding me! Yeah.

Dave: "--are dumb!" You've got to be kidding me. Because it's just like, what if foo is not even one of those? That doesn't exist on HTML element. You're just like, "Yeah. I put it there."

Chris: Mm-hmm.

Dave: [Laughter] I put it on the element. It has the attribute, dude.

Chris: Right. The argument against it is if you ignore these errors then you're not getting the value from the tool and it might actually be pointing out something that could be legitimately wrong and you're just like - whatever - too dumb to understand what it is.

Dave: Yeah, yeah, yeah.

Chris: I think that's generally not the case. It's generally you're having a fight just because you are. A little arm wrestling with the stupid tool for nothing.

Dave: Yeah. I will say, just in regards to TypeScript, the cool part I'm finding (now that I'm doing it a lot more and I was sort of hesitant about it before) is the whole, like, this could be undefined where it's just like, "Hey, that might... In this situation, that could potentially be undefined." That's actually helpful so you don't end up with, like - whatever - foo is undefined and century later.

Chris: Yeah, those can throw, so not ideal.

Dave: But how do I solve that? Oh, I put a question mark before a dot, a period, and suddenly now it's all... Everyone is happy now. [Laughter]

Chris: Yeah. Or at the very end you do ?? and empty braces.

Dave: Zero, yeah. [Laughter]

Chris: Yeah.

Dave: Empty braces, yeah, yeah.

Chris: [Laughter]

Dave: Or you do... Ginger called it something? A duh dot, which is not the hmm dot but the duh dot where you do the exclamation point to be like--

Chris: Oh, yeah.

Dave: "This will never be empty," or whatever.

Chris: Yeah. Isn't that kind of--? I get squiggles for the exclamation point in our setup for some reason.

Dave: Oh, I don't. I don't. I can do it on every single one. Yeah.

[Laughter]

Chris: Duh dot, that's great.

Dave: Duh dot and hmm dot, that's Ginger. Thank you, Ginger.

00:39:54

Chris: Well, then I was watching YouTube and crap. I can't even remember where I saw it, but somebody was like, "You've got to try Super Maven."

Dave: Hmm...

Chris: I was like, okay, I'm going to check it out. Let's see. Type it in, Super Maven. It was probably Theo, I think. He was like, "Look at how fast it is!" He was in his code editor.

It was like, "Holy crap! Yeah. That looks really good." You know? I've been using Copilot for so long, I am a little interested to see what is it like to use a different one. You know?

Dave: Mm-hmm. Yeah, yeah.

Chris: So, I installed it. It was kind of cool. Their About page is like, "Oh, we're from Tabnine," which I'm like, "Ooh, guarantee there's drama there," because Tabnine still exists. It was like pre-Copilot. You know?

Dave: Okay.

Chris: It was doing this auto-completion well before that but then they must have gotten their lunch eaten. You know? Wouldn't you think? I don't know.

Dave: Yeah.

Chris: I remember talking to them at the time, and I was like, "Well, how does this work with Copilot? I like that." They were like, "They work together." I'm like, pfft. Do they, though?

Dave: Yeah, yeah. I think there's room. There's room for another code editor that we all use.

Chris: Yeah.

Dave: But that room is increasingly a smaller room. Does that make sense? We shift in big migrations to products, and so right now we're in the GitHub VS Code ecosystem.

Chris: Yeah.

Dave: But not saying there can't be or shouldn't be a migration. But it's just sort of like it's hard to be a competitor in this space.

Chris: Oh, I'll say. Yeah. I installed it. I think I even paid for it right off the bat. Whatever. Let's see how good a thing that's not Copilot can be.

Dave: Mm-hmm. Mm-hmm.

Chris: Especially I'm intrigued by the ones that are, like, how much does it learn from what's around it? How much is CodePen looking at my own code base to make these choices? Is that good or bad? I don't know.

Dave: Yeah. Do you feel like it is better or you don't know yet, maybe?

Chris: Well, doesn't it make you think about all these models that can take a million tokens or whatever? You're like, that's a lot more than all my open files. That's for sure.

Dave: Mm-hmm.

Chris: It's probably less than my entire code base, though. I'm not sure about my entire code base getting sent to you anyway. That feels weird.

Dave: Yeah. Well, and I think that's the thing, too. I don't think it actually gets sent, but I think it does sort of say... It generates a fake prompt, like, "Considering all of these files in this repo, now do a response."

Chris: Right.

Dave: Based on how you write things. It doesn't send data. It might send data to OpenAI. I don't know. I don't know that stuff.

Chris: Or is it their own model or what?

Dave: Yeah.

Chris: Or is it a combination of things? I don't actually know the details. But it was okay. My problem with it is it doesn't... Like you were saying, it's hard to compete in this. It literally has a prompt. It's like, "You can't use this with GitHub Copilot." It's one or the other thing is doing code completions, so pick.

Dave: Mm-hmm. Yeah.

Chris: Then if I pick it, I lose chat, so you can't have Copilot chat open and have Super Maven activated. Then that's what killed it.

Dave: Yeah.

Chris: Talk about competition in this space. I was like, "Well, that sucks because I liked the chat. I've been using it a lot lately." Codium is the same kind of way.

Dave: Yeah. Where I think those could be useful is stuff like in a stack blitz or in a CodePen.

Chris: Yeah.

Dave: In an app like an online coding tool where maybe pulling in all of Copilot is maybe prohibitive - or something like that.

Chris: Yeah.

Dave: I don't know. Sort of a licensed partner deals or something like that. But you know. Yeah. I don't know.

I would love an AI to ask me once, like, "Hey, you're writing. Hey, what files should I look at?" That would be cool. Then I could be like, "Yes, look at this package. This is what I write."

"I do the Web component stuff. They're all in the Web components. Find stuff from here."

Chris: Yeah.

Dave: That would be helpful. But you know. No one has ever... No AI has ever asked me that, Chris.

Chris: [Laughter] They don't ask. They ask forgiveness.

Dave: Well, we'll check in, in a couple of months, and see where we're at on Copilot.

Chris: Sure.

Dave: I think we're both pro "Just fix this for me. Stop complaining. Stop the "Feed me." [Laughter] "Feed me.""

00:44:15

Chris: Don't you think they're connected? Not to dwell on this too much longer, but that TypeScript wouldn't be as popular as it is without AI tools. If I had no AI help, I would flippin' hate TypeScript. [Laughter]

Dave: It might. Yeah.

Chris: I think it's... Yeah, I would be a little more helpless with it. I've taken courses on it. We're using it for most of our code base. It's not like I'm a TypeScript idiot. But I definitely don't feel super great at it.

Dave: Yeah...

Chris: I mostly am just like, "I like our components that are already in TypeScript."

Dave: Yeah.

Chris: But when I have to do... We have a general rule. If you're going to touch a component and it's not TypeScript yet, just do it.

Dave: Mm-hmm.

Chris: It's not that much work to get it converted - or whatever. But then I find myself spinning wheels on some dumb thing. Hell is TypeScript in React and with a component that has a forward ref on it. I don't even know how to describe it to you, but whatever Type that ends up is not good.

Dave: Yeah.

[Laughter]

Dave: Yeah, the TypeScript interplay is just like, "I don't... I have no idea."

Chris: This could be anything.

Dave: That could be anything, and I hate that. Yeah. It does seem like... Actually, I think it makes the auto completions better, too. It's sort of a feedback loop in that situation because it knows, "Okay, this is a menu item and it has these properties, so I can just--"

Chris: Yeah. That kicks ass. I'm a big fan. That's great.

Dave: That is actually kind of... And so, it can auto-complete more, is what I think. In some ways, they are sort of symbiotic.

Chris: Right.

Dave: I don't know, though.

00:45:59

Chris: I was surprised. We have, in our React components, everyone for a long time has this thing in React called prop types. I think a lot of frameworks have some aspect like this where you're passing in... This component takes stuff in. Then it's your opportunity to say, "What is that stuff?"

Dave: Mm-hmm.

Chris: Should that thing that's passed in be an object in this particular shape? Should it be an integer? Should it be a bullion? Should it be a string? Which is kind of like TypeScript, right?

The problem is TypeScript happens at compile time. You get the red squiggles in the editor and the auto-complete and all that nice TypeScript stuff. But by the time you're in the browser, TypeScript is gone.

Dave: Mm-hmm. Mm-hmm.

Dave: If data is getting scooched around your app client-side, TypeScript can no longer help you there. But prop types can. Prop types will spit out in the console. They'll be like, "Ooh, this component just got some data that's wrong."

Dave: Yeah, yeah.

Chris: That it wasn't expecting to get. That annoys me because then if you have a component, to get the best of both worlds, you have all your crap is typed and you have prop types on it. It's just a lot of type information in one file.

I was surprised. We just upgraded to React 18. There are all these warnings and stuff, and React 19 is going to just not have prop types. They're just ditching it. It's gone.

Dave: Oh, wow!

Chris: Their advice is, "Use TypeScript." You're like, "Well, that's not client-side then." It's very surprising to me to have them chuck a feature that is not client-side. I don't even like prop types. I'm not even trying to defend them. I think they're obnoxious.

Dave: [Laughter] Yeah.

Chris: But it does do a specific thing.

Dave: Yeah. Yeah, that's a tough one. You could maybe do Zod or something like that, I guess, maybe. But yeah, that's sort of--

Chris: That's true. We do have Zod in there. But we tend to use it for the big-time, like - I don't know - the save of a Pen is coming through and it has a ton of data. Is all that data really formatted exactly right? That'll go through a Zod validation.

Dave: Mm-hmm.

Chris: But just all the stuff doesn't.

Dave: I don't like when advice is like, "Just use TypeScript," or "Just use Cloudflare," or "Just use--"

Chris: Yeah.

Dave: Any time that hits, I get... That's code smell to me that all is not well.

Chris: The "just" word.

Dave: "Just," yeah. Just do that.

00:48:24

Chris: There is a tipping point, too. We're in this position where our whole app isn't 100% TypeScript yet. But by the time it is, I think all of a sudden... It's like an air leak or something. You know? As soon as it hits it, now you're a closed system and the chances of all of your types interacting with each other are now... They're now going to be right. The client-side validation matters less because--

Dave: Yeah, yeah, yeah.

Chris: --every piece of your code base is typed internally. There are no two pieces of it that can communicate with each other that aren't already typed.

Dave: The only thing that can break you is a bad data situation, like somebody--

Chris: Right, third-party stuff or whatever.

Dave: Yeah, yeah, put a string instead of an integer - or something. yeah.

Oh, about GitHub. Primeagen, I don't know if you've watched him at all. Pretty funny.

Chris: He's one of the big YouTubers right now.

Dave: Yeah, one of the big YouTubers. But turned off Copilot for the reason I think his opinion was... This is something I'd like to think about for next time we talk about this.

When you go to a new line and you wait, that pause, if you find yourself pausing every time you try to write code, are you then dependent? Are you getting stupider because you're waiting for the machine to do your job?

That's one thing I kind of... I don't feel like I'm doing that. I think I'm thinking slow enough that it's beating me to the punch maybe. But I don't know. Am I waiting for the pause? Do I have the AI pause?

Chris: That's interesting.

Dave: I'd be curious if I have this. Am I letting some skill I have atrophy is kind of an interesting angle to think about for these tools.

Chris: There's also a new piece of metadata in my brain associated with all this stuff is, like, when an auto-complete goes through and it immediately works. It's almost a little dopamine thing, like, "Oh, God. Thank God. Thank you. You're making me feel smarter. That's good."

Dave: Yeah.

Chris: But it also triggers this little piece of metadata that is like, "Warning," on that particular piece of code, and I always note it in the PR. Not necessarily "I used AI to generate this. Could someone please check it?" Although, I probably should. I do note it as, like, "This particular part needs to be reviewed."

Dave: Yeah, yeah.

Chris: For example, I just augmented an API to take a new optional parameter. When it does that, it follows this slightly forked path of needing to... It uses our ORM slightly differently to get a little slightly different piece of data. I'm like, "That's not Chris's wheelhouse, let's say."

I'm getting better at that stuff, but I'm not your guy at CodePen to for sure do that. I'll write it, but then I'm not just going to hit "merge" on that bad boy.

Dave: Right.

Chris: Whereas if I am adjusting a little CSS stuff, I might even merge it without an approval, Dave. You know?

Dave: Whoa! Hey!

Chris: I know what I'm doing.

Dave: Hey! Whoa!

Chris: [Laughter]

Dave: Yeah. Yeah, that's--

Chris: But the metadata, I don't know what to call it, but it's like, "Warning! Warning! AI-generated."

Dave: Yeah, yeah. You're just... Yeah. Your trust level is low. I think it's about trust.

Chris: Yeah.

Dave: Do I trust what this machine spit out? I think it's fine. It's maybe not early days. Mid-days, mid-cycle days.

Chris: Yeah. Yeah.

Dave: To just be like, "Is that true?"

Chris: It didn't red squiggle, and it seems to do the trick.

Dave: Yeah.

Chris: But still--

00:52:10

Dave: Yeah. Yeah, I've been... Yeah, well, we could talk about it next time, but just been doing a heavy refactor. I'll just delete code and stuff will still work. I'm like, "Do we all feel good about that?" [Laughter] You know? No tests are barfing, so it's just this, like, "What was that code doing there?"

It could be just something as simple as I'm not using this variable anymore. Anyway, it just... Yeah. It's funny how Copilot and all that stuff doesn't really help you be like, "You deleted this. Did you just wreck something, or is there something you're not thinking about?" That's what I wish these tools would do, like, "Hey, you did not consider the use case where somebody has XYZ param set." That would be cool. You know?

Chris: Yeah.

Dave: But anyway, that's what I'm hoping for one day.

00:53:07

Chris: Let's see here. Yeah. One quick addendum thing was that Kevin DeGroote wrote in about the lightboxes and thought that... You know. Remember when we talked about that?

Dave: Mm-hmm.

Chris: It was a bunch of episodes ago. What was the point of a lightbox? Why did they hit the way that they did? Kevin's opinion, which I don't think we mentioned at the time, is that it was kind of pre-SPA. It was pre, like, early days of very interactive JavaScript.

Dave: Mm-hmm. Mm-hmm.

Chris: What made it feel like was that. It was like, "Whoa! The page didn't even reload but an image popped up bigger on the page? What?!"

Dave: Yeah.

Chris: This incredible feeling. It just felt futuristic - or something. The fact that there was no... Stuff like that tended to cause a full-page reload, Kevin wrote here. But this didn't. It just felt cool.

Dave: Yeah. Yeah, I would agree with that. That was a precursor to the SPA days. It just felt like interactivity, baby. You know?

Chris: Yeah.

Dave: That's interactivity, baby!

Chris: Yeah. Now, these days, it turned out to be a pattern that was sometimes useful and sometimes superfluous. [Laughter]

Dave: Yeah.

[Laughter]

Dave: Yeah. I have a love-hate relationship with it right now. I hate it when it's not there, when I see a tiny image and I can't get it big.

Chris: Yeah.

Dave: That frustrates me. Let me have the big image. Or when I do tap a landscape image and it zooms into the lightbox and it's actually smaller than it was before. That gets me, too. That makes me so mad.

Sometimes it's good. It'll let you be a zoomable canvas and stuff like that. But then sometimes that's awful. I don't know. It's a tough pattern, I think, in the mobile era. But when it's missing on a desktop site, that really kind of gets me sometimes, like e-commerce, which I think Kevin mentioned. When it's not on an e-commerce site and I can't see a shoe big - or whatever. I want to see the shoe. I want to see the threading. I want to see. I want to get in there.

Chris: Yeah. There are more questions, but I don't think we have time really.

Dave: We don't have time. We should wrap it up. Yeah, we are... We think we're going to have some episodes but they might be vacation episodes, so we'll see here what happens next week. [Laughter]

Thank you 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 Mastodon. That's the cool one. Then head over to patreon.com/shoptalkshow to join the D-d-d-d-discord.

Chris: Absolutely.

Dave: Chris, do you got anything else you would like to say?

Chris: Just that ShopTalkShow.com.