We're re-introducing ourselves in case you're new around here - and then we're right back into talking about picking the perfect stack, how to charge for various tasks in client work, handling H tags in the main menu of a site, and making money on the web.
Time Jump Links
- 01:11 An introduction to your hosts
- 06:44 Picking the perfect stack
- 20:29 Sponsor: Backlog
- 21:17 Do you keep the clock running for different tasks?
- 32:23 Sponsor: WordPress.com
- 33:29 How should you handle h tags in the main menu of your site if the main menu renders above the h1?
- 43:51 Coil, Brave, and making money
Ion Channel, a software security automation platform, is seeking a motivated, self-driven front-end developer who bridges design and data, works within a continuous integration and delivery pipeline, and embraces test automation as a discipline.
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 Web design and development. I'm Dave Rupert and with me is Chris Coyier. Hey, Chris. How are you?
Chris Coyier: Oh, fantastic. It's just Dave and I this week, actually. We'll do a little Q&A, classic episode, you know, so that's that.
Dave: Maybe a better question, Chris, is, what are you?
Chris: Yeah, we asked in the last one, or a couple of episodes ago or something, for just a little bit of feedback, for those of you who are tuning in for the first time. We have a lot of long-time listeners, so thank you very much for that.
I had a little moment where I was like, have we just gone on too long? [Laughter] No, of course not.
Dave: I've been reading, too. I think we have a little Slack, but I posted a link today about entry points into a podcast. I think we've been starting to think about that. How do people show up? A podcast is a weird medium. It's not like blogs, right? You don't have--
Chris: Are they suggestions? Is that what they are? Is it like, you should start on this episode because that was a good one?
Chris: And it gives you a good taste of the show. Mm-hmm.
Dave: You could listen to a show and be like, "I liked it, but I have no idea who these people are, too." I still don't know who Marc Maron is, but I've listened to a couple of his shows. [Laughter]
Chris: Yeah, I don't either, to be fair. He's a comedian, I guess. Okay, but here's a little take on it. If you're listening to the show so far, I'm Chris Coyier and my day job is being cofounder of CodePen. I work on that app and bring that perspective of development to it. It's kind of a front-end playground, so not only is it an app where I get to talk about how we build it and what it's for, but the people who use it are developers too, so it gives me this weird meta-layer of talking about development.
I also have a blog called CSS-Tricks that is all about talking about the Web, not just CSS but a wide spectrum of Web. It's me that writes for it. We have a staff and we have lots of guest writers, so it gives me some development perspective that way too.
Then I do this podcast with Dave. We started this a long time ago, and we do it every week. Dave has a totally different perspective because he does different things in the world.
Dave: Yeah, and so I'm Dave Rupert. I'm a father. I work for a company called Paravel. I started this company about 12 years ago, working with two of my best friends, Trent Walton and Reagan Ray.
We make websites. We're just a three-person agency, but we've worked on big sites, as we've grown and grown the company, big sites like we've worked with Microsoft, Starbucks, Papa John's, Wired, RetailMeNot, lots of different companies kind of helping them with their Web strategy. I end up getting exposed to a lot of different stacks, a lot of legacy stacks.
Dave: It's sort of different. Maybe that comes through the show, too, right? I think I've been called a curmudgeon before, and I accept that judgment. But I think a lot of my perspective is not on this, like, "Oh, yeah, I only do the new stuff." I think, for me, it's like, "Well, how do you get the new stuff in the old stuff efficiently? That sounds like an entire rewrite." I think about that stuff a lot in my day-to-day work.
Chris: Yeah, okay. I don't know. Perhaps a part of that is just your breadth of experience, length of experience, and the fact that you do it for clients and not a product. We have that. We have some differences that way, which is kind of cool.
Dave: Yeah. No, I think that's neat that, although we are very similar people or whatever, our day jobs kind of couldn't be more different.
Dave: You're one of a few bosses of your company that builds a single product. I deal with bosses of different companies who are publicly traded and all this stuff. It's pretty different workings, if you will.
Chris: Yeah. Yeah, that's funny. Actually, we could continue slowly introducing ourselves in this episode as we answer questions that might be kind of interesting. Then I think, maybe in future episodes, we'll introduce ourselves in a different way just to make sure you really know who we are. Maybe we'll settle in on an easy way to explain who we are in the episodes that isn't annoying.
Dave: Every 10 or 20 episodes, we've just got to give people a, "Hey, by the way, if you just joined the show." [Laughter]
Chris: I even think of the width of type of sites that I work, you know, because CodePen is like Rails, React, and Apollo GraphQL, but there's still jQuery stuff in there. There's a lot of interesting stack stuff to talk about, which I like.
Then CSS-Tricks is just a WordPress site, which does almost nothing fancy at all. It's almost like a stock install of WordPress. It's not because there are a bunch of plugins and crap and custom code over the years, but it's not that weird. I don't do anything out of the regular scope of a customized WordPress site, which gives me that kind of world to think about when I talk about sites.
And I have some JAMstack sites. I have a Gatsby site. I have an 11ty site. So, I feel like I'm kind of excited about and think about the JAMstack world, too, and the potential there.
I feel like I have my foot in some different stacks, in a way. Not in the whole variety of every possible stack in the world. I don't have that breadth of experience, but I have enough of different things that keep me on my toes a little bit.
Dave: I think very much like I don't know that everyone understands that, really. If you listen to ShopTalk about five years ago, it was like a WordPress blog.
Dave: Like a WordPress podcast.
Chris: It came up a lot, yeah.
Dave: It came up a lot because every question we got was about, like, how do I do X, Y, Z in WordPress? Maybe that's because you wrote a book on WordPress at one point. But a lot of the questions were kind of about WordPress.
Dave: I don't know that people understand that our stack underneath, you still use WordPress, but a lot of our stacks have sort of shifted over to different stuff.
Chris: They have. Even as WordPress grows because I think just the Web grows. Just because one thing grows doesn't mean -- I don't know. You know what I mean.
Dave: Yeah. Right, right.
Chris: Interesting. You know what was funny is, because we have this width of stack experience, like, "Oh, this is appropriate for this and this is appropriate for that," really hard questions to answer, honestly, I feel like a lot of times stacks for websites aren't decided based on what the perfect stack is but, rather, an interesting stumbling into it from who knows what, why, when, and where. You know?
Chris: Legacy reasons and who knows. This happened to me just the other day. That's a big idea. Let me scope it down to a smaller idea is that I had this local meet-up group that didn't have a website and we really wanted one. I was like, look how easy it is to build a website, you guys. This is not a hard thing to do, especially because our website -- we just want to be squatting on the name, briefly explain what we are. We want to link over to meetup.com because meetup.com is the actual place where we manage the meet-up, for better or worse, but it does a good job for the local meet-up, I think. Then have an email address there if you want to get in touch with us. There's a link to hop over to get invited to our Slack group. It just has a handful of little jobs. It really doesn't need to be complicated.
In my old school sensibilities, I made an index.html file and a style.css file. I put some crap on it. I deployed it on Netlify and called it a day. You know?
Dave: That is HTML.
Chris: It was so confusing and not acceptable that they just create.react apped it. They just started over but moved it to have a build step and all that.
Dave: For a link to a meet-up page. Hey….
Chris: Well, yeah, but it's not an incorrect call because they have grander ambitions for the thing.
Chris: Doing more with it. But I feel like there was enough confusion that it was like, I actually don't know how to even work on the site if it doesn't have an NPM command that you run to spin it up and that you tell the deployment process to run. It caused more confusion that it didn't have a build process.
Dave: Whoa! That's, uh--
Chris: I know; it's weird.
Dave: No, that's fair. That's fair. I had a situation to do some greenfield, right? That's cool, but I was building out this thing. I'm using 11ty just to really stitch pages together. 11ty is a core piece of the architecture, but it's really just sort of like how I'm going to stitch a header and a footer together, if you think about that. That's how I'm doing my layouts.
But then I went with Parcel, which I could do from a command line, but it only spit out so much. It didn't do everything right. What's maybe different about this is I did not use Grunt, Gulp, or Webpack. I'm really just using -- I guess I could use Parcel for the Sass, but I'm really just using a collection of NPM scripts to build out the whole thing just because I didn't want to overprescribe a tool like Webpack into this big, long kind of code builder at this point in the project.
Chris: That's funny. It's supposed to deliver you this world of possibility and it's almost weird that it doesn't.
Dave: Mm-hmm. Yeah, well.
Chris: Did you read that Bastian Allegeier post the other week? Simplicity (II), I think he called it, because he's written about Simplicity before.
Dave: I read most of it. I skimmed it, but it's in my new Notion links.
Chris: Oh, you're on the Web clipper.
Dave: Web clipper you got me on. Oh, you put me on the Web clipper, Chris.
Chris: That's good.
Dave: I'm 50 links deep already here.
Chris: [Laughter] That's nice. You've got to remember to delete the pages, practically.
Dave: Oh, yeah.
Chris: I used it so much at one point that it put them into a table by default. Then I added a column to the table, which was used or not used, or basically read or not read. You know?
Dave: Yeah, okay. Cool. Yeah.
Chris: Then I put a filter on that that would just filter out the ones that I've already used because that's how Notion works in a table, which means that every single thing that I've ever bookmarked or whatever is still in there. I just don't have to see it. I just click one button and it disappears.
[Laughter] I feel like I pushed it to its limits. There were so many thousands of things in there that it was chugging to add new ones.
Chris: I can't confirm that, but it just felt like that was the case, so I kind of went in there and cleaned house at one point.
Chris: Yeah, just so you know.
Dave: Okay, well, it is cool. I started tagging links so I could be like, what was this one about?
Chris: Ooh, tags. I've got tags too. Yeah, love that.
Dave: Well, and if you're doing a roundup. We'll get back to Bastian's post.
Chris: Yeah, at some point. [Laughter]
Dave: [Laughter] At some point. I just went onto Jay Hoffman who runs the History of the Web blog. Are you familiar with that?
Chris: Yeah. Uh-huh.
Dave: It's pretty cool. I think Jay has a journalism background, if I remember correctly. He wants to just do a kind of in-depth, I guess, historical audit, a retelling of the genesis of the Web. He's doing a really good job, but he just did a link roundup post, like five different links or something from September that he had read.
Dave: I have all those in here, of course. But there's some power in, like, here are five links all about one topic. That's so powerful. And being able to tag links.
Chris: It is, especially if you can draw a thread between them, too. Do you get the Clear Left newsletter that I think often Jeremy Keith puts together? It's every single issue. Well, I don't know when it is. Every could weeks, I feel like, they put it out, or maybe a month. It's that.
It's like, let me draw a threat between three links for you, which is better than sometimes I'll do a tweet like that. Like, here's a top and blah-blah-blah three links because I think that's cool too. I don't know. It's a little bit more useful than making three tweets with three links separately.
Chris: It feels more like a little blog post to stitch them together. Yeah, if you can draw the thread, ooh, that's beautiful.
Dave: Yeah. No, I think that's cool.
Chris: The tagging in Notion allows that, right?
Dave: The tagging is going to help me, yeah. There are a few things, performance things, or whatever. Like, oh, here's an idea, and I want to put this idea with this idea. Here are some things about accessibility that are hard to me or drive me nuts, but here are some posts that solve that.
Dave: I should have some cool stuff out of it, I think.
Chris: Yeah, I think. I have, you know, like a React tag because I stay on top of that if I can, and a design tag, a security tag, an accessibility tag, and stuff. Then when I see a particular colored tag get beefy because I sort by those, then I know there's a little something to say there.
Chris: Bastian was saying -- you were saying, like, okay, sure. You need a little site. You want to throw a little build process on it. We've been doing this forever, too, right? I want to build a little site, but I want Sass, so can you just throw a little Grunt thing on there, a little Gulp thing, whatever? I just need the Sass. That's all I want, but I need something.
Dave: Give me a little Sass, please.
Chris: So, you throw it on there. Then you come back to it four years later and the Gulp thing was Gulp 1 and it doesn't work with the global node you have installed. I think that's what he was kind of rallying against in this post is that this happens to people all the time. These little build processes that you just chucked on, as intelligently as you tried to do it and as intelligently as people think, "Well, I'll just use NVM then and pin the versions." People try to be smart about this stuff, so it's not like everybody is an idiot here. It still deteriorates over time. Especially long periods of time like multiple years, the chances of you rolling back into a project and having it just kind of work how you left it is pretty low. There's something unfortunate about that.
I was read it and was nodding along the whole time. Then, at the end, was like, yeah, but isn't that the job? Isn't that our thing? We are the people on earth that can do and fix and build this stuff. We built it for ourselves to begin with. Let's fix it up for ourselves now.
Dave: Yeah. He says, "When everything works, it feels like magic. When something breaks, it's hell." I think that sums up a lot of my frustrations.
Dave: When it's broken, you're just like, I don't know what to do. Either an insane amount of googling or trying and copy/pasting from Stack Overflow just to hope it works.
Chris: Right, because what you wanted to do was fix a line of CSS. He's saying, I don't know how many times I have to fix a site from three years ago and all I have to do is add one line of CSS. It feels a little theoretical to me, but I get it, though.
Chris: I don't want to fiddle with NPM if all I need to do is change a line of code. That's a good point.
Dave: Well, I had a thing where it was like a security audit came through and was like, oh, a version of jQuery is bad. I was like, oh, yikes. Okay.
I went through an updated jQuery, but then you can't just do that. You have to do JQMIGRATE and all that. Then I look into the project and there's like seven different versions of jQuery. It's just like, wait, what? [Laughter] Do I update all of these?
Turns out, half of those, four of those were just badly named files called jQuery and they didn't have jQuery in them. [Laughter] They were just called jQuery, but it was actually a scroll to plugin or something.
Anyway, I figured it out, eventually, and it was just a static site. Thankfully, we had a static site and didn't have to go through 300 files and copy/paste all the URLs in or whatever. That was less fun to have to fix an old thing. If you compound tools, version numbers, and weird versions of Gulp or whatever, it gets hard.
We got stuck by a dependency. We were using Jekyll first as a static site generator, but we were stuck on a dependency. It's taking 10, 15 seconds to compile for a website. It's just like, well, this is unacceptable, so what do we do? We switched over to 11ty and now it's taking 3 seconds or whatever.
Chris: Hey, that's the job. You did it. Yeah.
Dave: Yeah. I mean it was work to switch over.
Dave: I can easily see it saving days at a time. Let's say you save a website 60 times a day or something while you're working on it. You save, whatever, five minutes.
Chris: Oh, yeah. That stuff is a big deal. I know Alex, our CTO at CodePen, is huge on that, like so technology-focused as a dude that's like, if he sees opportunities for small gains in repetitive tasks, you better believe he's on it. Sometimes I question it, and then I have learned to stop questioning it because I'm like, no, he's almost always right. It feels so good when it's done.
Dave: Yeah. I mean, yeah, you can get in the woods on it, right?
Chris: Yeah, but you know.
Dave: Just put in way too much time.
Chris: Hopefully, that's for somebody else to balance out. I feel like if you're the CTO, that's your thing. Do it.
Dave: Yeah. Yeah, if he wants to take it up, ultimately, I guess he makes the tech calls, right?
Dave: He can be like, yeah, I'm going to burn time on this.
Chris: Right, for the benefit of everyone else because I'm trying to unblock and speed up everybody. When you're in that role, being a force multiplier is not optional. That's the role.
Chris Enns: This episode is brought to you by Backlog. Backlog is the perfect task management software for any team. If you're not familiar with Backlog, I'll give you the URL right up front so you can check them out. Backlog.com/shoptalk.
Developers and tech companies know the importance of organization and efficiency when it comes to collaborating on a team. What makes Backlog the perfect project management software for your team? With Backlog, you can create tasks, track bugs, make changes, give feedback, and have team conversations right next to your code. It integrates with tools you use every day like Slack, Jira, and Google Sheets.
Take your work on the go using top-rated mobile apps available on Android and iOS. Do all this and more with one easy to use tool. Create great products from start to finish with Backlog.
You can try it for free for 30 days at Backlog.com/shoptalk. Our thanks to Backlog for sponsoring this episode of ShopTalk Show.
Chris: So, to circle around here, Dave brings a whole interesting perspective of things. I feel like, usually, we agree on stuff but not always and that's cool, you know. I like React more than Dave does. Dave likes Vue more than I do, you know.
Dave: Well, there you go. Yeah.
Chris: And so, we're different but similar and have a whole spectrum of stuff that we bring. Here's one that we'll have different answers on, because I basically can't answer it, from Steve Polito who says, "Imagine you're an agency or freelancer that builds projects by an hourly rate. Obviously, you bill for development work, but there are all these tasks that aren't development work but are still relevant to the project. Do you keep the clock running for researching a problem, updating local environments to match your production environment, internal meetings with coworkers about the project, talking with the client on phone calls, writing documentation for the client? Are those all clock-running activities?"
Dave: Yeah, I mean this is tough, right? Very relevant to the work I do because, if you think about any meeting you have with a client, there's usually a 30-minute meeting internally in your agency to be like, "Okay. What was that?" or, "What were they talking about?"
There are maybe two ways to think about it. If that's related to their project, you have to charge. But then, setting up an environment, if they chose a weird environment like a legacy Java project or something like that, I'm not going to eat those costs. [Laughter] That's their environment.
Again, back to the CTO thing. You need to have a system such that somebody can onboard quickly. That saves you money. That saves new employees. If it takes five days to get set up on a dev environment, that's a problem. That's a CTO problem. That's their problem, not your problem, in my opinion.
I think, for billing or whatever, if you know you have to have some internal talks, cleanup, or management, maybe somebody is just kind of managing the project internally or something, I think your hourly bill to the client probably has to reflect some of the overhead costs that you all have in keeping the project on track too. That would be my--
It's different in different economies of scale and stuff, too, because you will probably seem expensive if you start doing that. I guess, do you produce value or not?
Dave: That can be competitive, too. I don't know. It's hard because they're like, "Well, I can get ten developers from somewhere else for that kind of cost," or something.
Dave: You just need to find the sweet spot, you know.
Chris: It's up to you. I guess it's so common to charge hourly, isn't it? It blows my mind. Just that alone would prevent me from any particular role. I just find it so abhorrent to have to click a button when I start working and click a button when I stop that I just can't do it.
Dave: Yeah, it's hard. Usually, what we do and, Steve, take it or leave it because the advice here really may not fit your situation. We usually sell chunks of time. It could be as small as a two-week sprint on something or it could be months, like one month, three months, six months, nine months. We sell big chunks of time and, usually, it's big chunks of time and then how many days a week do you want attention?
Chris: That feels so good to me. Everybody should copy it. It just seems like, mentally, I can't give you an hour, but I can give you a week. I don't want to think about little crap throughout the week. You bought this week. I've got you for the week. If you can pull that off, that sounds totally nice.
Dave: Yeah, because it's like, okay, you want three months. Tell us about your project first. It's like, well, logistically, I know if I commit code, you're going to go off and spend a day code reviewing and then change your mind and then come back. It sounds like you maybe only need me for three days a week. If they don't like the big chunk of time, you just say, well, we'll give you three days a week.
I've read some blog posts, too, about this. The attention thing, too. You can sign up for a client and client work. It's like, cool, join our Slack. You're like, whoa, okay. Now I have to just be in another Slack.
Dave Rupert, this is not my company. We don't charge for this, but I almost want to charge for that. To be in Slack, for me, is so much attention and such a mindshare vacuum, if that makes sense. That's what I would charge for. You want me to pay attention to this every day, be accessible for five, six days a week, no. This is terrible. That's me, Dave Rupert, lamenting.
You have to kind of build those things into the client thing. Maybe you separate your contract into, like, "Hey, here are a few hard costs," or, "Here is our management fee and here is our setup fees and stuff like that." You just say, "These are just upfront costs. Don't worry about it. Then we're hourly from here on out." You could do that. The nice thing about freelance is there are no rules. You can make up how you bill.
Dave: The bad thing about freelance or agency work is that there are no rules.
Dave: You have to make up how to bill and, hopefully, the numbers are all positive. We've had success. I would only say we've had success selling these chunks of time. You can read. Dan Mall has another book, a book on A Book Apart. What are those called, pamphlets?
Chris: Briefs, maybe. Briefs.
Dave: Briefs, yeah, he has a brief on A Book Apart. Dan advocates way more for the budget-based billing or project-based. He just walks in, because he's Dan, so charming, and just says, "Well, how much money do you have?" [Laughter] Then they tell him, for some reason. Then he's like, "Great. We'll do it," or, "No, we can't do it for that, but here's what we could give you for whatever dollars," which that's maybe a good plan too.
I think that helps, too, having that part of the conversation. You just say, "Hey, here's what we have. Can you do that, yes or no? No, you can't? Okay, let's see what we can do."
Chris: Yeah. That seems reasonable. My gut reaction was, all that stuff on that list and everything else and me trimming my fingernails as I think about your problems and me having to go to the bathroom while I'm thinking. [Laughter] My clock is running. [Laughter]
Dave: Well, that's what's weird. We work hard and efficient, but I have noticed. Maybe it's a getting older thing. I don't want to be, like, what is that wise old developer trip? I don't want to say that, but I find myself, just through learned experience, I believe. If I think about a problem, I'm at a 2:1 thinking ratio.
I'll think for two days and code for one day. That kind of sounds like a lot, so maybe it's not that exactly, but if I think about a problem more, I can approach it better than if I just sat down and started NPM installing things. That's how I feel or I've noticed. That's hard to bill for.
How do you factor that in? Maybe that's more of a consulting role and that's actually different. They can pay you different moneys for consulting. It comes from their CapEx budget or something like that.
Chris: Wow. Interesting. Yes. Why not? You never know what gets by certain -- gosh, it totally just depends on who you talk to at places.
Dave: I'm coming out. Can I?
Dave: Sometimes I want to get an MBA just for this sort of stuff. It would be so cool to have an MBA just so when I walk into a meeting and I see a C-level person, it's like, I'm actually one of you. I have an MBA.
Dave: Hey, don't worry about it. I'm actually one of you. Sometimes I think about that.
Chris: I think all the times where I've wanted something to happen between my company and their company and the times where it works and the time where it doesn't feel a little arbitrary. You know?
Chris: Like, oh, shoot, I talked to some marketing person and it didn't work out because it didn't work out for their budget. But then I talked to some developer and we just kind of slipped it through because it was just a developing concern and we were just friendly with each other. It worked out. Or that I couldn't get anywhere with the developer, but I could with the marketing team because they saw some synergy there that they didn't in some other way.
I know I'm talking very abstractly, but you know that kind of stuff matters. Whose shoulders you rub is a very big deal.
Dave: Brad Frost was a designer but then he just started calling himself a developer so that he could commit code or whatever. Maybe it was vice versa. He was a developer and he just said, "No, I'm actually a designer," and then all of a sudden people were like, "Oh, well, come to the design meetings."
Dave: It's just changing your arbitrary title all of a sudden opens doors for you. That's wild, right? Yeah, it's a little different than what you were saying, but it's so weird how arbitrary it is. Sometimes it just works and sometimes it's like--I don't know--oh, they needed engineering help and so engineering hired us. Or they needed design help and so design hired us. Or this loose thing called product needed us or something. It's all different.
Chris Enns: Hey, there. This episode is brought to you by WordPress.com. Whether you want to share your ideas, start a business, or run a store, you can do it all on WordPress.com.
Maybe you're like me and you've set up a lot of self-hosted WordPress sites over the years and it's great that WordPress gives you that option, but sometimes you don't want to have to worry about servers, infrastructure, backups, and cron jobs. You just want to start a website now and that's why you should check out WordPress.com.
You can open a store, process payments, configure taxes and shipping, build a marketing plan. You make the widgets. They'll help you make the website.
You can start a blog, make your mark online with the world's greatest blogging tool and join a community a million strong that's waiting to hear what you have to say.
You could design a portfolio. Thousands of themes means there's a layout that's just right for you while storage and design options ensure you can upload anything you need and give your work the stage it deserves.
You could build a fan base, promote your products, use advanced statistics and SEO tools, and connect with built-in audiences on social media to grow your business. You can start it all today on WordPress.com for free. Whether you want to create, share, or sell, do it right on WordPress.com. Our thanks to WordPress.com for sponsoring this episode of ShopTalk Show.
Chris: Let's talk about HTML, shall we, quickly? This will be fun.
Dave: I can do it.
Dave: I know it. I know HTML.
Chris: Well, this is an interesting one. Remember, there was a minute. This was a short-lived thing. As you're hearing me explain this, don't think that this is how you should code websites because these days are over. It used to be that if you used a section element, I believe, that it sort of reset the header hierarchy of things. Per section, you'd start over at H1, H2, H3, H4. But that's not the case anymore. There is only one header hierarchy, algorithm, or something, so you have to be careful page-wise about how you do that and there are all these things. You shouldn't skip levels and stuff. I'm not sure that I'm doing justice explaining it but here's what Mike Freemna wrote in about a problem.
Let's say you're just looking at a pretty typical page that has H1 at the top of it that's a blog post title, let's say, and some content below it. Fine. Let's say there's a mega menu. Have you ever coded a mega menu? [Laughter]
Dave: Oh, yeah.
Dave: I put ads in a drop-down nav before.
Chris: I have too.
Chris: It felt good. I took them out.
Chris: Anyway, [laughter] you could imagine a mega menu having multiple levels, areas, and stuff. You might even break it up into sections. Maybe not the section tag or maybe it is. I don't know.
You can imagine this group of links over here are the store links. This group of links over here are the about links or whatever. You might put a header tag like an H2 or H3. Who knows? Some kind of header tag up there to group those links; to have a title for that section.
Doesn't that seem weird because probably that HTML is going to come first in the document before even the H1 for the blog post? How does that work? Is the fact that they're in H2 okay because then they're subordinate to that H1? Is that weird? How do you scope them? Do you not use headers up there at all because it's going to introduce confusion? Maybe you use something else. I don't know.
Dave: Yeah. I think it's tough because hierarchically or design-system-wise, your heading on your mega menu is probably going to be low, like H3, H4. Kind of low, right?
Chris: I would think so, yeah. I would just naturally do that. Yes.
Dave: It renders above. Now your document outline--it's what it's called in accessibility land--is totally jacked up because you've just basically put a lower heading above your H1. There are maybe a few tricks you could do here. One is, it's technically not visible so it should only show up when interacted with. It'll still show up in browse by headings, but maybe that's helpful and fine. The one trick you can do is, I'd call them ghost headings, basically. It's this visually hidden heading.
Chris: Div class equals H3.
Dave: No, it'd be like H3 class visually hidden, or something like that.
Chris: Oh, okay.
Dave: At the very tiptop of the document, you put H1, my page title, or whatever.
Dave: Like Dave's homepage and then H2 is also a hidden one and it's called navigation. Whatever. Large menu navigation is what you would call it. You'll still want to use a nav element inside of there, which could also stand to get a label and be announced. Then you'd have your mega menu in there and probably using maybe an H3 or something, like more of a proper hierarchy in there. Then all the headings on your page would start from H2.
This is sort of why you want to break away the style classes. I use class equals H1, class equals H2, just because I think it explains hierarchy pretty well, like visual hierarchy. I know people hate that and so they use whatever, Greek consonants or something. Do what makes you feel comfortable there, but I recommend having a utility class that can style headings so that you can visually hide headings. That would be one utility class, but then style headings independent of where they show up in the markup.
Chris: That is a clever, clever idea. I like it.
Dave: Yeah, it's not recommended but it would give you the document outline.
Chris: Well, you're in a tricky situation. Sometimes, it needs tricky answers, doesn't it?
Dave: Yeah, well, and it's sort of like you're creating a bummer for everybody, so you have to kind of come up with a way out of it. I think there are ways to do it.
There's also still the question, like, what happens when you turn the CSS off? To be honest, from an accessibility standpoint, turning the CSS off is still maybe the greatest way to figure out the markup of your site. Does it still vaguely resemble what you were trying to go for?
Dave: It's a good question.
Dave: Yeah. Yeah, you're fine. Yeah, it should be just fine. But that's the thing where it's like, is it a link?
I had a situation recently where somebody on the team--not going to blame them--they did P class link, or whatever. It was like they made all the Ps look like links. They were inline Ps.
Chris: That was whacky.
Dave: No one could tab to it, and so I'm sure they did it for some reason, but it was also like somebody did not think about it. They just kind of riffed and put whatever they wanted in there. Then, later, we have an accessibility issue for it. Then I have to figure out why there's an accessibility issue. Then I have to tell somebody how to fix the accessibility issue. Then they go fix it. Then somebody has to QA it. Then it has to go to production. Then it has to be QA'd again. Then it got into production.
Coding it wrong in the first place created all this work. It's a bummer it didn't get caught in code review because that would have been a simple, like, "Hey, now. Hey, now. Hey, now." But you know how code reviews work. It's like you never ask the person who is going to be really strict on you. You always ask your buddy. Hey, thumbs up? [Laughter] So, I can merge it. You never send it to the code boss there. Send it to your buddy who is like, "Yep. Looks good to me."
Chris: What do you think about -- they've got this mega menu up top that has headers in it. Your possible solution is maybe-maybe try it out, some ghost headers above it that are just visually hidden but still are semantically correct there. Okay. Fine. That's cool.
What if you, instead of moving those headers, took this whole mega menu, menu, or whatever and threw it at the bottom of the page and, at the top of the page, you put a skip to menu link? Accessibility people then could activate that link, jump to the mega menu, and now the order of the document, I guess, makes a little bit more sense because those mega menu headers are just further down the page and out of the way.
Dave: Yeah, you could do that. You could also maybe use a dialog element or something. Then kind of what you do in dialogs is you set role equals document inside the modal content. You basically say, hey, here's a whole new document context.
Chris: Oh, you get a document context from that role tag?
Dave: Yeah, and so I've not done this, so I really can't advise this. I'm just kind of wondering if this would be a way to be like, okay, this is actually a weird whole other document inside this document. We've gone past being--
Chris: Yeah, it's the place where you go to do navigation.
Dave: Right, so it appears inline, but it's more or less just a modal that gives you a navigation jump point. You know? Maybe that's a way. I'm reading the documentation here on role equals document and it doesn't quite give me the confidence that I was right.
Chris: It gives me the heebie-jeebies, especially with how many people out there are spreading the word of, like, don't just mess around with ARIA. You know what you're doing a little better.
Chris: But I don't.
Dave: I'm just saying it because I've used it on modals before because people are like, that's what you should use when you open a modal. You know? But I'm also like maybe this isn't great, so maybe you should -- I don't know. Maybe there's an accessibility pro out there who could let us know if this would be even feasible for a mega menu. I'd be interested.
Chris: My brain goes, like, I'm just kind of like use DL or DTDL, definition list.
Dave: See, maybe that's a better deal, right?
Chris: Yeah, why not?
Dave: You could put whatever you want in a DL.
Chris: Yeah, when you get the DT label there.
Dave: You can have multiple DLs, right? Anyway.
Chris: Yeah, you can. You can even have multiple DTs. It doesn't matter.
Dave: Yeah, maybe that's a better place to use this definition list.
Dave: DTDD, and you could have multiple DDs in your DLDD.
Chris: Oh, my gosh. Cool. Yeah. Let's talk about something else.
Dave: Hey. HTML!
Chris: You know we talked about Coil and Brave and stuff.
Chris: Not sponsors yet but get in touch. We'll take your money.
Dave: I put it on my blog and I should provide an update.
Chris: Oh, did you?
Dave: Can I provide an update?
Dave: I was kind of down on crypto the last episode.
Dave: I chose crypto for the payout on the--
Chris: No?! Stronghold.
Dave: Yeah. No, yeah, well, not Stronghold, but XRP tip bot. I've made like five XRP, Chris.
Chris: What is an XRP? That's a bitcoin…?
Dave: Ripple coin.
Chris: Ripple coin?
Dave: Ripple coin. I've made about five XPR. That's $1.30, but that's totally passive income from people who probably had ad blockers, so there you go.
Chris: What can you spend it on if you didn't want to change it into USD?
Dave: Uhhhhhh… I can give Reddit tips.
Chris: Oh, Reddit tips, that's good.
Dave: Maybe buy bits on a Twitch, which that actually might interest me. Bits on Twitch--
Chris: You know, here's some just killer ignorance for you.
Chris: You know when good comments on Reddit get a gold or a silver?
Dave: Yeah. Yeah.
Chris: Do you guy those with these moneys or is it reputational? How do you get a gold to give?
Dave: Oh, good. BuyRedditGold.com.
Dave: Don't go there. Don't go there. [Laughter]
Chris: Don't? Don't?
Dave: No, that's probably definitely a spam site. You … reddit.com/coins and you buy the coins, but I don't see -- they don't let me buy it with XRP, unfortunately.
Chris: If you want to give somebody gold, give one gold award, it's only $2. Oh, it seems like more special. When people get a gold, they really care.
Dave: Yeah, well, it's actually pretty -- yeah, it's a pretty special deal. People don't just give out gold for nothing.
Chris: I'm going to start giving out gold, $2. It's way less if you buy more. Anyway, okay. I didn't know that.
Dave: All right.
Chris: That's cool, though. Okay, so we're talking about Coil and Brave.
Chris: One of the ways that you get money, and you had to do this, too. I'm going to view source on your website right now. You had to put that monetization metatag in your thing.
Chris: You didn't use Stronghold. You used some other thing.
Chris: This wasn't even available when I did it, I think. Your little metatag points to one of these XRB tip bot. Right? Okay. Cool.
Chris: Coil is handling that. It's turning my money into XRPs and then giving it to you. Okay.
Dave: Yeah. Yeah, and I have--whatever--a 32-bit identifier or something like that. Then that goes into my tip jar.
Dave: An XRP tip bot.
Chris: That's cool.
Dave: That's how you pay me, in theory, or contribute to the Dave Rupert lifestyle.
Chris: Maybe someday you get some clever idea and you use their APIs to discover if somebody is paying you money and then invite them to join perhaps some secret club that exists on your website, which we cannot speak of.
Dave: Chris, I take that back. I've made nine XRP.
Dave: That's at least $2, 2 USD, $2.21.
Chris: That's pretty good.
Dave: Oh, my gosh, it crashed today, but that's fine.
Chris: I almost should switch over because I would think that -- not trying to brag, Dave, I would think CSS-Tricks gets slightly more traffic than DaveRupert.com.
Dave: What?! What?
Chris: I've only made $50 in all of my time and it's been on there way longer.
Chris: I'm going to switch to XRP. There's way more money in that.
Dave: I don't know. I think it's just kind of a -- you know when -- it's sort of like me with React. Whenever I find myself being like, "I don't think that's a good idea," I think I just was like, "Well, shoot. I'm just going to challenge myself to do this in whatever crypto coin."
Dave: Yeah, but whatever. I'm not just a total curmudgeon.
Chris: At least get it all in one place. Can't you set it up to auto put it into your--? What's one of those wallet--? I even hate talking about crypto, but there's some--
Dave: There's Coinbase or whatever, right?
Chris: Yeah, at least put it all in there so then at least you don't lose it. I feel like that's what--
Dave: Well, and that's the idea.
Dave: I can convert this to bitcoin in my whatever Coinbase.
Dave: Any kind of vault coin and then cash out to USD, if I wanted to.
Chris: Yeah. I don't even care. Leave it in the original format. Who cares, but at least it's someplace. I feel like when you sign up for nine of these things and then, over time, you don't even remember that you had that account and it's just gone.
Dave: You know what's nice about XRP is I can log in with Coil, so I created a Coil account and then I used the Coil like an OAuth.
Chris: Wow. Nice. Yeah.
Dave: To log into my XRP.
Chris: Some things have changed since last time we talked. They announced -- I think we alluded to it, but they have some massive fund, like millions and millions of dollars, to give to people to do cool stuff with it. It's not Coil based, necessarily. It's to do cool stuff with the browser standard, talk about what you're doing, and build something cool for your company. They'll pay you to do it.
Chris: The point is, they've got to give you a bunch of money in order to bootstrap this ecosystem. That's how these things happen these days. You can't just get a bunch of Coil subscribers and hope people do cool stuff. You inject a bunch of money into the ecosystem.
Dave: That's straight-up bitcoin. People were like, "I'm giving away 1,000 bitcoin." Of course, it was only worth $10 back then.
Dave: But that's what they did. People are invested in it, and so now people have a stake in it. I think it's cool. If they want to hit me up, I've got an idea.
Chris: Do you? Well, talk to Bruce. At least, he connected me. I had a meeting. I'm trying to get some money out of them. We'll see what happens.
Dave: Hey, well, that's the thing. A big site like CSS-Tricks being like, "Hey, I'm going to not serve you ads." You could do whatever you want.
Dave: No ads, but if you just install this browser plugin and pay $5 a month, but you only give me a penny.
Chris: Well, that's the kind of thing. You pay me and we'll work together to figure out how to do a don't serve ad situation that actually works for actual publishers like me because I can look at the technology in two seconds and be like, this isn't ready for that. There are some problems that prevent it.
Chris: But if I can help you over that hurdle, that's good for everybody. It's worth some money, I would hope.
Dave: Yeah. For me, I think we were talking about that little app, right, that drawing app, last week or something.
Chris: Yeah. Right.
Dave: It's real close. It's on a subdomain. I'm putting it on the DaveRupert.com subdomain.
Chris: Well, there you go.
Dave: I'm going to live this lifestyle.
Dave: Side projects go on subdomains for the rest of my life.
Chris: Oh, hey.
Dave: I'm not buying domains.
Chris: …it's serverless.css-tricks.com and conferences.css-tricks.com.
Dave: Okay. See, I'm into subdomains. We've got to make these cool again.
Dave: I put the monetization thing on it. I think, if there's a flaw, here's the flaw.
Dave: I want this to be on mobile, right?
Chris: Yeah. PWA. Yeah.
Dave: My thing is, for touchscreen PWAs. If you install it as a PWA, maybe it's using Edge or something or Chrome on Windows.
Chris: Mm-hmm. Mm-hmm.
Dave: Maybe it's still using that. If you're on an iPhone, it's probably not, if you installed it to your home screen. You're probably not because you have to us the Puma browser or whatever, so it's probably not using that browser … that money engine.
Chris: Yeah. Yeah, I mean a couple years from now, maybe.
Dave: Well, and that's like, I'm trying to be ahead of the curve, and I guess that's sort of where this fund sort of makes sense. You're asking people to give up actual monetization for potential monetization, if that makes sense.
Chris: Yes. That's why they have to--
Chris: Yes. Yes, you are.
Dave: You have to sweeten the deal.
Chris: I'm trying to guess your subdomain. I can't guess it.
Dave: For me, I have ideas now because the way it sort of works is attention-based payment. You come to my site a lot, you pay me a lot, or whatever.
Dave: Which, actually, the economics of that are awesome because you used my server to get a file. You read the content I spent money on. Not to get too political; that seems very quid pro quo. [Laughter] You give me something; I give you something.
This seems to match the spirit of the attention-based economy. It's like, well, you came to my site. If you've got any Ripple coins, I'll take some. Put some in the jar. Thanks for stopping by.
I think about this app. I'm like, oh, maybe I can make it a thing where you show up daily. Even this idea of monetization is starting to fund or kind of fuel ideas, which is good and bad. It's like, oh, how could I get people to come by more often? I just was like--
Chris: Yeah, it is time-on-site-based, so you're right that it does kind of influence the idea of being a little obnoxious about coming to the site. I don't know. Push notifications. Come draw the word alligator today. Go, go, go.
Dave: Go, go. See, that's exactly my app. Thank you for ruining it.
Dave: No. [Laughter] But I think there are ways that it can work, right? There are ways it can work. I don't know. I have other ideas. Get me in touch with old Bruce.
Dave: I've got some pitches. Then I'll be Ripple coin--
Chris: The cleverer the idea the better and I think you're already well ahead of clever town if you're talking PWAs, app-like experiences, and just fancy stuff like that.
Chris: Well, because it needs a browser plugin. First of all, for now, you just implemented how it would be implemented and take the grant money. Pretend like you got paid the right way, but it's all ready for -- Mobil Safari, oh, my God, will they ever ship it? that'd be cool if they cared, but who knows?
Eventually, it gets into browsers themselves and, on that day, it all starts working.
Dave: Yeah. No, I mean it would be like if this is there, then do this. Yeah, this is affecting everything. Can I just say that? [Laughter]
Dave: I know we've got to probably wrap up pretty soon here, but I am fully engrossed in this. How do I sell something for $10? We've been doing it for about the last eight shows or something like that.
Dave: I'm like, really? Even fixing my homepage up, I just was like, there are a few things that bother me, so I'm just going to tweak it. I just was like, I'm putting my podcasts on my homepage because I have three-ish active podcasts: two active, one slightly inactive, and one retired podcasts. I just was like, well, that's something not I sell, but that's something I do, so I'm going to elevate that on my homepage, right?
Dave: Then I was like, oh, you know, I do have these open source side projects that maybe I could pitch or kind of draw traffic to just like, hey, here's something I also do. Again, these are options. I'm just going to kind of throw this out. Maybe these are options for me. Just got to figure it out. I don't have a course you can buy for $10, but I'm really engrossed by this question of, can I sell something for $10?
Dave: I think about it a lot.
Chris: Imagine that you wouldn't do this -- maybe you would, but you can imagine the position they're in. They're saying, "I can't incentivize Dave to do this for $2, so we're not going to. We're going to give him thousands of dollars to do it because then he will do it. Then this ball is starting. People doing this monetization stuff is starting to snowball and browsers see people doing it. Then they actually do their part." It just makes a lot of sense to me to bootstrap this little good idea ecosystem. It could probably be done in crappy ways too, but I think this one is good for the Web, so I think they're smart for doing it.
Let's finish Adam's question now. His question is, if it's just a metatag. Let's say on CSS-Tricks if an author on the site said, "Hey, instead of paying me or maybe in addition to paying me or as part of a package or whatever, put my metatag on this guest blog post instead of yours."
Chris: Now, that author is making money. He's saying, does that make sense to do? Can you change that metatag per page on your blog? It's like, hell, yeah, you can. Why not?
Dave: Yeah. I mean I don't think you can do it yourself. There could be some malicious stuff here. Like, if I post it in a comment, would it render?
Dave: If my thing is lower, now I'm the monetization token in the comments thread.
Chris: That's a genius idea. I'm going to do that all around the Internet.
Dave: [Laughter] Just spam the Internet.
Dave: Sorry. Sorry, Coil. I ruined your product. [Laughter]
Chris: Can you imagine a really popular browser plugin? What's mega-popular? The Notion one or Ghostery or something.
Dave: Adblock Plus.
Chris: They could jack a little metatag, a little monetization metatag into every single site that you visit. [Laughter]
Dave: Yeah. Why not? Why not? But that's super malicious, but I like it.
Chris: [Laughter] I know.
Dave: I like the out-of-the-box thinking.
Chris: It's got moxie. I like it.
Dave: But I don't think there's a way. Maybe that's feedback for these things. Some places have multiple authors. Instead of tipping me one Ripple coin or whatever, can you please split it up to these three wallets?
Chris: That'd be cool. Yeah.
Dave: Because these three people contributed the same. That would be cool.
Chris: That would be cool. That would be cool. Why not? That seems trivially difficult to implement, I would think.
Dave: Maybe there's a split attribute or something. That sounds terrible, but that would simplify it for Chris Coyier. If you guys, if CSS-Tricks went full Coil, full coin.
Dave: It's not going to happen this year, but if you went full coin, like Coil coin, maybe that simplifies your payout of authors and things like that.
Chris: Yeah, BYO monetization tag, you know. You're still incentivized to do it because presumably the site gets good traffic or whatever and you're better off posting here than there.
Dave: You could give a base coinage or something.
Dave: You're like, I'll pay; everyone gets whatever. I'm making up numbers for you. Everyone gets $100.
Chris: See, this is the kind of brainstorming that they want to hear. I think we're doing work. This is a genius idea. I love it.
Dave: I mean it could almost simplify your accounting because you actually never touch some of the money. What if I could pay my accountant from my DaveRupert.com…?
Dave: Just go straight to the IRS.
Chris: You know like sites that -- this isn't directly related, but I feel like this isn't totally new territory to have seen some kind of user-generated sites thing or even something like a Wufoo form or something where they're like, "Do you want analytics on these things that are ultimately hosted on our site but you want to see the analytics on it?" We could build an analytics product, but ugh. How about, instead, you just enter your Google Analytics property ID and we'll execute Google Analytics on your behalf?
Chris: It reminds me of that kind of thing.
Dave: My brain goes to, like, you know when you go to the New York Times and they're like, "You already read the New York Times this month, you idiot, so you can't read this."
Dave: You know, whatever.
Dave: "Nuclear war? You can't read it, you idiot." You're like, "Gosh, I really would like to know about nuclear war right now, but I don't want to sign up for $10 a month for the rest of my life," which could be very short at this point if we going into nuclear war. But wouldn't it be cool if, just one button, quick, charge my monetization account? Charge my Coil or whatever. Click, and then charge me a $1 and I'll read the whole thing once. Then I'll close the browser and I don't get it again. Yeah, that'd be cool. All right.
Dave: We should wrap it up. We've already solved the world's -- good ideas, Adam. I think it would be cool. I think you're in the brainstorm factory of how do we pay out multiple people. I think it would be really cool.
Anyway. All right. We should wrap it up. Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. Follow us on Twitter, @ShopTalkShow, for tons of tweets a month. Send in your questions. We really enjoy these questions. With the conference season, we may be doing more of these shows than less of these shows, so we always need your questions.
Then, yeah, if you hate your job, head over to ShopTalkShow.com/jobs and get a brand new one because people want to hire people like you, even this company.
Chris: Hey, ShopTalk Show listeners. I've got a job to tell you about. It's at a place called Ion Channel. You'll be a front-end developer in lovely Portland, Oregon. It's a full-time job. They are a software security automation platform. They are looking for a self-driven front-end developer who works with design, data, CI, delivery pipelines, and all that type of stuff.
They're very upfront about their stack. It's a single-page app. It's React and Redux. It's data-heavy. They want to user-friendly design for it, so there's automated workflow testing. We're talking WebDriver or Cucumber. There are unit tests, Mocha and Chai. There's UI snapshotting, Storybook because it's React and Jest. The deployment pipeline, everything ends up on AWS, Docker containers. Travis CI runs the show kind of thing. Everything is on GitHub, managed through pull requests. Pretty modern, happy-looking stack if you ask me.
They are looking for you, front-end developer, to be a high-quality code writer person at Ion Channel in Portland, Oregon. Of course, the link to the job will be available in our show notes. Somebody, snatch it up.
Dave: Chris, do you got anything else you'd like to say?
Chris: Uh, ShopTalkShow.com.