394: Andy Bell on Taking Side Projects to 11(ty)
Andy Bell brings his collection of side projects to the podcast to talk about including Piccalilli, Boiler Form, Web Components Club, Hylia for Eleventy, and Front End Challenges Club.
Time Jump Links
MANTRA: Just Build Websites!
Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show. I'm Every-Dev-Rupert.
Dave: And with me is Chris-Piccadilly-Coyier. How are you?
Chris Coyier: [Laughter] I'm doing just fine - just fine. I'm thinking about spinning up about 15 side projects this weekend, at a minimum.
Dave: Yeah, that's good. Yeah. Just kind of putting them out there - newsletter, newsletter, newsletter.
Dave: It's good.
Chris: I'm going to Indie Web them all.
Dave: Chris, who do we have in the studio today and are they writing their own microblogging service as we speak? Go ahead.
Chris: Yes, we have a special guest for you all, a long-time friend of the show but who has never been on the show, Mr. HankChizlJaw himself, which I actually have no idea where that nickname came from. It's Andy Bell. Hi, Andy.
Andy Bell: Hey, pals. Do I get the feeling you're being made fun of?
Dave: [Laughter] No, no. Just jealous. We're just jealous.
Andy: You've disturbed me. I've been rewriting my entire blog while you've been introducing the show.
Chris: Yeah, it's pretty tempting, isn't it? There's so much fun technology out there. I was perhaps poking fun a little bit, but I'm very sure that I don't know anybody with quite as many side projects as you have. I don't even know if they're side projects, usually, because they're usually so well done and pretty well put together that it's not like something you dabble around with because you're very open about just being like, "I'm going to do a thing. I'm going to buy a URL for it. I'm going to throw up a landing page. I'm going to get a Twitter account for it," and then they come to life and they happen. There are all kinds of those, like the one Dave kind of made my name. I can't even say it. Piccally [sic]? How do you say it?
Andy: Piccalilli. Yeah, it's one word. Yeah, it's the one word I learned how to spell last year because I'd wrote it so often. I never knew how to spell it before. But now, if you want me to write piccalilli down on a piece of paper, I'm there. I can do it.
Chris: You got it. You got it.
Andy: Yeah. Yeah. [Laughter]
Chris: It's just a newsletter, but it's specifically about CSS stuff.
Chris: Which you'd think that there'd be loads of them, but there kind of isn't, really, so it's nice. It's good. It's a good one, so thanks for doing that.
Andy: Yeah, no worries.
Chris: Piccalil and then the last "li" in the word "piccalilli" is like the TLD, so the domain name, so feel free to check that out. It's just one of kind of many things that you do. I'm sure we'll touch on a lot of side projects you do. How about just a quick introduction of yourself and how you think about yourself in the world for our listeners?
Andy: Oh, the pressure. Well, for like real money, in a normal day, I'm a freelance Web designer but, as you said, I tend to do a lot of other things, which sort of is for money and the real products, like you say, and also things, education or whatever. But then some of them are just for me because of the massive stuff, quite similar to like what Dave does with Paravel, huge projects, clients, I don't get to have much fun anymore. That's the main reason why I do my little side projects is just to say, "Oh, yeah, I want to play with this little thing for a bit," and I get to do it in the sort of low-risk environment rather than trying it out on a client project, which is never a good idea. Yeah, I suppose that's me, really. I'm from 11ty as well, so yeah.
Chris: That's a common reason for any side project. I feel like side projects are talked a lot about in kind of like that meta dev culture of talking about ourselves, our lives, and what we do. They keep you fresh on technology and keep you not bored and give you a chance to use technology that you wouldn't use in any other way. For some people, that's Svelte and stuff. Not that you have no interest in Svelte. I bet you probably do, at least to some degree, but a lot of what you do is focused a lot on Indie Web, JAMstack, pre-rendered sites. Not that I'm trying to pigeonhole you or anything, but that's kind of like you're into that spirit of things.
Andy: No, that's pretty accurate. Yeah.
Andy: JAMstack. JAMstack is like really heavily on my radar. It has been for quite a long time. I think there's the low-level competition between me and Phil Hawksworth of who has got the most 11ty sites in the back pocket.
Andy: I think Phil probably does because I reckon he's got about 20,000 of all the little things he does for his day job, but I'm really not far behind him, I don't think. I'm definitely an 11ty superfan, to say the least. Yeah, it's real good.
Chris: Sure. That's Zach Leatherman's project.
Chris: I'm sure he has contributors, but he's the main dev on it. He's been on the show before. It's really been -- I feel like it's still early days for 11ty, potentially. It's a pretty mature product in what it does, but just yesterday I saw Jason Lengstorf and Zach get together and do one of those Learning with Jason. It's like an hour and a half video where they sat together and Zach taught Jason how 11ty works. It was very satisfying, particularly because Jason previously came from Gatsby and he's just a pretty good dev, in general. He drives the ship, so it's like it's Zach kind of telling Jason what to type, but Jason is very, like, quick on the keyboard and has a nice dev setup, so he's easy to follow along with.
It was fun. You know I think Jason was very satisfied with what 11ty is doing. It's kind of amazing how both simple it is and, yet, it does stuff that is just like, "Oh, that's nice. Oh, that's how it works? It's that obvious? Oh, nice." You know? [Laughter]
Andy: Yeah, for sure.
Chris: But not a lot of people know that.
Andy: No, and that's it. I think I touched on this … on your blog. Last year, 11ty, projects I did with 11ty spanned from crappy little prototypes to full client projects. We released a book with it - all these things. Because it's so simple and so well put together, it's incredibly easy to make really good stuff with it. It's really powerful. It's got a really nice dev experience. Yeah, there are not many things you can't do with 11ty these days, I don't think, especially with the cool stuff.
Chris: If you compared it to Jekyll, Jekyll has probably got a thousand times more people using it because it's just whatever. It came from GitHub. It's this OG static site generator kind of thing. That's fine. Nothing against Jekyll. Dave's blog is currently on Jekyll, although he threatens every single day to rewrite it 11ty.
Dave: No thanks to y'all.
Dave: I don't need -- I don't need more work. I've got to work on the ShopTalk site, but I like Jekyll. I love Jekyll. I use it. But once you're kind of told it's kind of slow and that's sort of the fault with Ruby. It is getting better. Jekyll 4 is great. Ruby 3 will be great. There are a lot of speed buffs and you can--
Chris: Yeah. Isn't this the classic trajectory, though, like, "Oh, we're kind of trying to fix it but, honestly, there's just better stuff now," so you just use the better stuff.
Dave: Well, and that's the deal. Yeah, and so -- but the grass is always greener, right? It's that Monte Hall rewrite problem.
Dave: This is kind of a no-brainer for me.
Chris: Zach is the perfect guy to run it, too.
Chris: If I had a project like that and it started to get some traction, I'd be like, "Oh, sorry, it's $100 now. It's $100. Sorry."
Andy: Yeah…. Yeah.
Chris: But Zach will never do that.
Andy: He would … to pull the switch on charging people for it. Yeah.
Dave: That's funny.
Andy: Honestly, I think that's part of the appeal with it is that Zach is such a good person as well. You know it's being built well because Zach has got such a good reputation. That was the biggest appeal for me, really, for it.
My testimonial on 11ty is, Jekyll is dead to me now because I used to be really into Jekyll and a side project, which I wanted to start a few years ago, was a blog called Things to Do While You Wait for Jekyll to Compile.
Andy: Because a few sites that I was running that was just….
Chris: Was it going to be a Jekyll site?
Andy: Yeah. [Laughter] Yeah, rebuild the entire site in any other platform whatsoever other than Jekyll.
Andy: In all seriousness, I actually really got into Jekyll because I worked in an agency and then it wasn't the best shop in the world. They weren't the best at, like, managing clients. A lot of the projects were fluid, to say the least. Jekyll was just great for that because you can really go to town on it and everything can change. You can really quickly respond to it. I wish 11ty was around in those days because it'd been even quicker. Yeah, still … it's not very quickly.
Dave: There's also stuff that isn't Jekyll's fault. Ruby is still kind of hard to install on a system. I work with a lot of designers and getting them, like, "Okay, go and copy this thing. Place it in your command line. That'll install Brew. Then you brew install rbenv. Then you brew install--" and, like, for--
Dave: Most of the people I work with and in clients, not just my coworkers Trent and Reagan, but most of the people I work with, like, "Hi, I've wasted your whole week installing Ruby and it barely works or falls apart."
Chris: Yeah, and I hope you didn't have any other Ruby things installed because even though we installed rbenv to try to stop that problem, it probably broke something else. You probably need NVM too because nothing is just Ruby anymore. As much as we like to dunk on NPM, at least it just works, usually. You know?
Dave: Yeah. The core problem with NPM is, and I had this yesterday, you can't install. Maximum call side is exceeded.
Dave: You're like, why?
Chris: I've never seen that one.
Dave: Then you're like, "Oh, you just delete the node folder and then you reinstall. It was from like a private NPM. But it's like you reinstall and then it's like, okay, yeah, I can do it. [Laughter] The only difference is you just had to delete the node modules folder. Suddenly, that solves it. I think that's going to be--
Chris: That's a classic joke but it's so true.
Chris: It's incredible how many things -- every week of my life, that's been an answer.
Chris: That I've seen work for something.
Andy: If I pick a project that I haven't worked on for a while that's got a node modules folder, the first thing I do is delete it and start again.
Andy: Because it's just the amount of hours wasted….
Chris: It's like a feeling in your stomach, isn't it? You can look at a folder and just smell it and be like, "Nah, that's old. It's got to go." You dump it like old milk.
Dave: Yeah, totally. I saw somebody who was like, "I archived three projects and deleted node modules and saved eight gigs," got eight gigs back.
Chris: Yeah. Yeah.
Chris: I was reading blog posts about -- because there are all these Dropbox and stuff. You keep some stuff in Dropbox and it's the last thing you want to keep in your Dropbox is any node modules folder. There are other things that back up, too, like Apple has got its own little backup iCloud stuff.
Dave: Time Machine, Backblaze.
Chris: People use Backblaze and that type of stuff. Keeping node modules out of all of that is a darn fine idea for your network.
Dave: Yeah, I'm considering a whole hard drive. I have a big, dumb Windows PC, obviously, but a whole hard drive just for development. You know?
Andy: Mm-hmm. That's what I do.
Dave: Everything goes on there and that's my development thing. It never goes to Dropbox. It never goes to one cloud or whatever, OneDrive.
Andy: I used to do a lot of video stuff and we used to do exactly the same thing. We'd have separate drives for all our stuff, so it makes sense to do it with development as well. You know?
Andy: Because we're using that much … these days. Eight gigs worth of node modules just so you can write Hello World in React or whatever, then it's getting pretty wild in there.
Dave: Yeah. Yeah, it's beefy boys.
Dave: Beefy boys.
Andy: Thick boys, yeah.
Dave: Thick boys.
[Banjo music starts]
Chris: This episode of ShopTalk show is brought to you in part by Jetpack. That's jetpack.com. Jetpack is a plugin for your self-hosted WordPress site that, in a sense, connects it to wordpress.com and thus gives it all kinds of powers. In fact, in the past, I've kind of described it as like a kitchen sink of new superpowers for your website, including just really classically, obviously great stuff from a front-end development perspective like having your images CDN hosted and lazy-loaded. Just flip a switch and it's on and you're doing that. It's all kinds of great stuff.
I won't do the whole feature list here because it's just too much to cover in a small ad, but there is a change this year in Jetpack that is worth getting excited about. If you hear me say, "Oh, it's a whole kitchen sink full of stuff," and you're like, "Gross. I don't want a whole kitchen sink," well, fine. I might argue against that a little bit because you just turn on what you want and leave off the other stuff, but whatever.
You might feel like you're paying for too much or something if you decide to opt for a paid plan on it. You can now A la carte perhaps one of the best features on Jetpack, which is the backups. If you don't want anything else in Jetpack except for the backups, it is the best possible way to back up your site. It backs up your theme and all the files of your entire site and the media, all the images you upload and all this stuff, and the database. It is your whole site, all the backup stuff, super well done.
In fact, if you go all the way and pro up all the way, it'll back up in real-time. It's not like yesterday's backup. It's last-minute update, which is awesome. It helps you roll back to that moment, so if there are any problems at all with your site, you can just be like, boop, I want to roll back to that point in time and deal with that. If that's all you care about, that's what you really need and want for your site, you got it with Jetpack and you can a la carte it. You don't have to opt-in for the kitchen sink plan if you don't want.
That's that, Jetpack.
[Banjo music stops]
Dave: You have a lot of side projects. Should we just do a run-through of each one and you give us a synopsis of what it is? Does that sound…?
Chris: Well, we can do it slowly. Let's stretch it out. I don't remember when I first met Andy, but he's guest written--thank you very much--on CSS-Tricks a number of times. At one point, I posted something like wouldn't it be nice -- you know there's like HTML 5 boilerplate and there are these kind of boilerplates for certain things. It seemed to make sense to me that forms could be one of those things because forms are so similar in so many ways. You need a nice label input pairing and there are all kinds of attributes on them that need to go together. There are just so many things that we end up changing. You can't leave default on forms because of cross-browser problems and the fact that they just look like crap natively, so wouldn't there be some--
Then there are projects that exist. Sorry for the way too long backstory on this one, but there are projects like WTF forms from Mark Otto, a bootstrap theme, that's really well done. Mark did a great job of little snippets of CSS that kind of reset and apply basic styling to forms.
The repo is a little old and it's set up as just like, here's a snippet of CSS that resets a file input or something. It's not like here's that and some HTML that you're supposed to use with it. It should be set up as kind of a nicer project like HTML 5 boilerplate was.
Andy took it and ran with it. I assume it's been a couple years since you've touched it at this point, but it's called Boiler form.
Andy: Oh, yeah. That one was -- see, you caught me at a good time with that because I remember reading that post and, at that time, I wasn't that far from being a product designer for a medical product. As you can imagine, there was a lot of forms in that product, so I got really, really into forms, like any other cool person does. I got really, especially, into the attributes that make inputting content easier.
Email is a classic one. Email, you can just set on the email field for it to not auto-capitalize because why the hell would you want the first letter to capitalize in the email? But how many email fields have you filled in on your phone where the first letter is capitalized? I know that probably doesn't annoy your people as much as it annoys me because people aren't as weird as I am, but still; that's why I got into it.
Yeah, Boiler form, essentially, was just a pattern library that I made. It was like, look. Just copy and paste this markup. Then if you want some CSS then here you go. It fixed the custom radio buttons, checkboxes, all that…. Yeah, it was good fun. A good, fun project, that one.
Yeah, you're quite right. I've literally not touched it. I fixed the link on there and it's a Jekyll site and I just can't be bothered fixing. It just won't build anymore and I just can't be bothered fixing it, so there's a link that's forever broken on the site. That's that. That's how that project has been left.
Chris: I was just talking about, so there are some pends for Boiler form left on the Internet, which a lot of times, to me, is like, "Oh, I've got to make a form. Ehhh… I don't want to. There are so many -- I hate attributes." No, I love attributes, but I just want to copy and paste something that's pretty ready to go already and that I can adjust it from there. That exists, it's fine, and I use Boiler form all the time for that.
Just give me a -- it's like a saved snippet, almost, because I'm too lazy to actually have a snippet library. I'm sure a lot of you out there have a fancy one that you've saved into VS Code or used some third-party software or something. I don't have any snippets. None. I handwrite everything. If I need to find something, I often just go look for a previous example on a project or, you know, use my own website or things like this. If I need a form, this is kind of what I come to because it's just kind of nice. This is how I would code a form anyway, so it's like a saved snippet for me.
Andy: Yeah. I use it in the same way. It enabled me to sort of remove some stuff out of my memory and … have a reference for myself because I'm a really lazy developer. I hate writing code. I want to just copy and paste it from other projects and tweak it.
Andy: That's also another reason why I make these side projects. When I actually do paid work and I actually write any code, I spend more time thinking rather than actually writing characters on my text editor.
Chris: That was--I don't know--2017, '18-ish. Not that long ago, really, in the grand scheme of things. Maybe shortly after that, you had some--what seems like a passing now--interest in Web components. That project still exists, webcomponents.club. We talk about them regularly on this show, often in mixed feelings kind of terms because it's really cool. everybody is always rollercoastering on how they feel about them or what their future is and stuff like that. At a moment, you must have been pretty hot on them because somebody -- you don't start webcomponents.club if you hate the idea, right?
Andy: That's it. At that time, I think I watched a talk by Monica -- I'm not going to try and say her name. Sorry, Monica. Dinculescu.
Andy: Yeah, and I remember it really vividly. She was at one of the Google events. It absolutely blew my mind. They'd done some really cool stuff. It was like the Lit team. Then I was like, "Right, I'm going to really take these serious now and I'm going to get into them." I do, like, fundamentally think that Web components are great. But they're really great at really low-level primitives, which has taken me a long time to sort of get it in my head where you can't replace React or Vue with Web components. Web components do the lowest fidelity job for you. If you look at them like that, then they become really useful.
The thing I think Web components are probably the most useful for are design systems because that Web component is totally technology agnostic, so you could use it in a Vue app and you could use it in a Svelte app. You could probably try and use it in a React app, but I know there are some problems like the events and stuff. But that's how I see them being the most useful is being really sort of small primitives that just do one job and one job only.
Chris: I think there are people; there are plenty of people out there that agree with you on that, too.
Chris: They're like, this is good; this is good stuff for design systems.
Chris: I can picture it in, like, a card component. Great. Call the card and it comes with some basic composable styling for a card and it matches what we said. Buttons, the same way. It looks good. All kinds of stuff.
I lose it a little bit with something like a form or a dropdown because, if you're going to write that in Vue, you have to -- I don't know. There's all this, like, the way that Vue handles events and the way that Vue wants you to do state with VueX and stuff is not how you would write it as a Web component. As a Web component, you're just raw dealing with the DOM. I just don't see how they fit together.
Chris: But they probably do.
Dave: I asked on Twitter about this and everyone said--
Andy: Oh, I've seen that. Yeah.
Dave: --we use Redux, or whatever.
Dave: I don't know what the shim looks like or whatever, if there's -- maybe you can just use--
Chris: Do you write a hook into your Web component that says unchanged. This is a select menu and, when it changed, then you provide your own hook. If it's Redux, then you write your own little function that changes something. I just don't quite get it.
Chris: It seems like too much glue to be useful.
You touched on it in the last episode, the first of this year, where you were talking about main element. It's just a spicy div, but it took ten years to come out and be ready. I think we're in for a long haul game with Web components as well. I think, as time sort of progresses, they'll become more useful. I think they should reach out, the people behind Web components, and look at how React are doing things and how Vue are doing things, especially, and really sort of learn from that and try and pull that into the spec, I think. But, you know, that's just my opinion and I certainly wouldn't go into it and say all that because you know what happens then. Yeah, give them time.
Dave: Yeah, I mean just on that. I know Nicole Sullivan has been reaching out to framework authors and stuff, working with the Facebook React team and trying to make React work a little bit better on the Web platform. I think the first thing we can fix was main thread scheduling or something. We're going to get prioritization of main thread operations.
Yeah, I hope Web components is like, "Okay. Yeah, let's go. Let's incorporate. Let's just put Vue in the browser because that's really, ultimately, what I want."
Dave: But I wonder when and how that happens. I don't know if they're gun shy because there's stuff like Safari still is dragging their feet. There's one piece they just refuse to implement.
Andy: That's the thing and that is the HTML imports thing that I know both you and I, Dave, are incredibly and forever angry about, which browsers can just pull the rug under it and ruin the pie.
Dave: Why would you want to build a website with HTML only? Why on earth would you just want to--?
Andy: I know. Imagine-imagine-imagine that, especially now in the JAMstack phase that we're in.
I think that's something I've sort of matured a bit with over the last 12 months. It's like, yeah, I get it. I get why people are doing it. They want to do things that the browser is just not letting them do at the moment, is I just totally understand why they're doing it. That's sort of like why I've started getting a bit more into React again and sort of approaching that with a warmer attitude than I have done previously, and Gatsby and stuff like that, because you can just sort of understand it a little bit more when you think about it from other people's perspectives.
Dave: That was on my list of things to ask you about. You have been talking about you've been playing with Gatsby and stuff like that. That seemed a little--how should I say--off-brand for you.
Andy: Yeah, I know. Yeah.
Dave: I guess, what was the change in attitude? What was sort of the--
Andy: So it's going to be a lot of conflicts.
Dave: --"Oh, I think I'm going to pick it up"?
Andy: Well, yeah. My first touch with Gatsby was the start of last year. I was working on a very, very big project that was using it and was using Contentful. It was fine. I've done plenty of stuff in Next in the past, so it felt like a very similar experience to that.
At the time, it chalked up quite a lot and we just didn't need it to be chalking up at the time. You know we were working on, like, one of the craziest deadlines I've ever been on, on a project. It was full-on, very full-on, and so I think I just got a very bad taste in my mouth.
Obviously, one of the side projects that I run is I'm really not a fan of Facebook. I've got feelings about Facebook and opinions about Facebook.
I've always associated React with Facebook, rightly so, and tried to remind people of that as well. But it ain't going away, is it? React is not going away. It seems to be getting increasingly popular rather than decreasing, and it's been around since -- was it 2013? It's had a very good run so far.
I just sort of thought, well, if I'm going to sit here and -- because people that know me and follow me, like my thing is like progressive enhancement, accessibility, and using the platform and doing things as responsibly as possible. But if I'm yelling at you saying, "Don't use React because that's not the way to do it," then you're just going to stop listening.
What I thought is, well, why don't I actually try and help people write React better for the browser and do stuff like that? Try and drive the bundle size down and try and work out how to do progressive enhancement with React instead of just disregarding it. These things you get; a lot of it you get for free with Vue because Vue sort of -- you can sprinkle it on existing code, but React is all or nothing, so I'm trying to get into that mindset of the way I like to do things and I think we should be building things is difficult with React, so I thought I'll just do it and maybe that'll be more helpful for some people in the industry. We'll see how it goes, but I've been playing with Gatsby for a project and it's been just a completely different experience to what it was the first time I worked with it, so hats off to them. You know, yeah.
Dave: It's interesting to think about how your time crunch affects your perspective of a technology.
Andy: I mean you can understand … yeah.
Dave: I'm trying to think if I have any--
Dave: I'm trying to think if I've had any experiences like that in the past as well. Just like, you know, "I don't like this because I was told I needed to do it in two weeks," or something. That's interesting.
Andy: That project was crazy and it definitely -- yeah, it's happened to me a few times over the years with technologies where they haven't been helpful when the pressure is really on and you just think, "I'm not going to use that again," because, in my opinion, it's rubbish because it was rubbish for you while you were using it. Yeah, I should have probably given it more of a chance but then 11ty is just really done the job for me, really efficiently, so I've just not had the need for it.
You know Gatsby has just exploded in popularity, over the last 12 months especially, so there are a lot of people out there using it.
Andy: I see a lot of things with Gatsby sites that I think, "Man, if you just did it like this, things would be a lot better." I know they've got some great people there. They've got Marcy there doing the learning stuff, so they've got a really good team of people in there doing this stuff. I think things are only going to get better in the future for it. I think it's about time I was a bit more positive about it as well and go against my own brand of being a curmudgeon. You know?
Dave: I have been excused of that as well. I'm going to go full galaxy brain here. What if people don't like jQuery because it made it so easy to write that the people wrote a lot of jQuery and then their experience with jQuery is, "You have to fix this in two weeks," or whatever. They hate jQuery because it was hard to fix, but it's not because it was hard to fix. It's because somebody -- it was too easy to write. Oh, my God, what?! That's my--
Andy: The thing is, I hated jQuery when I first used it.
Andy: Because I was in an agency, so when I started in the industry, I was actually a proper designer, you know, just like comps. Then I got into coding because I used to hand over my comps and then I'd get back a link to a website. It's like, "Did you even look at the PSD that's in here?" So, I was like, I'm just going to learn CSS myself because I want them to look good.
Then I got into the Flash world, so I was real pissed off at Steve Jobs for essentially killing Flash off, and so do I want to learn jQuery instead? Having to write an action script with jQuery just felt ridiculous, but now I love it. Yeah. The conclusion here, it's been nice. Yeah, yeah, yeah.
Dave: Can hear you now.
Chris: It's cool to just hear your attitude on it all. These things have a way of kind of rollercoastering with technology and people and the way people feel about things and all that.
I think we're all kind of rooting for Web components, in a way. I mean if they don't solve our problems now, that's unfortunate. Obviously, just to put a point on it, they're built into browsers, so they have the potential to be super-fast. You need to load no libraries. You need to necessarily run no build process. That's incredible.
Andy: I think that's quite useful as well. Yeah.
Chris: Yeah. Just today on the DQ blog, the DQ are the makers of--
Dave: Dairy Queen?
Chris: Oh, no. Is my microphone just deadzo?
Dave: No, DQ, DQ blog. Here we go.
Chris: Oh, gosh. I thought it was--
Andy: Dequeue, yeah.
Chris: Yeah, DQ like the Dilly Bar, you know.
Chris: Oh, D-E-Q-U-E.
Dave: Oh, yes.
Andy: Oh, right. We're in -- right. Okay. Go on, Chris. Sorry. Carry on. We'll stop messing around.
Chris: I would subscribe to both of those blogs, for the record. Axe, and they have the extension. I think they've even sponsored the show in the past when they came out with the Axe Pro plugin thing, which is actually pretty cool. It's like for teams and accessibility.
Andy: Oh, yeah.
Chris: They obviously know what they're talking about with accessibility. A major player in this world.
Chris: I just read, just because I subscribe to their blog, today: Debunking the Myth: Accessibility in React. They're saying or having their employees say that it's not React that's the problem. It's you using it in a way. There are actually all kinds of powerful stuff that you can do with React to actually help with accessibility and make it less of a big deal because React is doing it for you, in a way.
I've had that experience myself in using certain plugins that are ready to go with accessibility that do a better job than I probably would have. Even as an accessibility-minded raw HTML kind of guy, these plugins did it better. But then there are reports out there that look at sites in aggregate and say, "We know these sites are using React and these sites are some of the worst for accessibility," so you can't exactly argue with the data either. There's obviously something wrong with….
Andy: Yeah, that's something, literally, yesterday thought about this as I was building something with React. There was quite a bit of accessibility stuff and there are certain things like live region bits and alert rule here and there. I think it's actually easier to implement this stuff with, like, a … driven Reactive framework because you can just bung it into the HTML at the point of authoring.
I think if there's some good education out there and there are some good tools to help people and good material, then just the mindset change where people focus more on accessibility as like a priority then, yeah, I think React could quite quickly lose that sort of reputation that it's got over the years of being anti-accessibility. You're right. It's not the framework. It's just the people that have been writing it. I think early documentation didn't help because people used to put click events on divs in the documentation, which obviously people are just going to copy and paste that code straight in, especially…. Yeah, get that started.
Dave: Yeah, there was a good post on the 24 Accessibility Calendar, advent calendar, about selects or imitating the native select and I forget who -- I'm blanking. Sarah Hagley, I think, is who wrote it. Looking at a select and she's like, "It's basically impossible to replicate what a select does, especially across browsers because Mac does one thing and Windows does another thing, so good luck with yourself." [Laughter]
She tries out a couple other options where, you know, you have an auto-complete and it creates a little, like, whatever chip or tag or whatever and then tested it with real users. It was a phenomenal post. That's really not React specific, but it's just an example of how, if you stray from the native elements, you actually provide a worse experience, especially with the select element.
Yeah. Anyway, it's very interesting and there's a very fine line because, if you choose a framework like React, it's probably because you're doing these pretty intense, state-driven UIs. But then, for me, it's like you have to have the confidence even with Vue or anything -- insert framework of choice here. Once you start taking control of all that, you really have to be the owner of the accessible experience. That's a lot of work. That's a lot of responsibility.
Chris: We've talked with accessibility people on the show. There is some classics to accessibility problems that are so simple, that maybe even the bulk of accessibility work is the stuff that you're sick of hearing about if you're probably a listener to this show or a reader of general front-end development news. But put alt tags on your images. Use header elements. Don't put unclicks on divs. Use a button instead. These things that are largely--
I mentioned Dequeue, but even that little Axe plugin, you just run it on the page and it'll tell you. It'll tell you exactly what to do because these are just simple things. Those simple things are a problem wherever you write them. You can write -- you can miss an alt tag in a React site, a Vue site, or an HTML site. It's irrelevant which framework you're using. It's an accessibility problem no matter what.
To look at that and be like, "Well, that site uses React and has that problem. It must be React," no, it's just somebody who didn't write an alt tag.
Chris: It's just that React got more popular. That's all.
Andy: You could achieve so much by just writing good quality HTML as well. You can really achieve a lot by doing that. Obviously, we've got ARIA, but what is it about the first rule of ARIA is to not use ARIA or something like that.
Andy: I think may be true, but I don't think so when you've got something really dynamic. I think you've really got to dig in at that point. But, yeah, for like a blog or whatever, if you get your structured HTML going then you're good to go. You've done a good job.
Chris: Even that is funny, isn't it? There's a great one on Smashing Magazine. It was Bruce Lawson that was digging into article versus section. It's kind of one of those classic ones that nobody actually knows what they're doing with those tags. They're just like, "I don't know. This feels good."
Andy: From Bruce.
Dave: I volunteer as tribute.
Chris: I read two articles back-to-back. They happened to be published the same day. One of them was on some other generic blog kind of thing and one was on Smashing Magazine. The other one, I hate to dunk on it--I won't even name them--but it was kind of a fluff piece. It was kind of just like, "Oh, you should use the section instead of div because section has accessibility benefits. You've got to think of the screen reader users, so use section."
But there was no evidence or why or what happens when you do or what's the deal. You know? Because it's actually just not true. Just because you use a section, a section happens to have a role of section. I hate to -- I just feel like I put a foot in my mouth.
Andy: It's a landmark, though, isn't it? Yeah.
Chris: Yeah, but it's not.
Chris: It's not a landmark unless you put an ARIA label on it. Then it's a landmark. None of their code samples had that or talked about it in any way. Then Leonie Watson chimes in, in the comments, on Bruce's article where he talks about this. The problem on their site was they have the summary at the top of the article but it just goes from summary right into the article. If you're a screen reader user, you don't understand that the thing at the top was the summary.
Chris: So, he's like, "I'll put a section around it," and the solution was to put a section around it with an ARIA label on it called "summary" so that it made sense when you're leaving the summary and going into the rest of the article that there was a landmark that explained what was going on.
But Leonie Watson links up … "Yeah, you can do that. You can name the thing, but 2.6% of actual screen reader users even care about that landmark at all. Chances are, everybody navigates with 70% or something based on headers, the headers within it."
Chris: It's kind of like, sure, it's kind of for screen reader users. It's for 2.6% of screen reader users. My gosh. That's the only thing a section does. [Laughter] So, it's kind of like, what a useless tag.
Dave: Now you want to ghost heading somewhere on the page that is labeled.
Chris: Probably. Not to mention all the misinformation out there of people saying, "Oh, it's a section type. That means your H1 headers start over within the action," because there were blog posts about that when it was being talked about but it never happened.
Dave: Yeah, it's literally Bruce Lawson's blog. [Laughter]
Andy: Yeah. Yeah, just read Bruce's blog backward.
Andy: …order of things. [Laughter] Yeah, HTML Doctor … that was a classic one, HTML Doctor.
Chris: It causes the problems and then solves them?
Andy: Cheers, Bruce. Yeah.
Dave: He's the Web's alcohol.
Andy: I think--
Dave: No, he's really great.
[Banjo music starts]
Chris: This episode of ShopTalk Show is brought to you in part by Netlify. That's Netlify.com. It feels like everybody I know has got something on Netlify these days. It's just kind of taken over development, developer consciousness in this world. It's great because it's not for absolutely everything but it kind of almost is, especially if you open your mind and think of rearchitecting and thinking how websites could be built.
They're really double-downing this idea of JAMstack, which I couldn't be more in support of. It's so great. I'm not even going to do the acronym for you because I bet you know it. If you don't, just Google JAMstack and it will take you to a page that explains all the philosophy of what it is.
Light philosophy here. It's kind of about the static hosting. It's like what if we could prerender most of our site? Then feel free to think static site generator if you want to, like all the speed benefits and security benefits and the fact that I can have it on a CDN and take advantage of all of that stuff. Isn't that great? Netlify helps a ton with that and makes the developer tooling and integration around that super good, but then takes it a step further and says, "Hey, we know you can't prerender everything. Why don't you prerender what you can and then hit APIs for the rest of the data and do it that way?" Fine. Cool.
How are you going to hit those APIs? Well, you could hit them client-side or how about we help you with cloud functions, you know, the AWS Lambda stuff that's so powerful and inexpensive these days? It's a little finicky to get started with Lambda, but it isn't on Netlify because you just put node functions in a functions folder and they just run. You don't even have to have an AWS account. Netlify helps you with all that. It's incredible how they abstracted it away.
To me, it feels like, wow, I'm this front-end developer building sites in this very comfortable way that know is really good for the Web in these really powerful, resilient sites. But still, when I need back-end like features, like I need to use a server or run some node code to do some stuff, talk to other services, hit my own APIs, process some code, who knows all what, that's available to me too. Even stuff like auth. Even stuff like form processing, Git hooks. They have so much cool stuff in Netlify.
I don't even know where to start and stop talking about them sometimes because there's so much to look at. But don't be overwhelmed by it. It's very simple to get started as well. In fact, you can just drag a dang--
You know the other day I was on CodePen. I exported a pen to a zip file. Unzipped the folder. Grabbed the dist folder in there. dragged and drop it on Netlify because they have this cool drag and drop, and it deployed a site to a domain. The whole video is like 17 seconds and I feel like I took my time. It's also very super easy and fast to get started, too. Take some files. Get a URL in 17 seconds, let's say.
Thanks for the support, Netlify.
[Banjo music ends]
Chris: Well, let's move on a little bit.
Dave: Yeah, we have 20 more projects….
Andy: Yeah. Yeah, we've only done like two so far. We'll be here all week.
Chris: Well, we had Hayden on the show not long ago and Hayden talked about all kinds of stuff that Hayden talks about, but he's your partner in crime on a particular project called Every Layout, which is [laughter] a little cheeky to begin with but I like it because, how many layouts are there, really? Can you make columns? Can you make a grid? Can you set things side-by-side? That kind of stuff. Every layout is like a blog and book that gets into that stuff and you can buy it, so that's something.
Andy: Hell, yeah, you can and, yeah, you should.
Andy: No, it's a real cool project. [Laughter] That's my marketing spiel, "Buy it." But it was sort of like, me and Hayden are both talking about the same stuff, really, but independently of each other. I think two examples is he was doing the Holly Albatross thing and I was doing one on flow and rhythm and using what we call a stack now in every layout. We were sort of both approaching CSS in the same way as each other, sort of algorithmic and writing as little as possible.
Then we sort of got … like half started the projects and he was like, "Do you want to get involved in this?" Yeah, it is right up our street, both of us, and it's been unbelievably successful. We didn't believe it would be as successful as it has been. It's helped so many people just improve their front-end as well, so it's great. It's really good for the old morale as well to know that. We keep adding to it too, so it's not quite every layout yet, but maybe one day.
Dave: Was this one of your first ones where you were like, "Let's turn on the money machine"? I don't know the chronology here, but that seems to be one of the first ones you were like, "I'm charging."
Andy: Yeah, we had to because … desperately organized that immediately credit it as an intense notion … and the one card in there was filthy Luca because we really knew we wanted to charge money for it because, between the both of us, we've worked on some humongous stuff and done stuff for, like, big companies and big projects. There's a lot of experience going into these layouts and we think it's about time that we actually charge for it as well.
I think that's something I've been obsessed with recently is, why is it so hard for people to make money on the Internet? Why can't more people make more money on the Internet? People work hard and they produce a lot of good stuff and they should be making more money a lot easier.
Every layout project, I've built an API for it that does all the charging and content delivery for it. That's sort of opened a few doors for me for some stuff that I'll release this year that will hopefully make it easier for people to make money on the Web. But, yeah, so that's how it is and we're really determined to self-publish it as well because we want to make the most money possible and we didn't think it'd actually do that well, either. We didn't think it'd sell many copies, so we thought we'll try and latch onto as many of the pennies as we could. But we were surprised by how many people took an interest in it, really. Yeah, it's good.
It's been with 11ty as well, the whole thing, everything, even the premium content. The only thing that's different between when you've actually purchased it is it's got a little express JS wrapper that just does a bit of magic that determines whether or not you can see the cool stuff. Yeah, it's great… One 11ty project creates the book for us that you get with it. It creates the websites and it does all the sort of heavy lifting for us. All we have to do is just write content.
Chris: Oh, but it's not JAMstack because you had to throw a node server in front of it?
Andy: Yeah. [Loud exhale]
Chris: That's funny. I wonder if you could have done it with JSON Web tokens or something.
Andy: Well, funny you share that, Chris, because that's how I did another thing. But I had this sort of determination at the time. I was like, I want the content to be … instead of rendered, so what all the express does is a handy little trick. This is for anyone else who is interested in doing this stuff. You can make express serve a static directory. That's all it does, but what you can do for every single request that comes in, you can put some middleware.
In that middleware, I do the little checker to check that they've got a session and everything. That's it. Really, it is like a little Netlify box but it's just got a little extra bit of glitter on there doing that stuff for me, but super low tech. That's just the best way to have it.
I spent a lot of time thinking about how to deliver content to people because I wanted it to be easy as possible for someone to actually read the content that they've purchased. I'm so glad we got to where we got with it because some of the crap we came up with, I'm so glad we didn't. At one point, we were talking about bundling into…. It's just like, imagine if we'd have actually done that.
Chris: A lot of technical overhead.
Andy: What an awful experience for people.
Andy: Yeah, for sure. It's like, oh, yeah, here are 200 megabytes of application to read some text. You know it just felt ridiculous, so I'm glad we got to where we did with it. Yeah, there's a lot of stuff coming … this year as well, one of which is, we're actually going to start doing some stuff with React and Vue and integrating the layouts with those frameworks so people can actually just drop them straight into their projects because, at the moment, they're just Web components and they're not as useful as they could be for people, so we're going to try and do that so people have got, like when they buy the product, they can use it a lot more easily in their projects, so a lot of stuff to come. That is certainly not a dead project like most of my side projects.
Chris: [Laughter] Well, we've mentioned 11ty a bunch of times. There's a starter kit you've built for that called Hylia. I hope I got that right, hylia.website. Just a--
Andy: I forgot about that one. yeah.
Andy: Yeah. That was fun.
Chris: It's just like, if you like 11ty. The ways I've started with 11ty in the past is just like reading the docs and NPM install 11ty, which is kind of fine.
Chris: But then you're like, okay, so I need a config file. I guess that, like, oh, where does it want me to put folders? Here? Okay. You know. Not that it's all that hard but starting from scratch is harder than it is to just grab a project that's already kind of has some stuff ready to go. Hylia is kind of blog-esque, so it's kind of ready to go for that. You could get started insanely quickly with something like that, so check that out.
Andy: No, I'll say that was fun, that one. Yeah. We enjoyed that, and it's mainly just an empowerment tool. Yeah.
Chris: Yeah. It made the rounds.
Dave: I think it's really cool and beautiful design, we should say and has an RSS feed. Check.
Andy: Yes. [Laughter]
Dave: I think what is really cool is your rollup config is really digestible. Not to compare/contrast too much, but you compare this to your standard Gatsby config. It is way different. Even the config you give is mostly just for the admin section, for the Netlify admin stuff.
Andy: Yeah, for sure. Yeah. I can't take credit for the rollup one, though. That was Shawn from Netlify who did that, but yeah. Go on. I'll take the credit for now, though. Go on. Yes, it's great. Yeah.
Chris: Oh, really?
Chris: He's the Netlify CMS guy, too. No wonder he was interested because that comes--
Andy: Yeah, for sure, and he did all the sort of really fancy stuff for the CMS. He did the live preview stuff and all that. Yeah, it was really, really appreciated because I just didn't have a clue with the Netlify stuff, so it was great to get that in there. Yeah.
Dave: You have a handful, I guess, like seven NPM scripts or whatever for building the site or serving or local working and stuff like that. I think that's really cool, too, because Netlify -- sorry. 11ty. I'm getting all these products confused. 11ty, it comes and you 11ty serve. It just starts working.
Andy: Oh, cool.
Dave: Yeah, it was very helpful.
Andy: That's good to hear. That's it. I think a few people have just taken bits from it and that's just great because I saw a project that was an amalgamation of all the suffering that I've done with various side projects with 11ty over the years. No fault of Zach on the project, but similar to what you were touching on there, Dave, where I was used to Jekyll just doing everything for me. Our WordPress projects are like Code Kit or whatever, so it's just like I just want people to be able to even just one-click deploy to Netlify and be able to publish their own website and it be on JAMstack and that's that. Obviously, just the main goal is, like, I'm sick of seeing medium links. I want people to be able to publish their own content and own it and then not have to be technical to do that as well.
Now the project has enabled quite a few people like that to do the job, so I'm very happy with it. I should probably do some work on it at some point. I've just sort of left it to die, blessed, but I will do some more bits to it eventually. My site, my website is a Hylia site as well, so I'm really eating my own dog food big time with it, so it helped me out on that front.
Chris: That's kind of an interesting one in that, how does it digest it? Your own website is customized now. So, if you go work on your own website, you're just kind of working on your own website, right? You'd have to go back to some other project to port your changes?
Andy: Yeah, it's completely ejected now, forever. It's on its own. But it'd be a manual thing. That's one thing I found really hard with that project is, how do you make it easier for people to update from the sort of main project? The only thing I saw … was like, every time I do big changes, I do release notes with a list of files that changed because people, most people customize it when they get it.
No one really uses it and just tweaks the design tokens or anything like that. They just get into the Sass and that's totally, totally expected as well. Some of the sites I've seen built with it, you wouldn't even recognize it to be of that project until they say, "Oh, yeah. By the way, I used Hylia to build it." You're just like, "What?!" Someone … it was just like mind-blowingly good with loads of 3JS stuff and they're like, "Oh, yeah, I used your starter kit." I'm like, "Where?" I can't even see it anymore. It's not -- until I looked at the markup and I was like, "Oh, yeah, there it is. There are my silly square brackets.
It's just great to see it empowering people to build stuff on it themselves, which is great. Then like you said, they don't have to get an RSS feed.
Chris: What's unique is they'll never -- if you built a site out of it, you'll never pull down a new version of Hylia because you just can't. It's too weird. But it's kind of like, who cares? Right? It's so simple. It's not like there's going to be some major security breach with some static files.
Andy: Let's hope now. Yeah, don't jinx it, Chris. Yeah.
Andy: It essentially is a starter kit. If you look at it as a starter kit, then you don't expect to get a starter kit to be sort of dynamically…. It's like an install once and run with it job. But yeah, it's cool. It was a fun project and … did enable that because it did better than we thought it would do. It enabled me and Hayden to sort of like take off the gas a little bit last year and work on stuff that interested us more. That was something I had on my list of projects I want to do is a proper good starter kit for 11ty, so I'm glad I got to do it.
Dave: I guess that kind of gets into the question I want to ask; I want to ask you and I'm sure people who have listened to the show and heard about your 200 side projects. How do you manage it all with work and bills and family and kids? Maybe the second question to that is, how do you pick which one to work on after the kids go to bed? How do you even decide? How do you manage it to even do it as a lifestyle and then how do you pick one to work on?
Andy: The answer to the first question is, I'm freelance. I have ultimate control over my own time. Even before I was back freelancing, when I was working with companies, I did a lot of years of remote working anyway, which just saves you so much time, in general, versus commuting to an office.
The other thing is just like, I'm one of those annoying people that's desperately organized. Everything is done to the minute for me. I use Notion obsessively. I've got bullet journals. I tend to not write a line of code until I've planned it to within an inch of its life, which I think helps me churn the … really quick because I've done a lot of the thinking before I even open my text editor. It's a case of, like, right, I know what I'm doing now. I'm just going to thrash it out.
To decide what I want to work on, I get bored really easily of projects. If you look, I've got a link on my site that's just a list of them. Ninety percent of those links, I haven't touched them for a long time. I tend to try and build stuff so, once it's built, it just works and it'll stay working for as long as possible. That tends to be how I like to do things. Then if I come back to it, great. If I don't, then no biggie. I learned some stuff from it. It might help someone out. Whatever.
There are only a few projects that really sort of grip me and keep me interested in them. They tend to be the ones that make me money as well, so that's obvious, but yeah.
When the kids go to bed, I'll just drink wine and watch TV because I'm so tired, as you know, both being parents. There's not much brain going on after that happens. Yeah, I tend to write blog posts in those times. Yeah. That's it, really. There's no real secret to it apart from me being annoying and obsessively organized by everything.
Dave: I identify with that. I feel like I think for two days before I write a line of code, now. Maybe that's really wasteful. [Laughter] It's like I want to know what I'm doing or I want to think through what I'm doing whereas I know other people are just like, "What is it? Okay. Cool, 600 lines of code in one hour." It's like, okay, well -- [Laughter]
Andy: I'd rather write 30 lines of code.
Dave: Did you Google anything on NPM?
Andy: Yeah. Yeah.
Dave: Yeah, exactly.
Dave: That's where I'm at.
Dave: It's like, what's the three-line version? Yeah, but different people, different strokes, I guess.
Andy: I mentioned this last year … tweet because I was thinking about it. I've been doing this ten years now and I don't enjoy coding like I used to enjoy coding … I think that's because -- sorry. When you're learning, you have so many pitfalls and you're constantly failing. You're having all these little wins all the time when you've battled for a few hours on something. But there comes a point where you don't have that anymore and you just write code. I think, at that point, writing code isn't that much fun anymore.
I actually much prefer to sit and think about things and think about how things could go wrong, how it could be helpful for people, how it could be abused, how it could damage someone, rather than just writing the code. I think my output quality has got so much better since I've approached things like that as well. Yeah, I'm a big advocate for slowing down and simplifying things. Think about things until you simplify it and then you start writing the code to go with it. Yeah, some food for thought.
Chris: There's a lot to that. It probably deserves a whole show someday.
Dave: Slowing down.
Chris: Let's end up with just to mention how this show came about is you had the latest side project is front-end-challenges.club, Front-End Challenges Club. We probably don't have too much time to talk about it, so we'll just let people have their fun. Just go check it out.
Chris: There'll be a link in the show notes. Just follow Andy. I'm sure he'll be talking lots about it, but the gist of it is, sign up and it's also a paid product and Andy will challenge you with front-end design stuff but along with a community of people who are also doing it. Have some camaraderie and be challenged to up your front-end game.
Andy: It's good fun now. I'm really enjoying it. I'm really enjoying it because I get to build things again as well from little things that I just don't get to do anymore and teach people how I do it in the real world. Yeah, people are getting lots of value from it because they're building and then they're like, "Oh, wow. I didn't think about all these weird little situations that you've raised in the solution post." It's been good watching people benefit from that as well, which is good. I've very much enjoyed it.
Andy: Yeah, you can pay for it and you should.
Dave: Wonderful. All right, well, I guess, Andy, before we leave, how can people follow you and give you money?
Andy: The best way to see me is on Twitter or my website. It's twitter.com/hankchizljaw. We'll put a link in the show notes. I'm not going to explain how to spell it or why it's spelled like it is. Then the same, hankchizljaw.com. Then if you want to give me money, yeah, do it. I love money. Just buy a copy of every layout.
I think I'll do a discount code, so do like, if you put like SHOPTALK in the coupon code, we'll do like 50% or something. Then, yeah, Front-End Challenges Club, go on that and just join up, but it's great fun and you can do it monthly as well, so you could bail out at any point. Yeah, it's good fun. A nice one.
Dave: Nice. Well, thank you and thanks for sharing all about your side project experience. Inspiring for me who I also like the side projects, but I make no money on them, so thank you. [Laughter] 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 tons of tweets a month.
If you hate your job, just head over to ShopTalkShow.com/jobs and get a brand new one because people want to hire people like you. Chris, do you got anything else you'd like to say?