Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another hard-stop episode of the ShopTalk Show. I'm Dave--in the shed--Rupert. With me is Chris--in the booth--Coyier. Hey, Chris.

Chris Coyier: Yeah, man.

Dave: How are you?

Chris: Good.

Dave: You have green lights. Very festive holiday seasons right there.

Chris: Oh, I didn't even notice. I did, but I still have my remote control. Ooh, there's deep blue.

Dave: Oh, no.

Chris: Yeah.

Dave: Deep blue.

Chris: Yeah.

Dave: Okay.

Chris: Ages ago, I fell for an Instagram ad that made these colored lights look like -- make your house look like basically the coolest house on Earth. They're not as cool as the ad was, but hey, they still work.

Dave: [Laughter] I've seen - whatever - Instagram -- sorry, TikTok. I don't do Instagram. TikTok where it was just like, how to tell if you're a millennial or a GenZ or whatever they are. It's like your house is filled with LED lights, but your bank account is empty.

[Laughter]

Chris: Yeah.

Dave: Yeah, yeah.

Chris: Tell me. It's not that I never TikTok, but I don't open it that much. I'm more Instagram, so we're reverse in that way. I can learn from you for a minute here.

Dave: Mm-hmm.

Chris: Are most TikToks comedy? Is there some aspect of a laugh to every TikTok, or not at all?

Dave: Oh, boy. Um, no, not every -- a lot of them are serious. It can be all over the gamut. There's a lot of thirst traps.

Chris: Okay, so there--

Dave: A.K.A. corny TikToks.

Chris: There's sexy stuff. Yeah. Okay.

Dave: Yeah. There's a lot of ADHD material, like it's just kind of a meme, [laughter] like what life is like with ADHD and stuff like that.

Chris: Those are a little bit of--

Dave: It's kind of educational--

Chris: --comedy to that, right?

Dave: Sometimes it's funny. Sometimes there's dank, like ultra-sad jokes, you know, or whatever. There's -- anyway, I think it runs the gamut. I think people -- there's people telling - whatever - life tips, life coach kind of deals.

Chris: Yeah. Okay.

Dave: There's some feel-good news stories like, "Hey, I gave a hamburger to a cat and now I'm happy." You know?

Chris: I see. I see.

Dave: Those sort of things.

Chris: I guess that makes sense, yeah. There's no predominant meme. If all you did was watch life coach stuff, I'm sure the algorithm would just feel you all life coach stuff all the time, right?

Dave: Yeah. I think it figures out what you like, and I get a lot of D&D stuff.

Chris: Yeah.

Dave: D&D can be funny or it can just be helpful, like, "Hey, here's an interesting D&D class you could try." Blah-blah-blah-blah-blah-blah-blah-blah.

Chris: Oh... And short, though, right? Usually, sub-minute.

Dave: Usually jokes. Yeah, sub-minute. Goofs. Yeah.

Chris: Is there a music TikTok or is that boring because you'd never even listen to a full song. It'd only ever be partial songs.

Dave: There are. I follow one girl for a bit who kind of was a singer-songwriter and wrote a bunch of songs and stuff like that.

Chris: Yeah.

Dave: I think there's all kinds. It's interesting because there is a format. There is a meme, a format that you take a song and you do the dance, and then you make the joke. Like you add your layer of the joke onto it. You know?

Chris: Hmm.

Dave: Like - I don't know - some sound effect but for developers. [Laughter] You know?

Chris: [Laughter]

Dave: There's the formula. But I think it can be whatever you want.

Chris: I don't know. Yeah. Dave explains TikTok to an old man.

00:03:56

Dave: I know. I actually kind of just deleted it from my phone. It's fine, but it was just sort of sucking time. It's good, but I kind of went through a whole thing. I deleted Twitter from my phone.

Chris: Yeah.

Dave: Then TikTok was a replacement. Then I just was like, "You know what? I'm just going to not. I'm just going to delete TikTok too." Now I'm boring.

Chris: Yeah.

Dave: I have a boring phone.

Chris: Hmm.

Dave: But you know. I'm also--

Chris: You're off it for a minute?

Dave: Yeah.

Chris: What kills you about TikTok is audio is not optional. Your sound has to be on for it to be useful. Whereas Instagram doesn't. I can scroll through that silently. My life right now, I need the silent on my phone. Not for me, but because I'm in the office or I'm in line at the grocery store, and I don't want everybody to hear my TikToks or whatever. The opportunities for me to have sound on are low on the phone.

Dave: And you have a child. Maybe Chris Enns can mix in the clip, but the number one TikTok is this thing where it's like, "Hey, yo!"

[Explicit beeped out]

Dave: "--your life."

Chris: "--your life. Bing bong."

[laughter]

Dave: That's the sound effect. I open my TikTok, and it's like, "Hey, yo. [Explicit bleeped out] -- your life, Joe Byron." You know?

Chris: [Laughter]

Dave: That's like--

Male: What do you want to tell Joe Byron right now? What's up, baby? Take me out to dinner. Hey, yo!"

Dave: And that to me is like the gold. That's the zone I want to hang out in, too.

Chris: Oh, yeah.

Dave: But when you have kids around, you can't do that. That doesn't -- well, I mean I know parents do, but you can't.

00:05:36

Chris: And the point of it is the algorithm, right? It sucks you in. And YouTube has got it too, you know--

Dave: Mm-hmm.

Chris: --with all the related videos and crap. We have a strict no YouTube policy for the kid because the UX of the app very encourages you to be like next-next-next-next-next, and TikTok is even worse.

Dave: Yeah.

Chris: You just swipe.

Dave: Oh, yeah.

