Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show, a podcast all about front-end Web design and development. I'm Dave Rupert and with me is Chris Coyier. Hey, Chris.

Chris Coyier: Hey! How ya doing, man? Yeah, I just--

Dave: 491.

Chris: 491.

Dave: Just bulldozing towards episode 500.

Chris: That's right. We have no particular plans.

Dave: The drama is building.

Chris: That's how we roll.

Dave: The drama. Yeah.

Chris: What are we going to do for 500? Ah, everybody is like, "You should do a clip show." I'm like, "You know how much work that is?!"

Dave: Yeah.

Chris: Go listen to hundreds of shows and extra little clips? Yeah, that sounds like 18 times harder.

Dave: Chris Enns would charge us $9 million.

Chris: [Laughter]

[Cash register bell rings]

Dave: It would be so expensive. [Laughter]

Chris: It would be kind of fun. There are plenty of opportunities for us to do fun things. In fact, our fun meter is off the charts because we've been doing videos and stuff. They're on not like a hiatus, but whatever. We just need a minute, and there'll be another drop of videos.

Dave: Mm-hmm.

Chris: Definitely look forward to that all next year because they've been fun as heck to do.

I was also on a podcast, a little bender, because I did a little mini road trip up to Portland, which is 3.5, 4 hours a week, and then 2 ways. It's like, man, you can get a lot of podcast listening in there - I tell you what - especially at 1.5x. You know?

Dave: Yeah. Oh, yeah. Good. Good. You're cruising.

Chris: How good or how fast do you go, though? Are you a 2x guy?

Dave: 2x, absolutely, my dude. I can even hit 3 if I'm feeling good, unless there's a British accent. Them I'm back down to like 1.2.

Chris: You've got to squeeze it?

Dave: Yeah.

Chris: Yeah. On YouTube, too, or just audio?

Dave: YouTube, too, man. Everything.

Chris: Yeah. Do your settings stick on YouTube? On my podcatcher, it sticks. I download a podcast I've never listened to before, it's at one. My preferred is 1.4. I'm still a baby. I'm still working on my speed.

Dave: You'll get there. You'll get there.

Chris: You get there?

Dave: YouTube, yeah, I think YouTube is doing some intelligent stuff. It defaults to two, I think, when there's a lot of talking. But I also watch video game vods.

Chris: Yeah. Yeah.

Dave: Which you don't want to watch at 2x. Somebody sniping a guy from across the map--

Chris: Well, it's like music, too. What if a band comes on? You can't listen to that--

Dave: Yeah. Yeah. You don't want your NPR tiny desks at 2x either. It seems like it kind of knows, like, "Oh, this is a tech video. Boom. 2x."

Chris: Yeah.

Dave: Versus a talk or something. I don't know but it's not that difficult. I just hit the button and switch it up, or sometimes I'll even do document.queryselectorall.

Chris: Oh, you'll just hand do it? Nice.

Dave: Or query select a video playback rate two.

00:02:51

Chris: Do you picture-in-picture it, too, and do other work, or are you focused on it?

Dave: I do picture-in-picture. Can I teach you a little trick? Do you want to know?

Chris: Oh, I'd love it. Yeah, I would love a trick.

Dave: In Microsoft Edge (and maybe even on Chrome here), when it turns the little play icon into a speaker to say, "Hey, something is playing," you can right-click that and do picture-in-picture from YouTube.com. So, you can picture-in-picture because the YouTube picture-in-picture just minimizes it on the website. It doesn't actually do PIP.

Chris: Oh! Yeah. All right. I have things to learn here.

Dave: Cool tricks.

Chris: Yeah. I'm just on a real YouTube bender just because it's just amazing the quality of content on there. I'll look, and it'll be like, "Oh, there's Tom Scott again telling me about microwaves - or whatever." Love Tom Scott.

Dave: Yeah.

Chris: But then I'll be like, "Kevin Paul video, got to see what a good YouTuber, a good tech YouTuber is doing."

[Laughter]

Chris: Check that out. Then be like, "Oh, there's some Chrome dev stuff I should probably watch. It's only five minutes. I'll just watch it quick." Then I'm like, "Oh, this guy about--"

Dave: Mm-hmm.

Chris: The algorithm -- and all the kids talk about how good the TikTok algorithm is, and that's fine, but I still feel like--

Dave: The TikTok algorithm is real good.

Chris: I like that okay, but there's just something about YouTube, for me, because of how I can trick my brain into how educational it is.

Dave: Yeah.

Chris: It kind of actually is sometimes, but then I'm 14 minutes into a StarCraft 2 video again, and then I'm like, "Well, maybe it wasn't so educational."

Dave: You know what's nice about the YouTube algorithm is it kind of knows when you're done mining a vein of content. [Laughter] It's sort of like, "Okay. You've watched all the how-to Dungeons and Dragons videos," how-to interesting Dungeons and Dragons.

It's kind of like, "Okay, you've watched just about every video on Japanese carpentry we have, so we're just going to show you an old one you've already watched just to give you a hint that you've watched them all."

Chris: Oh! You think that's what's going on there? Ah, interesting. Yeah.

Dave: No. I think it's just the algorithm is like, "Maybe he'll watch this one again. Let's see."

Chris: Yeah. I think you're right there. I've been getting more repeats lately. Although, yeah, I go up and down.

Dave: Mm-hmm.

Chris: Sometimes, my nighttime is just like, "I'm just all Netflix this month."

Dave: Right. Right.

Chris: No. No. I'm a YouTuber now.

Dave: Right now it's YouTube? Yeah. I did buy a whole iPad just to watch YouTube and I'm using the heck out of it.

[Laughter]

Chris: It's just amazing. I go down music veins. Uh, uh! Okay, anyway, we want to be a part of this revolution. Please hire us to do your YouTubes - whatever that means.

Dave: Yeah.

Chris: Sponsor us, companies. All right. I love talking about websites, though, even more. You know?

Dave: I love websites.

Chris: Yeah.

Dave: Websites are good.

00:05:48

Chris: I'm going to throw a weird one at you, unless you've got one for me. Then we'll trade.

Dave: Nah, hit me. Go. What is it?

