1002: The Real Pricing of LLMs

In this potluck episode of Syntax, Wes and Scott answer your questions about LLM usage-based pricing, security risks from malicious code in interviews, staying current in a fast-moving dev landscape, a new CSS linter, managing Node environments and tooling without losing your mind, and more! Show Notes 00:00 Welcome to Syntax! 01:17 Copilot’s new usage-based pricing and the end of cheap AI Model multipliers for annual Copilot Pro and Copilot Pro+ subscribers 08:53 Why Syntax dropped clever ad transitions 10:33 Debugging issues on the Syntax website with Sentry 12:51 Brought to you by Sentry.io 13:01 Getting hacked through a fake recruiter and malicious repos Adib Hanna’s hacking story scammer.md DeskPad 17:57 How to catch up after stepping away from dev 25:10 React components vs native browser APIs 32:41 New CSS linting tools and Project Wallace updates csskit 36:06 How to interview developers in the age of AI 41:21 Managing Node, package managers, and dev environments 46:59 Sick picks + shameless plugs Sick Picks Scott: ZEISS Lens Care KeyboardCleanTool Wes: Amaran Halo 100x Shameless Plugs Syntax YouTube Channel Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:00Wes Bos?

  Welcome to Syntax. We've got a Potluck episode for you today. We're talking about everybody is getting hacked. We're going to talk a lot about that. The new LLM usage-based pricing. I think the free lunch is over and the GitHub Copilot is now 27 times the cost for some of these models, which thousands of dollars, right? The best way to manage your node and package manager versions. We got a little tip for you. You have to get rid of node version manager for good. Why is nobody using standard HTML and CSS over these UI component libraries that ship 16 megs of JavaScript? And finally, a new CSS linter is on the way. We're excited to hear about it and we're going

• 0:43Wes Bos?

  to detail what we hope and what that looks like it'll be. Let's get into it. If you have your own questions, we would love to answer them. Please submit them. Go to syntax.fm forward slash Potluck or just click on Potluck in the nav bar and you can submit your question or link or whatever you want us to talk about and we'll cover it on an upcoming website. Keep them coming as we love hearing about it. What's up, Scott? Good to see you here.

• 1:07Scott Tolinski?

  Oh, hey, man. Good to see you as well. It's a it's a fine day. Fine day this morning.

• 1:12Wes Bos?

  Fine day. Lot of stuff's been going on lately. Got lots to talk about. Let's just jump into the first one here, which is a question that says, what do you think about Copilot's new usage-based pricing? So if you didn't see this, you probably got an email about it, but GitHub sent out an email saying like, we're moving to usage-based billing rather than these like all you can eat subscriptions. And and I think we're starting to see this not just with GitHub Copilot, we're seeing it with a lot of people is they didn't, nobody realized how much we are going to be using these models, right? Like initially, it was like you just type, you have tab completion or you type in the box and you get an answer back and then you copy paste and apply it to the thing. And now people are just like

• 1:55Wes Bos?

  agent maxing, running like 30 at a time. You have all these like sub things going. You're using it to simply, people are just using it to simply like ask it to get commit, you know, like unreal usage that people are using.

• 2:06Scott Tolinski?

  Yeah.

• 2:08Wes Bos?

  Unfortunately.

• 2:09Scott Tolinski?

  Change the background, right? Yeah, like, yeah.

• 2:13Wes Bos?

  Change the background, but unfortunately, this stuff is is very, very expensive. And for the last, I don't know, year, two years, whatever, we've been, we've been getting heavily subsidized AI models for us. And I think they're sort of looking at how much they're losing on these, not just GitHub, but like Anthropic had, they were testing removing Claude code from the $20 plan. They're really tightening down how much you get on a $200 plan. And that's not because they're being greedy, it's simply because they're probably bleeding money. They're probably bleeding thousands and thousands of dollars on single people every single day. And the VCs are sort of picking up the bill for a lot of the stuff right now.

• 2:55Wes Bos?

  But eventually, things are are going to have to be paid for. And I know that, like, I don't know, what do you, the computer, do you think that the stuff will get cheaper eventually? You know, like, computers always get better and cheaper?

• 3:09Scott Tolinski?

  Yeah, yeah, you, I mean, you'd think so, but it is interesting to see, you know, you know, what is it? The, it's not necessarily, you could call it a rug pull of sorts, but like, I think anybody who's been paying attention

• 3:23Scott Tolinski?

  could have seen this coming, given the progressive movement of all of these companies moving in this direction. And and I remember people talking last year saying, you know, the $200 a month Claude code max plan and Codex plans that exist like that as well. Like, those aren't going to be here forever. This is like, I saw people saying, spend your tokens now because they're going to cost a lot more in the future. And I, I mean, I think that's really what we're seeing. I don't know if, I mean, I'm, yes, obviously, computing will improve. We'll be able to use these things for cheaper, but better models are going to continue to come out.

• 4:08Scott Tolinski?

  We saw most recently with the latest Claude Opus 4.7, because of how they're tokenizing, it's like using a ton more per general prompts. And because of that, it's not just that the model is. More expensive or whatever. It's like the actual amount of tokens you're using is more. So therefore you're going to be spending your.

• 4:32Wes Bos?

  You're good.

• 4:32Scott Tolinski?

  Yeah. Anybody who's worked in this stuff will see like the transition into API based billing. And that API based billing, that usage based billing.

• 4:42Wes Bos?

  Yeah.

• 4:42Scott Tolinski?

  It gets expensive quickly. Yeah. Holy cow.

• 4:47Wes Bos?

  I, sometimes I run the numbers on like the tokens that I've used in a single day. And I'm like, that would have been like 300 bucks in a day, you know?

• 4:56Scott Tolinski?

  Which is crazy for what, you know?

• 4:58Wes Bos?

  Yeah, it's, it's nuts. And like, so GitHub released their like, what's called their multipliers, which is basically like, if you're using these different models, um, here is how much faster you're going to be using it, right? And like Claude Opus four six, the multiplier was three, the new one is 27. So they're saying like, this is essentially like multiple times more expensive than, than it actually was. And it's absolutely crazy. And I, I think one other thing we're going to see with this type of thing is the model providers just simply either making API access unaffordable or just cutting it off entirely. Because they don't, like, I don't think Anthropic or OpenAI wants you using it in a different product.

