615: Dave Goes Windows For Real
Dave's got job news to share, as well as insight into the process of what applying for a job in tech is like in 2024. We also talk about styling, scoping, positioning, and floating UI.
Guests
Chris Coyier and Dave Rupert
Time Jump Links
- 00:34 Breaking news!
- 04:44 What's Luro's story?
- 11:49 How was the job search process?
- 18:30 Information asymmetry
- 22:23 Is a 5 month process realistic for a job search?
- 25:03 What did you worry about in the process?
- 30:55 Writing components for Fluent
- 34:55 Icons in 2024
- 38:35 Will Dave's opinions on web dev change?
- 42:39 Styling and scoping
- 49:01 Scope is based on it's position in the DOM
- 50:16 Popover
- 57:53 Floating UI
Episode Sponsors 🧡
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 office--Rupert. And with me is Chris--also in the office--Coyier. I'm actually in my home office. Anyway... Hi, Chris. How are you?
Chris Coyier: You're very serious new office?
Dave: Oh, yes. I'm--
Chris: Business responsibilities and stuff.
Dave: Doing business. Ha-ha-ha, business.
Chris: Yeah. [Laughter] I think what Dave is trying to say is that he's got a new role in the world, which is fairly big news. I consider it big news, especially since, behind the scenes, I've been kind of attempting to follow your personal saga through this.
Perhaps long-time listeners of the show will remember when Dave went Windows for literally years. Right? I think.
Dave: Yeah.
Chris: I can't remember when you... Yeah, I think you still have a Windows machine.
Dave: Five years, I think.
Chris: Yeah.
Dave: Still have a PC I built. Yeah.
Chris: Yeah, was kind of a primary Windows guy. It was partially due to this show being a little Mac one-sided because that's how I rolled, and we didn't want that for the show, necessarily. But I'm just a whiney boy and didn't want to switch, but Dave did. But also, you were the person to do it because you were more willing to, liked the idea a little more, and (at the time) for Paravel were literally doing work for Microsoft, so it probably didn't hurt that you were onboard a little bit.
Dave: Yeah. I think, at the time, we were not explicitly working with Microsoft. It was an in-between time.
Chris: Oh...
Dave: But then we had worked with them in 2010 to 2012 - or something - or 2013, and then 2018 to '19 - or something. Yeah.
Chris: Oh, there are a couple of different spurts in there?
Dave: Yeah. Yeah.
Chris: You shot the gap in the middle? Yeah, I know. It probably wasn't related, but in my mind, it's just kind of like, "Well, if that's a major client," not to mention kind of a decent feather in Paravel's cap at the time.
Dave: For sure. For sure.
Chris: it doesn't hurt to use their stuff. And so, it's full circle. You're there. Now not only are you using Windows but are an employee of Microsoft.
Dave: That's right. The big news is I am now an employee at Microsoft.
Chris: Whoa!
Dave: And that is wild.
Chris: Huge!
Dave: Yeah, I mean it's been a heck of a journey, but you know. Even just piecing together my whole career, like the arc, it's like I've worked with Microsoft and then did the whole Windows stunt with Ray Bingo. Yeah, I've worked in and out of different teams and different projects and different... Made a project for the Microsoft Garage that never got released - and all this stuff.
It's just been a very interesting kind of world. And so, yeah, I just kind of found myself in a position where I needed to find a real job, a job... This is... Honestly, it's my first job in my adult life since coming back from Japan, basically.
Chris: Wow!
Dave: I guess, since 2006 - or something.
Chris: Just think about that! That's wild!
Dave: I've been working for myself for the whole time.
Chris: Yeah. You've been the boss.
Dave: This is the first time I'm not working for myself. It's an interesting world.
Chris: Right. Yeah, type into your computer slowly, "The biggest companies in the world," guess what number one is by Market Cap is--
Dave: Dave Rupert, LLC.
Chris: Microsoft! [Laughter] Yeah, so you went big for your first cast of the fishing pole - or whatever.
Dave: Well, I think it's just... You know I'm lucky. But I also have experience there, so that's... you know, not that. But there's sort of a Luro story as well. But I'd seen a tweet from Alex Russel that was basically like, "Hey, we--" or I keep telling people I need people who do good, quality, front-end engineering and stuff like that. And so, I was like, "Well, Alex and I--"
Chris: Really? A tweet caught your eye, and you're like, "I'm going to remember that."
Dave: Well, yeah. Alex and I, I think, have a similar ethos in the Web development world.
Chris: Mm-hmm.
Dave: I just kind of followed up with him on that, and I was talking to people, and then I was waiting. And then I was waiting more.
Chris: [Laughter]
Dave: Then I was waiting a very long time. And then, yeah, eventually started.
Chris: Then got the offer; got through it. We should go through all of it. But it's kind of curious why you were looking at all.
You saw the tweet. That can stick in your mind. Those things tend to stick in my mind, too. But it's like you have this thing.
We talked about Luro on this show many, many times. It's not like it's gone, right?
Dave: No. Yeah.
Chris: What's the Luro story?
Dave: Luro still exists, and I think the story is ultimately, we ran out of money to fund future development. We have customers, and they're paying money, but I say future development but to sustain a whole team working on it all at once.
Chris: Right.
Dave: I think we had to kind of figure out what's going on. Then rubber meets the road. I have to pay a mortgage. I have to figure out where money comes from.
But we worked very hard and worked... talked to investors. We had a great suite of investors at Paravel, very wonderful investors and very encouraging, but we tried to get another round of investment, but the market is just so icy right now, so tough that it was very difficult to raise money. And so, we probably talked to 70-something different investment--
Chris: Oh, my gosh. Seriously?!
Dave: Yep. It was like 70 no's, so that's a hard one. It is what it is. I think the climate is just bad. People just want a sure thing, or they want AI, which is kind of weird that they're like either the sure thing or the fairy dust thing.
Chris: Extremely risky thing? Yeah.
Dave: Yeah, but then we're a good team. I could probably tell a bunch of stories from investment land, but it's just - I don't know. First of all, [laughter] a lot of investors are very cool people, so I think that's a lesson I learned. You get all these horror stories or hear all these billionaires in monocles.
Chris: They're just - whatever - capitalist pigs or whatever?
Dave: Yeah. Yeah.
Chris: Yeah.
Dave: But talked to some very wonderful people all over the place. I think I draw a line. Well, not exactly. But there's also a difference between an investor who has product experience and an investor who is just out of business school.
Chris: Hmm...
Dave: And so, there are different levels of investors.
Chris: They ask different questions?
Dave: Yeah, just better questions or better... you know. Or understand what you're doing in the context of Luro, which is a product, a product development tool. They just understand the problem set a little more.
Chris: Right.
Dave: Anyway, it's just not a uniform class of people.
Chris: But a lot of no's. Even the nice ones are like, "I just don't--" or it's not... It wasn't even personal, probably, right? Not that it ever is.
Dave: No. Yeah.
Chris: But it's that nobody is getting checks right now, right?
Dave: Yeah and so I think that's the thing. I think we kind of left the door open to see if the market would thaw, and still, the door is open. Luro still works. It's still good software. I would still recommend it. I will still probably use it in future projects. But it's just kind of like we're unable to sustain what we were doing on it.
Chris: It feels like nobody ever talks about that kind of thing but I like that idea that a piece of software can just be there.
Dave: Just humming and working. Yeah. We put a lot of effort into it. Once we sort of... It's pretty simple calculus. You look at the bank account, and you look at... [laughter] you know, who is sitting around you. You just have to figure out, "Okay, how are we going to get through this?"
When we sort of saw what's going to happen in the future, predicting the future--
Chris: Yeah, you could do a little light projection.
Dave: Yeah. We took a month or something, six weeks, to really fortify the code base and really make sure it works with very little human involvement, and everything is humming. Very few errors getting chucked out. Mostly, it's just some weird exception like somebody entered something wrong or something.
Chris: Yeah.
Dave: Or has a URL that has a virus or something like that. [Laughter] Yeah, something weird.
Chris: Yeah, fair enough. For the moment, life has twists and turns for us yet. Luro is just sitting there able to be used but not actively developed at the moment while you can find your next chapter. Then it's not like you're just... I mean I don't know how much you want to go into it, but you looked around at other stuff, too, presumably.
Dave: Yeah. I applied for a few jobs and, man, some of it... you know. I should say, from the time my last paycheck to now has been about five months, so put that in your brain. That's maybe been the coolest part about it.
I'll come back to your question.
Chris: Mm-hmm.
Dave: What other jobs or whatever, but I think I get into a place where I work to eat. That's what my brain says.
Chris: Mm-hmm.
Dave: "If you're not working, you're dying," is kind of like what my brain processes. You know?
Chris: That's a psychological Rupert thing.
Dave: Yeah, you've got to work hard and make money, and then that's how your family lives. That is how my family.
Chris: Yeah.
Dave: My wife, love her. She works part-time at the school. Makes like $700 or something. [Laughter] You know.
Chris: Yeah.
Dave: We're not raking it in from the public education sphere. So, I end up being the breadwinner in the family, and so that puts a lot of responsibly or whatever. But just kind of breaking that psychological barrier of, like, I don't have to hustle all the time. That was a very big one.
Chris: You think you're over it?
Dave: Not over it, but--
Chris: Or at least the fifth month was easier than the first month - or something?
Dave: Sort of. Well, the first month, I was like, "I need a break," because, in a startup--
Chris: Yeah.
Dave: I was in full workaholism mode. You know what I mean?
Chris: Mm-hmm.
Dave: Just full, like just unhealthy. The next phase of it is really just like... Now that I've been through it, I can say, "Oh, that happened. I survived." If in the future - or whatever - I lose my job - or whatever - it's like, "Well, I survived. I could get through that."
It's not like a super scary situation, if that makes sense, to be unemployed for a very long time. [Laughter] In my opinion.
Chris: Yeah.
Dave: I don't know. When you go from never to five months, it's a long time.
Chris: Right. You took your sweet time a little bit and did some... I've heard this from other people searching (in the Discord), too, that if you can take a minute to really think about yourself and what you want to do, that's better than just being like, "Anything! Give me it!"
Although, that's okay, too, if you happen to be at that spot. I remember a few episodes back; we had the person who was looking was offered a Drupel job.
Dave: Yeah.
Chris: Thinking back, that's probably why you were like, "You should take that job."
Dave: Just take it. Yeah.
Chris: Yeah. [Laughter]
Dave: No, I mean that's... I don't know. Listeners probably picked up on it, but I think this year, two years in tech is some of the lowest it's ever been. I think it's just this weird situation where any job, any movement you can get, you should take, any forward movement. I think it's just hard.
Chris: Right. What feels different to me is that, yeah, it's not a year. It's been multiple years. And it's not just that there's been a bunch of layoffs and it's hard to get work. That's there, too. But people aren't writing VC checks. We just covered that.
I'll personally tell you that the advertising industry has been nuclearized. It's a disaster.
Dave: I've heard that, too. Yeah.
Chris: What's going well? I guess an AI startup is maybe happening at the moment. But you're like, a lot of stuff is in the pooper, and it tends to bounce back.
You've made the point that, historically, everything always has. But sometimes history is made here. I don't know. It doesn't feel like it's coming back yet.
Dave: Yeah.
Chris: Yeah, we're kind of in this position where, like, "You've got a good job. You should hang onto that." [Laughter]
Dave: You should.
Chris: Yeah.
Dave: You should take jobs that come your way - and all that. Yeah, so I applied to a few places. It's weird to be applying for a job. Writing a resume for the first time in my adult life or, like... Yeah, maybe the first time in my adult life, writing a resume.
Chris: Yeah.
Dave: It's just like, "Geesh."
Chris: Was that part of the process? You straight up had to send in a resume?
Dave: Resumes, cover letters, all that stuff.
Chris: Yeah.
Dave: I made a little Notion board to manage all this crap and all the stuff you need to do there. Did all that.
Chris: Mm-hmm.
Dave: It was good. I think it worked. Obviously, it was successful at a point. But I think mostly it was just that I'm pretty well-known. I took it pretty slow. Nothing really public just because I'm - whatever. You know.
Chris: Yeah. It's one thing to say that because maybe it helps you once you have the interview or something. But you didn't say anything.
Dave: No.
Chris: You didn't use this show. You didn't use your blog. You didn't use social media. Nothing.
Dave: Yeah, so it was mostly just relationships or not in a nepotism way, but just like, "Hey, do you know of anything in your organization?" Then I apply - or whatever. Maybe get a referral or something like that.
Dave: But I did my first whiteboard code interview and fricken' failed big-time, Chris. It was fricken' humiliating. Yeah.
Chris: A whiteboard, huh? Was it a bubble sort-y kind of thing, or what was--?
Dave: No, it was literally just like turn this array into a map, like a hash map. Like this list of transactions and turn it into--
Chris: Hash map or transactions.
Dave: --customer, how much average spend by customer - something like that. Fricken' failed it, Chris. Big time.
Chris: Yeah.
Dave: It was--
Chris: Did you just have to throw your arms up and be like, "I don't know, actually"?
Dave: Yeah. It was comically bad. It was like I'm just apologizing, like, "Oh, sorry. This is so bad. Uh... Sorry." [Laughter]
Chris: Yeah.
Dave: It was just so--
Chris: Was it a literal whiteboard? Were you in person?
Dave: No, code whiteboard, like coding - whatever.
Chris: Yeah.
Dave: And so, you know. What's funny is I know how to do it now. [Laughter] I've been through--
Chris: Oh, is that part of your personality? Did you go home and immediately solve it?
Dave: Well, no. Now that I've been... Yeah, it's like now that I've been through a traumatic experience, I've figured out how that particular ask works. But I think, in the moment, I was unable to wrangle my brain to my fingers.
Chris: Oh, my god. Yeah, I do.
Dave: I almost attribute it to either some ADHD - or whatever. Shout out to Chris who's talking about that. Or maybe even like I had too much caffeine and my brain is just racing. Adrenaline is coursing through my brain.
I think it was just like I was chemically messed up. Not like drugs. Caffeine, I guess, is a drug. But I just was like--
Chris: Yeah, brain chemistry.
Dave: --hyped, and I couldn't make it work. I couldn't process the request. That's also this weird thing.
Seventeen years, Chris. I don't code in front of people. I work in my little office by myself.
Chris: Right.
Dave: So, like, it's really different for me to code in front of somebody.
Chris: Yeah, doesn't it depend on the day? I mean I can imagine a supposedly easy one. Remember, this was all this hot drama years back was the fizz buzz thing.
Dave: Fizz buzz, yeah. Yeah.
Chris: Yeah. I could imagine having a day (yesterday being one of them). I just was off. I almost put this whole week in a bucket for me. I am not at my best this week. Not because of anything other than - I don't know - it's cold or something, or I haven't been sleeping as good. I don't know what it is, but if all of a sudden, I hadn't thought about any of this crap in a long time, and you're like, "Solve fizz buzz for me immediately on a whiteboard," I can very sympathize with just being able to be like, "Uh..." just freezing.
Dave: Freezing.
Chris: My brain can probably do this, but not right now. I cannot do it right now.
Dave: It was like somebody uppercutted my brain. [Laughter] And I'm just like, "Whoa! Um... It's not happening." You know?
Chris: That has to be representative of you? You have to not get the job because that happened.
Dave: Yeah.
Chris: Flip a bucket.
Dave: Flip a bucket is right.
Chris: That sucks.
Dave: And then I had other interviews, too, that went well. I had this really great interview. I won't name companies just to keep their privacy or whatever. It goes great, and I get told by a hiring manager, "We want to hire you, buddy." I'm like, "Ah-ha!" Telling my wife, "Hey, I got a big ol' winky thumbs up."
Then an hour later, I get a rejection notice in my email. It's like, "What?!" What do I do with this information?
Chris: Rollercoaster!
Dave: Rollercoaster, dude. That was my February. Then I'm interviewing. I talked to somebody in December. Then I'm interviewing... or applied in January when it finally posts. Then I interview in February. I have to... Every job interview, Chris, sucks. The tech is broken. Sorry. [Laughter]
Chris: Yeah.
Dave: But you know, I'm spending--
Chris: Well, now you're feeling it. I mean I feel like we could have said that before when we were both just doing our own thing. It just kind of felt like that. But now you've lived it.
Dave: I've lived it. Yeah, I mean it's this weird... I call it information asymmetry, which is how used car dealers steal your money. [Laughter]
They have all the information. They know what questions they're going to ask you. But you have to go into the interview. Any question in the world, you can ask me. Then there's this little asterisk, like, never repeat yourself between interviews.
And so, I'm doing these six, seven interview loops, like seven interviews, seven hours of interviewing. I take an eight-hour take-home code test.
Chris: Oh... really?!
Dave: It's like 15 hours per interview. Granted, these are for six-figure jobs. That's all awesome. I think you do have to put some effort into getting a job. These things don't just fall out of the sky. You shouldn't just... You're lucky if you get one is sort of my attitude, and you have to work hard to get one, right?
But this idea you can do 15 hours of work and then they're like, "No thanks. We don't provide feedback." You're like, "Oh, man. What did I do wrong?" And they can't even tell you what you did wrong. That information asymmetry just drives me wild because I spent 15 hours on this and there's no piece of data I can get better at. Even if you ask, it's like "Corporate policy is we don't talk about this."
Chris: Yeah.
Dave: That's my key takeaway from all of this is if I ever do the hiring thing again, it's just like if you interview somebody and you take hours and hours of their time, you should provide an equal amount of effort -- or maybe not equal but some amount of effort -- to give them feedback in the process. But it's kind of a buyer's market right now, right?
Chris: Right.
Dave: Or a seller's market, I guess. I don't know.
Chris: It reminds me of reviewing... Not that I'm... I would never argue the other way because it needs to be more human in that way. But there is just time and pressure kind of thing that happens.
If people would submit an article to CSS-Tricks - or something - the perfectly correct thing to do when I need to say no because it's not up to snuff... you know it was tempted to just be like, "No thanks on your article. It doesn't meet some need." I would write something really small.
Dave: Mm-hmm.
Chris: It maybe even would be smaller than that. Just like a "no thanks" kind of thing. But that's not useful to them.
Dave: No. Yeah, yeah.
Chris: What's much more useful to them is a detailed review of why this is not up to snuff. It felt harder to do.
It would be easy, I think, for me to do it in an interview situation where I've looked at the person, I know the situation they're in, and would form some kind of human connection. But it was hard to even tell that it was not AI. Not that that was a big thing in the CSS-Tricks days or anything. But it was hard to sometimes tell that you're even a person at all.
Dave: Mm-hmm.
Chris: I'm like, I cannot sit and spend my Sunday writing detailed feedback for somebody that I haven't even looked in the eyes. Whatever.
Dave: Yeah.
Chris: That was a little aside kind of thing. But do you feel like this was a five-month process? That if somebody is your position, you should probably pencil that in as being a pretty reasonable amount of time?
Dave: Yeah. I think some companies move slower than others. To be honest, that first month was really just me. It was like December. I had COVID. I had... You know? [Laughter]
Chris: Yeah.
Dave: Any minute I'm not doing something, I'm Christmas shopping.
Chris: Yeah.
Dave: I probably would wipe December off as like a hangover. Probably from January maybe to May.
Chris: Four months-ish.
Dave: Four months-ish.
Chris: Mm-hmm.
Dave: Three, four months is probably what you need to expect, especially, I think, at the senior level.
Chris: Partially is just waiting to hear back at all. Some of it is you've got to go through an interview process, which is not just... probably not just one interview, right?
Dave: Right.
Chris: It's multiple different styles, that kind of thing, and those take time because they're not probably back-to-back.
Dave: Well, and they probably have multiple people that they're--
Chris: Right.
Dave: --trying to get in the system all on the same cohort, kind of.
Chris: Right, because I don't want to say yes to you even though that I liked you because, next week, I have another one.
Dave: Right.
Chris: That week, that first person has just got to wait. That's the way it is.
Dave: Mm-hmm.
Chris: Then they have to decide. It's their timeline, not yours. There's some more asymmetry, I guess. Then you hear back, I guess. Then, in your case, where I kind of know what happened to you, that it's not like you get a yes and then a name badge on the same day. [Laughter] Right? After your yes, it can be a hot while.
Dave: It can be a while. There's paperwork, background checks, all that stuff that needs to be filled out and get secured. All that stuff takes time and adds up. Any sort of slip in the system or form filled out wrong can be a whole reset or whatever.
Chris: Hmm...
Dave: Man, that stuff is just painfully... is full pain, so you know. It was almost like, "Should I be doing DoorDash?" I just really was like, "Is that what I should be doing with my time?" I don't know. I probably should have, to be honest. I probably should have just hopped in the truck and delivered some food just to make some cash.
But I don't know. Again, my thing was just kind of... I'd been working 17 years straight, so I just kind of needed a break. It wasn't quite the sabbatical I hoped for, but it was pretty close.
Chris: Yeah. I think people will be really interested to know. I think there's an element of worry that comes, too, when somebody is in this situation that the process is going to be so rough. There are rejections involved. Nobody likes that. There's being tested, which, who likes a test?
There are things that they're going to worry about, plus they're being judged on things they don't even know, like how personable are you, and stuff - that kind of thing.
Dave: Yeah.
Chris: Is there anything that people worry about too much or too little?
Dave: No, I mean I think it's all bad. No. [Laughter]
[Laughter]
Dave: No. I don't know. I'm a firm believer, like, you know what you know. Right? You know what you know.
I took an algorithms course. I did primagens one on Frontend Masters. Shout out to Frontend Masters.
Chris: Yeah.
Dave: No, just because I was like I could learn these and piece these together, and I know these (to some degree). But I work better... I think I've said it before in an ad. I work better when I have a start and an end, and I learn a whole thing at one time.
Chris: Okay.
Dave: So, I feel good. Thankfully, there were no leak code zingers exactly in my thing, but it was more practical than that. But it was also just like, "Oh, shoot. You want to--" Well, again, the information asymmetry. You have to be prepared in case they show up and ask that question, and those are hard problems. You know what I mean?
Chris: Yeah.
Dave: You have to work on yourself. That's what I would say. It's kind of like when you tell single people, "You've got to work on yourself first." [Laughter]
Chris: Mm-hmm.
Dave: That's the stuff I did, just kind of refreshing stuff.
Chris: You did some prep. You didn't just sit around biting your fingernails and sending in resumes.
Dave: Yeah. I took a TypeScript course, too, just because I assume I'm going to be using TypeScript and stuff like that.
Chris: Yeah.
Dave: Can't say I love it yet, but anyway.
[Laughter]
Chris: Yeah.
Dave: Even still.
Chris: Yeah. I don't think any job is going to change your opinions at this point.
Dave: Right.
Chris: I'm afraid we're too old, Dave.
Dave: Yeah. I posted a post. It was like, "TypeScript is just baby unit tests," and I'll stand by that just because it's--
Chris: [Laughter]
Dave: I'm just going to do a unit test on this variable and make sure it's a number.
[Laughter]
Chris: I like that, baby unit test.
Dave: Oh, are you an object with these properties? Yes, you are.
Chris: Hmm...
Dave: Verified. So, anyway... [Laughter]
Chris: I've been writing some TypeScript lately, too. In our React code base, it a little bit bugs me that we use prop types as well.
Dave: Hmm... Yeah.
Chris: We use prop types because they're runtime.
Dave: Yeah.
Chris: When we're in development, they all get scrubbed out for production. But TypeScript isn't runtime. It's compile time only.
Dave: Yeah, right.
Chris: If you have data getting squished around from outside TypeScript sources, potentially. I think once you're 100% TypeScript through and through, maybe even on your server, too, you'd have to worry about runtime a little less.
Dave: Sure.
Chris: Because you're like, "Well, it came from something else that is also in my codebase."
Dave: Yeah.
Chris: If you're converting, like we're probably - I don't know - somewhere around 50% TypeScript--
Dave: Yeah.
Chris: --that the stuff that isn't TypeScript then can potentially provide a value. We still need the prop types, so now, every time you need to adjust what one component takes as props, you need to go in and add it to prop types and then adjust the types, too. You're just like, "Ah, just suck it!" [Laughter]
Dave: That's where the unit test thing comes in because that's what happens in unit tests.
Chris: Yeah.
Dave: When you overwrite tests, you lock the application in a state, right?
Chris: Yeah.
Dave: You've said, "It must have these five valid types," or "Accept these five valid parameters, and everything else is a lie." That's basically what you're doing with types.
Chris: You can add that to the pile, too. That's a great thing to mention. I have a PR sitting there right now that I worked on. It's failing some unit test. I'm like, "I don't even know."
Dave: Because something else when in, in between the time.
Chris: Yeah.
Dave: Yeah.
Chris: And it doesn't even feel like the kind of stuff that a unit test is even looking for. It's mostly UI stuff.
Dave: Yeah.
Chris: We don't do a lot of component testing kind of thing, so it's not that.
Dave: Yeah.
Chris: It's like, "What is it?" Oh, I see. It's some weird data thing with types.
Dave: I did an event listener. It's in a Web component. This dot add event listener shake, you know, because I was doing a little screen shake thing.
Chris: Yeah. Yeah.
Dave: I stole Adam Argyle's thing. TypeScript is like, "Dude, no way. Not real. This is not HTML mouse button event at all." I'm like, "No, I made it up." They're like, "Yeah! We don't know what to do."
I have to declare global and add in my own... make up my own [laughter] event, and it's just like, "Okay, well..." I kind of like that explicit contract of, like, "Here are things I allow or expect. Handle it like this." But I'm also just like, "Add event listener shake is something you can do in JavaScript. That's legal. TypeScript is making it illegal, but it's fine. That's something we can do."
Chris: Right.
Dave: JavaScript's job is just to ignore it. Not get mad but just to ignore.
Chris: Where's the grain, people?
Dave: Find the grain. Cut the... Don't hack through the....
Chris: So, to be clear, you haven't even started, really, yet, right?
Dave: Technically, when we're recording this, no. It'll be the first week - or whatever - when this comes out, so after my first week.
I don't know anything about the job. The only thing I know is I'm going to be writing Web components for the Fluent design team.
Chris: Seems huge. I don't know. Pretty cool, really.
Dave: Yeah.
Chris: It's like the material design - or whatever. You know? It's like Bootstrap, right? It's for the world, right? If you want to use Fluent, people can just do that.
Dave: Yeah, anyone can use Fluent. They kind of advertise it, like, "Hey, if you're going to ... the Windows app, use this sort of design language, and here are some repos that you can use."
Chris: So, it's a lot like material design. It's going to look like part of that ecosystem. You don't have to use it for that.
Dave: Perhaps, yeah. I don't... What I do know is there is a Fluent already, and then there are these fast components that Microsoft has.
Chris: Okay.
Dave: Or a flavor of that in Web components. But there's a React Fluent library, which I think Micah Godbolt--
Chris: Oh, really?
Dave: Yeah.
Chris: It probably helps adoption, frankly, to have a React version.
Dave: Oh, yeah. Well, and then everyone does that. [Laughter]
Chris: Yeah.
Dave: There's probably a lot of people internally using it. But I think there's also Angular teams and stuff like that inside Microsoft. It's a big company, so a lot of teams.
Chris: For sure.
Dave: But anyway, if you need to roll out a language and not depend on everyone coming up with their own thing, their own interpretation of that flavor, I think you need a base set of components to shop around. That's all I know. But again, it's been a long process, so I don't know if the needs have changed or what's changed.
Chris: Yeah.
Dave: I could be writing React. I don't know. [Laughter]
Chris: It looks like the Web components one needs the most help, sort of, if you go look around at the Fluent UI's website. It's like you open the React world and it's like, "Look at... Wow. You've got all kinds of crap in here." You know? Ready to go, baby.
Then you open the Web components one and it's like, "Go elsewhere."
Dave: A tumbleweed goes across the screen? [Laughter]
Chris: To me, that has the most potential, especially for someone on CodePen. I'm like, "Can I just do import picker from Fluent?"
Dave: Mm-hmm.
Chris: Then have a thing? I know that thing, I think, appeals to you, that kind of like, "I just want to use little one-off stuff," because Web components is good at that.
Dave: Yeah.
Chris: Well, you might have a little influence over that. We'll see.
Dave: Yeah. No, I mean I'm excited to see, dig in and see what the problem set fully is. I've worked with Microsoft in the past, so I understand it as a company.
Chris: Right.
Dave: I kind of understand where they're going and what they want to do. I think it's mostly just like that's familiar, and that was kind of important to me in terms of for my first job, real job, I guess. [Laughter] Go somewhere I'm at least familiar with versus an unknown situation.
Chris: Yeah. Yeah, I see, so it feels a little homey because you know how it operates, generally.
Dave: Full disclaimer: All opinions on here are my own. Nothing like--
Chris: Oh, yeah.
Dave: I just want to get that out there.
Chris: You haven't even started.
Dave: Well, yeah, but all to say I have no idea what I can and can't talk about. I'm just going to assume it's nothing.
Chris: Right.
[Laughter]
Dave: Then... So--
Chris: Yeah.
Dave: But you know. Basically, just kind of like I don't know much about anything right now.
Chris: No, I'm sure you don't.
Dave: Just got my computer set up.
Chris: Yeah. I mean I guess it would be a surprise if it's not working on Fluent and not working on Web components. But hey, you never know. You know?
Dave: Well, you know. Yeah. They like to do reorgs every once in a while. [Laughter]
Chris: Yeah. Yeah. I suppose you can watch with extra keen interest what other people are doing.
I was surprised to see that Web Awesome - or whatever. Did you follow that?
Dave: Yeah.
Chris: Everybody, I feel like, knows Font Awesome had this tremendous success, really. They had a huge kick starter. They were kind of funny and relatable and cool.
Dave: Mm-hmm.
Chris: They made icon fonts cool. To their credit, they had SVG stuff, too. For a long time, I was kind of like the "I hate icon fonts" guy, I feel like.
[Laughter]
Chris: Which I still kind of am, so I was a little--
Dave: You wrote a whole book about it.
Chris: Yeah, I wasn't particularly pleased with, like, let's have more icon fonts. There are demonstratable, big problems with this and better solutions.
Dave: [Laughter]
Chris: I don't get it. I thought nerds liked better things. [Laughter]
Dave: Next, anti-aliasing is not what we want for vector graphics.
[Laughter]
Chris: Oh, just one of like ten things that can go wrong. You know?
Dave: Yeah.
Chris: [Laughter] Don't you remember the Etsy horse? That's hilarious.
Dave: Yeah. ***horse.
Chris: Yeah. [Laughter] That was just one thing. Anyway, they were ultimately kind of an endearing company, I think. They produced good stuff and they made money doing it, which I kind of admired they do that. That's the world we live in. If you do a bunch of work, it sure is nice to have some financial success as you're doing it. Never been afraid to say that.
Dave: Well, I will say I always like to find some icons. Free icons are the best icons.
Chris: Yeah.
Dave: But you end up on some really scummy sites, like really just ad-heavy, just really weird with weird licensing, like, "Oh, you got to put this person's name on the top of the website if you use this icon," or whatever. You know? So, I think I like Font Awesome's deal where it's like, "Just pay us. We have icons." You know? Good icons and filled-in ones, outlined ones, all that.
Chris: Yeah. Oh, man. Now I feel... Oh, here it is, icones.js.org. Look at that, icones.js.org.
Dave: Whoa!
Chris: It's like one of these... It's just like, "Here are a bunch of icons." But here are a lot of icons. [Laughter]
Dave: This is every icon ever.
Chris: Just millions of icons.
Dave: Yeah.
Chris: In sets, and then you just click on it. Then at the bottom, it's like, "How do you want it?" Do you want to copy it to your clipboard as SVG? How about as a symbol? How about as a PNG in case you don't even got time for SVG right now? How about JSX? How about every framework you've ever heard of? It's like, "Holy crap!"
Dave: Wow.
Chris: [Laughter] I feel like they really... This is like the most modern "just get an icon or set of icons" thing I've seen in a while.
Dave: I'm into it. I asked on the Discord, and I got... There's a plugin for Raycast where I can just type "icon." It's called Iconify on Raycast.
Chris: Oh, nice.
Dave: You can just get icons from a bunch of different libraries. I wonder if it's backed by this same thing because it's a bunch of libraries.
Chris: Maybe.
Dave: But it's harder to browse than this website. But you can just basically type - whatever - accessibility and get 100 different wheelchair dudes.
Chris: That's nice.
Dave: Yeah.
Chris: I like that they're in sets here because ... noun project guy, and they're great, too. But don't do as good a job, I don't think, as getting into sets because then the temptation, as you grow your set of icons, is just to pick one that you like and toss it in the old icons folder.
Dave: Mm-hmm.
Chris: Which, over time, makes them a little less cohesive perhaps.
Dave: For sure. For sure. For sure.
Chris: Yeah. Anyway, that's a cool one. I'm interested to see if your opinions change.
Dave: Ooh, yeah.
Chris: I don't feel like I keep track of your full set of opinions. But for example, I was pretty heavy for a minute on, like, "Why can't I reach into the Shadow DOM and style stuff?" You know? My whole, like, "I know what I'm doing, selector," kind of thing.
Dave: Yep.
Chris: There was plenty of pushback I ready about that being, like, there's kind of been an implicit contract for a long time that you can't do that. If you're going to change that, you're changing it for people who have produced Web components in a very serious manner, potentially, that are going to throw their hands up and be like, "You can't. I incapsulated this for a reason."
Dave: Well, I'll have you know, Christopher. [Laughter]
Chris: Yeah?
Dave: You have a GitHub issue, two Git Hub issues, about "I know what I'm doing, selector."
Chris: Yeah?
Dave: They're about 700 messages long, or at least 200 or 300 each.
Chris: [Laughter]
Dave: So, the open styleable question is hot, and I think it's in the next - whatever - CSS face-to-face - or whatever one of those things they do.
Chris: Yeah, but I wouldn't have known that if not for some of those threads in some of that Discord. Not that I didn't know it, but I kind of didn't care.
Dave: Mm-hmm.
Chris: I'm like, "I don't know. It's a new selector, so it doesn't feel like it's invalidating the past when it's additive." But it kind of does. It kind of breaks that contract.
I heard it argued eloquently enough that it changed my mind a little bit to the point where I could see, like, "No, we actually can't change this unless the author opts into a way," like code has to be written that says, "I will allow this Shadow DOM to be penetrated." That kind of thing.
But I wonder if when you start working on a very serious Web component library if your opinions will be like, "We need to accommodate the needs of very serious organizations."
Dave: I think I'm on team Chris.
Chris: [Laughter]
Dave: Even this week. I'm building a little game. You know?
Chris: Yeah.
Dave: I'm doing... I want that Flexbox thing with a sticky head at the top and Flexbox goes... the second one fills up the rest of the viewport and scrolls if it needs to. You know what I mean?
Chris: Sure. Yeah.
Dave: So, I can get the scroll snap points on the scrolly div and not the sticky part.
Chris: Wow! Fancy.
Dave: I'm doing all this in Web components. You can think of it as, like, the scene, the header, and the body or the content. I'm doing this for my little game.
You know that Flexbox soup you have to pass, like grow one, flex-grow, display flex column, and then flex grow one, and align self-start, and align stretch, and all that stuff?
Chris: Yep.
Dave: If you don't control that DOM, if you don't control that component, it's fully third-party, you need a way to reach in from the top. I'm just... Sometimes you have to apply Flexbox soup to something and we need a way to do it. I don't know how you could do it without it. You know what I mean?
Chris: Yeah.
Dave: Or set height 100 SVH - or whatever. You can't do that if you don't own the Web component.
Chris: Right. I want it on a personal level but I also think it's kind of a marketing thing. And I think there are people that avoid them because they're like, "Oh, I have to totally fricken' change how I approach styling just because I want to use these Web components?"
Dave: Mm-hmm.
Chris: There's no way in? Really? Nothing? I have to learn the internal JavaScript and do it in an adopted stylesheet?
No. I just want to use CSS. That's the language of styling websites, and you're telling me I can't? Okay. Well, that sucks. No thanks.
Dave: Yeah. I'll see. It'll be interesting to see, working in different situations, what I feel over time.
Chris: Yeah.
Dave: I just think the way CSS evolves, you're going to have inconsistent interfaces. Does that make sense?
Here's a great example: light-dark. Right? Our new friend light-dark.
Chris: Light-dark.
Dave: Light-dark, and it does light and dark, and that's based on if you have color scheme light and dark defined in your root or wherever.
Chris: It is. It's a little hard to wrap your mind around, but it also taps into the system preference and stuff. It's a little weird.
Dave: Yeah, so my thinking is it would be very cool if all Web components had light-dark mode. You had light-dark in all your Web components, and you just kind of reacted to what is there. But if you have to say variables but maybe you have a variable API -- and you can actually do --backgroundcolor=light-dark black and white - or whatever -- that's cool that you can do that.
Chris: Mm-hmm.
Dave: But I feel like there might be other situations where you need to reach in and change a hardcoded value where they said background white - or whatever. I don't know. I just feel like there are going to be situations where you need to kind of update that.
Chris: There was some Web component that wasn't coded for the idea of light and dark but the rest of your website is?
Dave: Right.
Chris: So, you're like, "I need to reach in there and fix this, actually. Thanks."
Dave: Yeah because I would like this to go out this month not in this theoretical future where this exists - or something.
Chris: Right. Yeah. I find that so much stuff is coded to... Part of my brain starts being mad at color schemes because it's tempting to make an assumption that you shouldn't have made but people made. For example, the color is blocked by default in the light mode.
Dave: Mm-hmm.
Chris: If you want to change the background to light blue or something, you can do that. But you don't reset the color. You just kind of keep letting it be black.
There's long been advice that any time you set a background, you should set a color, too, to avoid this problem.
Dave: Right.
Chris: Don't make assumptions about what the color is going to be. But people make that assumption all the time. Then all of a sudden, dark mode comes out and your dark mode looks horrible because it flops one thing and not the other.
Dave: Right. Right. Yeah. No, I mean I think there's... I just think there are situations in a mature application where you probably need to reach in and do some dirty work. The classic, junk CSS or CSS crimes. You're going to have to do it at some point. [Laughter] I don't know.
I'm optimistic that Web components is going to fix itself or right the ship. But my bigger question is - I don't know. I've been told it doesn't work, but what if we just said, "Shadow DOM, you're cool. Whatever. Good bye. But we now use @scope inside our Web components if you want scoping"?
If that's super important to you, you go @scope host inset - or whatever - root all inset - or whatever.
Chris: Oh. That's how the scoping would work?
Dave: Yeah.
Chris: Yeah. Hmm... Maybe.
Dave: I don't know.
Chris: I like that then it's not two different things that essentially do the same thing.
Dave: Yeah. That's going to kill us is this whole developing in isolation and not seeing the bigger picture or one part, one piece of the platform going deep one way and the other part going deep another way.
Chris: Yeah.
Dave: Scope styles is in every browser now. I guess we should celebrate that. I think it landed in everything this month.
Chris: Yep. Yep.
Dave: Or last month, so.
Chris: I tried writing about again somewhat recently. I can't remember in what context. But it's like when you try to describe proximity scoping, which is one of the unique things that only it can do. And I like to latch onto those things that are unique to it because, admittedly, I've been less hot on the @scope thing in CSS because, in a way, it's a class.
Dave: Mm-hmm.
Chris: You just apply a class and style on the class. Then your styles are scoped to that class and its children. That's kind of what it is. You know? [Laughter]
Dave: Yeah.
Chris: It's not that exciting to me. But it has a few things that only it can do that is not true of using a class, and it is proximity (very hard to explain but very cool), and the donut scoping.
Dave: Yeah.
Chris: Which is also weird but slightly easier to explain, which says you can stop the scope at another selector (leaving a hole inside of it). Usually, the thing that's quoted is, like, let's say you have some component that has some Markdown, chunk of arbitrary Markdown, in the middle of it and you have your own special styles for chunks of Markdown, converted Markdown. Well, you don't want styles from a parent to go into that. So, you're like, "Okay, well, I'll stop the scoping when it sees an editor component," or something like that.
Dave: Yeah.
Chris: That's pretty neat. It's niche, but a uniquely powerful thing that it can do.
Dave: Well, and that's kind of what Web components do. You start at the host and you stop at the slot.
Chris: Yeah.
Dave: Whatever the slot is, you just let that render how it is.
Chris: Yeah, you're right. Oh, that twisted my brain the other day. We had to... I think I explained this on the show but we made one of our code mirror editors into a Web component.
Dave: Yeah.
Chris: On purpose because it had some advantages that we were looking for, and that slotting thing broke my brain a little. I didn't really realize that this outside CSS applies to a slot even though it gets moved inside the Web component.
Dave: Yeah. Yeah, yeah.
Chris: That shook my brains a little bit. [Laughter]
Dave: Yeah. It's the classic, "You wrote it; you can style it," situation. That's how I kind of--
Chris: Yeah.
Dave: Made my brain.
Chris: Once you get it, you're like, "Okay. Yeah, that's fine."
Dave: Yeah. Yeah, so maybe that's my next boost post. The golden rule of styling Shadow DOM, "You wrote it; you can style it."
Chris: There you go.
Dave: But--
Chris: [Loud exhale]
Dave: But anyway--
Chris: Yeah, scoping is tricky, but there is this third thing I guess we could pile on the "scope is cool" thing is the fact that its position in the DOM is also its scope.
Dave: Yeah.
Chris: Whether or not you're using Web components, you can just drop in a style tag into the HTML somewhere and then write @scope, and the scope is whatever its parent is. You're like, "Ooh... juicy!"
Dave: Yeah.
Chris: [Laughter]
Dave: Yeah.
Chris: It's cool.
Dave: Well, I should say I just looked it up. It is not in Firefox, so I don't know what I was thinking. But I guess it's not in Firefox.
Chris: Oh, really?
Dave: I thought it was.
Chris: No scope in Firefox? Hmm...
Dave: I feel like I looked at this yesterday and it was correct, so.
Chris: I forgot to mention that in our last show about grid stuff is that it doesn't seem like anybody cares about Mozilla's position on Masonry. [Laughter]
Dave: Oh, you know what? It was popovers in everything. That's what it was, popover, the HTML attribute, is in--
Chris: That's everywhere.
Dave: Everywhere, yeah.
Chris: Yep.
Dave: But not anchor yet, so.
Chris: No, anchor is in nothing. Isn't it, or maybe it's in Chrome experimental?
Dave: I think it's coming in Chrome 127 - or something - 125, so not yet released.
Chris: Yeah, so maybe that's even out. That's good.
Dave: Yeah, that'll be out by this, I think.
Chris: Do we know the positions of browsers on anchor? They better like it. Anchor is vital.
Dave: I mean I think we need it, so hopefully. I don't know.
Chris: I think it's cooler than popover is. Right now, popover isn't terribly different than dialog.
Dave: It's not. And that's what's confusing, I think, to me. And I think, if we get a bunch of popover articles, people would be like, "How is this different than dialog?" There's actually a really good explainer because I had that question after I was seeing all these demos on Web.dev, I think it was.
Chris: Yeah.
Dave: Yeah. This is Una hits it at the bottom, but popover versus modal dialog.
Chris: It's the inert thing, right?
Dave: Yeah. The methods are different which is, again, why we're just naming stuff different for the hell of it.
Chris: Why? Yeah.
Dave: Anyway, that's fine. The open attribute is different. [Laughter]
Chris: It doesn't have one because there is no element. Any element can be a popover.
Dave: Element, yeah. There's no open attribute, but there's a popover open pseudo-class. Okay? That was a big difference.
Chris: It is. I tried to get Una's attention. In her blog post, she has it as a double colon.
Dave: Uh-huh.
Chris: It's not. It's a single colon.
Dave: Oh, shoot.
Chris: It's not an element. It's an attribute.
Dave: Attribute, okay.
Chris: I informed her, though.
Dave: Pseudo class, not a pseudo element. Yeah, okay. She says pseudo-class. Anyway, I remember being in conversations, [laughter] and I was like, "Open is kind of okay." You're going to need an open state, and everyone hated the idea of an open attribute because it causes all this problem where your HTML and JavaScript have to now be in synch because I can go change--
Chris: Well, it's worse even with popover because now it's an attribute that causes another attribute. That's pretty weird.
Dave: Yeah. Yeah, but anyway, it's kind of like I remember being in this conversation. I felt stupid because I was like, "I think having an open state is helpful." You know? But anyway, it's good it's there. But it supports like dismiss, which I think is just basically click outside.
Chris: Click outside.
Dave: Which is--
Chris: Yeah, you don't have to code that up in any way. It's nice, but you can only have one open at a time. I heard it's coming that you can have multiple, but that does seem kind of silly for something that's supposed to be intentionally different than the dialog. Having one open at a time seems strange to me.
Dave: Yeah. Yeah, so--
Chris: And another one... Who mentioned this? It was a good one. Oh, it was Adam Coster wrote in the Discord that there's a method to open and show popover. Different again than dialog, as you put it. But it throws if it's already open.
Dave: Oh!
Chris: I'm like, "Um..."
Dave: Whoa!
Chris: [Laughter] I don't know if I like that.
Dave: Yeah!
Chris: Can it just do nothing - or something? I don't want JavaScript to throw something so chill. You know?
Dave: Yeah. Whoa! That seems aggressive. Yeah.
Chris: But that's what happens with new stuff.
Dave: Mm-hmm.
Chris: It's new. Then we use it. Then hopefully, it gets adjusted. I hope.
Dave: Yeah. That seems like an aggressive behavior. I'm not sure why that would be the case.
Chris: I played with it yesterday because I thought, "Okay, this is the answer to the problem with title. Title is stupid. You can't control it. You can't have HTML in it. Can't tell it where to position itself."
Dave: Mm-hmm.
Chris: It's not useful. It doesn't work on mobile. It's a totally useless attribute, I think. So, we can do the same thing here, though.
The goal with title is that, okay, you hover over something for a little second or two, and then a little yellow box comes up, and it says what's in the title.
Dave: Mm-hmm.
Chris: Very occasionally useful. Something on a truncated date, and then you put the title attribute on it. It's like the big, long, expanded date that might be more useful. Sure. Fine. You know?
Dave: Mm-hmm.
Chris: But a tool tip of any kind just doesn't work great as the title attribute, I don't think, especially because you can't use HTML inside. And you can't because it's just an attribute. It already is HTML. You can't put more HTML inside quotes. [Laughter] You know?
Dave: Mm-hmm.
Chris: The parser is not going to like that. So, now we have this. But anchor isn't here. It's clearly designed to work with anchor.
Dave: Mm-hmm.
Chris: You know? Of course, you're going to position these things. But right now, they just open in the dang middle of the page. Just like dialog does.
Dave: Yeah.
Chris: Which is pretty awkward for a popup.
Dave: Yeah, it's not what you want.
Chris: But it does work. And I you want the delay, then you're on your own. You've got to write JavaScript, so I wrote a mouse enter event that sets a time out. Then if you mouse leave, it clears the time out, so it doesn't open. It felt very old school to have to write that.
Dave: Yeah.
Chris: But if you want a two-second delay before the thing opens, that's what you've got to do. They didn't help you out with that in the API at all.
Dave: Well, it has that HTML flavor. You're writing less JavaScript to open it, right? Because you're doing the invoke popover target.
Chris: You don't have to write any JavaScript if you don't want.
Dave: Yeah.
Chris: Which is awesome!
Dave: Yeah, so you say popover manual or popover - whatever - auto popover target, popover action. You know?
Chris: Yep, and it's not just one. You connect the invoker to the popup itself. That's fine. But you can also make a close button that uses the invoker, too.
Dave: Yeah.
Chris: Which is tremendous. Very good idea.
Dave: So, it's like, "Go manipulate this thing." You know?
Chris: Yeah.
Dave: Anyway--
Chris: It's mostly good. It just has a few rough edges.
Dave: Yeah.
Chris: And I really think it needs to wait for mass usage to anchor because it's very silly to me that these things just pop up in the middle of the page.
Dave: Yeah.
Chris: You can position it yourself if you want.
Dave: Like fixed is basically it. Yeah. Yeah.
Chris: And it's so easy to override. I complained about it in the last episode with Adam that if you want the thing to behave like Flexbox (like I did), you can't put Display Flex on it because then it's not hidden by default. It just shows up.
Dave: Yeah. Yeah.
Chris: The only way it's hidden is because it's display none in the user agent style sheet, which is so... It's not silly, but it... I get it, but it feels weird to me. It's like, "Okay, I guess I'll use an internal wrapper then," or whatever.
But it's a little better. What I did was I attached it to that pseudo-element. I said, "It's Display Flex when it's open."
Dave: Hmm... Nice. Yeah.
Chris: That was kind of a way to get around it.
Dave: Yeah.
Chris: Not bad but, yeah. You know how it's centered, too? The only way it's centered is because it has margin auto on it. If you're like, "Margin 10 pixels bottom," on it - or something - it's not centered anymore because it wipes out that.
Dave: The algorithm or whatever?
Chris: The centering.
Dave: Yeah.
Chris: That's a little footgun-y, I think.
Dave: Hmm... Yeah. That's... It's like I've coded my own centering libraries before, like anchoring things, like some popover-y kind of things, man.
Chris: Yeah.
Dave: I never want to do that again. I never want to do that again. Even using something like popper, which is awesome, which solves so many problems, but it's just like you thought about it until you resized the browser. Now that thing is shooting off the screen and all that stuff.
Chris: Right.
Dave: I think having strong browser primitives and properties that let us do that is awesome.
Chris: You know a good one is floating UI, floating-UI.com.
Dave: Ooh...
Chris: It seems to me, at the moment, the premier, like, I want to position something next to the other thing but I'm also likely to have edge cases and stuff I want you to help with.
Dave: Hmm... Yeah. No, that's great.
Chris: I came across it because I used Shepherd.js--
Dave: Okay.
Chris: --to build a little tour thing. If you go to shepherdjs.dev, you'll see it grays out the screen and has a thing that pops up and points at something. It looks a little like a popup. But it has a really nice API, so if you want to do a ten-step tour, the API to do that is really nice and clean. You just set up this big object that says what the text and the buttons are and stuff. It's pretty classy, I think.
But they didn't do the positioning themselves. They're like, "I'm going to make this nice API and put some styles and stuff together." But under the hood, it just uses floating UI to do, I wouldn't say, the hard part. It's like Shepherd had some hard problems to solve, too. But it was kind of cool they didn't have to solve the positioning stuff.
Dave: Yeah. Nah, I think it's going to be cool when all this stuff lands because you can have richer apps, just like even tool tips. I'm looking at a bunch of logos just with some tool tips and stuff on this floating UI site. It's like you can add more context pretty easily without making it up yourself. It's going to be more accessible than it was before. It's going to be cool.
Chris: Yeah. Yeah. Edge detection is always the hardest thing. That's what kind of gets me excited about stuff like anchor positioning because you're like, "I want this tool tip to show up above the element unless you can't see it that way. Then flip to the bottom." That seems like a nice want and also way more code than I ever want to write.
If I just get that "for free" by using this thing, I'd love it. It's like we get inert for free when we use dialog. That's huge!
Dave: Yeah. It's like why did you--? We've all done background position fixed.
Chris: Yeah.
Dave: If dialog open and all that stuff, and it's bad.
Chris: Yeah. I want the free stuff.
Dave: Yeah.
Chris: Have you seen the syntax for anchor positioning, too? It has this @try syntax. It's like try to put it on the top else put it on the bottom. You can even--
Dave: Oh, like do a try catch inside of it?
Chris: Yeah. It's like CSS try catch but just for positioning. Maybe that needs a bigger-picture look. What else would we want to try catch in CSS?
Dave: Hmm...
Chris: I don't know.
Dave: Hmm... I feel like there's a lot, but it's like overflow or something like that.
Chris: Oh, sure.
Dave: Try overflow visible, and then just do overflow scroll. [Laughter] I think it's stupid.
[Laughter]
Dave: Yeah. Something like that. I don't know. CSS needs it.
Chris: I don't know. I do think of that classic word. What do they call that? When text becomes not able to be seen because, for example, Flexbox positions it in such a way you can't actually get to the text. Data loss, [laughter] you call it in CSS.
Dave: Yeah, yeah. Yeah.
Chris: Now there are Flexbox keywords that say, "Align top safe," or "Align safe top," or something. "Align it to the top unless aligning it to the top makes it not visible."
[Laughter]
Chris: Then don't do that.
Dave: Then don't.
Chris: [Laughter] I think that's cool. That's kind of a tri-catch situation-ish. But uses different syntax.
Dave: I think what we were... Were we talking about this? The browser is amazing. All the stuff that we get is pretty incredible. There's so much. We're able to render UIs and text and infinite documents very fast and very quickly and very efficiently and very normalized across billions of computers, and that's pretty cool. [Laughter] I just want to take a minute to celebrate that.
Chris: Yeah.
Dave: Pretty awesome.
Chris: Good job, computers.
Dave: Good job. We did one thing right - kind of. All right, well, we should probably wrap this up. Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show.
Just capping it off the whole "Dave goes Microsoft" discussion, if you're looking for work, man, I know it's hard. Feel free to reach out to me. It sucks. I know a few people, but just know it's not you. It's the shitty climate out here. You are good, you are valuable, and rejections are not a reflection on your skillset. It's a reflection on just the weird times that we're dealing with right now.
Chris: Hell yeah.
Dave: Keep your head up. It's hard. It's not fun. It's stressful, but I think there are jobs out there. It's just very hard. Anyway, just keep your head up. You got this. I just want to say that.
If you want, we do have a jobs channel and stuff shows up over in the Discord. So, if you want to hang out there with us, join us at patreon.com/shoptalkshow. Chris, do you got anything else you'd like to say?
Chris: Oh... I guess we should say if you're actively looking for a job and you want into that channel but don't have the bucks to throw at the Patreon, just send an email. I'm sure we can work something out there.
Dave: I can probably... Yeah. [Laughter]
Chris: Yeah.
Dave: We could get a digest. Yeah.
Chris: ShopTalkShow.com.