Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: [Speaking in a robot voice] Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show with Dave Rupert and Chris Coyier.

Chris Coyier: Wow!

Dave: Hey, Chris. Yeah, what's going on?

Chris: I feel like that was a monospace voice. You know?

Dave: Yeah, I decided to automate--

Chris: You were talking in Courier.

Dave: Yeah, I was trying to -- I'm starting to automate the show, little pieces of the show, you know. I don't think the listeners will notice. You know? [Laughter]

Chris: Yeah.

Dave: A little bit of AI, you know, just sprinkled in.

Chris: That seems fun.

Dave: Just kind of working on a new AI intro is all. There you go.

Chris: Dave ML, you know.

Dave: Yeah.

Chris: This stuff blows my mind. It's just more and more. I feel weird for ignoring AI ML stuff. I saw a fricken' guitar pedal that had it built into it. You play chords and stuff into it like a looper pedal. It's a band in a box or something.

Dave: [Laughter]

Chris: Then you're like, just put some drums on that. You know? Come on.

Dave: You just talk to your guitar pedal?

Chris: I don't think you talk to it.

Dave: Wow!

Chris: Talk to it would be cool, too, but--

Dave: Oh, man.

Chris: It figures out what kind of music you're playing and adds a baseline. Gees.

Dave: Ew. Wow. No, I saw; I was watching something. I'm interested in this idea. Well, not interested. I'm afraid of this idea of AI being used in hiring. I don't know if you've seen those things. It turns out, oops, they have a bunch of bias. The robot doesn't like to hire women because, historically, the company hasn't -- Amazon hasn't hired women or whatever.

It's terrible, but it's becoming more common is sort of what I was reading an article about that. Then they were saying in this article, this year it's something like only like 12% of companies are using AI but 20% or 30% of companies of major Fortune 500 companies or whatever are looking to include AI in the next year and a half.

Chris: Hmm.

Dave: Year to 18 months.

Chris: Remember, the big deal about it isn't that you use it. It's that the system by which you use it makes it fixable. That was a big thing in weapons of mass destruction. It's cool if you want to use some AI fanciness to do some hiring, but let's say the results of it, you uncovered a bias or it made some obviously wrong call. Now it's your job to go look at the programming, the algorithms that be and adjust it to stop that mistake. If that's the case, it's okay.

Dave: Yeah.

Chris: But if it's not, if it's just like, "Well, this thing is the source of truth. You're fired," no, that's where it's bad.

Dave: See, that's what I don't like, or like, "Oops, we accidentally hired a generation of women," or, sorry, not women. That's bad when it works out like that. "Ooh, we recommended you a pizza cutter when you ordered a pizza." That's fine. Sure. Do that, AI. But when it can lead to huge, systemic things. There's even sentencing is using AI, like a robo-judge, basically, and you have to go before the robo-judge and figure out what your sentence is based on your risk, but that risk is based on the zip code you live in and the friends you have and stuff like that.

Chris: Mm-hmm.

Dave: For me, that's just like, no; it takes the humanity out of things. But that's all. I'm just saying I just don't think it's radical. I think there can be problems. Then to hear 20% to 30% of companies are just going to learn AI and roll it out this year, [laughter] like cripes almighty. That could be a rough decade, right? Yeah.

Chris: Well, right. At scale, that gets extra scary, right? It's such a buzzword. They're like, "I guess we need to use algorithms."

Dave: Well, and there was somebody -- this article on CNN. I can link it. It was kind of saying, like, in the short-term if you unlock this and you don't have to have a person, whatever, cutting spreadsheets to make the product recommendations or whatever, if you figure this out in the next ten years, you can increase your return pretty heavily. You'll run ahead of the pack. That's sort of the assertion in its meaning.

Chris: Oh, it speaks the right business language.

Dave: It's got the business value.

Chris: I know it feels weird, but we're talking 15% in 2 years, so okay.

Dave: What if you don't need an HR department? You ever hear about that? You know? You ever think about that? Man, I don't know.

Chris: Who was it? Somebody was like, "Okay, so every line of code ever is on GitHub, right? What if this stuff gets really good. We don't even need startups anymore because machine learning and AI can just be like, 'Well, we have 10 of the hottest startups every line of code on GitHub. We'll just make the 11th one kind of like those other 10. Roll that out.'"

Dave: Yeah.

Chris: Startup….

Dave: No, you could almost, literally, I can maybe do this. Isn't there -- somebody sent an app or something and it was kind of like choose your own Yeoman sort of thing? You want an app that does this? Do this. Use this.

Chris: A scaffolder.

Chris: A scaffolder, yeah, like an NPM scaffolding thing or Yarn scaffold or something. You could just then mix and match those. Program a robot to mix and mash those up and come up with the right formula.

Chris: Yeah. That's why that no code stuff everybody is so hot on, too, because you're like, yeah, these are all problems that we have all the time. You just need some auth stuff. You need your special little data structure and somewhere to store that data. You know. Why do we keep solving those problems individually over and over? Why can't you just drag the auth box onto the screen and now you've got that part?

Dave: You know I ran into this. I was doing a little tutorial. Is it Learn State Machines by Jon Bellah?

Chris: Yeah, it is.

Dave: Yeah, that's it. [Laughter] My memory worked this time. It's a nice little course, but Jon kind of walks through creating a little Firebase app. You actually don't -- not to -- it's a good course if you're interested in state machines. It kind of just gives you the landscape of how XState specifically works and just how a state would map to a React component or something like that. He walks you through this React app.

Part of it was setting things up on Firebase. I hadn't been in Firebase for a while. You go into Firebase and it wants you to basically click every button they have and install your database, your authentication, your hosting. It has all those features that you kind of need for a common Web app. I found myself, like, A) I've gone past the limit on Firebase before where you actually start paying for stuff. [Laughter] It's like, ooh, golly, this gets expensive. I was like, ooh, I don't know if I want to be all-in on Firebase, but it does make it so easy: your storage, your data, your file storage, your hosting.

Chris: Right.

Dave: All that is there and it's done, it's click.

Chris: It is. A lot of people think of it as just the real-time database because the coolest thing that it does, but it really does everything.

