215: Rust Is Overrated w/ Naman Goel

[00:00:00] Intro: Welcome to Syntax. Welcome to a brand new episode of the Front End Happy Hour podcast. Welcome to this week’s JS Party. Live from Ship Shape Studios, this is Whiskey Web and Whatnot. With your hosts, Robbie the Wagner, and me, Charles William Carpenter III. That’s right Charles. We drink whiskey and talk about web development.

[00:00:27] Intro: I mean, it’s all in the name. It’s not that deep. This is Whiskey Web and Whatnot. Do not adjust your set.

[00:00:36] Robbie Wagner: Hey, what’s up everybody? Welcome to Whiskey Web and whatnot with your host Robbie, the Wagner, and Adam Thomas Argyle, the nerd.

[00:00:45] Adam Argyle: What’s up today? We’ve got a

[00:00:49] Robbie Wagner: a, yes. Sorry, go

[00:00:51] Robbie Wagner: ahead.

[00:00:52] Adam Argyle: and it it is Naman Goel, creator of the only official react styling library, Styx ex meta [00:01:00] open AI dev. Now a superconductor of tokens, orchestrator of rule sets, react aficionado, creator of solenoid, speaker, blogger, type nerd, and CSS Spelunker. Welcome to the show, Naman.

[00:01:12] Adam Argyle: I haven’t seen you since Amsterdam. How you

[00:01:14] Naman Goel: Yeah, I’m doing good. Thanks, Adam. Nice to meet you, Ravi. yeah, that was very kind. That was like the best intro I’ve ever gotten. That’s insane.

[00:01:24] Adam Argyle: Love

[00:01:24] Robbie Wagner: what Adam’s here for.

[00:01:26] Adam Argyle: I gotta spruce you up ‘cause uh, you know, no one likes to write a resume. I mean, I’ve been talking about that on other podcasts. Writing a resume sucks. I mean, some people like to bolster themselves and those are just butt holes. Anybody that’s like, I am this big and I am this cool, you’re like, you suck already.

[00:01:40] Adam Argyle: So,

[00:01:40] Adam Argyle: I’ll do it for you. ‘cause then it’s cool. I maybe if I, if I bo you up,

[00:01:44] Naman Goel: it’s almost embarrassing. Good,

[00:01:49] Adam Argyle: you have a lot of cool stuff going on. Uh, you’re easy to bolster, so

[00:01:52] Naman Goel: thanks.

[00:01:53] Robbie Wagner: You know what else is embarrassing?

[00:01:54] Naman Goel: Mm-hmm.

[00:01:55] Robbie Wagner: The size of my teeny little bottle.

[00:01:57] Adam Argyle: [00:02:00] it’s true. But at least you have a good scapegoat. here, here’s the daddy size out of this sweet Pringles can.

[00:02:11] Robbie Wagner: You know what I used to do though, when I was younger and I like didn’t know what real alcohol was, I used to get hypnotic in like these size bottles and just drink ‘em straight outta there. I thought I was so cool.

[00:02:24] Adam Argyle: I mean, maybe you were to somebody.

[00:02:26] Robbie Wagner: Uh, maybe. All right. But yes, we have the Glen Fitch, 12 year scotch is 80 proof. It is 12 years old, right in the name, and it is 100% malted barley, and I can’t get mine open.

[00:02:39] Adam Argyle: It’s a little finicky, in a little pre-show chatter, Naman and I were talking about the first time, he had this, and that was a cool story. there was a breakup involved. Anyway, yeah. Do you want to, do you want to give us the story again? It was pretty, pretty sweet.

[00:02:53] Naman Goel: yeah, so it was one of my exes and, she sent it to me for my birthday. it arrived like a few [00:03:00] weeks later, but we had broken up during that period, so, so,

[00:03:05] Naman Goel: I had to offer to send it back, but yeah, she didn’t want it back.

[00:03:09] Adam Argyle: Constellation Prize. That’s awesome. I kept thinking of that song from back in the day. The hardest part of breaking up is getting back your stuff.

[00:03:15] Adam Argyle: Do you remember that band? is a MTV made up band. I know my calculus, it says U plus Me equals Us. That was their famous song.

[00:03:22] Naman Goel: Ooh, I

[00:03:23] Robbie Wagner: I don’t know. I’d have to hear ‘em.

[00:03:24] Adam Argyle: It is not great. I mean, they were making fun of boy bands at the time, which I loved. ‘cause I was very jealous of boy bands. They had all the ladies in

[00:03:32] Adam Argyle: their, athletic shirts or, uh, wife beaters in their, their big buckles on their denim, you know, and the lady’s going crazy, which is all cool again,

[00:03:40] Naman Goel: Mm-hmm.

[00:03:41] Adam Argyle: uh, very popular right now.

[00:03:42] Robbie Wagner: All right, so we have a sip, I have a toast to JavaScript frameworks. May they rise, may they fall and may we forget half their names by next Tuesday.

[00:03:52] Naman Goel: You still stawell? It’ll definitely happen.

[00:03:57] Adam Argyle: Ooh, warm. I’m getting a really nice, [00:04:00] warm scent off that Nice. Color. Mm

[00:04:03] Robbie Wagner: Yeah, it’s uh, clear-ish. Brown. I’m not getting a lot on the scent. Maybe a little bit of lemon. I don’t know. I’ve been a little sick, so I can’t, can’t really smell as well.

[00:04:17] Adam Argyle: oh, a little bit of lemon. Mm-hmm. Mm-hmm. Oh, there’s a citrus to it for sure. Whoa. It’s good. Ooh. Nice hug. Mm. Feeling it down. The esophagus just warming me up. It’s like Christmas inside.

[00:04:32] Naman Goel: feel like a complete imposter right now. It’s like people do this for whiskey too, not just wine.

[00:04:41] Robbie Wagner: It’s all made up.

[00:04:42] Robbie Wagner: yeah, just pick any, any descriptor. I’ve tried to be, you know, super stupid and be like, oh, it smells like rotisserie chicken or something, and like that. People never get that, but like, if you’re like, oh, hmm. , Dried apricots or juicy fruit or like anything that could be in there, people will be like, oh, you’re so right.

[00:04:59] Robbie Wagner: That is like [00:05:00] exactly what’s in there.

[00:05:01] Naman Goel: Yeah, the, the only two words I’ve ever used to describe whiskey is, is it smooth or not, or is it smokey or not? And I don’t really have vocabulary past that. And I would say this is neither, it’s smooth, but not smokey

[00:05:14] Robbie Wagner: Yes, I would agree with that.

[00:05:16] Robbie Wagner: A lot of times you get a scotch and you smell it, and I like to say it’s smells like you just opened a sharpie. And I think that’s the, like the pd smoky, like the, you know, super scotchy flavors. And this doesn’t have a lot of that. I think I read there were more details on here that I didn’t give everyone this, let’s see.

[00:05:33] Robbie Wagner: it is matured for 12 years in Ola, sherry, and bourbon cast, so there’s probably some extra like sweetness and stuff from the sherry,

[00:05:42] Robbie Wagner: imparted in there. , Yeah, pretty yummy in my

[00:05:45] Robbie Wagner: opinion.

[00:05:46] Adam Argyle: yummy. I’m like really getting these fruity notes, almost like a guava at the end. Like at the beginning. I don’t taste much different than whiskey, but as, as it settles and sort of like rests on different palate parts of my tongue, definitely get a lot [00:06:00] of floral and yeah, guava just keeps coming back.

[00:06:03] Adam Argyle: But that initial citrus

[00:06:05] Naman Goel: Mm-hmm.

[00:06:05] Adam Argyle: and definitely smooth, yum,

[00:06:07] Robbie Wagner: Yeah, for sure. So on this show we have a very complex rating system from zero to eight tentacles. Zero is like the worst. Wouldn’t give this to your enemies. Eight is the best and four is kind of middle of the road, I guess. There’s technically nine, so it’s maybe there’s no middle. Four and a half is middle, I guess.

[00:06:27] Robbie Wagner: yeah, pretty simple. What do you think, Adam? You wanna go first?

[00:06:30] Adam Argyle: I will, delicious, smooth. The lasting flavor. Yummy. , 12 years. Gotta respect that. Hmm. I’m gonna go pretty high rated on this one. I’m thinking like a 7.2.

[00:06:44] Naman Goel: oh.

[00:06:45] Robbie Wagner: Hmm.

[00:06:45] Naman Goel: That’s, that’s pretty high.

[00:06:46] Adam Argyle: Thank you.

[00:06:48] Naman Goel: Uh, yeah, I was gonna go six or seven. my gut said seven, and then I was like, there’s probably something better out there. So I, I, I haven’t had a lot that I like, prefer to this. , There’s some really highly rated whiskeys that everybody [00:07:00] loves, but I actually like this more than a lot of them.

[00:07:03] Naman Goel: So, , I’ll go with like a seven as well.

[00:07:05] Robbie Wagner: nice. Yeah, I totally agree with the, like, I think once you hit a certain price threshold, it’s just like, it’s not any better if it’s $500 a bottle. It’s just like, oh, if, maybe if you’re like, you have a really sophisticated palette or something, you can taste something that makes it better. But for me, like.

[00:07:21] Robbie Wagner: It not worth it. But yeah, so this is pretty good. , I’m not usually a Scotch fan. This is not all that scotchy, so I am a pretty big fan of this one. , I’m not gonna go all the way to seven. I’m gonna say 6.8.

[00:07:32] Adam Argyle: Nice.

[00:07:34] Naman Goel: minus 0.2 on the seven.

[00:07:36] Robbie Wagner: Yeah, yeah,

[00:07:37] Adam Argyle: Yeah, I leaned up. I’m always gonna do that. I’m like an optimistic person. I like complimenting things, so I’ll probably always sway, sway up the number. I’m gonna, I’ll give you the benefit of the doubt. Whiskey

[00:07:50] Naman Goel: Yeah, I was just going with whole numbers. I was like, I, I’ll, you know, leave the decimal off.

[00:07:55] Robbie Wagner: yeah. It is hard to have fractions of a tentacle, I guess, but we do it.[00:08:00]

[00:08:01] Naman Goel: If you have a fraction, it’ll just re regrow, right? Like, uh, most tentacles tend to regrow

[00:08:07] Naman Goel: so.

[00:08:07] Robbie Wagner: is true. Chuck would always say that ‘cause he is like, there could be a nine tentacle octopus if one, if you cut one off, it can grow two backs. So.

