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 am Dave Rupert, and with me is Chris Coyier. Hey, Chris.

Chris Coyier: Hey, man. You look good. You sound good. Everything is awesome.

Dave: Yeah. Audio people won't get this, but I'm wearing a new hat.

Chris: Yeah. You're rep'in your town.

Dave: Yeah. Austin FC. It's a soccer team (or "football").

Chris: Nice.

Dave: Here in Austin, we have a new football team.

Chris: It's new. Okay.

Dave: New. The first year, they had gotten last place.

Chris: Aw!

Dave: For the whole league. [Laughter] But hey, it's great. It was actually fun. The crowd is bananas. We have a cheering section and stuff like that. It was a good vibe. But now I do sports. [Laughter] I never thought of old Dave Rupert as a sports, but oh I do it now. Yeah.

Chris: When I lived back in Wisconsin, I was such a Wisconsin Badgers fan - probably. I had a roommate who was really into it at one time. I'd go to games with him, and it just was so much fun. There was so much camaraderie. I got super into it, and then was like a sports guy for a minute.

And then moved away, and then I couldn't really recreate it living here out in the high desert where there's no "thing," but I've remained a fan and still sign up for Hulu Live so I can watch Wisconsin Badgers football games and stuff.

Dave: See.

Chris: I'm holding onto a thread of it. But then I get the news last year that Oregon High Desert Storm is coming. That is our local professional indoor football organization. It was their first year (last year), so I immediately bought swag, bought season tickets. It was a little COVID weird, obviously, so we didn't do that much.

Dave: Yeah, yeah, yeah.

Chris: But I'm glad they're here, and I'm going to support them while they're here, just like you are. You're like, "New sports team? Heck yeah."

Dave: Sports team. I'll do sports. I don't know. You think about ways to kill two hours. Go to a sports.

Chris: Yeah. Drink a tallboy.

Dave: Do sports.

Chris: Get some cotton candy for your kid. Whatever.

Dave: Yeah, it's pretty heavy on the beverages.

Chris: [Laughter]

Dave: It can be a beverage-free experience, obviously, but they only sell big dogs, as they're commonly referred to in the business.

Chris: I know. Yeah. At industry events and stuff, it's a little -- you can't. You can't be just an all-drinking kind of thing, but I'll tell you I'm a bit of a drinker myself. I enjoy it. I'll be damned if I'm going to go to a sporting event and not have some beerskies. That's my thing.

Dave: I'm not. I'm not even a drinker, but it's fun. Then you see the kids, the 20-year-olds. Oh, to be young and have enough money to afford sports tickets.

Chris: [Laughter]

Dave: That was not my situation. But they are having a time. Oh, those boys. Those boys are just romping around.

Chris: Yeah.

Dave: With their shirts off, swinging them in the air. They are having a time, those boys. [Laughter]

Chris: Oh, fantastic. I thought we'd do a bunch of Q&A. A bunch of you have heard our call and sent in questions and topics and things for us to talk about. I have a couple. I don't know how -- just the serendipity of the land -- that are all related to each other, so I thought we'd kick out those first - a little WordPress stuff.

Dave: Something in the water.

Chris: If you totally don't care about that, skip ahead a little bit, but I find it all very fascinating, of course, as someone who owns and operates a couple of WordPress sites, including ShopTalk Show itself. It's a WordPress site.

Dave: Mm-hmm. Yeah.

00:03:51

Chris: The block editor is just inescapably a big deal. I think the biggest news in it lately is that they've been pushing forward towards this thing called full site editing. Have you heard anything about that, Dave?

Dave: Is that just that every piece of the site is a block?

Chris: Pretty much, yeah. I haven't tried it, really, myself, but I'm following the news and stuff. I do think it's a good idea.

Dave: But are you editing in the block, like in the admin section, or are you clicking divs on the homepage?

Chris: I think I'm kind of still in the admin section, although it looks quite a bit different because there's more to do.

Dave: Okay. Clicking divs on the homepage is great but, from a client service thing, that's when it can get really messed up.

Chris: Yeah. I almost like that WordPress has drawn the line there, generally, in that they don't offer that front-end. There's always a separation between the admin experience and what the site produces.

Dave: Mm-hmm.

Chris: I think that was probably a smart thing to maintain. I think that's maintained here, but it is -- I'm not probably talking about this as intelligently as I could, but it is a very big difference in that you don't even necessarily have a single .php file anymore, and a page.php, and those type of traditional representations of what pages are because those are now built and managed in the admin itself.

A theme can be just a handful of files, like a style.css file because there's that forever. That's what almost defines a theme is that it has this CSS file with a bunch of metadata at the top of it.

Then there's this new file called theme.json, and it's like an expression of design tokens, kind of, and information about what's important in your theme design-wise. That's highly used then in this kind of full-site block editor thing. I think themes are very light in the amount of files that they have and the rest of the theme is on you to craft in the admin itself.

It seems cool to me. It seems like you don't have to use it, but it unlocks some kind of powerful possibilities. I think the more that they can offer in the admin itself where you don't have to chopper in a developer to work on it, but there's some intuitive way to go edit stuff.

You know how awkward it is to have, like, "Oh, you can control the blog post. But if you need to change anything in the footer, call in a developer because that's in some PHP file somewhere."

Dave: I mean I'm guilty of, "Well, I can -- yeah, you can write as many blog posts as you want. But if you want to change the homepage or move one of those things in the sidebar of the about page, that you have to call me. You have to bother me." Then I can't do it for 12 weeks.

Chris: Yeah. You know how awkward it's been where you're like, "Well, okay. Maybe I'll design the theme to use widgets," because widgets were a thing in WordPress. Then that offered a little bit of UI where you could drag them around a little bit.

Then there's menus and menus, you can handcraft in there, too. Then you just output the menu. That gives some people some control. All those things are not bad, I don't think, but they're now that there's a block editor, I think there's probably too much technical debt. It's like, can we throw those things away and just be like, "All these things are blocks, and those blocks are what you drag around."

00:07:25

