Syntax - Tasty Web Development Treats

1002: The Real Pricing of LLMs

53 min
May 6, 202624 days ago
Listen to Episode
Summary

This episode explores the end of cheap AI pricing as companies shift to usage-based billing, discusses security threats from malicious code in interviews, and examines why developers should leverage native browser APIs instead of bloated component libraries.

Insights
  • AI pricing subsidies are ending; companies are moving to usage-based billing because current models are unsustainably expensive, with some users spending $300+ per day on tokens
  • Security threats are evolving rapidly—malicious actors now use AI to create convincing phishing schemes and backdoored code, requiring developers to be more cautious during interviews and when installing new tools
  • Native browser APIs (Details/Summary, CSS Anchor, Customizable Select) are being overlooked in favor of heavy component libraries; developers should focus on results and native solutions rather than chasing AI tooling trends
  • Interviewing in the AI age requires assessing how candidates think and approach problems with tools, not just their ability to generate code; architectural and design questions reveal deeper understanding
  • The competitive advantage in AI development comes from creative problem-solving and building useful products, not from prompt engineering tricks or secret techniques
Trends
AI pricing model shift from subscription to usage-based billing across all major providersIncreased security threats targeting developers through social engineering and malicious code injectionGrowing adoption of native browser APIs and CSS features that reduce JavaScript overheadConsolidation of development tools into unified platforms (e.g., Vite Plus) that manage multiple concernsShift toward smaller, specialized models for specific tasks rather than large general-purpose modelsCSS linting and code quality tools becoming more critical as AI-generated code proliferatesRenewed focus on architectural and systems design questions in technical interviewsDeveloper fatigue from rapid tooling changes and the need to focus on outcomes over tools
Companies
GitHub
Announced shift from subscription to usage-based pricing for Copilot, with cost multipliers up to 27x for newer models
Anthropic
Testing removal of features from $20 plan and tightening API access; Claude Opus 4.7 has 27x token multiplier cost
OpenAI
Model provider restricting API access and pushing users toward proprietary products
Vercel
Security breach requiring developers to rotate API keys; hosts malicious IP checker in security incident
Microsoft
Likely developing proprietary AI models to reduce dependency on third-party providers like Anthropic
Cursor
AI code editor developing own models to reduce reliance on Anthropic's Claude
11 Labs
Moved advanced features behind $20/month subscription with credit system instead of usage-based pricing
Midjourney
Image generation tool with subscription-only model and no API access; loses user images after subscription ends
Base UI
React component library providing complex accordion and other components when native HTML alternatives exist
Sentry
Error tracking platform used by Syntax podcast; identified API key and cache issues in their infrastructure
Upstash
Caching service used by Syntax; credentials required rotation after Vercel security breach
Firefox
Recently shipped CSS light-dark function with image support, demonstrating native browser API progress
Apple
Using CSS Anchor and ScrollSnap on Apple.com, demonstrating adoption of new native CSS features
Project Wallace
CSS analysis tool and linting project; developing style lint plugin pack for deterministic output
People
Scott Tolinski
Co-host discussing LLM pricing changes, security threats, and native browser APIs
Wes Bos
Co-host discussing development tools, version management, and interview best practices
Adib Hana
Shared story about nearly being hacked during crypto recruiter interview via malicious code with backdoor
Bart Veneman
Announced CSS linting plugin pack and inquired about csskit.rs for style linting
Keith
Working on csskit.rs, a CSS linting tool using Lightning CSS parser; contributes to CSS specifications
Courtney
Co-hosts podcast with Wes featuring multi-camera setup and video content; mentioned for psychological impact discussion
Quotes
"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?"
Scott TolinskiOpening segment
"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. But eventually things are going to have to be paid for."
Scott TolinskiLLM pricing discussion
"I think anybody who's been paying attention could have seen this coming, given the progressive movement of all of these companies moving in this direction."
Wes BosPricing trends discussion
"What are we actually building here? Sometimes I spend a whole week working on something that is just a tool as a tool for a tool rather than actually building anything useful."
Scott TolinskiCatching up on AI trends
"This component could have been a div."
Wes BosComponent libraries discussion
Full Transcript
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 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 because we love hearing about it. What's up, Scott? Good to see you here. Oh, hey, man. Good to see you as well. It's a fine day. Fine day this morning. Fine day. A 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 I think we're starting to see this not just with GitHub Copilevel. 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 thing. And now people are just like 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. Yeah. Unfortunately, the background, right? Yeah. Yeah. Change the background. But unfortunately, this stuff is very, very expensive. And for the last, I don't know, year, two years, whatever, 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. It's not just GitHub, but like Anthropic had, they were testing removing cloud 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. But eventually things are are going to have to be paid for. And I know that like, I don't know, what do you think the computer? Do you think that the stuff will get cheaper eventually? You know, like computers always get better and cheaper. Yeah. Yeah. 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 could have seen this coming, given the progressive movement of all of these companies moving in this direction. And I remember people talking last year saying, you know, the $200 a month quad coat 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 say, spend your tokens now because they're going to cost a lot more in the future. And I mean, I think that's really what we're seeing. I don't know if I mean, 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. 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 bottle 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 good. 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. Yeah, it gets expensive. Yeah. Yeah. Holy cow. 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? Which is crazy for what, you know? Yeah, 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, here is how much faster you're going to be using it, right? And like Cloud Opus for six, the multiplier was three. The new one is 27. So they're saying like this is essentially like multiple times more expensive than it actually was. And it's absolutely crazy. And 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 Anthropik or OpenAO wants you using it in a different product. They want using it in their product. And we've already seen this like 11 labs. I love 11 labs, but like all the 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 Mid Journey. Also like this. I subscribed to MidJourney again a couple of weeks ago just because like their image stuff is fantastic and the tooling around transforming or whatever. And like MidJourney has no API, right? There's you can't just simply pay. I needed to generate like a whole bunch of backgrounds. I was playing with my green screen 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. once. But I don't want to have this like ongoing thing. And then you your subscription is over and then you lose all of your images from the past. But unfortunately, I think that's the way it's going to go. Like I bet we're going to see a cloud in the future where you you simply just cannot use it via an API. You have to only use it via cloud code. Well, that is pretty much how the the cloud code max plan. 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 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 based billing, which costs a ton more. Yeah. So I think they want you to use that's probably the path for them to not be bleeding money on this stuff. You got to think that Microsoft is working on their own model because you can see like Cursor is coming out with 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 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 got to think Microsoft is doing that as well. 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, 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. Like a really good auto mode some of these tools have. Yes. I like that. Here's a fun question just about syntax. Yeah, y'all seem to have stopped doing the clever ad transitions. Now I hear is that jarring sound bite 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. 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 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? OK, now, you know, it just feels different for me for some reason. But DK, Donkey Kong, thank you for saying you like that. 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 in there. What do you think our top issue number of events is in Sentry right now for the Syntax website? For the Syntax website? Yeah. I bet my guess is something with the transcriptions Anthropic API key. That is one. So we had at one point we had had an old version of Anthropic summarizing them. And it turned out that when we implemented it, it was not very good. And we need to just bump it to a better model and maybe make a better prompt. And that'll be part of the new site. But at that point, we just 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 machine for that type of thing. And then there's another one. Invalid username password for Upstash. Scott, our caching. invalid wait is that one when was the last time that one went away though when was the last time triggered about three minutes ago three minutes ago okay i did rotate it just popped up keys it came back you can see in our century that it popped up maybe last week looks like you probably fixed it within the last week right well no here's what happened uh we got a regression and Sentry is telling us. Well, you know, Vercel got pwned. Oh, yeah. 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 kind of surprising that I'm getting... You got a regression. I got a regression. So that means something's wrong there. So I got to fix it. The good news is the fallback for when that's not working is that it just doesn't use the cache. 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. There we go. Solve the problem in Sentry. Thank you, Sentry. Go to sentry.io forward slash syntax and 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 So basically he says I had an interview with a crypto recruiter We talked about 40 for 40 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 post the actual code of what happened and simply by cloning this thing. And I think it was a pre-commit, but basically it was an Axios call that spread process.env, which I didn't know you could spread process.env. I thought you had to know the actual key for it. Like I know you can't use object.keys on process.env. Maybe you can, but yeah, it's crazy. There's a little base64 encoded string, which turns out to be like a Vercel hosted IP checker. 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. And what a crazy, crazy story. So certainly be very careful. It feels like this stuff's getting crazier in terms of just the amount of things we got to 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 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 and trusting because you are asking something of these folks, you know, their time for a job. what's crazy is that the like the guy used is like full face and camera and like all that stuff like not even who knows if it's yeah yeah yeah oh that's true actually yeah i mean there's been the ability for bad 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 in the box even 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 it was has this app been around for longer than this because I don't feel good about these new apps that are vibe coded because somebody can simply just say like here's let's make something useful but also throw a back door in there yeah there and I'm so because I am I've been a long time subscriber to whatever that mac apps reddit is and 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 secure, potentially insecure software. And you do that because you're so used to apps like that being signed and somewhat trustworthy. 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. 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 yeah it feels like it feels like the security thing has gotten really crazy lately I mean like everybody lots everybody's gonna have stories of yeah yes and next one from Max hey Scott and Wes huge congrats on the 1000th episode Thank you, Matt, 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. Thank you. 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. 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 Dan and Dan. 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 as we as we march on and every single person that, you know, is creating an AI agent orchestrator like everybody is like, oh, I'm going to have this really novel idea of creating an agent orchestrator, you know, something that's never been thought of. and uh 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 oh hell yeah because 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've got to 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 and 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 spend 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 sucks to feel that way. Like, wait a second, what am I actually building here? Right. What am I actually need to focus on? So I would I would say focus on on the results first and then work backwards from there. Yeah, 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 write code. And the frustrating part about that is in two months, a lot of that is unnecessary because it's just been rolled into 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. 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. 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, 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, 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 and lists of skills and all this BS, you're not going to like get ahead in in your career by being that person i don't think i'm g stacking man i'm g stacking exactly like those yeah those things are not like any sort of competitive advantage for this type of thing my agent my my agent skill says make it good though yes yeah exactly you know that's so frustrating so like like where you will have have a competitive advantage 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 yeah 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 more exciting. But that will wear off eventually. And the table stakes of being able to build anything is sort of on the table there. 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. You know what I mean? 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. Cause 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. Next question from Steven Gregg. He says, I'm interested in your take on using React UI components versus native browser solutions. A specific example, base UI's accordion component versus HTML details summary. I'll throw in another example is just like drop downs, customizable drop downs. 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, it feels like adding accordion. Battle testing. It's true, though. Sometimes there's edge cases 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 we have CSS Anchor and customizable select And we talked about this on the podcast every week 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 ScrollSnap for one of those 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 I think it's made worse by the LLMs not giving you those things by default. I have to explicitly ask and know I want to use ESS 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. I think it will get much better once these types of things are sort of they make their way into the component libraries. I don't think we're going to get rid of component libraries. Probably we won't have a need for some of the components here or there. But generally, 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 just going to be some HMO with some classes and maybe a little bit of JavaScript here and there. to fill in different interactions that you want. 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 code base? 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 in summary. And I get it. Details in summary, maybe not the most advanced API. It's an accordion. This base UI drives me nuts. And it's not just because 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. Yeah, because apparently we need eight components to do a stinking accordion. Accordion dot root accordion dot item accordion dot header accordion dot trigger. like i don't know is like this garbage no what is this but like that those are just like it's composable right like you can if you were to do that compose the accordion trigger outside of the accordion uh root why like why do we need all of these individual pieces 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 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 now the composability but it i agree it drives me nuts that like this is i have to now know about these 18 different items here because these are just like wrappers accordion dot panel but inside of that is the actual html so it's not even taking care of that accordion header 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 i don't think they're actually you really think people are sitting around being like you know what i'd like to do super complicated accordion doing that no they're just 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. Details and summary was added to the browser in 2011. What? Yes. Okay, but it wasn't animatable for the long time. You know, there was all these, like, gotchas where it's like, ah, 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 not in 2011. Right? We got animatable detail summary in like the last year or so. Sure. That's all. But I agree. 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. For me, it's like it just the what you're getting out of it does not match what you're putting in. And sometimes they're set up to handle every single possible use case under the sun when you may not need that. You can make your own accordion component with details and summary in about 15 seconds, you know? 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 for a glorified div with a click handler on it uh shout out to uh jsnation in react summit i'm going to be out there in amsterdam this summer and my talk is all on well my talk at react summit is uh going to be largely based on this wes is is you're gonna get shot scott going to react summit no it's like you don't need react for this you you know hey it's great yeah it does so much good it's just so much stuff does so much good stuff but this component could have been a div how about that yeah that that should be the name of it this component could have been a div i love it hey i love it next one here from bart veneman of project wallace hey webmaster project wallace here i 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.rs yet? It aims to be a sort of OXC, but for CSS. The maintainer is Keith. Keith, I'm so sorry. Is it Circle or Kirkle? Uh, C I R K E L. Sorry, Keith. Uh, he works on the Firefox browser. It uses the same CSS parser as lightning CSS. He also wants to incorporate linting into CSS kit. Looks like you are both in the same boat. Anyways, wanted to let you know, I have not heard about this part 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 css kit lint styles.css very similar based on lightning css as well analyze for deep yes uh 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 both as a CLI, but also as a cool little website. So, yeah. No, I haven't seen this, but I love this. CSS kit. 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 writes a whole bunch of the specs. Anytime I ask anything about any future spec, he comes in and chimes in with it. So he knows CSS specs super well. Okay. Do you know how to pronounce his last name? No, no, I don't know how to pronounce anybody's name. I probably can't pronounce my own name. Oh, I recognize his face here. Okay. I am. Yes, I know, Keith. Sorry, Keith. I didn't recognize your last name here. 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, well, I'm starting to crank out all this slop. You need these guardrails and these tools that will stop them from adding text, letter spacing, 0.2 em to literally every single selector. Background color, white, white div already. can we add a um a style lint where it doesn't do that it doesn't do a border dash left on on a card when you also have a border radius you know that little fingernail that the ai puts on everything there's so many funny ai tells like the little the boxes with the icon and the text it's like yeah 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. Next question from J-Dog. 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 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 you want to gauge how somebody thinks and tackles and approaches working on a code base with these tools, right? Because quite honestly, whether you like it or not, that's a skill in itself. But you also don't want them just to simply just copy-paste the requirement, paste it into the box, and then sit there for while it generates, right? So 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 a lot of that type of stuff yourself. I think that that's such a good use case. 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 this. I don't think you can anymore. I don't think you can judge, go and do this thing. And here is the output. And 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 similar, pipe it into some machine and come up with something that 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 you do? Maybe the Figma history? Yeah. 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. Yeah, you didn't just copy and paste it. Yeah. So I think that's probably a good one. I also would ask a lot more like architectural questions. Yes. 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 this system so it's not going to fall over in a little bit? How How do you build something? Here's another thing that I've been thinking about a lot lately. It's like, 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? What's the best way to build core functionality API and then surface it via these different mediums? Yeah, you know what? I think that is really the kicker because coding interviews have always been tough from the start because you often handling someone ability to not work in a real environment It like oh I writing this code I got to 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 got to think about what those APIs are and maybe I haven't even actually used them before. And 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 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 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 if 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. I've never been in that. Never actually done it. Yes. Yeah, it's hard. It's hard because also like there's part of the skill where we do like stumped or it's just like I we know obscure TypeScript facts. But like, does that translate into building good web products? No, sometimes. Yeah, no, I say no. I say straight up no, because I'm bad at it. I'll say, yeah, yeah, you're bad at building web products, but good at. No, I'm bad at facts. I'm bad at memorizing facts like that, like little things here and there. Yeah. i'm better at concepts next one here from neils 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 question it's probably australian quasi i know that'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, Bunn, 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 that's kind of that's kind of what i do neils i just fix them as they they fall in front of me here uh i deeply hope the answer is not dev containers piece yes oh man uh i deeply hope that too because all of that stuff just seems like a lot so for me what do i do i uh before i 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 version is correct and it's telling me it's not across you know just like little things where I get frustrated with one error with npm that it's like something regressed in this version of npm and you have to run this like schmod command and that'll fix it and like it just comes back all the time and it drives me nuts like what's happening here yeah I know so for me but more recently I have been just using Vite 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, use the latest LTS. And 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? Yes. So node has something built in for the package manager aspect of it. It's called core pack. And essentially in your package JSON, you define if you ever NPM something or PNPM install something, you'll notice that PNPM adds a little package manager property to your package JSON. And core pack is this idea that when you have a project, core pack will figure out or knows that that project is using NPM, PNPM or Yarn. I think those are the three that it supports. I remember there was a lot of controversy when that first dropped. Yeah, whether that should go in there. Yeah, so those are the big three, right? So CorePak 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 CorePak 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 know. It's not going to work. Guaranteed, it's not going to work. But if you use Corepack, it kind of just like does that for you, which is really nice. So there's that. But I'll 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 forward slash N. You can find it. FNM is like the new Rust based one that seems to everybody is using. We looked at that in the Stata.js episode. It seems like everyone's using that. But honestly, the VitePlus is where you want to be because VitePlus manages both your environment, so which version of Node do you want to use, and it manages your package manager, which is great because you simply just need to type vpstart or vpdev, vprun, whatever, and it will actually run it for you. Or vpinstall, 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 pnpm package it like hangs forever you don't have to think about any of that it simply 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 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 pseudo it has to do all those things so i've been absolutely loving v plus for for this type of stuff so i would say use v plus and that covers almost everything except bun and maybe they'll have bun support in the future yeah i think that's that's as good as an answer as there is yes just stick the version numbers in your package json both for your engines like which node versions is for it and your package manager all right let's get into some sick picks i got a sick pick for you scott this is a little amaran light um i know you have a couple of these as well and that's why i initially got my first one um but i have the like big Amaran 150C, which is just like the sun monster. Yeah. 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. There we go. You can hardly see it in there. I need to repoint it a little bit. But this is the MRN 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 Bowden 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 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. 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 space is was really important to me. So I got this little Ameren 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 change it warm, cool. You can match the color in your camera, all that type of stuff. 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 multicam setups now because we started doing video for that. So that's been a whole thing. I got like back lights and side lamps. And yeah, it's a whole thing. I'm going to pick a neat and neat and a cheap little hack here that I have for keeping my computer screen clean, but also my glasses. Because I'm I did 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. 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 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 i use it to clean my keyboards wipe it down but a trackpad whatever and i'm not i'm not going to be the person that says to just use it on your screen because who knows if that could remove but i've been using on my screen now for like two years and i've never had any issues with the screen, whatever that, whatever the screen texture or whatever getting wiped out. The nano coating. So either way, screen cleaner. Clean your dang screen. Your screens are dirty. And I found this stuff works really well. Google to make sure that it's safe for your computer screen. But I've been using it for my computer screen for years now. So I have like the Logitech MX Master 3S. And the biggest complaint with this mouse is that it gets like disgusting, like 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 looked at it closer and I was like, oh, it's actually just disgusting from me. So I like wrapped up baby wipe and 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 Botokook and all kinds of disgusting. That makes me cringe. 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 is 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? Oils and sardine oil before you gave this to me? You know, why are your keys like piano black? Yeah. Oh, yeah. OK. So shout out. Also, the creator of, I believe, let's see, the creator of Better Touch Tool has a 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 scrub it down and then my uh keyboard is nice i try to do that once a week because yeah there's nothing crazier than seeing some of these nasty piano black yeah disgusting yeah i don't like the way it feels i get like weird sensory stuff from them like all right that's it for today thank you so much for tuning in. Make sure you submit your questions to syntax.fm forward slash potluck and we'll answer on the upcoming. Peace. Peace.