Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to a bit of a shorty episode of the ShopTalk Show. [Laughter] How ya doin', Chris?

Chris Coyier: I'm doing all right. We're just fresh back from AEA. Thanks for listening to that last week, everybody. I think the episode before--

What's that?

Dave: Oh, are you having the thing where you come back from a conference and, suddenly, you have more work? Because I am. [Laughter]

Chris: Yeah.

Dave: It came back to--

Chris: Sometimes I don't even notice it because it's happened so much. But my wife notices. She's like, "Every time you go away..." [Laughter]

Dave: Right.

Chris: Yeah. It's like double the -- it's like you're gone double the time, really.

Dave: No because I come back and there's five PRs to review, which is great. Love PRs. Love them. Doing great. But boy, that takes some time. You know? And so--

Chris: Yeah, it does. It does.

Dave: You're just kind of surfing. Then I was like, "Okay, cool. Monday morning, gonna hit it." Then all my servers just decided to die, so that was cool too. So, now it's Thursday, I guess, and I'm scrambling. Anyway, man.

Chris: [Laughter]

Dave: It's that thing where I enjoy conferences a lot, and we did wear lederhosen. But you come back and you're like, "Dude, I've got to catch up!" It's hard. That's hard.

Chris: Yeah. Yep. There's a couple of folks out at CodePen, and I'm looking at my beautiful PRs. I'm like, "They need attention."

Dave: Yeah.

Chris: [Laughter]

Dave: I can't work. [Laughter] I can't work.

Chris: Uh... Fortunately, that's -- I kind of always can. I'm sure you can too, yeah? There's always a blog post to be written, right?

Dave: Hey, I just published one literally as we're swooping into this show here.

Chris: Did you really? Oh...

Dave: Yeah. [Laughter]

Chris: Well, that's awesome.

Dave: Yeah.

Chris: Oh, look at how fast it breaks the cache there. That's nice. I see it. I'll have to read it, or you'll have to explain it to me.

Well, now that we've mentioned it, we can't just scoot by it. We do have something else to talk about, though.

In the show before last, we had a quick little thing. I think it was at the way end of the show, so only people that are true ShopTalk Show believer listeners even made it that far, probably. At the very end, we were like, "Oh, send us in your ideas for patching the Web," because that was another Dave Rupert blog post was you had this movement where you were watching anime, and you kick up the speed or something like that. You affected the video of it somehow, or it was picture-in-picture, right?

00:02:49

Dave: Right. Yeah. I just needed picture-in-picture on my Crunchyroll, and you can't do it in the iPad app, right?

Chris: Yeah.

Dave: But I was just reminiscing. The Web, yeah, I've got the console opened. I'm making it mine.

Chris: Yeah. You just kick it right in there. You almost were fixing a mistake because there's really no reason that that's not on there other than that the devs didn't get around to it or didn't think about it or it didn't exist at the time that code was written or whatever. Right? But you can open dev tools and just poop it on there. [Laughter]

Dave: Yeah. It's that thing where I guess I'm always in this Web versus native mindset a bit. You hear native is better. John Grubert keeps saying that.

But it's only better if somebody goes above and beyond. And iPad apps are just one situation where people don't go above and beyond. [Laughter] It's that weird third-child situation, right? Middle child situation.

Yeah. But anyway, I love this idea of patching the Web. Actually, a bunch of people wrote back very cool fixes they do.

Chris: Well, right. Exactly. Send in more if you've got them, but I think we'll do some on this episode because I think this is really fun. Some people really sent in some interesting cases where they hand-manipulated the website they were looking at (for various reasons): to get past blockers or to make it look or behave better or all kinds of things like that.

Let's do that. But let's start with your blog post because I have no idea what you're going to tell me. The title of the blog post is "A Use Case for Cascading Attribute Style Sheets."

Dave: Yeah.

Chris: Which is apparently a Tab Atkins thing.

00:04:32

Dave: Yeah. Tab Atkins-Bitner, I guess hyphenating their name now, but Tab (a long time ago) wrote about this idea of cascading attribute sheets.

Chris: Ten years ago, apparently.

Dave: Ten years ago, yeah. I've learned not to put dates like ten years ago because it could be two years until I actually publish the blog post.

