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--back in the shed--Rupert. With me is Chris--in the office--Coyier. Hey, Chris. How are you?

Chris Coyier: Oh, that's right. Yeah, fantastic. Really good. About to hop a plane to Alaska. Do some excursions, some hiking, some just enjoying the view up there in Juno. A beautiful place. I've been up there a couple of times before. I have a friend.

Dave: Wonderful.

Chris: It should be good.

Dave: Wonderful.

Chris: Right when I come back, my family comes back from their trip. We've been on separate trips. This is, I think, the first we've done that.

Dave: Yeah.

Chris: Pretty cool.

Dave: Yeah, so your family went to Egypt.

Chris: They did.

Dave: And you kind of went--

Chris: A huge opportunity, yeah.

Dave: Banjoing and--

Chris: And I just did other stuff. Yeah.

Dave: And Alaska-ing.

Chris: Yep. Yep. Yep. We happen to catch the same flight. They both fly into Seatle, and we'll be on the same flight home, which is so weird. We definitely didn't plan it that way.

Dave: Wow! That's magical.

Chris: Yeah.

Dave: That's beautiful.

Chris: Yeah.

Dave: That's kind of poetic.

Chris: I'm excited about it. I think it'll be cool. Although, they'll be freaking exhausted.

Dave: They'll be... yeah.

Chris: And I'll be fine.

Dave: Just haggard. Holy cow.

Chris: [Laughter]

Dave: Good luck to them because I hadn't even thought... We usually go the other way to, I guess, the Middle East.

Chris: Yeah.

Dave: You go left. I go right. Yeah, that's interesting. Okay. Wow. That changes my... Yeah.

Chris: Yeah. Um... I think they still go right, though. But they just come over. I don't know.

Dave: I meant going there. Sorry. I go eastbound to get there and westbound to come back.

Chris: Oh, I see. I see, from Seatle specifically. I thought you meant like when you fly to Europe or whatever.

Dave: Yeah.

Chris: I was like, "We still go right." What was I going to say? The day we get back, too, we're going to do a one-day turnaround for the next show after this one. Not that anybody cares here, but you won't miss a show, everybody. I just like to emphasize how amazingly consistent we are. [Laughter]

Then watch we'll miss it. Ah... We better not.

Dave: There was a chance that we had to take some of the summer off. But we figured it out.

Chris: Yeah.

00:02:26

Dave: Thanks to our editor, Chris Enns, for being flexible. Yeah, I just got back from San Diego, sunny San Diego. I did not get a sunburn, and that is my big accomplishment. [Laughter]

Chris: Yeah. Well done. Put some goop on your face?

Dave: Oh, just covered in zinc. Holy cow. It's kind of like... I don't know. We go.

It's sort of like I just go on my wife's vacation, and that's fine by me. [Laughter] She's got enough Native American that she's immune to sun, so that's great. The kids, also the same.

I am, however, translucent-skinned, so I'm one of those cave salamanders that they try to protect. You know?

Chris: Hmm...

Dave: So, I go, and I sit under a solar fortress, and I cover myself in metals so that I don't get burned by the hot ball in the sky.

Chris: Gosh. You put zinc on your face. I was out camping, and I had a magnesium thing for making sparks. I just had it in my camping, so I didn't actually start a fire with it. I don't think I have that kind of ability. But I take magnesium in my body. It helps you stop getting sick. Just a little too much heavy metals in my life. Gees.

Dave: I think it's really funny. Even antidepressants, it's like, "Take... Put this metal in your body so you're not sad." [Laughter]

Chris: Yeah.

Dave: It's like, "Oh, okay." Or like I'm taking magnesium for sleeping, like calming vibes, you know. It's like, "Yeah, you sleep better when you eat metal." [Laughter] Of course! Of course, it's good for you.

Chris: Right.

Dave: What we can all agree on is sunscreen is awful for you. Can't have whatever they did with sunscreen for a while, which I assume is just--

Chris: Can't eat fish without mercury in it.

Dave: Yeah.

Chris: Unbelievable.

Dave: I just assume the old sunscreen was made of butane or something. [Laughter] They just said, "Oh, yeah. Just spray kids with butane." That's too bad.

Chris: Yeah. I wonder what we're doing now that's so horrible. I can't wait. That's a good reason to try to get older is so that we can look back on now and be like, "Man, that was crazy." We used to just read social media unfiltered?

Dave: Yeah.

[Laughter]

Chris: That's not good.

Dave: We mainlined that stuff. That's terrible. That was horrible for human psychology.

Chris: Yeah.

Dave: Yeah.

Chris: Yeah. A company like Meta would just launch a new social network and we'd just sign up for it. We'd just sign up for it instantly.

Dave: Instantly. Instantly, we just signed up for it.

Chris: Yeah, and we would just start scrolling that thing.

Dave: In an effort to preserve our usernames, we just signed up for everything.

Chris: Yeah.

Dave: We just gave everyone our data. [Laughter]

00:05:09

Chris: Yeah. I wonder if that'll come... You know Bluesky is notable doing a "URL can be your username" thing.

Dave: Mm-hmm. Mm-hmm.

Chris: Mostly to applause, I think. I think people are liking that. It's kind of a fun trick for nerds. That's cool. But they've gotten in the business of selling them, too, which I saw was also largely applauded because it's a nice revenue stream for them and makes it easier UX-wise for other people.

Dave: Yeah.

Chris: But if everybody did that then there would be no username rush, is why I thought of it, because you got the URL, so you got what you want. You know?

Dave: Yeah.

Chris: Not a bad idea, really.

Dave: I would think that's cool. I don't know. I feel like we're kind of verifying accounts with URLs anyway, right? It's like, "Go put this little well-known tag somewhere."

Chris: Yeah.

Dave: If you could just be like, "I bought the domain from you. Can you verify me?"

Chris: Yeah.

Dave: Then you kind of know if it's - whatever - stealyourdata.biz. You're like, "Yeah, I'm not going to interact with you." [Laughter] You're not a nice person, so. Fortran.online - or whatever. I'm not going to talk to you.

Chris: One username per URL, too. That confused me for a minute when I went to go log back into Bluesky. It's like, "What's your username?" It's just like, "What's your username?" I'm like, "I don't know. Is it Chris Coyier? Is it [email protected] or [email protected]?"

I'm like, "Nope, nope. It's just the URL." My username on Bluesky is chriscoyier.net because that's my URL.

