682: Whiskey, Security, Antitrust, and Fun With CSS Functions  ## Metadata - Author: [[ShopTalk]] - Full Title: 682: Whiskey, Security, Antitrust, and Fun With CSS Functions - Category: #podcasts - URL: https://share.snipd.com/episode/5b941c89-78aa-4dc2-965a-30e4f4681cb1 ## Document Notes ## Highlights - **Whiskey Guest Got Spicy Takes** - Dave received a bottle of whiskey after appearing on the Web Whiskey Whatnot podcast and joked he might have said spicy takes for clips. - He warned the interview might hurt his career but accepted it as part of doing it for content. Transcript: Dave Rupert Yeah. And so anyway, so they sent me a nice bottle of whiskey. But I may have said some things, Chris, that are going to hurt my career. Anyway, I just want to preface this. It's going to be out. Uh, I maybe, I maybe got a little spicy, uh, on the takes, but you know, you do it for the clips. ([Time 0:00:51](https://share.snipd.com/snip/27a4c57a-01fe-464f-9ea1-fbf3fdf9ac75)) - **Fewer Dependencies Reduce Supply-Chain Risk** - Dave and Chris note large dependency reductions in projects (Storybook) improve resilience against supply-chain attacks. - Fewer dependencies reduce attack surface and lessen fallout from NPM compromises. Transcript: Dave Rupert Like they've reduced the number of dependencies, which a week like this where NPM had a huge, huge vulnerability. Like that's amazing. I just want to celebrate that. I think like, you know, it's hard to like. Sweet. Yeah. To untangle the rat king of dependencies. Chris Coyier But like, man, if you can do it, that's great. We like ran the tool against our stuff and it's like oh we just somehow don't use any of those wow we just scooted it yeah yeah well yeah because it was in chalk was kind of the big one cinder Dave Rupert Sorhoes um you know and it was but it was a turn that's like making colors in the terminal right which is pretty standard for all these you know even the most basic cli tool you know is going To do that and then you know and yeah so and then you know strip antsy i think was one you know just like or you know where just like removes characters and stuff like that so um yeah yeah it's Chris Coyier Interesting the downstream stuff I thought was interesting too. It's like, those are compromised, but if you have, if you're a big project and you have it in your crap, that means people installing your crap are getting it. Right. So you have to responsibly disclose what you're doing about it. Yeah. Yeah. Dave Rupert There's, there's a, yeah, you have to kind of be like, Hey, there was a huge problem. ([Time 0:02:22](https://share.snipd.com/snip/21f82d5a-5449-4d52-be4b-df94f5348fa8)) - **Single Phish Broke Many Packages** - Dave described an NPM maintainer getting phished, which led to malicious code attempting to steal Bitcoin wallets in widely used packages. - He emphasized how one compromised account cascaded through many downstream libraries. Transcript: Dave Rupert Yeah well it's a catastrophe it's literally an open security hole that this guy, I think, got phished, right? To like, hey, update your two-factor NPM. Hey, we're expiring something, you know? And he's like, okay. And that one mistake, boom, all his base level library that's in these other 18 base level libraries got infected. And if you installed it, it tried to steal your Bitcoin wallet. Thank God. That's all it did. ([Time 0:04:20](https://share.snipd.com/snip/3d004531-37b3-4395-b78e-bab7681dd0f6)) - **Keep Two-Factor Enabled, Don't Remove It** - Don't disable two-factor authentication broadly to 'fix' reused-password problems; that removes a critical security layer. - Use better account-management practices instead of removing protections that deter attackers from taking control. Transcript: Chris Coyier A fun security one on blue sky. The other day it was a, it was one of those panic guys was posting a letter they got from their Portland area school thing. And they said, you know, there's a problem with accounts and, um, you know, kids account using the same password from account to account. So once they get one password, they can jump around and get some other stuff. Right. So they're like, yeah, this is a real problem. So their, their solution to the problem was to tell people to not do that. Also turn off all your two-factor auth. They're not going to – they don't want to have two-factor auth anymore because the problem is when your account gets compromised, then the attacker turns on the two-factor auth and Then they have the two-factor auth. It's like I ([Time 0:05:02](https://share.snipd.com/snip/f57aabfe-fab7-4da9-a575-9583438af639)) - **Use Physical Passkeys For Kids** - Consider using physical badges or NFC passkeys for kids instead of passwords to avoid constant resets and unsafe reuse. - Delegate parental approvals to a simple physical token to reduce password friction and supervision overhead. Transcript: Dave Rupert Can I tell you what I want? This is my billion dollar idea. I keep giving these away. As a parent of a child or whatever, or even for my kid, like, I don't want them to deal with passwords. I want them to have like a little credit card where they badge in to a website or a computer NFC. Oh, hey, you need to log in. Cool. Badge in. You know, I don't want them managing passwords. I want like a passkey through a physical device. Chris Coyier Because they're just going to do a bad job. Dave Rupert They're going to do a bad job. And somebody's going to steal this pass. You know, I look through my son's email occasionally. I don't know if he knows I do that. But it's all password resets. He doesn't remember the password resets. So he does the reset flow every time he has to log into something. So that's his whole entire life is just doing password resets. Oh, my God. But like a badge in. ([Time 0:06:30](https://share.snipd.com/snip/f17f5ded-38d0-41c1-a4b3-b6e9a40bcd35)) - **Kids Know Parental Passcodes** - Dave and Chris shared stories of their kids knowing parental device passcodes and overriding restrictions. - These examples highlight the limits of simple PIN-based parental controls. Transcript: Dave Rupert My personal iPad, without me asking, I was like, excuse me? And she was like, oh, yeah, I know your code. And I was like, brick. Chris Coyier That's a little, I'm going to have to change that. Yeah, I don't want to change it, you know? ([Time 0:09:00](https://share.snipd.com/snip/9c412319-8c86-426d-b1c9-b3f7461c2f89)) - **Antitrust Remedies Avoid Chrome Sale** - The Google antitrust remedies focused on opening search data and syndication rather than forcing Chrome's sale or banning payments. - Forcing Chrome divestment risked harming browser investment and downstream web innovation. Transcript: Chris Coyier Anyway, oh, you know, there's one thing I wanted to talk about that we didn't get a chance to last time was the news about Google or whatever. Mostly as follow-up because we talked about it on this show as being like a potentially very huge moment in our industry. And if you didn't pay attention to that, um, well, you win because it's a do nothing in the end. And that's what I was hoping for. I probably on the record saying that is that this doesn't have, this doesn't have a ton of merit to me. Like Google can and should get wrist slapped by the government in all sorts of ways but the the danger was that this like whatever it is anti-trust anti-privacy issue that isn't in court Now had the threat of and had the justice department asking for google to sell chrome being forced to sell it and there was you know open ai wanted it and didn't perplexity offer it. And, you know, there's people trying to get their hands on Chrome and not just me, but me saying that's stupid and not good for the web in all sorts of ways. For one thing, it's like a side issue to the actual problem too the problem was had some monopoly issues with search um so then fix the monopoly issue with search you know don't be like I'm going to attack you in some third some side way kidney punch you instead of solve the problem yeah yeah um i i think i, I don't actually know the full result. Dave Rupert Like what, what is changing? You know, stock markets seem to think there was nothing that changed. Chris Coyier Well, I'll tell you, everybody feels like they won. Google doesn't have to sell Chrome. Big win for Google. Google doesn't have to stop paying Apple. Apple doesn't have to stop getting paid. Great for both of them. Mozilla, just an easy street for Mozilla. Same old crap. And Mozilla represents lots, I think, lots of smaller browsers that benefit in the same way that Mozilla does. I don't think Mozilla's the only B-tier browser. That feels weird to say, but they kind of are. Browser that gets a search deal with Google. Like doesn't Vivaldi, wouldn't you think? Like how do they roll? Yeah, like small house. Yeah, and Google's like, sure, make Google the default. Here's a check that will employ a whole bunch of you. Enjoy. Yeah. Anyway, so that doesn't need to go away but they do here i'll read some of the stuff then the justice department thinks they won too so google's like sick you know nice man well here's the Google will have to make certain search in search index and user interaction data available to certain competitors. So they have to like open up search a little bit and even UX stuff. Google will also be required to offer certain competitors search and search text ads syndication services, which will open up the market by enabling rivals and potential rivals to Deliver high quality search results and ads to compete with Google as they develop their own capacity. So I think how, like, Kaggy uses Bing, or isn't that the deal? Like, you know, ones that, like, are built on top of Bing, that maybe you'll be able to build on top of Google, too. That's not going to happen overnight because Google's going to, just because they are who they are and they have a bunch of lawyers, will appeal all of this, certainly. Anything against them, they will, which is a little unfortunate because it just drags it out forever. But oh, well, pretty small. The big stuff doesn't change anything. We were crying. Not we. I don't mean to put words in your mouth. But what I didn't like is if Google's got to get rid of Chrome and they can't stop paying, they can't pay for placements, which probably would have been a little more fair. The Google just doesn't have much incentive to invest in the web. They still have some, but they'd probably almost, from being pissed, be like, well, why would we employ this huge staff of people we are, whose all their job is to improve the web? It's very like ROI is pretty sketchy on these people, right? Like they will just be gone immediately. I think. Yeah. You think they're going to invest in web.dev after that? Hell no, they're not. Farewell. That's what I would think would happen. That is not, that is just pure speculation, but I'd be worried so much about that, that this period of this fruitful period of the web growth is not all Google, but dude, Google contributes A whole bunch to the web. And if that were to disappear, I think that would be really bad. I think browser innovation would slow down. ([Time 0:12:30](https://share.snipd.com/snip/bdd4ff05-c5b9-4a86-8a30-217d9f9598d2)) - **Downstream Harms Shape Remedies** - Judge Mettá argued broad payment bans could cause 'substantial, in some cases, crippling downstream harms' to partners and consumers. - Removing Google revenue streams could reduce platform investment and degrade web tooling quality. Transcript: Chris Coyier Cutting off payments from Google almost certainly will impose substantial, in some cases, crippling downstream harms to distribution partners, related markets and consumers, Which counsels against a broad payment ban. If all of a sudden ain't no daddy Google money, the harms are many yeah yeah it could affect apple's willingness to invest in the they they stopped getting a 20 billion dollar check how's Dave Rupert That how's the team over at apple doing right well and i i think it you know is just ends up being this sort of it's gonna immediately become under investeded. And then, you know, what, what do we get next? You know? So I don't know. It's kind of like a huge, yeah. Downstream harms is a great way to put it. You know, like there's a huge fallout. I'm glad you listened to that. That's what I would ([Time 0:22:46](https://share.snipd.com/snip/ada9ac1a-67ff-48c6-a35a-4a098e874a2e)) - **Control Browser Translation With translate** - Use the HTML translate attribute to prevent specific elements from being auto-translated by browsers. - Set translate="no" on elements you want to exclude from automatic translation. Transcript: Chris Coyier Interesting. Yeah, well, what I thought you'd like is the values, which is not the presence of the attribute or translate false, like Booleans, because it's actually a Boolean. It's whether you want to translate it or not. But do we use true and false, Dave? No. No. No. We use no and yes. Dave Rupert Oh, good. Chris Coyier What a fun value. So you say translate. No. I don't think it's do. It's just funny to me when we don't use Booleans for Booleans, either. Right, right, right. Translate. No. Oh, that's so good. Dave Rupert That's so good. It's really funny to me. That makes sense. I guess like you don't want to translate. ([Time 0:26:29](https://share.snipd.com/snip/8f9dfede-fac6-4578-9f74-9277b6de2211)) - **Custom CSS Functions Centralize Logic** - CSS @function lets you create custom functions with results and nested conditional logic like media queries. - You can centralize layout logic (e.g., grid columns) inside a function and reuse it across styles. Transcript: Chris Coyier I have been looking at a couple of CSS things recently that have been out for a minute. One is at function. Seen that one. And if as well. So they're different, but they do have some relation to each other. And as I started going into it and looking at it, I don't, I'm not going to have like deep insight here, but I think people might be nice to know what it is. And then we'll do a little, although I'm going to have you vote on something and see, see what you think here. So, so at function is cool. There's so many functions in CSS already there. Those are just like a, just like in JavaScript, a word with a parentheses, you know, and you pass arguments to it. You don't have to. It can be zero arguments, but usually the point is passing in an argument of some kind. But, you know, I think there's like a hundred of them or something. There's kind of a lot, but at function makes you, you can make your own and then you get custom idents, right? Just how we always like that. Like if you're making up a word, it should be a custom ident practically. I think that's nice. The arguments that you pass in are custom idents as well. And then somewhere in the function, you have to, otherwise it won't do anything, have the result property. And the result is what gets returned out of that function. ([Time 0:35:28](https://share.snipd.com/snip/a3cf3658-a0a8-4922-94f1-3081797bb6f3)) - **Use Nesting To Avoid Repetition** - Prefer CSS nesting to reduce repeated selectors and keep related rules co-located for clarity. - Nest media queries under the selector to avoid duplicating selectors and improve readability. Transcript: Chris Coyier Three columns, one column. Three columns, one column. Okay. Number one, the way we used to write that is like this. A grid class has display grid, and then we said grid template columns, 1fr, 1fr, 1fr. Then before CSS nesting existed, we'd have to write the media query, then repeat the grid selector inside of that, and then put grid template columns 1fr. So it's these lines of code. And honestly, it's not really that bad when you look at it. Not that bad. Dave Rupert Nine lines good. Chris Coyier But you're repeating a couple of things, Dave. You're repeating the selector, and you're repeating the property that you need to repeat. Right, right. It's like, I don't know, like if you were going to argue against this code, perhaps those are the two things that you would poke at. CSS nesting gets rid of one of them immediately. And you can put them a little closer together in the code, which I always think matters. So now you have the grid selector, which you only ever write once. And you write grid template columns inside the grid selector, and then nested within that grid selector is the media query, then you don't have to repeat dot grid because it's just implied. Anything that's inside here applies to the grid, and then you say grid template columns 1fr. So I would argue that two is just almost just straight up better than one. Yeah. Except for that you might be repeating this media query a lot of times in your code more than you would here. ([Time 0:38:44](https://share.snipd.com/snip/d81aca98-711b-4a40-9bdf-d276f9789c67)) - **Store Layouts In CSS Variables** - Use custom properties (CSS variables) to store values like grid-template-columns and override them per breakpoint. - Define variables higher to share tokens across components and change them with media queries. Transcript: Chris Coyier Do you at Microsoft? So there's, now there's a custom property called calls, just meaning, you know, dash dash calls, one, f, one, f, one, f, now we set grid template columns to that variable. Then at the nested media query breakpoint, we reset the custom property of calls, dash dash calls to 1fr. That's interesting. And now we're not repeating the CSS property grid template columns. We don't need to do that. It's one less problem. Dave Rupert And like you know i think what's neat about this pattern is you're defining calls inside grid there but it could be defined on the body you know and shared across many things and then you Have like exactly you're right yeah you know so there's i i think like you know or like a token system like what if that's dash dash color brand or whatever, right? And it could be like, you know. Anyway, I think that's sort of like a pattern. That would be the advantage, right? Yeah. Chris Coyier Variables like this, you'd probably declare a little higher up than you immediately need because it improves the shareability. Dave Rupert But you could also then override that variable and you're saying, no, in this situation, make it this, right? Some seems, yeah. ([Time 0:40:50](https://share.snipd.com/snip/dc4f6ae3-0ccf-4c03-9a78-71a6b71fb857)) - **Functions Make Templates More Declarative** - Abstracting layout logic into an @function removes conditional clutter from the component and makes templates more declarative. - However, debugging moves to the function and source-order rules determine which result wins. Transcript: Chris Coyier And the function has the logic baked into it. So now I have the result of the function calls is 1fr, 1fr, 1fr. But there's a media query inside the function where the result changes to 1fr. Now, this is what I was talking about source order, Dave. If I put this here, the media query would never do anything. Oh, wow. Because the result is lower now. I guess that's like JavaScript. It's like last wins, right? It's not its source order matters here. But source order is a different concept than execution order. Because I could do weird stuff, like declare a variable down here and it doesn't matter it's not going to like not have the variable even if i use it up here it's like that's that type of Thing does not matter in css there's no like yeah execution order right right it does add this weird but if you know if you put like if you wrote that in code if it was result or whatever, Dave Rupert Background red, and then you had the media query, well, actually. Chris Coyier Well, here's an example of it, Dave. I, I, in this style, this is what was confusing to me at first is I have this function column logic. And if I uncomment this out, I put a supports query in the function as well. That works now because every browser, I put color equal color colon red in the sports query. Yeah. This will never be the result. This will never be the result. This one will only always be the result. Because every browser supports red. Because it's the lowest one. Yeah. And it's every is support. That's, yeah, that's a funky edge you got to know. Dave Rupert That's good. I like, I like to know that. Chris Coyier Yeah. It's funky, but I don't, I kind of like, don't hate it somehow. Yeah. So that's number four is when you abstract the logic into a custom function instead. Dave Rupert And you use that. How do you feel about this? Because I like this from a, I am pulling logic out of my template or out of my component, right? Chris Coyier That's it, Dave. Like it makes this piece of code, we think of CSS and we say, that's a declarative language. And it is, this is declarative, this is declarative. But to me, like this is declarative, like it's just a declared function or something, but this is like more declarative. ([Time 0:42:28](https://share.snipd.com/snip/6d2c6b10-59da-4d41-ada5-5086aa1d52b6)) - **Use if() To Consolidate Conditions** - Use the CSS if() function to consolidate multiple conditional results into a single expression for readability. - Prefer if() when many breakpoints apply, because it reads like a switch and avoids repeated result blocks. Transcript: Chris Coyier That there's two results. And remember, we talked about the lowest one down wins. So yeah, it's just a little funky or whatever. What the if function then can do in CSS, this is the first time I mentioned if, is that it kind of smashes together the value all in one. So now we only have one result function, but it's functionally the same. And the if, like the structure of if is like this, Dave, if parentheses, and you go condition, colon, value, semicolon, condition, value, semicolon, condition, value semi-colon Else value if you want to the else is a keyword and in these these conditions are like media or they are supports or there's a third one what is it i can't remember what it is right now it's So obvious and the only reason i can't just because i'm doing it live it's not container sadly it's something really obvious that you'll be like anyway so so that's kind of what's going On with the if function and we're just using media here so here's the condition the media is less than 500 pixels so you get one fr otherwise you get all the rest very kind of like does that Dave Rupert Read better it's a little bit like a switch statement isn't it yeah well yeah we miss do we oh uh no i yeah it should be switch maybe because because of all the different uh you never have To write uh i think that reads better. You know. Chris Coyier I can't decide. I can't decide. Yeah. Dave Rupert I think if you had multi conditions. That looks funky to me. Like, let's say you had like 10 different breakpoints up at the top. Well, if you had that. Now that's easier than if you were to do it in the number four example. You know? Right. So, because if you had what i did there for the people listening on audio is i just i made like eight conditions they're all stacked on top of each other and it really does actually i think I agree with they that looks nice you know that would be a you know and you're getting into like we've been dealing with these card layouts you know it's like if you have like height and Width that you're trying to do like that would be probably better to understand. Like, you know, just I don't know. Longer is more complex, you know, but because if you like go up to number four and like copy that media at media query and put like 10 of those. Chris Coyier Oh, right. Like, how's that looking now? Less good. Get me out of there. Dave Rupert Yeah, I don't want to do that. ([Time 0:46:50](https://share.snipd.com/snip/74b26669-77f8-49a3-b24f-70199b70d7b3)) - **Chrome Leads With New CSS Features** - Newer CSS features like @function and if() are shipping in Chrome first, so cross-browser support lags. - For many practical use cases, a simple fallback (e.g., 1fr) often suffices until wider support arrives. Transcript: Chris Coyier Now i think at function is the newer one which was chrome 139 i see i'm sharing i'm showing my dirty laundry i'm back on arc but i was convinced that i think this guy that spent 610 million Dollars on it is going to want arcC cruising along. But then I was immediately bummed out because Chrome was on 138 and functions were on 139. And I'm like, oh, God, I'm already regretting switching back to ARC whenever I had to use Chrome Canary for a minute. But then I think at or if is older and is like Chrome 136 or something like that. So these are, they're in stable Chrome now, which is something, you know. Dave Rupert I was going to see that doesn't look like it's in. Chris Coyier Which means Edge 2 and all that. Yeah. I've somehow like drawn the line where like when I talk about this stuff, I don't say blink and I don't say Chrome and friends or I just say like it's in Chrome and you're just going to have To extrapolate that yourself. ([Time 0:50:10](https://share.snipd.com/snip/0ec0495d-4268-406c-9e94-1712566ad28e)) - **Fun SVG Experiments On Matthias Ott's Site** - Dave praised Matthias Ott's playful site redesign that uses SVG filters and interactive controls to produce glitchy effects. - He recommended exploring the site for ideas on taking variables and effects further. Transcript: Dave Rupert I'm gonna give a shout out website of the week matthias Ott, if you've not seen his new website. Oh, did he redesign? I haven't seen it yet. Well, yeah, it's very similar, sort of. But then you go click the little levels button in the top. And just have a fun spin on all the little knobs he's given you. Holy wow. Are these SVG filters? They must be. Yeah, he really messed up his website. It's great. It's like computer crashing levels of fun. So, yeah. Tremendous. Chris Coyier How fun are these? Wow. ([Time 0:55:42](https://share.snipd.com/snip/ce9c7a78-cda1-44d8-ab2b-4b9901a24d7a))