542: Breaking Up with CSS-in-JS, Mastodon, and Stories on the Web
We're talking CSS-in-JS, Token CSS, Matuzo being suspended from Twitter, trying out Mastodon, testing out stable diffusion, stories on the web, and Jake Albaugh's new social network.
Guests
Chris Coyier and Dave Rupert
Time Jump Links
Links
- Why We're Breaking Up with CSS-in-JS
- Vanilla Extract
- Token CSS
- Matuzo Suspended Twitter account
- Jeremy Keith
- Dave on Mastodon
- TJ Fontaine Steps Down from Node
- Masked Gradient Dashed Lines
- Matt Stable Diffusion AI Generated Selfies
- No, journos, I will not talk to you about your favourite billionare bad boy.
- Muan.co
- OpenStories on GitHub
- Enquirer JS
- Bubble Tea
- Luro
- Jake Albaugh Social
- Buddy.pizza
Transcript
[Banjo music]
MANTRA: Just Build Websites!
Dave Rupert: Hey there, Shop-o-maniacs. You're listening to a turkey-ish edition of the ShopTalk Show. I'm not sure when this episode is going out. We're recording a smidge ahead, but that's fine. Hey, Chris. How are you doing?
Chris Coyier: Yeah, very well. Thank you, Dave.
Dave: We'll just call this the Turkey episode. I really have no idea. [Laughter]
Chris: Yeah. I just had this bad feeling that when it drops, there'll be some obvious thing that we're supposed to be talking about in the world of development. But really, we're going to talk about RSS or something.
Dave: Yeah. Let's just pretend.
Google bought Microsoft. Wow! That was really unexpected.
Chris: Whoa! [Laughter]
Dave: Yeah. You know? We will cover it here in this segment we like to call "Speculative Future" [laughter] because we were talking a little bit before the show.
Remix, a React framework, kind of server-forward React framework, got acquired by Shopify Hydrogen, right? That team, right?
Chris: Yeah.
Dave: We were kind of like, "Wow!" I mean I don't think anyone here expected it. I'm sure--
Chris: Uh, no.
Dave: [Laughter] I think people at Remix were actively working with Shopify because they had some kind of -- you know they're kind of experts on server rendering React. I think Shopify was using their knowledge and it just worked out. Blah-blah-blah.
Chris: Yeah. It seemed to happen really fast. I don't know what it was like from their perspective, but I saw a tweet. Who is the Vanilla Extract guy? [Laughter]
Dave: Oh, Mark Dalgleish.
Chris: Mark something.
Dave: Yeah.
Chris: Yeah. Who was like, "I just got hired at Remix," or I mean Shopify. It seems like probably was hired right in the middle of that transition. That's why I mean fast.
Dave: Oh, yeah.
Chris: It's unusual to see something like that happen. You know?
Dave: Like by the time you start. Your start date and your signed contract date are totally different. Yeah.
Chris: Yeah. Yeah, but he seemed relatively excited about working on it regardless of it being at Shopify or not. I'd be... [Laughter] I'll work for Shopify. Yeah.
Dave: Yeah.
Chris: Some stability. Let's get some Shopify bucks. Hell yeah.
Chris: I thought of Mark for another reason, though, in that there was a lot of drama about CSS-in-JS (what will be a few weeks ago if not a month ago, by the time you're listening to the show). It was all centered around one article, which was one of the developers behind one of the CSS-in-JS libraries called "Emotion."
Dave: Mm-hmm.
Chris: Emotion is relatively popular. I'm not sure of all the details of it, but it's the one that's very similar to styled-components, and styled-components is super-duper popular, so it's in that bucket.
Dave: Mm-hmm.
Chris: And it has all these different abilities. You can write CSS with the backtick style or the other style, and there's a CSS prop, meaning you can drop CSS right onto a component, or you can predefine it and use it. It's pretty flexible. It's fine. I accept the ergonomics of these things and the fact that some people like them.
Dave: Mm-hmm.
Chris: They are runtime dynamic styles meaning that you can use math on them and such in interesting ways, and you avoid naming things. We don't have to go over every single plus and minus to these things, but the performance has always been one of the problems, right? Never have any CSS-in-JS advocates truly, I think, advocated for "This is definitely faster than using CSS." That's not one of the talking points of CSS-in-JS.
But it got so bad that I think the point of this article is like, "Look. It's bad enough that it's CSS time."
Dave: Yeah. This was Sam Magura, "Why We're Breaking Up with CSS-in-JS."
Chris: Right. That's the one.
Dave: But yeah. It was shocking that it comes from somebody who works on one of these libraries.
Chris: Hmm.
Dave: But I think it just kind of... I have very mixed emotions. I'm glad they figured out something that works. But man, I also feel like I was gaslit or told I was a dinosaur or a gatekeeper for years. [Laughter]
Chris: For a long time?
Dave: I was like, "I don't know, dude. That doesn't seem good." I know for a fact I was called a curmudgeon. Whoever did that, if you're still listening to the show, boo-yah. Anyway...
Chris: I feel like Sam knew what he was doing here, though. The title of it is funny. It's like "We're Breaking Up with CSS-in-JS." Not, "We're Breaking Up with Emotion," the exact library that I'm talking about in this, but breaking up with CSS-in-JS, which I just want to bring a little nuance to the party, and that's why I said I wanted to mention Mark's thing, Vanilla Extract. Because it's CSS-in-JS, you're still authoring CSS similarly-ish to this. You're still writing JavaScript that ends up as CSS but suffers none of the fate of this because the point is that the CSS is extracted into regular CSS by runtime.
Dave: Yeah.
Chris: But it's still CSS-in-JS. So is CSS Modules sometimes that there's JavaScript involved that processes everything and scopes the styles. It's kind of a version of CSS-in-JS. It doesn't have any of the downsides as this because by the time it hits the browser, it's just CSS. That little bit of nuance is lost here a little bit, which makes me kind of not roll my eyes, but be a little bit like anybody that touts, that pulls out this article and shoves it in your face and says, "See. Look. This was a bad idea," you're like, "Only a certain version of this is a bad idea."
Dave: Yeah. Yeah, and I should say Vanilla Extract, the part I like about it is it's very variable-based. You basically can create a theme that has variables. Then you use those vars, just like you would CSS variables but in JavaScript.
Chris: It's very tokenized.
Dave: Yeah, tokens. It's basically a design token-powered CSS machine, and I think it literally creates... The output is actually --variables, like CSS variables. That's really cool and really powerful.
I saw somebody else do this recently for Web components. Was it over on the Astro side of things?
Chris: Hmm... Oh, yeah! What was that? Was that Nate?
Dave: Yeah.
Chris: Damn it. We'll look it up. Don't worry. [Laughter]
Dave: We'll look it up here, but it was sort of a way to sort of... You know because var()--myvar is a little verbose.
Chris: Oh, I thought it was just called Token CSS. Yeah. Right.
Dave: Was it Token CSS? Okay.
Chris: Token CSS.
Dave: It's a little like pre-processor sort of thing that basically does the same thing. You just say padding medium md, and it'll convert that to var--sizemd.
Chris: Yeah.
Dave: Then you could even... There was a max width 8XL, and it converted to var size, you know, var--size-8xl, which I thought was very cool. But one thing I was... I didn't want to bring it up because I don't want to be a wet blanket on cool ideas anymore. Curmudgeon. I got called a curmudgeon, and now I'm reacting.
We are close to having custom properties, right? What Una was talking about, but wasn't there a thing like I could create an XL property or unit, right? Custom units, wasn't that something you wrote a blog post on, like these custom units you could create in CSS?
Chris: Are you talking about the idea of style queries and mixins or am I off the mark there?
Dave: No. I'm going to--
Chris: Oh! I think I know what you mean. Yeah. Oh, I see. I see what you're looking at with Token CSS and how you can say 8XL, and XL, that's not a CSS unit but you could assign it meaning. You could say, "Oh, but an XL is really just three pixels," or something.
Dave: Right. Right.
Chris: That's what you mean, right? Yeah.
Dave: That's coming to CSS, right? Or it exists.
Chris: It might be, yeah. It seems like it because it turned out there's a way to make a custom property basically behave like a unit without stretching your brain a little bit. I know that sounds weird to say on the radio here, but you can make a custom unit pretty easily. I don't think that's anywhere near actually spec'd.
Dave: Yeah.
Chris: But it seems likely because of how relatively simple it is once you see it.
Dave: Yeah because you could be like - whatever - max width five grids, or whatever you want to call it, and it would be five grid units wide - or something like that.
Chris: Yeah.
Dave: But anyway, I saw this--
Chris: It's right for jokes and vanity.
Dave: Right, vanity. Was it Vanity Properties or something? Anyway.
Chris: Yeah, you could have three. This is a five Dave block. You know? [Laughter]
Dave: Yeah.
Chris: Why not?
Dave: This is five Dave's wide, and everyone knows how big a Dave is, obviously.
Chris: [Laughter]
Dave: It's three ounces tall. Everyone knows how tall an ounce is. But I just was looking at this little shorthand, and I was like, "Uh-oh. You might run into problems when these vanity units drop."
Chris: Oh, yeah.
Dave: Because all of this....
Chris: I was a wet blanket on this too because it's saying do this in .css files. And I always took issue with that because I'm like, you're trampsing on the language then.
Dave: Yeah.
Chris: If you said, "Do this in a .css.token file."
Dave: TCSS. Yeah.
Chris: Or a TCSS or a .token file or something, that's fine because it says, "Oh, this is its own little language," and it gets processed into CSS. That's good.
Dave: Mm-hmm. Yeah.
Chris: Yeah, this is tricky because you're saying, "Oh, this is just regular CSS," and it's not. It has to be processed. It is not CSS as written.
Dave: You know I used to hate the whole... Well, I still sort of hate the MJS idea.
Chris: Hmm...
Dave: But I really was, like--
Chris: I had to use that the other day. [Laughter]
Dave: Well, now I'm actually just in this era of compilers and stuff like that. I think that's the best way for code to be like, "This is actually what I am. Run me through this processor."
Like .ts, you know it's not going to be JavaScript. It doesn't pretend to be JavaScript.
Chris: Right. No, it does not.
Dave: It will run itself. It has to run through a compiler.
Chris: I like that. I regret, in our code base, we don't use .jsx. We just use JS. But some of the files are JSX and some of them aren't.
Dave: Yeah.
Chris: I wish the ones that were JSX were JSX. I wish it just said that it was. I very much prefer that.
Dave: Yeah. I think I'm in the, like, I'm converted now to where I think, "Oh, I would actually super want every file to say what exactly they are," even in these little custom shifts.
Chris: Mm-hmm. Yeah, okay.
Dave: Sass was a great example. You know your Sass file. You know it's a Sass file.
Chris: Yeah.
Dave: CSS.
Chris: Right. Just say it's a different file. It's almost like - I don't know. I think it's cool, almost, to be like, "Oh, I invented a little processing language. I'm going to take my file extension, darn it. It's mine." [Laughter]
Dave: Yeah. Well, I think, yeah, anyway... If there was anything, I feel like we should just... [Laughter] If we've learned anything over the last ten years of CSS-in-JS, it should just be that, like, name your files. [Laughter] Name your files what they are.
Chris: One thing I wanted to mention is you know Manuel Matuzovic.
Dave: Yes.
Chris: He is matuzo.at. I was kind of following this the other day. There was a moment where he had responded to somebody and the response didn't show up. It was one of those almost like ghost boxes on Twitter.
Dave: Mm-hmm.
Chris: That's what happens when you're "shadow banned." You get this slap on the wrist from Twitter that your account is not suspended yet but you have some limited abilities.
He's like, "What the heck? Why?" Like literally had no idea why that would happen to him.
Then a few days later, permanently suspended. To this day, I don't think he knows why. None of us know why. There's no answers. There's nothing. He's just wiped off the face of Twitter and has submitted appeals and contacts, as far as I know. Just nothing. No answers or anything, which makes--
It's scary, isn't it? A lot of us put probably more time and energy than we should into Twitter, but it has become a Web development hive and a place where we talk and have friends and probably are a little addicted to. You can just be fricken' [explosion] scorched off of it.
Dave: Obliterated.
Chris: Yeah.
Dave: Just for no reason. I mean I know Manuel. We've interacted. He seems like a great person, you know, just trying to educate about HTML, CSS, JavaScript, accessibility. Never got bad vibes, so I just want to say that.
But I will also acknowledge I have no idea. Maybe he was being way too weird in DMs. I don't know. But again, that's--
Chris: That crossed my mind, too. Right? But I think when somebody is so public about not knowing why on a blog post, I feel like, as somebody who is like this, you've got to give them the benefit of the doubt. You know? I don't like going down the--
Dave: That's what I'm saying. Yeah. No character -- no flaws have been revealed. No people have stepped forward with like, "Oh, he's actually a total skeezo at conferences," or something. You know?
Anyway, people get kicked off and sometimes it's a mystery and sometimes it's not. This is genuinely one where it's a mystery.
Chris: It feels like a mistake.
Dave: Yeah. It feels like a mistake that will not get fixed, and it coincides with this time, this weird time in Twitter's life where it was taken over by an acentric billionaire [laughter] who fired the content moderation team - or whatever.
Chris: Yeah.
Dave: So, I'm just like--
Chris: There's nobody going to help. It just sucks.
Dave: Yeah. Yeah.
Chris: Fortunately, Manuel already had a really good blog, so it's kind of nice that he has an escape hatch of being able to... I mean, if it happened to me, I would just retreat super heavily back to my blog that nobody can take away from me, theoretically, unless you steal my domain name, which has happened to me in the past, but probably won't happen again.
Dave: Which turns out is possible. [Laughter]
Chris: Yeah.
Dave: Yeah, well, I mean it gets into that "own your content" thing. You know? I hope everyone knows I have a blog at daverupert.com. But yeah, it feels wild. It feels unsafe if somebody like Manuel can just get the boot. You know? I'm sure I run my mouth--
Chris: Jeremy is always proven right with his indie Web. I love Jeremy, but he takes things further than I would ever take them, like, really, a tweet, reply to a tweet, you publish to your own blog and syndicate there? It's way farther than I'd take it. I'm like, "No, he was right." [Laughter]
Dave: Yeah, he was right, wasn't he?
Chris: Bastard.
Dave: Yeah.
Chris: Yeah, he's right. [Laughter]
Dave: Well, yeah. Jeremy was right again. Progressive enhancement is good again. Ugh! Jeremy, stop it!
Yeah, I don't know. I don't want to be reactionary. I have tried to quit Twitter at times in the past. But this time feels a smidge different. I don't know. I'm trying not to overreact, but it just feels like--
Man, I don't know. It feels like chaos, and I don't super need chaos in my life. I'm kind of doing enough starting a company. [Laughter]
Chris: Yeah.
Dave: I don't need extra chaos. You know? It's kind of weird. Weird vibes.
Chris: Definitely in the wait and see thing. I've seen a lot of "Let's go to Mastodon," and a lot of "I'm not going to Mastodon." [Laughter]
Dave: Yeah.
Chris: I'd rather do nothing than go to Mastodon.
Dave: I went over to Mastodon, trying it out, but it didn't work. It was so overwhelmed. Something like 70,000 new users showed up, and the server just fell over. They had to buy a new server.
They ran out not of disk space on the database server. They ran out of CPU on the database server to process all the posts, like all the tweets or toots or whatever they're called. There were too many toots in the engine, so they couldn't process the toots, and it got stuck, and so... constipated. It got constipated and they needed a whole new database server with more CPU. I've never literally heard of that.
Anyway, it's unclogged now and should be working. But I don't know. Mastodon is very different. It's a ghost town. It's kind of intentionally slow, intentionally doesn't give you those dopamine kicks. So, if you're trying to replace an addiction with the Mastodon--
Chris: Yeah. Better software that's still... [Laughter]
Dave: Yeah. Better software is not the problem. You have an addiction.
Chris: Right.
Dave: And you need to just do NaNoWriMo or something instead.
[Laughter]
Chris: That is a very good point that it's not... Yeah, it's not the technology we need replaced. It's the addiction. Uh... I hate it.
Dave: Well, for me, I've realized it's the network effect. Right? I'm always one step away from telling Ted Cruz he's a piece of shit, and I think he might be able to see it, and that is intoxicating to me. You know?
Chris: [Laughter] Yeah.
Dave: [Laughter] That's what is interesting about Twitter. You have access to everyone on the planet, and they may reply to you. That's absolutely intoxicating, that network.
I don't know. I maybe don't need it anymore. That's maybe too intoxicating. It's too addictive. It's too interesting.
Then they try to - whatever - spam you with features that suck more attention. I'm just like, "Please don't. I'm already super bad at this. I'm already super addicted. Could you please just stop?"
[Banjo music starts]
Dave: Today's episode is brought to you by Sanity. The new Sanity studio has amazing features like embeddable authoring, which enables you to bundle Sanity as a React component within the Web app code itself.
The studio has been fully rewritten as a modular React-based components that enable you to reduce maintenance for your content system overall. Yay! Less code.
It also has full TypeScript coverage so you can customize your studio with confidence and support from within your favorite code editor. Sanity is hosting a Sanity product day on December 8th to showcase the latest updates. Learn more at sanity.io/productday.
Thank you, Sanity, for sponsoring the show.
[Banjo music stops]
Chris: I've been known to advocate for RSS too. I don't necessarily again mean it's our Twitter replacement, but surely, if this happened to me, I would use it even more. Honestly, I do both. I really am an RSS advocate. I am in there every day reading stuff, starring stuff.
Dave: I see the star, hearts, favorite it up. I see it.
Chris: Yeah. You should follow my star feed. It's amazing. I have so many good stars.
Dave: I do. I follow your star feed.
Chris: Do you really?
Dave: I see all your stars. Yeah, I follow your star feed. I follow your stars. I follow... Whose stars are these? These are unlabeled. Oh, Marcus Herman. He does accessibility stuff in Vue. Robin Rendle has stars. Adactio links, which is kind of like his version of stars. That's good.
Chris: That's nice. Here are my top, my last five stars was Eric Meyer's "Masked Gradient Dashed Lines" post, which is a way to use one-pixel tall repeating linear gradients to make lines, but there are some complications in sub-pixel rendering and stuff that he gets into in a very nerdy Eric kind of way that was a good journey.
Dave: Oh, wow. Yeah.
Chris: There's a Matt Haughey post. He's the old MetaFilter guy who spent a bunch of time at Slack. But he worked with Andy Baio and fed a staple diffusion model with only pictures of himself. [Laughter]
Dave: [Laughter]
Chris: Then--
Dave: Okay. All right.
Chris: It was fricken' great. Then got all these incredible AI results. They're all him.
Dave: Wow.
Chris: Amazing is looking different directions, and they're in different art styles.
Dave: Dressed as a colonel. Yeah. [Laughter] This is great.
Chris: Just so good, right? It reminds me. I think Google did this kind of almost like photobooth thing recently. I can't remember the details of it, but it was feed in yourself and get yourself in all these different ways: a warrior and a princess and whatever else.
Dave: Yeah.
Chris: Yeah. I read Terance Eden's blog. He blogs like every day. He's like the super prolific dude. It was just him celebrating himself. He had an accessibility PR to WordPress that took 2.5 years to get in, but it was finally accepted. It's just cool to see people celebrating little stuff.
I've got another one. Heather Burns' post that says, "A Rant: No, journos, I will not talk to you about your favourite billionare bad boy."
[Laughter]
Chris: I feel bad for her. She must be getting requests to be like, "What do you think about Elon?" You know?
Dave: Yeah.
Chris: Let me quote you in my article. You're a woman, right? [Laughter]
No, I don't want to be that for you. [Laughter]
Dave: That's good.
Chris: Anyway.
Dave: Oh, wow.
Chris: I love RSS, still, and it's a better source of news for me than Twitter is, still. As much as I love Twitter and am addicted to Twitter at the moment, as much as I don't want to be, my RSS feed churns out better stuff than Twitter does for me.
Dave: Yeah. Yeah. If only had spent years building a clandestine secret social network on RSS. That would be super cool if somebody was doing that. You know? I'd love to hear about it.
Chris: [Laughter]
Dave: Muan Chiou, she has a cool website, muan.co. In it, she has these stories, like literal Instagrammy stories. Right?
Chris: Mm-hmm.
Dave: It's based on this thing called an... It's a Web component, open-stories Web component. If you have an _open-stories object JSON feed in your site, it'll hook into that like a global variable, and it will find all the items in there and start piecing together stories however you want to organize them. You can have them in--
Chris: Hmm...
Dave: She has cooking, animals, travel, plants, friends, Taiwan stuff.
Chris: Right.
Dave: Anyway, I know I am not a stories format guy, but this made me want to be that. Does that make sense? It made me want to, like... I, in my youth, in my 20s, I used to take photos and stuff like that. I would love to get serious about photography and walk around with my phone instead of checking Twitter. Scoping for good photos. I would love to do that. Take good photos and post them in stories. My Gundams, you know.
Chris: Mm-hmm.
Dave: Little video reels or something like that. Playing songs or something like that. Wouldn't that be cool to have on your site? Anyway, I didn't know this open stories format exists, and she has a link to dddddddddzzzz/OpenStories on GitHub. Literally, that's what it is.
It's this open stories format, and then it will loop through your open stories on your site and display them appropriately.
Chris: Nice. Yeah. I think WordPress has a story format. You can publish a blog post in a story format. I always thought that was kind of a strange move for WordPress, but they can do that.
Dave: Would you do it? Would you do it?
Chris: I don't know. Sure. I mean I don't know. Probably not, but it doesn't matter what I would do. I still think it's a weird move for a CMS, essentially. But I could be wrong. It just seems like plugin territory or something.
Dave: Mm-hmm.
Chris: Yeah, you could pull a TJ Holowaychuk and just peace out to photography. He's just gone from the face of Web development and just posts tons of photos, and it's kind of rad.
Dave: Yeah.
Chris: We had a request to have him on the show to ask about that journey, and I did reach out and didn't hear anything, which is about what I expected because if you peace out from tech, you peace out from tech. You don't come on tech podcasts.
Dave: Why would you go on ShopTalk? Yeah.
Chris: Yeah.
Dave: Yeah. I mean that's a really... I mean you've got--
So, he's doing no tech, or is he quiet quitting, or is he doing no tech?
Chris: I think he peaced out to Go, right? Then was like, "Listen, I love Go. I'm useful in Go. But I'm not as--"
It's kind of like me. I've been writing a lot of Go, but I haven't really written any blog posts about it because I feel almost underqualified to say anything about it. There are so many smart people in that world that it's like, "What would I even write?" You know?
Dave: Okay.
Chris: I got the sense of some of his writing that he left, as he was leaving, about Go that was the same way. He was like, "Listen, I'm contributing to software using this, but I don't have as much to say as I did about JavaScript."
Dave: See.
Chris: I'm not creating modules for Go because there are already so many good ones that it's like my voice isn't needed here.
Dave: That's... See. That's interesting. That's what I want to get to. I don't know. [Laughter] It's like I just kind of want to use software and make cool things. I don't want to always have to... You know?
Chris: Yeah. Yeah.
Dave: Be a library author, promoter / open collective, blah-blah. You know? But he's just--
Chris: I do like writing about it, though. It makes me want to be more of a journalist in this world more than I ever was, but we'll see if that ever pans out. A little busy at the moment writing code.
Dave: A little busy, dude. Who was it, Robin Rendle? You know Robin Rendle.
Chris: He worked with me at CSS-Tricks.
Dave: He worked at CSS-Tricks. He's writing a book, by the way.
Chris: Letters and stuff.
Dave: He had a really good essay. He also redesigned his site with stuff that's type that's way too big. I appreciate that. [Laughter]
"In Praise of Shadows," he has this really good... Again, it's basically a story. But it's like you just swipe to use his website. It does not appear to work right now for me.
Oh... Hold on. Maybe I can get it if I do it in...
Anyway, I'm probably in the unique situation where I am on my stupid phone. Oh, it goes sideways. Sorry. That's what it is. Okay.
But it's basically just a love letter to his camera.
Chris: Oh, yeah, the shadows one? That was cool.
Dave: His Fuji X100V. And I'm not... You know I have a digital camera. I have a phone camera. But I haven't... I don't know. I was like, this is cool. This feels beautiful, intentional, and I was inspired by that. I just thought maybe that's something you can do is just take photos and share them.
[Laughter] Chris, did you know you can take photos and share them?
Chris: Yeah.
Dave: You don't have to blog about it and stuff.
Chris: Yeah.
Dave: You don't have to get likes on Instagram.
Chris: Some day you're bought by Shutterfly.
Dave: Yeah. See.
Chris: I did something this week.
Dave: Okay.
Chris: Are you ready?
Dave: Yeah.
Chris: I wrote a script. Sometimes when you develop software, you have to write little scripts that are part of your code base only temporarily because they have one little job they're going to do. Then you essentially throw it away, right? Maybe you let it sit there in some scripts folder. But it's not really part of the day-to-day software that runs. It's just like - whatever.
In my case, the script needed to fix some data, right? The point is I get it all right and tested, but it's going to do this on production, so it's a big deal. Get it perfect, and then I'm going to run it, and then I'm going to throw it away. You know?
I've done that like three times in the last little while. But I'm working on one that's a little bigger that needs to munge some data in a more, you know, like, pick up this piece from the database and convert it into something pretty different.
Dave: Mm-hmm.
Chris: I'm working on this script, and it's involved. It's going to be months of time and stuff. I'm just kind of keeping it up to date and keeping my eye on it - whatever.
But because I have so much time to work on it, it's going to last. This particular script, it plucks something out of the data and, for now, it just saves some files to disk based on stuff that it found in the database.
Dave: Mm-hmm.
Chris: I wrote it such that at the very top of the script -- and the script runs in Go. It's just script.go -- I hard-coded some stuff like pull a thing from the widget table of ID12789 - or something. But it doesn't have to be a widget. It could be a widget or a cabob or something.
It could be two different types, and then it needs an ID. For a long time, I was just like, "Oh, I need a different thing, so I'll just go up to the top of the script and I'll change the hard-coded value and then run the script again."
It got me thinking, like, "Oh, while I'm fixing this up, why don't I have the script take input?" So, I could call the script at the CLI with like a flag.
Dave: Yeah.
Chris: Like -ID=whatever.
Dave: Mm-hmm.
Chris: I was like, I could do that. But what's funny is this particular script gets called from a Bash script because the Bash script needs to do a little setup. It needs to connect to a DB and do some stuff.
Dave: Sure.
Chris: It's already a script that calls a script. [Laughter]
Dave: Yeah.
Chris: Then I was like, "You know what I want to write is one of those really fancy ones that you interact with once in a while where you type a command, and then you get put into a little wizard."
Dave: Yeah.
Chris: It asks you question.
Dave: Like a yeomen kind of deal. Yeah. Yeah.
Chris: Yeah. Yeah. Yeah. So, I look up how to do it, and one of the most popular libraries is called Inquirer JS.
Dave: Inquirer JS.
Chris: It's a Node, Inquirer JS. That's right. You write a script in Inquirer, and you call it, and that's the thing that has this little experience.
You write an Inquirer script, and it has a prompt with questions and stuff. The first one is a question it asks. "Do you want a widget or a cabob?" You can use the arrow keys in the CLI to pick which one you want, which is cool, right? There's a default, so you could just hit return if you want the default.
Then it says, "Oh, okay. You want a widget. What ID do you want the widget to be?" I have it set up where I have about ten of them that I can arrow up and down through depending on which one I want. Then you hit the arrow key. Then it runs the script.
It was so satisfying to write. I'm like, "Oh, I made this thing." Rather than having to hard-code stuff, I can call it by using this little Inquirer script. It was pretty fun.
Dave: Oh. That's beautiful.
Chris: The problem is it's in Node, so it's a Node script that, when you select the stuff, it ultimately then calls the shell script. [Laughter]
Dave: Okay.
Chris: It passes the values to the shell script, and then the shell script has to pass those values to the Go script. [Laughter] It's a lot of shepherding flags around. You know?
Dave: Right. Right. That can be dicey.
Chris: A Node script that calls a Bash script that calls a Go script. Yeah, it wasn't too bad, but it was a little funny, the worst being Bash, of course, like pulling flags out of Bash, which you'd think would be amazing at this very simple job. The syntax for it is really weird. I hate it, essentially.
But anyway...
Dave: Yeah.
Chris: That's just what I had to do. But then I was looking -- or I think I showed the team, like, "Oh, look. The script now is really cool. It just asks you stuff." It was like, "Oh, that's good.
Everybody liked it, but then Alex was like, "You should look at Bubble Tea," it's called, which is a Go version that's even cooler looking than Inquirer, but it's all in Go.
Dave: Okay.
Chris: I could have skipped all the shuffling around and just wrote the whole damn thing in Go, but I didn't know Bubble Tea existed at the time. So, fail.
Dave: Well, yeah, that's on one of those - don't know how to Google, like Google Bubble Tea. You're going to be stuck.
Oh, it is written in Go. Interesting.
Chris: Yeah. It looks a little cooler, too. They're neck-in-neck for stars. They both have an absolute crapload of stars, which surprises me how many people write exotic CLIs. Apparently, more than you'd think because there are a lot of people.
Dave: I think writing a CLI in Go is pretty good, too. Pretty smart.
Chris: Yeah, probably.
Dave: Especially if you're--
Chris: I don't think I would have gotten all the way to Go, though, because I think the thing -- I need the shell script in the middle, in my case. So, this Go script would have had to call a shell, which had to come back to this.
Dave: Right. Right.
Chris: Anyway, that's just my little story for people out there. Anybody out there write their own CLI with fancy, interactive wizardry stuff? What did you use? Let me know.
Dave: That would be awesome to know.
We have one at Luro for Terraform. You can be like, you know, "Create a new server." What's it called? It's called whatever.
Chris: Oh, you wrote your own. Nice.
Dave: Yeah. A little server manager. Then it has destroying and stuff too, but we're actually moving off of Terraform, unfortunately, just for right now. So, some of this stuff will kind of live on in some capacity. But it's kind of cool for spinning up servers and stuff.
I saw that Astro has a new one. It's called Houston.
Chris: Don't they have a little dinosaur guy?
Dave: A little robot homie.
Chris: Oh, it's good.
Dave: Yeah, and it's pretty cute. It smiles and stuff. It was enough to move all my projects over to Astro.
Chris: I was going to say, how did I say dinosaur? That'd be really off-brand. They went space. Once you go space, you've got to stay space. You know?
Dave: You've got to stick to it. A little robot. But that's fun stuff. It's kind of a fun place to play around because - I don't know. Too, developers are only going to see it.
I say, though, that can be a massive time sink that your bosses do not actually want you to do. [Laughter] Unless it's saving time, think about it. Don't just be like, "I'm going to make an animated robot face for fun." You know?
Chris: Yeah. Tricky.
Dave: That's maybe not going to pay the bills.
Chris: Yeah, it might not. But it could be the thing that it could be literally a part of the marketing and branding of your whole thing. It's like how it feels.
Dave: Yeah.
Chris: And if you're the fun thing - I mean it could be a bigger deal than just a chuckle on Twitter or whatever.
Dave: Right. Right. Right.
Chris: It could be like, "I like this thing because it's showing me the sensibilities of the company behind it, and that's important to me." I think that stuff kind of matters.
Dave: Funny. TJ Holowaychuk gets a mention in the footer of Bubble Tea's repo, by the way. Bringing it full circle here. Bringing it full circle.
Chris: Nice.
Dave: His go-to repo.
Chris: I'd be more tempted to build stuff like calling a script into a website because that's another way that you could call a script is a button on a website.
Dave: Mm-hmm.
Chris: It hits a URL, and the URL runs the script. I don't know what that says about me that I'm more apt to write a CLI than I am a button these days.
Dave: A UI?
Chris: It's scaring me a little bit. Yeah. [Laughter] I used to be like, websites are the only way.
Dave: Well, there is something to be said. In its purest form, you have this script that expects a certain number of inputs, and it produces an output. The UI kind of doesn't matter so much. It's just on the website.
Maybe this is the most efficient way. Maybe this is the easiest way to do something versus public website that you have to then get up, have security permissions, firewalls, blah-blah-blah. Maybe this is really the easiest way.
Chris: Yeah. That it is actually easier to do.
Dave: Mm-hmm.
Chris: Yeah. Perhaps it is. And the fact that you can - yeah.
Yeah. Just to bring everything back to TJ, he's got this post from 2017, which was, I think, kind of post his peacing out to Go. The article is called "Go Blows Away Node in Pretty Much Every Way."
[Laughter]
Chris: Which is the point to it, and he says, "You get all the niceties of blocking code without actually blocking. You get relatively tiny binaries that you can deploy anywhere with no ease and no fuss. Instead of 250 megabytes of Node modules that everyone comes up with hacks to work around, you get a very strong, standard library, so you don't reinvent stuff - poorly in many cases. You get a rich selection of third-party packages from a community of seasoned engineers, incredible tooling for debugging, profiling, monitor, and so on. You get normalized code that looks the same no matter who in the community wrote it, auto-generated documentation, a built-in framework, built-in benchmarking, static typing, and all the benefits that go along with that, less fragmentation. The list goes on and on and on."
He's just like, this is way better than Node, and I can't disagree on those points. It's pretty fricken' strong.
The fact that I wrote this thing in Inquirer, I was like, "Oh, I'll just go, you know, Yarn add Inquirer," and it downloaded an absolute crapload of dependencies to get this little command line tool going. That's just what happens in Node land.
Dave: It's unfortunate. I don't know. Yeah. We were recently reevaluating our code base. We're making some moves and stuff like that.
We're kind of moving into a mono repo kind of thing. It was like, "Oh, hey." We can maybe pull our API that's in Nuxt right now out into a standalone express app or something. That might enable us to get to Vue 3 or Nuxt 3.
We took a big piece, a big problem out of the system, and so it was exciting. But it was also just kind of like, it just goes to show, you have all these dependencies. They're all intermingled. They're all wrapped up, and it's hard to undo. But if we could get to Nuxt 3--
Chris: ...PHP a little bit.
Dave: Yeah.
Chris: People wrote so much PHP because it was just there. It was just everywhere. And now Node is a little bit like that. It's just everywhere. If it's going to run on a server, the chances of that server supporting Node is super high. The tooling around it is probably going to be centered around Node in a way. Certainly a cloud function anything is that way, which is how this whole world of site builders and static site stuff has generated is all circling around Node.
Dave: Well, and one of my top ten problems is, like, "Oh, this has require in it." It's like, "Oh, man."
Chris: Dude! ESM, the worst.
Dave: Yeah, well, I love ESM, and I want everything to be that way.
Chris: I know. It's just, everything needs to move to it. Yeah.
Dave: Yeah, and now I have to kind of choose tools based on that, too. You know? I was kind of just like, "Oh, man. I don't know if I want to do that." That's another reason we want to get to Nuxt 3 is so that we're kind of off of this Webpack and require and stuff like that.
Yeah, anyway...
Chris: We tried it. We're living through a little bit of pain at the moment of trying to be like, "We're not going to go all in on TypeScript, but let's just make sure that if you want to write componentry at CodePen in TypeScript, you can."
Wow! In a mono repo setup like ours, it's just been quite the not-so-pleasant journey of getting there. [Laughter]
Dave: Really? It's been a brutal shift, huh?
Chris: Yeah, which has been my experience with TypeScript always, and I know that's not normal for everybody. It can be very easy and normal and natural. If you're writing a Next app, for example, you can just write in TypeScript. It's fine. It will just work. It has a TypeScript compiler.
Dave: Mm-hmm.
Chris: That is not the case if you keep your componentry outside of Next because you're a mono repo situation. That needs to--
We have all these @codepen style packages that are like, "Oh, we keep our constants over here, our utilities over here."
Dave: Mm-hmm.
Chris: Different things like that, and those things need to be TypeScript ready too, which is a little tricky. Then we still have our Rails app that still needs to digest them as well, which has a Webpack build. And it needs to be aware of it too.
It can be a little rats nesty to get working in dev, and then production builds are different and is a whole other story.
Dave: Mm-hmm.
Chris: It's just a lot. Once we get there, theoretically, you start getting to the point where there are some advantages. But I do look forward to it. I've been in support of it so far, but if anybody has had TypeScript experiences like mine, I'm sure they can commiserate. It's like any time somebody says that word, it basically means the entire hackathon will be dealing with that and not the actual product.
Dave: Yeah. Right. Yeah, it's like you're going to sprint on a new feature, but it's 99% just setting up TypeScript. Yeah.
Yeah. No, well, and I do wonder, too, like grass is greener kind of syndrome, right? You were saying switch everything to Go or Go is better. I wonder, too, if Go doesn't really have to deal with UI in the same way that JavaScript does. So, maybe it's different.
Chris: Right.
Dave: Maybe UI is actually the crappy part.
Chris: It certainly doesn't live in the browser.
Dave: Maybe UI is the crappy part and we need to fix that or figure out that. I don't know. Interesting.
Chris: Yeah.
Dave: My brain is turning.
Chris: I'm seeing this stories thing that you're explaining. This is very -- this is not quite what I was expecting. It's really cool.
Dave: No, you say open stories source equals some JSON file and, ta-da, it gives you a little circle button with some stories. Wonderful. I'm into it.
Chris: Dang! That's fricken' fancy. Open stories. Holy crap. I had no idea.
Dave: I didn't know either. This is very interesting to me. Yeah. It's just very cool. Anyway, I might give it a whirl.
Chris: Yeah.
Dave: At least do one.
Chris: Publish your own JSON feed of stuff. It reminds me of Jake Albaugh. He was like, "Everybody should join my social network." I'll have to dig up - if he ever wrote a blog post about it or anything. But he just publishes a piece of JSON at his own website. And if you want to join his social network, you just read his JSON file.
Dave: Yeah.
Chris: It's as simple as that. Then he will publish part of that JSON.
Dave: Yeah. I tried to set it up.
Chris: Did you really?
Dave: Yeah.
Chris: It's about as high-minded as you think it is. It's so complicated. There's no schema to follow or anything. It's just like, deal with arbitrary other people's JSON. That's what the social network is.
Dave: Yeah. Yeah, it's ja-k-e/social on GitHub. It's just as you described. Boy, what is it? You know?
Chris: [Laughter] Good luck.
Dave: Yeah. No, it's--
Chris: It's hilarious, though. It's very Jake-like.
Dave: I set it up, and it was kind of easy. It has a little Netlify thing. Easy as like a timestamped in a text thing is, that's where I maybe would want a CLI to be like, "New tweet," or whatever. New post. Blah. Then it adds to the JSON, sends it up, but I think that's probably really easy to do.
Chris: That was the point of it is get the bones in place and then publishing is on you. If you want to hand-edit the JSON field, go ahead. If you want to build a tool to update your JSON, go ahead.
Dave: To spin out JSON. Yeah.
Chris: Then crucially, even the reader is up to you.
Dave: Yeah.
Chris: Then his version is buddy.pizza - or whatever. It hits as many different JSON feeds as it needs to and builds a reader around it. But you'd build your own reader is the point. I just think it's just hilariously complicated.
Dave: Yeah. No. I'm into - whatever - alternative forms. [Laughter]
Chris: Mm-hmm.
Dave: Let's do alternative formats. Yeah. All right, well, cool.
Chris: Yeah, man.
Dave: Chris, we should wrap this up. Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show.
Follow us on Twitter (or whatever is cool now) @ShopTalkShow somewhere, or join us in the D-d-d-d-discord, patreon.com/shoptalkshow.
Chris, do you got anything else you'd like to say?
Chris: Hmm... ShopTalkShow.com.