Dave: Yeah. I found it just to be kind of like, "Oh, if I click enough buttons here, I'm bought in for life." This was just a silly, little toy app to learn a tutorial thing, but yeah. I quickly saw, okay, I could be on Firebase for a long time if I just kept clicking these buttons.

That gave me a queasy feeling. I don't like complete buy-in, but maybe I should just embrace it. Maybe my whole life would be easier, Chris, if I just went all Mac everything. [Laughter] Then just went all Firebase and went Amp and all Google products. You know I've never been that kind of person.

Chris: You know what, dude? It probably would be. You know?

Dave: I've never been that person, but I do wonder if my whole life would be easier if I just gave into the monster.

Chris: Yeah. Hey, would you make more money if every single sentence out of your mouth was selling something to somebody? Yeah, you probably would. You know?

Dave: Yeah. No, that's true, which is why you should go out and buy a job post over at the CodePen job board.

Chris: [Laughter] Yeah, please do that. Thank you.

Dave: Yeah. Yeah.

Chris: Hey, this one will blow your mind. We have a bunch of questions from people we'll get to very shortly; I promise you. But this was fascinating to me. We have a JavaScript meetup here in Bend, Oregon, Bend JS. I mentioned this over on CodePen Radio too, so if you're a listener of both shows, apologies. I almost never do this.

Dave: Now…. Now I'm just selling stuff.

Chris: Geez. Well, I make no bones about it.

Dave: [Laughter]

Chris: Send me some money. Paypal.me [email protected]. Just whatever. A few bucks. Just kidding. Don't do that but do upgrade to CodePen Pro.

Okay, so we're at this meetup. Akira is her name, gives a presentation about AWS and EC2. You know EC2 is just like you buy a server, rent a server. It's like the core of what they do.

Dave: Yeah. Yeah, file server.

Chris: Everybody's Rails servers on EC2. Yeah, but you have a million choices when you spin one up. How many gigahertz do you want? How much RAM? What video cards? All this configuration; it's unbelievable. You can even say, like, I only want to spend this much money but I want this between this and this and this. You're just spinning up a computer.

You can even say, Dave, "I'd like this version of Windows on it when it boots up." You know? Rock and roll. You just do it, click a few buttons, config, whatever. It spins it up.

Then you can use Microsoft remote desktop to just log into it. You're looking at a video of that computer. Kind of like if you shared your screen right now in Zoom -- we're talking on Zoom. I'd just be seeing your computer. It's just like that. You can even seed control over to me. But you know remote desktop is a little more powerful than that. It pipes the--

Dave: The keyboard.

Chris: The keyboard and the sound and all that stuff too. But it was pretty cool to see somebody go into EC2, pick a bunch of specs for their computer, and then just log into it. But what's cool is that you can also say--it's a little bit like a docker--"Spin it up with this instance," Which has, for example, Steam installed on it already and it has those beefy graphics card, the best processor ever, you know.

Like you have a gaming rig, right? You spent thousands of dollars on it.

Dave: $1,500. I mean you can get a … PC for cheap. Okay.

Chris: Yeah. Okay, so that's an interesting number, actually. It's like at what point does a cheap rig and then you doing this and playing incredible games on your EC2 box over a remote desktop.

Dave: Yeah.

Chris: That's where I'm going with this.

Dave: Yeah.

Chris: You get this really beefy gaming rig for $0.80 an hour.

Dave: Right. Yeah.

Chris: Because you're doing it on EC2. But you still need a decent graphics card on your side and stuff, but there is this happy medium of buying a cheaper box for yourself and then paying by the hour for a cloud computer that's way more badass than yours is.

Dave: Yeah. I actually think that's -- not to cross-reference my gaming podcast, (ASIDE) QUEST--

[Laughter]

Dave: But Google Stadia is kind of doing this. It's more or less a Google cloud server that plays video games. Then Microsoft Xbox is, in theory, going cloud to where you don't actually play the game on your computer or your Xbox. That's all happening over the ethernet.

Chris: Yeah, that seems like the future to some degree. If you're going to have a video game cafe in Austin, Texas, why would you spec it out with $3,000--?

Dave: Your own hardware.

Chris: Yeah. No, just buy little baby boxes that have really good internet.

Dave: Yeah. No, for me, I wonder if there's latency is a problem. I've heard that maybe with the Google Stadia.

Chris: Yeah, I heard ping time is a big deal.

Dave: Yeah.

Chris: It was amazing in Bend. We have like US West, you know, like AW's thing.

Dave: Yeah.

Chris: As in like the … around here. It's pretty close to Bend.

Dave: Wow. Okay.

Chris: We have 30-second pings, so it's playable.

Dave: That's…. Yeah.

Chris: I think if you're over 50 seconds, it gets gnarly.

Dave: Yeah. It's like that--

Chris: Or 50 milliseconds or whatever. Yeah.

Dave: It's that thing is like 100 milliseconds is like now you start to feel it. You're human perception kicks in about 100 milliseconds or something.

Chris: Yeah, so it's a little--

Dave: Yeah.

Chris: It's a little -- it's funny because you need super first world Internet speeds, but the whole point of it is to be running on a cheap box. If you're already in that -- I don't know.

Dave: Yeah, well, it democratizes hardware, sort of, if you can just play it for cheap and have something fast. That's cool, though.

Chris: I think the whole concept of AWS is fascinating like that to me. Then I was thinking about Halt and Catch Fire, the best show ever on TV where they invented that in the '80s.

Dave: [Laughter]

Chris: What if we let these computers run at night?

Dave: Ooh.

Chris: Other people could use them too. [Laughter]

Dave: Dang.

Chris: All right. Let's actually do some questions, huh?

Dave: Yeah!

Chris: An anonymous person wrote in, which is totally fine. We don't need to read your name, if you prefer. If you want a shout-out, put your name on there, but I don't care if a question is anonymous. It's all good radio.

They're asking about registering domain names and, when you do that, there is a registration agency, right? ICANN.

Dave: Mm-hmm.

Chris: You have to put Whois data on it, which means that anybody can ask for who owns a domain name and it will show it. That's like public information and it's absolutely required that when you buy a domain it has Whois contact data on it. Then, wow, that sucks, kind of, right? I have to put my home address on this domain name that I own? That sucks. Isn't that where spam comes from? Yadda-yadda-yadda.