Chris: It's like built in. That's what you're supposed to do. Screen time, we're pretty permissive. Probably too permissive as parents, but not those type of apps. You have to pick something, and then you have to watch the thing that you picked.

Dave: Yep. No, I try to make my kids do that. It doesn't work, but-- [Laughter]

Chris: Yeah. They're older, though.

Dave: I'm just like, "Put the remote down!"

Chris: [Laughter]

Dave: He's in there putting Chinese subtitles on. I want him to experience Chinese, but I'm just like, "Dude, you're fidgeting. Put the remote down." Then he's changing shows, going over to YouTube Kids. [Loud exhale] Anyway--

Chris: It's funny.

Dave: Struggles. Struggles. But the thing is, language is a big deal, and that's another reason I couldn't just use TikTok idly because it was like, "Well, okay. I've got to go find my headphones to listen to this Joe Byron TikTok." You know? Anyway--

Chris: [Laughter]

Dave: Whatever. Whatever.

Chris: [Laughter] I know. We're all struggling here.

Dave: Phase of life, you know.

00:07:06

Chris: We got one from Jimmy Davis here that I think is good. This is a follow-up. Remember when Melanie wrote in the other week?

Dave: Mm-hmm.

Chris: She said, "Why is accessibility not treated as a first-class citizen that it should be?" kind of thing. Right?

Dave: Mm-hmm. Mm-hmm.

Chris: But really - Why? Not like - you know - I don't know - dig into it almost from a psychological perspective of the industry.

Dave: Mm-hmm. Mm-hmm.

Chris: I thought that was awesome. We tried. You had some good points. I had some dumb points that didn't work. But I've still been thinking about it because it was such a good question.

Then there's Jimmy Davis writes in, and he's thinking about it, too, in response to Melanie. He says, "The way I see it, we're taught from day one how to break accessibility (and responsiveness, for that matter). But it's not until months or years down the line that we learn how to fix it."

You're not learning accessibility on day one. You're learning how to float or whatever the kids learn these days.

Dave: Yeah. Yeah.

Chris: "Websites are accessibility and responsive, though pretty by default." That's a classic line, right? If you add no CSS to your HTML, it's probably pretty accessible.

Dave: Mm-hmm.

Chris: JavaScript as well. Meaning that is used to break accessibility. "As long as we build them using proper elements and good document structure, the UA styles are accessible as one can get. It's design that breaks it. I think if accessibility was a keynote topic from the beginning of chapter one, most of the common problems we see would go away."

He goes on to kind of elaborate on all that, but I think that's a good point. I've heard that many times; it should be part of more curriculum and such that you learn certain things from day one and generally not about accessibility. It ends up being something that gets tacked on later. Then that plays itself out again with the products that we build.

A lot of times, we build the product, and then we're like, "Oh, yeah. But also, accessibility." You know?

Dave: Mm-hmm.

Chris: I live that, too. You know? Just this week, I had three PRs that were all accessibility. Those were much later. CodePen is almost ten years old, and I'm finding something pretty fundamental that I could have fixed long ago but didn't. It's a tack-on. It's tacked on accessibility.

Anyway - interesting. But I wanted to -- because I'm apparently addicted to hearing myself talk here, I want to say that when Melanie wrote it, then we're in the Discord, right?

She says, "Well, I had a thought of my own when I wrote this question, but I didn't put it in the question."

This is peer pressure, Melanie. I want you to write this up as a blog post or something. Put it somewhere because--

Dave: Or CSS-Tricks.

Chris: Yeah, I mean you can write it for me. I will absolutely accept it. Put her point was the best one I've ever heard (when she talked about it in the Discord), which is now lost because threads on Discord apparently just disappear.

Dave: Delete the messages.

Chris: Which I now hate.

Dave: Rip.

00:09:54

Chris: They're just gone. Yes! It was one of these three paragraph type-out-things that I very much wish was not lost to time. But anyway, it was about this:

Imagine that you're very smart. Guess what. All Web developers think they're pretty smart because I think you actually do kind of have to be some degree smart to do this job. You have to solve logic puzzles, and you have to think abstractly, and solve problems, and it's a job for your brain. It's knowledge work. You probably actually are pretty smart if you do Web development work.

You're one of few people on Earth that can do this job. You know? I'm sure, even if you're modest on the outside (and I hope you are) that you probably are, like, "You know I'm a pretty smart person," or whatever. Then accessibility, because you're a product of the system, you didn't learn accessibility on day one.

At some point, you're going to get accused of bad accessibility. Probably rightfully so. But you're like, "But I'm smart."

Dave: Mm-hmm.

Chris: "But I'm not even smart. I'm a genius. You're accusing me of building websites incorrectly? I do this professionally. How can I possibly be doing it wrong?"

Unfortunately, I think the tone of accessibility police sometimes is a little harsh, and I think they've learned that they have to be harsh because, if they're not, nothing gets done. You have to bring the noise sometimes with accessibility.

Dave: Yeah. yeah.

Chris: All that makes this big stew of, like, people digging their heels and be like, "How dare you accuse me of not building a perfect website?"

Dave: Nah. The tone is a big thing, and I think I've said it in the past. It's part of the reason I started an accessibility project. I just couldn't find resources that were forgiving or people, for that matter.

I think it's, two, passionate people involved in a very worthwhile cause, too, so you get this sort of - I don't know - recipe for militantism. Just like, "Hey, you're doing a good thing," and crusading - sort of.

I do, though, wish there was a weight, a system of weights. I don't know. It's like, "Oh, you didn't have three-to-one text outlying contrast on your button border," or something. Versus, "Your form has no labels. You can't use your form."