[Laughter]

Dave: But ten years ago, he wrote that post, or they wrote that post. Anyway, it was like, "This is cool. This is cool (a long time ago)." But the idea was, just like style sheets, you have attribute sheets. Their example was video preload metadata. Right? Then content video preload auto.

In those two situations, you'd want to preload differently, but you wouldn't necessarily want to go hack the video tag just on every post inline.

Chris: Oh, I see.

Dave: So, it's kind of like you could set attributes at a global level and they cascade into your code just like--

Chris: I see because usually attributes -- well, it's kind of funny, right? HTML attributes, something like preload on the video tag, A) there is no way to control that with CSS.

Dave: No. No.

Chris: If there was, it would win because CSS tends to win over attributes. Attributes are generally pretty weak in HTML.

Dave: Mm-hmm. Yeah.

Chris: The problem is the preload attribute is a weird one because, by the time CSS is loaded and were to override that attribute, it's too late. It's already been preloaded - probably.

Dave: True. True.

Chris: You know?

Dave: Yeah. Well, yeah, and that's maybe a situation where you'd actually want to be like preload none as a default and then preload whatever later. You know what I mean?

But I thought it was a very cool proposal. I thought it was just something interesting I hadn't really seen before.

Chris: Right.

00:06:37

Dave: Then I was going through my blog, and I speak a couple of different languages: Spanish, Japanese, Ancient Greek.

[Laughter]

Dave: Weird ones I've got in my pocket. Don't really use them that often.

Chris: Oh... Where is this going?

Dave: Well, in my blog, I'll do a title. Right? A post title in Japanese.

Chris: Sure.

Dave: There was one about a song called [indiscernible]. Right? I made that the blog post title because that's what I was talking about. But guess what I don't have. I don't have lang attributes everywhere. Right? I didn't code that into my static site.

Chris: Right. Like in your template.

Dave: Right.

Chris: Yeah, in your template, it's just an H2, not an H2 lang equals.

Dave: Lang=ja, right? I don't have that stuff in there, and so I'm of the mindset, I could add this stuff in my front matter. But now, for every programmable text field, I need to have a language attribute and a der attribute and kind of going through all this stuff, like, "Oh, I need redundancies in my code to make this all work."

Chris: It makes your templates really gnarly if there's an if statement for every possible attribute because you may someday have a one-off that uses it. [Laughter]

Dave: Exactly. Right? So, that whole thing was just kind of like this is pretty route-y for just a single attribute that I need to apply.

Chris: Yeah.

Dave: It got me thinking about this cascading attribute sheets stuff. I went through, and I'm just explaining the problem but what I do have on my site is art direction. I can chuck a block of CSS in the title, in the head of the document.

Chris: Right.

Dave: Wouldn't it be cool if I could chuck some attribute style sheet up there?

Chris: Right...

Dave: Then I built a parser that does this using the CSS style sheet engine. I'm using the constructible style sheets stuff.

Chris: Yeah.

Dave: I'm putting that in there. That's working. But I'm just kind of showing it's a lot of work just for titles. I'm having all this code just to do titles, but there's a bunch of other places like form fields that have a bunch of attributes, like auto-complete, inter-key hint, required, not required.

00:09:19

Chris: Did it cross your mind that these attributes, maybe they shouldn't only exist in HTML? Why is that?

Dave: Yeah.

Chris: Why don't they have CSS equivalence?

Dave: Well, that's what I'm thinking. Isn't there--? It would be so convenient to just have attributes outside of the system.

Chris: Right.

Dave: My code is nearly unreadable with all the props and attributes I have nowadays. [Laughter] You know? It's just like one element is now 17 lines of code. You know?

Chris: I think people applaud the declarative nature of HTML and like it. At the same time, I don't disagree necessarily, but then it does--

But yet, like inline styles are generally poo-pooed by the same type of thinking.

Dave: Inline styles are bad.

Chris: That's declarative too. You know?

Dave: Right.

Chris: It's kind of funny that one type of presentational and behavioral information is applauded and others are booed at, even though they're both just kind of declarative things. I don't know. Interesting.

Dave: Right. Yeah, yeah. I mean that's just kind of it. I don't -- I'm not -- I'm just saying here was a use case for the lang.