He's asking about, like, what's the way around that? Ehh… Isn't there some kind of proxy thing or whatever?

Yes, there is. The way that this works is that, when you buy a domain name, you can just put in your home address if you want to and that's fine. I think I mostly do that because I have a business address and I don't care that much.

You know when you buy a domain name, they're like $10 or whatever. It's almost like a loss leader for the companies that sell them to you. The companies that sell them to you make their money selling you other stuff. They're like, "Don't you want email too? We'll run an email server for you at that domain name," and that's another $10 a month or whatever. There's a million upsells.

Dave: Yeah.

Chris: It gets a little annoying, but that's the business they're in. I almost don't blame them because the competition just is what it is in that market.

Anyway one of those upsells, though, is hiding your Whois information. What they do is they put themselves in that Whois information. Then if anybody contacts you, like the required communications through that channel goes to them and they forward it to you. It feels like a perfectly fair thing, upsell for them to charge for. I think that's a totally fair product and they do it and it works. That's that.

Dave: It's like the equivalent of a PO Box or something.

Chris: Yeah.

Dave: You're just basically -- it's a private, you know, whatever, address. I would -- if you actually do -- like I've learned the hard way. You get a lot of email spam. You get a lot of kind of even mail spam, like physical mail spam if you put your actual address on stuff. I super recommend the domain proxy. That's what Go Daddy's is, or whatever. I know I've used Hover.com too. They have a different proxy service, but I use it a lot. It's $10. It doubles the price of a domain name a year and, if you're running 200 domain names that's a problem, but I don't know. For me, it's just entirely worth it. Just less spam, less surface area to have your safety attacked.

I'm sure there's one domain, two domains, three domains that don't have that but, man, I usually pay for it because -- I don't know. I don't want to be hassled.

Chris: I can see how -- sometimes, when you check out, you're like, "Oh, this feels shady. What is this privacy thing? What are you charging me for privacy?" No, they're providing you an actual service. They are being the point of contact for your thing and relaying information to you. It's not the most complicated product in the world, but it's like they don't charge that much for it either, so it's a pretty decent little upsell for a domain name and there's nothing shading about it, I don't think.

Dave: I mean if you want to own it, you could create your own, whatever, Dave Rupert Secret Corp. and have a fake address or something. [Laughter] You can do that too.

Chris: Yeah.

Dave: You have to have a physical entity, I think.

Chris: Yeah, I think you do because I think there is a law, right? You can't just lie on your Whois stuff.

Dave: Yeah.

Chris: I don't know what would come from you from that, but it's not a great idea.

Dave: But you've also got to think; what if I owned Amazon2 and Jeff Bezos wants to buy up Amazon2.com? I have my address on there. He's going to send his thugs to my doorstep.

Chris: [Laughter]

Dave: They're like, "Yo. Give us Amazon2 or we break your neck." I say, "No! I'm building Amazon2." All right.

Chris: [Laughter] That's a weird, legit concern.

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Clubhouse. They have a nice offer for us all that's at clubhouse.io/shoptalkshow, which gets you free two months on any paid plan. It's project management software so, if you have a project that's less than two months, why don't you just go try it for free and see how you like it? It's really nicely designed project management software.

One of the primary views is the columns of stuff view, which is just like, okay, we have this important thing. This is absolutely how I organize projects. There's the project itself and then there are all these tasks and stuff for the project. Inside of it, a card needs to have an explanation of what's going on, who is doing it, how important is it, what are other questions on it, when is it due, let's talk about it.

Then you can move them around in states like I got this one right now or, nope, that needs to go back, or this needs to go forward, or this is a completed card. That's what this really excels at.

It's customizable, of course. If you have a special workflow--phase one, phase two, phase three, phase four--that's just for your business, you can totally do that. Maybe you have a design, development, deploy, like a waterfall kind of thing. Sure, you could do that. Or if you have a, "Let's talk about these cards, and then these cards are in wireframing stage. Then they get more high fidelity mockups and this has a data concern, so these tickets are just for the back-end team." Who knows. I'm just making stuff up but, whatever your workflow is, it supports it, which is great.

Project management software that's real nice. Dark mode, emoji reactions, all the fancy stuff you expect good software to have. Thanks, Clubhouse, for the sponsorship.

[Banjo music stops]

Dave: Michael White writes in -- Let me try that again. "When I first learned HTML 5 way back when I was under the impression that one of the benefits of HTML 5 was easier document outlining, meaning that we could have an H1 in our header for the document title, but if we used the sectioning elements such as section element and the article element, we could use another H1 inside -- tag inside those as well and the browser would consider the H1 inside those elements as subheadings to the main document."

Chris: Didn't we just talk about this?

Dave: I think we talked about this literally an episode or two ago. Then you wrote a little post on CSS-Tricks, I believe.

Chris: Yeah, well, it was just kind of a link post. It was like a weird day where I read two articles in the same day talking about the section tag.

Dave: Ah, yes.

Chris: One of them had more information than the other one. it wasn't a big deal, but it was like, if you're going to use section to put an ARIA label on it if it doesn't have a header inside of it. Chances are, yours have a header inside it anyway, so it's not a big deal. Even if you put a label on it with no header in there, it's not super useful to lots of people, but at least it does something instead of nothing. Anyway--

Dave: Yeah.

Chris: Michael is saying, yeah, document outlining, right? It doesn't exist. It's not a thing.

Dave: It doesn't exist. No one ever did it. It was spec'd out and it's still in the spec, I believe. It was like, "Yeah, here, check this out. You can do that," and everyone wrote posts like, "Hey, you can do that," but none of the browsers ever did it, which that stinks.

Chris: Do not put multiple H1s on your page and do not reset to H1 just because you're inside of a section tag. That's not a thing. We're still in a land where you've got to go H1, H2, H3, H4, H5, H6. You know?

Dave: For bonus points, turn the CSS off on your site and see if your document makes sense. Whoa!

Chris: Whoa!

Dave: Wow. Back -- remember those days? [Laughter] So, there we are. Yeah, unfortunately, that's the way it goes. I don't know. I'm trying to think off the top of my head if there are other HTML lies that happened. I don't really know. Wasn't there another?