Dave: The overhead to explain that to a client was pretty high, too. We got into the business of recording videos about how to drive your WordPress.

What was that? There was a product that did that, too, like Life.

Chris: I think it was highly successful, too.

Dave: Lifeguard HQ or something. It had a little lifeguard, lifesaver. Anyway.

Chris: It would put videos in the admin. So, if your client had a question on how to do something, there was a video two clicks away, or one click away.

Dave: Yes, please. Yeah. Whatever. I'm ghosting them. [Laughter] I'm busy.

Yeah. I wonder if you could just get away with that, like get rid of those. Yeah, I don't know.

Chris: Maybe.

Dave: With mobile now, too, mobile is such a big power player. Why even sidebar? Why are we doing sidebars? They're still valuable.

Chris: I think there are interesting blocks that have enabled like WP Query, or whatever that major API that's like, "Query for anything," essentially. "Give me posts of this tag, and give me 15 of them in reverse order, and blah-blah-blah." I think there's a block now.

Dave: You can just WP Query block?

Chris: Like a beautiful query block that allows you to put whatever content, which I think is very smart.

Dave: Yeah, I might need to revisit WordPress. [Laughter] I guess we have one here at ShopTalk.

Chris: But the block editor remains highly contentious. It's synonymous with the word Gutenberg. They still use the word Gutenberg because development of the block editor still happens in a plugin called Gutenberg that runs ahead of time.

If you want the latest and greatest, you use that plugin. I'm off it. I don't want to run the latest and greatest. [Laughter] I want to run stable. But people still refer to it as Gutenberg, so we might use those words interchangeably.

Certainly some -- for lack of a better word -- haters out there. I don't even mind using the word because I feel like some of the criticism that you hear is, like, you're not articulating it very well. I don't know what you hate about it. It just sounds like you hate it.

Dave: [Laughter] Why are you mad? Yeah.

Chris: Some of the recent drama I've read is that it's not very good for writing, just writing, like a book or even a blog post. I just disagree because I've written a crapload of blog posts in it and the second I could, I liked it, so it doesn't jive with me, but I'm not a book writer. I'm a blog writer. Yeah.

00:10:01

Dave: Okay. Yeah. My experience is in Notion, another block editor of some kind.

Chris: Same criticism I've heard there, too. Yeah.

Dave: It's a little bit like I start typing and then it's like, "Oh, you want to--?" It starts inferring. I type an at symbol and it's like, "Great. Let's link up another page, guy."

It's like, "Well, I was going to type a Twitter handle."

"Oh, I'll look for him in your list of users. Do you want me to invite them?"

It's like, "No. No. No. I was just saying a Twitter handle." You know?

Stuff like that, or if you start a thing with a quote or whatever, it might start a block quote or something. There are a few tinkers that don't really work. But some of it is unique to me.

If I link something, I have to highlight the whole entire word, too. Change the link. It's really frustrating. There's no right-click change link. But again, I'm getting nuanced here. There are some little frustrations that I experience.

Chris: Even if they are just little, still then why deal with them at all? Why not just use it to write, then, and use something that's more designed for writing and then bring it over? I'm not suggesting you do that. I think there is--

Dave: Well, my tradeoff is one I can say. I've thought about it a lot. [Laughter] I've thought about my blogging process quite a bit, Chris. It's that I get organization, so that's 100% the tradeoff. I can organize my thoughts. I can tag my thoughts in drafts. I'm talking magnitude of 100 drafts at once.

Chris: Right.

Dave: I can organize them. I can drag and drop whole blocks of section content if I feel like it's going weird. I don't have to copy/paste and then change. My ADD makes me copy/paste something else. I lost a whole paragraph, page, or something. I can do everything in a consistent interface. It's a step up from Markdown, maybe.

I don't have 100 files in a folder, which would be like another Markdown editor would be 100 files in a folder. That doesn't help me.

Chris: Did you do the Obsidian thing? Not to take this too far outside.

Dave: I haven't jumped on the Obsidian train. I'm a Notion person. No shade to the Obsidian folks, but I actually don't want to program my outbrain. I just want to dump things into there.

Chris: Yeah. I thought I could try because I do use this app called Bear, and I just use it for real quick notes, but I want them to be synced. It's almost like I'm not ready for Notion, which is silly because there are private pages in Notion, and I could use it for the same kind of thing.

To me, there's some kind of disconnect where Notion feels a little groggy, and sometimes when I'm in note mode, I just want to click an icon and I better be writing a note in one second. I don't care where to put it. I don't want to pick the right workspace. I don't want to think. I just need notes. I need notes right now. I'm on a call.

Dave: Yeah. Yeah. I think they have a little bit of that, but you need to know. On the mobile app, there's just the new thing and it'll dump into a thing called notes, which is cool. But the chance that it dumps into the wrong folder is probably also there.

Chris: Yeah.

00:13:40

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by MarkUp, that's markup.io. The link is in the show notes, of course.

MarkUp is the leading visual commenting platform for live websites, images, PDFs. Imagine you need to invite some people to have some feedback on this thing. Sure, maybe it's a website in staging or whatever. It could just be an image of a design or a PDF of a design.

Whether you're designing the project from ideation or putting the finishing touches on the build, MarkUp is the perfect tool to get your team together. Invite as many people as you want. They join as a member, a full guest, and then they get to view the thing you're sharing with them, create stuff, and resolve comments.

If they're like, "Oh, this blue is not on brand," or "This font should be tract in a little bit," or "What about this missing part over here?" that gets the team together. It gets sign-off on these designs. It's the leading tool for that.

Markup.io, go from design to build to publish without losing your mind in the process. MarkUp will save you time and you'll save the day.

[Banjo music stops]

00:14:54

Chris: Well, okay. Enough asides. We have a topic here from Jonathan Land who does articular some issues he has with the block editor. He says, "I get that Gutenberg is great for blogs you design and develop yourself (e.g., CSS-Tricks)." Hey. Fair enough, Jonathan. I fricken' love the block editor and it's very good for CSS-Tricks. But yeah, I am not thinking holistically about all sites in the world there.