Chris: Yeah, right.

Dave: Just littering lang attributes wherever I want. Where that would be a lot easier than coding my whole entire CMS or whatever to support lang attributes on every single programmable text field.

Chris: Right.

Dave: That's sort of the TLDR of it.

00:10:58

Chris: You're also, it seems to me, intentionally avoiding JavaScript. This comes up a little bit on CodePen. Somebody is like, "Well, you don't expose the HTML document, so what if I want to add a lang attribute to the HTML tag? You're kind of being English-centric by putting lang=en on that tag and not giving me a way to do it."

Dave: Mm-hmm.

Chris: Then this is controversial, perhaps, but I wasn't about to change an entire product choice for that one situation, necessarily. It's a one-liner in JavaScript, you know, document.documentelement.setattributelang, and change it to something else. It's literally one line of JavaScript.

In your case, too, you could have added that der or lang attributes with a couple of lines of art-directed JavaScript. Not saying that that's the right answer here. I'm just proposing an alternative.

Dave: No, I totally could have. Now that I have my little engine, maybe I will if I need to. [Laughter]

Chris: Does require JavaScript to run.

Dave: It does require JavaScript to run. I just was kind of thinking like this is just an interesting world where it would work. I think about helmet, too, for configuring the head of your React app, or whatever.

Chris: Yeah.

Dave: What if your page could just pop a style sheet or an attribute sheet and change whatever it needs to, change the OG image tag?

Chris: Yeah.

Dave: You know?

Chris: Right.

Dave: That would be kind of cool.

00:12:33

Chris: It would be kind of cool. It made me think of React for a minute for another reason too is that your templates tend not to be loaded with per attribute logic because so many -- like it's almost -- maybe a best practice to spread props on HTML elements. If an H1, a P, or a form or whatever ends up in your JSX, and it's the parent element of a component, at least in our code base it's pretty common to do a ...props at the bottom of that element.

Dave: Sure.

Chris: Whenever you call it, you can pass whatever. If I pass a der as a one-off, it will appear on that HTML element. It's like a little escape hatch for, like, "Yeah, also put whatever you want on here." You know? [Laughter]

Dave: Yeah. No, it's just interesting to think about because I think what if there's a world where we could do this stuff by ourselves or just in different ways.

Chris: Yeah.

Dave: The example I checked out at the end was, like, a long time ago when you didn't microformats. Do you remember the first version of it? It was like H entry and H content.

Chris: Yeah.

Dave: You had to use these special classes, inline classes to get this behavior, whether that's a crawl by Technorati or whatever.

Chris: Technorati.

Dave: Phase two, you used item prop, right? And item title and item - whatever the Google. You just had all these item prop things that you used to make Google happy. That was kind of the HTML days. Right?

Chris: Mm-hmm.

Dave: Nowadays, what do you do? Schema.json in the head. Anywhere on the page, really. It's just a JSON object that is the right kind and that's it. So, that's what you do.

Chris: Yeah. That's cleaner, isn't it?

Dave: So, I'm just thinking, maybe--

Chris: Rather than sprinkling it into HTML and putting the onus on the crawler too. This is just like, "Here's a piece of structured data. Enjoy."

Dave: Yeah. Yeah, instead of, like, "Hey, every time, to have good accessibility or have good internationalization or have good forms, helpful forms, you have to litter the right things in the right places." You have to put the litter in the right place. It's like sorting your recycling. You have to put it in the right trashcan.

Chris: Yeah.

Dave: Instead, you just have a block that is right. [Laughter] A block that you just basically type the right things into.

Chris: I like the thinking there, especially connecting it to a previous thinking on the same subject. Import maps, that's also some structured JSON, isn't it, applying and coming to Safari?

Dave: Yeah. Right.

Chris: Pretty neat.

Dave: It's coming out in Safari, which is awesome. I actually didn't think it would come out soon, so I'm super stoked. But that basically replaces NPM, kind of. You know? I can be import LitElement, and but I've already told my browser where LitElement is, so go remember that. Awesome.

[Laughter]

Dave: The times are changing, man. This is great.

00:15:51