I wish the three to one issue was very diminished compared to the, like, "Hey, you need to fix the form labels." If you do one thing, fix these.

Chris: Hmm.

Dave: I wish there were grading. There probably is in Axe or something like that. Even in the tools of the UI or the--

Chris: Yeah.

00:12:52

Dave: I wish there was a way to be like, "If you do one thing, it's fix your forms." There's actually a really good post. It's going to take me 20 minutes to find it.

Chris: Show notes.

Dave: [Laughter] Show notes. It was by a blind developer, and she wrote -- Holly, I think was her name. She wrote about her experience just as a blind user.

Chris: Mm-hmm.

Dave: She was like, "Here are the five things I wish you would do." You know? It was literally add form, make sure your forms have labels. Make sure your images have alt text. Make sure your heading structure makes sense, stuff like that. Right?

Chris: Right.

Dave: It was all stuff you can automate and test for. Those were her biggest requests.

Let's see. Let me see.

Chris: Yeah, I can see that having the right kind of hook for an article that would get people to perk up and pay attention because it's like, "This is for me. We're not talking abstractly anymore."

Dave: Mm-hmm.

Chris: "This is my request of you." It makes it personal. It's like why politicians tell stories about one family because it feels like, "Ah, yes. I can relate to the one family."

Dave: Yeah. Yeah. It's the plumber Joe, you know? It's the developer, Holly. You know, system-- [Laughter] I don't know. Not to tokenize anyone, but I just think it was just that thing.

You're like, "Yeah. Do blind people even use the Internet?" You get that question in the office. You're like, "Yeah, absolutely they do."

But if you're like, "What do they care about?" and if you're not actually engaging with disabled people while you build your product, then here's an opportunity to just get some information.

Chris: Mm-hmm.

Dave: Somebody just said, "Here are the five things I care about. I'm blind. I use a computer every day. I'm a smart developer. Here are the five things I care about." It's out there. I'll try to find the post.

Chris: Yeah.

Dave: I'm looking here with no success. Anyway--

00:15:05

Chris: I had a user write to me. I think this was - I don't know. I guess I didn't say that I would mention it on a podcast, but I don't see any reason why this would be a big deal. Her name was Lauren Hayes, and she wrote into CodePen about, like, "Hey, I'm doing a boot camp thing." I think it was Con Academy or something.

Dave: Mm-hmm.

Chris: Maybe she was doing multiple of them. I can't remember the details, but it was like, "We're using CodePen in the boot camp and there are some expectations that I use your thing. But I'm having trouble with it. I'm a blind user."

Dave: Mm-hmm.

Chris: I was like, "Interesting." Here's the worst offense on CodePen is CodeMirror, the editor we use, and there's not a lot we can do about that one.

Dave: Whoof. Yeah.

Chris: But there's some stuff, you know, so let's put that out there first that there are problems with that. But anything else, I can fix. Even those ones, I want to know about because I want to have them really clearly documented.

For one thing, there's a thing called CodeMirror 6, which is the new version of it, which is approaching ready where they really have improved accessibility a lot, and I hoped on CodeMirror 6 with Lauren, and it is better. She confirmed it.

Dave: Okay.

Chris: There are still some things she has gripes with, but we can't switch overnight to 6. I even made a whole repo of examples and tests and our requirements for moving to this version. There's just a lot of stuff that's just not ready yet, so I literally can't and told Lauren that. I think she understands that as a concept.

But then we hopped on a Zoom call together. She uses Windows Edge and JAWS.

Dave: Windows Edge and JAWS. Okay.

Chris: Yeah, which I found that I was able to test with for free because there's free Windows VMs, which are easy to spin up. I say easy, but I have some experience, so it was easy for me to spin up.

Dave: Mm-hmm.

Chris: Then JAWS gives you a free 40 minutes, or something like that, that you can spin up in that VM.

Dave: Yep.

Chris: So, rock-n-roll, you know? I was miraculously able to be also testing in JAWS in, like, ten minutes.

Dave: That's pretty cool.

00:17:15

Chris: I used Parallels. That's the one thing I paid for was Parallels because I think it's a pretty good VM system on Mac. But there's VMware and there are free options there, too.

Anyway, it was great! It was a great session. She was so freaking knowledgeable and so good at sharing. She's tabbing around, and I'm watching. She can't see the screen, but I can.

Then she's like, "What's that little--?" you know, I'm on some control. It happens to be, on CodePen, there's a Save button and then a dropdown for the Save button. Guess what! It was fricken' unlabeled. Whoops!

Dave: Oh... Yeah.

Chris: You know? And it was deep. I'd go to start fixing these things, and it was just complicated. It was fairly deep in our React componentry that there just wasn't props, essentially, to pass down properly from the parent that would label it. I just had to refactor some stuff. No big deal. I got it. But I kind of understood how we got there.

But one of the biggest ones was then you get down into the CodeMirror editor, and it just got, "Editor." You're like, "Oh, crap."

Dave: [Laughter]

Chris: That's an unlabeled form element.

Dave: Yeah. Yeah.

Chris: Basically. It just didn't have a label. I was like, "Oh, no. Maybe this is why people say -- or this is why CodeMirror just isn't as successful as it could because of stuff like this." You know?

Dave: Mm-hmm.

Chris: But then I dig into the API for it, and I do find that it did have some tools. It has a screen reader label thing that you can pass it when you instantiate the editor, which will label it properly and stuff. So, I went and refactored all our CodeMirror editors to make sure it was using that. Pretty good.

I don't think it's going to fix all of Lauren's problems, but you know it helped. There are a couple of other things. I just made tickets, and I knocked them out one by one and shipped them all. Just amazing that she was able to spend her time to do that - in a way.