Dave: Huh. That's okay. All right.

Chris: At least for logging in purposes, yeah. Yeah, again, don't really mind it. But for any URL that was particularly company-like or something--

Dave: Yeah.

Chris: --you can't have [email protected].

Dave: Well, I wonder how this happens if mergers or name changes?

Chris: Hmm...

Dave: Somebody gets married and changes their name or divorced and changes their name - whatever - transitions, changes their name or merges companies, changes their name. How does that work? What happens?

Chris: Don't know.

Dave: But I guess if you own the URL, you're that person now. That's cool. That's how it should have been the whole time.

Chris: Maybe that's why people call their Senators. They sort that out.

00:07:44

Chris: Have you seen Text-wrap Balance? Speaking of wide applause, when that dropped--

Dave: Mm-hmm.

Chris: I'm pretty sure it's just Chrome, still. I could be wrong. Maybe I'll look it up quick. But the point of it was A) you've got a headline. It's really annoying when one line breaks on a headline to the point where people took matters into their own hands. I've seen the last one or two characters have an NBSP (non-breaking space).

Dave: That's an old--

Chris: Trick.

Dave: --Shawn Inmon trick, I think, right?

Chris: Yeah. Yeah.

Dave: Yeah.

Chris: Perhaps I used to do that. Probably still do on some sites. It's just an old little trick so that the text will never break in the last couple of words. That's a cool trick. You can do it with JavaScript. You could do it server-side - whatever.

I don't know what other techniques were, but it turns out, now with one line of CSS, you just go text wrap balance on, say, your H1's, H2's, and H3's - or something.

Dave: Mm-hmm.

Chris: You'll just never be in that position because the browser will balance it out. It looks great on headlines, I think.

Dave: Yeah.

Chris: But now it's gotten in everybody's head, like, "Oh, the next time I see that on a website, I'm just going to fix it with text wrap balance really quick."

It happened to me yesterday. I had a bar of text.

Dave: Mm-hmm.

Chris: It usually didn't wrap. But sometimes it did. Let's say it's like a modal comes up and I want to put a message at the top of the modal. Say it's 500 pixels wide at most on desktop.

Dave: Mm-hmm. Mm-hmm.

Chris: But there'd be one line of text would just wrap a little bit. I saw one word fell down. I was like, "Ooh, this is it," but it's not a header.

Dave: Mm-hmm.

Chris: It's just a sentence, one sentence.

Dave: Yeah. Yeah.

Chris: I put text wrap balance on it. Them I'm like, "Ugh. I don't like it."

Dave: It didn't work? You didn't like it?

Chris: I don't like that it wrapped. I just don't like that it... It clearly wrapped way too early.

Dave: Oh... Okay.

Chris: It just looks weird when it's not a header. On a header, somehow it looks fine.

Dave: Mm-hmm.

Chris: But on just like a sentence of a paragraph, it's like, "Ugh. Why are you wrapping all weird?" [Laughter]

Dave: Mm-hmm. Yeah.

Chris: I don't like it. Then it'll wrap different. If you put it on a whole bunch of paragraphs up and down a page, it'll wrap at different horizontal points depending on the paragraph. It just doesn't look right on small text, I think.

Anyway, the whole point of this is... drumroll, please. [Drumroll] I don't know how I missed this. Text wrap pretty.

Dave: Ooh... Really?

Chris: It totally handles this. Yeah. Yeah.

Dave: There's more text wraps?

Chris: Again, Chrome only. Yeah, well, I think so because text wrap was kind of new to begin with. I think balance was the only value it had in most of our minds, I think.

Dave: Mm-hmm.

Chris: Aside from revert, inherit, unset: all those that are valid for pretty much every property.

Dave: Yeah.

Chris: But yeah, now it's balance or pretty, and pretty does the trick.

Dave: Interesting.

Chris: Pretty does what you want in the paragraph situation. Just so you know, everybody. Good one. Adam showed me that. Apparently, I was bitching about it or something. Of course, the ambassador of all things CSS, Adam Argyle, was like, "Hey, have you seen this?" I was like, "No, I haven't, sir." But now I can--

Dave: He's pretty good at, "Hey, by the way," [Laughter] this got fixed--

Chris: Yeah.

[Laughter]

Dave: --like two months ago.

Chris: Right.

Dave: Yeah.

Chris: Well, anyway. If you're Adam's boss, give him a raise. He's really good at that (if that's indeed his job, which I believe it is).

Dave: Interesting. There are quite a few here. There's wrap, no wrap, balance, pretty, stable. I hadn't seen those.

Chris: Wrap, no wrap. No wrap is white space.

Dave: Well, I think there's a text wrap, no wrap, which is not hyphenated.

Chris: What?!

Dave: It's got the same no-repeat issue, but I think that's consistent with the other.

Chris: Text wrap, no wrap. I don't hate it.

Dave: Text wrap, no wrap. I'm not going to rap.

Chris: But does it do the exact same thing as white space no wrap?

Dave: There's a line here. Let me see. Um... The white space collapse in textual properties can be declared using together with a white space shorthand. Oh, so maybe you're supposed to be like white space no wrap is probably the best.

Chris: Hmm...

00:11:58

Dave: Does that even exist? Yeah. White space no wrap is a thing. Pre-wrap. Anyway, that's fun to experiment with.

You know what I learned using--? We can get back to other people correcting us here in just a bit. But that little sqwunch text experiment that I was working on. I use text wrap balance because it was a great chance for it. Right?

Chris: Yeah.

Dave: Great chance. Also, because I got it really messed up, like I used a really long word, so I was playing with hyphens, the CSS hyphens, which actually you can kind of use now, I think. Hyphens is generally supported. Let me get the actual support for you.

Chris: I think so, and it's not the end of the world if it's not supported. What always gets me with it is that you need to use it separately from other features. Hyphens just has to do with whether it's hyphenated at the end of the line.

Dave: Yeah.

Chris: If it's willing to break mid-word or not.

Dave: Right. And so, there are other things like break word and stuff like that, but there's another property called hyphenate-limit-characters. You can pass it numbers. This is a weird one because you just say... This is not super supported, but you can--

Chris: I'm sure it's English only, too, by the way, for the most part. That's just a guess, but that tends to be the criticism is, "Yeah, enjoy."