He also says, "I'm sure it's lovely for nontechnical, do it yourself authors. It opens the door for some fancier stuff, perhaps, for people who don't write code," which I'd also agree with. "But for client work, I'm getting increasingly frustrated with the totality of it, especially on sites that aren't blog-focused. WordPress was always a little limited for these with poor support for custom fields natively and such. But now that you either need to design the website in a very modular, read less focused way to potentially support essentially anything, or you fight against the platform and you smash in the classic editor plugin and hope it doesn't go away one day, or whatever."

Jonathan writes, "It feels to me that Gutenberg is intended to fight the Squarespace of the world and that WordPress is on course to become increasingly less suited to professionals."

Dave: Hmm. Hmm. Hmm. Okay.

Chris: I don't know. What can you not do now that you used to be able to do better before? That's my big question. Is somehow that if there was no blocks, somehow that's more focused and better? I guess my criticism is, I don't feel limited now, and I am just speaking from my own experience. I don't do a lot of client work. It seems like whatever you could do before, you can still do now. We didn't take anything away.

00:16:45

Dave: Yeah. What is missing from the product? That's sort of WordPress's deal. It is GPL so, literally, if somebody changed bad and you don't like it, you can steal it, fork it, or whatever.

I would wonder what you can't do anymore inside of it. Maybe it's just what's becoming easy to do. Does that make sense? If everything is sort of driving towards block editing, you're not going to get a cool Stripe payment widget for your sidebar. You're going to get the Stripe block widget - or something.

Chris: I see.

Dave: Does that make sense? You're getting the Stripe block instead of the Stripe widget.

Chris: Right. Yeah.

Dave: Maybe that's the issue. Communities is kind of heading that way.

Chris: Yeah. He did say that; "The totality of it," like it's everywhere. Now widgets are blocks too, or whatever. It's headed in that direction. Yeah, I don't know.

This is related, though, to Brody's question here, so I'll read that too. He says, "Hi, there. I'm building out a WordPress site using advanced custom fields custom Gutenberg blocks / Timber and Twig templates, and it's working great, but I'm not sure how to bring my site styles into the WordPress admin."

Let's get into that, but it's interesting that Brody writes that then uses ACF, which is like just super widely used in WordPress land. I think that's in a lot of cases because Jonathan mentioned professional use. To me, it seems like if you're in professional town in WordPress, you're in ACF because you're working with clients and saying, "What data matters to you?" Then you model out that data in ACF. Then you apply it to templates so that you're giving them the perfect CMS experience. Right? This is your data.

I think it works the same way as it did before, so it's not worse. It just now has, if you want to make custom blocks, too, somehow they just figured out an incredible way to do that where you can scope out your block as ACF fields and kind of model it out as a block in a way that native WordPress didn't nail. I always thought it was so -- I don't know. Maybe that's too harsh, but it seems to me exactly the opposite thing happened in WordPress land where the way that you build the blocks in ACF feels very native WordPress-like.

That's what, in my mind, maybe should have made it into the platform first is their way of doing it. But the native platform way is like, "Oh, bring your own React build process stuff." It seems like that should be super advanced. That's the really cool, fancy way to build blocks. But there's just a default PHP way to do it, too.

No, ACF is what brings the really simple, easy, PHP-based way of building a block. Anyway, that's just a little aside. It just seems so odd that you have to buy the third-party product to make it easier.

00:20:03

Dave: Yeah, it is. I like ACF, but it's like unstructured data versus structured data, too. WordPress is sort of like, "We just have a big editor. You just type blocks in there." It's sort of unstructured, however you want to do it.

Chris: Yeah.

Dave: But ACF is like, "Okay, here's an actual data model. This field needs to be this input."

Chris: We did that. We do that at ShopTalk Show where each show that we publish is not free-form at all.

Dave: Mm-hmm.

Chris: In fact, we don't really use the block editor because the block editor would ultimately represent itself as just the text of a post. But really, mostly when you publish a podcast, it's a bunch of metadata. The title, the running time, the URL to the MP3.

Dave: The transcript. Yeah.

Chris: There's not that much. It's not that useful to have. I don't know. In our current design, the block editor isn't particularly useful. I don't mind having it turned on or whatever. We just don't embrace the block-ness just yet.

But in full form blog posts, I do it all the time. I'm like, "I need some columns. I need a slider. I need an image with a caption here and a video. I don't know. I use a million blocks when I blog. Here's my special code block and all that stuff, and it feels just wonderful to me that I have these abstracted blocks in which to build pages from. But that's blogging, and that's just a different world.

Dave: No, that's just it. Blocks are a really interesting concept, just in how you -- I don’t' know. Maybe that's the future is everything is a block editor. I don't know. It's interesting to think about in some cases.

Chris: As long as they nail that writing experience because that's been in the WordPress drama zeitgeist lately, too. Like I mentioned, is it really designed for writing? If it's not, isn't that weird? [Laughter] You'd think they probably should continue to make it great for writing and somehow still thread the needle and make it good for site-building and stuff, too. But that's tricky.

That leads us to another question (from Morgan Rowe). Maybe we'll circle back a little bit to Brody. You were asking about admin styles. Morgan is asking about WYSIWYG editors out there, generally, in the world.

Dave: Yeah.

00:22:33

Chris: This question has nothing to do with WordPress or the block editor, necessarily, but what are they. What are other options for editors?

Dave: Yeah. Here. I can read it. "Have either of you looked into any HTML generating WYSIWYG editors recently? I'm looking for one that's preferably written in vanilla JavaScript and easily extendable in case my users want to bespoke control implemented."

Everyone knows the, like, I need the cat button to put a cat photo in.

"I found Pell," which looks like a GitHub link here. "However, it uses document.exe command." Yikeronies. [Laughter] "Which, according to Mozilla, is now deprecated."

Chris: Oh.

Dave: That's interesting.

Chris: Yeah, well, don't use that.

Dave: Yeah. "My only other experience working with WYSIWYG editors is TinyMCE."

Chris: Right.

Dave: "Which seems far too feature-rich for my needs these days."