[00:08:15] Adam Argyle: Well, that’d be a really popular octopus. It’s got like the split tentacle. All the ladies are like, oh, do you see that tentacle? How do you think that feels? You know, it’s, it’s snakes out. It’s crazy.

[00:08:27] Robbie Wagner: Yeah. What if you just cut like all of them a little bit and have like a thousand tentacles? Like if you grew back a bunch?

[00:08:34] Naman Goel: so what, what’s the, what’s the original story of the CLE rating system? Where did that come from?

[00:08:39] Robbie Wagner: , Well, I’ll give you the not that long version. , We had a consultancy called Ship Shape. Our, logo was like a octopus like creature. , So

[00:08:48] Adam Argyle: like the cracking on a boat. Yeah.

[00:08:50] Robbie Wagner: yeah, it’s technically, if you wanna be a hundred percent technical, it’s a Cthulhu, , the Cthulhu face. Yeah. But no one’s, everyone, like, half people don’t know what that is.

[00:08:59] Robbie Wagner: And then like, [00:09:00] I don’t know, we just, we make it easy and be like, it’s octopus like.

[00:09:03] Naman Goel: I know what it is.

[00:09:04] Robbie Wagner: yeah. Yeah. Yeah. So

[00:09:06] Naman Goel: not from where you would think. Yeah, I, the first time I saw it was South Park, not, Dungeons and Dragons.

[00:09:13] Adam Argyle: I’ve learned so much from South Park. It’s not even funny.

[00:09:16] Naman Goel: Uh

[00:09:18] Robbie Wagner: yeah. Educating the masses

[00:09:21] Adam Argyle: Oh, they’re, they’re mocking the masses. They’re so good at making fun of us. ,

[00:09:24] Naman Goel: Mm-hmm.

[00:09:25] Adam Argyle: just love the perspective that they, that they share. It’s, it’s good stuff. I’m not caught up though. There’s like an episode. I’m, I’m not caught up on, are you caught up Naman on South

[00:09:33] Naman Goel: No, I actually got, , I got a subscription to Paramount Plus finally to watch it. but I just, I was flying over the weekend, so I’m gonna watch it this week.

[00:09:41] Adam Argyle: Gotcha. It’s uh, it’s like the only TV show I still watch these days. I was watching Alien Earth,

[00:09:46] Naman Goel: Hmm.

[00:09:46] Adam Argyle: season ended, so I’m back to no shows.

[00:09:49] Robbie Wagner: I got a list for you if you need a list.

[00:09:51] Adam Argyle: Yeah. Hook me up. I’ll give it a shot. , We’re like oddly picky on her house. My wife falls asleep to everything. If she stays awake, it’s like, ooh, she likes a show.

[00:09:59] Robbie Wagner: Did you [00:10:00] watch Ozark?

[00:10:00] Adam Argyle: I think I started that one. I think I got halfway in. That was a drug smuggling,

[00:10:04] Adam Argyle: show, right? Yeah. I think I got halfway into that one.

[00:10:07] Adam Argyle: I

[00:10:07] Naman Goel: That’s on my

[00:10:08] Robbie Wagner: uh, new Jason Bateman show called Black Rabbit that I just started. That’s like similar vibes. That’s, uh, pretty fun to watch so far.

[00:10:17] Adam Argyle: Cool. What are you watching them on?

[00:10:20] Naman Goel: I’ve been watching lots of anime recently, but, uh, the last live action thing I watched was Slow Horses.

[00:10:26] Naman Goel: have you heard of it?

[00:10:27] Adam Argyle: No.

[00:10:28] Robbie Wagner: I’ve, I’ve heard of it, but I haven’t, I haven’t pulled the trigger. It keeps showing up and I’m like, should I watch this?

[00:10:33] Naman Goel: the name makes you think it’s not gonna be good, but it’s actually really good.

[00:10:36] Naman Goel: It’s a really good spy thriller with comedy in it. The premise is that it’s a British show. and, uh, I forgot the actor’s name, but, uh. He played Serious Black, and in the Nolan movies, he was Commissioner Gordon, like he’s a really good actor.

[00:10:51] Naman Goel: So, , they are the rejects of MI five. they can’t kick them out of the agency, so they get sent to this dump and they’re all like these rejects [00:11:00] and it’s about them, but like, it’s also a serious by thriller show. So it’s like really funny, but also really good by thriller, intrigue, all of that.

[00:11:07] Naman Goel: And, uh, it’s almost like slight, like two movies per season. It’s like five episodes per season and there’s, uh, five seasons out so far with, you know, one story per season. It’s pretty good.

[00:11:18] Robbie Wagner: Nice. I’ll have to check it

[00:11:19] Adam Argyle: down with that premise. Yeah.

[00:11:20] Robbie Wagner: Yeah. You know what else is good that I’ve heard

[00:11:23] Naman Goel: Mm-hmm.

[00:11:24] Robbie Wagner: flow?

[00:11:29] Naman Goel: Uh, everybody loves the flow state. What can I say? Uh, no, this is, this is almost, uh, like, uh, almost a cliche at this point for me. Like, I was like the biggest flow defender. I was like

[00:11:42] Naman Goel: updating my website.

[00:11:43] Adam Argyle: What happened?

[00:11:45] Naman Goel: I don’t get to use it much. I don’t get to use it much anymore. But,

[00:11:48] Naman Goel: for the longest time, I, I was updating my website this, this like last week, and I was finding all my talks and my first ever talk that’s actually up online somewhere was I had a meetup.

[00:11:59] Naman Goel: I was talking [00:12:00] about flow. So , it’s almost like, almost nostalgic for me. It was like, I used it for my first like, big job. Like my first type system was flow. , So it kind of like made sense and, , yeah, so I’ve often like talked about how I like prefer things about flows like type system to TypeScript.

[00:12:16] Naman Goel: And in a lot of ways I still do. It’s faster, it makes more sense, it’s more consistent. The downside is it’s. Not as polished as TypeScript. TypeScript is just like so over-engineered and like, executed so well that it’s very difficult to convince people to like, choose flow because you have to, you have to want correctness over convenience, which most

[00:12:39] Naman Goel: people don’t care

[00:12:39] Adam Argyle: do that work now? I feel like AI could annotate the hell out of flow and it just like make this, yeah. Take sort of the tediousness out of it.

[00:12:47] Naman Goel: for the longest time flow needed fewer annotations than TypeScript. Now it needs more. And then soon they will go back down to fewer again that they’ve been doing this like massive refactor over multiple years. , , and like [00:13:00] TypeScript also like actually shipped this feature that Flow had to ship just to scale where flow makes you write, uh, annotations for all exports.

[00:13:08] Naman Goel: so that, , it can. You know, check your code faster. And

[00:13:12] Naman Goel: TypeScript

[00:13:12] Naman Goel: is,

[00:13:13] Adam Argyle: exports or function exports?

[00:13:15] Naman Goel: yeah, like file, like module exports, but also function, uh, uh, but like, , module exports, even functions need return types. Like you

[00:13:22] Naman Goel: have

[00:13:22] Naman Goel: to annotate everything.

[00:13:24] Robbie Wagner: it doesn’t have to infer like all the way up the chain. It can just grab that.

[00:13:27] Naman Goel: Yeah. And, and that, that was done a few years ago and I forgot it was called the Types First architecture, where it’s basically like, oh, you know, you can just type check a few files and you’re good. And you don’t have to like look at the whole global state, which is why it’s, it like scales to, I don’t know, like 50,000 files or something at like Facebook’s, , monorepo.

[00:13:46] Naman Goel: It like works fairly well. , And TypeScript actually shipped that feature last year as like a flag. Like you can opt into it.

[00:13:53] Robbie Wagner: Hmm.

[00:13:54] Adam Argyle: gonna say that’s a killer feature to just partial check.

[00:13:57] Naman Goel: Yeah.

[00:13:58] Adam Argyle: and you, so you could do an [00:14:00] island of checking. You don’t have to check the world. Oh, that’s huge. That’s

[00:14:04] Adam Argyle: really annoying that TypeScript wants to know. Yeah, it does.

[00:14:06] Robbie Wagner: of like the whole inferred versus explicit. Like everyone has been team inferred types ‘cause they don’t wanna write more. But if you get a actual benefit out of doing it, that’s totally different answer. Possibly,

[00:14:20] Robbie Wagner: maybe this is hot again.

[00:14:22] Naman Goel: And, uh, and then you can have an LSP because like when you are in the file, you can infer the types and then it can just insert them for you. So it’s not like you have to type them out, you just have to have them in your code. So it’s not, it’s not the end of the world. What like, flow falls down on is like, oh, for the longest time it’s like auto complete was way worse.

[00:14:40] Naman Goel: So it like, wouldn’t auto complete like object

[00:14:42] Naman Goel: keys.

[00:14:43] Adam Argyle: tooling though. That’s not Flow’s fault. Right.

[00:14:45] Adam Argyle: That’s

[00:14:45] Naman Goel: Ah, uh, it’s, it’s kind of, it’s the tooling part of flow. You know, like there’s the type checking part where I think flow is always better. And then there’s everything else where flow has always been worse, like

[00:14:56] Naman Goel: generating type annotations. All of that’s been bad.

[00:14:59] Adam Argyle: [00:15:00] You wrote Styl X, which, , is a typed library as far

[00:15:04] Adam Argyle: as I know, and you’re interfacing with CSS, which is typed. How did CSS shape your understanding of types and how did you shape CSS to fit into the typed world of Styl X? Also, I don’t know if everybody knows what Styl X is, by the way, everybody

[00:15:18] Adam Argyle: Style X is the official, the only, as far as I know, the only official way to style React components that is compliant with the latest variant of React.

[00:15:29] Adam Argyle: And so it’ll work with server components, work with client components. It works across the entire spectrum of React. It’s the only one that does that. And it’s very near and dear to the interface that you probably loved from your previous React, uh, styling solution. So, , anyway, that’s, that’s Style X Naman is the creator.

[00:15:45] Adam Argyle: I introed him a little bit about that, but probably went over your head as I was talking in a funny voice. ,

[00:15:51] Adam Argyle: Anyway, so like how did, how did types. Because this is, you’re in a fully typed scenario. You’re

[00:15:56] Adam Argyle: typed in, in, the library, you’re typed with CSS, you’re typed in [00:16:00] TypeScript, you’re typed in your React components.

[00:16:02] Naman Goel: Right.

[00:16:02] Adam Argyle: shape your perspectives?