Chris: Right. Right. I don't know. I wasn't pining for it, but it was interesting to see how many people are. That's one of the things that people are almost most excited about with the recent Safari release. I kind of get it because we got so used to writing import React from React - or whatever - that type of import, import view from view at the top of files.

Dave: Mm-hmm.

Chris: But that has long been meaningless. I always pointed to that and said, "That's no JavaScript."

Dave: Right.

Chris: That's a bastardized syntax. It's not real. Only to prove myself wrong, it's like, "Oh, actually, it is real. We have import maps."

Dave: Suddenly--

Chris: Suddenly, it is real.

Dave: Suddenly, it does exist.

Chris: Enjoy.

Dave: That's awesome. That's an innovation. I think we are in a good situation.

Chris: Yeah. Heck yeah, we are.

Dave: You think, like, Petite Vue or something, even something simple like that. You can just say, "Here's where my Petite Vue lives," or "Whatever you're looking for is in this bundle so go find it." That's cool. [Laughter]

When I talk about view, I mean this file on my server. I think we'll see some cool things, cool bundling. Probably change bundling again.

Chris: Yeah.

Dave: I guess right now Vite - or whatever - probably just has a little source map of what goes where when you're saying stuff. But it's just going to get simple.

Chris: It does, I think. Yeah. That's for dev. Isn't that funny that it turned out that not bundling was the thing that made dev faster?

Dave: Yeah.

Chris: But you can still bundle for production. And we're so close. I would suspect within some amount of time that not bundling production will also be the correct answer.

Dave: Yeah.

Chris: But I think there's some tiny production things.

Dave: It's like lodash ruins it.

[Laughter]

Dave: But it's just all these tiny functions that people kind of depend on. You know?

Chris: Yeah, and you want a way to just pluck a tiny little piece of that across the wire.

Dave: Mm-hmm.

00:17:58

Chris: Yeah, it's interesting. You want that for everything. Video really notoriously kind of nailed it. When you pull video from the Internet, even if it's just a video tag that links to an MP4, browsers don't just immediately kick off a request for a gigabyte of video.

Dave: Yeah.

Chris: They do it in these tiny little streamed pieces.

Dave: Yep.

Chris: Which just felt like, yeah, of course, we have to do that. I think everything else is going to follow suit.

I was looking at some proposal for a font streaming or something, like, only request the characters of a font that you need. But have it happen automatically.

There's always been a way to trim a font. What do you call that?

Dave: Subset. Yeah.

Chris: Subset. Yeah.

Dave: Yeah.

Chris: You had to kind of do that manually. Then Google Fonts notoriously had some query parameter that you could put a sentence in, and it'd be like, "Oh, I see what you're trying to do. You only want the characters that match the characters needed for the sentence."

That's cool. It's also still manual. You'd almost prefer the browser just do it. That's going to matter more and more when it comes to variable fonts and color fonts - any font that's particularly large.

I didn't mean to make this whole thing about fonts, but I like the idea of only pulling from the network the bits that you need.

00:19:15

Dave: Well, and you know what it streamed? HTML.

Chris: Hmm...

Dave: That comes in a stream, and the browser is like, "Oh, I've got a chunk. I know what to do with it," and so it'll start building your page top to bottom as it gets stuff. That's cool.

Chris: Yeah. Doesn't the framework have to support it? I remember reading something about that recently. It didn't really occur to me that much that you needed to have your framework be buddies with HTML streaming less you lose that built-in feature of HTML.

Dave: You mean like your JS framework?

Chris: Yeah, if you choose to use one. Yeah, you probably get it for free and then it's just one more thing that you lose when you pick a framework.

Dave: Took out of the system?

Chris: Yeah.

Dave: Yeah, exactly. We broke the Internet.

Chris: I feel like there was a Ben Holmes tweet this morning where he white boarded a little bit of HTML rendering as it arrives kind of thing.

Dave: Oh, yeah. He's getting so good at that whiteboard. I'll tell you what. It has videos in it now. I don't know how he got that whiteboard. It's beautiful.

When he clicks a button and it goes, "Peepope, peepope, peepope," in loading, that's classic. That's some next-level special effects.

00:20:28

[Banjo music starts]

Chris: This podcast is brought to you by Split, the feature management and experimentation platform.

What if a release was exactly how it sounds; a moment of relief, an escape from slow, painful deployments that hold back product engineers? Free your teams and your features with Split.