Chris: I'm thinking about performance stuff as it relates to CSS.

Dave: Mm-hmm.

Chris: When it's more confusing than I want it to be. Like a classic one is will change. How long has will change been a thing? Years.

Dave: 2010.

Chris: 2005, 2010.

Dave: Yeah.

Chris: Ooh, you think it's that old? It could be. You know what I don't get? Will change. I literally don't get it.

I know that you're supposed to say, "Will change," and then you put the thing that you're going to change, which is like transform, probably, and then it'll do that, but when and why and what on my websites am I screwing up, and am I using it in places I shouldn't? How do I know if it's working or not? I literally don't get it.

Dave: Hmm.

Chris: All these years later - don't get it. Now--

Yeah, go ahead.

00:06:44

Dave: Well, I would say the way I understand it is--

Chris: Mm-hmm. Hit me.

Dave: Basically, use GPU. [Laughter] It could have been use gpu="true" or something like that.

Chris: [Laughter] Yeah.

Dave: In old, old versions, it would actually raster some of that content, so it was like, "I don't have to refigure this out. I'm just going to raster this and then apply transforms," but I think browsers have gotten smarter. It doesn't quite do a raster on that. If you're scaling, it would just scale it kind of like a JPEG or something.

Chris: Yeah [indiscernible].

Dave: Yeah, but I don't think that works out anymore.

Chris: Yeah.

Dave: But that's how I've always understood it.

Chris: Doesn't transform also mean use GPU? Why would I say will change on a transform? That's the same thing.

Dave: Historically, it was transform did not use GPU, but transform 3D did. But what was weird was, it was like, "Oh, we need this in spec." Then Edge, I think, at the time -- or maybe it was IE -- was just like, "We don't need it. We've already GPU optimized this whole thing.

Chris: Hmm.

Dave: This whole render pipeline is already on the GPU. I understand we need to implement that property for CSS compat, but we don't use it. It doesn't do anything in our engine.

It's a very Chrome, WebKit bespoke thing.

Chris: Oh. It just doesn't seem to be in the zeitgeist either. Despite my not understanding of it, I don't see it thrown around a lot. In the tutorials I read, in the tutorials I publish, I'm not seeing it loaded up with will change.

Dave: Yeah, but how many of those do you read and see on a daily basis?

[Laughter]

Dave: Really, like five?

Chris: Dave, it's more than the average person. I'll tell you that.

Dave: Really? Okay. Okay.

Chris: Yes. [Laughter]

Dave: Yeah. No, that's funny. I wonder if it--

I think a lot of the optimizations came out and basically replaced that to some degree. There are some times you can get some juice out of it - I feel like. But maybe I'm totally wrong. I'm gaslit.

Chris: I just want to see it. I want to see one.

No. No, you're not. I'm sure you're not. And I feel like I have maybe ever seen it, but it's been so long that it's now disappeared from my mind.

Please, listeners. Send me a CodePen or whatever - wherever you want - where I can comment out will change and just see it suck, and then put back in will change and watch it be good. I just want to see it, any one demo.

Dave: Mm-hmm. Okay.

Chris: I will--

I'm not questioning it. I'm literally asking. I want to see it because I'm sure it's a thing. Even if you tell me, "Oh, you're not going to notice it on your MacBook, but if you bust out some old phone or something, then you'll see it. I'll be like, "Cool." Then I will do that.

There are others, though, that have me thinking in the same vein. I just wanted to bitch about that one first just for fun.

Dave: Sure. Sure. What are the other ones?

00:09:40

Chris: There was a post the other day that was Johan Isaksson. He said, "How I made Google's data grid scroll 10x faster with one line of CSS," and it was like--

Dave: Content visibility, right?

Chris: Uh--

Dave: No?

Chris: No, but that's where I'm going. It is--

Dave: Okay.

Chris: Contain:strict.

Dave: Ah, yeah, yeah, yeah, yeah.

Chris: That was the line.

Dave: Okay. Yeah.

Chris: Contain:strict. Okay, so what does it do? I have a little bit of an understanding, but not a million times. I don't use it. I'll tell you that. My brain doesn't reach for it.

Dave: Yeah. I'm not like, "Oh, the fix is contain:strict." [Laughter] No, never.

Chris: Yeah, and there's contain:content, contain:size, contain:layout. Some of this has entered our consciousness a little bit because of container queries.

Dave: Mm-hmm.

Chris: Wasn't some of this (at one time) required to kick off a container query to get it to work?

Dave: That was sort of the -- because you say contain:size or contain:X or something like that. I forget the actual values.

Chris: Now it's container and it got confusing.

Dave: But you would say contain:size and, basically, you're saying it's not going to change height and width on you, so you can just pretend that's going to be the same and apply these changes within here. So, yeah, I don't know, but I don't know how deep that goes.

If you squeeze a browser, does contain:size, that doesn't just do overflow visible. It's going to squeeze the content, right?

Chris: Yeah. What if you lie? Is that what you're saying? It's not saying, "Oh, its natural width at the moment," even though you didn't set one, "is 319 pixels." And you said contain:layout, so even though I would naturally wrap because now the browser or the space that it's in is only 200 pixels wide or something, is it just going to ignore that and stay 319 pixels wide because you said to contain it, or is it going to be like, "Bro! You lied to me, but I know what I have to do"?

Dave: Yeah. All those optimizations I do for you are now gone.

Chris: I mean I suppose we could just read the RTFM here. I'm just saying I'm putting these things in a bucket of, like, CSS things that obviously have massive impacts on performance to orders of magnitude of speed differences depending on the situation and being, frankly, a little embarrassed that I don't really reach for them or understand them as well as I should. That's what I'm trying to say here.

Dave: Yeah. No, I'm in the same -- it's like, I'm embarrassed, I don't know the better list. My list of shame or CSS list of shame here.

The content visibility was the one I said, and that's--

Chris: That's the third one, yeah, that Jake Archibald famously is like, "Look at this Wikipedia document is now 10x faster because all that crap below the fold just didn't have to paint at all." That one?

00:12:50