• 5:41Wes Bos?

  They want you using it in, in their product. And we've already seen this, like 11 labs. I love 11 labs, but like they're all they're like good features. They've like now locked it into, you have to have like a $20 a month plan. And then they give you a certain number of credits. I hate that. Like, just let me pay for what I'm using. And I want to do that because I'm, some months I might use $20 and some months I might use none. And then I have to like, uh, Mid Journey, also like this. I, I subscribed to Mid Journey again, a couple of weeks ago, just because like their image stuff is fantastic and the tooling around transforming or whatever. And like Mid Journey has no API, right? There's, you, you can't just simply pay. I needed to generate like a whole bunch of backgrounds. I was playing with my green screen.

• 6:25Wes Bos?

  Um, and they do the best at like matching the light that's coming on my face. So I was like, oh man, like, wouldn't it be cool if I could just like? I don't mind paying like $50 to generate a whole bunch of backgrounds once, but I don't want to have this like ongoing thing and then you, your, the subscription is over and then you lose all of your images from the, the past. But unfortunately, I think that's the way it's going to go. Like I bet we're going to see a Claude in the future where you, you simply just cannot use it via an API. You have to, you only use it via Claude code.

• 6:55Scott Tolinski?

  Well, that is pretty much how the, the Claude code max plan. I, I mean, I think the API paying on a token base, I don't think that's going well. I think they want you to use that because the way that they've set this up is that if you're paying the $200 a month subscription plan, you can only use that in the Claude app or Claude code. Whereas before you could use, I mean, it was always kind of against the terms of service, but they weren't enforcing it. You could use that subscription in open code. You could use that subscription in Pi and then they were open Claude. And then they, they blocked all of that. So now they're forcing, if you want to use Claude with those tools, they're forcing you into the API base billing, which costs a ton more.

• 7:36Wes Bos?

  Yeah.

• 7:36Scott Tolinski?

  So I, I think they want you to use that. That's probably the path for them to not be bleeding money on this stuff.

• 7:43Wes Bos?

  You gotta think that Microsoft is working on their own model because you can see like Cursor is coming out their own model, own model, because I bet at some point like Cursor is going to not be friends with Anthropic anymore. And they're going to pull the, that model from Cursor and then Cursor would suck without, without that, right? So now they're working on their own, own models and you gotta think Microsoft is doing that as well.

• 8:07Scott Tolinski?

  Here's what I think is going to happen. And I think we're all going to get better at using smaller models in more targeted workflows. One model does one thing very specifically. It costs way less. It needs to do way less and we're going to move on from opening up one app and just being like, can you please do this and commit this and then run my checks and do this? Like it, because you don't need Opus 4.7 to run your test suite. You don't need it to run get, commit or create a commit message. You can use much smaller models than that. And I think we're going to start to see systems pop up that allow and are based around the idea.

• 8:48Wes Bos?

  Like a really good auto mode some of these tools have.

• 8:51Scott Tolinski?

  Yes.

• 8:53Wes Bos?

  I like that.

• 8:53Scott Tolinski?

  Here's a fun question, just about syntax.

• 8:57Scott Tolinski?

  Yeah, y'all seem to have stopped doing the clever ad transitions. Now I hear is that jarring soundbite that introduces the pre-recorded syntax ad. Why did you stop doing these? Does it save time? Was it something syntax prefer? Did y'all get bored of thinking of them? Did you want to make them easier to skip? Because all the ads are the same for the same company now. I may be in the minority, but I really enjoyed and miss the clever transitions. They sometimes made me chuckle and smile on a bad day. Some of my favorite podcasts are the ones with playful ads and ad transitions, like the climbing podcast on the Enormo Cast. I've never heard of it. But yeah, you know what? I'll tell you why.

• 9:40Scott Tolinski?

  We still do these for Sentry, but we're owned by Sentry and we don't have any more sponsors. So that's why there's no more different ones. Now, why we don't do maybe fun ones into Sentry? Often because we're just kind of forgetting to even do it. We want to make sure we mention Sentry. We don't want to be annoying about it and we don't want to insert it into odd spots in each episode. But we do try to do it in a way that is more organic, I feel like. But I think because of that, there's less opportunity to be like, oh, we need to do two ad reads an episode. Let me think about this ad read. When am I going to throw it in here? Okay, now, you know, it just feels different for me for some reason. But DK, Donkey Kong, thank you for saying you like that.

• 10:25Wes Bos?

  You know what? We also have in there, Scott was always the pro at the transition. I was never very good about it, but I'll get it in there. What do you think? Our top issue, number of events is in Sentry right now for the syntax website.

• 10:41Scott Tolinski?

  For the syntax website?

• 10:42Wes Bos?

  Yeah.

• 10:43Scott Tolinski?

  I bet my guess is something with the Transcriptions anthropic API key.

• 10:52Wes Bos?

  That is one. So we had, at one point, we had had an old version of Anthropic summarizing them. And it turned out that they, when we implemented it, was not very good. And we need to like, just bump it to a better model and maybe make a better prompt. And that's that'll be part of the new site. But at that point, we just, we stopped doing it. And one of our top errors is invalid request error, your credit balance is too low. So we just didn't put any money in the, in the machine for that type of thing. And then there's another one, invalid username password for Upstash. Scott, our caching.

• 11:29Scott Tolinski?

  Invalid? Wait, is that one, when was the last time that one went away, though? When was the last time that one triggered?

• 11:36Wes Bos?

  About three minutes ago.

• 11:40Scott Tolinski?

  Three minutes ago? Okay, I did rotate those keys.

• 11:44Wes Bos?

  It came back. You can see in our Sentry that it popped up maybe last week. Looks like you probably fixed it within the last week, right?

• 11:53Scott Tolinski?

  Well, no, here's what happened.

• 11:55Wes Bos?

  We got a regression. And Sentry is telling us.

• 11:58Scott Tolinski?

  Well, you know, Vercel got pwned.

• 12:00Wes Bos?

  Oh, yeah.