Now I'm looking at, wow, that was an amazing experience that we should be giving her money. Lauren, if you're listening, I can't promise anything just yet, but it's on my radar to then, as we work on new things, work with Lauren--if she doesn't have the time or doesn't want to--or somebody like her to do that work and pay for it.

Axe is amazing. Love it. That can find me some stuff. But watching somebody use it--

You know I had the point the other week. You don't really know until you use something a lot. You can Hello, World an application, but you're not going to learn until you do it for real. I think this is similar in that you're going to find stuff with a real user that is just the most valuable possible stuff to find.

Dave: The tricky thing about accessibility, and I say this with - whatever - a dozen years of accessibility project experience - ten years or whatever. You can learn how to use a screen reader. Chris Coyier can. Dave Rupert can. We can use screen readers, but how we use them and how somebody who actually uses a screen reader uses them are a thousand percent different.

Chris: For one example, they have it on 80x speed.

Dave: Absolutely, 80x speed, and they're reading your whole blog post in about 35 seconds. It's so fast, and their brains can handle it. But even how they browse or how they navigate, how they say, "Show me all the links on this page," or something like that, that's probably not something somebody does, but they can do that.

I'm glad Lauren reached out to you all because I think the one thing you can do -- and maybe this is it. Maybe this is my whole [laughter] response to either Melanie or Jimmy here in the comments. Knowing somebody, following non-sighted people or people with disabilities on Twitter, having them on your radar so you have a persona in your brain.

If you're like, "I'm going to cut a corner," or if your boss is like, "Let's not worry about accessibility," you know you're fucking over Lauren. You know? You're messing with Holly.

Chris: Mm-hmm.

Dave: Your brain is very -- the strongest thing I think you can do is have somebody in your life or on your radar that has a disability and that can maybe motivate you to pick up and do the right thing at all times. That's not -- I'm not saying I don't believe in tokenism or whatever, but I think that's a really strong motivator so that you know you're not just messing -- you're not just cutting a corner. You're cutting a corner for Holly or for Lauren or for Lione or somebody like that. I think that helps. That may be the biggest thing we could do is amplify people who have disabilities or just kind of hear their stories and how they operate on the Internet.

I want to point out it's Holly who is Life of a Blind Girl. She's a social media officer. I said she was a developer. She's a social media officer. But it's "5 Most Annoying Website Features I Face as a Blind Person Every Single Day," by Holly Tuke, so there you go.

Chris: that's the perfect blog post title. Good job.

Dave: I just nailed it.

Chris: As a social media expert, she nailed it there.

00:22:34

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Notion. Learn more and get started for free at notion.so.

It's a tool for work. Really, it's a tool for creating documents that you organize and build in any way that you want to. It's such a wonderfully powerful tool for work. I can't say enough good about it, really.

For example, one of the documents we have right here on ShopTalk Show is a calendar for our shows. You can organize it like a calendar. But it's really a database. It can be viewed as a table and in other various ways where each one of our shows has a date to it. It has a show number to it. It has various metadata about what the show is. And the kind of free form content where we put questions that are going to be on each show. We even use the API integration so that incoming questions come into another database and we can drag things between them.

But we use it for all kinds of stuff. We use it to plan our redesign and plan upcoming videos and do all kinds of stuff. It's really kind of an open-ended tool, in a way, in a way that makes it more powerful - not less. It doesn't really tell you how you should use it. It allows you to find the best way to use it. I love it.

With hybrid work becoming the norm, the strongest teams have two things in common: speed and alignment. Both come from having a hub where everyone can share and work together. That's what Notion is, too. It's for teams, like Dave and I and our editor, our advertisers, and stuff, share a ShopTalk workspace in Notion and work that way. The collaboration is wonderful there. It really does speed us up.

You can check it out on your own or invite as many people as you want to see how it works. Take the first step toward an organized, happy team today. Again, that's at notion.so.

[Banjo music stops]

00:24:26

Chris: I was going to say, you're about to work on a component that might just be the bane of you, accessibility-wise. Probably not. Maybe it's perfect and amazing, but you were telling me you were on a WYSIWYG journey this week.

Dave: Oh, man.

Chris: Those things, speaking of tools like CodeMirror, you can pick one of these things out but you're going to have to do some testing of that bad boy accessibility-wise.

What's going on? Just as backup, we talked about this the other week, and we were kind of listing out tool after tool after tool of what these editors are like. I think you probably needed one for Luro, right?

Dave: Yeah. It's for Luro. You're kind of writing a description or something. While I am super good with Markdown, not everyone knows Markdown. You know what I mean?

And so, you kind of need it not idiot-proof but basically that so people can bold text and do simple formatting. They're not just typing into--

Chris: A lot of apps need a fancy text area.

Dave: Right, so it doesn't just feel like you're typing into a bunko text box - or whatever.

It's episode 488, if somebody wants to go back to it. We listed out. We went deep on it. It was interesting. Kind of went back and forth, and I actually started going down the block editor route, Chris. I used EditorJS and got that up and running.

Chris: Oh! You were going to block it up?

Dave: I was block editing. But we sort of realized, with the block editor, your text formatting doesn't show up until you highlight or something like that.

Chris: Oh, I see. It a lot of times doesn't have the bar at the top thing that people are used to, like Word.

Dave: Yeah. No bar at the top. There's extra UI, like the plus widget for, like, "Choose which block you're using," and the order widget to drag them around.

Chris: Hmm.