H Group was one that was around. You could group headings and then browsers get it, man. Then it's like, no. [Laughter] That doesn't do anything and no one needs it or it doesn't actually do anything.

Chris: This one, this next one is crazy.

Dave: All right. The next question comes from Kalvin Fernando. Chris?

Chris: Yeah. This will blow your mind. "My professor is still teaching Flash. He believes it is not dead and wastes everyone's time talking about it. He teaches buttons and kiosks on Adobe Animate while giving himself a high five. I'm an international student enrolled in a Web design and development course. It's the last course subject and can probably jeopardize my graduation if I complain about it. Should I do something about it? It's such a scam and I don't want anyone to go through his pitch such as, 'YouTube probably uses Flash.' What would you guys do if you were in my shoes?"

Well, you're about to graduate, which is a big accomplishment for you. Congratulations, Kalvin. I would probably not do anything about it. You already know it's BS, so just let it be BS and graduate and get out of there. It's not your responsibility to fix the world. Maybe once you have that certificate or whatever it is, your degree, after leaving, if you really feel like it's hurting other people's education, shot an email to the university itself and be like, "Listen. This is just so far behind." That's why I intro'd this with, like, this is crazy town because it really is crazy town. Flash really is super truly dead.

Dave: Mm-hmm.

Chris: If you have this course and people are spending all kinds of presumably thousands of dollars to come learn Web design and development, you're absolutely wasting their time and money - period. Meh. You know.

Dave: Yeah.

Chris: You may want to fix that, but don't screw yourself in the process. Forget that, dude.

Dave: Get the degree and run. That's what I'd say. I mean you can do a rate my professor situation after the fact would probably be a good deal. I would not -- you know, I would probably just deal with it.

One cool thing you're going to learn; you might learn some cool interaction stuff. There's still stuff that's easier to do in Flash and more fun than doing in regular command-line JavaScript or whatever. [Laughter] The UI is kind of nice and you learn a lot of stuff that will help you when you apply those to actual Web skills.

Flash was cool. Flash was good. It has a lot of interesting UI and interaction patterns and it created a lot, but it does not work on phones. It's like a deal-breaker in 2020. It has huge security implications. Don't do it. [Laughter] It breaks and it breaks the open Web a bit because it's all proprietary stuff. I would probably not do that and I don't think YouTube has been Flash for a very long time, if I recall correctly.

Chris: No. There was a weird point where you could be like, "Try our HTML 5 version," and then it just clearly worked so well that they just only use that now. Not that they don't do fancy things like iFrame or here's a weird Web component. I'm sure they do exotic technology in there, but it ain't Flash.

Dave: Yep, so I would just lay low, try to learn what you can but, yeah, don't expect to be doing Flash when you graduate. Maybe you can make a kiosk and that would be cool [laughter] but I still wouldn't put flash on a kiosk.

Chris: Yeah. I liked your idea about there was some, like the creative era of Flash was kind of cool. I think there is an undercurrent right now that's like, "Wow, did websites get boring." I almost long for the Flash days where things were just weird.

Dave: I mean unless you're using GSAP and you have your head really wrapped around how it works. That's the GreenSock Animation Platform or framework -- with a PH.

[Laughter]

Dave: Is that how it is? Am I wrong there?

Chris: That's the framework for people who like, you know, phish.

Dave: Yeah. Yeah, so GreenSock Animation Framework with a PH. You know, we don't really make websites on a timeline anymore with keyframes and stuff like that. That's kind of core animation stuff, so do that. Maybe you decide you really like Flash and you don't want to do Web anymore and you want to just animate. I have friends that animate in Flash all day. They work at animation studios here in Austin and they made the Castlevania anime. That's stuff you could do.

Chris: What?! Seriously?

Dave: Yeah.

Chris: That's from your town?

Dave: Yeah. There you go, man.

Chris: Oh, I heard there's a season two of it. Season one was like five episodes and it was so awesome. Now there's a two and I haven't watched it yet.

Dave: Yeah, and I have another friend who is a creative. He worked for Rooster Teeth, plural, with a PH. [Laughter] He did all the visual stuff, so all the intro credits and stuff like that, which are just cool and animated and experimental. That's stuff you get to do in Flash. Maybe you can do it in After Effects and stuff like that, but Flash makes it so darn easy and it's in your Creative Cloud account. Just to say Adobe Animate isn't going to ruin your life learning it but, yeah, it is not good for Web and I would wait until afterward to scud your professor there.

Chris: [Laughter] Uh, yeah. Yeah, that's the main advice on that question, for sure.

Dave: All right. Dario Fusinato--with a PH [laughter]--writes in, "I'm building a React app for a client that is bootstrapped with Create React App. In order to install one Babble plugin, I need to "eject". I thought it should be harmless until I started reading about the pros and cons of ejecting and how to install plugins without ejecting. Do you have an opinion on whether or not it's a good idea and what can potentially go wrong in the long run?" Oh, have you ever Create React App and ejected?

Chris: I was going to skip this only because, no, I personally haven't. I haven't even used Create React App that much. Although, the reason I added it is, I did last night.

Dave: Whoa!

Chris: I literally dealt with a site in Create React App, so I was kind of like, oh, maybe--

Dave: Baby's first React app. [Laughter]

Chris: No, I've written lots of React.

Dave: Oh.

Chris: I just never Create React App for some reason.

Dave: Okay.

Chris: Just do it some other way.

Dave: What was your experience?

Chris: It was fine. I've had a couple of experiences like this recently where it uses some prebuilt thing that's just designed to make good DX, developer experience, on using a bunch of tools together. This is best in breed of those. Everybody uses Create React App. It's a massively huge project. My first experience is it kind of deserves it. It really is easy. You get a scaffolded out little project and the main thing it gives you is a watcher. It just kind of works. You put your files in your folders and you didn't have to write a single line of configuration to make it all work. Boop-ba-boop and you're off and running and doing stuff.

Now, it was one of those situations where I think the thing that we're building with it doesn't need it. I feel like that's going to be my whole talk for 2020, Dave, is that so many sites -- it's going to start with this idea of, like, there are a lot of sites in the world that could be a fricken' single HTML file and it would just be way easier in the world. It's weird that people don't do that for these simple sites. They reach for these incredibly complicated toolsets.