[00:16:05] Naman Goel: Yeah. So like, uh, I don’t know, like we, we chatted in Amsterdam. I don’t know if I mentioned this, but like, CSS was the first language of the web that I learned. So like,

[00:16:15] Robbie Wagner: language.

[00:16:16] Adam Argyle: It’s a programming language. You heard it here. He said language

[00:16:20] Naman Goel: definitely a language. I, I, I don’t get into those debates because I’m like prog, I’m like, programming language doesn’t make it superior.

[00:16:27] Adam Argyle: scripting.

[00:16:28] Adam Argyle: Language does though, apparently.

[00:16:31] Naman Goel: Yeah, like a markup language is,

[00:16:33] Naman Goel: made for something. It can be good, it can be better than a programming language sometimes, it’s kind of gone a back and forth. , So I didn’t start Stile X, but I like took over like maybe a couple of weeks.

[00:16:44] Naman Goel: , The first commits were by, Sebastian McKenzie, creator of Babel. , So he like had like a proof of concept that atomic styles are faster and that, , things can be typed , but we want to write objects. My elevator pitch would be style X is what if [00:17:00] tailwind, but you don’t have to learn a whole new syntax.

[00:17:02] Naman Goel: It’s just,

[00:17:02] Naman Goel: you

[00:17:03] Naman Goel: know,

[00:17:03] Naman Goel: the

[00:17:03] Naman Goel: normal thing.

[00:17:04] Adam Argyle: down with that?

[00:17:06] Robbie Wagner: I don’t know. I would have to see it, I think, and I would also have to use React, which I don’t.

[00:17:11] Naman Goel: You, you don’t have to use React to be honest. you can use it with anything where your markup and your JavaScript is in the same file.

[00:17:19] Robbie Wagner: Hmm. Okay.

[00:17:20] Naman Goel: So it works with solid, it works with the selt. it works with view with like a little bit more mess, to like set up. , And it works with as.

[00:17:29] Naman Goel: These are the ones I’ve tested. It works with

[00:17:31] Naman Goel: quick

[00:17:31] Naman Goel: js,

[00:17:32] Robbie Wagner: give it a try with Ember and let me know.

[00:17:36] Naman Goel: I, I have not tried Ember. It does work with Angular, but it’s not great, so I would not recommend it with Angular

[00:17:41] Robbie Wagner: It’s probably the same, like the same syntax is kind of the same across Ember and Angular, like the

[00:17:48] Naman Goel: Mm-hmm.

[00:17:49] Robbie Wagner: and classes and all of the things. , But Ember does have single file components now where you can do your markup and JavaScript in the same files, and maybe we could get it to work, but I don’t know.

[00:17:59] Naman Goel: [00:18:00] Angular. The problem was you had to like, define it and then bind it, and then use the bind, like it was like too many steps.

[00:18:05] Naman Goel: To like, define and use. And I think with the single file components, which I’ve seen some rumblings of it also coming to Angular, I don’t know if it’s part of Angular itself or just analog, which is their like

[00:18:16] Naman Goel: meta framework in one of those things that probably will be better.

[00:18:20] Naman Goel: But literally no one has ever asked for it. In the year and a half since dialect has been out, there’s been lots of people who want to use it with views. Like everything else other than Ember and Angular. Nobody seems to want it. Selt also, like nobody actually wants it. I just tried it and it, it just worked.

[00:18:36] Naman Goel: It was pretty straightforward.

[00:18:37] Adam Argyle: they’re using, yeah, the CSS modules outta the box. Why not do an atomic scenario? That’s, , it’s honestly

[00:18:43] Naman Goel: Mm-hmm.

[00:18:44] Adam Argyle: It’s a little bit more superior.

[00:18:45] Adam Argyle: Okay. So tell people a little about like, how it integrates. How do you define your styles, and then how are

[00:18:50] Adam Argyle: they applying to an element?

[00:18:51] Naman Goel: Styx has a bunch of functions that are all compiled. So there’s a style X create that, like lets you define some styles, but [00:19:00] conceptually speaking, you should just think of that as when you do that, it gets compiled away and turns into an object where it maps keys to class names, which are atomic.

[00:19:09] Naman Goel: And then you apply them with this function called X props. , Which basically takes a bunch of style objects, which are just class names and it merges them similar to like CN or whatever those class names, utilities. and it gives you back a class name prop and sometimes a style prop. I’ll come to that later.

[00:19:30] Naman Goel: and that’s conceptually all you have to think about, , in terms of like how it works, like at runtime, if you limit yourself to the same, constraints as tailwind, which is you define all your styles in the same file and you use them all in the same file, than it is as fast as tailwind because.

[00:19:48] Naman Goel: We will also compile away Styx or props and just put a string there. If we can figure out what string would be there at compile time, we’ll just put it there. And if you use some like conditions, so you’re like, this is my base styles and if it’s [00:20:00] active, I want my active styles, otherwise I don’t, which is their own like sets of, class names or whatever.

[00:20:05] Naman Goel: , We pre-compiled that down into, multiple strings, and then just like this, like bitwise operator business to like, choose from them. So it’s like super fast. just compare the conditions and pick the class name, but nothing else. in the past it used to use, uh, turny expressions to like, add strings together.

[00:20:25] Naman Goel: , But it would sometimes add extra spaces to the, class names. And then every time we would make a change there would be like, what do you call snapshot test breaking. So we don’t do that anymore. , So in that case, it’s as fast. , Then a lot of people with Tailwind use this, uh, function called Tailwind Merge, which lets you like just throw styles together and like merge them at runtime.

[00:20:45] Naman Goel: Tailwind merge is, three to four times bigger than the runtime of Styl X, in like kilobytes. And it is

[00:20:53] Adam Argyle: not be using bitwise.

[00:20:54] Naman Goel: It is, it is just crazy slow. Like, because Tailwind doesn’t want it to [00:21:00] exist, like the Tailwind team doesn’t like it.

[00:21:02] Robbie Wagner: What’s the benefit of it? I’ve never used it personally.

[00:21:05] Naman Goel: in terms of like developer experience, there’s nothing better than to be able to just like pass styles around as if it’s just data and like override whenever, whatever you want.

[00:21:15] Naman Goel: And Tailwind merge is like 80% is good. So it’s actually pretty decent in terms of like. The dev DevX, it’s just like bloated and slow. It’s like five x bigger and like maybe 10 x slower. And like Styl X props is fast, both because of how it’s implemented. It like uses like a tree of weak maps behind the scenes to like cache everything and all of that.

[00:21:39] Naman Goel: But it also, like Styx itself is designed for that. So like Styl X is not generating strings, it’s generating objects of strings. And so like when you have to merge them, it’s like way faster than like looking up a string and being like, is Grow a Flex Flexbox property? Like if you put grow and then later you put shrink, which one should win?

[00:21:58] Naman Goel: So like Tailwind Merge [00:22:00] has to have this like massive list of things of like all these exceptions where they don’t have a consistent prefix for every property. because it’s like optimized for like typing less, it’s not optimized for merging. and Style X is optimized for like reading and merging.

[00:22:13] Naman Goel: It’s not optimized for like typing less.

[00:22:16] Naman Goel: That’s,

[00:22:17] Robbie Wagner: All right, so I understand the concept, but I’m not understanding like a concrete example. Can you gimme an example of like when you would wanna merge two or like what, what gets you into this situation?

[00:22:28] Naman Goel: Let me give you a very, like, like an example that exists out there, which is every card on facebook.com has a few things that are like predefined. Like they all have like this border radius, and you can have one of like three border radio, I, depending on where you’re using it. Like, you can have a configuration for like shadow.

[00:22:47] Naman Goel: But then other than that, in different places, you want completely operatory styles. You You may want different background colors, you may want like different padding, different sizing, all of that. So.

[00:22:57] Robbie Wagner: Gotcha, Gotcha,

[00:22:58] Naman Goel: So you just have like some default [00:23:00] styles and then the user passes in the rest of the styles and you consistently get the last thing applied.

[00:23:06] Robbie Wagner: cool. I’m on the same page now. Sorry, I just wasn’t understanding

[00:23:09] Naman Goel: Yeah, I started working on STX for that. So I was on the component team, like the design system team, and I was not supposed to work on stx. It was supposed to be complete, and I was like making components and then I’m like, this is so annoying. I’m like, I have like this massive list of props for like all these like boos of like, do I want like primary or not?

[00:23:31] Naman Goel: Do I want this or not? It’s like, just like we would get these massive lists of like toggles to like up conditionally apply different like styles it would make the, like the API of components just like annoying and we were like recreating essentially like CSS in like react props. And then we were like, why couldn’t we just like pass in like styles that would be so much better than this mess.

[00:23:55] Naman Goel: And like, that’s when I started working on Style X. That was like the first thing. I’m like, I need [00:24:00] this. And that’s why it’s like type safe, because we’re like, Hey, like you are, you’re overriding styles for a, for a card. Don’t change the border radius. We don’t allow you to do that. You can change everything else but not border radius.

[00:24:10] Naman Goel: That’s predefined. Don’t worry about it. And like, everything like came from there for like two, three years. like s started, I don’t know if Tailwind existed then or not, but like no one knew about it. I started working on it in 2018. It was like internal for many years. I find it really funny because like, uh, the first, uh, YouTube video to cover like Styl X was Theo’s video because like he found like this like beta website I had somewhere ‘cause I was like working on, it wasn’t even open source yet.

[00:24:37] Naman Goel: And he just found the link somewhere and he made a video about it and he’s like, Facebook tried Tailwind, then they made this instead. I’m like, we never tried Tailwind. We didn’t even know about it.

[00:24:46] Adam Argyle: No, y’all tried vanilla extract and you’re like, we can do better from, uh, like, I don’t know if everyone can notice here, but Naman has a. very, uh, high attention to detail.

[00:24:58] Adam Argyle: And so when I was at Chrome and I’m [00:25:00] watching Styl X evolve, which also was considering how to integrate design systems that are full of custom properties, like open props.

[00:25:08] Adam Argyle: I was like, oh, a library is actually giving a crap about native CSS variables, which is why I like was paying attention to vanilla extract because it would, scope my custom properties and my key frames with, , robo vomit names that sort of helped them be pseudo private and stuff. And I’m watching as Styl X is evolving and I’m watching demon, taking attention to detail into making sure that the modern CSS, , authoring experience is not, crammed into Styl X.

[00:25:33] Adam Argyle: there is an attention to detail there across, it sounds like for about six years that you, , didn’t want this thing to age poorly.