Chris: Famously part of WordPress for a long time until the block editor came along. Yeah.

Dave: "Do you have any recommendations?" That's Morgan from Wales.

Chris: You know TinyMCE is really still going hard, I think, though, so they're out there. I think that is an option that's worth looking at, I think.

Dave: Yeah. Yeah and wasn't there a slim version at some point. I feel like there was.

Chris: Perhaps.

Dave: I was kind of looking down this path, and I'm trying to find the links. [Laughter] Of course. What link app did I put it in?

Chris: Well, look for it for a minute. Here's just a couple, just to do a list.

Dave: Yeah, because I know you've looked.

Chris: SlateJS.org, check it out. It feels like somewhat modern take on these things.

There's Prose Mirror. Somewhat popular. It's from the same dude as Code Mirror, but this is designed more for writing copy. But I would absolutely use this and have used this in the past. Nice API and just feels like a pretty modern take on it.

But then think about, though, this thing called blocks that we've said a million times in this podcast already. I don't think Slate or Prose Mirror are block-oriented. Meaning, they're more like Microsoft Word. They're just paragraphs, and you type. Sometimes, that can feel just great for writing.

I think there is a whole sect of people in the world that really prefer that. Even the way that you select text and stuff feel more natural. There are a lot of people in the world that have just good muscle memory for that and how that works.

But there's starting to be this kind of like revolution of editors that the fundamental nature is a block instead of just one big text area kind of vibe. One example of that is EditorJS.io, is the big kind of open-source editor. It's in those same categories but is block-based, meaning that each block has a type, and you can change the type, and you can drag the blocks around. I think people are starting to understand it. That's that kind of Notion feel to it.

There are a lot of apps out there that are taking that block-style approach to writing things. I think it, in my opinion, has kind of taken over, like "this is the way" kind of vibe.

00:26:04

Dave: This is the way... What's the output, then?

Chris: JSON.

Dave: It's just a blob of JSON?

Chris: Yeah.

Dave: Then that's what, instead of whatever post.body or text or something, you have post.json-blob. [Laughter]

Chris: Right. It's on you to then iterate an output. If your goal then is to get body.content.innerhtml=, it's not as easy. It's not a string or it's not HTML. But I would think--

I haven't looked deeply into this one example, but I bet there are internal APIs that help you with getting HTML out of it, if that's what you want - or whatever. If there isn't, you would write a helper method and now you have one. It can't be that hard.

Dave: Yeah. I wonder if this is the thing I saw. I was looking in Vue. There's this site made with a Vue.js. It's a dot-com. It's pretty cool.

It has all these plugins and extensions. It puts a little GIF of how it works and stuff like that. It's well-curated, I guess I want to say.

As I get into Vue more, I just was like, "Oh, maybe I could just use some of these to get some shortcuts and stuff like that." Sometimes that helps and sometimes it doesn't.

But they have quite a few. I feel like I went down this path.

Chris: You found a Vue-based one?

Dave: Yeah, I found a Vue-based one that was built on some open-source one, but I think it was probably editor.js but in a Vue wrapper.

Yeah, it's always curious to me what these things end up dumping out. That's kind of an interesting technical detail that you need to know about these things. What do I type in and what does it spit out? Then how do I save that?

Chris: Right. That's pretty high level. It sounds like Morgan has thought even deeper about that, like, I need it to be extensible. You need to be able to add a button that does something specific.

Well, that's great. Is there an API? Are there visual controls at all in the editor you're looking at? If there is, what do the APIs look like for adding that button? Then, sure, there'll be a callback when the button is placed, but what if you have some pretty specific needs for what it does?

Dave: Mm-hmm.

Chris: Like you need to parse the blocks and find any instance of the word cat and make it spelled K-A-T-T-T or something. [Laughter] That means that the APIs need to be available for looking through existing blocks and all that.

There are probably a thousand methods (I feel like) in Code Mirror, which is the one I'm most familiar with because of CodePen, that we've used for ages.

Dave: Mm-hmm.

Chris: I don't know. A thousand might be too many, but there's a fricken' lot of APIs. You know?

00:29:23

Dave: Yeah. I found the one I was looking at. It's called TipTap, tiptap.dev. It's a headless WYSIWYG and writing in vanilla JS and has a Vue wrapper.

Chris: Yeah.

Dave: It's not blocks exactly - I don't think.

Chris: Yeah.

Dave: But this is probably what I would go with just if I needed an editor WYSIWYG because some people need that. Some people need -- they don't know Markdown, so they need this. Some people don't know how to bold text unless there's a bold button. Some people don't know how to hit command-B or control-B.

You as a developer also do not want to code those things. [laughter] So, these are pretty cool. I don't know how extensible this one is, if you needed--

Chris: That's the trick is sometimes design is like a weird cheat code. Like this one looks really nice, this tiptap.dev one. It's like, but is it actually nice? Maybe the design is -- maybe it's fantastic, right? But then you look at the editors like CKE Editor. You're like, "Oh, this is so old-school."

Dave: Mm-hmm.

Chris: "Do I even want to go here? It doesn't look as modern. It doesn't look as nice, but it's also been around for like 15 years, so maybe it's just way better to work with."

Dave: Yeah. Yeah, they've hit all 5,000 problems. You know? [Laughter] But I like this Editor.js, if I was going blocks.

Chris: I would think that would be a good early choice to make. Do you want something block-based or not?

Dave: Yeah. I do say that's probably the choice because if you head down this block-based thing, now you're just in Notion club.

Chris: [Laughter]

Dave: [Laughter] You know? Or whatever the new Microsoft Quill, or whatever it's called.

00:31:19

Chris: Wow! Did Microsoft get a lot of crap for that. Wow!

Dave: #hotdrama.

This is Microsoft fanboy Dave Rupert. [Laughter] #ad.

No. [Laughter] I always think it's interesting when somebody does a flex like that. They're like, "Hi. We just rebuilt your whole product, basically." They kind of did it with Teams to Slack.

This is definitely #hotdrama. I'm sure it's going to be Microsoft-y and there's going to be one weird thing about it that I can't use it because of that. You know?