But I don't want to be old guy, you know, waving fist at cloud because there are all kinds of steps up the technology ladder that are totally justified and I take them all the time. But it should just be known that a site like this that I was working on could have been just an HTML file. It's literally that simple.

But it was like--I don't know--there are some abstractions in here. It's nice; there are some repeated elements, so it's an element and it has its own little API that takes an H1 or an H2, an H3, some text and a button. I get why people think and work in this way. Architecturally, it's not terrible, but the whole thing has to boot up in React. Turn JavaScript off; this thing is dead because Create React App does not have an offline story, or not offline but, like, static generated story. You know?

Dave: Yeah.

Chris: That's not part of its thing.

Dave: Yeah.

Chris: That feels a little silly to me, but you know that's -- I don't stay up at night thinking about stuff like that. It ships at 400-K, the site. The React portion of it with all the JavaScript is about 60-K of that. It's like--I don't know--jQuery was in that range. It's not that different.

Dave: Yeah.

Chris: jQuery wasn't required for the entire page to render at all, so a little different.

Dave: A little different, yeah.

Chris: But it's not that offensive. The whole thing boots up pretty fast. I feel like it's kind of fine.

This ejecting thing is interesting, though. Dario was saying, "Okay, I needed on Babble plugin." I don't even know what you need Babble plugins for these days. Maybe you really wanted to use decorators and it doesn't support it by default, so then you want to eject so that you can actually touch your Babble config and put those decorator things in there. I'm just making that up.

Dave: Or like TypeScript or something. I don't know.

Chris: TypeScript maybe, sure. That sucks to eject for one thing, you know. I would say that advise-wise, I would just say, is this your little baby project?

On this project that I was working on, there's no way I'm going to eject because I just don't want to be responsible for anything. I really like the idea that the package.json is really small. It's just Create React App, pretty much, and it just bundles all that crap together. It just runs and it's got a watcher. I'm responsible for none of it. It just works. That's nice. No way am I going to eject.

But I would if I was like, "You know what? I'm going to be the maintainer of this site. It's going to be a lot of my hours every single week for many years to come, and that's just what kind of site this is," I'd probably eject. I'd be like, "No, I want that control. This is my life now. This isn't just some baby side project. This is my thing."

Dave: Yeah. What's the harm in ejecting? Is it the idea, like, let's say a major upgrade comes through the Create React App because you just run Create React App once, more or less, right? Is that … NPX…?

Chris: But I think it becomes all that--

Dave: Oh, all the--

Chris: Then you go, like, npm-run-build and it's like a special script that runs your watcher and runs all the stuff.

Dave: Yeah, I guess -- does it leave a trace then of, like, "This was generated by Create React App"? Does it do anything like that? I guess my thing is, you're handing it off to a client. Are they going to know how to maintain it after that, after your customizations? If the expectation is like, "This was built with Create React App," is the next person who works on it going to be like, "What happened? This is so broke." You know? Maybe -- I don't know. I think you're probably fine to eject. Maybe the goal of Create React App is just to get you up and going so you can eject successfully, but I don't know. Maybe I don't know enough about ejecting.

Chris: The usual advice is, try not to unless you're really sure.

Dave: Yeah, I would try not to. I just think about the expectation. Somebody who comes up next, are they going to understand what you were trying to do or why you ejected or why it's different than just a standard Create React App? Then maybe you could even look at other build systems like Gatsby or something like that. Does Gatsby have the Babble plugin you need?

Chris: I hate to admit that I don't even really understand how it works. I can show you kind of privately the--

Dave: Code?

Chris: Yeah.

Chris: I've used it before, but it was very much like, just get it going and it barely worked on my computer.

Chris: Oh, that's too bad.

Dave: Well, I hate to be a fuddy-duddy but--

Chris: Look at the root of that. Look at the root of this thing. There's no Babble config there. There's no Webpack config. There's nothing. It's just--

Dave: Yeah, it's just so your dependencies, it installs or axios-node-sass-react-react-dom-react-router-react-router-dom-react-scripts, which I'd be curious what that is exactly in style components.

Chris: That's the important one. That's the only one that matters in this list is React Scripts. The Axios, we added that because it does a little -- I need to make an ajax request, so we added it. In fact, I could remove that because we stopped doing that.

Node Sass was like I wrote the original little mockup for this in Sass, so whoever took this over at first was like, "Oh, we'll put Sass in there." That's totally optional too. React and React DOM, of course, you need.

Dave: React Scripts is the magic of Create React App because that's the build--

Chris: That's magic! Installed components is optional too. It could be one thing or three things: React, React Router, maybe React Router DOM--I'm not sure what that one does--and React Scripts. That's the magic one, React Scripts.

Dave: Okay, so when you talk about ejecting, you're specifically saying, "I'm not using React Scripts. I'm on team Don't Eject now. [Laughter]

Chris: Yeah. Look at the NPM scripts thing on line five and six or whatever. It's a CLI and the CLI does all the….

Dave: React -- npm-run-start, react-script-start, npm-run-build, react-scripts-build.

Chris: Right.

Dave: Npm-test, react-scripts-test.

Chris: When you eject, then you want to -- you know, now your build process is on you. You can't use react-scripts-build. You need your own build script, which presumably they give you theirs to customize from. But it's like, that's a lot of responsibility.

Dave: Yeah, I wouldn't do it.

[Laughter]

Dave: I don't know, because I think the reason you're using Create React App is so that you can shortcut something and now you're taking ownership of all that. I would probably bail or see if Gatsby has what I need and just use Gatsby or something. You know what I mean, if you want to be in the React world?

For me, it's like predictability, right? Even if this was Angular; let's take React out of the conversation. If it's Angular and somebody is like, "I wrote my own doodad for Angular that makes it better," I would be like, "It's not. That's the worst idea. Why did you "make angular better"? I don't believe you and it's weird. You use bitwise operators. Why?"

That happens all the time. I always think about the maintainability going forward as a consideration when I build something. Maybe that's a fault of mine but, man, I would not jeopardize that maintainability just for a Babble plugin. You maybe really need it and that's true and so, if we knew what Babble plugin, we could maybe suggest something, like if it's SVGs in your--whatever--icon fonts or whatever [laughter], maybe that's not worth it, but I don't know. Maybe you could run a separate build task instead that then React can pick up, like React Scripts can pick up on. I would probably do it a different way, so try to find a different way.