By attaching insightful data to feature flags, Split helps you quickly deploy, measure, and learn the impact of every feature you release, which means you can turn up what works and turn off what doesn't, and give software innovation the room to run wild.

Now you can safely deliver features up to 50 times faster and exhale. Split feature management and experimentation, what a release.

Reimagine software delivery. Start your free trial and create your first feature flag at split.io/shoptalk.

[Banjo music stops]

00:21:29

Chris: Let's do the patching stuff. Really cool. What can you do? By patching the Web, remember, we talked about this at the top of the show. We're talking about messing with the live website, like you can do in desktop browsers. Not so much in native apps, not so much in mobile browsers. A little bit in mobile browsers because now they have extensions, which is kind of cool, as well as you can theoretically open up dev tools on a device that's plugged into your computer and such, but that's not really super practical.

Let's say you wanted to add or remove the auto-play attribute from all videos or something like that.

Dave: Mm-hmm.

Chris: That's something that you're able to do because of the patchability of the open Web. We asked people to write in about it. A lot of them came from the Discord. Thanks everybody in the Discord.

There was an interesting one from Andrew, who has been on the show recently.

Dave: Mm-hmm.

Chris: He was talking about buying tickets for Disney Land. After they opened up their online ticket sales after being closed for COVID, there was obviously a lot of interest in that. It would give you (when you're looking at the screen) kind of how long you're going to be waiting. But the information didn't really give you very much information about how actually long it was going to be, like what position you are in line because it had some client-side JavaScript that would get that information and then convert it into something a little - I don't know - what they thought would be palatable to look at.

But it turned out the actual JSON information, of which you could look at by opening dev tools and poking around a little bit, had much more interesting information in it. Andrew [laughter] educated the world about how to dig for that and ended up publishing a gist that had all that information on how to dig that data out and what it actually meant and stuff. Pretty cool. It's probably better to read the thread.

Yeah, what's up?

Dave: What I find cool about this, yeah, he was trying to buy tickets. Right? Then he shared how to do it so other people could figure out how to do it. He's like, "Go into your console, and this is how you figure out what place in the queue you are or how many minutes it's going to take."

He didn't just help himself. He helped a lot of people. You know? I think, generally, don't go pasting stuff into a console from the Internet, but that's pretty cool.

Chris: [Laughter] Yeah, that's kind of a good point, right? Somebody tells you, "Just put this snippet in," it might be a little danger there. But you all know what you're doing, right? Definitely look for anything that says fetch. [Laughter]

Dave: Yeah, nothing that says fetch in there. No, it's pretty cool.

00:24:21

Chris: Yeah. You ever go to Instagram.com, Dave? [Laughter]

Dave: Been there. Been there a few times.

Chris: It's getting more useful because I think, for a long time, they just didn't have any Web app at all. Then there was a really basic Web app where you could browse a little bit. It's become more full-featured lately. I think you can just straight-up upload and it's pretty much a full-featured Web app finally on Instagram.

Dave: See. See.

Chris: But even then you can't just-- This just seems fricken' absurd to me, so whatever. You can't right-click an image and just be like, "Oh, save image as," or drag it off onto your desktop or something from Instagram.com.

Dave: Even an image you took.

Chris: Even an image you took. Yep.

Dave: Yeah.

Chris: And you can't do it on the mobile app either. There's no way to click and save to your photo roll.

Dave: Long press or whatever. Yeah.

Chris: Right. Everybody takes a screenshot and crops it or whatever, which probably is absolutely ridiculous, but that's just how they roll. I don't think you can tell Instagram what to do - or whatever. But on the Web, it's easier. Right? You can't hack their mobile app. But on the Web, this is pretty easy to do.

It just turns out that Justin from the Discord just puts pointer-events none on the div. They have an overlapping div that prevents you from doing this. Just chuck a little pointer-events none on there and that'll do it. You could also just delete it. [Laughter]

Dave: Yeah. Well, that's what I was saying. I usually go and delete, right? Delete, delete, delete.

Chris: Yeah.

Dave: For every photo. But Web inspecting is not that fun to find that element, so you just know the name of it. Then you just do it once. Now your whole session has that inspector-style sheet to never. Yeah.

Chris: Yeah. Right. It's kind of better to do it via the class name. Unfortunately, the class name, as I'm looking, as I'm doing it right now, is underscore AAWG. [Laughter]

Dave: Oh, yeah.

Chris: So, generated class name. Yeah, not my favorite. I tend to like--

If you're having a generated class name for the styling seems fine to me because it's kind of like the CSS Modules approach of isolating CSS.

Dave: Mm-hmm.

Chris: But then generally adding human readable, human hackable class names to things, we do that at CodePen quite a bit. We put our weird class name on there, but then put an ID or a data attribute or a human-readable class name on there in case you want to mess with it.

00:26:45

Dave: Nice. Andrew again here was saying, "To spell check my blog posts before I post them, I've been doing document.designmode=true in the console, and it makes all the text editable and gives red squiggles."

Chris: Oh, I fricken' love that. That's great.

Dave: I mean I probably need it more often.

Chris: [Laughter] Yeah. If you have a text area on a website, you get all the red squiggles and all that kind of stuff. But I guess Andrew is talking about you're looking at a preview of your blog post that perhaps you wrote in software that didn't have that. And I think that's pretty common if you're writing your blog post, for example, in VS Code.

Dave: Mm-hmm.

Chris: I have a plugin installed for spell checking in it called "Code Spellchecker" or something.

Dave: Right.

Chris: That has a terrible icon, but it has five million installs because apparently, it's the best one out there for it. It does not do the kind of spellchecking that you're used to. It's not native so that your Grammarly isn't working or whatever. But it doesn't even really do red squiggles underneath it where you can just right-click. The kind of editing that you're used to from your operating system, it all has to fake that in VS Code.

I'm grateful that this plugin exists. I just wish it just didn't have be that way.

Dave: Mm-hmm.

Chris: You're not going to get the spelling and grammar checking that you want out of VS Code. Instead, look at a preview on your website. Hit the design mode. Edit it there, and I guess, theoretically, move it back or move the changes one by one over. Pretty clever idea, I'd say.

Dave: Yeah. I'm going to just see if this post I just did has it. Oh, design mode on or design mode true?

Chris: True.

Dave: Yeah.

Chris: Or is it--?

Dave: On, I think.

Chris: Oh, he wrote true, but it's....

Dave: Oh, I do have a typo.

Chris: Do you?

Dave: Mulitiple.

Chris: Oh, my gosh.

Dave: Which is a city in Ukraine, I think.

Chris: The system works.

Dave: Yep.

Chris: I'm going to try it too. Document.designcapitalmode=on. Oh, yeah. It kind of autocompletes for you, too. Good job, the world. Yeah, it's finding some red squiggles under words that you would expect. Oh, yeah. You're actually a pretty clean writer, man.

Dave: I try. Well--

Chris: [Laughter]

Dave: Now I'm getting a grammar edit in my editor because I used the Write Good extension, which I'm going to-- Yeah.

Chris: That's why I like opening Notion in the browser because sometimes I'll do some writing that ends up on the Web in Notion. But in the app, you don't get nothing. It doesn't help you at all. But on the Web, it does.

Dave: Isn't that weird? Isn't that weird? Hey, hey, hey. That's weird.

Chris: I think that's a pretty strong reason to use Notion on the Web if you can.

You know the slowness of Notion is starting to annoy me a little bit. I know they're not -- they've been a sponsor of the show and I really appreciate that. I obviously use the crap out of Notion, so I'm not advocating that you're not a customer. But it's like, man, I would make 2023 the year of speed on that website, man.

Dave: I feel you. Sometimes, I do wonder, "Is it me or is it them?" because I put a lot of junk in the Notion over the years, and I do like it. But yeah, it is kind of--

Chris: There's got to be some architectural changes to make and stuff for that.

Dave: Web.... Hire Dave Rupert. [Laughter]

Chris: [Laughter] Hell yeah.

Dave: To tell you about Web components, baby.

Chris: Uh-huh.

00:30:09

Dave: I don't know. Hey, Chris. I'm not sure who this was, Chris, but manipulating--

Chris: Oh, yeah. I put that. That's me.

Dave: Oh, that's you.

Chris: [Laughter]

Dave: I was going to say--

Chris: I just put-- Yeah, go ahead. What were you going to say?

Dave: You said manipulating everything you see for the purposes of screenshots and jokes, et cetera.

Chris: Yeah.

Dave: I think that struck out to me because I don't -- long-time listeners may know, but I'm sure not everyone knows the first version of the ShopTalk Show was called CSS Riffin, and it was you and me getting wasted and messing with people's websites. No one talks about that.

Chris: [Laughter]

Dave: I still think it should come back.

Chris: Oh, that's exactly right. We just used dev tools to just mess with websites, which is hilarious. I feel like everybody does that to this degree.

Dave: Mm-hmm.

Chris: How often do you see a fake tweet where somebody just went into dev tools and just edited what somebody wrote for that purpose. But that has real design utility too. I find that to be pretty common.

I'll mess with the screen and get it close - or something. Or a common one I might do is go to a website and remove all of the guts of the website but keep the header and footer, for example. Screenshot that and then drag that into Figma so that I feel like when I'm Figma'ing around, I'm doing it within the vibe of the website. [Laughter] You know?

Dave: Yeah. Yeah, yeah. Well, two, we talked about Visbug a bit in the last episode.

Chris: Yeah.

Dave: Essentially, that's kind of what it does. [Laughter] It manipulates the screen. But you can do that without Visbug. Visbug makes it a lot easier. It's this idea of just get in there and mess with stuff. It's pretty cool.

00:31:56

Chris: Yeah. That's just beautiful, and that's the patchability of websites at work, you know, allowing us to do that kind of thing.

Josh writes in. I've done this just countless times too. Ever run across a button that's grayed out? You're like, "Why? Why is it grayed out?"

Dave: Yeah.

Chris: I know enough about websites that I would know why. There's some problem. Usually, in my experience, the problem is 1Password or something filled out a field, and the JavaScript on the page didn't realize that it did. The disabled attribute is on the button waiting for some interaction on that element first before it's willing to be like, "Oh, I'm disabled because they haven't entered anything into that field yet." Unbeknownst to them, an extension has done that already.

I'm like, "Why is this disabled?" I'll literally just open up dev tools, remove the disabled attribute, and submit the form anyway and just see what happens. I feel like there's a 50% chance that that works, but that's what Josh was saying is removing the disabled attribute on a form element just to submit "Invalid but a workable and useful solution" for what he was doing.

Dave: Yeah. Well, sometimes, yeah, the invalid is just sort of weird. I don't know. Sometimes, people do that. They have some weird rule set that's not true anymore - or something like that.

Somebody -- Adam on Twitter -- had a similar one. Have you ever been to a site where it prevents you from pasting into a form field? It has whatever paste false or whatever? it just disables that ability. I forget if there's an attribute or if it's just intercepting the paste event.

Chris: Right.

Dave: But anyway, he's like, "I can just go element.value=myvalue. Eat it." You know? [Laughter] "There. I pasted it in. I tricked you, you dumb machine." That's great.

00:34:02

Chris: Hmm... Nice. We have a write-in from email from Johan Colene. This is a great one, I think. He was trying to buy tickets at a theater, and there's lots of places. For two tickets, for himself and his wife, right?

Dave: Mm-hmm.

Chris: There are lots of places with three empty seats. Obviously, he just wants two of them. But there was some client-side JavaScript that would say, "Oh, you can't leave one empty seat in a row."

Dave: Oh.

Chris: It didn't let you do that.

Dave: Okay.

Chris: It wanted to fill the theater. But he's like, "Dude. Whatever. That's so uncool. These are empty seats, and I'm buying them." He goes into the client-side JavaScript and adds a breakpoint in the JavaScript before the check to see if there's an empty seat left in the row, and then was able to just buy two tickets in the row, leaving the empty seat.

Dave: I mean, go for it.

Chris: That's baller. Yeah.

Dave: Does this work on airplanes?

Chris: You earned it.

[Laughter]

Dave: Because if it works on airplanes, I'm going to use it.

Chris: If you really care, you would have server-side validated it, team.

Dave: Gosh. That's a cross-stitch that should go up in every office. "If you really care, server-side validate it."

Chris: Yeah.

[Laughter]

Dave: It goes in the bathroom. [Laughter] "If you really care, server-side..." [Laughter] Oh, my gosh. I'm going to have to make a T-shirt.

All right. Yeah, there are a couple of other, like people hacking commerce. Somebody was--

Michael on Twitter was saying there was a limited edition flash cart for Nintendo 64. That's kind of like a mod'ing games emulator kind of thing.

It was getting hammered, and so it was losing requests or whatever, like nine out of ten requests were failing. But then I think he just went through and scripted his way to just make ten purchases and, hopefully, one goes through. Anyway, that's a little -- I think that's good, but that edges on the scalper mentality. But it's good. But that's--

Chris: Yeah.

Dave: It's kind of that weird thing, right? As developers, we have sort of this weird superpower to cast a spell and get our way. It's kind of cool. [Laughter]

Chris: Yeah.

Dave: It's kind of cool that we're the boss. You know?

Chris: Yeah. Why do I even have this job if I can't hack this damn website? You know?

Dave: Right. Well, but the tradeoff is you have to spend years of your parents saying, "Can you fix BestBuy?" You know?

[Laughter]

Chris: Right.

Dave: Can you call bestbuy.com and tell them to fix it?

Chris: Yeah. You've got to set up a lot of printers.

Dave: Yeah. Printers, wi-fi, that's all you for the rest of your life. Fixing Google, that's on you.

Chris: Yeah. Yeah.

Dave: Yeah.

Chris: Yeah, absolutely. Explaining cryptocurrency even though you don't really get it.

Dave: Yeah, but you can make the text purple on a website you don't own.

[Laughter]

Dave: I tell you--

Chris: God dang right.

Dave: Yeah.

00:37:18

Chris: Speaking of doing that, Dan wrote in and said that he just has a few lines of CSS that ... to Jira to hide all the unneeded UI in the morning standup. It blows up the text size, removes white space, makes it easier to read when screen sharing. "Super low key, but I use it every day," he says, "Just to JS bookmarklet that adds some extra styles."

Nice. I guess that means they don't content security policy on Jira. That's nice.

Dave: Good to know. Good to know.

Chris: If it works, it works. Yeah. [Laughter]

Dave: Well, I just was thinking that would be the perfect way. You're going into a morning meeting, beep, just show me the shit I care about. [Laughter] You know?

Chris: Yeah.

Dave: Delete all this.

Chris: Right.

Dave: That's actually pretty helpful.

Chris: You got me convinced to add to hide the trending stuff on Twitter, which surely is just one CSS selector that hides that thing. [Laughter]

Dave: Yeah.

Chris: But I guess I make it their job to keep up with that CSS selector instead of my job.

Dave: Yeah, because it's going to change a bunch. Yeah.

Chris: Right.

Dave: But yeah, I don't know. That little modification I think has made me a lot chiller as a person.

Chris: [Laughter] Yeah. There's nothing good that happens in the "What's Happening" section that you need to know about. I'll tell you what.

Dave: No! It's just clickbait. It's like some politician said the word Dolly Pardon, and now Dolly Pardon is trending for ten days. I give up, dude.

Chris: Right.

Dave: I don't need that in my life. Don't pay attention.

Chris: Yeah. It's a pretty simple one, and it really is effective.

00:38:51

Dave: I was reading a book. It's called 4,000 weeks. We can end on this, but 4,000 Weeks. It's about basically that's the time you have on this Earth. Spend it wisely.

It's not that daunting, but one of the things it said in the book that I reread it, I liked it so much, which I don't reread books ever, but one thing it said was finding stuff to do is not the problem. Figuring out what you can ignore is the problem.

I just thought that was cool. No one is like, "Gosh, I just don't have stuff to do." [Laughter] It's like figuring out what you can ignore and not do is actually the perfect posture.

Anyway, that thing you're procrastinating on, that's fine. You're just waiting to see if it's important. There you go. [Laughter] I applaud you.

Chris: [Laughter]

Dave: Anyway... All right. We should wrap it up. Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show.

Follow us on Twitter, @ShopTalkShow, for tens of tweets a month. And join us in the D-d-d-d-discord, patreon.com/shoptalkshow.

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

Chris: Hmm... Just ShopTalkShow.com.