• 12:01Scott Tolinski?

  And they said to rotate your keys. That was one of the keys. Wes, I have some linear tasks for you to rotate the keys on the providers that you have access to. So you should probably do that. I rotated my Upstash keys. And it's kind of surprising that I'm getting.

• 12:18Wes Bos?

  You got a regression.

• 12:20Scott Tolinski?

  I got a regression. So that means something's wrong there. So I gotta fix it. The good news is the fallback for when that's not working is that it just doesn't use the cache. So.

• 12:29Wes Bos?

  Interesting. I think if I'm looking at my Sentry dashboard and looking at the URL that this issue is happening on, it's actually happening on preview URLs. So I bet that this is not happening. This is probably happening on an older preview URL, which has not yet been. Updated, maybe it was built with the old keys. That's probably what it is. Yeah. There we go. Solve the problem in Sentry. Thank you, Sentry. Go to sentry.io/syntax and Yes. Solve your problems. All right. I want to talk about this. Adib Hana, he posted this crazy story about how he almost got hacked by like a recruiter.

• 13:11Wes Bos?

  So basically he says, I had an interview with a crypto recruiter. We talked about forty for forty minutes and they asked me to look at some code. Their first instruction was to clone the repo. I didn't. They seemed surprised, so I told them I, and I waited a moment to check whether it was safe or not. I ran a quick analysis with Claude. Turns out the code had a backdoor that would have copied my environmental variables and sent them to the remote server. The recruiter was speechless and ended the call pretty quickly. Be careful. And then he goes on to like post the actual code of like what happened?

• 13:47Wes Bos?

  And simply by like cloning this thing, and I think it was like a pre-commit, but basically it was an Axios call that spread process dot env. Which I didn't know you could spread process dot env. I thought you had to know the actual key for it. Like I know you can't use object dot keys on process dot env. Maybe you can, but yeah, it's crazy. There's a little base sixty-four encoded string, which turns out to be like a Vercel hosted IP checker. Like it looks like, it looks like it was just simply sending a call to check what your IP was to get the country and to come back. But really it was just an app that was just like logging absolutely everything.

• 14:33Wes Bos?

  And what a crazy, crazy story. So certainly be very careful.

• 14:40Scott Tolinski?

  It feels like this stuff's getting crazier in terms of just the amount of things we gotta worry about these days in terms of attacks in this regard. And like, man, this one is wild in particular. I, for a job interview, I don't know if I would have saved myself from this. Um, just because there's like the legitimization of it being a job interview can put you into a back foot where you are kind of inherently more at ease in trusting because you are asking something of these folks, you know, their time for a job.

• 15:18Wes Bos?

  What's crazy is that the like, the guy used his like full face and camera and like all that stuff. Like not even, not even trying to hide it. Yeah. Oh, that's true. Actually.

• 15:29Scott Tolinski?

  Yeah.

• 15:29Wes Bos?

  I think.

• 15:30Scott Tolinski?

  I mean, there's been some shocking face clones.

• 15:32Wes Bos?

  People to like make things like previously to do bad things on the internet. You also had to like know how to code or, or employ some people that also wanted to do bad things. But now the bad people can simply just boop, boop, boop in the box. So careful installing things.

• 15:50Scott Tolinski?

  In the box.

• 15:51Wes Bos?

  A lot of this like, like Mac, you know how like, there's like this like Mac app community, you know, there's reddits or whatever, like check this app out. It like does this thing on the whatever. I just don't feel good about any of these apps that are new in the last like year or six months. I almost always like look and see like, was, has this app been around for longer than this? Cause I, I don't feel good about these new apps that are vibe coded. Cause somebody can simply just say like, here's, let's make something useful, but also throw a backdoor in there.

• 16:21Scott Tolinski?

  Yeah, they're, they're, and I'm so, cause I am, I've been a long time subscriber to whatever that Mac apps Reddit is. And the same thing, I had to unsubscribe from it lately because of just how many clearly vibe coded apps are there? And it's not like I'm inherently like against the idea of somebody using AI to make a desktop app. But in the same regard, it's like, there's a lot of people just pushing stuff out. And like, if you're not installing from the Mac app store for your, I mean, even if you're installing from the Mac app store, you don't know what's going on, but like you. You have to say, yes, I approve of this. I accept the risk of installing it's a care potentially insecure software.

• 17:02Scott Tolinski?

  And you do that because you're so used to apps like that being signed and somewhat trustworthy.

• 17:07Wes Bos?

  But Another one that I see is people forking projects that are unmaintained. And like, like, I'll tell you one right now. I use this app called Deskpad and it gives us a virtual monitor and we can use it to record like a smaller screen when we're doing our things. And it's, it hasn't been maintained in a while. And there's one feature, which is you can't rotate the virtual display. So I went into the issues, looked for it. And then somebody says, hey, I am now maintaining this and I, I forked it and I did all these things and probably that was fine. Probably some that was with somebody that did things fine, but I'm just like, do I trust this, you know? I don't, I don't necessarily know.

• 17:49Scott Tolinski?

  Yeah, it feels like, it feels like the security thing has gotten really crazy lately. I mean, like everybody, everybody's getting hacked.

• 17:55Wes Bos?

  Stories of.

• 17:56Scott Tolinski?

  Yeah. Yes. And next one from Max. Hey Scott and Wes, huge congrats on the 1,000th episode. Thank you, Matt, doing the, doing the apple. Thank you, thank you. I still remember listening to the first episode nine years ago when I was like 15. Thanks for inspiring me to become a web developer. My question, I have always been an early adopter who tries out new tech the second it drops. For example, I was an early cursor and AI chat simple agents in the editor user when they dropped. Recently I took a gap year and left my home country, Germany to travel around Australia. I totally unplugged from coding. My only connection to the web dev world was listening to your podcast. Well, thank you.

• 18:39Scott Tolinski?

  Now I'm getting back to work and it feels like the landscape has completely shifted. The whole AI agent space exploded while I was gone. Every scene, everyone seems to be talking about open code and building these ultra complex agent setups, but not just that. It feels like the whole ecosystem has moved forward a lot. From the first time in my life, I genuinely feel left behind. How do I get back to that cutting edge state quickly? What is your advice and the best way to catch up on these new workflows to figure out what's actually worth learning? Thanks and greetings from down on down. This is like a whole thing. I actually just gave a keynote on this today about staying up to date with stuff in this world because.