[00:25:41] Adam Argyle: I’d account almost its entire success into you carrying the torch forward.

[00:25:45] Adam Argyle: What was motivating you there other than it sounds like you were dogfooding it and you’re like, it sucks for me, so it’s gonna suck for other people.

[00:25:51] Adam Argyle: Like, uh, how did you find some intrinsic like motivations there?

[00:25:54] Naman Goel: for the longest time it was just an internal thing . Just making improvements based on what people were complaining [00:26:00] about. There was lots of improvements that are very hard to even describe because they were just like in internal messes, like how does it fit into this like 15-year-old bundling situation that Facebook uses that is impossible to change at this point.

[00:26:14] Naman Goel: Written in PHP, like lots of that type of stuff, which I always struggled with. but basically, Tom Macino, who was still at Facebook till like COVID or something, he told me Open source it. And I was like, I’ll do it. And then I just like was like, oh, is j if only I’ll do this one more feature. And I just kept not not shipping it for years.

[00:26:35] Naman Goel: So that’s like totally on me. And uh, I finally like, felt like it had everything. Once I added the teaming APIs, which the teaming APIs themselves took like, I wanna say six months of

[00:26:46] Naman Goel: iteration.

[00:26:47] Adam Argyle: hooked me hard. Those were really well done. I was really impressed with those.

[00:26:51] Naman Goel: that’s my like,

[00:26:52] Naman Goel: proudest part of Style X is the teaming APIs because we had the first version like, I was like, Hey, can we do this? And they’re like, no, the [00:27:00] build will take too long. So there was like all these constraints because at the same time we were designing those, there was like, , this like work internally, to like make a teamable component system.

[00:27:10] Naman Goel: I don’t know if it ever got done, but, basically we wanted all these different design systems to all be one design system, but just different themes. and the designers had like this really, insane ideas which make sense in Figma, but like in hindsight did make sense, on the component level because there were just like thousands and thousands of CSS variables.

[00:27:30] Naman Goel: Like that’s what they wanted. I didn’t know that if you put 10,000 CSS variables, you can literally crash your browser back then.

[00:27:36] Naman Goel: So.

[00:27:36] Adam Argyle: you can. Material designed it. At first, uh, they literally crashed the browser and then they crashed Safari, and then they crashed fire. It’s like every browser was like pretty

[00:27:47] Naman Goel: so I, I designed this whole system. I’m like, okay,

[00:27:50] Naman Goel: it needs to scale to 10,000 variables and it needs to be so cashable that, only the files that you change have to be recompiled. And I was like, how the [00:28:00] hell will I do that? And I was like, just spending weeks after weeks thinking about ideas and finally came up with this API and I’m like super happy with it.

[00:28:09] Naman Goel: Uh, like, because like, especially with my react brain, it makes a lot of sense because it just feels like, , react context to me. like create context, provider and it’s like define was create theme. Like don’t know if those are the best names, but,

[00:28:21] Adam Argyle: well they were good names. , But like, yeah, theme UI was like the more popular one before you, you were implementing this and I hated that one. I was like, whoa, this is a lot of hoops. This is definitely developer driven, , abstraction into I’m not feeling effective anymore.

[00:28:36] Adam Argyle: and I feel like Styl X did not gimme that sense. So you did really well, sort of like taking the torch and carrying it on.

[00:28:42] Naman Goel: The thing that people wanted the most, just to like give a shout out is, , stitches. Do you ever play around with stitches?

[00:28:48] Adam Argyle: Yeah. Stitches in vanilla extract were the two things that, right. Those came together, right?

[00:28:54] Adam Argyle: Or no?

[00:28:54] Naman Goel: I

[00:28:56] Naman Goel: was maybe a

[00:28:56] Adam Argyle: in vanilla extract. Stitches. The same person, though. It’s the [00:29:00] same guy, right?

[00:29:01] Naman Goel: Is it,

[00:29:01] Adam Argyle: swear it’s the same dude that did stitches, did, uh,

[00:29:05] Adam Argyle: vanilla extract and,

[00:29:06] Naman Goel: , I know that Vanilla Extract is the same person who did CSS modules. I don’t know about stitches.

[00:29:12] Adam Argyle: okay. Yeah. Lemme look it up. Stitches, uh, there. I swear those two work together though. Mark worked with the other dude that made stitches. Like this is a very, like the, the ecosystem of stitches and vanilla

[00:29:21] Naman Goel: Mm-hmm.

[00:29:23] Adam Argyle: scenario.

[00:29:24] Naman Goel: I, I think stitches was like deprecated and they were like, go use vanilla extract. At least like, I don’t know if it’s the same person, but like they definitely were like, go use vanilla extract. And

[00:29:33] Naman Goel: , so Stitches had this like, very interesting themeing system, which people love using and I think it’s like a really good Dev X actually even, even today.

[00:29:41] Naman Goel: And if I could implement that in for Style X, I would, but it just like completely breaks types, like it completely ruins the type safety of variables in Stile X. so I can’t because it, it basically lets you arbitrarily nest variables as many times as you want. So you can like, [00:30:00] have namespace of namespace of namespace.

[00:30:02] Naman Goel: And there’s like two problems with that. Like one is like pretty hard to like , make that type safe. but two is now your variables can’t have different values based on media queries, which is something I wanted, which. That’s something nobody else does. I’m like all variable. Like in CSS you can define a variable and then like say if like I’m prefers doc mode, then it’s a different value.

[00:30:23] Naman Goel: Why doesn’t anything else let you do that? So like when I design like new APIs for style X, I always start with like CSS like my, my goal is I want the capabilities, but not the, not the learning curve. So

[00:30:38] Adam Argyle: and not the global context, maybe

[00:30:39] Adam Argyle: even.

[00:30:39] Naman Goel: yeah, so like I, I intentionally like don’t want you to think about selectors ever.

[00:30:45] Naman Goel: that’s like one thing. There’s another thing, this one, I, I don’t know what you think about it, but like, I have like a personal aversion to any like, values that you reference by strings. think about like react query, like you have query keys, which are [00:31:00] just strings.

[00:31:00] Naman Goel: I am like very averse to that because I’m like, oh, I’m just like arbitrarily typing a string and that’s not type safe. instead, I, go for things which are like, you define them once and then you have to import them everywhere and use them. So those are like the two things that like I’m like always like biased towards, I’m like, I don’t want strings, like arbitrary strings that mean things.

[00:31:19] Naman Goel: And I don’t want, , you to like have to think about selectors and stuff. It should just feel like data. But I want all the capabilities. And the hardest feature to implement in Style X was view transitions. Because view transitions one did not have view transition class.

[00:31:38] Adam Argyle: At the time, yeah.

[00:31:39] Naman Goel: and that was just impossible.

[00:31:41] Naman Goel: Like, it’s like, oh, You literally can’t share it. Like it’s uns shareable CSS and that was the first time I like went to the CSS wg GitHub and like commented on things. I’m like, please do this. What are you doing?

[00:31:57] CTA: This just in! [00:32:00] Whiskey.fund is now open for all your merch needs. That’s right, Robbie. We’re hearing reports of hats, sweaters, and T-shirts, as well as a link to join our Discord server. What’s a Discord server? Just read the prompter, man. Hit subscribe. Leave us a review on your favorite podcast app and tell your friends about our broadcast. It really does help us reach more people and keeps the show growing. All right, back to your regularly scheduled programming.

[00:32:30] Naman Goel: Anyway, I don’t know what I was answering. Like, what was your que

[00:32:33] Adam Argyle: Ah, I just wanted to hear more about Style x. I, I love that we got into view transitions. I was waiting for Robbie to be like, there’s too much, , tech here, like web, where’s the whatnot? But at the same time, you started talking about view transitions and I was like, Robbie and I are in view transitions a little bit of a hell right now, where we’re like, how do we make this really good?

[00:32:52] Adam Argyle: We’ve made it okay, but we would like it to be better.

[00:32:56] Adam Argyle: Yeah. Robbie, tell ‘em about like what we’re pairing on and how we’re trying to fight future transitions [00:33:00] right now.

[00:33:00] Robbie Wagner: Yeah. So we’re using Astro, we’re building star pod, star pod.dev if you wanna check it out Oh

[00:33:07] Adam Argyle: if you’ve got a podcast. It looks good.

[00:33:10] Robbie Wagner: yeah, sorry, my voice is so, uh, I can feel my nose being stuffed up right now. it has this built-in client router thing on Astro where like if you do nothing, it kind of like cross fades the pages and like, looks kind of nice.

[00:33:21] Robbie Wagner: , But Adam threw in a nice, like the title of the episode from the episode list will go like zoom in and out when you like, go to the episode and stuff. Or like, I guess it did both with client router, but if you don’t have client router, it only does one way.

[00:33:36] Robbie Wagner: I’m not, I’m not even remembering like the full scope because like subtle things work with client router or don’t.

[00:33:42] Robbie Wagner: And the main reason we need client router is because we wanna play an episode and then like move around the site and have the episode still play. It’s like for anyone that doesn’t know Astro is like a static site generator. So it’s like multi-page app. It’s not a spa. So it’s like going to have it’ll stop every [00:34:00] time you change pages unless you have something to handle that.

[00:34:03] Robbie Wagner: that’s our big dilemma right now.

[00:34:05] Adam Argyle: Yeah, we’re stuck between like, hey, imagine we’re Spotify

[00:34:09] Adam Argyle: and we want to ship a multi-page app because it’s better for SEO and it’s easier for users to just like, go to a playlist and then hit play, you know? So they’re immediately taken to a detail. They get service side rendered, but in this case it’s static.

[00:34:24] Adam Argyle: the client router is a way, an astro to, it’s kind of like a hot wire. What’s the, what’s the rails way that does this, where it intercepts your request and only partially renders

[00:34:34] Adam Argyle: the changes?

[00:34:34] Robbie Wagner: Francis,

[00:34:36] Adam Argyle: Paging

[00:34:36] Adam Argyle: Aaron Francis,

[00:34:37] Robbie Wagner: or no? sorry. That’s Livewire and that’s on Not Rails. That’s PHP,

[00:34:41] Robbie Wagner: but

[00:34:42] Adam Argyle: uh, it’s hot something. Uh, anyway, it’s like RA

[00:34:46] Robbie Wagner: Hotwire and Livewire. Probably, I think, sorry to everyone that I offended by getting all those wrong.