Dave: Yeah. I don't know. It could just be characters. Other things, things you don't want to do that.

Chris: It just might be annoying if it got to the end of the line and was like, "D-" next line "ave." You'd be like, "Don't break just the one character. That's stupid."

Dave: Yeah. hyphenate-limit-characters is a weird one, but there's a minimum word length to allow before you hyphenate.

Chris: Mm-hmm.

Dave: Then there's a minimum number of characters before the hyphen, and then a minimum number of characters after the hyphen.

Chris: Wow.

Dave: You're basically... What I set it to is--

Chris: Like ten, five, five, or ten, three, three.

Dave: Ten, three, four, so I will drop three letters, but I will have four letters before it. And so, anyway--

Chris: I like it. I like it. I wonder if people mostly use it to turn the dial up. You know?

Dave: Yeah, I think out-of-the-box hyphenation is a little aggressive. It's just going to try to do it for everything.

Chris: Mm-hmm.

Dave: This hyphenate-limit-characters is kind of cool. Again, Chrome only, I think, right now. But it's a little cool because you can kind of be like, "Hey, this is... I'm going to kind of like... What I consider a long word, long enough to be hyphenated, I'm going to tell you."

Chris: Hmm...

Dave: Anyway, that was cool. Again, this is kind of... We're entering--

Chris: A lot of power. A lot of power for us CSS people.

Dave: Yeah.

Chris: It's the kind of thing where... I don't know. Do you think you should know what you're doing? It's not like I know nothing--

Dave: Oh, am I a typographic genius? Yes, I am.

Chris: That's what I'm saying.

Dave: But enough to actually do this? No, I'm going to just wait for Robin Rendell to write a blog post, and I'll just copy his crap.

Chris: Right. It feels like it should almost be like scientifically research-informed and stuff like color and stuff.

Dave: Yeah.

00:15:31

Chris: Okay. Good stuff. We just learned something right there. A little bit more. Arada, our friend Alex from the D-d-d-d-discord and this show and everything--has responded to our ignorance about super.

[Laughter]

Dave: Yeah. Yeah.

Chris: Because we were answering another user question about, like, what's the chinks in your brain armor, Dave? Is there stuff that's still confusing to you after - whatever - literally 30 years of building websites?

Dave: Yeah. Yeah.

Chris: I think I threw out super just because I was trying to think of little, particular lines in JavaScript that are like, "Um, what is this? What is it for? When do you use it? When do you not use it? What are the caveats?" Blah-blah-blah.

I do kind of know what it is. Although, I do appreciate Alex's follow-up here that really well explains it. I think you had a point that was like, "But you're literally saying Dave extends X." The fact that you've set extends means don't you want it to extend.

Dave: Basically be the same thing. Yeah. Yeah.

Chris: Right. But it's not the same thing until you super it, and then it goes and, as you said, asks the superintendent or whatever for the stuff from the other class.

Dave: Yeah.

Chris: Alex's point in this post -- we'll link it up and, of course, you should go read it for all the detailed nuance -- is that super takes arguments.

Dave: Yeah.

Chris: How could it possibly guess what you're going to pass it? It can't.

Dave: Mm-hmm. Yeah.

Chris: Just that fact alone, that's why you have to call it because you have to send it. You don't have to, but it's pretty common to spread the props in there or whatever.

Dave: The thing I just... whatever. How I wash my hands of this ignorance--

[Laughter]

Dave: --or defend this ignorance is I don't do this. I never have props on my constructor. I never pass props via super.

Before the show, we were looking at GitHub to see how often people do it. Not that often. Maybe often. I don't know.

I think my whole thing, I guess it makes sense, though. You use the date class or something like that. I don't know.

Chris: Yeah.

Dave: You're basically--

Chris: It seems like the line in a tutorial where it's just sitting there, and you're like, "But why?"

Dave: Yeah. And it says, "You will never need to know this, but--"

[Laughter]

Dave: But no, Alex's--

Chris: But you're saying that there are design patterns or there are ways that you can program that just avoid it. And whatever pattern that is, is your pattern. [Laughter]

00:18:09

Dave: Yeah, like classes that don't necessarily take args. If you just want methods on a class.

Chris: Yeah.

Dave: I guess maybe I'm coding bad or something, but I feel like a lot of the classes I've written just don't take arguments. My constructor function doesn't have arguments. My super doesn't have arguments.

But the point that Alex makes is you can have constructor height, width. This is for your rectangle class.

Chris: Yeah.

Dave: Constructor height, width, and then you say it's a box that is width and height. But for your square class, you might just want it extends rectangle, but your constructor just takes length, so you're like square 40, and that then makes a rectangle.

Chris: Right.

Dave: It calls super 40, 40, length, length, or size, size. Anyway--

Chris: That's a really good point and well explained, I think.

Dave: Yeah.

Chris: Good job. Thank you for that.

Dave: Then a circle would be extend square but have radius 100%.

Chris: Still one argument.

Dave: Yeah.

Chris: Oh, I guess it'd be just radius. Yeah.

Dave: Yeah, you'd have to modify your rectangle to have radiuses, I guess. But anyway, if you think of it like that, that's kind of something.

00:19:34

Chris: You know what my brain connected it to was pseudo-elements like before and after, ::before, ::after.

Dave: Yep.

Chris: It's like, how often does this happen to you? You get it all set up and you're like, "Why isn't it there?! What is happening?!" And it's because you need to add content with just an empty string.

Dave: Yeah.

Chris: If you don't have content, it doesn't show up, and there's no error handling in CSS, so it doesn't tell you that. So, it's just confusing to think about. There almost should be a CSS linter that's like, "You don't have any content." It's just required. You always have to have content.

Dave: Yeah.

Chris: Even if it's an empty string. And it's like, "Why?!" Why?

Dave: Yeah.

Chris: If I put position absolute on it and put a width and a height and all this stuff on it, why do I also have to go "content empty string"? It should assume content empty string.

Dave: Some browsers... I think Firefox did it first under the reign of Jen Simmons. Then Chrome has started doing it. But they'll gray out rules that don't apply (in your Web inspector). Have you seen that where you--

Chris: Yeah. That's a great idea.

Dave: [Laughter] --are over CSS, and they're like, "Yeah, this just never hit the browser, dude"? I appreciate that. Definitely guilty of writing stuff that never makes it to the final cut.

Chris: Yeah. This is like the opposite of that. You're missing--