[Banjo music starts]

Chris: Hey, ShopTalk listeners. This show is brought to you in part by CodePen. That's me, your host, Chris, Cofounder of CodePen also! Sometimes I like to sponsor our own show and tell you about CodePen. It's a freemium app, so you can use CodePen for free. But I hope to compel you with the features of CodePen Pro.

One reason you might upgrade is just because you like this show. That's fine with me. I'll take your support that way. Ideally, there is some part of Pro that makes you want to upgrade.

One of the little things you get with Pro is that you get unlimited embed themes. You might build something on CodePen in which to then use somewhere else, like use in a blog post or documentation or whatever. It's nice because you change your theme and then it changes on every single embed where you use that theme.

Of course, that's very important to me on, like, CSS-Tricks, for example, where I might want to change the look of the embed because we're redesigning the site or just want to freshen things up or something and have that theme change over the entire site. Of course, I do that. If you need several, a bunch of themes, just go Pro and you have unlimited of them, which is cool. Just one of a dozen or more features you get for upgrading to Pro on CodePen.

[Banjo music stops]

Chris: Super related, this next question, because it ends up being about WordPress and Gutenberg, which is like, why would that have anything to do with Create React App, but it kind of does because there's an open-source project out there called Create Guten Block, which is probably forked from Create React App or, if it's not, it's like in the spirit of it.

I'd never spun it up before, but I was in a position because I decided -- one of my goals on CSS-Tricks was just to get us on Gutenberg at least mostly because it just feels like hanging onto that old editor is just not a place I want to be.

Dave: (Indiscernible)

Chris: What's up?

Dave: I looked for Create Guten Block and I think I found a website that stole your design. [Laughter] Sorry. It totally….

Chris: Ah….

Dave: It just totally stole CSS-Tricks' design. It's beautiful. They did a good job stealing it, but anyway. [Laughter] Anyway.

Chris: Oh, really?! This is a new one to me. I thought for sure what I was going to see what that Ben dude or whatever. Somebody emails me every day about it because it's just like a straight rip-off. It's just blue instead.

Dave: Oh, yeah.

Chris: It's just stupid.

Dave: Create Guten Block, what's guten-block do? That's a mouthful, isn't it, guten-block?

Chris: Yeah! To start, you just NPX it, like NPX Dave's block and it gets all the crap you need and boots it up, which is wonderful. Then it gives you a block called My Custom Block in Gutenberg.

First of all, it's literally a WordPress plugin. It's this weird combination of looking at WordPress PHP stuff and JavaScript files.

Dave: Mm-hmm.

Chris: And so -- whatever. Then you go into your WordPress and you activate the plugin. Cool, my custom block, and now it's just there in Gutenberg. When you open up a new block, you can add my custom block, and you do it. It's like this green block. You're like, cool, it's a green block. But I like that they did that because it's like, "Oh, I can design this. My CSS controls what this block looks like."

Dave: It's my playground now. Okay. Yeah.

Chris: Yeah, that's my playground now. It's so few files that it feels really empowering. You're like, "Oh, okay. I'll just change the background green to background orange and I have that control." But also, while you're working on it, just like Create React App, how it has React Scripts, this thing has Gutenberg Scripts or something. It has its own little magical thing that's also a Webpack Babble watcher thing. You type npm-run-start and it just sits there and watches your files. I change green to red. It compiles all the stuff that it needs to do and my block turns red.

Now I'm like, "Wow! I'm working in WordPress land, but I have this React powered block that's just totally under my control. It just feels super cool and empowering.

You're designing kind of two or three aspects of this block. One of them is what it literally looks like in the admin area where you're authoring it. One of them is the HTML that gets saved back to the database and what gets displayed on the front-end of your site, which they can be different things.

Dave: Hmm.

Chris: For example, I have a block. This is why I was doing it for CSS-Tricks where I can just drop in a bunch of HTML, like unescaped HTML.

Dave: Mm-hmm.

Chris: It will look like it looks on the front-end of CSS-Tricks. As you're authoring, you kind of get a sense of what it looks like. But then, instead of having to hand author HTML that's like, "Well, it's got to have this attribute because that's what prism.js wants to do it upright," you just pick that stuff from dropdown menus. The authoring experience is just like, "Oh, this isn't HTML. It's actually CSS. I want you to highlight line number two and I want it to have this special label on it, for example.

Then you don't have to author any of that HTML. The block itself that you're designing in React, you kind of use JSX templating to create that chunk of HTML and that's what gets saved to the Database and displayed on the front-end of your site. It feels very powerful. You're designing both screens. Three things, really: what it looks like to use the block, the settings area for the block, and what goes to the database. It's all really easy. It's just like a function call called Register Block and Register Block has all these methods in it that you call to do those different things.

It's very few files. It feels very natural to build and, as you're working on it, this watcher is just watching you do it and Webpacking it all up for you and doing all that stuff.

Dave: Do a little dist folder, huh?

Chris: It's very similar to Create React App. Yeah, when you're done working, then you stop the watcher and type npm-run-build, which has different settings that make minified versions and all that. It does; it makes a dist folder. Yeah.

Dave: It splits out like editor styles and the front-end styles. That's… very cool.

Chris: It does. Honestly, for the blocks I did, I didn't even need that.

Dave: Yeah.

Chris: I didn't. I just deleted the CSS because I didn't need any special styling. I needed a few things. I wanted my code blocks to be like background 111 color white just so that they had a … to it. I'm like, I don't want to enqueue up a special style sheet for that. I can do an inline style for that on the pre-tag, so I just did that in React, like who cares.

Dave: Yeah.

Chris: But it does. It's ready for -- put the CSS in both places, both the front-end and backend of the site, or here's some CSS that's just for the admin, or here's some CSS that's just for the front-end. It's designed intuitively to think in that way. Where are these styles supposed to go?

We made one for CodePen too, which has an input. You drop a URL to a pen in there. It parses out the slug and makes all the special iFrame markup required to make a CodePen embed. It's not o-embed. You know o-embed is that too. Just drop in a URL and it turns into an embed, magically.

Dave: Mm-hmm.