Dave: Mm-hmm. Yeah, and then there was a bug [laughter] that ruined the whole page, but it's all fixed. But it was, the HTML spec is ten megabytes long - or something like that. You load that. It takes - whatever - 100 seconds or something. He made it load in one second because he could just say, "Don't paint the rest of the page. Only paint the stuff you see."

But what gets me about that is content visibility - I don't know - 1000 pixels. Then that's the solution? [Laughter] It seems to me you're basically, again, kind of just lying.

Chris: There was a weird magic number. Yeah, it was at some time explained to me that the lying doesn't actually matter that much because, when it gets time to actually paint that thing, it still just paints at whatever it would be. It's like the thousand is a good enough proxy because you're not painting it anyway. It's just giving--

Dave: It's like the skeleton block, basically.

Chris: Yeah.

Dave: It's like your skeleton height?

Chris: Right.

Dave: Yeah.

Chris: Yeah. Right, and then by the time it gets there, that number doesn't matter. But that number was tall enough to replicate the stuff happening at the top of the page that did matter.

Dave: [Singing voice] But what is height in a world where the browser squeezes?

Chris: [Laughter] I know. I know.

Dave: That's my musical I'm writing, my Broadway play.

Chris: [Laughter] That's the best. We should make that our Discord.

Dave: [Laughter]

Chris: Do they have the channel things like Slack does where you're like, "What is the meaning of this channel?"

Dave: Oh--

Chris: I'm not sure they do in Discord, actually.

Dave: Yeah, topics. We've got topics.

Chris: Oh, yeah.

Dave: We've got topics.

Chris: Yeah. Put a musical note and say, [Singing voice] "What is height in a world where browsers squeeze?"

Dave: [Laughter] That's so good.

Chris: [Laughter]

00:14:38

Dave: I made a song. Can we totally tangent? Can we totally tangent?

I made a banger, cut a banger this week for my kids.

Chris: [Laughter] Oh, yeah?

Dave: It's like, "What do you guys want for breakfast?" You know.

Chris: Right.

Dave: It's 6:30 in the morning. We're all dragging. Whatever. Dad is getting through this. "What do you want for breakfast?"

Eyes closed, "Mini bagel."

I'm like, "Great," and I just go [singing to the tune of Silver Bells], "Mini bagel, mini bagel, mini bagel for you."

Chris: [Laughter]

Dave: Oh, it's a banger, dude.

Chris: Oh, Silver Bells?

Dave: Yeah. Tis the season. We're getting a lot of mileage out of recycling old Christmas tunes here.

Chris: Uh-huh. If it was a couple of weeks ago, you'd be like, [singing voice] "This is mini bagel. This is mini bagel."

Dave: [Laughter] Yeah. I started singing "All I want for Christmas is You," on the walk to school today, and I felt no shame.

Chris: [Laughter] It is time. Late November, holiday songs are--

Dave: Well, this is coming out in December, here, so--

Chris: Yeah.

Dave: Yeah.

Chris: You're God-dang right. Oh, yeah, this one is. Sorry. We're recording a little early, folks - behind the scenes.

Dave: Thanksgiving. You get it.

00:15:45

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Shortcut.

Have you ever been really happy with your project management tool? Most of them out there are either too simply for a growing engineering team or too complex for anyone to really want to use. Shortcut, formerly Clubhouse, by way - a name change - is different. It's built specifically for software teams. It's fast, intuitive, flexible, powerful, and many other nice, positive adjectives - happy.

Shortcut features include team-based workflows, org-wide goals and roadmaps, tight VCS integrations, keyboard-friendly interface, integrations planning. Sign up at shortcut.com/shoptalk. What a nice URL, shortcut.com/shoptalk. Get two months free. Very generous of them. Thank you.

You shouldn't have to project manage your project management.

[Banjo music stops]

00:16:48

Chris: Yeah, all right, so will change, contain, and what was the other one?

Dave: Content visibility.

Chris: Content visibility.

Dave: Mm-hmm.

Chris: I think that's great that they all exist, but I would like to participate in understanding them more. And then, because I'm in the business of helping other people understand them, to do that as well. If there are any guest authors out there that really want to dig in again, even though I'm sure I have published content about it on CSS-Tricks already, that doesn't matter. Let's revisit it fresh. Let's revisit it with our 2022 eyeballs.

Dave: You know what? Could I put one more on that pile?

Chris: Sure.

Dave: All-all.

Chris: Oh, just all, period?

Dave: ...initial -- what's the new one? Inert or inherit, those are brutal to me. All unset initial, and isn't there another one? There's a new one, another, a new one. I forget.

Chris: There's a value for all?

Dave: Yeah.

Chris: Hmm. Yeah, all is a beast.

Dave: I want to use all unset when it's, "Just nuke all the styles. I'm driving." I get that.

Chris: Yeah.

Dave: Like a button.

Chris: Right. It has some dangers, though, because it'll even reset your display. You're like, "Yeah, except for that!"

Dave: Yeah. [Laughter] Not that one!

Chris: [Laughter]

Dave: That's the one that makes it not just a tiny, baby span. Yeah.

Chris: Yeah. Tricky stuff. Yep. Okay, well, that's cool. Maybe we have some questions here to hit.

00:18:22

Dave: Let's hop over to the questions. Frank Noro writes, "Hey, longtime listener. What is the process of designing a great embed? I'm trying to design and build an embed for a 3D modeling Web app I'm helping build in my free time."

It's cadhub.xyz. It looks pretty good.

"And I'm fascinated by the process of paring down a productivity app to its minimum looks. What has been the process for either of you (in your work) in the past, especially for things like CodePen?"

Chris: Oh, this is sweet.

Dave: "I'm looking at CodePen and code sandbox embeds, and they're both clever and, to my question, so optimized for the normal experience, minimal customizable UI, accepting query parameters, all that stuff. I'm wondering what conversations shape them."

Chris: Yeah.

Dave: How'd that go, Chris? How did you do--?

Chris: Well, I think you're thinking about the right thing. You know I've seen, Frank, the way to totally punt on this and have it not be embarrassing but not be perhaps what you're gunning for is to just use responsive design so dramatically that even an iframe that renders at tiny, tiny, tiny, say 320 pixels wide, the entire interface of your app just morphs and become an embed.