Dave: Well, I do wonder. It's very much open the inspector and find out. But should CSS error in the console? What do you think? Or warn, I guess.

00:21:04

Chris: Well, I was thinking of that in terms of Sass the other day because Sass has a function called @debug. The point of it was that, while your Sass is compiling, you can spit out to the console whatever, like a variable or a calculation or the output of a function or whatever you want. That's nice, right?

Dave: Mm-hmm.

Chris: CSS doesn't have that. There's no console.log of CSS. Now, I don't want it to start. Although, I've heard argued a strict mode for CSS could be kind of cool because then we could fix some of the crap. It'd be opt-in, right? You'd have to put at the top of the CSS, like strict mode true or quote strict mode or something that's valid to old CSS or would be ignored safely.

Dave: Okay.

Chris: Then you could be like, you could fix the box model and you could do all this other stuff.

Dave: Ooh, interesting. Yeah.

Chris: That'd be cool somehow. I don't know why I was trying to connect that to this, but it would be neat to... maybe then... This would be extremely crazy. You could have CSS that would error.

Dave: Yeah. I don't mean like white page. I like the forgiveness of CSS.

[Laughter]

Chris: Yeah.

Dave: I'm not trying to make PHP here, folks. But there are just times where it's just like, "Hey, you wrote something. It's just not even hitting."

Right now, I can only see it if I inspect the element, like if I go to the element and inspect it. What I'm asking for, I guess, would be just a violations sheet, like a spreadsheet of violations. Yeah.

Chris: Right. Why not? That doesn't affect the Web platform. Chrome could just decide (or Apple or anybody could just decide), "Oh, you know that built-in console in our dev tools? It's just going to start spouting at you."

Dave: Yeah.

Chris: It's going to say, "Oh, on line 184 of your CSS, there's just a thing, and there's no colon before the semicolon. That's weird. What'd you do that for?"

Dave: Text wrap blafance. [Laughter]

Chris: Yeah.

Dave: That's why it didn't work.

Chris: Yeah. It's a line in there that is the same as if a JavaScript were to have an error in it like that.

Dave: I just only think about it because it would just be kind of cool to get that feedback from the machine.

Chris: Right.

Dave: I don't know. People complain about CSS a lot and "It's not a real programming language." And it's like, "Well, let's make it one." [Laughter] Let's make it one that gives you feedback and stuff like that.

Chris: Hmm...

Dave: And maybe that becomes even more important with, like, dark modes and light modes and even the when. Is that the conditional statement, @when? I forget where it landed.

Chris: They have when. I think they have when. They mostly have if.

Dave: Or @try. Okay.

Chris: Which is funny. I think CSS was... I think they've decided there'll never be an @if in CSS because of Sass.

Dave: Yeah.

Chris: Which is wild because sometimes CSS steps on Sass's toes. For sure it's happened.

Dave: Yeah. Yeah, yeah.

Chris: But for this one, they didn't, right? I think they only use when now in CSS. God, how did that conversation go down? I guess I better shut up about it because that's not good podcasting.

Dave: Phone a friend.

Chris: Remember that old time?

Dave: Fantasize. Summon.

Chris: Yeah, but it didn't ship at all. There's no conditional stuff in CSS yet.

Dave: Not yet. Not yet, but I'm saying in the future when that--

Chris: Yeah.

Dave: If whatever color will glean, and it's like, "Hey, baglean is not a color ever, so this will never hit," or something. You know?

Chris: Hmm... I wonder why it has to be an @if anyway. Are we locked into that as a signifier of future concepts in CSS? [Laughter]

Dave: Yeah. Are we being too nice to Sass here?

00:25:01

Chris: I was just looking at anchor functionality, reading Jay's post back when he was at Google just a few months ago.

Dave: Mm-hmm.

Chris: There are two new @ rules for anchor positioning.

Dave: Oh, really?!

Chris: Including an @try function, which is pretty neat. That's how it's dealing with edge problems.

Let's say you wrote a tool tip, Dave, and the tool tip hung off the top of the thing that you were, say, hovering over. That's how you designed it. Well, if that goes up over the top of the browser window, you can describe an @try block, like, "Try this," and then if the browser decides that's not great, it'll go to the next @try block, and it'll be like, "Okay. Well, then put it on the bottom."

Dave: Yeah.

Chris: At least you can control it, which is nice. But it gives you an opportunity to kind of hand-design where you want the anchor to go. There is no default, though. If you don't put those try blocks, it'll just do your first where you positioned it or nothing.

Dave: Oh, really?

Chris: It's not going to move it for you.

Dave: Oh, okay. It doesn't even try to guess or center-center?

Chris: No. No.

Dave: Center bottom or something like that, no?

Chris: Absolutely not. [Laughter] No, which it could. I mean I don't know. Those are the types of choices that these spec authors and discussion people have to make.

We were just talking with Eric, and he laughed at us when I was like, "Oh, by the time CSS ships, everybody... It seems like everybody gets along. Everybody likes the feature. Everybody claps and applauds and writes positive blog posts about it and stuff."

He's like, "I know that's how it seems." I think what he was trying to say is that there's probably plenty of in-fighting while it's being discussed.

Dave: Mm-hmm.

Chris: And backstabbing. I don't mean to insinuate any horrible behavior or anything.

Dave: Yeah. Yeah. Yeah.

Chris: But it seems like that's probably what happens. Then for whatever reason, that process usually ends up pretty good (in CSS-land, anyway).

00:27:02

Dave: Yeah. I mean I've been exposed to a little bit of it in OpenUI where I think this is being incubated. A lot of it, you're like, "Hey, what do people think about this?" It's kind of like bikeshedding.

People don't want to be like, "How do we make a prototype that works?" People want to be like, "I don't like the word anchor. I want to fight about that." And so, you have to be like, "Okay, let's take a step back. Does everyone agree that anchor is the best ideas?" Then people are like, "No! It should be called ShopTalk." Then they're like, "No!"

You kind of have to redo decisions a bunch. Then they prototype and build. Then they figure something out, like, "Okay, we have a problem with this," or "We need accessibility on this." You have to make a re-decision.

Interestingly, they try to make decisions on the smallest possible level. Even if it's just motion to come up with a list of names. Everyone agree? Yes. Or something like that.

Chris: Yeah.

Dave: It's very... I don't know if I could do it as a job, [laughter] to be honest. Just sit around and do spec work.