• 19:20Scott Tolinski?

  As we, as we march on and every single person that you know is creating an AI agent orchestrator, like everybody is like, well, I'm gonna, I have this really novel idea of creating an agent orchestrator. You know, something that's never been thought of. And the thing that often gets ignored is that like browsers are still shipping stuff. Like just yesterday Firefox shipped the ability to use light dark function without.

• 19:50Wes Bos?

  Oh, hell yeah.

• 19:52Scott Tolinski?

  Cause light dark was just colors and now you can use it with images too. Man, that feels like exciting to me. And it's so easy to lose track of all of that, that progress that's happening in native APIs. Because we're all built, we're all like exploring this whole new world of AI and it's exciting. And I think at the end of the day, you know, you gotta like, think about what it is that you're actually care about working on. Do you care about working on this AI stuff? Or do you care about building great experiences for the web? And you need to focus your time and energy on the tools and techniques that will get you to those results. Rather than worrying about the tech, worry about the results.

• 20:36Scott Tolinski?

  And I, I think that's something that people really lose in this stuff. And then they lose motivation because it's so overwhelming. There's this new harness or this new model or this new thing. And it's like, what are we actually building? Are you building anything? Like sometimes I, I spent a whole week working on something that is just a tool as a tool for a tool, rather than actually building anything useful. And like, that, that sucks to feel that way. Like, wait a second, what am I actually building here, right? What am I actually needing to focus on? So I, I would, I would say focus on, on the results first and then, and work backwards from there.

• 21:15Wes Bos?

  Yeah, I think, I think that's really important is focus on using this new tech that we have to get you better results. A lot of people are simply just focusing on the harness and whatever that we actually use to, to write code. And the frustrating part about that is in, in two months, a lot of that is unnecessary because it's just been rolled into the, the models are just, are good at it. One thing I often think about is that. So many times, there's like, oh, we should have a feature for X, Y, and Z, or there should be a button for this. Like, I even went into the Cursor chat and I was like, hey, like, it would be nice to have a button for X, Y, and Z. I forget what it was. And their answer was, just ask it to do that. And I was like, oh, damn it.

• 22:00Wes Bos?

  Yeah, you're right. Like, they don't even need to build that feature because you can simply just ask it to do that. So it's kind of frustrating that it moves so fast. And what you're excited about one day is totally gone. And I agree with Scott, where you should focus on how do you use this tech to build something that you are excited about, or something that you previously couldn't do, something that has interested you in a while? Like, the other day, I found this little Budweiser cup at a thrift store, and it has like a little Bluetooth thing. It connects to your phone and it lights up when your team scores. And it's like, it's like 12 years old or whatever. So I was like, I bet I can hack this. And I couldn't figure it out because it wasn't standard Bluetooth stuff. I've done quite a bit of web Bluetooth stuff.

• 22:44Wes Bos?

  I just couldn't crack it and couldn't figure out what commands to send to it. So I was like, why don't we try like decompiling the Android app? And then, so I found it, and I gave it to Opus, and it decompiled it. And I was like, that was, that was really fun. Like, that was, I don't think I would have been able to do that without, without this, or at least in this amount of time. So just keep pushing into the different areas that you're excited about. Last thing I want to say about this is,

• 23:12Wes Bos?

  I think like, everybody is going to be good at using AI, because you're simply just typing into the box and it gives you what you want. And everybody who has these like secret prompts and tricks,

• 23:26Scott Tolinski?

  Oh, man.

• 23:27Wes Bos?

  and lists of skills and all this BS, you're not going to like get ahead in your career by being that person, I don't think.

• 23:35Scott Tolinski?

  I'm G stacking, man. I'm G stacking on my G.

• 23:38Wes Bos?

  Yeah. Those things are not like any sort of competitive advantage for this type of thing.

• 23:45Scott Tolinski?

  My agent, my agent's skill says, make it good, though.

• 23:48Wes Bos?

  Yes.

• 23:52Wes Bos?

  Exactly. You know, that's so frustrating. So like, like where you will have have a competitive advantage is is just being able to figure out how to be creative with these things and figure out how you can actually solve problems with this tech rather than just like, I don't know, crank out another slop coded vibe app because I've certainly I've built many, many of those. And then once it's done, you feel good in the moment, right?

• 24:18Scott Tolinski?

  Yeah.

• 24:18Wes Bos?

  I'm making something. I can't believe I can do this. And I often think about how exciting that is for people who can't actually code. If I'm this excited about what I'm building right now, people that have always wanted to build something but couldn't because they couldn't code, that's even even more exciting. But that will wear off eventually. And like the table stakes of being able to build anything is sort of on the table there. Now, now it's up to you figuring out. I don't know what I'm trying to say here. I'm kind of rambling here, but you know, you know, I mean, like,

• 24:46Scott Tolinski?

  Yeah, we should get Courtney on to talk about this, this psychological damage that some of these dopamine kind of I'm doing something, I'm doing something, you know, like that, that, man, it really like plays on me too, because I really do feel like I'd be doing something sometimes where like, I need to take a step back and really think about what I'm actually doing. So.

• 25:10Wes Bos?

  Next question from Stephen Gregg. He says, I'm interested in your take on using React UI components versus native browser solutions. A specific example, base UIs accordion component versus HTML details summary. I'll throw in another example is just like dropdowns, customizable dropdowns. We now have that in customizable select in the browser, right? To select, you can make it look like however you want. I understand that the base UI version is fully battle tested and covers all possible accessibility concerns, but to me,

• 25:42Scott Tolinski?

  it feels like adding accordion.

• 25:44Wes Bos?

  Battle tested. It's true, though. Sometimes there's there's there's with accordions. To me, it feels like I'm adding unnecessary JS overhead. I like leaning on native browser behavior when possible. And I generally assume native browser behavior would have no accessibility holes, but this may not be the case. And he goes on to sort of give one example. I think, The native browser stuff is currently being slept on because like Scott said earlier, everybody is so hyped on all this AI stuff. People are not realizing that, see, we have CSS anchor and customizable select. And like we have, there's like, we've talked about this on podcasts every week.