Teams felt more like email to me. Slack feels like a chatroom. Teams feels like a new email inbox, and I think that's from the culture that built it up. Microsoft is very email-oriented. Hence Outlook and stuff like that.

I wonder what the vibe is inside that Notion clone. But I do think it's worth noting, Microsoft has developed enough of a design language where they can just--

Chris: Slap out a product like that.

Dave: --duplicate your product without even thinking about it. That's pretty frightening. I don't know. [Laughter]

Chris: I don't know how mad I felt. Only because there was a lot of, "Oh, way to copy Notion," but Notion has been copied six ways to Sunday already, y'all, and a long time already.

There's Notion and then there's one called Coda. Have you seen that one? Coda.io is very similar.

Dave: Yeah. You know what? I played with Coda. I will say what's cool about Coda is it can import datasheets from somewhere else. They're kind of like, "Oh, you want to-- We can actually import in Excel or your whole Jira queue and stuff like that." I think that's cool. It can use other data sources, not just itself, which is kind of a Notions limitation.

Google had Google Table. Do you remember that? It was kind of like a spreadsheet, but you could make different visualizations or something. I think it was Google Table. But then they were cost.... People were like, "No. Tables." Google Tables, yeah.

Chris: Like an Airtable thing?

Dave: Yeah. Yeah, Airtable clones.

Chris: Right. Obviously, cloning happens all the time but let me keep going. We talked about Notion, block editor, original, kind of, I think. There's plenty of innovation that they brought to the table, and Coda.

Then there's one called Clover, cloverapp.com. Then there's Nuclino, nuclino.com. Slight, slight.com. Craft, not to be confused with Craft CMS. It's just called Craft. This is a native Mac app.

All six of those, they're blocks -- block editor all day long -- and they all have a slash command that opens up which blocks that they support, and then you pick one and make a block. That's six just right there.

The fact that Microsoft comes along and makes a 7th, and I'm sure it's really like the 18th or something -- I don't know every app in the world -- seems like pitting. I mean they are the big guy, so they're very much not above criticism. But still, there's something in the water with block editors.

Dave: There's something in the water. Yeah. They're following trends and that's not illegal. I think their thing is-- I think it's just interesting they're able to do it.

My impression of Microsoft was, I mean, it'll take 100 years and it'll be garbage when it comes out. [Laughter] I think new Microsoft is very different, and it's probably going to be bundled in Office 365, and so now it's just like your company that uses Outlook is going to have it. You know? That's what happens.

Whoa! This Clover one is kind of wild. [Laughter] These visualizations are wild.

Chris: For a minute -- you know sometimes it's interesting to fantasize about what you would build if you were like, "All right. All responsibilities in my life have vanquished. I'm going to make a new startup with all my time."

I don't know. I think there's something. [Laughter] I'm like, "How about a Notion clone? Yeah, okay." [Laughter] Because I love Notion so much that I would want to do that. I mean that's what CodePen is, right? It's not like we had an original idea there. We riffed on what was already there.

Dave: Yeah. No, I think that's pretty normal. Yeah. No, you try a hand at it.

And you're a blogger. You blog a lot. There's maybe a potential to build something tailored to bloggers. This goes to WordPress. It can generate a Markdown file.

Chris: Yeah. That would be interesting, though. Forget full site editing. That's not what we're going for. To remain 100% focused on the content of one particular blog post, what would you build then if you had no other master to serve? Hmm.

Dave: Hmm. Hmm.

00:36:54

Chris: To circle back to Brody just for a minute, though, he was asking about advanced custom fields. He's building sites like that but wanted a way to bring site styles into the WordPress admin, which that's what starts to give WordPress that feel. A lot of other CMSs do this, too. I think it's relevant to any CMS. How do you make the editor experience inside the admin look like the outside?

I think it's tricky, and you have to apply a lot of taste to it because I don't think you want to just share a style sheet between them because then you're going to be fighting one or the other because the admin is going to have its own pile of CMS or pile of CSS that applies to it. You kind of want to let that be. If you're going to style inside that admin a little bit, then just do it lightly in ways that help the authoring experience but aren't trying to 100% mimic what the front-end of your site looks like.

I think what's been common that you see in themes is that there is an admin style sheet for themes and it just applies the same fonts to the editor. It might have a little bit of extra pizzazz in there that kind of mimics what the final blog post is going to look like.

Dave: Mm-hmm.

Chris: I think it's kind of cool. I like it. I've gone really, really light where I just do absolutely nothing at all. Then a little bit of just apply a little bit of styling. That's kind of what I do on CSS-Tricks. I have one style sheet and anything I want to share between both of them, I have a Sass file sitting there called "Shared CSS Between Front-end and Admin." It's a really verbosely named file.

Dave: Mm-hmm.

Chris: All I put in that is mix-ins, so it doesn't generate any CSS itself. It's just @mixin and then some chunk of CSS. The point of that is then (in my style sheet from the front-end of the site) I call that mix-in. In my admin style sheet, I call that mix-in, so it's a shared piece of code, but I'm being very selective about what I share between the two worlds.

Dave: No, I think that's the magic sauce is how do you just provide enough of a vibe, enough of a je ne sais quoi that captures the spirit of the site.

Chris: Then I've done it way too far on the CodePen side. I tried to basically mimic it entirely, and it's kind of fun to go around and make a landing page that looks exactly like the front-end does, but it doesn't quite. I just took it too far, and I kind of regret it. [Laughter]

Dave: Well, and the curse there is (four or five front-end changes later) your editor doesn't work. You know? [Laughter] Poor Marie can't edit the editor, edit the homepage.

Chris: Yeah because the way that it expresses columns internally - or something - is different to the CSS that you're using for columns on the front-end - or something. It's Grid fighting Flexbox and blah - war!

All right. Well, good luck, Brody. I'd say take a light touch. Look at what other themes are doing. It's kind of neat.

00:40:05

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Netlify. Jamstack hostess with the mostest.