[00:34:52] Adam Argyle: no worries. , It’s similar to that where it’s like Astro’s like, Hey, we see we’re, hey, we’re, we’re ready to render you Server side generated. [00:35:00] However, , the destination page here can be client side partial rendered, if you like. We’ll look at the entire HTML page that comes back from the server. Take just a little tiny chunk and then render that into the little spot and we’ll add some view transitions in there for you because we’re astro and we’re tied, , and we’ll auto name it and shit.

[00:35:17] Adam Argyle: So it’s kinda like Naman is talking about like we’re naming things and coming up with unique names. becomes really difficult or unique. You transition class names, gets even hairier anyway, so it’s like we’re, we’re stuck between like if we use the client router in Astro, which makes us more like a single page application, a spa as I call them, dammit, it’s a spa.

[00:35:35] Adam Argyle: That should be a spicy question. Is it a spa or an SPA?

[00:35:39] Adam Argyle: You’re like, well, it’s a spa. I like spa. That’s good. You can’t say Empa though, unless you wanna sound like a, what’s the band that did like

[00:35:48] Adam Argyle: Shadow Hanson?

[00:35:51] Adam Argyle: The, the funny part about that question was whoever answers fastest is the loser. So I guess that’s

[00:35:57] Robbie Wagner: Hey, I used to love Hanson man. Me [00:36:00] and my best friend in kindergarten listen to Hanson on the reg.

[00:36:04] Adam Argyle: Hanson detour. I think Damon has something to say about Hanson too.

[00:36:09] Naman Goel: I’m on team SPA I go outta my way to not start saying words that would mean something else to people who are not devs and spa already

[00:36:18] Naman Goel: means something.

[00:36:20] Robbie Wagner: Okay.

[00:36:22] Adam Argyle: nice.

[00:36:22] Adam Argyle: So you didn’t say

[00:36:23] Naman Goel: I heard today. Wait,

[00:36:24] Adam Argyle: or pong. Yeah,

[00:36:26] Naman Goel: wait, what? I haven’t heard those ones before. No. So today I heard a new one, which is umm, like uming, like out of memory errors. And I was like, wait, people say umm for that. I didn’t, I, this was the first time I heard that today.

[00:36:41] Adam Argyle: No, that’s like saying Earl, you’re like, no, that’s just the, the hick that lives down the street. That’s not a URL.

[00:36:47] Adam Argyle: That’s, uh.

[00:36:48] Naman Goel: Yeah, like the one, the one abbreviation that I have definitely failed on is json. I, I pronounce it like more json rather than Jason, because like people will hear Jason and be like, who? What?[00:37:00]

[00:37:00] Adam Argyle: Yeah. It’s not Jason. It’s

[00:37:01] Adam Argyle: JSO. Yeah, I agree. Hey, these should, these should be, uh, part of the, uh, the spicy questions.

[00:37:07] Robbie Wagner: Yeah. Js O or Jason?

[00:37:10] Adam Argyle: Is it json or json? Yeah.

[00:37:12] Naman Goel: oh,

[00:37:12] Naman Goel: oh,

[00:37:13] Adam Argyle: gif one is

[00:37:14] Adam Argyle: like really

[00:37:14] Naman Goel: yeah. yeah. I, I’m team Jeff, by the way. I, I don’t know if you

[00:37:18] Adam Argyle: team Jif. Oh, you

[00:37:18] Adam Argyle: say Jif? I admire. So this is like one of those weird ones where I’m like, I admire you for saying gif, but that’s fucking peanut butter.

[00:37:25] Adam Argyle: So it’s

[00:37:27] Robbie Wagner: It can be peanut butter and a, a picture format.

[00:37:31] Naman Goel: It’s the peanut butter is named after the picture format. They wanted to get in on the hype.

[00:37:39] Robbie Wagner: Yeah. So my argument for this was like, Jiffy or you’ll, you would probably say Giffy

[00:37:46] Adam Argyle: Well,

[00:37:46] Robbie Wagner: is like the service to like, no, with the, like the service to get giffs, like in Slack and throw a giff in there or whatever, like, you know what I’m talking about.

[00:37:55] Adam Argyle: Yeah,

[00:37:56] Robbie Wagner: so I would, I thought it was supposed to be Jiffy and because [00:38:00] it’s fast.

[00:38:01] Robbie Wagner: To grab one and like the, it all goes together. It’s all gif I don’t know. I don’t know if, I think they have taken a stance that it is giy, but

[00:38:09] Robbie Wagner: I’m like,

[00:38:09] Robbie Wagner: why?

[00:38:10] Adam Argyle: the creator said it’s GF and

[00:38:12] Adam Argyle: that like made everybody

[00:38:13] Robbie Wagner: I don’t know.

[00:38:14] Adam Argyle: I

[00:38:15] Adam Argyle: think that’s officially,

[00:38:16] Naman Goel: was memeing though.

[00:38:17] Robbie Wagner: Okay.

[00:38:18] Adam Argyle: Was it? Wait to create a tweetstorm?

[00:38:22] Naman Goel: He, he came, he, he ca like, I’ve seen the, have you seen the video? It’s like hilarious.

[00:38:26] Adam Argyle: No.

[00:38:27] Naman Goel: like you remember the Apple slide where they like dropped this massive. it was like, as like, as big as their entire screen. It just said no. And so like, he came, he came out and he’s like, it’s pronounced JIF, not GIF.

[00:38:43] Naman Goel: And it’s like, it’s got like epic music playing and he’s like, on stage and it’s got this big screen behind him and he just has that and he does that and he leaves and he doesn’t say anything else.

[00:38:56] Naman Goel: So, uh, uh, yeah, that, that happened much later. I don’t know why I [00:39:00] st like, everybody used to say Jif, like I’ve been saying Jif since like high school or middle school. I don’t know.

[00:39:06] Adam Argyle: Everybody’s been saying gif, not gif.

[00:39:08] Adam Argyle: No. Since I

[00:39:09] Adam Argyle: downloaded my first gif, it’s

[00:39:11] Naman Goel: Yeah. I, I grew up in India. We did not have the JIF peanut butter. in fact, I didn’t know peanut butter was a thing that time.

[00:39:19] Naman Goel: ‘cause I was like, that’s, that’s strange. , And I don’t

[00:39:22] Adam Argyle: We have peanut sauce, right? You have peanut sauce, not peanut butter. You’re like, why would you make a butter out of this delicious sauce? I

[00:39:28] Adam Argyle: don’t.

[00:39:28] Naman Goel: No, I just eat raw peanuts, like, like roasted peanuts. Mm-hmm.

[00:39:32] Adam Argyle: Too

[00:39:33] Naman Goel: Yeah.

[00:39:34] Naman Goel: Mm-hmm. yeah, so I was like, words like gin or like j like they have the JSON with the

[00:39:40] Naman Goel: gi, and then, so it just

[00:39:42] Robbie Wagner: Yeah, we should start calling it again.

[00:39:45] Naman Goel: And then, and

[00:39:46] Adam Argyle: It’s skin. Gotta wear your GH while you drink some skin.

[00:39:51] Naman Goel: I, I have gone deep into this. It, it, it basically comes down to like word roots. So like, , Latin based words. GI is always G, [00:40:00] but Germanic words is gi, like, so there’s gin, but there’s also gift. And so you can take whatever you pick because it’s not a real word, it’s an abbreviation.

[00:40:09] Adam Argyle: Oh God, that’s so funny. This all branched off of MPA versus SPA. Some people say spa, some people say SPA, they

[00:40:16] Robbie Wagner: No one says um, PA

[00:40:17] Robbie Wagner: though. I

[00:40:18] Robbie Wagner: don’t

[00:40:18] Adam Argyle: Uh, no one says, um, pa. Yeah, that’s a, that Unless Hanson, unless Hanson was making a website and they’re like, we specifically used Astro to make a, um, pa

[00:40:28] Robbie Wagner: Yeah. Fred. Fred. Reach out to Hanson and get them to make you a commercial about MP.

[00:40:36] Naman Goel: I, so wait, we’re making the site. It’s got view transitions, it’s got the, we have to, we’re choosing to go a client side router that intercepts and does partial rendering, just so that the audio can continue play. It’s the same reason Spotify, if anyone remembers Jason Miller’s, uh, article

[00:40:50] Adam Argyle: about, um, JSON Miller.

[00:40:53] Adam Argyle: Json Miller makes him sound,

[00:40:58] Robbie Wagner: Like jsan? Derulo.[00:41:00]

[00:41:01] Adam Argyle: makes him sound fancy. Like, I’m in Japan. It’s like json He’s uh, wait, but wait, you would say JSON son. JSON son. Okay. That’s funny to me. Probably no one else

[00:41:10] Robbie Wagner: Okay. Sorry. You could go back to what you were saying.

[00:41:12] Adam Argyle: Jason wrote a article about like, oh, it had a really catchy name. We’ll put it in the show notes, but it’s like, um. when to use an SPA.

[00:41:20] Adam Argyle: When to use an MPA. Here’s five concrete scenarios where you have to use a single page application. Here’s a concrete scenario where you should never use a single page application, and he’s, he outlines them in there. , And one of them is if you’re an audio player that needs to continue playing audio or a video player that needs to continue playing video during page navigation, during, , router changes, then you need a single page application.

[00:41:43] Adam Argyle: And so Star Pod, this podcast player is playing audio. and as you change navigations and you float around the site or you fart around the site as I wanted to say, but I edited myself for some reason. Anyway, you fart around the site. you quack like a duck. Like my wife, she farts and quacks like a duck.

[00:41:58] Adam Argyle: That’s just a joke for her to listen to [00:42:00] later and think is funny. Anyway, we want the audio to be continuous, but Robbie’s today, he’s like, we can have our cake and eat it too, man. We can go single page applica or we can go. Multi-page application. If they change the page while audio is playing, we’ll just keep track of where they were and resume.

[00:42:18] Adam Argyle: ‘cause it’s gonna be like near instant navigation. And if we nearly instantly resume them where they were, what’s the loss? Because the gain for us is a lot in terms of SEO, we have some performance gains.

[00:42:30] Adam Argyle: There’s like page, the scripts required for the client side router, it’s just noise. And so Robbie and I are working on the site as like a, how do we reduce noise?

[00:42:39] Adam Argyle: Client router is noise but dammit, we need that. ,

[00:42:42] Adam Argyle: anyway, no matter. What do you think about like trying to like navigate this like difficult scenario? What would you do?

[00:42:47] Naman Goel: you wanna hear my spicy take here?