Chris: You wouldn't even be willing to be paid for it let alone not be paid for it. That's the miracle of it, really, is that some people are.

Dave: Some people volunteer their time. But then they get put on as invited experts, like Hedae just did. Congrats to him.

Chris: Nice.

Meredith: Yeah, that's hard. I do think there are people... There's money floating around if you're good at it and can do it.

00:28:55

[Banjo music starts]

Chris: This episode of ShopTalk Show was brought to you in part by Notion. I'm excited to share that they just launched Notion Projects, which includes new, powerful ways to manage projects and leverage the power of their built-in AI features, too. Notion Projects combines project management with your docs, knowledge base, AI, so you can stop jumping around between tools and stop paying too much for them, too.

Let's say Dave and I were going to redesign ShopTalk Show. We'd almost certainly use Notion. We use it anyway and love it for managing all kinds of stuff like the incoming questions from y'all from their API, from managing our upcoming shows and ideas and workflows and information about advertising and all that kind of stuff we keep as a knowledge base in Notion.

Then when we work on a project, you can make a database and make cards that represent tasks that you can view in a kanban view or all kinds of different views. It's really wonderful for managing the flow of working on a project.

If we needed some brainstorming help, too, let's say we wanted... What's a good advertising page for a podcast? What kind of information should it have? Rather than us jumping around between another tool, we could just use the AI tools built right into Notion just to help us brainstorm the type of stuff that will be there. Anything Dave and I did will really be hand-crafted, but I think that's the role that AI is starting to fill is just like, "Well, help me think about it a minute. Just slap my brain a little bit and get me going, and then I'll take it from there," kind of thing.

Do your most efficient work with Notion Projects. You can try it for free today at notion.com/shoptalk. That's all lowercase letters, notion.com/shoptalk. When you use that link, you are supporting our show. Thanks so much to Notion for the support.

[Banjo music stops]

00:30:46

Chris: Simi d'Clarke writes in. A fan of the show. Writes in lots of great questions. Really appreciate that. Wanted to hear us talk a little bit about the buzzword "edge."

Male: Which is why edge and I have taken up miniature golf, mini golf for short. Uh-huh. Some people call it crazy golf. In Germany, they call it Bannon golf. Edge!

Chris: I feel like we throw that out there sometimes, perhaps without explaining it particularly well.

Dave: Mm-hmm.

Chris: It is used quite vaguely sometimes, and so what's up about it? It was good timing for the question because I just happened to have caught one of Ben's whiteboard tweets. [Laughter] Have you seen--?

Dave: Oh, yeah.

Chris: He does a great job with that.

Dave: I love Ben, Ben and his whiteboard. Yeah.

Chris: Yeah. Yeah. He bought a whiteboard. Just changed his life. Amazing.

Dave: Yep. The best $39 he ever spent at Walmart.

[Laughter]

Chris: It's nice, though. It leans into an age-old concept. It's like, "What's better: a blog post or a blog post with illustrations in it?" You know?

Dave: Yeah.

Chris: Yeah, it's the one with illustrations.

Anyway, he took on the edge, and he did a great job of explaining it. So, I'll explain what he explained (with my own commentary). The edge always means geographically close to a user. If it doesn't have that component to it, it's just not the edge.

It almost always means, like, "Okay. If you're in Melbourne, Australia, whatever is happening, there's a computer that's probably also in Melbourne, Australia." I use Australia on purpose as an example because they kind of get screwed sometimes for companies that are like, "Oh, we just do U.S. West always all the time for everything we do for our company." Meaning that's an AWS region.

Dave: Mm-hmm.

Chris: But AWS is so big that even if you're using some other host, it's possible that it's using AWS behind the scenes and stuff. Servers are literal, physical pieces of hardware, and at some point somewhere along the line of your stack somebody is making a decision about where that server is. It's possible that they're just in one location, and so the edge started off--

I think everybody understands what a CDN is, meaning they came along and said, "But we'll put your images and your fonts and crap more geographically close to users because those are static, and they're really easy to deal with." CDNs are pretty fricken' complicated, so let's start with the easiest of the assets.

Dave: Mm-hmm.

Chris: I feel like is what CDNs were in that way. The Web is now faster for the person in Melbourne because it's getting assets from closer to where they are even though the database is probably still U.S. East or somewhere in Europe or something, which is still pretty damn far away from Australia.

I feel like the more and more we use the edge, the more and more it's applied to things that aren't necessarily just static assets anymore. When functions became edge available, that's pretty cool. Now you can run code in those CDN locations closer to your users. That's pretty cool.

But then at the same time, it started to mean that those functions weren't necessarily like Python or Ruby. They tended to be JavaScript, and then they tended to be not Node either. They tended to have a special runtime.

When Cloudflare did this, they were like, "You can run our Cloudflare workers on the edge. But it ain't Node. It's V8 or whatever. It's like a JavaScript engine that we specifically poured in to do that."

That kind of got lumped in with the meaning of edge sometimes is that not only was it geographically close but it ran a special runtime just because of that. That's starting to fade, I feel like, more and more. Those edge runtimes are getting pretty close to Node. Sometimes they just are Node. Then sometimes databases are edge-hosted. Sometimes entire servers are propagated to edge places. So, it's all starting to melt together a bit.

00:35:00

Dave: Yeah. I always understood it as co-location like my Time Warner is at... I'm on AT&T, but whatever. Time Warner or Spectrum, whatever... Spectrum now. If you could imagine somebody putting a server next to the Spectrum building is going to go faster than somebody putting... that my house connects to is going to go faster than somebody--

Chris: Sure is.

Dave: --putting a server next to - whatever - in their closet in Azerbaijan. That's going to be a lot slower.

Chris: Partially because of physics but not very much because of physics because the Internet does travel at -- believe it or not -- the speed of light.

Dave: Yeah.

Chris: That's how fast it goes across a wire. The problem is it's going to go at the speed of light, which is actually a trivial amount of time between U.S. West and Australia. That would be fine if that was truly the case. But it's going to bounce around through servers and software while it's doing that route, and that's going to slow it down. It's kind of physics but it's mostly software.

Dave: Yeah. There's software in between. There are servers picking it up and forwarding things.

Chris: Load balancing and who knows.

Dave: Yeah.

Chris: Yeah.

Dave: Yeah, and then if you think about... if you play video games. You played StarCraft.