Dave: It was great. I liked EditorJS, but it was interesting how quickly, once you start using a block editor, you end up making a Notion clone. [Laughter] You're just kind of like, "Well, I guess I'll just make a Notion clone." You know?

We kind of took a step back from that just because it was sort of not vibing right. You know?

Chris: Hmm.

Dave: We wanted it a little more structured in our data than an unstructured data thing, which maybe that'll come back to bite us. I don't know. But then I went to the WYSIWYG side of things and, man, there is a big difference between all the editors. [Laughter]

Chris: Hmm.

00:27:11

Dave: Getting the feature set you need -- we had a big conversation. We think the two features we need are image upload, the ability to see an image, and tables.

Chris: That's a beast, though.

Dave: Yeah! And so, image upload, now you have to write an API endpoint or something like that.

Chris: Pretty much.

Dave: Well, I found one. It was QuillJS, Quill. Do you know Quill? Have you heard of Quill? I don't think we mentioned it in our thing.

Chris: I don't know.

Dave: Quill is very good, I guess. It's good, but it has image upload. But guess what it does.

Chris: What?

Dave: It Bay 64's the image.

Chris: Oh, but maybe that's good, or no?

Dave: It was kind of good. I was into it but guess what failed. Post request, boom, payload was too large for the servicer worker - or whatever.

Chris: Oh... Boo.

Dave: The request payload. So now, I have to -- and then even then, your database response would be one meg or however many megs somebody uploaded.

Chris: Yeah. True. True. Yeah.

Dave: That would be bad.

Chris: Well, what worries me is immediately the other alternative is, okay, well, upload it somewhere then. You're like -- I don't know. Whatever. S3. Just throw it in something.

Dave: Put it....

Chris: Nobody needs an account. But then you're like, what if somebody uploads a picture of a boob or something? Even if they delete it really quick, do you also write code that says, "Oh, the user deleted it from their document. Go into S3. Find the image of the boob and delete it." No, probably not.

Dave: Probably not.

Chris: It's just going to be a boob of an Internet.

Dave: No, it just lives -- have a boob forever.

Chris: Forever, yeah.

Dave: Yeah. No, and that's an issue. Yeah, WYSIWYG are tough. That's a tough thing.

Chris: It's tough. You'll be all right. I didn't mean to scare you. You'll be all right. You used Quill. Quill. You're Quilling it up.

00:29:05

Dave: I'm using Quill, and I think it's the right mix of extensibility and programmability, but I hit that thing where I wanted to use tables. That's not the default Quill package. You've got to use an extension. Well, guess what.

Chris: Oh...

Dave: All the extensions use the 2.0 dev version, right? And 2.0.0.3 - or whatever - dev 3.

Chris: Well, that's kind of good. At least they don't use the 0.2 edition.

Dave: Right. Right. But the standard Vue plugin or whatever, Vue extension or Vue module is the 1.3, and so I had to manually -- I had to eject, basically, and upgrade everything to get it all working. Now I'm maintaining my own editor, which is not what I wanted to do, but it's maybe a critical enough feature, I'm doing it.

Chris: Nice.

Dave: I can maybe add more accessibility into it. The nice thing is it uses actual buttons, so I can put actual labels, hopefully.

Chris: Nice.

Dave: That's kind of nice.

Chris: It looks really good. It looks really good. There are so many choices. It's interesting. This one must have hit the marketing just right.

I am a little obsessed with this, not to the point where I've done any research or anything, but what makes something like Quill get 31,456 stars on GitHub compared to the many other ones that are like this? It's tempting to say, "Well, it's the best one. It's the better one." But is it really?

In your case, it does seem like it's good. But it could be that just the default design of the editor is so basic that people are like, "Yeah, I want that one. I don't like the look of some other ones." Or it could be the marketing page. Or it could be the docs. Or it could be their social media presence. Or it could be a lie. They paid somebody to [laughter] to juice their stars or something.

Dave: See. I think all that plays into it. I used to be pretty naive about people paying for stars and visitors and everything, but I think it's kind of a gross commonplace.

Chris: I’m not accusing Quill of it, by the way.

Dave: Not accusing anybody.

Chris: Yeah.

Dave: But I don't un-accuse people, if you know what I'm saying.

Chris: Yeah.

Dave: Okay.

Chris: Oh, their demo on their playground is a CodePen. Oh--

Dave: They use CodePen. That could be part of it.

Chris: Now I know they're good people.

Dave: Now you know they're good people. But I think, too, they made a React component. I think those micro things, like if you hit the distribution channel, the zeitgeist at the right time, you can maybe explode.

Some of these, though, haven't had updates in years, you know, like GitHub, their last main commit on Quill. This is a good problem and a bad problem. Well, it's like 11 days ago, but the last release or whatever was kind of a long time ago.

Chris: Yeah.

Dave: Like the 2.1.3.7 or something like that. Anyway--

Chris: Yeah. Isn't that funny? That is absolutely -- you just said it out loud, but I've heard it many times out of my own mouth and from other developers. They just look at that. They just want to see. They just want to see commits. If the commits are not there, it's just a huge strike against that. I'm just not sure. I feel it, but also I'm worried that that's not fair.

00:32:29

Dave: Well, because you'd think with an editor, WYSIWYG, maybe you just solved extensibility so people have extended themselves. You solved making text bold and italic. You don't have to rework that because you figured it out, you tested it, and you solved it. Maybe it's not a big deal.

Chris: No, but then you've got to square it against issues, and so there are over a thousand issues here. Then you look through those, and it says, "How do I do this?" You're like, "That's not an issue."

Dave: "Am I pregnant?" What?! No.