[00:42:51] Robbie Wagner: Use tailwind.

[00:42:52] Naman Goel: Uh, I, I, I don’t mind tailwind, to be honest. It’s, it’s, it’s okay. , But. My spicy take is, [00:43:00] I, think everything is fine as a single-page application. I think client routing is, never a

[00:43:05] Naman Goel: problem. like I feel like there are bad implementations, there are bad frameworks that maybe add too much complexity and then you’re like, Hey, this is too annoying and I’ll just do multi-page application.

[00:43:17] Naman Goel: But I don’t think the, the concept of client-side routing is the problem. It’s, it’s just like bad implementations if

[00:43:23] Adam Argyle: It’s too reasonable to

[00:43:24] Adam Argyle: be a spicy take, you know?

[00:43:25] Robbie Wagner: No, I, I think that’s, I agree with that, I think, but it’s like, it’s hard to convince someone, either way, I think. But like, what we want to do is try to like, use all, just like primitives, like use the web as the platform,

[00:43:42] Naman Goel: Hmm.

[00:43:43] Robbie Wagner: add like extra stuff. So it’s like, it’s more of an exercise in like, what can we do here?

[00:43:49] Robbie Wagner: Not what should we do? So we’re like trying to like show how would you do it if you weren’t using a spa?

[00:43:56] Naman Goel: So like, I, I think like the spa and the um, [00:44:00] pa boundary is getting kind of blurry. have you seen this library called like morph dom?

[00:44:06] Adam Argyle: Yes,

[00:44:06] Adam Argyle: but that’s, that’s, that’s like a competitor to h and others, right? Like hyper, hyper render. It’s,

[00:44:14] Adam Argyle: oh, morphed on.

[00:44:14] Naman Goel: No. , So morph dom is a dom differ, not a virtual dom differ. It’s a dom differ. So like, I feel like you can have an MPA in pretty much always, but like when you click on a link, you can run morph dom to fetch the next page and then patch your existing page with the new HTML. And that kind of gives you the benefits of an MPA where you can have a bunch of static HTML files, but you can like keep the state of like audio elements or like video elements or whatever like that because it’ll just be like, in this place, in my dom, it’s the same exact element.

[00:44:53] Naman Goel: it just doesn’t replace it, it just leaves it as is. ‘cause it’s diffing

[00:44:57] Naman Goel: it. And so

[00:44:59] Robbie Wagner: [00:45:00] Sounds kind of like

[00:45:00] Naman Goel: that,

[00:45:01] Adam Argyle: Or hot wire, which I just linked. Yeah. Which are

[00:45:04] Naman Goel: I, I, I would say it’s, it’s closer to Hotwire than HTMX

[00:45:08] Naman Goel: because HTMX is all about partials. And I think morph on is more about , this is the page I’m on, this is the next page, and I’ll, I’ll change what needs to be changed.

[00:45:18] Naman Goel: Because like, usually if you do a full page navigation, you throw away the last page and you get a new page. But like this is, here’s the old page, here’s the new page, what changed? Let me update that and. I think that’s like a lightweight, like SPA mode on top of MPA tooling, which I think would work really well for a lot of these things.

[00:45:39] Naman Goel: I always talk about these things, like, and, and like, I think Adam, you’re like the most close to this, that I know. , Out of anyone who’s like worked on standards and stuff, you’ve written like specifications, but like I, I like constantly have like, why can’t we do something like this on the web?

[00:45:53] Naman Goel: And I like want to like tell everyone about it, they’re like, write a proposal. And I’m like, fine, here’s a blog post. They’re like, but that’s not a [00:46:00] specification. I’m like, I don’t know how to write a specification. That’s too, too weird.

[00:46:03] Adam Argyle: That’s fine. The blog post, the blog post is a stellar starter.

[00:46:07] Adam Argyle: Writing a specification is, A chore. it’s not even really a moment to like really go conceptualize something.

[00:46:15] Adam Argyle: It’s a moment to harden something. So your blog post is a perfect scenario where you’re like, here’s what I want and here’s what the problem is.

[00:46:23] Adam Argyle: That’s enough to go, , seed the people that do write the specs that wanna harden things. So think about like scenarios where some people are good at ideas and some people are good at abstractions and making like really tight, pure functions.

[00:46:35] Adam Argyle: That’s the harmony that you’re looking for here.

[00:46:37] Adam Argyle: You wanna propose and articulate a need and they’re gonna go write the typed function that fits in slots right into the huge system. honestly, it’s kinda like designer and developer relationships where you’re kind of being a spec designer

[00:46:50] Adam Argyle: and you’re awaiting a spec

[00:46:52] Adam Argyle: developer. Ooh, that was a nice little pop.

[00:46:54] Naman Goel: Yeah,

[00:46:55] Adam Argyle: I wanna make mine pop. That was good. Hey, that’s good.

[00:46:59] Naman Goel: mine [00:47:00] wasn’t good.

[00:47:00] Adam Argyle: Wait, hold on.

[00:47:01] Robbie Wagner: Everyone doing it now?

[00:47:03] Naman Goel: Nah, I can’t hear it at all.

[00:47:05] Adam Argyle: I am like, I think I could hear that sound for a long time. That’s a very pleasing sound.

[00:47:11] Robbie Wagner: Yeah. It’s much better than the, uh, twist off cap.

[00:47:16] Adam Argyle: Yeah,

[00:47:17] Naman Goel: This is how, you know, it’s fancy.

[00:47:18] Naman Goel: Yeah.

[00:47:19] Naman Goel: I mean, like the closest have gotten to like, spec work is, uh, I like attend open UI meetings sometimes. think like I can brag that there’s like two things I’ve like contributed to like significantly and one of them is shipped in Chrome.

[00:47:33] Naman Goel: So the first one is interest target, I wanna

[00:47:36] Naman Goel: say.

[00:47:36] Adam Argyle: Holy shit. That one’s huge. Yeah.

[00:47:38] Naman Goel: So it was already being worked on, uh, before I like ever like did anything. , Like I met Yuna last year at React Miami I was working on hover cards for Facebook back then, and she like, oh, we’re working on interest Target, which is similar.

[00:47:54] Naman Goel: And then I came in and then I attended many meetings and I’m like, this is how it should work. I think the specification is [00:48:00] like about 80 to 90% exactly what I did. So I, I feel pretty good about that one.

[00:48:08] Naman Goel: And

[00:48:08] Naman Goel: then there’s a,

[00:48:09] Robbie Wagner: specs?

[00:48:10] Naman Goel: I didn’t write, I, I, I did not write a single word of that specification.

[00:48:13] Adam Argyle: you’re the muse. You’re Yoko Ono. Naman. Okay,

[00:48:17] Adam Argyle: here you

[00:48:17] Adam Argyle: go. Here’s the title for the episode. Naman Goel is Yoko Ono for standards. I know everyone hates Yoko. I’m

[00:48:23] Adam Argyle: fucking with you. I’m just like,

[00:48:26] Naman Goel: Oh, I, I, I, I don’t hate her. I just, I’m, I’m like ambivalent. I don’t know what, what her deal is, but,

[00:48:34] Adam Argyle: yes, ambivalently don’t want to be her. Yep.

[00:48:36] Naman Goel: uh, probably not. Yeah. Uh, I’ll be John Lenon though. That’s fine. No, but I didn’t write it so it can’t be John Lenon. Sorry.

[00:48:44] Naman Goel: , And the other one, uh, which is still being like worked on, is called Link Delegation. I don’t

[00:48:49] Adam Argyle: Is this where you want a card to be clickable,

[00:48:51] Naman Goel: yes.

[00:48:52] Adam Argyle: the oh my goodness. This one’s okay. I’m about to go to tpac. Shopify wants this. I want this. My website has [00:49:00] it all over the place. It’s an annoying piece of JavaScript that I want to rip out. I will let you, I will

[00:49:05] Naman Goel: I,

[00:49:06] Adam Argyle: present

[00:49:06] Adam Argyle: this idea.

[00:49:07] Adam Argyle: This is a

[00:49:07] Naman Goel: of, I am a co-author of that one. I

[00:49:11] Naman Goel: did

[00:49:11] Adam Argyle: good, dude. Tell everyone what this is.

[00:49:13] Naman Goel: You want a whole card to be clickable, but the card has other buttons or links inside of it. So you have nested, clickable things, uh, which means that it’s not valid h amount and it’s not accessible and everybody hates you.

[00:49:26] Naman Goel: Uh, but you can make it work if you want, but like everyone will hate you and it’s not accessible. And so there are all these hacks that people do, which. Are fine if you can like achieve them, but , they’re not flexible enough that you can use them wherever. So like the best hack I’ve seen is that you make the outermost thing, like the card itself, position relative, and then everything else inside of it is positioned static.

[00:49:50] Naman Goel: And then your primary link, , so say like there’s a title inside of the card. That title has uh, like a child inside of it, which is position [00:50:00] absolute of just like 0, 0, 0, 0. And so it expands to fill the card. and so no matter where you’re clicking on the card, you’re clicking on the link actually like the title part.

[00:50:10] Naman Goel: And that’s like one solution that has been around for like. 10, 15 years. I think I saw an article on CSS tricks showing off this trick. , So this is a really old trick. It works, but like what if your card needs like position relative between the card and the actual thing. Now you’re like screwed. so nothing else, like scales properly.

[00:50:31] Naman Goel: So like when I was working on components, the first version of our like link component, I actually just allowed you to like nest links. , I like discovered that if you put a anchor tag instead of an anchor tag, like a browser will literally break. But you can wrap

[00:50:46] Naman Goel: the

[00:50:46] Naman Goel: nested anchor tag. Yeah, you can put a button inside of, actually we weren’t using buttons then We was using divs for IE reasons, but.

[00:50:56] Naman Goel: I think you can put buttons inside of buttons, but you cannot put links inside of [00:51:00] links. but I found out that you can wrap the nested link inside an object tag and then you can make it all work. And I was very proud of myself and I made it all work. Even if you nested links and stuff. And then like, two months later, the accessibility team reaches out to me and like, what have you done?

[00:51:13] Naman Goel: Nothing is accessible. It’s horrible.

[00:51:15] Robbie Wagner: Yeah. There’s a

[00:51:16] Robbie Wagner: lint rule in ember’s, linting that’s like never do this.

[00:51:22] Naman Goel: Yeah. It, it, like the browser literally won’t let you do, like, it will literally break, it will close the outer link before the inner link starts. It breaks in really horrible ways, , unless you put that weird object tag in the middle. And then like, uh, lots of months of like trying different things.