Chris: Hmm...

Dave: You would always want to be on the server closest to you. When I play Overwatch, I'm on a Dallas server.

Chris: Yeah, right on.

Dave: That's three hours away by car, right?

Chris: Your ping is low, right?

Dave: My ping is low, and so there are a lot of people talking about East Coast, West Coast ping.

Chris: Mm-hmm.

Dave: You always kind of want to be on a server near where you're at, like if you're playing on an Asian server, they're just going to beat you up because they're really good. But then also--

Chris: It actually matters in a real-time game, heavily, heavily.

Dave: Yeah, but then they're also on sub-millisecond responses. Anyway, that's all to say edge, I think, is just computers close to where people are.

Chris: Yeah.

Dave: There are different kinds.

00:37:26

Chris: To extend that a little bit, the biggest tournaments, they don't use the Internet at all. They go to a location and use an intranet.

Dave: Yeah, the LAN, so they don't even... And apparently -- I've heard... This is me, eSports Dave Rupert here putting on my eSports commentary hat. Apparently, it's a totally different experience, different enough for pros who have played the game for years. Then they go play on LAN. It takes a bit to adjust because everything is so fast. There's no--

Chris: Oh, your worse because of the fastness?

Dave: Yeah!

Chris: Wow.

Dave: Because it's like how you - whatever - used to maybe a little - whatever -- mouse movement.

Chris: Yeah. Cuing up directions.

Dave: Yeah.

Chris: Sure.

Dave: Maybe your rhythm on how or - whatever.

Chris: Interesting.

Dave: Your game sense gets a little bit off.

Chris: Yeah. That's interesting.

Dave: Because it's so much faster. Anyway--

[Laughter]

00:38:20

Chris: I was reading a post about this guy who bowls two-handed.

Dave: Yeah!

Chris: Unbelievable.

Dave: Heck yeah.

Chris: You know that guy? That guy is awesome.

Dave: Yeah. Yeah. My cousin works for the American Bowling Association.

Chris: Yeah?

Dave: This guy causes a stir. He recked the game or got people--

Chris: Truly, because he's super good at it, right?

Dave: Yeah.

Chris: But it looks so childish and people call it cheating and whatever. But he's such a... He really has leaned into it and kind of has an F-U attitude. But while reading about this guy... Here's another thing. When you play in the real, televised, serious bowling event, it's way harder.

Dave: Yeah.

Chris: Because it's like they Crisco the lanes or something.

Dave: Yes! Yes.

Chris: It's not the same as your bowling alley down the street. Y'all can hit your 250s on that all day. If you brought that skill to a tour, you'd get like an 80 because the lanes are just wicked slick.

Dave: Yeah, that's what my cousin was saying. Pro bowling is boring because people, when they're at home, they're bowling 200s, 300s.

Chris: Yeah.

Dave: They're just like, "I could be a pro bowler." They watch these people bowl. But on a pro lane, it's only like 45% of the lane is slicked - or something like that. But at your home lanes, they just juice them, so you're just screaming down the lanes, and you feel like a champ.

It's this whole thing. Your pro bowling center or your home bowling center wants to make you feel good. You know?

Chris: Yeah, right.

Dave: They want you to come back. They want you to... It's like whatever... the corked bats. They want you to feel like you are good at bowling and you're going to come back.

But the pro circuit is like--

Chris: They want you to feel bad. [Laughter]

Dave: Well, we have very strict regulations on what we allow.

Chris: Yeah, I could see that, too, right? It's not... Maybe a little variation is okay, but maybe not.

I'm thinking about how, in baseball, the outfields are differently far away and things like that. But football fields are 100 yards. No variation there.

Dave: Oh, yeah. If you watched a bowling tournament and everyone threw 300, it's like--

Chris: Yeah.

Dave: --that was cool.

Chris: Yeah.

Dave: What was cool about that? That wasn't a challenge at all. Anyway, I think it's just a phenomenal-- Anyway. It's very cool. And it's apparently a problem because the pro bowling scene just seems like so - I don't know - junior league. They're like, "That guy only threw a 212? I could do that. I do that every day, or every week."

My cousin said pro bowling's biggest problem... Sorry. Bowling's biggest challenge is bowlers, I think is what he said. I thought about that in terms of programming and code.

Then I thought, "Web development's biggest challenge is Web developers because we do the same thing, I think." We think we're all, like, "Oh, man. I can 10x out this app, this to-do app." It's like, "That's cool, but can you work with other people because that's a super different operation."

Chris: Yeah. I know what you mean.

00:41:50

[Banjo music starts]

Chris: Hey, hey, ShopTalk listeners. Since you're listening to this show, probably you enjoy it a little bit. And if that's the case, I think you'll also enjoy listening to the Design Better Podcast.

It's another podcast. It's about the intersection of design, technology, and the creative process, from our pals Aarron Walter and Eli Woolery. They do a great job with that show. Recently published a conversation with Matt Mullenweg - perhaps you know - the CEO of Automattic who talked about founding WordPress and how AI is changing development and his love of jazz.

I love listening to interviews with Matt. He's such a level-headed guy. He's so calm. I feel like it's like the world is good that he's a CEO of stuff because it's just the perfect job for him.

They had this conversation with Tony Fadell who is fascinating. He was sharing stories about engineering the iPod and the iPhone and dealing with assholes. [Laughter] Pretty good.

And some old ShopTalk buddies like Dan Mal and Brad Frost have a show over there talking about their designer-developer collaboration, which is of course just fascinating stuff because they are so good at talking about it.

We think you're going to like them. Go subscribe to the Design Better Podcast at designbetterpodcast.com -- nice URL -- or wherever you listen to podcasts.

[Banjo music stops]

00:43:23

Chris: Old Ben Jackson here.

Dave: Writes in.

Chris: Fancy new MacBook Pro. Congratulations. New machine. Hope you enjoy it. "It's amazing for developing on," Ben says. But he's concerned that... or he writes in, "But I'm concerned that I get an unrealistic impression of the performance of my websites. I can chuck a load of animations and filters, whatever I like, and my site still runs smoothly. But this isn't the case for people using, for example, old Chromebooks. Do you have any techniques you'd like to share for testing out your sites on machines with slower CPUs?"

I guess CPUs and memory and GPUs and every other thing that a computer has kind of ultimately factors into websites.