• 26:26Wes Bos?

  There's like 30 new things in the last year or so that absolutely nobody is using. You know, like I saw apple.com using CSS anchor and scroll snap for one of their things. I was like, this might be the first time I've seen like a big website actually using a lot of this new native stuff. And it's, I think it's made, made worse by the LLMs not giving you those things by default. I have to explicitly ask and know, I want to use CSS anchor. I want to use customizable select. I want to use the details box. Don't just make your own version of it. You have to explicitly go and ask for all of those things.

• 27:07Wes Bos?

  I think it will get much better once these types of things are sort of, they make their way into the, the component libraries. I don't think we're going to get rid of component libraries. Probably will, we won't have a need for some of the components here or there. But generally what I think what will happen is we'll get rid of a whole bunch of extra JavaScript. And then the Shad CN implementation of a lot of these things is simply just going to be some HTML with some classes and maybe a little bit of JavaScript here and there to fill in different interactions that you want.

• 27:39Scott Tolinski?

  Yeah, I'm going to share my screen for a second. So audio folks, I'm sorry, I'm just warning you, this is a quick thing. I just want to ask people, what would they rather have in their codebase? This is an accordion, mind you. This, which is what? Like 15 lines of code for a single accordion or this? Like, what are we doing here? Like, the one is four lines using a details and summary. And I get it, details and summary, maybe not the most advanced API. It's an accordion. This base UI drives me nuts. And it's not just because the, the guy who does base UI didn't like my tweet that this button could have been a class. Or this, this, this component could have been a class. He didn't like that.

• 28:23Wes Bos?

  Yeah.

• 28:23Scott Tolinski?

  Because apparently we need eight components to do a stinking accordion. Accordion root, accordion item, accordion header, accordion trigger.

• 28:32Wes Bos?

  I don't know.

• 28:34Scott Tolinski?

  Is this garbage? No, what is this?

• 28:38Wes Bos?

  But like that, those are just like, it's composable, right? Like you can, if you were to do that-

• 28:43Scott Tolinski?

  Oh, let me compose the accordion trigger outside of the accordion route. Why, like, why do we need all of these individual pieces?

• 28:52Wes Bos?

  Because like, if you were actually wanted full customization over the accordion that you just showed me, you would just add more elements, right? And I agree that that's, that's where we should be. But you would be adding spans and divs and all kinds of stuff to make it look like you actually want. And that's why Base UI has all these different pieces so that you have-

• 29:11Scott Tolinski?

  No.

• 29:11Wes Bos?

  The composability. But I agree, it drives me nuts that like this is, I have to now know about these 18 different items here.

• 29:21Scott Tolinski?

  Cause these are just like wrappers, accordion panel, but inside of that is the actual HTML. So it's not even taking care of that. Accordion header, uh, trigger, yeah, I mean, like, yeah, I get it. But at the same time, that's not for me, man. I don't, I don't need, no. I, I, you know, give me, give me a link with a class of button versus a button that is a component wrapped up with a class of button or styles baked in, whatever. I don't know. So many of these problems are just like complexity for the sake of it and-

• 29:52Wes Bos?

  I don't think they're actually, you, you really think people are sitting around being like, you know what I'd like to do? Super complicated accordion, doing that. I'm gonna spend my life's work. No, it's, there's a need for, for that type of thing, or there was at least. And now that we have the primitives in the browser, we don't necessarily need a lot of those. Or it behind the, under the hood, that's something we say a lot. Under the hood, that primitive is, should be, or hopefully will just be HTML.

• 30:19Scott Tolinski?

  Details and summary was added to the browser in 2011.

• 30:25Wes Bos?

  What?

• 30:26Scott Tolinski?

  Yes.

• 30:27Wes Bos?

  Okay, but it wasn't animatable for the long time. You know, there was all these like, uh, gotchas where it's like, uh, it doesn't exactly work that way. Or you want to open like two at a time, or when you open one, the other one closes. And like those things have been added non 2011, right? We got, we got animatable, um, detail summary in like the last year or so.

• 30:50Scott Tolinski?

  Sure. That's all.

• 30:52Wes Bos?

  But I agree.

• 30:53Scott Tolinski?

  Even even though I think my biggest rub is less of the fact that it's a React component doing something that HTML can do, because that's not a problem. It's that the APIs for these things aren't looked as being streamlinable. Like, the APIs are so overly baked. I I for me, it's like, it just, the the what you're getting out of it does not match what you're putting in.

• 31:21Wes Bos?

  And sometimes they're set up to handle every single possible use case under the sun, when you may not need that.

• 31:28Scott Tolinski?

  You can make your own accordion component with details and summary in about 15 seconds, you know?

• 31:36Wes Bos?

  Oh, yeah, I agree. Maybe somebody who's an accordion expert, send us like a just a problem statement or a design or something like that. I think that'd be a fun video where we try to go off and build it. I probably would like to do the native stuff as well, because like, yeah, it's some of this stuff, especially like when you get into it, you're like, now, how do I change this thing? And you have to be like, why am I reading docs?

• 32:00Scott Tolinski?

  Oh, my God.

• 32:00Wes Bos?

  For a glorified div with a click handler on it.

• 32:06Scott Tolinski?

  Shout out to JS Nation and React Summit. I'm going to be out there in Amsterdam this summer.

• 32:11Wes Bos?

  Yep.

• 32:12Scott Tolinski?

  And my talk is all on, well, my talk at React Summit is going to be largely based on this, Wes, is is.

• 32:20Wes Bos?

  You're gonna get shot, Scott, going to React Summit?

• 32:24Scott Tolinski?

  No, it's like, you don't need React for this, you know? Hey, React is great.

• 32:28Wes Bos?

  Yeah.

• 32:29Scott Tolinski?

  It does so much, it's so much stuff, does so much good stuff. But this component could have been a div. How about that? Yeah.

• 32:35Wes Bos?

  That that should be the name of it. This component could have been a div.