[00:51:39] Naman Goel: I tried like Z index tricks. I tried the absolute position tricks and then. The final solution, , which is the spec, like the proposal on Open UI now is, , there is no nested links. So you have a card, which is just a div, and then you just have a bunch of links inside of it. And then on the diviv you’re like, Hey, if somebody clicks on you just [00:52:00] forward your click to that one.

[00:52:01] Naman Goel: So there’s a primary link on the container, and that’s all it does. And that is completely accessible because for , screen reader, users, the card itself is just a diviv. Like they don’t have to think about it. It’s just a, a way to be able to click without, Being able to know where you’re clicking. You can just like click wherever and it’ll just forward your click to the correct place. But that’s all it does. And that’s pretty much the specification. It’s pretty simple. That’s why I was willing to write it. ‘cause it’s so short. There’s nothing to do.

[00:52:34] Robbie Wagner: Yeah, very cool though. Definitely solves a problem that I feel like a lot of people have had,

[00:52:39] Robbie Wagner: but I do want to, we’re 58 minutes in now

[00:52:43] Robbie Wagner: and the title of this episode is Rust is Overrated and we haven’t

[00:52:48] Robbie Wagner: talked about. Russ, how do you feel about Russ?

[00:52:51] Naman Goel: okay, so I, I, I wrote a blog post , I don’t know, many years ago now where I said, , swift is a more convenient trust. , But I don’t hate [00:53:00] trust. Like, I think rust is fine. I think it’s pretty good for certain things, there’s like this like spectrum of languages where there’s like.

[00:53:06] Naman Goel: Super high level, convenient languages like JavaScript and Python, and then there’s like assembly on the other end , and nobody writes assembly, but lots of people will write CC plus plus and now they’re starting to write Rust, , it’s pretty close to like the C plus plus and C end of things.

[00:53:22] Naman Goel: There’s like this big gap in the middle and it’s kind of weird that whenever we want something faster than JavaScript, we jump all the way to the other extreme. and there’s like examples of why you shouldn’t do that, which is go like ES Build is go and like TypeScript is now being re rewritten and go, so like Go is a pretty good language for all of this stuff as well.

[00:53:43] Naman Goel: and I think Go is like fine and good and like useful for lots of things. There’s also OCaml coming back to Flow, which was always written in OCaml, which is why it was like faster, but. There’s like a problem with both OCaml and Go, which is that they’re both [00:54:00] garbage collected languages. So there are certain scenarios where you are like, I don’t want garbage collection, I want like, predictable performance. I don’t, I don’t know.

[00:54:08] Naman Goel: And

[00:54:08] Naman Goel: also

[00:54:09] Naman Goel: like smaller boundaries, uh,

[00:54:12] Adam Argyle: It is control. It’s like you want control or, or you’re like, look, I, I, it’s control and I will orchestrate. You’re just like, I’m an orchestrator. I don’t want automated things. I would like to tell you when to release and when to grab.

[00:54:25] Naman Goel: I don’t want to tell you, but I also don’t want that overhead. So like, the example would be technically tooling’s not a great example for this. Like, uh, bundlers can have GC pauses and it’s probably fine. But like, uh, there are scenarios like when you’re like building UIs and stuff, this is like, one of the reasons Apple is like super anti garbage collection all the time is if you’re scrolling, and it GC pauses while it’s scrolling and you see a hiccup that’s like the worst thing ever.

[00:54:53] Naman Goel: So

[00:54:53] Adam Argyle: os just like defer GC though. You’re like, geez, it’s not a good time. You know? Like, don’t do it now.

[00:54:59] Naman Goel: [00:55:00] Sure. Like there are, there are solutions like you can like work around it. There are also fancy GCs, I don’t know, there’s like tracing GC and other, I don’t know. But there are kinds of GC and some are better than others. but like, basically like if you have like virtualized lists and you’re doing lots of work while you’re scrolling, you can’t just be like, I’m just not gonna collect any garbage till I’m done scrolling.

[00:55:20] Naman Goel: Because like, you might do like 1000 cells before you ever stop scrolling. And so that’s like one of the reasons, like Apple says at least why they don’t want gc. And so there are like valid reasons outside of like just, you know, iOS for not wanting gc and that’s why people go to Rust because like go is like really good and really fast.

[00:55:43] Naman Goel: , But one, it’s like intentionally a simple kind of dumb language, which some people love and some people hate. But two, it’s definitely gc. , And so if you don’t want that, like the next best thing for most people is rust. But like rust is like not all the way to C, [00:56:00] B, C and c plus plus where you’re like manually allocating and locating everywhere.

[00:56:04] Naman Goel: But you still have to really, really think about memory all the time

[00:56:08] Adam Argyle: So it’s in your face, but you don’t actually have to touch it.

[00:56:11] Naman Goel: you have to touch it, but like you can’t make a mistake. it’ll make you do the right thing, but you have to do it. and, And then in, in rust there’s this like wrapper type called rc, there’s also a RC, which stands for reference counting, which is literally a counter. So like every time you like make something, you just like bump its number, like, hey, three things are looking at it, four things are looking at it.

[00:56:33] Naman Goel: And then when they stop looking at it, they’re like, okay, back down to three, back down to two. And then whenever it goes down to zero, it just cleans itself up so rust is manual by default, but you can opt into reference counting and then it’s very explicit when you’re doing reference counting.

[00:56:48] Naman Goel: When you have to, like, I don’t remember the, the function calls, but you have to like explicitly call like bump, like I’m using it now, like, or it’s like called clone or

[00:56:57] Adam Argyle: It is like a

[00:56:57] Adam Argyle: dirty, dirty, check and, um, [00:57:00] anyway, whatever. Yes.

[00:57:01] Naman Goel: And I think. Like 99% of things that we’re doing with rust are fine with that.

[00:57:05] Naman Goel: Like you do have slightly more overhead because you’re adding and subtracting numbers all over the place. But adding and subtracting numbers are actually pretty fast, so it’s fine. And so SWIFT is just like RC by default, but you can opt into the rust, not RC if you want. And I think like for most people, that’s the better default.

[00:57:24] Naman Goel: Like you don’t want to constantly think about memory all the time. You would rather have like the GC type of developer experience and then when you need like manual control, you can just like do some annoying things and it’ll works out. And that’s, that’s what SWIFT is for the most part. That was like my whole take is like,

[00:57:42] Naman Goel: I think

[00:57:42] Naman Goel: SWIFT is

[00:57:43] Naman Goel: better because you don’t have to think about memory most of the time.

[00:57:46] Robbie Wagner: okay, so you can’t opt out of it in rust then, is what you’re saying, but it’s like Swift is very similar except you can just use it when you want.

[00:57:53] Naman Goel: Yeah, it’s, it’s, it is just like, what’s the default? So in, in Rust, , the manual version is the default. So if you [00:58:00] opt into rc, which is more convenient, you have to write a whole bunch of words to be like, oh, I’m making, I’m bumping the count. Now. I’m like, done with it. Like, you don’t have to clean up, but you still have to be like, I’m making a clone now.

[00:58:12] Naman Goel: , This is another listener to this. Or like, another thing is looking at this reference and in Swift, that is the default. So you don’t have to think about it if you’re just doing that all the time. But it’s like if something is slow and you’re like, Hey, reference counting is not good enough for this, or I never want this to be cloned ever because there’s like a file handle or something, , then you have to write extra lines in in Swift.

[00:58:33] Naman Goel: So there’s a trade off. But I think the Swift trade off makes more sense because 90% of the times, I just want the convenience of being able to like copy things and like pass them around, like references. And then only 10% of the times I want to be like, Hey, hey, no, no, don’t copy this ever. this is a thing that should never be cloned.

[00:58:50] Adam Argyle: is why I like Naman talking about this because like, , for me, I’m motivated by computers, should be computers and humans should [00:59:00] not be computers. So there’s like a couple, I I, it sounds so simple, but it’s like, I don’t want to put my brain into a scenario where I need to act more like a computer.

[00:59:11] Adam Argyle: I’m like, no, this is why we’re in the year of 20, 20 fucking five where I don’t have to be a computer. In the seventies, you had to be a computer. It made sense. You needed to micromanage and like orchestrate all of the things, but in the future you shouldn’t need to. And so whenever I like hear people talking about rust, I’m like, holy shit, this has the worst of all of my worlds.

[00:59:36] Adam Argyle: Which is, it’s like verbose. I have to hold the hand of it. And there’s like all these little memory, oh my goodness. I’m like, this is not an advanced language. This is a language asking me to do a shit load of work. And so when I hear Naman talk about Swift, I’m like, ah, swift sounds like it’s in a sweet spot where not only am I in a, minimal syntactic sugar scenario [01:00:00] where like I don’t have to type a shit, load of curly braces and a lot of semicolons and a lot of open noise.

[01:00:06] Adam Argyle: To me, that’s noise in an author as a human reading code. Parentheses, curly and semicon are noise. That’s computer talk, that’s computer ending and beginning different things

[01:00:20] Robbie Wagner: Team curly braces over here.

[01:00:22] Adam Argyle: uh, seem cur, Hey, yeah, curly brace said like, and I know it feels good, like it feels good to put a semicolon somewhere, but at the same time, like.

[01:00:29] Adam Argyle: Over time, it feels better to express and not syntactically finesse. Ooh, it rhymes.

[01:00:36] Adam Argyle: But that’s also, it’s, it’s like, I don’t want to micromanage my parentheses and my curly brackets, my semicolons. That’s noise to my purpose. The purpose is I wanna get some shit done. That’s why I haven’t gotten into rust.

[01:00:47] Adam Argyle: rust, to me, looks like a place where I’m gonna go spend time not getting shit done. I’m gonna spend time articulating and finessing in a very like, finite way, which is probably satisfying in the same way TypeScript is satisfying. [01:01:00] However, this swift scenario sounds to me where like I can, , by default get a preferred scenario.

[01:01:07] Adam Argyle: However, also write minimally because I’m a human and I don’t wanna write twice as many characters as needed to express my intent. anyway, so it’s like that’s where I’m coming from as an author of code these days. And for the past seven years or so, it’s like I wanna write as little as possible as close to English as possible, , and micromanage as little as possible.

[01:01:27] Adam Argyle: ‘cause I just want to express intent. and so Swift to me has always been enticing that way. But yeah, go ahead. Yeah.

