714: Camping, Burnout, and Chris’ CSS Talk  🔗 **Source:** [714: Camping, Burnout, and Chris’ CSS Talk](https://share.snipd.com/episode/40cfb16a-8bdd-4da4-8874-b0ecd15d647c) ## Highlights - **Triage By Turning Off Plugins And Browsers** - When users report breakage, ask them to disable browser plugins, try another browser, or use incognito mode before you dig deeper. - Chris Coyier and Dave Rupert cite CodePen and CSS-Tricks support cases where extensions or corporate network blocks were the root cause. Transcript: Chris Coyier A little off grain on your website, to what responsibility is it like the website owner to fix your thing? And it's like that is some serious gray area. Because if it's like, what if the weird thing you're doing is using a slightly unusual browser what if it's even just firefox or something i think we're all on board with like yeah you Should probably fix it for firefox dude that's like a major browser in the world or like but what if it's like uh accessibility software that is even more esoteric like yeah you should Probably fix it for that too if you can you know like it not everybody uses voiceover or jaws or whatever maybe it's you know but then it's like well what if i installed like any plugin not Of the of the chrome star any combination of plugins do you have to fix it for any combination of plugins from the plugin star uh i would say maybe no you know i bet you get this a lot i that Dave Rupert I was you know i think of like you know a well shoot like ads getting turned off you know for like css tricks everyone loves css tricks everyone loves chris no one wants to give you money Through ads, you know. But then like the same with CodePen, right? Like I'm sure people are – you're getting all these bug reports that are just like, the editor is not working, you know, and you're just like – or I invented a language. Can you please support that? Chris Coyier You know, and you're like, what? Just – I don't know, dude. Almost always a plug-in like plug that's a really common right back is like just turn off your plugins try a different browser try incognito mode something there's a good chance that Fix it um which is okay sometimes it's like i have a really weird keyboard that i mapped weird and i can't do some keyboard command on your thing i'm like yeah if it's keyboard ([Time 0:01:10](https://share.snipd.com/snip/7eda209d-235f-4e15-99bc-bad2b3e48cbb)) - **Chris Bought A Winnebago Revel For Local Camping** - Chris bought a Winnebago Revel camper van and is already outfitting it for frequent local camping trips with his kid. - He noted features like Ram Rack mounts, solar, shower, cassette toilet, and a dinette-to-bed mechanism that sold him on the van. Transcript: Chris Coyier I got, I got why don't you clawed that from a really good friend the other day and he was kind of right although couched it pretty well so we can talk about this later but i bought a camper Van dave uh winnebago revel i'll send you the link it's really cool used of course i knew they're like 250 or something insane i don't understand that anyway yeah well you have to think Dave Rupert Of campers as the cost until you resell it does that make sense like i don't i'm not good at that i see a camper it's like 45 000 and i'm like no like but aftermarket is 20k and so i'm only paying 20K, you know, right, I am. That's still a lot. Yeah, you probably should think of a lot of stuff in that way. Chris Coyier But yeah, I mean, these are, they're just ridiculously expensive. And only a few years later, this one is halved in value, which I think is probably worse than a car resale market. I don't know, they got really popular during the pandemic. Dave Rupert Yeah, so you got the Overlander. You're doing hashtag van life. You're going to live out of the van, travel the world, you and a dog, and just vlog it. Chris Coyier Hey, friends, I'm Chris. I get the feeling that this one maybe had some vlogging going on in it, because there's these things called the Ram Racks in it. Ram Rack Row, maybe, or something. There's these there are these little strips and i was like what are all these things you know there's no excited it didn't but they they're just like a mount that you can slide things on And then screw in but i think looks like their main purpose if you go to their website and look at all the accessories, is mounting stuff. Mounting your phone, mounting your iPad, mounting a camera, mounting. And I'm like, man, if you had these all over the van, maybe somebody was just like getting lots of camera angles on their van life. Because I didn't see a lot of accessories that were more generally useful. Dave Rupert Yeah. Yeah. It could have been. Oh, wow. Interesting. That's a, that's kind of, I bet if you showed me a picture of it, I could find the van couple that was using it before you. I could find it. That'd be amazing. You're like a geo guesser, but for influencers. I'm a geo guesser for off-grid van life. Chris Coyier That's my, that's my, uh, no, it'll probably just stay in my neck of the woods up here. I'm not going to like travel around the entire country. And for one, I'm a freaking dad of a little kid who wants to camp, but we ain't going on month long road trips. It's like not happening, but we're going to do the camping around here is amazing. We're going to do lots of it. It's a good place. It's already, I've already, I've only had it for a few days. I've already, I've packed it full of, you know, it's like ready to go. You want to go camping? Let's go. Man, I might take you up on that. And there's a lot of state and federal land around here that you can kind of renegade on, which is the term sort of, I don't know if it's a generally regarded term. That's what I call it. When you just pull over and camp, you know, or you can get ([Time 0:09:44](https://share.snipd.com/snip/4cd097b7-f7c1-4ae8-9359-e7de52f7a58c)) - **Burnout Comes From Lack Of Control And Endless Sprints** - Burnout often stems from lack of control and perpetual sprint cycles without closure, not from loving the work itself. - Dave Rupert references HealthyGamerGG ideas and contrasts startup self-driven burnout with corporate loss-of-control stress. Transcript: Chris Coyier And i don't really have the burnout thing i mean mean, not that I'm totally invincible from it, but burnout tends to be related to like things outside of your control. And I think I'm such a control freak that I've designed my entire career to be just full of control. Dave Rupert Like I have maximum control. Chris Coyier I'd say, I'd say, yeah. Dave Rupert Yeah. I think I've learned through, well, like I'm definitely prone to anxiety or whatever, but I've learned like switching from like Paravel to a big company, you know, like it's really Different when like I was working for myself and I am too busy and it's like, I threw myself under the bus. I know that, like I did that, you know? But when I worked for a big company and I'm like working late and you know like having to do stuff it's like it's a very different feeling that like oh I did not throw myself under the bus This was something else you know and so um so that there's been times where like, that's been very educational. So, I mean, you know, I, I, you know, ideally, you know, there's a balance in the universe, you know, but yeah, you went from kind of one extreme to the other in a way. Yeah. There's, there's just, you know, it's, I think what's hard about engineers and there's like this, I found this video on do you know dr k healthy gamer gg or whatever on the he is he's like A what is he he's like a psychologist but he's was also like a monk or something or like a oh my god does a lot of stuff he's he's and he's like kind of takes psychology from like this gamer Angle or whatever and but he was talking about engineering burnout specifically you know okay how we're kind of prone to burnout because we work work work work work finish the sprint And then we're doing work work work work like we have a next set you know like there no like denim, there's no like ending. There's no like, you know, CEOs make people work, work, work. And then they all high five each other and go to Cabo to like on an executive retreat to plan something, you know. And like, you know, the engineers. Chris Coyier Yeah, kind of just the way it is. There's no satisfaction finishing a thing. Dave Rupert Yeah, we just, you know, there's a cupcake party or in the break room, but there's no, like, you know, there's no, like, it's just boom, you're slammed into the next sprint and cycle and Stuff like that. ([Time 0:22:40](https://share.snipd.com/snip/0b321422-b119-497f-823e-71e45cb57fe6)) - **Use AI To Amplify Teams Not Replace Them** - Treat small-team AI augmentation differently from large-scale cost-cutting automation; use AI to amplify skilled people, not replace them. - Dave emphasizes the ethical and practical difference between punching up (helping teams) and punching down (firing people to cut costs). Transcript: Dave Rupert Like a small team using AI to punch up is cool, like, or, you know, like to each their own. But like, you know, that's like the choice y'all are making so that you can do more to squash more bugs to release something faster. So your small company stays or you can hire one or two more people or something that's cool like when it's a big company that's like everyone has to do this so we get drive more shareholder Chris Coyier Value those two things feel different right like those feel yeah like different uh punching up and then punching down yeah that's kind of like that kind of i want to squeeze one person Dave Rupert So i can fire the next right right like what you know and but i i think you know all the data is showing like there's been these ai layoffs but very few i think i've i think somebody like tried To like crunch the numbers or something but that like there's really only been like 13,000 something, 16,000 jobs lost to the AI and tech. Chris Coyier Really? That seems pretty weirdly low. Dave Rupert Very low. But yeah, compared to like what's announced, right? But like there's, you know, but that's a big number, you know, but like I think as, you know, we're starting to see hiring numbers come back. And so that's good. But like, are they hiring at the same job or is it a lower job? You know, so I don't know that we have that data, you know, so. It seems like hard to get to. ([Time 0:26:44](https://share.snipd.com/snip/735c4934-c70b-43f5-846e-bd17d279a632)) - **Think In Three States For In And Out Animations** - Animating elements that toggle display requires thinking in three states: on the way in, open, and on the way out. - Chris says those separate states map awkwardly onto CSS selectors and need ordering and special keywords to behave consistently. Transcript: Chris Coyier Well, I have a talk coming up. I haven't done a talk in a while. Whoa. Tomorrow, I guess. Although it'll be done by the time this show comes out. It's with the Smashing Magazine folks. Good friends. I'm so glad they do these kind of things. Also, it always makes me think of Christopher Schmidt, how he was so early in the online conferences thing, especially the niche topics ones. You see a little bit more of that, but Smashing is doing a good job with them now. It's a CSS specific free online comp, online comp. Um, so again, you'll miss it if you're hearing about it for the first time here. It makes me remember to, I should really hit it hard today on the, the socials. Yeah. Um, And what else? Is that the only way to tell people stuff? Yeah. What is it called? Meets Style Sheets? Something like that. Dave Rupert Style Sheets Meets Style Sheets. Meets is their online brand, and Style Sheets is the conference. Meets Style Sheets. Chris Coyier That's somehow so smashing to me to have it be like a weird tongue twister, but it actually makes sense somehow. Yep, free. I don't know how they do it for free. They must have sponsors and stuff. I literally don't even, I've never really quite known how conferences work. Yeah, I'm going to talk about, I'm calling it in and out. In and out styling. Okay. Meaning, you know, okay, I'm going to do it quick. ([Time 0:32:26](https://share.snipd.com/snip/4a52df33-cefa-4d8f-a312-c9a2923e3a4c)) - **Place Starting Styles After Open Rules** - Use @starting-style (or starting style rules) placed after your :open rules so initial transitions run correctly on first render. - Chris warns that starting styles have no extra specificity so ordering matters to override open-state styles. Transcript: Chris Coyier And then when it's opened, it becomes display block. The first time it's ever rendered on the page, it's already colon open. So all the styles for colon open are already applied to it. So even if you have a transition on a bunch of that stuff, the transition doesn't run. It's just boop, there they are. The first time it's rendered on the page, you get the open styles, not the closed. So you have to write at start. You either have to old school it and write some keyframe animations that bled in or whatever, which is a little old school. Or you have to write at starting style. But at starting style doesn't have any specificity to it. So you're writing at starting style and ampersand open, and then you're writing a bunch of styles in there. Well, you have to be really careful where you place that block inside your dialogue styles. You have to kind of place it at the bottom because it's not adding any extra specificity to the party and it has to override your open style. So you have your open styles and then your starting style size below it. ([Time 0:36:10](https://share.snipd.com/snip/1adca24c-c65d-48ba-980f-cbaa61158737)) - **Pair Debugging A Minimum Viable Design System** - Dave is building a post called Minimum Viable Design System and prototyped accordions and tokens while pairing with Chris on animation issues. - They debugged a details/accordion example live, surfacing specificity, transition-behavior, and allowed-keyword pitfalls. Transcript: Dave Rupert A little bit more like, I don't know, these are the... Oh, interesting. Yeah, I actually have an example here. Do you want to work through this with me? I can, sure. Chris Coyier Well, I just uh here let me share i've been thinking about it a lot lately of course because i'm getting this talk together it's one of those things like man this is all possible at css but I don't think the average css person has this all locked and loaded in their head there is a lot of weird crap i absolutely don't wait what are you seeing right now? My whole entire screen or not? Minimal viable design system. Yeah. Okay. And that's it. Yeah. Dave Rupert So I'm working on this post called the minimum viable design system. It's just kind of like this idea of like, you know, design systems are super weirdly complex, right? Like there's so much crap, like, and, and, you know, like a mature design system has like 40 components, right? But I'm trying to get to this idea of like, what are the, what's the minimum number of tokens? And what's the minimum number of like components you would need to inform the rest of the design system? So like you have a checkbox here, right? Like, what do you need to do to style these radios, you know? And like, I'm going to spoil this, but you do accent, color, whatever, var, color, accent, you know? And, you know, hopefully that applies, but... Chris Coyier Well, we're red, which is a little unusual, so maybe it is working. Dave Rupert Well, I probably messed something up, or I don't know what's going on. Anyway, that used to work, so I'll have to figure out why it doesn't. Maybe I, oh, well that should work. I don't know. I don't know why. Chris Coyier Is that actually a style element with content editable and all that? Dave Rupert Yeah, it is. Yeah. But anyway, but I'll fix that. But it was just kind of this idea, but I was getting into, you know, animating this thing, right? You know? Yeah, that looks good. Chris Coyier Oh, but they, something's weird though. Dave Rupert I'm animating kind of clip height, right? To auto, which is cool. But then there's that, like the calc size and I have all this, you know, accordion stuff here. Chris Coyier It doesn't, it's not animating closed. It's only animating open. Dave Rupert Yeah, it's not animating closed. So if I understand sort of what you're saying was I should do like a not open or whatever, like DS accordion. You can do it above open or something. Or I could do it on the root. Chris Coyier No, you need to do it on the details content for one thing. Oh, okay. So you can just do it where your cursor is blinking right now, above the starting style. Okay. Dave Rupert That works too. Yeah. Or up here. Details content. Oh, I mean, I'm in there. Okay, yeah, I'm in there. Chris Coyier You're already in details content, so you'd write. But your DS accordion is the thing that has to be not open, not the details content. So you probably had it right, actually. Oh, well. Oh, this is so complicated, isn't it? Let's just do it, though. Yeah, you're right. You got it right. Now you can put height zero in that. I don't know that it's going to necessarily do it, but you are doing. No, there's some other stuff that we need to explore as a part of that, I think. ([Time 0:37:20](https://share.snipd.com/snip/d0eebc55-ae50-4028-af80-a6a95c7cbd0c)) - **Set Transition Behavior Per Property Not Globally** - Use transition-behavior values selectively: allow 'discrete' for display but keep other properties interpolatable. - Chris suggests 'auto, discrete' or specifying which properties are discrete to avoid broken open/close animations. Transcript: Chris Coyier Stuck. You know what I think it also might be, you know, how you said transition behavior, allow discreet. I think you want to allow discreet only on display, not height. So you want to go auto, comma, discrete there, you know? Oh. Or whatever the default is. Display? You know how you have two values for transition property, height and display? Transition behavior has two as well. What a devil word. No, but that's going to be part of the solution is how you do it. Yeah, okay. All right, well, no, I'll do it. ([Time 0:42:40](https://share.snipd.com/snip/1a47f6ba-4111-401a-bf23-7ab6916baeea)) - **Enable Backdrop Animations With Overlay And Discrete** - To animate dialog backdrops, allow the parent dialog to use the overlay/overlay keyword and include that in transition allowances. - Chris points out backdrop animations require 'overlay' on the dialog and transition allowances like 'overlay' and 'display: discrete'. Transcript: Chris Coyier And then notice the open state has an ampersand cool and cool and backdrop, which is that gray background that you get. Maybe you don't even want to touch that. But I think it's really weird when a backdrop instantly appears and then a dialog fades in. They should just all fade in together. It looks way better that way. But now you need an on the way in style, an open style, and an on the way out style for colon colon backdrop. And then you do all that work and it doesn't work. And it doesn't work because you need to know this special keyword called overlay that you put not on the backdrop, which feels like an overlay, but you have to put it on its parent element, The dialogue, and that has to be allowed to screen too. Like there's a hundred percent chance you're going to forget that. Yeah. That's wild. But that look at if that's gone, I just get rid of it and put it there. It's this overlay keyword. That's part of a transition. You can see. Yeah. Dave Rupert It's just not sure. Chris Coyier It's like, yeah, it seemed to be working better than I thought it was. But there's something weird going on there. Maybe it didn't re jigger. Anyway, it is an important keyword that's required. And but I was I was at a working group meeting where somebody proposed not needing that. Or maybe it's here. That's also respecting this kind of thing is important too, right? ([Time 0:45:56](https://share.snipd.com/snip/87facb66-d3a0-40c8-8438-f04de2724931)) - **Starting Styles Make Interrupted Animations Smooth** - Starting-style animations are interruptible, so rapid open/close interactions smoothly rewind instead of restarting awkwardly. - Chris demos how interrupted transitions revert from current state to the intended end state for better UX. Transcript: Chris Coyier Is unbelievable. Does anybody have the same thing? You should write to the show for catharsis for me. If you choose to not share your whole screen and just share a browser or just share a window of the browser, you will regret it. It just. Dave Rupert Every time, right? Yeah. Yeah. Yeah. The new share behavior is just only that tab ever, right? It's never. Yeah. It's not the window. Chris Coyier Mine, it's the opposite, actually. It's the just share your whole screen because inevitably you're going to do something that is just what happened there. Dave Rupert Bounce to a code editor or something, yeah. Chris Coyier I won't show you all the demos, but I'll just show the popover one. You can see it now. Popover comes down from the top and fades out from the bottom. There's movement there again. So I think we use the little prefers reduced motion to stop it, but not the opacity. The opacity is okay to animate, but we remove, in this case, the rotation because that's the movement part of prefers reduced motion. And there's this other ideas that starting style are these things that are interruptible as they're called. So if I click this and click away from it or, and then bring it back, you know, it kind of came in from the bottom there. Yeah. Yeah. It means like, Oh yeah, you interrupted me. Let me just kind of revert back from where I am now to where you want me to be. It rewinds. Sick. Yeah. Yeah. That just means it's like, you know, you can click really fast and it, it kind of like, yeah, it doesn't just be like, ah, I don't know what to do. I'll just restart the animation from the beginning. It doesn't do that. It kind of just was back to where it needs to go. ([Time 0:47:50](https://share.snipd.com/snip/b8941b23-b52a-4fa4-a29b-40f31cb57191)) - **View Transitions Solve Appearance Across DOM Changes** - View transitions complement CSS three-state animations by handling elements that weren't in the DOM before opening. - Chris includes view transitions in his talk as a distinct tool for animating elements that appear and disappear across DOM changes. Transcript: Chris Coyier And that kind of points to Adam Argyle's aim technique, whereas one of the things that you can do on the way in and the way out styles is have it be attached to an anchor. And those anchors can be different anchors, as we've talked about before on the show so you can have it like come from where an area and go back to another area it's kind of so yeah he's having Dave Rupert Like a dialogue like slurp into a button you know like that's kind of fun totally like right but it can slurp out of a button and into the whole screen or something like the two anchors yeah Or if you're like i don't know like clicking an image you know that could turn into a like a light box with a fig caption explaining the data you know and then slurp back up exactly and view Transitions makes all this i've done it they're all in this talk fun and easy too you know like yeah it's just you don't need view transitions for what we were just looking at. Chris Coyier But that's a part of my talk as well is because instead of just that being display block, display none to display block a view transition can be I wasn't even in the DOM at all. And here I am now. That's actually like a little bit of a little bit of different stuff that you need for that sauce. ([Time 0:51:00](https://share.snipd.com/snip/b4b3aff4-c5c1-4d6d-9177-89a9fdc55bbb))