• 32:39Scott Tolinski?

  I love it. Hey. I love it. Next one here from Bart Veneman of Project Wallace. Hey, webmaster of Project Wallace here. Love it, webmaster. Thanks for the shout out on episode 998. Just wanted to let you guys know that we are working on a big style lint plugin pack for exactly the reasons you guys mentioned on the podcast. Deterministic output, sensible defaults, and more agent-ready tools with Wallace-related tools. Now, my question, Scott, Clint seems nice. Clint was my little CSS linting project I threw together. Have you looked into csskit.r s yet? It aims to be a sort of OXC but for CSS.

• 33:22Scott Tolinski?

  The maintainer, the maintainer is Keith. Oh, Keith, I'm so sorry. Is it Circle or Kirkel? C I R K E L. Sorry, Keith. He works on the Firefox browser. It uses the same CSS parser as Lightning CSS. He also wants to incorporate linting into CSSkit. Looks like you are both in the same boat. Anyways, wanted to let you know, I have not heard about this, Bart, and I really sincerely appreciate this. I ultimately don't want to be the one who makes this. So if, oh, this is, this is a cute little website. So if Keith is working on this, it looks like there is linting. CSSkit lint styles.css.

• 34:05Scott Tolinski?

  Very similar, based on Lightning CSS as well. Analyze for deep. Yes. Shout out to Bart. Shout out to Project Wallace. One of the coolest CSS projects out there. For those people who don't know, Project Wallace does a great job of analyzing your CSS in all kinds of ways, both as a CLI, but also as a cool little website. So, yeah. Um, no, I haven't seen this, but I love this. CSSkit.

• 34:31Wes Bos?

  If there's two people I want working on this, it's definitely Bart and Keith, because these guys know. Oh, yeah, yeah. Keith is, I think he, he writes a whole bunch of the specs. Anytime I'd ask anything about any future spec, he comes in and chimes in with it. So he knows. CSS specs super well.

• 34:54Scott Tolinski?

  Okay. Do you know how to pronounce his last name?

• 34:57Wes Bos?

  No, no, I don't know how to pronounce anybody's name. I probably can't pronounce my own name.

• 35:01Scott Tolinski?

  Oh, I recognize Keith. I recognize his face here. Okay, I am. Yes, I know Keith. Sorry, Keith. I didn't recognize your last name here.

• 35:09Wes Bos?

  Yeah, I'm excited. I'm, I think this is awesome that they're working on it. We very much need this type of thing, especially as these LLMs are starting to crank out all this slop. You need these guardrails and these tools that will stop them from adding text, what, letter spacing, 0.2 EM to literally every single selector out there.

• 35:34Scott Tolinski?

  Background color white, white div already.

• 35:38Wes Bos?

  Can we add a, a style lint where it doesn't do that? It doesn't do a border-left on a card when you also have a border radius? You know, that little fingernail that the AI puts on everything?

• 35:53Scott Tolinski?

  There's so many funny AI tells, like the little, the boxes with the icon and the text. It's like,

• 35:58Wes Bos?

  Yeah.

• 35:59Scott Tolinski?

  Okay, we get it. You said, here are my features, and it made a little section of the six features that it pulled out of there.

• 36:06Wes Bos?

  Next question from JDog. We've heard a lot of questions about how to best prepare for interviews, especially now with AI age. However, we haven't heard from much from the other perspective. Occasionally, I have to do an interview to vet new potential hires. It was never an easy ask to assess someone's skills in a one-hour technical interview. And now it's even harder. Do you have any thoughts on what to look for as an interviewer and how to assess skills? Yes, we, we kind of covered this on a previous episode, but I'll say it again. There's a really good post by someone that said, use Composer 1 or 1.5, or use a model that is fast but not very good, meaning that, like, you, you want to gauge.

• 36:46Wes Bos?

  How somebody thinks and tackles and approaches working on a codebase with these tools, right? Because like quite honestly, whether you like it or not, that's that's a skill in itself. But you also don't want them just to simply just like copy paste the requirement, paste it into the box and then sit there for while it generates, right? So with with a faster, lower power model, whether it's like composer or Kimmy or something like that, you can get an idea of like people's feedback loops going back and forth. It doesn't write all of the code for you, so you'll have to kind of jump in there and do do a lot of that type of stuff yourself. I think that that's such a good use case. Like here, here's the model that you're allowed to use. Here's the thing that I want you to build. Now go at it. And I kind of want to see you working on this type of thing because I don't think you

• 37:31Wes Bos?

  can anymore. I don't think you can judge go and do this thing and here is the output. Now, I was thinking about that even with like design, design Twitter lately, just everybody's ripping everybody off, you know? Everyone's just copying everybody's designs. And like you think about that, like if you're looking for a designer and you look at their portfolio, like is this something that they've they've come up with? Is this a UI that they thought like, hmm, here's a problem and here's how I solved it with this UI and here's something beautiful that I made? Or did they just find something that was was similar, pipe it into some machine and come up with something that is looks kind of similar and is impressive? So if I was interviewing a designer, I would almost have to like, I don't know, what do

• 38:16Wes Bos?

  you do? You maybe the Figma history?

• 38:18Scott Tolinski?

  Yeah.

• 38:19Wes Bos?

  In schools, they're doing that now, too. You have to write your essay in this one app because they want to be able to like scrub back and forth and see that you actually typed it yourself.

• 38:30Scott Tolinski?

  Yeah, you didn't just copy and paste it. Yeah.

• 38:32Wes Bos?

  Yeah. So I think that's probably a good one. I also would ask a lot more like architectural questions.

• 38:39Scott Tolinski?

  Yes.

• 38:40Wes Bos?

  Because like that's so much of the job now is just like, how would you tackle this thing? How would you set this up? How would you do queuing? How would you manage concurrency? You know, all of those kind of higher level questions, which is like, how do you design the system so it's not going to fall over in a little bit? How do you how do you build something? Here's another thing that I've been thinking about a lot lately is like, how do you? How do you build these tools that you can access it on the CLI and in the browser, but also maybe make an MCP server? You know, like, what's the best way to build the core functionality API and then surface it via these different mediums?