Now you don't have to design a separate route or anything. It's just like this iframe the view that you're looking at and it'll be an embed. It's a little bit of a punt.

I think it could be done well. It reminds me of that mustard cutting stuff that was so popular years ago. You could be like, you know, load a very minimum page, report back the situation from the front-end. How wide am I? What am I looking at here? Do I look like an embed? Then load additional resources if necessary to boot up certain things.

If you can tell that if you're in a tiny space or that your network constrained or something that you could load some kind of light version of the site. That's the point, I think, of an embed is that the embed should be light because you're putting this on another webpage, so you're doubling how many Web pages load.

Dave: Mm-hmm. Mm-hmm.

Chris: I think it's your responsibility to do as little as you can.

Dave: Mm-hmm.

Chris: At CodePen, we never even shipped jQuery in an embed.

Dave: Oh, yeah.

Chris: It was all like, no, vanilla only. Let's make these things tiny, tiny, tiny, and always be scrutinizing what goes into an embed.

Then it gives you -- when it is a fresh route, like a different page, you get to totally design it from scratch, like, what is the experience of this thing? I can always uniquely and totally control it.

Also, if it's a different URL, it gives you this opportunity to do something like throw it on a different set of servers, maybe even connect to a read-only database or something that's somewhere else so that maybe if your main site goes down, the embeds do not.

Dave: Oh, yeah. Nice.

Chris: Right? Because that's a big deal because users are trusting you. There's a lot of trust in an embed.

Dave: That way your Hacker News traffic doesn't take down the big site where people are saving their CodePens.

Chris: You also have no control over that, somebody else's page getting popular. Not that you have any ... over your page getting popular either, but it's a little bit more random when you have embeds scattered all over the Internet.

Dave: Yeah.

Chris: I can tell you that CodePen gets -- at one time, the last measurement, which was at least a couple of years ago because we're not that big on page view style analytics, but it was about the same.

Dave: Oh, wow.

Chris: We got as much traffic to embeds as we did to the main site itself.

Dave: I would believe that.

Chris: I bet it's winning now.

Dave: Hmm. Yeah. I would believe that.

Chris: Yeah, so it's a big-deal page, in other words.

Dave: Yeah, because if I tweet out a CodePen link, people will go to it. They're interested. But if I tweet out a blog link, I think more than just CodePen friends will check it out.

Chris: Right. Yeah.

Dave: It's possible that it gets--

I wonder if I could see on my own posts. Maybe I'd do that. Maybe I'd make a for website and for CodePen pens and A/B test or something. See what gets more traffic.

00:22:51

Chris: Here's another thing I don't regret. Ultimately, it's an iframe. It has to be because that's what an embed is.

Dave: Mm-hmm.

Chris: ...You're trusting us to showcase this experience, right? I always offer that because if somebody wants to just straight up use an iframe (because they have to, because they're in some kind of CMS that doesn't let them - whatever). So, the alternative to the iframe is some kind of element. In our case, we use a P tag and we literally type content in there. We say, "This is a Pen by this author, and this is the title of it. Here's a link to it." Then a script tag, and the script tag replaces the P tag with an iframe on the fly.

The point of that is progressive enhancement in that if it doesn't load, that there's still a link to the content. It's not just nothing. Whereas, if an iframe gets stripped (because you're in some environment that doesn't allow it), then it's just gone. It's nothing, which is not great. I always kind of preferred the script technique.

The script technique has a couple of other advantages, too, that we can measure the space that it's going to be in. There are just a couple of extra bonus abilities that the script tag has that the iframe doesn't have. I forget the full list of them - or whatever. But that's one to think about, Frank, is how are you going to--? What code are you going to give people?

If you go with a script technique, or whatever you give somebody, that URL is forever. You're supporting that for the rest of your life.

Dave: Yeah. I was going to say the params in the URL kind of are fixed, right? That's going to be some technical debt, so you kind of got to nail that first try, right?

Chris: The whole URL. Params as well, yeah.

Dave: Because if you offer a little too much, you're going to maybe biff it. [Laughter]

Chris: Mm-hmm.

Dave: So, I would be careful about that. I even think about -- you offer a lot of style stuff.

Chris: Mm-hmm. Mm-hmm.

Dave: Like themes and stuff like that. I wonder if you could do that through CSS custom properties in a 2022 world here.

Chris: Yeah. Mm-hmm. That's where we're headed with it - for the record.

Dave: Just because those pass through down to an iframe, so that's cool. Then your iframe can say, "Cool. We got those. We know what those are."

Chris: Yeah. They're also relatively secure.

Dave: Yeah.

Chris: Yeah.

Dave: That's kind of -- I don't know. I really -- I use the CodePen one a lot. I really like that it has an "edit on CodePen button" because I'll see them all over the Internet, and I'm just like, click, edit. I know exactly what that's going to do, and that's going to be something I can kind of open up and view on the big screen.

00:25:36

Chris: Right. There's an option to make it editable right there as well. But I'll tell you we had a hell of a bug with that edit on CodePen thing. It's still outstanding. This is Safari only, so for whatever it's worth. And our traffic is not particularly Safari heavy, for whatever reason, so it hasn't been too pressing.

Let's say you have a tab open and you're on CodePen. Then you're on some other page, like daveruprt.com. There's an embed on it. You click that, you click that button you just said you like, "edit on CodePen." That'll take you right over to CodePen in a new tab. In that new tab, you will be logged out.

Dave: Oh!

Chris: Then if you even go back to that tab you were already on where you were logged in and refresh it, you're logged out. Safari has just decided to just nuke your login cookie.

Dave: Cookie from an iframe. [Tongue click]

Chris: When you click that, yeah, and I do not know why, but it's an open ticket and I think they're attempting to help and such. But it's pretty odd.

Dave: Probably their intelligent tracking prevention.

Chris: I think it does have something to do with that, but also it's a little more nuanced in that we use the same site header with the lax property, and it might have something to do with that.

Dave: Ah, okay. Yeah.

Chris: I don't know. It's tricky, and it's unfortunate, but that's the.... That's worked. That's day-to-day Sass stuff.