Dave: Yeah. I mean I can say even just with my switch to Windows and stuff like that.

Chris: Mm-hmm.

Dave: You definitely are experiencing things different. That slick animation is super cool and it's 60 FPS on your machine, 120 FPS. But when you pull it up on a five-year-old Surface or a five-year-old Chromebook, it does not feel the same.

It's worth noting, even when you pull it up on your iPhone, your iPhone 13x or whatever we have now. That's different than somebody's--

Chris: Yeah.

Dave: A two-year-old Android is going to feel way... Even top-of-the-line Android is going to feel way different.

Stuff you can do, just because I do this, I'll jump in. In the performance tab in Web inspector, there's a CPU throttling. You can be like 6x slow down. Just go all the way down. Don't worry about it.

Then you can also throttle the network, and that makes it feel slow.

The CPU throttling is pretty good. I don't think you need to really necessarily memory your GPU, per se, but definitely CPU throttle it. And you'll get more of a sense.

Chris: That's awesome. What a great feature.

Dave: Yeah. That's in Chrome, I guess I should say. Other browsers may have something similar.

But what you should also do or I would consider doing is if you're in a situation. A Chromebook is $99 at BestBuy. If Chromebook is on your target audience list, like you are developing for schools or something like that or ed-tech or something like that, it might be worth just getting a device, the old device lab, and you have a computer that you test on.

It might be worth checking that out and just seeing how that feels and how it works. Does it still work? Does it fall over? Intentionally having a device that is constrained.

Chris: Yeah. pretty cool. If it's not directly your job, at least talking about it, mentioning it, helping the team who is responsible for that know.

There are general things. That's kind of what Lighthouse and stuff is supposed to be helping you do (to some degree). It's like if you're getting really bad scores on that, that's trying to tell you that your website has bad performance for various reasons. I know animations are kind of a different ballgame.

Dave: Yeah.

00:46:54

Chris: Still, best practices are there to help you with stuff like this. You're supposed to just know that you're not supposed to animate the left property. That's hard one knowledge, but hopefully is spread around enough that you start to learn these things. Hopefully, even though you have a nice computer, you're still making good choices for people with lower-powered devices.

Dave: If you want a good phone to test on, Alcatel is $200. They have under $200 phones. I'm looking at a $79 Android phone. Guess what, buddy. That's going to give you the feeling of being on a constrained device. These are some of the best-selling phones in the world. I don't know, man.

Chris: That's amazing. Is it really?

Dave: If you drop your Android... Well, it's like you drop your Android in a toilet, dude. You're not going to go buy... You know? [Laughter] You go get the $38 phone. They have a $38 phone, prepaid smartphone.

Chris: Yeah. Is it Android?

Dave: Android.

Chris: Truly?

Dave: Yeah. Yeah. Yeah, there's no $38 iPhones. [Laughter] But yeah, I mean it's a $38 Android, man.

Chris: Right. There's no other choice anymore, right? There's no third digital mobile operating system.

Dave: Like a WebOS. No, no. Not really.

Chris: Yeah. Microsoft had a thing for a minute. Firefox had a thing for a minute. But they just all pooperoo, right?

Dave: Yeah.

Chris: They can't handle... Yeah.

Dave: I think it's smart to acknowledge that these Mac, these aluminum MacBooks and these iPhones and even higher-end hardware like my gaming PC or something like that, these are luxury devices. These are not... These aren't "git 'er done" devices.

Chris: Mm-hmm.

Dave: These are devices that we have a luxury of. We put them in our little fancy offices with our little plants next to them. These are not, like, "I'm working from a truck on 2G out in the desert."

Chris: Hmm...

Dave: It's just different, right?

Chris: Yeah. Throttling your Internet is a good one, too. Yeah, that's fun to do. Did you already mention that one? Sorry if you did.

Dave: Yeah. No, no, it's in the same tab as the CPU slowdown.

Chris: The network tab?

Dave: Yeah. Yeah, network will give you the throttling. Then performance will give you throttling and CPUs. Worth doing. If you want to go hard mode, disable cache. Make sure you're not just... I don't know.

Chris: I have that on absolutely all the time.

Dave: Yeah.

Chris: For more reasons than just performance. When you're developing, you're like, "I just changed a file, so I don't care what my local dev environment says. Please--"

Dave: Well, and that's another thing. These devices have different caches. The L2 cache - or whatever - is just different. And so, the amount of stuff in memory, random access memory, is a lot lower because these devices are constrained.

I don't think panic, but I think if you are worried about it or are developing towards a target, definitely do it. Definitely invest $99. [Laughter] Literally, buy the cheapest device you can find that fits the specs you're looking for. That's a decent strategy.

My kid gets a free Chromebook from his school. I can pull stuff up and check it. I guess I get flagged if it's too or if it's out of the list of websites he can check or something, but--

Chris: Really great blog post format, too. Hey, I wanted to make sure my website was good for this device. I got that device. I tested the website. It wasn't good. This is what I did to fix it. Now it's better.

Dave: Oh, man. Look at that.

Chris: Awesome. I would read that.

Dave: That's--

Chris: You should write that about 500 times and then make the world's greatest blog.

Dave: About 5,000 hits right there. Guaranteed. I'll just lock that in. That's 5K. Yeah.

00:51:12

Chris: Sounds really good. Let's see. We've got another one from Bryan Zilisch.

Dave: Oh, interesting. Okay. You threw us off with the constant there, Brian.

Chris: I love that name. It's really cool. Yeah, go ahead, Dave.

Dave: Brian writes in, "I'd love for you to talk about and break down what proxy and reverse proxy are. I often hear you mention putting Cloudflare in front. Why? And how does that work? I kind of understand it but have never implemented it before, so would love to hear you two address it: proxy and reverse proxy."

Chris: Sure. Yeah. The point is that they're concepts. But maybe they're concepts that are best illustrated by example, so I'll give you an example. But then remember that it's just an example. The important part is that it's a concept that can be applied more broadly.

Let's say you needed to have your website use the unsplash. Y'all know unsplash. It's like a service for returning free to use, really pretty nice stock photography images.

Dave: Mm-hmm.

Chris: They have an API, right? Speaking of one of our sponsors, Notion, you could... For example, when you add a cover, a top graphic to a Notion page, there's a little unsplash button. You can search for filing cabinets or something. You'll get nice photos of those, and you can plop it right in there.