• 39:17Scott Tolinski?

  Yeah, you know what? You know, I think that is really the kicker because like coding interviews have always been tough from the start because you're often handling someone's ability to not work in a real environment. It's like, oh, I'm writing this code. I gotta, you know, potentially solve a problem that maybe I haven't solved before because I haven't had to encounter those APIs or now I gotta think about what those APIs are. And maybe I haven't even actually used them before. And then is that going to actually truly determine if I know how to code or if I understand the bigger choices? So to me, like, I think a skilled interviewer can learn so much about someone and what

• 40:00Scott Tolinski?

  they actually know, just diving into those architectural questions or like talking it through more than just being like, here, code up this thing. Because like, if somebody is BSing you, if they're BSing you, you should be able to determine like, hey, I know that's BS. I know it, right? Like, I, to me, if you're, if you're a skilled interviewer and somebody like has a surface level understanding of something and you're asking them to explain why they would make those choices and get deeper into that stuff. And to me, I don't know, maybe it's just because I have a good detector of that, but I can tell when somebody is just like, I read the, the Cliff Notes here and I haven't actually done it.

• 40:44Scott Tolinski?

  I've never been in that.

• 40:46Wes Bos?

  Never actually done it.

• 40:47Scott Tolinski?

  Yes.

• 40:47Wes Bos?

  Yeah, it's hard. It's hard because also like, there's part of the skill where we do like stumped where it's just like, I, we know obscure TypeScript facts, but like, does that translate into building good web products?

• 41:02Scott Tolinski?

  Don't.

• 41:02Wes Bos?

  Sometimes. Yeah.

• 41:03Scott Tolinski?

  No. I say no. I say straight up, no. Because I'm bad at it. I'll say that.

• 41:08Wes Bos?

  Yeah. You're bad at building web products, but good at obscure TypeScript facts?

• 41:12Scott Tolinski?

  I'm bad at memorizing facts like that, like little things here and there. Yeah.

• 41:20Scott Tolinski?

  I'm better at concepts. Next one here from Niels. Hi, Wes and Scott. Still love the show. Well, thank you for still loving the show. I'm the same person that asked the question yesterday about how to handle FOMO. Here's one more queasy. Queasy, okay. Queasy as in like a quiz? Or queasy as in gross? Yes.

• 41:38Wes Bos?

  Queasy question. It's probably Australian.

• 41:41Scott Tolinski?

  Queasy. I know it's a bad Australian. Okay. Do you have any best practice suggestions for how to manage your version dependent JavaScript development environments? In particular, I mean Node, NPM, PNPM, Bun, or any other tooling that comes with different versions. I thought we, the community, had settled on NVM, Node Version Manager. But that manages Node together with NPM. While it looks like PNPM should be preferred these days, all of my research so far has just left me puzzled with options and a little concrete solutions. Should I just globally Yolo install Node and PNPM? And then fix problems as I might run into them? That's kind of what I do.

• 42:24Scott Tolinski?

  That's kind of, that's kind of what I do, Niels. I just fix them as they, they fall in front of me here. I deeply hope the answer is not dev containers. Peace. Yes. Oh, man. I deeply hope that too, because all of that stuff just seems like a lot. So for me, what do I do? I, before, I, you know, it's pretty much PNPM for everything with me. And that's just how I manage things. NVM always just has like, almost always given me grief at points where I'm like, I don't know if version is correct. And it's telling me it's not across, you know, just like little things where I get frustrated

• 43:01Wes Bos?

  I get this one error with NPM that it's like something regressed in this version of NPM and you have to run this like, shmod command and that'll fix it. And like, it just comes back all the time and it drives me nuts.

• 43:15Scott Tolinski?

  Like, what's happening here? Yeah, I know. So for me, but more recently, I have been just using VIT plus for everything. But again, I haven't really gotten into Node version management. It's so funny because so many of my projects, I'm just like, whatever, use the latest version of Node. Use the latest LTS and then I don't have to worry about it. Because even though I have a lot of projects, I get to be in control of that. And I don't end up having that many Node version issues using older versions of Node. So I am not the right person. Wes, what do you do?

• 43:46Wes Bos?

  Yes, so Node has something built in for the package manager aspect of it. It's called corepack. And essentially, in your package JSON, you define, if you ever npm something or PNP install something, you'll notice that PNP adds a little package manager property to your package.json. And corepack is this idea that when you have a project, corepack will figure out, or knows that that project is using npm, PNP, or yarn. I think those are the three that it supports.

• 44:21Scott Tolinski?

  I remember there's a lot of controversy when that first dropped.

• 44:24Wes Bos?

  Yeah, whether that should go in there. Yeah, so those are the big three, right? So corepack is kind of a solution to that, but quite honestly, I don't use it, but I do like it when projects ship the support for corepack, because it's just like, oh, it uses yarn? Good, figure it out. Install the version of yarn that you need and figure out the weird command that you need to run. And I don't want to have to, like, anytime there's a project that's yarn, it's like, just yarn start. I'm like, I'm dead. I don't, it's not gonna work. Guaranteed, it's not gonna work. But if you use corepack, it kind of just like, does that for you, which is really nice. So there's that, but quite honestly, I don't use corepack all that often. What I use is, I use one called N, which is, you just go to npm.im/n.

• 45:09Wes Bos?

  You can find it. FNM is like the new Rust-based one that seems to be everybody is using. We looked at that in the State of JS episode. It seems like everyone's using that. But honestly, the V plus is where you want to be, because V plus manages both your environment, so which version of Node do you want to use? And it manages like your package manager, which is great, because you simply just need to type VP start or VP dev, VP run, whatever, and it will actually run it for you. Or VP install, you don't have to think, oh, this project uses npm to install. And like, that's another weird thing, is if you npm install on like a, on a PNP package, it like hangs forever.

• 45:54Wes Bos?

  You don't have to think about any of that. It's simple. It just translates the command to whatever package manager that is using. So unfortunately, the answer to all of these different tools is just like one tool that like sits on top and puppeteers all the things. And then it also will change your node version as well, but it will also change the node version just for a specific project, which is so good. If you have like, I often have like my own course thing, which needs a specific version of node, but then I want to try a lot of the like cutting edge node features. So I have to switch in between them as like a global node version. And that's annoying because it takes forever. It has to like copy, paste, sudo, it has to