Chris: Yeah. [Laughter] And so there's stuff. There's support for Vite. Cool. That means that they're not triaging either, which is totally understandable. I can't imagine having a project with 31,000 stars and no business model, because it doesn't look like they charge for it or have anything like that, right? So, at some point, this just becomes just a behemoth that somebody is just going to have to walk away from it, or it's going to have to a corporate sponsor or something, you know, somebody from Microsoft is going to have to take it over and have it be their problem - or something.

Can you imagine having 30 issues a day pour into your thing, and just to triage them is hours of work, let alone fix the actual thing, let alone then think about how this is happening and how you can redirect that energy? Maybe we should have a Discord. We definitely need a contributing.md, or maybe we should just archive the repo because we need to be really clear that we can't keep up with this.

But that's dangerous to have any one of those options. None of them feel amazing. You know?

Dave: Mm-hmm.

Chris: Yuck. I don't even know if they're sad, but it seems like this is a recipe for developer sadness.

Dave: Yeah. No, well, and everyone has needs and wants and desires. One thing that's weird about this is the OL and ULs, the unordered lists and the bulleted lists or the ordered lists and the bulleted lists.

Chris: Yeah.

Dave: The same OL. It's just they use data list equals bullets on the LIs, or something like that, to style that. Now I have to inherit the debt to make that show up right. Even nested lists are just another LI in the sequence, and they have an indent thing, so the semantics are really wrong.

Chris: What?!

Dave: You know? And so-- [Loud exhale]

Chris: You had one job, editor, is to make HTML out of this thing, and it's borked?

Dave: A little bork. Little borked, so what do you do?

Chris: [Loud gasp]

Dave: I don't know what to do. That's it. Now I'm an archeologist. Now I have to excavate. Now I have to chip into the issues and see in all the branches and all the forks and see if somebody on the Internet figured out how to make a UL and an OL different things, or nested OLs or ULs. You know?

Chris: That should be -- that's an actual bug. That belongs in issues.

00:35:35

Dave: Yeah. Again, back to accessibility. They're literally different things. [Laughter]

Chris: Yeah. I wonder why that was. Was it just neglect or is there some deeper reason why it's like that? I could see how nesting would be a little tricky, and that's easier to just toss a class on an LI, but you can't do that.

Dave: Mm-hmm. Yeah, it's different. Right? I don't know.

Chris: Still, it does look nice.

Dave: I think it's just a matter of what is easy and stylable. Then there's also the idea of, "Oh, I'm going to convert this LI into a paragraph or a heading or something."

Chris: Yeah.

Dave: Sort of like how you convert blocks to different things. If it's ultra-nested, maybe that's wrong.

Chris: Yeah.

Dave: It's hard.

Chris: Can you imagine a Web primitive someday? You've done a lot more work than I have on that. We talked about tabs forever and all that. What about a text area with a rich attribute on it or something?

Dave: Give it to me. I don't know. Yeah. I mean--

Chris: [Laughter]

Dave: You know what? There's a -- I'm going to--

I don't want to speak wrongly, but I think somebody -- I think there is a team, like a W3C team, considering this stuff, like the Web authoring or something. I don't know. W3C... [Laughter] WYSIWYG? I don't know.

Chris: It's kind of like you're just rendering HTML inside the text area. It's not like you're inventing a whole new language or anything. It would just be like the text area rather than displaying only text with no formatting whatsoever could accept bold, headers, links, and anything else that HTML could. But be editable much like div content editable.

Dave: Mm-hmm. Yeah. No, I mean I think there are a lot of people working on content editable. I think it's the same group who is doing text selection and copy and clipboard. I need to figure out what that group is. I really don't remember what it was called. I could probably just--

Chris: That's the Web at its best, though, when it seems, "Oh, my god. There are 400 libraries, all of them with tens of thousands of stars on GitHub trying to solve the same problem over and over and over," and even the best of them get accessibility things wrong. That is a moment for the Web platform to step in.

Dave: Right. Right. Like, "Hi." [Laughter] "We've let this be totally un-whatever wild west for a little too long. Let's fix it." You know?

Chris: Yeah. Seems like a good idea. I don't want to do it, but I will clap at you as you do it.

Dave: [Laughter] I will say, "Go work harder!"

Chris: Yeah.

[Laughter]

Chris: Yeah.

Dave: "Why is this not done yet?" Yeah, from the sidelines.

Chris: Google, pay for it. [Laughter]

Dave: What about blockchain?

[Laughter]

Chris: Yeah. Yeah.

Dave: Why does this not work with blockchain?

00:38:44

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Automattic, makers of WooCommerce, WordPress.com, and, of course, Jetpack. We talk about Jetpack a lot because it really saves my bacon and does a good job on so many things.

One of the things that it can do and, in fact, if this is the only thing you care Jetpack to do, you can do it that way. They have a backup plan for Jetpack. It backs up your self-hosted WordPress site.

They made a change just this month, super recently, where all backups are now real-time. They used to have two different plans: daily and real-time. Real-time was a little more expensive. Now it's just one plan. All backups are real-time, which is a tremendous feature.

I feel like most backup stuff out there works on a cron schedule. It backs up once a day, if you're lucky, kind of thing. This is like, anything happens on the site, boom, it's available in your backups. You can go back and restore to a point if you need to, which has happened to me a couple of times this year. [Laughter]

You want to restore right to a particular point, like when a comment was left, a post was edited, or something went wrong in some way. It's amazing, the backup. You'll never lose anything, for one point. Your backups are right to when anything happened.

It's not like, "Oh, the closest backup I have is yesterday, so we'll lose anything that happened today." Nope. No, you won't. You'll have everything up to moment you need it. But being able to restore to that point is equally valuable. It's just very cool that all their backups are real-time now.