[01:01:33] Robbie Wagner: yeah, sorry. I just wanna say, I think this is a thing we’ve discussed several times A lot of people don’t want to get things done. You forget that people want hard engineering problems. They want to hand roll a rust thing for two years ‘cause it’s fun, not because they want to get stuff done

[01:01:50] Robbie Wagner: that’s what a lot of people love.

[01:01:52] Adam Argyle: Yeah.

[01:01:53] Naman Goel: a little bit like that. I, I, I won’t lie. Something I’ve been, I’ve been doing I’ve been using the Codex, CLI [01:02:00] to write, a Java script Parer, in Swift. And so far I’m done with the tokenize. and I tried this last year and it was like completely incapable of doing it.

[01:02:10] Naman Goel: Like none of the models could do it, and this year they can do it,

[01:02:14] Adam Argyle: Hey, codex is tight this year. Yeah.

[01:02:17] Naman Goel: There’s this like thing that I’ve been like wanting somebody to make and nobody will make it because I don’t know how to like, publicize it enough. But basically I had this idea like, , maybe a year and a half ago, a year ago, where prettier put out this like big blog posts about how to format turny expressions.

[01:02:36] Naman Goel: I don’t know if you, you saw that and it was like a, it was like a mini controversy on Twitter because everybody wants things to be formatted differently. And basically I, I saw that and I, I like took part in it. I’m like, I want things to look like this. And then like two days later I’m like, actually, no, I, I want them to look like this.

[01:02:54] Naman Goel: And then essentially my final thing was like, why do we have Journaly? They’re so hard to read. We should just [01:03:00] have

[01:03:00] Naman Goel: if expressions. but we can’t have them because like, JavaScript you can’t have breaking changes in JavaScript. And then I was like, TypeScript is a J script super set. So is flow for the most part.

[01:03:11] Naman Goel: there’s like small exceptions, but like for the most part they’re super sets, which means like if JavaScript made mistakes, we just have to live with them. But there are a whole bunch of like compiled JavaScript languages outside of these two. Where they don’t look like JavaScript at all. Like, you get like these like lisp languages and you get these languages that look like Haskell or you like, you get Elm and then they don’t look like JavaScript.

[01:03:35] Naman Goel: They don’t work like JavaScript. They’re just like completely foreign. And I’m like, what if you just like made TypeScript, but you just like fixed things like TypeScript with breaking changes and I’m like, that would be great because

[01:03:47] Robbie Wagner: Coffee script you mean?

[01:03:49] Naman Goel: no coffee script went too far.

[01:03:51] Adam Argyle: Okay. I loved coffee script, as you can tell from like, I wanna write very little and get very far and express myself in succinct ways. Nothing comes close to [01:04:00] coffee scripts.

[01:04:00] Naman Goel: I, I

[01:04:01] Naman Goel: hated

[01:04:01] Naman Goel: coffee script.

[01:04:03] Adam Argyle: Most people hated it. I know.

[01:04:05] Naman Goel: so there’s one specific reason I hated it more than anything, it didn’t make a decision of how you, call functions. You could call, do function name, you call, call function, name parentheses, or you could do function, name, space arguments. And I’m like, just

[01:04:19] Naman Goel: make up

[01:04:19] Adam Argyle: loved it.

[01:04:20] Naman Goel: I hated that that alone was the entire reason I could not tolerate coffee

[01:04:26] Naman Goel: script.

[01:04:26] Adam Argyle: Oh, the space with the parameters. That was a little funky. I’m, I’m going to admit that one a little too far, but Okay. Anyway, you’re right.

[01:04:33] Adam Argyle: You’re

[01:04:33] Naman Goel: and so, so I wrote, I made this website. , It’s still live. It’s, it’s called Lightning script.dev, where I’m like, please someone make this language. And I just like put it out there like, more than a year ago and nobody did it. And so I’m hoping that like this codex will one day make this language. We’ll see, I, I don’t have time to actually work on it myself, but if an AI can do it, then I’m looking forward to a language like this existing.

[01:04:57] Robbie Wagner: Yeah. Yeah. I was gonna say, I wonder like how [01:05:00] far away are we from you just describing the language you want to an AI and you can write whatever you want and it’ll just work.

[01:05:06] Adam Argyle: It’s probably closer than we think.

[01:05:08] Adam Argyle: It’s pretty good at

[01:05:09] Adam Argyle: translation right now.

[01:05:10] Naman Goel: yeah, the new Anthropic model, announcement post has a mention of, they made it make a new language,

[01:05:17] Naman Goel: so,

[01:05:19] Adam Argyle: I’ve been thinking about a next gen CSS language for

[01:05:22] Adam Argyle: many years. Chris Coyer and I have talked about it multiple times. Like what would,

[01:05:26] Naman Goel: tell me more.

[01:05:27] Adam Argyle: would the next version be? Well, that’s kind of the problem, is I can, I can

[01:05:30] Adam Argyle: articulate a bunch of

[01:05:31] Adam Argyle: problems,

[01:05:32] Adam Argyle: but CSS. So nimble and so capable at the same time.

[01:05:38] Adam Argyle: It’s a very, it’s a very difficult language to dethrone and so anytime I kind of get into the weeds of like dethroning it, it’s more about property value, succinct solutions and like corrections as opposed to structural corrections. But anyway, sorry, I didn’t mean to derail.

[01:05:53] Naman Goel: No, that’s completely fine. Uh, I can always nerd out about CSS, you wanna hear a, a, a tiny [01:06:00] mini, , hot take on CSS syntax,

[01:06:02] Adam Argyle: Yes.

[01:06:04] Naman Goel: uh, container queries should not be at rules. They should be pseudo classes.

[01:06:08] Adam Argyle: Have you seen the proposal for media queries and container queries to be pseudo classes as function pseudo functions?

[01:06:14] Naman Goel: Uh, I’ve seen the function version. Yeah. Yes, yes, yes, yes, yes. I,

[01:06:17] Naman Goel: I I

[01:06:18] Adam Argyle: because it is,

[01:06:18] Adam Argyle: it’s

[01:06:18] Naman Goel: everything. Yeah.

[01:06:20] Adam Argyle: Yeah. It’s a little ridiculous that we have to at rule those. They should be something you can attach to the selector itself. do it a hundred percent.

[01:06:27] Naman Goel: Yeah. I, I, I like it in the value. So, this is the one thing where I, went against what CSS does, and then CSS caught up to style X, which is, the API of style X is you don’t write base styles and then like mobile styles. You just write styles and then your values can be adaptive.

[01:06:46] Naman Goel: So like your width can be different values for like different media queries or whatever. And that was like the weirdest thing to everyone who was using Styl X. And there was good reasons behind it, but I won’t go into it right now. And ever since [01:07:00] CSS shipped custom functions and like if functions, now you have that in CSS.

[01:07:08] Naman Goel: And I think it’s way better than like being like, Hey, these are like my normal styles and these are my, like, if you’re doing responsive design, I don’t think you should be writing your styles like that. If you should always be thinking of all screen sizes.

[01:07:19] Robbie Wagner: Mm-hmm. Yeah. We talked to a guy that builds apps for flip phones.

[01:07:24] Robbie Wagner: He’s like, no one thinks about like 160 pixels being your screen size or

[01:07:29] Robbie Wagner: whatever it is. Yeah,

[01:07:32] Naman Goel: damn. I don’t even think about that. I don’t Oh

[01:07:34] Robbie Wagner: yeah.

[01:07:35] Robbie Wagner: yeah.

[01:07:36] Adam Argyle: person is reaching everyone and we’re reaching just a partial amount. Yep.

[01:07:40] Robbie Wagner: mm-hmm. Yep. Yeah, it’s, I mean, it’s more than you think, but

[01:07:43] Robbie Wagner: yeah, we are pretty over time. So, , before we end, what would you like to plug?

[01:07:48] Naman Goel: I guess I’ll plug like solenoid, which is not something you should

[01:07:51] Naman Goel: use,

[01:07:52] Adam Argyle: will.

[01:07:52] Naman Goel: I gave a talk at React Summit, , earlier, like, I think in, in June. and Solenoid is just like this [01:08:00] idea I had for like, more than a year. I didn’t have the idea for a year. I, I developed this idea over a year and it was just like all these different things were happening.

[01:08:08] Naman Goel: HTMX was happening there was like all these new like server suicide rendering things and like react server components was happening, Astro was happening. I was looking at all of this , and I was looking at solid JS and I was looking at like Ryan Carto stream, and I, I was just. taking it on in.

[01:08:23] Naman Goel: And I had this like weird idea. I’m like, what if you did this? And so I like made solenoid for that. And that’s all it is. It’s just like this like experiment, where it’s like a radically different way of rendering apps. The closest thing to it is quick js, but if I was to give you the elevator pitch, it’s the idea is that it is interactive as the HTML streams in.

[01:08:47] Naman Goel: So if you do like server-side rendering, like async server-side rendering, where you have like suspense boundaries and those suspense boundaries get plugged in later or whatever. And you’re streaming in your HTML and say you have like a [01:09:00] really slow internet connection where you get like a few lines of HTML at a time.

[01:09:03] Naman Goel: even if you’ve just gotten like the first like eight, 10 lines of your HTML, it’s already interactive. and then like the things that come in later, just catch up to your client state when they come in

[01:09:15] Naman Goel: and.

[01:09:15] Adam Argyle: sounds awesome.

[01:09:17] Naman Goel: I don’t know if that’s a good idea, because if your HTML is bigger and your JavaScript is much smaller, I haven’t built anything big with it.

[01:09:22] Naman Goel: The framework’s not even complete, but I think it’s like a cool idea. So I would like, love

[01:09:27] Naman Goel: just

[01:09:27] Robbie Wagner: Yeah,

[01:09:28] Naman Goel: it.

[01:09:28] Robbie Wagner: for sure. Very cool. All right. Yeah. Thanks for coming on. Thanks everyone for listening. If you liked it, please subscribe. Leave us some ratings and reviews. We appreciate it, and we will catch you next time.

[01:09:36] Outro: You’ve been watching Whiskey Web and Whatnot. Recorded in front of a live studio audience. What the fuck are you talking about, Chuck? Enjoyed the show? Subscribe. You know, people don’t pay attention to these, right? Head to whiskey.fund for merchant to join our Discord server. I’m serious, it’s like 2% of people who actually click these links. And don’t forget to leave [01:10:00] us a five star review and tell your friends about the show. All right, dude, I’m outta here. Still got it.