Chris: That still works too, but this is like, "Well, what if you want to change the height? What if you want to change the theme? What if you want to change the default panels that are seen?" All that stuff I just made into options of drop-down menus and then it crafts the iFrame markup that gets saved to the database from all those options.

Dave: Hmm.

Chris: Anyway, that was a longwinded explanation. It's really a high five to Ahmad Awais--

Dave: Yeah.

Chris: --who really did a good job with this Create Guten Block thing and it can eject also, if you want to take more control than it does. I have no desire to object. I was like, "No way. This thing does everything I want it to." [Laughter] You know?

Dave: [Laughter] 2020, don't eject.

[Laughter]

Dave: No, this is cool and it looks like a VS Code power user course.

Chris: Yeah, I was like, how can I send him a few dollars for this thing because this is so good? All of his call to actions are, like, "Buy my VS Code course." [Laughter]

Dave: Oh, I don't mind doing that. That's the thing about code editors. They don't come with a manual. Maybe they technically have docs, but you don't -- I'm sure there's something I'm missing or don't do. Wes Boss used to have that Sublime course or whatever. There are tons of things you can do if you just sit down and be like, "Okay, how am I going to use this?" Anyway, I'm sure.

But, yeah, this looks cool. I think this solves a lot of my questions about, like, how do you author React-y components for your clients inside a thing? I'd be curious how the distribution side of this now works.

Chris: Well, I haven't gone down that road yet, but I suspect that I need to put it on SVN.

Dave: Oh, yuck! [Laughter] Yeah, and you'd have to put all the compiled files too, right? Like the dist folder in there as well. You can't really--

Chris: Do you only put the dist folder in there, though, maybe?

Dave: See. Okay.

Chris: I think that's the case. Yeah.

Dave: Okay. See, that….

Chris: I don't think you ship the source in a plugin or do you? I don't even know. I'm so out….

Dave: Well, you need the PHP, like plugin.php and anit.php.

Chris: You do.

Dave: Yeah.

Chris: You probably would just ship the same root that you ship to GitHub. I mean who cares, right?

Dave: Yeah. Yeah, but--

Chris: Trying to protect the source. You know what's cool is I use Git Tower on my Mac. I think they make Git Tower for Windows too, Dave.

Dave: Yeah, I got it. I purchased a license, but my situation is unique. I run a pre-commit hook on some projects and Tower is like, "I don't know. What?! I don't have…." You know? and so it just--

Chris: Oh, I have that problem too, but I fixed it on my Mac.

Dave: Oh, you did?

Chris: There's a really deep, weird configuration file for it, although I'm sure that's very different on Windows, so sorry.

Dave: Well, it's 12 sub….

Chris: In which that you need to change some paths. Yeah.

Dave: [Laughter]

Chris: It's path data that's wrong, right? It's not executing your command line stuff correctly?

Dave: Yeah, well, you know, it probably works if I were using the Windows node, but I'm not. I'm using--

Chris: NPM?

Dave: Maybe I could set it up, but I'm using WSL node, so that's my problem is I use a weird version of node on Windows. You know what I mean?

Chris: Oh, that sucks. Sorry.

Dave: The subsystem source. Well, you know, it's times like those you're like, "Maybe I should…."

Chris: It's like, why can't this program--?

Dave: [Laughter]

Chris: I don't know, like, take over your computer for a second and use the terminal you use elsewhere that does work to run your commit hook. You know?

Dave: Well, and so, I would say I think WSL 2 is coming out soon, officially. I have it on my laptop, so I could check there. It's on my -- WSL 2 is going to solve a lot of these headaches for me, so it just does really good. But I can also use Git inside VS Code with the remote WSL extension and it works really, really good.

Chris: Yeah.

Dave: Yeah.

Chris: That's cool. Yeah, I think the Git -- I don't hear a lot of people talking about the Git features of Visual Studio Code, but they are fine. I use the dif. I use the stage, the commit sometimes. I don't know. I can also stage via the command line unless I'm doing a tricky, multi-liner. I like UI for that, you know, like a split commit.

Chris: What was I mentioning tower? Oh, because it has SVN 2.

Dave: Ohh…

Chris: I remember for a long time I had to boot up an old software called Versions on my Mac just because it was the GUI for SVN and I'm incapable of doing command line stuff. Not command line anything, but to relearn SVN commands on the command line. I'm like, no thanks.

I think Git Tower can do SVN as well as Git, so I can just say in the comfort of my favorite Git program, yay!

Dave: Mm-hmm. No, it's nice.

Chris: What else was I going to say? Oh, I'll keep it short because there definitely is no Windows version of this, but you know the Panic people that make Coda.

Dave: Mm-hmm.

Chris: I'd love to have a sense of, like, who the Coda users are. I think there are still kind of a lot of them. I just feel like, in my world, the world just so wholeheartedly forever moved on to, you know, first Sublime then Adam then VS Code and now VS Code just runs the world. It's just weird to see a developer using anything other than VS Code these days, almost.

Dave: Yeah.

Chris: Because it does so much. It's so good. I feel like I have a little moment every week where I'm like, this is so good.

Dave: Yeah.

Chris: [Laughter]

Dave: Yeah. Yeah.

Chris: Anyway--

Dave: No, I mean….

Chris: The Panic people are making a new thing.

Dave: I feel like the UI could, you know--

Chris: Yes, of course.

Dave: --be a little more flexible, but you know it's good, so--

Chris: It's not good, but it's one of those … it's so fast in what it does is so useful that I almost don't care - almost don't care. Like, eh…

Dave: Yeah, it's one of those, like, I'm going to just--whatever--bite my hat. Is that the expression? I'll accept this UI. It is beyond my level of control. [Laughter] But it's good. I don't want to poo-poo the people working on it. It's good and it gets the job done.

Chris: It's just really flat and it's also very customizable, which that's why they were so successful at all is because the extensions for it are so open and easy to do.

Dave: Well, and it was--

Chris: If you wanted to really clean up this UI, I feel like it could be a lot more beautiful but it would need some shadows, gradients, and stuff. Not because you have to have gradients to look good, but the UIs are complicated. They need tricks like that to be good.

Dave: If you have a good UI, you probably have to pull out theming as one of your--