Your site is kind of static when it's hosted on Netlify, meaning there's no PHP behind it or something, which might be the thing that you lean on to process a form or something. Well, guess what. You don't need PHP to process a form. Netlify will do that for you because they know that's the kind of thing you need. You shouldn't have to run a back-end server language just for something simple like that. It's so cool.

On Netlify, you have a form attribute. You just craft your HTML form and just put data-Netlify=true on it. Then Netlify is like, "I got this. When that form is submitted, I'll take over, and I'll handle it for you."

Then in the Netlify admin, you're like, "Oh, that's cool. Actually, send me an email whenever that is submitted," and it does that. And you can see the submissions in Netlify as well.

But also, if you're like, "Oh, can you actually hit the Slack channel with the data in it? Because really, there's a team of four of us and we should all see it, so just do it that way. That'd actually be the easiest." Oh, no problem. It's like one click away in the Netlify admin. It's so nice.

Or you're like, "Actually, this is programmatic. If you could, on the submission of it, send a webhook, like a post Web request to this other server with that data, that'd be useful." Oh, that's another click away in Netlify.

That's just one of the little features that make Netlify awesome. You have this super-powerful hosting and the fact that it's static unlocks all the great stuff like developer previews, which is my favorite feature ever. But you don't have to give up any of the power of a dynamic website - forms being a big part of that. Netlify has got the forms thing on lock.

[Banjo music stops]

00:41:56

Chris: Well, you know who wrote to me the other day, Dave? [Laughter] Way back - let's see. I'm going to find the day because I think it's relevant. It's a long time ago. In fact, when I brought this up in our D-d-d-d-discord, people were like, "Oh, I don't remember that episode." Well, it's because it was a long fricken' time ago now.

March 24, 2014 -- a trip back in time -- we did a special on this very podcast called "Special One on One with a Hacker." The backstory to this was that I was literally hacked, and in a very dangerous way, like this domain name css-tricks.com was taken from me, and it was pushed through different domain registrants and stuff in a very scary, like, "Oh, my God! I just lost my domain," kind of way.

It happened through, as we learned, by literally talking to the hacker on this show. Social manipulation techniques, you know.

Dave: Mm-hmm.

Chris: It was questionable whether we should have a hacker on the show. We talked about it before because it's kind of like giving airtime to the bad guy. Why do that? Why reward the bad behavior? But we tried to take care to -- I don't know -- make sure that it was an educational thing. It's not like we do it all the time. There's that, and it was a big deal episode.

Dave: It was something like he was just hunting around for bitcoins. He was trying to crack bitcoin wallets back in 2014. Then he found this -- well, yeah -- he found this exploit in [laughter] Media Temple, and then grabbed a handful of domain names, I feel like, or yours specifically. I think it maybe it was another hack that swept up a bunch of other ones. But yes, then he got yours. Yeah.

Chris: Yeah. it was kind of going around for a minute. But anyway, it turned out the guy is a legit criminal. It wasn't just a crime of opportunity or anything. He made a life out of being an online criminal.

We talked about all that, so feel free to go back and listen to that. It was a pretty widely shared big deal episode back in the day, and I'm sure it's interesting now. We had to talk over -- it was very anonymized with a voice -- what do you call that? Anonymizer, I guess.

Dave: [Speaking in a deep voice] I'm Earl.

Chris: Yeah, Earl Drudge was the moniker he went behind. I get an email from Earl all these years later. It said, "I don't know if you remember me."

Dave: Yeah. Wow.

Chris: "I just randomly checked out your site. I'm happy to see you're doing well, still doing the show," blah-blah-blah. Just writing now that it was an apology. You know, "Sorry for any trouble I caused. I'm older now, more mature. It's long overdue that I wrote to apologize," kind of thing. "Sorry for all the headache," blah-blah-blah. [Laughter] Which was nice and I, of course, forgave him.

It's long water under the bridge now. In the end, I was able to -- I didn't lose anything. I was able to get companies to fight on my behalf to get it back. I mean I went to war because I needed to. You know?

The apologies, and then we chat for a little bit over email and was like, "Yeah, it's interesting. We're so similar in so many ways. We could have been friends in some way," which who knows. Maybe that's true, but then find out that he's still--

"What are you up to?"

"You know, crime."

[Laughter] I'm like, "Oh, okay."

Dave: Online crime. Yeah. [Laughter]

Chris: Maybe not friends then. I try. Usually, my criminal friends drop by the wayside eventually. [Laughter]

Dave: [Laughter]

Chris: That's a lot of years of crime.

Dave: They have kids and kind of stop crime-ing. Yeah. Well, you know.

Chris: All right, Earl. Turn it around, bud.

Dave: Yeah. Thanks, Earl. It's worth noting Earl is an anagram for drug dealer.

Chris: Oh...

Dave: [Laughter] Earl Drudge is an anagram for drug dealer.

Chris: I see. It's not even a particularly clever one. If you google Earl Drudge, it's a million people using that.

Dave: Yeah. Well, thanks for writing in, Earl. Always good to check in on old friends and adversaries.

Chris: [Laughter] Yeah.

00:46:02

Dave: [Laughter] Yeah. Hey, here's a good one from a friend of the show and member of the D-d-d-d-discord, Mel Sumner writing in about accessibility. "What do you think it will take for devs to focus on accessibility? Is it really a matter of mindshare (e.g., blind people wouldn't use the Internet), education (I don’t know how to do it, and it seems hard), or work priorities (my boss just wants us to ship only features)? I'm always wondering what the real reason is."

Chris: Yeah, like what's the deal. We all know people suck at accessibility. Why is that?

Dave: Why are 98.1% of sites inaccessible - or something? 97.6% - maybe it got better.

Chris: Yeah, and Mel wants to know what the real reason is. Why is it so bad?

Dave: I have thoughts. I'd love to hear your thoughts before I go off.

Chris: I don't know. Maybe it's just because you design for yourself and there are more people that aren't -- you know, and maybe some snowballing, right? The tools to make websites are designed for people that don't have any accessibility needs, necessarily, like all these code editors we have. How easy are they really to use to build a website?