Dave: Yeah, because I guess there's probably a situation where they could, an attacker could try to read your session, your CodePen session - or something - from the iframe.

Chris: Hmm.

Dave: Like an extension or something. But you know.

Chris: Yeah. It's funny, though, because--

Dave: It shouldn't be, but--

Chris: Yeah, that cookie is not present in the embed, but maybe is it? Oh, that's actually interesting. I'll have to think because the embed doesn't care if you're logged in or out. The status for your login is irrelevant. But because it's served from codepen.io, I wonder if the cookie is still there?

Dave: Well, and maybe it's just nuking. It's like, "Oh, this guy tried to draw a CodePen cookie. I'm just going to nuke it." You know?

Chris: Yeah, it does have the word 'session' in the cookie, too. [Laughter]

Dave: Oh, okay. Well--

Chris: So, I wonder if that--

Dave: Might do it. Might do it.

Chris: Yeah. If it's just like a RegEx looking for session cookies. Yeah.

Dave: I would say CadHub looks really cool, Frank.

Chris: It does.

Dave: Hopefully, you get your embed sorted out.

Chris: Yeah. Make them lightweight and be ready to support them for a long time. Think about the code you want to give people.

Dave: Mm-hmm. Yeah. That little - whatever - whatchamacallit, the script tag, script source.

Chris: Yeah. I think, to some people, it feels like shady or something.

Dave: Mm-hmm.

Chris: Like, why? Why would you make me put third-party JavaScript on this page?

Dave: Mm-hmm.

00:28:26

Chris: In fact, I have a draft post here -- I wonder if it will be out by the time this is out? Probably not -- from Jeremy Keith. I'm running one of those series on CSS-Tricks again this year. I ask all developers a question, developers I admire, which is a true statement. They tell me, "Give me one thing to make a website better." That's going to be this year's theme. You have to pick one thing and answer that question.

Jeremy's -- spoiler alert. Sorry, Jeremy, if you wanted to keep it a secret. Too bad. I'm spoiling yours -- is that third-party JavaScript shouldn't even be allowed - period.

Dave: Whoa!

Chris: A hardline stance on that.

Dave: Wow.

Chris: And it's interesting. He might be on the right side of history on this. But I bring that up because I run a service that asks you to put third-party JavaScript on your site, and here I am telling you that I think it's actually a good idea.

I understand his points, but I think, for a UI/UX perspective of what we're offering, it's the better of the two options.

Dave: How to get something. Yeah, and then there's -- I think about if you wanted to even use a Web component. You can't use it without JavaScript. But maybe there's semi-first-party CDNs or something. [Laughter] I don't know. Second-party CDNs or something. I don't know.

Chris: I got a lot of crap for that the other day. Here's the situation. I'm sure you would agree because it is kind of a weird thing to think about.

It had to do with a video that you and I did. Remember when I showed you, oh, there's a Cloudflare worker and all you do is return a fetch for daverupert.com and, all of a sudden, you have another URL that is a proxy for the original?

Dave: As daverupert.com. Yeah, yeah.

Chris: Yeah, well, that proxy doesn't have to be a website. It could be just a JavaScript file.

Dave: Yeah.

Chris: Now you're proxying a third-party JavaScript file and then you attach it to your domain. It looks like a first-party JavaScript file. That's what people gave me crap for. They're like, "Uh, that's the worst idea ever."

What protect you used to get from cores, you now don't have anymore. You're giving a third party an extreme amount of control over your website into some JavaScript that you don't control.

Dave: I guess I understand. Yeah, that's fair.

Chris: You'd have to just trust the hell out of it because the third party could be you. It's just a different domain.

Dave: Yeah, yeah.

Chris: The third party could just be some other domain that you do actually control.

Dave: Yeah, I wonder if that's the definition. I don't know. It's like second-party as parties you actually trust. [Laughter]

Chris: Second party? Yeah, why not.

Dave: Yeah.

Chris: That could be it.

Dave: It's like somebody I'm actually in a relationship with. [Laughter]

Chris: Right.

Dave: And I can use their stuff. But no, I guess I understand that core sort of vector there. I'm sure people are very upset it blocks their ad blocker. [Laughter] Big tears. Yeah, all right.

Chris: Tricky stuff.

00:31:24

Dave: Hey, we've got another question.

Chris: Yeah.

Dave: Do you want to hit another one?

Chris: Sure. Nathan Brown writes in, "I'm beginning to hate front-end development, which is sad because, for decades, it's been my passion. The problem is the community and what I consider to be dogma. My ideals are simplicity, speed, portability, but I constantly feel these concepts are under attack as even being desirable at all. There's so much that you can't even question the use of in front-end development, else the community (and even your own team) will attack you."

Oh, I'm sorry, Nathan. That sounds like it sucks. There are a lot of words here from Nathan, but I think that captures the gist of it. You are burnt out, Nathan. You are not liking this job at the moment. I can tell you're very not liking this job at the moment. I don't know what to tell you. It sounds like you might be in a bad situation that's not 100% about front-end development entirely only.

Dave: I would say, too, I think he kind of goes through premature optimization, abstraction componentization, unit testing, and dev op, config files, and stuff like that - a few more gripes here.

Chris: Yeah.

Dave: Here's what I will say. There are teams that don't want -- that do have the value of simplicity, speed, and portability. That's part of the reason I use things like 11ty. It tries to keep it very simple, and it tries to deliver a fast product at the end. It's just a little tool. I guess it's a big tool, but a little tool that helps you generate websites faster.

You may even draw the line at 11ty -- 11ty is too much -- and I can understand that. But I think it's finding your lines -- What is too much and what is too little? -- and being able to clearly say, "Here's where I'm comfortable. Here's where I'm not."

Chris: Uh-huh.

Dave: You know what I mean? Just like we have to use React as dogma, React sucks is also dogma.

Chris: Yeah.

Dave: So, you have to figure out what you're bringing to the table other than nay-saying. I'm saying that to myself because I've had to figure that out.

00:34:02

Chris: Right but thank you for saying that because I think that's very important. Dogma is not, "I don't like what somebody else is saying." Dogmas is saying, "This is the way it is - period!" You know?