Chris: Yeah, nuke it. That's an in-house thing now.

Dave: Yeah, you don't get theming plus -- like theme the whole fricken' thing plus ultraluxe UI.

Chris: Exactly. Those things are at odds.

Dave: They're at odds.

Chris: You can fight me on that, but I agree with you; they're at odds.

Dave: Yeah.

Chris: Coda 3, essentially, from Panic, is called Nova.

Dave: Oh…

Chris: I didn't realize we could just download it because I guess I'm a beta tester. I'm sure I signed up to be that because I'm fascinated by that. They're going to make a play, you know, at a Mac editor competition. They're obviously aware of VC Code, you know. [Laughter]

Dave: Yeah.

Chris: I wonder what they plan to do. I'm not going to review it. They've asked very specifically in their emails, like, this is not ready for your reviews yet. This is early beta software. But they don't mind mentioning its existence or screenshots of it.

Dave: Yeah.

Chris: To me, it didn't look tremendously different from Coda, but I didn't do a lot of programming in it.

Dave: Yeah, well, I'm seeing the build systems are kind of a first-class little citizen in a publishing system, so that's kind of cool. I'm looking in their screenshots there for Nova. March 2019 release or, no, that's the update.

Chris: Coming up.

Dave: 2019. Okay, well, it looks good. Yeah, I'm curious when this stuff goes. Who knows.

Chris: Yeah, it's cool. Clearly, their UI has got gradients in it, people. [Laughter]

Dave: It's got gradients. Big ol' gradient-y button.

Chris: Okay. Do we have any more?

Dave: We have one more. I think it's going to be an easy one. Mikey Mike writes in, "How do you deal with saying hyphenated domain names out loud like CSS-Tricks.com? I always find it awkward having to say the hyphen when spelling my hyphen domain name dot com over the phone. What is your best approach to dealing with this?" Chris?

Chris: It might be the worst part about having a -- like you said hyphen, which is probably nice. For some reason, I say "dash."

Dave: I would say "dash." I just was saying hyphen as the, like--

Chris: For clarity.

Dave: --super literal version of it, but yeah. CSS dash Tricks is not a big deal, right?

Chris: I think, in the past, I've made it overly dramatic just to get through it, like, "Check me out at CSS DASH Tricks dot com." You know? Just make it really -- but you can't -- like, I see how that would be awkward on a phone call with your bank or something. I don't know why they'd need your domain name. But if it was a more serious conversation, then just say it, CSS dash Tricks dot com. I don't think it's that bad. It's a little weird because the danger being somebody writes C-S-S-D-A-S-H-T-R--

Dave: Yeah, hopefully, they'll figure out they're wrong. Yeah, I mean I think that works out just fine, Dave dash Rupert dot com wouldn't be the end of the world for me, but it's fine. I bet the people who put emoji in their URLs are having a worse time.

Chris: Oh, that's--

Dave: They're like, poop emoji left-hand pointing -- [Laughter] -- left, skin tone two, flag, Germany flag -- [Laughter] So that's probably having more -- they're having more problems than you, but I don't know. Don't worry about it. By the dash. Isn't the rule -- by the dash but always be hunting for the non-dash.

Chris: Kind of. If your project makes money to support that, it's probably not the worst idea in the world. I've changed my tune on that over the years because I'll get an email from somebody that's like, "I own cssdevelopment.com." I'll be like, "If I wanted that domain, I would buy css-development.com for $10 and I would build my site there. I don't want your domain. Take your $10,000 and screw off -- or the opposite of that. [Laughter]

Dave: Yeah, like Brad Frost had bradfrostweb.com for a long time. Then Brad Frost showed up and I think he had to do -- kind of back to the privacy question there -- had to do a whole Internet broker kind of deal to get the bradfrost.com dot com.

Chris: What'd he pay for it?

Dave: Oh, I don't know, but I think it's multiple thousands of dollars.

Chris: Yeah.

Dave: Not up to 10s, but I think it was a chunk of change. But you know, not to -- I don't know.

Chris: I'd probably give somebody $1,000 for chriscoyier.com.

Dave: Yeah.

Chris: Maybe. Maybe. If it was $5,000, I'd be like, "No. Get out of here."

Dave: I would give somebody $1.6 million for daverupert.com. Oh, that's me. I'll just pay myself.

[Laughter]

Dave: Look at me. I'm WeWork now. [Laughter]

Chris: I'd probably pay you $2,000 if you could get coyier.com.

Dave: Oh, see--

Chris: But that's it, you know. I don't care beyond that.

Dave: You have a financial limit of what you're willing to do.

Chris: The other thing is, if you're screwed up, you kind of have to buy your way out of that mistake. We kind of did that at CodePen. That's why I've changed my tune is that we only bought the io and then just built everything around that and then, later one, it became like, well, this is a very serious project. It's not just some new thing we're screwing around with. We're many years deep into this thing and it's all we have and the dot com became available, so we bought it. Even then, it was a little expensive but not terribly out of the realm of what we're talking about. I think we paid $10,000 for it.

Dave: Yeah.

Chris: Oy! But it's like we were -- you know, we're a company, so--

Dave: You're a business. Yeah.

Chris: Yeah.

Dave: There's even that whole copyright protection-y sort of conundrum. You have to protect yourself for whatever. But if you don't fight for it, you lose it.

Chris: I'm not saying dot coms are useless or non-dash domains aren't better or something. But for a new project, you certainly don't need a $10,000 domain name.

Dave: Yeah. Man, I am all into subdomains. That's my new jam for side projects. They just go on a subdomain now. I name it whatever. I own globaldefense.club because I wanted it for that video game we made. But I don't need the dot club anymore, so I'm probably going to power that down and figure out how to do the socket io connection a different way, but yeah. You know. I don't know. Subdomains, if you're not committing to it. But dashes are fine, Mikey Mike. Good luck with that.

Chris, do you have anything else you want to say? Are we wrapping it up?

Chris: Oh, I think that'll wrap it up.

Dave: All right. [Speaking in a robotic voice] Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up on download -- just, ah, blurp.

Thank you for downloading, podcatching, star, heart, follow Twitter. Get a new job. People like you. Want to hire you 2020. Chris, do you got anything else you'd like to say?

Chris: ShopTalkShow.com.