The fact that the tools are built for somebody who is sighted and has "normal working fingers" and all that. We build a website and then we build it for ourselves. If it's got CCC text on white, well, I can read it just fine, so you're building a website for yourself and not really thinking about other people. I guess that seems like probably the biggest factor that I can think of is just aren't thinking about other people.

Dave: Just like bias. [Laughter] Kind of like, it works on my machine. Works on my body. You know? [Laughter] Sort of, yeah.

I think that's part of it. I think if you take it one step further and you know, "Oh, wait. We have to do a better job. Oh, wait. We need time and budget to go do this," I think that's where it gets tricky is because not everyone is on that. Not everyone has made that moral leap yet.

Now it becomes you have to convince people to give up their plans, and so I think you're hitting another bias of, like, "You can't tell me what to do" bias.

Chris: Oh.

Dave: We had David Thomas on the show, David Dylan Thomas, talking about biases (a long time ago). There's this bias of, like, "You can't tell me what to do." But people have to give up something in order to get accessibility sometimes, just if you're going to retrofit it, or whatever.

New work going forward, you can always mandate, put a stick in the sand like, "This has got to be accessible. It's got to meet these standards."

Larger picture, can I go a bit larger and more controversial on this show?

00:49:19

Chris: Yeah. But before you do, it's interesting. Does it have to be more expensive to build an accessible feature? Isn't that a symptom of the fact that things were broken to begin with? Doesn't that suck that expensive has to be synonymous with accessible? That sucks, doesn't it?

Dave: To some degree. I mean it requires more testing, like time. That's time. Time is money.

But it also just requires prioritization. Maybe it's actually like, "Oh, hey. Our tabs are bad. We found that out, or we tested it, or we asked somebody," or whatever. It may be as simple as using Reach UI or React routers tabs. Is it Reach UI?

Chris: There's both. Yeah.

Dave: I forget which umbrella company it's under. Okay, yeah, Reach UI's tabs. And so, maybe that's as simple as it needs to be. You know what I mean? Maybe you just change the tabs under the hood and you didn't have to do any development or any testing because you're offloading all that to somebody. That could be very cool.

But I think there's also just, like, if it's a custom control or you have to go back and retrofit something, that does take time and money, unfortunately. I think you can also just say new work going forward needs to meet these criteria.

Chris: Yeah. Even the word "prioritize." If that's just how you work, it's not really your prioritizing it. It's just part of the structure. It's just what you do.

Responsive design used to be like, "How are we going to prioritize responsive design?" People don't talk about it that way anymore because that's just what you do. That's how websites are built.

Dave: There are so many, like, "We're going to charge for responsive design; $4,000 for responsive." It's like, we don't do that anymore. You just build it. That's the way you build it.

Chris: Yeah.

Dave: Yeah. You're not upselling responsive.

Chris: Did you have an even wider thought here?

00:51:32

Dave: I think the wider thought, I think accessibility education needs help, if that makes sense. Maybe even ARIA and maybe even accessibility as a practice. I need to choose my words very carefully here.

You go to web.dev, and we talked to actually web.dev people about this this week. There's learn CSS. There's learn performance, learn PWA as courses on there.

Chris: Yeah. There are a couple of brand new ones. Learn forms is brand new, I think.

Dave: It's awesome. Thank you. I want that. What's not there is learn accessibility.

Chris: Hmm. Oh, yeah. I heard -- that's right. When that was shared, that was the first thing that was brought up, right? Where's that one?

Dave: Yeah, and so I'm just saying, wouldn't it be cool if we had that, if we had that course, that public education? We do have things like the Accessibility Project, which I've helped start or whatever. But I think we just need -- you know that only reaches so many people. Google probably reaches two, three, four times more people.

Chris: Yeah.

Dave: So, that'd be cool. But I think the problem with accessibility as a practice - or whatever - or ARIA is there's just a lot of nuance. I think we have to eliminate nuance. Developers and designers (for that matter) don't exist well in nuance.

You're like, maybe somebody will not be able to perceive that. [Laughter] It's like, we just need yes or no. That's why you see, I think, color contrast checkers are so popular because you can just dab that color and, boom, yes or no. You get a yes or no, is it accessible.

But then even that is like, "What's the size of the text? Is it bold?" We need to figure out ways to eliminate the nuance for accessibility.

00:53:36

Chris: Yeah. Some of them are easier than others, like the color one. Once you just straight up know about that, maybe have a little testing in place or something, that's less hard to not screw up. But accessibility, really, there's a steep curve. There are the easy ones, the low-hanging fruit is real low, usually, in accessibility, and then the complicated ones get real hard real quick, like focus trapping and dealing with the escape key and nested modals or something. You're like, "Ah! That got really hard really fast!"

There's this example. This is nice. It's just from last month in an Adam Argyle post. He's got a bunch of these GUI challenges things. There must be a dozen of them now, but they're pretty cool, and they're pretty simple pieces of UI, usually. But then the blog posts and the videos are actually really long because they're like, "Look at all the stuff about a component."

I blogged one recently about his split button component. There are just a million things to consider. It's a button, so what's the correct Markup for the button? But this is a split button, so really it's two buttons. There's the main action and then a little arrow that brings open a menu.

Any time you're opening and closing something, well, accessibility is a big concern there. How does it open? Does it work with the keyboard? What keyboard commands can you press?

Oh, it's a menu? Do the arrow keys work? Which buttons do the arrow key? Then if it closes, where does the focus return to? There's all that stuff.

Just a big deal. [Laughter] You know? Then what technologies are used to open it? There is no native HTML and CSS thing that's just obviously the one true way to make a menu. No, no, no. It's just divs and crap. The divs and crap need classes on them. Then the classes do stuff in CSS.

Well, what's the right stuff? How do you open and close the menu accessibly? I don't know.

Then, okay, I got it to work for me. But, oh, did you do the ARIA roles because they're the ones that announce properly whether the menu is open or closed, so you've got to get that going on.

Then are you display-none or blocking or whatever? Hmm. Aren't I supposed to just kick this off the page because display none hides the menu entirely? Oh, wait! Do I have that wrong?