Dave: Mm-hmm.

Chris: And not having any open-mindedness. If you disagree with somebody because you think they're too stuck in their ways and your answer is, "No, it's exactly the opposite and I'm not listening to what you're saying either," you're also being dogmatic.

Dave: Mm-hmm.

Chris: Tricky. This is difficult stuff. I have a post on CSS-Tricks called "My Increasing Weariness of Dogmatism" because I feel like I was feeling like you're feeling right now, Nathan, about seeing too much dogma in the industry. I don't think it's reduced at all in the five years since I've written this article. I think my own attitude to it has been reversed.

Part of that is having friends like Dave Rupert who says smart things once in a while. Dave has a quote that's permanently burned into my memory of "You can just let other people be wrong." It just doesn't matter. In this case, it sounds like it might matter because there are some people on your own team. Then it does matter. But if it's just somebody else on the Internet and they're just saying something, even if you know it to be wrong, so what? So what?

Dave: Let it be wrong.

Chris: Just let them be wrong.

[Laughter]

Chris: It just doesn't matter.

Dave: You know what? They could be wrong for five or ten years.

Chris: [Laughter] Right.

Dave: You just have to watch them be wrong.

Chris: Mm-hmm.

Dave: You know what?

Chris: There's a little worrisome, just to finish the thought a little bit. Nathan, at one point you say, "I do not believe unit testing for things that are obvious," is a thing that you said.

Dave: Mm-hmm.

Chris: Okay. It sounds like you're feeling pretty strongly about that, like somebody said, "We need to do unit testing here," and you're saying that you don't need.

It might be like two dogmas hitting each other over the head. I'm not saying you're always like that, but there are some telltale signs here, Nathan, of some possible reverse dogma. Just be careful.

00:36:04

Dave: Yeah. No, I mean, again, I'm probably more like Nathan. I'm definitely in the "Uh, I don't want to do the testing. I don't want to be over-testing," or whatever.

But you know this last week, this week, in particular, I had to refactor this thing. It's just like we want to add features, and the more code you write, the more, like, "What is this doing?" sort of going on.

I just said, "You know what? I'm going to write tests for this," because I'm manipulating data, like my view form posts some data and it goes through. It says, "Okay. Make sure this field is called this, and this field is called that."

I'm just writing code. I'm writing tests to verify that the output is what I expect from this function. It's great [laughter] because A) I can't commit the bad code up, and then B) I see the green checkmarks. I get a little reward, like, "Hey, you wrote it right." Then even your tests are kind of like, "Hey, I'm able to actually prove that this is doing the job I set out to do."

I'm seeing the value right now currently this week, so I'm like, "Your testing is great." [Laughter]

Chris: [Laughter]

Dave: Even dumb ones. Then I've basically unit tested, and then I started copy/pasting those unit tests for another little function. I was like, "Wait. Maybe these could be the same function if they're doing the same thing, basically."

Chris: Hmm.

Dave: Now I'm reducing code. I'm getting back to that simplicity and portability thing we like and speed. Stuff you're doing now can feel dumb, but again there's Jeremy Keith. Again, we're talking about him. This is the Jeremy Keith fan club, apparently.

[Laughter]

Dave: He has this thing on Principles, a few talks on Principles, like with a capital P. It's just this idea of figure out what's important to you. He writes them down, and he collects people who write down their principles (or organizations or whatever).

Chris: Mm-hmm.

Dave: I just think it's really cool. Find out your principles and write them down. It's such a banger. I don't know. It's such a good idea to do that because when somebody says something to you like, "You have to write unit tests," you can say, "What principle of mine is this violating? I'm upset. What principle is this violating? Is it violating the simplicity thing?"

Chris: Hmm.

Dave: You can kind of like not negotiate, but you're just like, "This is what I'm going to get mad about," or "This is what I don't agree on," or whatever. I kind of meandered there, but what I'm saying is I think there's a lot of value in writing down your principles and then it may roundabout be helping you get to your goal of simplicity and speed and portability - even something dumb.

Chris: There you go. Yep. Good luck. If it's not just this dogma stuff, if you're worried about your team attacking you, it feels like there's something happening on an emotional level there that might not just be only that thing.

Dave: Yeah.

Chris: Good luck with that.

Dave: Yeah. Definitely put some feelers out for a new job.

[Laughter]

Chris: Can't hurt. Can't hurt.

Dave: Always be doing that.

Chris: Yeah. The fact that you know what a unit test is makes you qualified for a whole bunch of jobs.

Dave: Yeah. Yeah. You're in Fang territory or Mang territory.

Chris: [Laughter]

Dave: There you go.

00:39:53

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Automattic. You know the makers of Jetpack, the plugin I'm always going on about.

It is Cyber Monday as this podcast is dropping, so this is a little time-sensitive. That is Monday, November 29th. That's Cyber Monday, and that's 55% off your first year of all Jetpack products and plans. A pretty huge discount, so take stock, figure out what you maybe even need to buy, maybe even for the year. Plan ahead a little bit because 55% is no joke.

This is really time-sensitive. WooCommerce is having a Cyber Monday sale, too, but it ends Tuesday, November 30th, so it's tight. You've got to do it now: 40% off everything (with a few exceptions) -- go to the website to find out -- until 8:00 a.m. UTC on Tuesday, November 30th. That's 40% off everything in the WooCommerce store. That's extensions, themes, WooCommerce essentially, all that.

I know this is time-sensitive but get on it. If you're a WordPress user and plan to use WooCommerce, do use WooCommerce and Jetpack, that whole universe, huge sales. Get it done.

[Banjo music stops]

00:41:08

Dave: One more question. Sheila Brennan writes in, "Long time listener. Love the show." Hey, thank you for listening. "I'm wondering what your go-to tool is if you're going to create a slide deck that'll have a mix of text and code snippets. Do you reach for something platform agnostic or base your decision on the framework the code snippets will use, et cetera? React, et cetera?"

Chris: Mm-hmm. Mm-hmm.

Dave: Chris, do you have a--?

Chris: Well, I do, but I'm also embarrassed by it. It's to some degree for muscle memory reasons. I just use Keynote, and I just really like it. I think it's just a great, free app that Apple puts out that I'm happy building my slides in.