They notably have powered that by the unsplash API. It's pretty cool.

Dave: Mm-hmm. Mm-hmm.

Chris: They have unsplash integration. Now, you could probably use the unsplash API client side. But I think they highly discourage that if not outright disallow it because they give you an API key and they don't want those API keys to be out there. If you make that request client side, that API key will be out there.

Dave: Mm-hmm.

Chris: So, a lot of companies -- and I'm sure Notion has done it this way because they have their big person pants on, you know -- make the call to unsplash server side. They probably have a route or something that's like notion.com/api/unsplash -- or something. The client-side hits their route on their website and that actually hits unsplash, thereby protecting the API key along the way.

But that little middle piece of code, that server-side code that's on your servers, it's essentially a proxy. It's just a little passthrough. It just makes the call to unsplash for you. If you've written your own little proxy there to hit an API, that's just what a proxy is. That's just one example of what a proxy is. It's just code that's on your site that does some external job.

How'd I do? Is there another way to explain it?

00:54:18

Dave: I think that's great. Like forwarding, right? If I can make daverupert.com be a proxy for chriscoyier.net, and so you go to daverupert.com. You actually see Chris's blog. I could have it completely forward.

There are ways, like Chris could sue me or whatever. [Laughter] Don't recommend this. When your big idea is ebay2, just don't recommend that.

Chris: Yeah, it means you've written code that says, "Hey, when I get a Web request for daverupert.com, behind the scenes, go fetch chriscoyier.net and return whatever you get from there and return it."

Dave: Yeah.

Chris: Dave has written a proxy now and made a network request on the server side that's returning some third-party stuff.

Dave: Yeah.

Chris: Now, I don't know that we nailed it. There's probably a more technical definition of proxy. But in practice, I feel like that's what it means.

Dave: I feel like that's pretty close. Then a reverse proxy is sort of... It's hard to say, but it's like the other way. It's like there is a proxy server that talks to a server and then the server... Your actual server is going to send back to the reverse proxy and say, "Hey, pretend you're me," or whatever.

A load balancer is a good example of this. You're actually running your app on five servers, and the load balancer is saying, "Okay, server one, tell me what to say." They're like, "Cool, yeah, reverse proxy this back. Tell them you got - whatever - User 123."

"Okay, Server B, this other guy is coming in." Then he's like, "Great. Tell him he's User 234."

You can kind of think of caching and all that stuff, the edge stuff. That would kind of all be probably under reverse proxy.

00:56:07

Chris: Yeah. You know how I have always thought of it? It freaks me out because it doesn't seem very reverse to me. It just seems like a type of proxy. But that reverse proxies are between you and your own servers.

Dave: Okay.

Chris: Whereas proxies are between you and third-party servers.

Dave: Ooh, that sounds pretty good. Yeah. That sounds like... I like it.

Chris: Yeah.

Dave: I'm going to say that's it.

Chris: They've just picked up and moved.

Dave: Yeah. Then there's also... We probably explained this poorly. There are situations I'm using where it's like I know, like segment gets caught up in a lot of ad blockers. That's good because it usually is used for nefarious things.

I'm not using it for nefarious things. I'm literally just seeing if people are using features in my application, like did user use... Did anyone use this feature?

We built a proxy out to almost like tunnel to send requests to our segment install and then get information back.

Chris: Oh, you self-installed segment? Good job. I've always wanted to try that.

Dave: Yeah. Segment is cool. I recommend it. But then I don't know. You could just use a service or something. But the service is going to get caught up, and you're probably going to have to build a proxy anyway. I don't know.

Chris: Yeah. That's one of those things where I don't even know what it does, but I assume, because it's this big, popular project, that it has solved some problems that I don't even know about yet.

Dave: It's probably overkill for us, but it's basically like a single point of analytics broadcasting, so you get - whatever - a page view event, and it'll say, "Great. I got the page view event. Which apps should I send this to?"

Chris: Yeah. Google Analytics and Page Heap and whatever other ones.

Dave: Yeah.

Chris: Appcues. I've always liked that. It also is kind of - I don't know - perhaps gray hattedly makes those requests first party instead of third, which gets around some blockage concerns. Does everybody know that? Is that obvious to everyone?

Dave: Yeah. I don't know if it's... Yeah. I think that is murky waters. I don't know. [Laughter]

Really, I don't care who you are. I really just care... I just need numbers. If the numbers go up, that's what I'm looking for.

Chris: I'm sure I'm justifying my own stuff there. But I think people assume, "Oh, I install an ad blocker or a privacy shield or something, so in my head, I have blocked any tracking of what my actions are on the Web." But you're like, "Eh, but it's not. It's not working on my site."

You know I don't use segment, but any site that is and are using it in this way, because you can use segment third-party, too. I bet that is blocked by trackers.

Dave: Yeah. Yeah.

Chris: But if you proxy it through your own site, which surely they have documentation for and encourage you doing because, in a way, it makes your analytics more useful (the less blocked they are). Good use for a proxy.

Dave: Yeah. Good example of a proxy. But I think it's a thing we should encourage because if people are using... But I guess most people are using Segment and Google and something else and something and whatever, Hot Jar and all the stuff.

I think its original intent was to be this hub that broadcasts out for performance reasons. But I think it just becomes another thing people install. Anyway--

Chris: Yeah. Great. Well, Dave, I think we did it. We actually answered some questions.

Dave: Answered questions on our question and answer podcast. Hey!

Chris: At least a B, I'd say, on those questions. Not bad.

Dave: Yeah. We did good.

Chris: [Laughter]

Dave: Write a blog post. Tell us what we got wrong. I appreciate that. Do not send tweets. I will not read them. I'd appreciate that. [Laughter]

Anything else, man? I think we're not taking a break. I think we are clear to keep recording, so we'll do that.

Chris: Mm-hmm.

Dave: Then, yeah, we're just--

Chris: I think I've got at least two guests coming up soon, too, so look forward to that. Our tastes in guests, of course, is impeccable.

Dave: No duds. We'll continue our no duds streak, and it's going to be great.

All right, well, thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show.

Follow us. I don't care. Then join us in the Patreon. The one thing I do care about. Join us in the patreon.com/shoptalkshow Discord because it's fun. I like it. I like the people in there.

Anyway, all right, then that's all I've got.

Chris: Me too.

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

Chris: [Loud inhale] [Whispering] ShopTalkShow.com.