• 46:34Wes Bos?

  do all those things. So I've been absolutely loving VIT plus for this type of stuff. So I would say use VIT plus, and that covers almost everything except Bun, and maybe they'll have Bun support in the future.

• 46:46Scott Tolinski?

  Yeah, I think that's, that's as good as an answer as there is.

• 46:49Wes Bos?

  Yes, just stick the version numbers in your package JSON, both for your engines, like which node versions to support and your package manager. All right, let's get into some sick pics. I got a sick pair for you, Scott. This is a little Amaran light. I know you have a couple of these as well, and that's why I initially got my first one. But I have the like big Amaran 150C, which is just like

• 47:15Scott Tolinski?

  Yeah, the sun.

• 47:16Wes Bos?

  Monster.

• 47:17Scott Tolinski?

  Yeah.

• 47:17Wes Bos?

  And it does different colors and everything like that. And I needed another one that was just like much smaller, just for like, kind of like a little bit of side light right here. Let me see if I can actually turn it on.

• 47:30Wes Bos?

  There we go. You can hardly see it in there. I need to re-point it a little bit, but this is the Amaran Halo 100X. And if you just need like a slim, it's a couple inches thick light that still takes standard attachments. I think they're, they're called like a Boden mount or something like that. That's what you need because So many people, when they're like getting like, oh, I wish my webcam was a little bit better. And you go on Amazon and you buy some like newer thing or whatever. Those are are OK lights, but they're not like they don't take standard attachments. They don't have standard inputs. They don't have standard hooks. And then when it comes time to like, oh, I want to add like a little soft box to this, you know, like maybe a tiny little soft box, or I want to diffuse it a little bit.

• 48:15Wes Bos?

  Then there's like no solution for whatever it is that light that you bought. So buying, again, I'm a big standards guy, buying stuff that is standard spaces was really important to me. So I got this little Amaran Halo light and it does just warm and cool. I don't think it does colors and it has like a nice little Bluetooth app. That's the one thing I don't like about is the Bluetooth on my desktop app. I have to restart the app all the time to connect to it. But I really like it because you can you can change it warm, cool. You can match the color on your camera, all that type of stuff.

• 48:47Scott Tolinski?

  I like that. I've never heard of that. They make great lights and I do love my massive one right here. And we've been doing more lighting setups. Well, I don't know if you've seen this, but in Courtney's podcast, Wes, we now have like a multi cam setup. And so I've been like having to really get into lighting and multi cam setups now because we started doing video for that. So that's been a whole thing. I got like backlights and side lamps and yeah, it's a whole thing. I'm going to sick pick a neat, a neat and a cheap little hack here that I have for keeping my computer screen clean, but also my glasses because I'm, I'm, you see me, I probably fix my hair a whole bunch. I touch my face all the time. I touch my glasses. I'm just kind of a fidgety guy like that.

• 49:31Scott Tolinski?

  And my glasses get all dirty, but also my screen does because I'm always touching it. So I bought this Zeiss lens cleaner. It's a glasses lens cleaner. It's really, really, it's like non alcohol based. It's water, proprietary detergents and preservatives. So who knows what's in this thing? But for 12 bucks, you get two of these giant bottles that you will absolutely never run out of, never. And like I've been using this thing for so long and it's like not even, you know, three quarters of the way. Or like it's still three quarters of the way full. And I use it to clean my computer screen all the time.

• 50:11Scott Tolinski?

  I use it to clean my keyboard, wipe it down, but trackpad, whatever. And I'm not, I'm not gonna be the person that says to just use it on your screen because who knows if that could remove, but I've been using it on my screen now for like two years and I've never had any issues with the screen, whatever that, what it with the, uh, the screen texture or whatever getting wiped out.

• 50:32Wes Bos?

  The nano coating.

• 50:33Scott Tolinski?

  So either way, screen cleaner, clean your dang screen, your screens are dirty. And, uh, I found this stuff works really well. Google to make sure that it's safe for your computer screen, but I, I've been using it for my computer screen for years now, so.

• 50:45Wes Bos?

  I have like the Logitech MX Master 3S. Um, and the biggest complaint with this mouse is that it gets like disgusting, like the, the rubber coating on it like disintegrates and somebody posted that theirs was doing this. I was like, yeah, mine's starting to do that too. And then I like looked at it closer and I was like, oh, it's actually just disgusting from me. So I like wrapped up baby wipe and like cleaned it. I was like, oh, this looks so much nicer now. I just assumed it was breaking down, but it was like cheeto dust and like, like Boto Kook and all kinds of disgusting prints.

• 51:17Scott Tolinski?

  So bad.

• 51:18Wes Bos?

  Yeah, it's disgusting. People's computers are so gross. I used to, when I worked doing like a boot camp, like that's all I did all day was I typed on other people's computers. And it's just like, some people's computers are just so nice and like dialed and other people is just like, what were you eating?

• 51:34Scott Tolinski?

  Oils and...

• 51:35Wes Bos?

  Sardine oil before you kids to me, you know, why are your keys like piano black?

• 51:41Scott Tolinski?

  Yeah. Oh yeah. Okay. So shout out, uh, also the creator of, I believe, let's see, the creative better touch tool has a, an app called keyboard clean tool that makes it so your keyboard does not register presses. So what I do is I spritz a little this on my little microfiber here. I turn on the keyboard clean tool and I, and I scrub it down and then my keyboard is nice. I tried to do that once a week because yeah, there's nothing crazier than seeing some of these nasty piano black. Yeah.

• 52:12Wes Bos?

  Disgusting.

• 52:13Scott Tolinski?

  Yeah, I don't like the way it feels. I get like weird sensory stuff from them. I'm like, ugh.

• 52:18Wes Bos?

  All right. That's it for today. Thanks so much for tuning in. Make sure you submit your questions to syntax.fm forward slash potluck and we'll answer on the upcoming.

• 52:27Scott Tolinski?

  Peace.

• 52:29Scott Tolinski?

  Peace.