There's a nuance to this, and he gets into that stuff. I appreciate that in the article.

Dave: Mm-hmm.

Chris: It's not just color contrast. There's an SVG icon in there. Does that announce itself properly?

Building a split button component, it should just be a button. Right? It should be easier than it is, and it's so not. It's so complicated.

Dave: Yeah.

00:56:20

Chris: And there's stuff in here that's changed, that's brand new. So, if you built one of these components two, three years ago, it's probably more complicated than it needs to be now or isn't using features that help with this kind of stuff now.

For example, the way that Adam's split button visually opens or closes is only in CSS. Can you believe that? It uses focus within in CSS to do that, and that's it. There's no JavaScript or anything. There's a little bit of JavaScript because when focus within triggers, it changes the ARIA expanded role. But JavaScript isn't actually changing any classes or anything in which to visually show the menu. It's only powered in CSS. How interesting.

Would you have written it that way three years ago? Absolutely not. So, stuff changes under your feet as well.

Dave: Yeah. No, that's probably to make it close on blur or whatever, like focus within. Yeah. Huh. Yeah. Yeah.

Chris: It's a lot. Sorry, Mel. You know. She knows more about accessibility than we do.

Dave: Yeah. Than we do, yeah. Yeah, that's my thing is how do we eliminate that nuance, and how do we solve these solutions once and then promote the good solution? That's the other - and vet, and everything.

One other thing. This is kind of a meta-though. I have a blog post draft about it, but what's interesting about HTML is it's very broad. You're like, "A div. That can be whatever you want it to be." You know?

HTML is kind of just like, "A heading. That's fine. You can have a heading. You can put a button in a heading. That's fine." Can you put a heading in a button? No. [Laughter] But HTML is pretty broad and forgiving for what it accepts and tries to render.

ARIA is sort of the opposite. ARIA is very specific. It's like, "Tell me exactly what this thing is. Is it a tab? Is it a combo box? Is it a list box?"

I think the goals are kind of opposite there. ARIA is getting very specific, so it knows how to announce things, so it knows how to tell somebody that this is a button. Then next to the button there is a dropdown that's related to the button. We may need more ARIA or something to express these things, and maybe that has to ship faster and quicker.

I don't know. Again, that's putting the burden on the wrong people. Developers need to take ownership of this.

There was that last episode Christopher Schmitt was on. We came up with the idea of an accessibility champion in your organization.

Chris: Oh, yeah!

00:59:30

Dave: Honestly, I love that. I wish that was a formal title.

Chris: Yeah. It's kind of like Mel's title, isn't it? Don't you do that? Yeah.

Dave: Yeah, sort of. Just like accessibility champion, and you're on the teams. You have a little badge icon [laughter] in your Slack. People know. They can ask you questions in a conflict-free zone.

Chris: Right.

Dave: Maybe you chip some work or whatever, but I wonder if that is something we can do, too, is just this idea of every organization needs an accessibility champion. Who is it going to be?

Maybe that's taking a course. Maybe you take Sara Soueidan's upcoming course - or something. You took the course. You learned the accessibility. Maybe that's it. Maybe you did the work and you know enough. You're not a pro. You're not going to be like, "I'm WebAIM." Or is it Paciello Group?

Chris: Yeah.

Dave: I'm not Steve Faulkner, but I'm definitely somebody who cares about this, thinks about this, and tries to do a good job.

Chris: Which I think is a cool idea.

Dave: Maybe we advocate for that.

Chris: Mel's original question was about why really is it, if you're trying to root out the actual cause of why is accessibility so poorly done so often. That is just a great question, and it's worth more thought, really. I would just say if anybody has any thoughts to please send them in and we'll read them or get into it.

It's easy to be like, "Oh, I've got an idea." How I respond to it is just my first thought. I read the question a couple of days ago, so I've had some time to percolate on it. I don't actually know. It's just a bit of a guess. I don't know if anybody could really figure it out, but I think, if a lot of us think about why, that it's a worthy discussion.

Dave: Yeah. I would also -- can I have one more? I think you find out about it way too late in your career. You're building websites. You're chucking React. You're just boom, blasting things out. Then you find out (about five years in), everything you built up to this point is wrong. [Laughter] Not just incorrect. Morally wrong. Now, you are guilty. You're a guilty person.

Chris: I haven't really helped. I don't know that I'm personally responsible for all bad accessibility, but I wonder if I'm (at best) neutral. There was this time where I spread a lot -- I had this cool thought that I thought I would share with the world about people learning JavaScript, and people learning JavaScript should learn how to change classes because, when you change classes, you have a lot of power as a designer. If you learned one API about JavaScript, learn how to change classes because it just unlocks the keys to the kingdom for you.

But you know what you can do when you change a class? You can open a menu. You can close a menu. You can make a carousel slide from slide one to slide two. You can make a header look like it's logged in. You can do all this stuff just by changing a class.

In all those years I probably spent saying that, I didn't talk about accessibility. I didn't talk about focus management. I didn't talk about ARIA roles and what the implications of those things that you're changing in the CSS class is. Is that a net loss to the people learning that fact? Maybe it was.

Dave: But it's hard to write effectively. Your blog posts can't be 9,000 miles long.

Chris: Yeah.

Dave: No one is going to learn how to toggle a class if it's got 700 disclaimers. But I like accessibility and I glazed over an article about dialog yesterday.

[Laughter]

Dave: I just was like, boring-boring-boring. Hey, but this is good. I like that. Oh, there's a demo.

Yeah, I think it's tough. I think we're in a tough situation. I don't know. It needs to be -- again, take the nuance out. We need the nuance.... Blah-blah-blah.

All right, Chris.

Chris: That's it, man.

Dave: I feel like that was a whole hour. All right. Let's 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 16 tweets a month.

We're doing videos now over on the YouTube, so be sure to like and subscribe. Ring that bell for notifications over there.

If you want to hang out with us on a day-to-day basis, head over to patreon.com/shoptalkshow and join the D-d-d-d-discord.

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

Chris: Oh, ShopTalkShow.com.