That's the whole message. Jetpack.com, thanks for the support.

[Banjo music stops]

00:40:28

Chris: One more thing on my mind here. I worked on this, this week. Sometimes, when I'm heavy on building out new UI, there's a lot of component scaffolding. I've just turned a corner. I only build UIs in components now.

Dave: Great.

Chris: Unless it's WordPress, and then I'm sad that I can't or whatever. I could, but I don't want to.

But generally, I pick some kind of site builder. We talked about this when you had that great line that the programming model for all these new tools is all the same.

Dave: Mm-hmm.

Chris: HTML forward, component-based, that kind of thing.

Dave: Yeah.

Chris: But let's say you're building a new UI. You're like, "Okay, that needs to be a component. I'm going to split this into a component. This will have a parent component and a couple of child components." Whatever.

On CodePen, we've long established how we do it. We have a folder. The folder is capitalized. You know, capital C (Component). Inside, there is an index.js file. The index.js file generally just has one line in it. It exports the named JavaScript file. We do that because it makes find in project and find file and stuff just kind of easier to use. That way, when you search for capital C (Component), you get to go to the named file of that, but the index makes it easier to import. Whatever. It's just a little boilerplate code, but we do it consistently, and I kind of like it, so that's the thing.

It also opens up this door, like, you could do the data fetching in the index file and then do the view in the named component - or whatever. But then we use CSS Modules, so there's always component.module.css as CSS sitting next to it. At a minimum, there are those three files.

But I do it over and over and over, so first I go up to the components folder and I right click and make new folder. But, whoops, I accidentally made new file, so go delete the untitled file. Then go back up and actually hit "New Folder." Cool. Good job. Hand-name it the name of the component. Click that folder. Make a new file in it called index.js. Find another one in the code base, copy and paste that one-liner out of it, paste it in there, but adjust the name.

It's just very tedious. And by the time you've done it 13 times that day because you're building out a totally fresh, you're like, "I hate this!" Right?

Dave: Mm-hmm.

Chris: That is what scaffolding is for, and there's probably lots of tools for this, but I've always been like, "Oh, I just need one more component. I'll do it the old way," and then don't actually stop and look to see what we could do.

I'm sure VS Code has stuff built in. There are probably VS Code plugins for it. I imagine people have explored lots of scaffolding stuff.

But I was reading a Smashing Magazine article, "How to Maintain a Large-Scale NextJS Application." I was like, "Oh, yeah. It's relevant to me at the moment."

Dave: Mm-hmm.

Chris: I'm reading it, and it's got lots of good advice in it and stuff, you know, mono-repo stuff. It was a pretty well-done article.

But in it, it says, "You should have a scaffolding tool." I was like, "Yes! God-dang it. I need to be pushed on this one more time," and that was my push.

Dave: Mm-hmm.

Chris: The one they recommended was called Hygen, H-Y-G-E-N.

Dave: Okay.

Chris: It just looked like a thing you can brew install it. You can NPM install it - whatever. It gives you a CLI. Then the CLI is like, "Hygen component new," and just finds the component that you have scaffolded called component - or whatever - and kicks it out.

Where you keep the templates for these components are not in config. It's not in JSON or anything. They're just files in an underscore templates folder. But it has a special syntax because, of course, it looks like ERB. It looks like Ruby templating.

Dave: Okay. Okay.

Chris: So you say, or I want to say, "New component. Hygen new component," and then you can pass in data to it at the CLI level, like --name is avatar or my new component. It has tools, like it'll capitalize it for you and crap like that (if you want it to).

It'll go find the templates and then you can template the names of the files. You can say where to put them. There are all kinds of powerful abilities.

But now you have a CLI to say, "Give me a new component of this name." Boom. Done. It takes this little two-minute job into two seconds. I think it just feels right, so now I'm all into it.

Dave: You're all in. You're all in.

Chris: Not all in. I've only made a couple of templates, and now I'm opening it for discussion internally, like, "Should we actually do this, or do we look at another one?"

I brought it up in the Discord, and you were like, "Oh, Brad says he likes Plop."

00:45:00

Dave: Yeah. Brad Frost kind of showed me Plop, which is the same thing.

Chris: It's very similar.

Dave: It's just basically like he types plop my new component and, boom, it creates the test. It creates the component.

Chris: Right.

Dave: And it creates maybe a CSS file or something that goes with it.

Chris: Exactly.

Dave: I like this. I want this. I've tried to build this. I tried to build this for Web components at one point. [Laughter]

Chris: Oh! It'd be awesome for Web components. Yeah.

Dave: Yeah, because I just was like, "Oh, wouldn't it be cool if I just was like, boom, new thing, new thing?" You know?

Chris: Yeah. Wasn't that what -- what was that tool with the soldier guy on it? It was an Addy Osmani thing from ages ago.

Dave: Oh, Yeoman generators? Yeah.

Chris: Yeah.

Dave: Yeah.

Chris: Yeah, but those were kind of global, so if you made a Web component one that other people could use it. I think these tools are more like individual code base scaffolding.

Dave: Yeah. I think this like you create your own little thing. Right?

Chris: I looked at the syntax for Plop and it looked a little more -- I didn't like it as much, but I don't know. It seems a little more JavaScript forward, which is maybe good. But it also has this, like you build--

It asks you questions about your component when you make it, which I think I do like. I don't know enough to truly compare them.

Dave: Yeah. Yeah. Well, I think this is where Melanie says, "Did you know Ember already does this?" [Laughter]

Chris: [Laughter]

