664: Figma Sites, CSS Carousels, and Internship Prep  ## Metadata - Author: [[ShopTalk]] - Full Title: 664: Figma Sites, CSS Carousels, and Internship Prep - Category: #podcasts - URL: https://share.snipd.com/episode/4148569c-3cd1-4614-a556-65755d538b1d ## Document Notes ## Highlights - **User Acquisition's Strategic Value** - User acquisition is a major strategic goal in the AI industry and tech generally. - Companies pay significant amounts to gain users, even if individual user value is small. Transcript: Dave Rupert You know, like almost like, hey, we're just going to acquire a bunch of users, you know, which is kind of wild, you know, like how much does a user cost? You know what I mean? That's like I just think about that. Like how much would you pay for a user? How much would CodePen pay for 10,000 new users, you know, 10,000 new paying customers. Chris Coyier I mean, we get a lot of emails like that, uh, because that, because I think there's a lot of business that's up that operate exactly like that. Uh, you know, a new user is worth X dollars to us. Um, it's just, it's different when it's large scale freemium. That is true. Because I think one free user for us is like, I hate to say it, it's not worth much or anything. Dave Rupert Unless you had a search deal or something where you knew you could convert that into cash, right? Chris Coyier Yeah, and of course they are because a small percentage of those people do upgrade to pro. But, you know, I can't have, like, for example, we've never been able to essentially afford a salesperson because even our pro accounts, if you land them, aren't individually worth All that much money. So to have somebody out there trying to sell individual pro accounts is like, there's no like commission structure that would work nicely for that or whatever. So it'd have to be like big, big numbers. You know, we need millions of users or whatever. I'm almost interested in the other way around. Yeah. And schools notoriously don't have any money and are hard to work with. So terrible, you know, not a good. All right. You have to integrate with our Azure Active Directory that's maintained on the Blackboard CMS system. A lot of them, they'll write in and be like, just fill out this custom paperwork that's just unique to just ([Time 0:03:05](https://share.snipd.com/snip/ccfb65d8-5492-4791-820a-c1624c3cb4b4)) - **Polishing VS Code Enhances Experience** - Editing and tailoring code editor UI subtly can create better developer experiences. - Windsurf polished VS Code UI while maintaining familiarity, enhancing user appeal. Transcript: Chris Coyier Yeah yeah yeah answers that you'd think you'd know but are a little squirrely to figure out exactly yeah there's i don't know some people are always like oh man we did this marketing and Dave Rupert It was 100 users or what you know a thousand billion users and you're like really? Like just that one thing? Chris Coyier We'll go to your user's house and install cameras all over it and then you can just watch them. Yeah. That's not real, but it's similar to, what was it, Full Story or something? And Sentry even has something now that's just like watch replays of your users. Dave Rupert Yeah. Yeah. Chris Coyier You didn't ask them if that's cool or not, but yeah, you can now just watch them if you want. Can I just follow you around buddy? Is that okay, buddy? Yeah. And it's very, uh, like, uh, you know, you like, it's, it's amazing when you do it, you know, you're like, holy, look at that. That's really looking at what they're clicking. Why would you click that? Oh, maybe we should fix that. You know? Right. Incredible information, ethically dubious. Dave Rupert Yeah. Well, like if I always think of it, like if you walked into a retail store and just somebody was like, you know, with a clipboard following you around, like seeing everything you touch, You know, marking that down and seeing everything you like, at, like you'd be like, I don't like this store. You know, you would probably be like, this is not my favorite store, you know, but we do it on the digital side all the time. Right. Like, yeah. I was also, you know, thinking about experimentation, you know, like AB testing and stuff like that. Right. You know, and it's called experimentation. That's maybe a big euphemism for what it is. Okay. You know, like, oh, I'm going to make the button purple and see if people click that button more, you know? It's this weird thing, sort of like, you know, when you write tests for your code, like you're like pouring cement over your product. Even though it's called experimentation and you're supposed to be like wild and doing stuff, you know, like you, you almost create this incentive system where every pixel is more valuable Than the pixel next to it. And you're, you're just trying to figure out how to make every pixel as valuable as possible, you know? Um, so you have this, this sort of like just the chasing money, you know, money chart go up, uh, creates the system where you, uh, are the, the system is no longer flexible because every Piece has been monetized or assessed its value, you know, and it has every pixel has a dollar sign. And so like, now you have to make sure dollar signs only go up you know and so like it's just this you know kind of i don't know you know it takes sort of the gut decision making out of design That way you know that's like whatever the old uh doug bowman post about 40 blues probably applies here yeah you know but it's just hard. It's hard. Companies have to make money, hopefully. I mean, if you're not in one of those companies, please let me know. I'd be very curious how it operates. Chris Coyier It's a public benefit corporation. Dave Rupert It's called WeWork, and we are a public benefit corporation that owns a bunch of real estate. And then whatever, the guy from SoftBank gives us billions of dollars every year and we lease ([Time 0:09:08](https://share.snipd.com/snip/ed01ce8c-0421-4a5f-8ef9-0dd7921519c3)) - **Figma's User-Driven Product Growth** - Figma expands by turning user behaviors into dedicated product features. - They created distinct tools for design, collaboration, slides, drawing, and now site building. Transcript: Chris Coyier News about Figma. Figma had a big config, yeah. Yeah looks like some plenty of cool stuff i don't know how like what i what chunks how sizable the figma sites announcement was as part of that was it the main thing or a little sideshow Or something it doesn't look like beta though or anything they just like launched it it's figma sites you know it's like a new thing that you can build on there you know remember when they Launched the little meeting drawing tool thingy what do you call those a jam i think it's sweet i think it's one of the more successful products yeah um and but i i don't know is this is this Is there now designs uh jams and sites Is it like that level of importance to their world? Dave Rupert I think it's design dev mode, which is kind of design, you know. There's draw, which is they have new drawing tools like, you know, pens. That's brand new too, right? Like meaning you can draw. Chris Coyier Like one of the things I just quickly saw was that like, for example, the pen tool, you draw like a vector thing. You can apply like a brush to it like you could in Illustrator. I'm like, oh, wow. Dang. Dave Rupert Yeah. Yeah. That's a big. I used it this morning for like a little stand-up thing. I drew a little picture. So, but like they have slides, which is like what's sort of neat is like they saw people using Figma as a collaborative canvas. And so they made FigJam. And then they saw people like building slide decks in Figma. And so they made Figma slides, you know. And then they saw people, whatever, I don't know, fake drawing. You know, so they built drawing tools. They saw people like developers using the product. And so they made dead bones. There's just, and then, you know, people building sites. I think it's like a natural thing to be like, we should just build a site for them. I, I, I will say that what I like about Figma is they're like observing what people are doing and they are turning that into something valuable. You know, they're trying to spit value out, paving a cow path, you know, to make something cooler and better and easier. Chris Coyier I think that's cool. Figma sites. Well, let me correct right away. It is at that level. So now you go into the create menu. I just hadn't done this. Sorry. Bad journalism. They are calling sites beta. There's another thing called buzz, which is beta i've never haven't even heard anything about but i would guess that it's um a canva fight because i bet it has to do with like creating Dave Rupert Social media e stuff it's creative assets and then like kind of like you set up a template and then marketing can come through and fill it out you know they can upload a spreadsheet and Like like blurp out a bunch of versions of a social media card. You know what? I kind of love that. So good job. And these are all under the create menu. Chris Coyier It's all this stuff. One of the things that makes me think of immediately is like that. I read this great post about it. It wasn't even like a totally unique thought. It was just really making the point that like the Photoshop used to be thin and trim and hot too for ([Time 0:12:40](https://share.snipd.com/snip/60d409c5-06f5-435a-aad2-5ed87513f9ab)) - **Figma Sites Launch Issues** - Figma Sites launched prematurely with poor UX and accessibility issues. - It reveals challenges in merging design tools directly with code-based websites. Transcript: Chris Coyier Divs. And we just – they come out just absolutely slathered with accessibility problems. And even the user experience of it is like, oh, they come with a blank homepage. So then you hit the little play button to see your website, which you're looking at a bunch of crap on your screen and it's just white. And you're like, oh, oh, oh, wait, I get it. For some reason, you gave me a blank homepage with this template so that, I don't know, I could make the homepage or something. It's just this very weird experience, like maybe rushed for config or something. So I, you know, I wasn't planning to throw them under the bus, but like they need to be thrown under the bus about these sites. And I'm not the guy to do it because I also, I think that you should make sites probably with code. I think that's in the end, like a design tool abstraction for sites. I, I've kind of professionally bet and think that that's not the right call, but even if I'm wrong and this is the right call, well, it's not this. Sorry. Yeah. Dave Rupert I don't understand how you launched that in 2025 and are like, we did it dudes, you know, like we've had this conversation so many times. The team behind it is the team from Macaw, you know, who used to have this like website builder thing, you know, like design website builder. So like, I feel like they should know this, right? Like that, that's what kind of gets me. Here's my question is, you know how you can link your design system to Figma? I don't know if you've seen that. It's like through DevMode, there's like this component, like you can register your components to your Figma components, right? Chris Coyier Which you should have a button and a header and a card and a blah, blah, blah. And then you can, they call them blocks, interestingly, in here. And then, and then you use them and stuff, but go on. Yeah. Well, so yeah, if I'm using, like, I work on fluent UI, right? Fluent web components. Dave Rupert If I hook up the button component to my fluent dash button and I wire up all the props to match, right? Like the themes and the props and stuff like that. Does the, does the Figma sites or, or whatever sort of, and I assume there's some kind of AI shim in here that's also working, right? But does Figma sites produce better results? Does that make sense? Like if I say, Oh, button is button with a class on it. Like, does it produce a better product in the end? That's, and they didn't really talk about that. What do you mean in what way? So like, if I've told Figma, you, when you use button, use fluent dash button and inside that, and that has all the shadow DOM and everything to emulate a button as best we can. Right. Like it is a button to the browser. When somebody adds a button in Figma, use my fluent button, you know, like output that code instead of whatever React stuff you're generating. Like only output my stuff. I wonder if the results get better if you've told Figma about your components. But that was never mentioned. It was not made clear. So I'm making something up. And I don't like making up features for billion-dollar products. They should pay me. But like does it get better is my question. But I just can't like – now it's like I'm going to be fielding questions like, why can't we just use Figma sites? You know, it's like, well, it ([Time 0:18:10](https://share.snipd.com/snip/ede0d105-0e03-4074-b7bb-ca2af49b7088)) - **CSS Carousels: Accessibility Risks** - Avoid using CSS-only carousels as they have significant accessibility shortcomings. - Accessibility experts should review interactive features before public release. Transcript: Chris Coyier Carousels css carous Yeah, I feel very like almost guilty about it because I have in my head, I'll tell you just as a general concept, if I'm like, oh, the web platform has delivered this Feature, call it the dialogue or something. This is just my own weakness here. I should know better. But I'm always like, oh, well, they handled accessibility then. Of course they did it correctly. Like that's what they do. Why would they not do it accessibly? I thought that was basically the point is that they do it and they get all the details right. And then it turns out, and I haven't ever read everywhere. Of course, it's sitting here in my open tabs, but I did look over it. And obviously, there's some problems. Sarah's post is great. Dave Rupert It falls into the classic accessibility trap where it's like 6,000 words long, you know, and not, doesn't, uh, make a concise, uh, well, it determines like you shouldn't use it for prod. So that's like very clear, but like, it doesn't say like, these things need to be fixed, like, you know, outlined, but, So we had Adam on, and we kind of walked through the carousel. And it's great. It actually does do some accessibility things for you. It sets some roles. And that's weird that you're setting ARIA roles via CSS properties and stuff like that. One of the problems Sarah points out is those little dots are tabs are considered tabs, like, you know, div role equals tab and they're inside a tab list. That's the way, so you can use the arrow keys. I thought that was good. That's to wire up the arrow keys and have that affordance, that like sort of expectation to exist. But Sarah rightly notes like tabs have to reference tab panels. Well, when your tab panels are viewport based or just however many items can fit in the container, you now kind of have this like you have a problem where you haven't wrapped those in a Panel, an associated panel, right? It's not like a labeled panel. It's not associated to the tab itself. So you just have a list of tabs that don't really associate. Yeah, I guess I kind of get it. It might not even be rendered at all. Well, at the moment. Yeah, it's just, I think it creates like this awkward sort of accessibility experience where it's like, these aren't actually related to anything in practice. Does it kind of work? Probably like, like you can like get to the content and just like you would with tabs, like tab through, but like, it's not actually set up. Chris Coyier Well, really? I mean, why does it matter then? I like, I don't know if I like, like the concept of theoretical accessibility, like, isn't it? Shouldn't it be like, does it work for the people who need it? And if the answer is yes, isn't that like, okay then? Yeah. I mean, it's possible too. It's like you know, like, does it work on a Braille reader? Dave Rupert I don't know, man. You know, I don't, I'm not smart enough to use a Braille reader. And actually most people aren't, you know what I mean? Like I talked to somebody at Texas school for the blind and visually impaired, and it's basically like, uh, don't even bother learning a Braille reader. Cause you will never learn it as well as somebody who is non-sighted. Chris Coyier Like, we're just not capable really of learning how it works because it's just we don't have that sensory. Is that a dangerous lesson, though? Like, I feel like I do learn something occasionally when I flip on voiceover mode and stuff. Yeah. But I know I'll never use voiceover as well as they do, but it doesn't mean I don't learn anything. Well, yeah, I think there's like a mix, right? Dave Rupert Like it's like it's helpful, but also kind of like like we're never going to have the native experience, if that makes sense. Right. Like, yeah. Yeah. OK. But anyway, I think there's problems. I think it's mostly around those little dots. Right. And I wish we could say like, oh, the dots aren't great. Let's remove the dots from the scope and figure out a new system or something like that, you know? Or, you know, some of it was like content labeling, like the dots were just labeled like content item, content item, content item, you know? Yeah. And that's not good. It's like a repetitive label. But is that a problem with the demo or is that a problem with the technology? Does that make sense? Like, like any person can write a bad demo. That's, that's sort of like what wasn't clear from the article for me. But it's a great article. You should read it. But I think with Figma and with the tabs or the, sorry, the carousel, the question I've been asking is how did this get out the door? Chris Coyier Yeah, I heard you ask that in kind of our kind of internal discussions about that is that there should be, well, you know, how did Figma sites get out the door? Dave Rupert It's the chat where Brian Cardell comes to us and tells us everything we said wrong. ([Time 0:25:41](https://share.snipd.com/snip/a7629097-ea7a-4e64-bbf9-469c61d8d196)) - **Use Favicons as Status Indicators** - Use dynamic favicons to communicate site status without interrupting users. - They enhance user experience during slow processes like deployments or builds. Transcript: Chris Coyier So if you're like, okay, this is going to be like a five-minute thing, I don't think you have a choice. You have to leave that tab. Your little brain is going to require that you go do something else for a minute while you wait for it. So as you do that, you don't have to click back over to the tab to know how it did. It's right there in the favicon, depending on the browser you use, I suppose. But most of them show favicons. Pretty cool. That's a nice little, I don't know if it's an Easter egg because they're just showing it to you. But it's a nice little detail. Dave Rupert It's awesome. GitHub Actions will do this too. They'll put a little checkmark if it succeeds or next if it fails um sometimes i wish they could do a noise like like a ding like a microwave is done or something because like how many times Do i kick off a ci and then i'm ([Time 0:43:10](https://share.snipd.com/snip/1c4213ee-7501-4cc7-b96e-604693a9d66d)) - **Prepare With Tech Stack Basics** - Before your front-end internship, familiarize yourself with the company's tech stack. - Practice basics like HTML, CSS, JS, and tools they use for smoother onboarding. Transcript: Dave Rupert I really like this question, by the way. I got an internship for front end web development. I start June 2nd. What are ways you would recommend someone prepare for this? I know, I know. Continue to practice on a deeper level. What are some helpful CSS JS tricks everyone should know? Or what got you started in the coding world? I just feel fake or so unprepared for this, but also excited. If you already answered this in previous episodes, I'd love to know. Another topic we can get into is typing speed. I do okay when typing normal text, but when coding, feel slow, like 30, 20, 30 words per minute. What's up? Chris Coyier Interesting. Yeah, the ending of that is interesting. Certainly, you could work on your typing speed, I guess. It wouldn't hurt. I don't – yeah, I wouldn't be too worried about that. Dave Rupert I mean because like – yeah, I think you build muscle memory around your language, you know, and you look a lot faster than you do over time. Like Dave Rupert can be like const fart barf you know and i look so fast you know function fart barf dude because you've typed that exact line a million times yeah like my fingers if i they Touch the keyboard they type like function you know like or like yeah you know like i can like in my like it's like a reflex almost you know that that's the vibe I have. Chris Coyier So like, I think that'll come. So I wouldn't worry. Yeah, but I mean, we're just fishing around here for something to work on because internship is starting, not started yet. It's a month away ish. What, how do you like get better before that even starts? I don't know that you absolutely need to. I mean, it's an internship. They're supposed to be leveling you up in a sense, you know. But hopefully you can contribute while they're there. If it's a front-end web development thing and somehow you got this internship and you don't know anything about HTML, CSS, and JavaScript, you probably should. That would be a little weird to – so maybe making sure you're there on the basics. And what else do you know about the company? Do they all use VS code or whatever? Like, do you know anything about the tools that they use? That could be kind of interesting. Is it, you know, are they all get based? You know, those are like pretty safe assumptions to make, but you never know. Can you start using the tools that they use so that you have some level of comfort in them before day one? That just is one thing that occurs to me. Dave Rupert That was where my brain went immediately. Like if you knew their tech stack, if their node typescript and get, and, um, I don't know, react or something like that. Like that's probably a pretty common stack like make sure you've like hello worlded each of those you know kind of so you know what's up so when somebody's like npm install fart barf you Are immediately you you know what they mean when they say that you know um and that's only that's again i totally agree with what you said. It's their job to teach you like you're the intern. You're not like free labor or free, you know, like they're there to like show you what it's like and level you up and stuff like that. So I would, you know, like they didn't just get free labor for the summer or whatever. And usually it takes the form of like you're doing a project like, like, you know, you're, you guys are gonna, y'all work on, I don't know, like a product idea or improving some section Of the site, you know? I wouldn't worry about that too much either, but I'd familiarize yourself with the product. This is just like getting a job, like familiarize yourself with the tech stack, make sure you like hello worlded kind of each piece of it just so that, you know, you don't have to go like In-depth knowledge, but just so like, I think that's for you. So like when you show up on day one and they're like install Postgres, you're like, I'm good. I already got it installed. I figured that out. You know, I think I can. Oh, that's a nice, that's a good idea. Chris Coyier So I think like that's. Presumably you've seen the website. You're a friend of developer. So we're talking about websites. What websites? Look at those websites. Go all around those websites. Install the Axe plugin in your dev tools and run an accessibility thing just to see. Not to like walk in and start shaming them, but see how they're doing. See if they're asking you what you think should be done. Maybe you'll have an answer then. Can fix some of that crap. Uh, it might be interesting if you already do have some HTML, CSS and JavaScript knowledge or feel like even decent at it, maybe learn some like really new stuff. It's kind of an interesting opportunity to do that because, uh, maybe when you work at a company for a long time, as I bet some of the people there will have be, that they're so focused on Their day-to that they're not following, they're not listening to Shop Talk show. You know what I'm saying? They're busy with their day-to problems. Dave Rupert I think you're probably ahead of the crowd. Yeah. Ahead of the average intern here, if you're listening to the show. So for CSS and JavaScript ([Time 0:45:57](https://share.snipd.com/snip/54ec458d-3343-4313-94fe-ae87c0f75f84)) - **Know and Communicate Strengths** - Know your strengths and weaknesses before starting an internship. - Share your skills so managers can assign tasks suited to your abilities. Transcript: Dave Rupert Tricks, I'm going to actually just say, know the basics like know how the box model and how padding and margin and uh absolute positioning and positioning work those like those key pieces Because like that's probably what they'll ask you to do is go through and put all this stuff on this page. And you need to know those pieces. That would help. JavaScript, know what a click handler is, how to make a click handler. Make the browser send you an alert when you click on something. Make sure you have those basics kind of solved. Another thing I'm a fan of, and this is like a business book sort of thing, like know your strengths and weaknesses going in. Are you really good at like good at CSS already? Awesome. Like just know that's your, you're good at that. So then when you're sitting around and they're like, Oh, what do you think you'd be good at? You'd be like, well, I'm super good at CSS. So like put me on any sort of styling, fixing project, pair me with a designer or whatever. Like that would be super helpful, you know? So just, and that's good for all, this is good for you, right? Like don't put too much on yourself, but this stuff is for you like long-term in your career to learn how to do is like figure out your strengths and weaknesses so that when somebody asks You like, hey, do you want to refactor the whatever, the AI code base? You'd be like, not me. You know, that's – or I'm willing to learn. It's not my skills. Here's where I'm good at JavaScript. You know, like here's what I kind of know already, like, like, kind of just taking a quick inventory of some strengths and weaknesses would probably super help. Chris Coyier Yeah. I'm fascinated by the like, just learn anchor positioning ([Time 0:51:04](https://share.snipd.com/snip/36a45f82-3a44-4b7d-926b-027446fff1af)) - **Master Anchor Positioning CSS** - Learn to use anchor positioning in CSS, as it is increasingly relevant. - It's a modern CSS feature useful in many real-world site layouts. Transcript: Chris Coyier Yeah. I'm fascinated by the like, just learn anchor positioning super well to as a little bonus CSS skill, because I almost bet most people there don't wherever it is. Oh, yeah. It's pretty new, right? And you probably don't have like super good muscle memory or know anything about it at all. And it's going to come up. I think about it all the time. You know, even while we're sitting here in Riverside, as you pointed out one time, Dave, there's like probably like 20 places on this website where they need it. Dave Rupert Yeah. The whole thing, man. They do it some other way instead. UI is just anchor positioning yeah so learn that one well learn that one um on a note on anchor positioning it's in safari tp right now that's kind of cool yeah it is very rough so i don't Know if uh ([Time 0:52:50](https://share.snipd.com/snip/c1e14a2b-2079-4fb2-8222-3c4723bb8562)) - **Logical Properties Aid RTL Languages** - Logical CSS properties adapt layouts better for right-to-left languages than fixed properties. - Using logical properties improves translated site layouts and accessibility globally. Transcript: Chris Coyier Logical properties. Why aren't everyone using it? Let's take Todoist, for example, a great app, which I use on the browser, their web app. I write in Hebrew, which is right to left. It messes up the flow of the app. So I just tried to add dir equals RTL to the HTML element, you know, which is a way to tell the entire document this is going to be all right to left. And it's, I don't know, it doesn't elaborate too much, but I assume it didn't go super well, probably because one of the reasons it may not go well is if, you know, a lot of the spacing and Layout and stuff is using like margin left and padding, right. And, you know, or absolute positioning with tops and rights and stuff like that. Those will not reflow when other things, some stuff is going to reflow. If you type dir equals RTL in the HTML element, you're going to see some reflowing happening in that direction. It's going to have big implications on that page, but it's probably going to be a mess. You know, that was part of the kind of the release story of logical properties is logical properties do switch margin inline start is what in left to right maps to margin left but it will Flip sides when you switch it to rtl which it will not do if you do margin left it will just still be margin on the left this left isn't logical it stays. So that's a big reason to use that. And look at when you question whether you should use that or not. Think about Yocha here. Yeah. Todoist doesn't have a translation feature in it. It's not a business requirement of Todoist from the managers of Todoist. They aren't telling their developers that, you know, make this layout have a toggle in it and it toggles from one language to another language. It probably just doesn't have that. CodePen doesn't either. You know, we don't have translations of our app. We don't have es.codepen for a Spanish version of it or something. That's cool. That's even a way to make money in that space. You have like a fully translated app, you know, you're going to, the people that speak that natively will be much happier to use it. It's just a, it's not very common, I'll say. But because some sites just can be automatically translated. And when they're automatically translated into an RTL language, it often uses the dir attribute like this, and they often suck. I looked at a bunch of websites like this one time when I was giving a talk about logical property stuff. And the automatic translation is a huge part of it. For sure. Dave Rupert Like, you know, even things like use grid instead of floats or whatever, you know, like use flex box, use logical property. Chris Coyier Those will flow the other way. Dave Rupert They just, they auto, it's like free code. It's free translation services. Like, you know, I just, you know, I think, thank you for personalizing it. You know, try to like, like Hebrew, not like an obscure language, you know, Arabic, not obscure, you know, Chris, like, you know, Persian, like not obscure really like whole countries Of people with millions of people use these languages, you know, like, uh, Azerbaijan might feel obscure, but not to an Azerbaijani, you know? So like, I just like, I just, I think like people really need to like, you know, embrace this because it's just free money, you know? It's like, and that's the thing, you don't know if your site's being translated, you know? Like, like when Google, when I visit a German website and it says translate to English and I'm like, yeah, like, cause I don't speak German. It doesn't like tell them like, oh, you had five English speakers translate to English. You know, like you don't have stats on this. You know what I mean? Like maybe Google does somewhere, but like there's no stats on this. Like it's just, it's happening without you knowing. Chris Coyier So you might as well accommodate like uh billions of people along the way just be billions you know along the way you know so yeah it's also pretty easy to do too my mind is switched over I don't know how you're ([Time 0:54:38](https://share.snipd.com/snip/f6e32483-35b2-45e6-b92f-987a861b9ddc)) - **Default to Logical CSS Properties** - Using logical CSS properties by default can prevent many internationalization layout issues. - Choosing when not to use them requires understanding specific layout needs. Transcript: Chris Coyier Because you should use them even when you know that you might think internally that you don't need to. It's not relevant to what you're doing right now. If you just, if everybody just only did logical properties, then we just wouldn't have these problems like Yochai ran into, like everything would just reflow better. So I think it's better to just swing the other direction and just only use them. If you're going to pick one or the other, the right answer is to know the difference exactly. I, I like intellectually know the difference, um, of course, but, but like in the moment choosing the right one, like when is it better to not use a logical property? And that's a little weird to think about sometimes. Dave Rupert I had ([Time 0:59:15](https://share.snipd.com/snip/a4e76b4e-a8aa-4573-a39a-169d53b8d683)) - **Restoring Vertical Writing Modes** - Vertical writing modes can restore native text flow for Asian languages online. - CSS features like columns and grids still evolve to better support these layouts. Transcript: Chris Coyier Right one, like when is it better to not use a logical property? And that's a little weird to think about sometimes. Dave Rupert I had to not use one when I was like doing a spinner animation you know like uh in like because like the left edge and the right edge really mattered when you are transitioning and rotating And doing things like that i think that was a really obscure case but that's like i was trying to like search the code base for like anytime we ever use top or bottom or right you know like Uh and i i think it's like like very few you know like we have some like border rights and stuff like that but you know or that's exactly with my spinner thing we have some padding right you Know which is you know maybe wrong like um like yeah i guess i could go through and figure it out it depends to know exactly what the situation is i think of images as a as a somewhat clear Chris Coyier Example that like an image of a sunset like even on a top to bottom website like a one of the asian languages right they don't turn the sunset sideways you know what I mean? Like the image, an image, no matter what's happening, you should set the width of the image to what you need the width of the image to be. Yeah. The flow of the document doesn't matter. So like you don't need to use inline size on an image, which is the width variant. You can just say width, if you're dealing with an image, because it's going to be like the horizontal with the way you like almost want that to be the case. You don't want that to reflow when the, a document change. Dave Rupert Well, and that's, I think like could use like more, more education. I think about like, like vertical writing modes. I, you know, my understanding is I think it's great for languages to like very restorative. Like the, the web was very Anglo centric. It still is right. Like English Anglophile, like it's very like English centric. And it was just like all texts, you know, Oh, right to left. That's a novel concept. But, but like we, you know, vertical writing modes, you know, I think they're new. And I think even Japan and China are still like, oh man, I don't know how this exactly works out, you know, for what we're doing, but it's, I think it's very restorative to those languages Who have like basically had to become English sized, you know, just because the internet was only going to read the other direction because the natural flow of rectangles on websites Chris Coyier Flows in that direction. Dave Rupert So they just adapted, but now we can be more restorative and get, you know, they can write things how they used to write them, you know, like, um, I think that's cool. Chris Coyier So, yeah, I mean i would love columns will work out nicely for that i don't it wasn't there there's some there's generally some updates to it but css columns you know you always had to be Really careful that a column doesn't isn't taller than the browser viewport otherwise you have to like scroll down and then back up to the next column would just be like a joke of a reading Experience, you know? Yeah. But there was some, I think, recent change or at least strong proposal to change that they can like, you can almost like set a height, I think. And then they flow and make a new set of columns below them. Yeah. It seems like that will be relevant and useful to a vertical. Dave Rupert You know, I'm going to draw a diagram here and we'll see how it works on the videos here. Basically, it's like this, right? So I have like, you know, this would be like a Japanese newspaper layout. Like you just have like these columns that go vertical and CSS can do that, but it just extends on forever, right? Right. Um, it won't wrap. Yeah. Or, or it's going to be the whole entire length of the document, you know? Uh, but so what they usually do is they'll go over and then they'll break and start doing that. Right. Like that's like how a Japanese newspaper is kind of laid out. Chris Coyier Yeah. Dave Rupert Does it camp flexbox could, can do that. Chris Coyier Right. Dave Rupert Well, maybe not. I know. Flexbox doesn't wrap quite right. Yeah, my like last attempt to make that work didn't work out. But I think there's been some updates to all of this kind of or there's proposed. Chris Coyier It'd be like grid auto flow reverse. Reverse call do this, you know. But then you'd have to specify the number of columns exactly. Dave Rupert Yeah, so I think there's still work to do, I think it's not clear. I think maybe it was Jen Simmons who was kind of like a video, right? Should controls on a video be vertical? I don't know. Like an audio player, should it just be vertical in line or should it be like a horizontal thing? I think we all expect ([Time 0:59:49](https://share.snipd.com/snip/33156595-55ec-463a-9d69-873ef1c40c0c))