The reason I'm embarrassed by it is that it's not Web-based and there are so many great Web ones. For example, I would think my personality would lead me right to slides.com. It's by Hakim El Hattab.

Dave: Hakim El Hattab.

Chris: And his team, and the thing is absolutely gorgeous and extremely well done. That way it's like, well, you'll never lose a slide deck because it's a website. It's just very comfortable territory. It just couldn't be more well done, and I should build all my slide decks in it, and I just don't.

[Laughter]

Dave: Whomp.

Chris: It's just muscle memory and stuff of Keynote.

Dave: Yeah.

Chris: And liking the kind of tool structure there. What I like about both of those tools, I'll say, though, is I want a lot of control over every single slide. I want to be able to grab a piece of text and fiddle with it and drag it to the top right corner or, no, maybe it looks better in the bottom left corner. Maybe this image needs to be bigger or smaller or something.

I am turned off by tools that are like, "Make your slides in Markdown and just pick a template," and it barfs them out into a thing. I'm like, "Nope. Nope, nope, nope. Not enough control for me."

Dave: Mm-hmm.

Chris: I like that for people that want a good-looking slide deck and they don't want to think about typography, colors, placement, or anything. I think that's great that those tools exist, but I want a high touch thing, like if I'm going to do a talk.

This partially is where I'm at in my career. I'll speak at a meet-up or something, but if I'm going to do that, I'm just going to have some tabs open in my browser and just talk and click on crap in a browser. I don't mind that low-effort approach.

But if I'm going to be paid thousands of dollars to fly out to your city and do it, my brand and such (at the moment) is that I'm going to do my absolute best to deliver a professional speech. It's going to have the slides that are as good as I can make them that are clear and everything I want them to be: beautiful, funny, and all that stuff. I'm not going to use a "barf it out" slide tool for that. It doesn't feel right.

Dave: Yep.

Chris: These slides are a big deal to me. I spent ages polishing them.

00:44:14

Dave: Yeah. I'm in the same boat, pretty much exactly. I really like Slides. We actually have used Slides for a client and stuff like that just because they just wanted Web-based slides. Everyone is sharing PowerPoints, but you had to download that and pass that around. You can do Office 365, but even that's a bit of a clunky flow, right?

I like Slides. What's funny is you can use the reveal JS. You can home roll this yourself. It's basically sections build your slides. You use section elements, and so your brain is like, "Hey, I can make a generator, a Markdown generator that does this," and I've gone down the path of writing my own Web component framework or Markdown framework to build out slides.

Chris: Mm-hmm.

Dave: I always hit that point that you hit, Chris. I want full control. I want WYSIWYG, drag and drop, perfect sizing doing this. Then you get kind of caught up, too, on Web-based slides of, like, responsiveness, too, which is really hard. Kind of too much work for a talk, to be honest. [Laughter]

Chris: Yeah. Slides ... that, too, in that you just design it in a fixed size, and then it scales proportionately. So, you don't mess around with responsive design. It's just like aspect ratio scaled, which I think is absolutely the right approach.

Dave: Right.

Chris: I'm not going to come up with three layouts for every slide. It's not happening.

Dave: It's a lot. It's a lot of work. And so, I get nerd sniped by that, and that's bad for a talk. That's bad for my family.

[Laughter]

Dave: It's that level of bad, right? But I will say there are cool things like if you write in React, or something, and you want to do MDX. You want React samples.

Chris: Right. That can be awfully cool.

Dave: Who was this? Jxnblk has the MDX deck, which is pretty cool. Then I think I just saw this thing, slide.dev, which is like Markdown-based slides. What I think I like about this is it has a few built-in templates, like the full background.

Chris: Yeah.

Dave: The cover layout. It has a few starter templates that you could maybe use. I think that's cool. I would actually maybe want to give this a try for my next thing.

Chris: Mm-hmm.

Dave: But again, it's sort of like I'm an old dog, and so I have a way of doing it. Like you were saying, a level of expectation or quality that you're trying to deliver. Not that these can't deliver that, but you know the pathway. You have a pathway to get there now, and so picking up a new tool to maybe get there is kind of a big risk when you're putting together a talk in your spare time.

Chris: I agree. Yeah. The question from Sheila also specifically asked about code snippets. That's another reason maybe not to use Keynote because it has nothing for that, essentially. There is trickery to get it to work, but it's definitely not as clean as just paste some code in and tell it what language it is and get syntax highlighting or pick from different syntax highlighting or anything useful. I think something like Slides does. I'm sure there are plenty of others. If you roll your own, you can certainly just throw Prism at it - or whatever - and get a nice situation. Or you could drop in editable CodePen embeds - stuff like that.

Dave: Yeah. CodePen embeds are rad. I will say PowerPoint or Keynote is kind of hard if you're doing code snippets and then you have to change those later. That's a major weak point just because you have to copy the code with the format and paste it back in. That can be a nightmare is all I'm saying. In that sense, a JS-heavy slide deck might be great.

Chris: Yeah.

Dave: Yeah.

00:48:29

Chris: God, I'm just sitting here on the Slides homepage looking at their feature set. I'm like, "Oh, I really need to do this." [Laughter] It's so good.

Dave: [Laughter] It's really nice, and then it's all there. Then you can - yeah.

Chris: Yeah. You'll never lose it. That's one of the reasons I like Figma is because all of our work ever is just sitting in there. We don't have to transfer it to a new computer when I get one or anything like that. It's just permanently in the cloud, and that's how I like it. That's the strength of the Web, gosh darn it.

Dave: Mm-hmm. Yeah, and you can do HTML. You can do videos pretty easy, like embed videos and stuff like that. I've had problems with that in native software.

Chris: Yeah. You can search it ... select it. They're more accessible.

Dave: Mm-hmm.

Chris: The output of my fricken' keynotes is usually a PDF.

Dave: Right. An unreadable PDF.

Chris: Right.

Dave: Yeah.

Chris: I'm just poking fun at myself.

Dave: Yeah. No, but Hakim has been working on this since, like, 2010 - or something. [Laughter]

Chris: Right.