Dave: We should just get a sound clip of Melanie saying that. I think a lot of tools have this. I'm thinking Vue CLI kind of can do this. I think it can scaffold out a component. Maybe that's more project-based, though. I don't use it because I'm always in a Nuxt context. I think even Nuxt CLI, there's a new Nuxt CLI.

00:46:54

Chris: Yeah. But your app is going to have -isms. I do make a CSS file, but I name it in a particular way that's important to us. And, at the top of every one of those files, I import our Sass dependencies that we use. That's unique to our codebase. In my scaffolding, I put that all in there. How would the Vue CLI know that? Do you have to teach it that or is it designed to be more generic and, thus, can't do that?

Dave: No. No, that's a good point. I think these tools are great, especially as the team gets larger. You just have a way, like, this is how you do it. If you're going to rethink--

It's sort of like code linting. This is how we do it. This is what you need to do.

Even like tests. I'm finding -- I've been writing tests for my app, too, because I'm breaking stuff. Even that, there are usually four or five just general tests I'd want to run, or even an accessibility test or something like that that I'd want to run. There are some tests I want to run just out of the box.

Could I automate that and make sure that happens and then somebody can delete it if they want to? Just by creating a new component, you get at least a little bit of testing, like, does it mount? Does it expect certain text or certain values or accept these props or something like that? That would be cool if you had those already built out just the second you type Plop or Hygen a component.

Chris: Yeah. Then it becomes the team's. Everybody can contribute to it, too. They're like, "Oh, I have a better way that we should scaffold these components that would make them even more useful," or "Here's my take on it. This one is actually a component that has queries and does have a test."

Dave: Mm-hmm.

Chris: I don't know. The more complicated the needs of a component are, the more useful this gets. It's kind of cool.

Well, we have just a few minutes, and we have one question that's been burning a hole in my pocket, so let's do it really quick.

Dave: Okay.

00:49:16

Chris: Tom de Bruin writes in, "What's your opinion of using all unset on individual elements to clean everything out before stylings? For example, a button, angle brackets button. Is it a sledgehammer to crack a nut or is it better to change the individual bits that you don't need? Great show. Been listening for years."

High five, Tom. Why don't you come join us in the Discord? [Laughter]

Dave: [Laughter] All unset, it's the golden hammer or is it a--?

Chris: I don't use it, but not because I'm discouraging you from using it. I'm just kind of scared of it. I don't know why. It just seems like it does an awful lot and I just haven't gotten muscle memory for that yet. But a button does seem like a clutch one to use it for.

Dave: Yeah. I think buttons. To me, an editorial component or the blog component or a block of text component seems like a really good place to just be like, "You know what? These styles are going to be so different in there, I'm going wild. Unset everything."

Chris: Does all cascade, though? Probably not.

Dave: Well, you'd probably need to be like star.

Chris: Yeah.

Dave: Text block star. Just delete everything. Don't like it.

Chris: Yeah, I guess you would. No, I do, but that's even more -- that's got the wheels turning in my brain. I know exactly what you mean, right? I'm styling the rest of the site, and now I have this chunk of content. But I almost don't want anything to bleed into that area because I want to start fresh on what that looks like. That's a clever way to do it. I think I like it.

Dave: All unset would just be, "Yeah, yeah, don't--" Whoever set the A tag styling, it doesn't work here. [Laughter]

Chris: Dude, this is good. You should write this up. I like this.

Dave: All right. Sure. I'll write it. But I think that's a point where you'd want to use it.

Chris: Yeah. You know where I've seen the opposite in the past was, "Don't ever do raw typography styling." It was like put a type -- like in Sass, if you just put .type{} and then put all of that within the .type class. That way it's opt-in typography. There are no general styles anywhere unless you're in an area that you know is content. Then you just plop that type class on that parent and it becomes content. That's the reverse.

Dave: Mm-hmm.

Chris: Although, do I think that's practical? I don't know. Sometimes you want some type styles generally around.

Dave: Yeah. You want the base type system, you know, fonts and stuff to inherit.

Chris: Yeah.

Dave: Maybe the all unset is not so good, but you know. There are places I think it really -- I think I wrote some inherits the other day because I just was like, don't do what you're doing. Stop doing what you did.

00:52:28

Chris: Yeah. Button always gets me, and selects if you style them and stuff, too. To get a button to be normal, you have to wipe out a lot of stuff. The first one I always do is border, for some reason. That removes the browser default styling. But then it's got a background, so you've got to knock the background off, too. I think there's padding in there. The font family is always weird, so you've got to do font family inherit. There are at least five, if not more.

Dave: What I found with buttons, too, is you're like, "Cool. I have the perfect button system," and then d-da-d-da, icon buttons. We've got to use them, guys. [Laughter] Then you're like, "Oh, those need no styling at all. It just needs to be the icon with a little bit of padding." Anyway, there's -- yeah.

I think, buttons and editorials, that's where I'd be looking to use them. Maybe tables just because tables are another weird thing. You don't want your paragraphs or - I don't know. Yeah.

Chris: Yeah.

Dave: All right. Well, hey. I know we're at a hard stop, so we're going to power this down at exactly one minute before the meeting, so 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 for 16 tweets a month. And join us over in the Discord, patreon.com/shoptalkshow. Lots of fun.

We are heading into the holiday season here. We're going to have shows, I think, throughout the whole thing. But just letting you know. Yeah, so--

Chris: Yeah. We've been doing videos, and those will probably spin down until -- we might do one more or something, but then we'll get that cooking again in the new year.

Dave: Yeah. Looking forward to it. Okay. Chris, do you got anything else you'd like to say?

Chris: [Tongue roll] ShopTalkShow.com. Thanks, team!