Dave: So, it's good. It's been through the paces. It's going to be better than something you're going to write, is what I want to say.

Chris: Right. You know what I wonder if it has?

Dave: It's going to be better than the thing you make.

Chris: I wonder because you were in Windows land so long, so you were in PowerPoint. You have more experience with different tools.

I'll tell you there's one thing in Keynote that's just tremendous. It's the magic move thing between two slides. If you have a slide, say, and you duplicate it, and then you move some of the stuff around, you moved the position and the scale of it and stuff, if you have the magic move transition on it from one slide to the next, everything just slides nicely into place. It's such a compelling way to move that mimics a well-made mobile app where you transition a page and it's not just an abrupt change. If the same thing is still on the page, but in a new position, it moves into place there. It's so well-done and so obvious how to use in Keynote that it's one of the things that I miss if I don't have Keynote.

Dave: Yeah.

Chris: Magic move is killer.

Dave: PowerPoint has morph, which is basically the same thing. It morphs between two slides, like a morph transition.

I will say, though, it works about half as good as magic move. Is that what it's called?

Chris: I think it's called magic move.

Dave: Yeah.

Chris: It's a slide transition. There are different types of transitions in Keynote. There are the ones that are just animations right on a page or steps on one slide that do this, then do this, then do this, like show bullet point by bullet point is the most kind of basic one. But then there's a whole different set of animations that are what happens between two slides.

Dave: Yeah. Yeah, I would 100% say I feel like magic move is a lot more elegant whereas morph is like, "Cool, I'm starting to do it," and then I farted it out on the page. And so, magic move is always like, "I'm doing the best."

Chris: That's the least surprising thing I've ever heard in my life.

[Laughter]

Dave: Yeah. Yeah. I will say, I like ... Dave Rupert does, #ad, but I feel like their software -- there's always one little thing you're like, "Meh. I don't know."

Chris: [Laughter]

00:51:52

Dave: There's a flavor. It has a flavor.

Chris: Yeah.

Dave: It's like coconut. You're going to notice it, and it's vomit terrible, just like coconut.

[Laughter]

Dave: I'm just kidding.

Chris: Oh, god. Coconut is the worst. Get out of here.

Dave: Hey! You're welcome.

Chris: [Laughter]

Dave: Hello, coconut haters to the ShopTalk Show.

Chris: Oh, my god.

Dave: If you like coconuts, just go ahead and throw your iPod in the ocean. [Laughter]

Chris: I like all fruits, too. If it's just some weird, like, black slime from Miami or whatever that has the world's weirdest fruit down there, I just love it. Almost 100% chance that I will like whatever fruit is given to me. I have some weird favorites, whatever, but coconut - death. And grapefruit. Coconuts and grapefruit can go to hell. Everything else is amazing.

Dave: [Laughter] I can do grapefruit, but I understand the sentiment.

Chris: [Laughter]

Dave: It's like, "Hey. I made an orange, but worse." It's just bitter juice.

Chris: Yeah.

Dave: You should eat it for breakfast because it's healthy.

Chris: Oh, yeah, and here's your special stupid spoon for it. Oh, my god.

Dave: Yeah. You need a special spoon. Because this fruit is so bad, we had to invent utensils for it.

Chris: Yeah.

Dave: It's that terrible.

Chris: It's horrible.

Dave: Yeah.

Chris: We had juice this morning. I got the juice out of -- you know, make some juice for Ruby. Pineapple juice is something. I'm like, "What did this cost? $20,000." You know how hard it is to grow a pineapple? It's this huge plant, huge plant, and the whole thing produces one pineapple in the middle of it. And you can only grow them in, like, Hawaii.

Dave: Mm-hmm.

Chris: It's got to be the most -- it should be $100 for a pineapple.

Dave: Mm-hmm.

Chris: Quanabana, that's an amazing fruit. Those really are like $100. Anyway, and then to squeeze. Imagine. The pineapple, they're juicy, but they're not that juicy. To get a whole jug of pineapple juice is like 30 pineapples. The fricken' jug should cost $1,000. So, the whole thing has got to be a lie.

Then I get out -- I open our snack drawer thing and there's watermelon jerky in there. What is it, five watermelons to make one piece of watermelon jerky? This also should be like $1,000.

Dave: Whoa!

Chris: All this -- watermelon jerky. Get out of here.

Dave: Yeah. Yeah.

Chris: Watermelon is 99% water.

Dave: Yeah. That's probably not real. I don't know.

Chris: Yeah, it's a lie! It's got to be! Anyway--

Dave: I do think you could chop up one chunk of juicy pineapple and throw it in a barrel and get pineapple juice. [Laughter] I think the flavor is that--

Chris: That's got to be what it is.

Dave: Explosive.

Chris: It's like, sure it's a little bit. Yeah. Oh, yeah. It's so intensely pineapple that it's probably 82% apple juice.

Dave: Yeah. Yeah. Yeah.

Chris: Even apple juice is weird to me. There's not that much juice in a fricken' apple. How does this juice industry work?

Dave: [Laughter] Tonight, on Channel 22222. We're exposing the juice industry one fruit at a time.

Chris: I'm so ignorant, but you posted that great video of that gamer guy who was just like, "If you're in Hawaii and you dig down, you're going to hit water, bro." I'd be like, this is my "water, bro" moment.

Dave: [Laughter] I live in Florida. If I dig down, like five feet, you can hit ocean.

Chris: [Laughter] It's going to happen. What if you went through life with that mental model? That's amazing.

Dave: Yeah. So good.

[Laughter]

Dave: I'm crying. I'm getting warm in the face.

Chris: Yeah, me too. Have we done it?

Dave: I think we're done. We're going to wrap it up. Juice industry, you're on notice.

Chris: [Laughter]

Dave: We're coming after you.

Chris: Something is going on.

Dave: Yeah. This is fake news juice. All right. Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show. Follow us on Twitter, @ShopTalkShow, for 16 tweets a month, and join us in the D-d-d-d-discord over on patreon.com/shoptalkshow. We also have YouTube over at real CSS-Tricks YouTube. Chris, do you got anything else you'd like to say?

Chris: Oh, ShopTalkShow.com.