Smart layouts

Our next speaker is very passionate not only about layouts on the web, but also about coffee. If you follow Ahmad online, you will see some photos of like some very lovely made cups of coffee, which is awesome.

Our next speaker is Ahmad Shadid. He's a freelance design engineer and you might have read his book. Maybe like he wrote a bunch of books, but one of the books is debugging CSS. It got released in 2020 and it's still relevant today. So if you haven't bought a book, buy it because there's some very valuable info in there. And the name of the tech reviewer might also ring a bell. Ahmad nowadays is busy making a course on layout, so we are very much looking forward to that. And also of course I have to mention his blog, Aisha D.com you most likely have seen the many, many articles in there. Not only are they like technically very correct, but they are also so beautifully laid out. They are packed with interactive dem.

Interactive things that you can play around with because just reading some text you go like huh. And then after that there's a demo and you can like move a slider, tick a box. It's so cool. So Ahmad, thank you so much for doing that. We really appreciate you.

Yes, I heard a woo. So please welcome Ahmad on stage today because he will be talking about smart layouts. Please give him a warm hand. Thank you, thank you, thank you, thank you. Hello everyone.

How are you today? All good? Okay, so my name is Ahmed Shahid and I'm here to talk to you about smart layouts. I will use ChatGPT for like everything today so just you can be prepared. No, I'm just joking. Okay, so I do write on CSS on my blog, Aisha D.com and I also have a book on CSS and I also published the defensive CSS guide and so on. And like now I'm like building a course.

I called it the Layout Maestro.

So today if we think about responsive web design, the first thing that we might think of actually is this article by Ethan Marcotte which is published in 2010. So that is a very long time.

And that article was inspired by John also design and it's all about the web. Is that not like with this fixed like sizes anymore?

Okay. But until today I still see a lot like of CSS devs who build with the mobile tablet like this desktop mindset. So they don't think like in components or in containers and they think with those of your both sizes. And like even now if you search in Google and type Responsive design, you can, you will get the mobile tablet, desktop everywhere. It's like this is what responsive design is all about and it's not.

So when you think of responsive design, we often misduce in between styles, between the mobile and the tablet, for example. So we might, we might have like a very wide component as you see in here.

And even on larger screens we will end up with a very large component or maybe a very small one. It's just we need to manage all of them at once, like for the in between size and for the very large one too.

And today we have hundreds of breakpoints, as in this image.

I got this from vborch, FYI, which is by antibilly.

So as you see in this image, we have so many viewboards and it's like impossible to actually design for them. So responsive design isn't about the viewboard size anymore.

So here is me browsing my website in that perfect state. The browser window is in the center of the screen and all is good. But sometimes I do like to open a note and take notes of things.

So I might resize the screen for a bit or I might be even browsing on mobile. So if you like tab on the link, you can see the link actually before you open it.

And we have so many variations. So today the responsive design should be about the viewport, the content, the container and the user preferences. So the vbot is all about the media queries, I think we all know that and responsive to the content. So if we have a very long title, we need that title to push maybe something to the next row.

And finally we have also the responsive, like we can use ntainer and we can change the size or the style of a card like from the stacked one to the horizontal one. And also we have user preferences, so we have the reverse color scheme and contrast and all of that, which helps in tailoring an experience to the user. So I might disable an animation if the user doesn't want that. And this can be considered part of a responsive thing. So smart layouts is a mindset to build adaptive and responsive UIs.

So smart layouts are content aware, so they change based on the content they have. And they also adapt to the surroundings so they know what might happen maybe in the next element or something. And they can change based on that. And also just like smart layouts will try hard to not to break.

And that can be done by following that by like writing css. That is a future, that is let's say is like a future proof so for like we can maybe account for like when flexbox min content size hit, we can use min with zero to actually fix that.

And finally, smart layouts are conditional, so we can define conditions and those conditions can alter the layout we have. So again, smart layouts is not about using. This is like in UCSS features, it's a mindset. So again in 2010 we got responsive web design, right? And then in 2015, as far as I can remember, we started to use flexbox a lot more. But until today we have a very big gap, not the gap in flexbox.

So we have a very big gap in using and taking the full potential of those features like the Min Max clamp, the CSS grid, the subgrid CSS has and a lot more. And one reason I think is that because the current design tools we have are very bad in helping us taking the full potential of the web. So now like, even so now even like we have like the grid and Flexbox or maybe the auto layout in figma, it's still like moving things around.

So when you compare that to css, we have a lot of things. We have flexbox, we have Min Max Clamp, we have anchor positioning and we have so many things that we can do in CSS that are not possible in like any design tool. And I know that now we got a lot of CSS features every day and we are like, oh, I can't keep up with all of this.

And I know that. So design tool doesn't let us design with the full potential of CSS in mind. So for example, I think in mid May this year when Figma released, I think the Figma sites thing, they promoted the thinking of the free both sides. So if you want to create a new page, you have to choose the mobile tablet and desktop.

And this is just weird to me actually. What if they did this?

They encouraged us to think of the, think of the container size, have a container width and you can see like this component in action and that can lead us to pixel perfection.

So this is, I think I have worked on this maybe eight years ago. So like in this UI we have this header component and it looks okay, nice, perfect. But when you start writing the CSS for this, you will end up with all these variations.

And I think it's impossible to handle this in figma because it would take so much time, at least for me.

So instead of focusing on the mixed perfection, we can focus on the look and feel of things and we can just explore figma and validate in the Browser. So let's start by our first SIMI example, which is about building a layout. So if you look at this layout, we have listed like a feature news section, we have the start card.

Okay? So what I like to do is to divide each, let's say like mini grid item and I like to call it a layout zoom. And each zone has its own conditions.

So let's say this one on the top right, Like I wanted to alternate the image if we have two items or more. So I took this zoom and imagined how it looks on different sizes. So here we are on the desktop, one on the left, and then the tablet and then the mobile. And I got an inspiration from ABL shortcut, which is to construct steps or conditions that can be used or let's say can be inherited from css. So each zone has its own layout terms.

So the small zoom, if we have three items or more and the zone is less than 250 pixels, I want to alternate the image and that is the small size on the desktop we bought and on the tablet size, if the zone or if the container is 250 pixels or larger, I want to apply the min max and have the auto fit in there. So as you see when I had cards, okay, so on the smaller size again, now we are at the smaller size, it will be the same.

Like if we have three items or more and the zone is less than 250 pixels, I want to apply the alternate style and we can actually take this farther. So if we have one item and we have the feature toggle set and the zoom is larger than 250 pixels, I want to apply the featured style. So like in this example or in this zone, when we have one card and we have the feature toggle, it will apply the feature style. But if we have two items or more, it will just default back to this style or this one too. So let's start with the news layout.

And of course I use all of my images that I take for my coffee.

So in this layout we have a feature section, we have a code component, okay? And we have a list of articles. So first I define the grid, I use the grid areas. And like, as you see, I will come back to this later. But for now I have a three column for the feature and one column for the code section. And the recent one is taking the full width. So first I defined each zone conditions. So for the quote section, if we have three quotes or more, I want to show them as a separate row. So here is an example. If we have no Quotes at all. I want the feature section to expand in width. And if we have one coat only, I want it to show or to take the full height.

And with this we come to has and CSS HAS will connect those missing dots. So like an example we can use HAS to check if this card component has an image. Okay? So this will select all the cards that contain an image. And has is very well supported. It's supported in 94% almost. So I imagine that we might use CSS HAS like this because it allows us to build a lot of things. It's like the if statement of css.

So without CSS has, we have the, like we have the grid like this. So we have them in. We have the grid and we have the recent articles, the course section.

They don't talk to each other, they don't know anything about each other.

But with CSS has we can connect those dots, we can make them talk to each other like, hey, I want to change the grid if we have two codes, or I want maybe to change the grid or change layout if we have 10 articles or more. So in this example I used like CSS has to change the grid areas and change the layout if we have no quotes at all.

So here is the layout with quotes and here is the layout without quotes. And I can also, with CSS has, I can listen to the number of quotes we have and then also change the grid based on that.

So as you see now, if we have three quotes or more, it will move it into a new row.

So CSS has in this example, it's like getting us a way to connect the dots between the main section and the feature section and the code section.

And it made us know what would happen if we have X and Y and Z.

So it's like I like to consider it as a two binding thing in css.

So with that we come to size container queries.

So container queries are supported in like, Since I think August 2022 if I'm not mistaken. So in simple terms we can use container type and line size and then we can use at container min width and change the design or the component. And in this example like everything you see is like a container query.

So this is the example we have and this is a video.

Okay, it works. So when I now I'm like adding and removing stuff and next I will remove some quotes and you will notice how the layout or how the grid will change. So now I will add some quotes. I think, yes, I added one more. And then we have the change on layout. So those are all the variations. For this card component, we have the stacked style, we have the horizontal style, we have two featured styles. So it's not only about sitting at container styles, because we need to think about when a component should be featured. And also should we apply the horizontal style based on the size only? Or we might actually need to have, let's say to have a kind, maybe like a toggle or something.

And also how to make sizes and spaces respond to the container size. So in this example I just added a flex direction row and I change the layout. And in this example it's like thinking, okay, if we have one item only and the zone is larger than something, I need to set the image to 300 pixels. In this example, if we have the featured class and the zone is larger than 500 pixels, I need to apply the featured style.

But what if we need to reuse that? Like I might reuse the featured style, maybe like in the homepage, maybe like in the article page. So do we need to write all of those CSS for it? No, thankfully we have style queries. So style queries let us actually change the style based on the context we have.

So as you see in this figure, so what we need to do is to assign a CSS variable and then query that CSS variable and change something.

So here I assigned this CSS variable to all those divs and I just write the CSS once and it just works. So static queries are supported well, but Firefox is still not in the party. I think they are working on it and I hope maybe we can get it this year, hopefully. So when we mix style queries and style queries, which CSS has, we can get endlessly out options. So here in this example I have, like I said, a size container and then I assigned a CSS variable with CSS has, and then I used both the size query and the container query to listen and to change the layout. But this will work only if we have one card element.

So if we have two card elements, it will not work.

So again, style queries and size queries and has can get us endless layout options. And here is the style for the feature section again. And Here is the version 2.

Like when we have no quotes at all, this will expand to the full width.

And instead of using a class to listen, if we have one card only, we can assign a CSS variable called crow image and I can listen to that and mix it with a fuzzy query and change layout. With that we come to like to the size of query units. So 1cqw equal 1% of the container width.

And that can help us in fixing an issue.

I'm not sure if this is clear or not. The in between thing. Okay, so when we have those variations for the CART component, we still have an issue like in the in between style between each one. So like in this example, we have like this card on the top and the bottom. And when we resize that card like this is like the minimum and maximum size for this card, we will still have. Have not has.

We will still have those like font sizes that are small and the image that, that look small. So we can combine them with a CQW unit and we can get like a fluid layout. So as you see here, I use it in the font size and the fixed spaces. And here when I resize the screen or the container, sorry, notice how the font size is getting bigger and the same thing is for the image. And with that we come to the code title ratio. So with CSS has, I can listen if we have two items or more, and then I can use that ratio that I defined with CSS variables. Just move this a little bit.

And then we can use that ratio to reduce the font size. So if we have one coat, the font size will be 20 pixels.

And if we have two course the font size will be 18.

And that is all based on mixing things like CSS has with a variable and unchilde stuff. So next is the query units.

So sometimes we want maybe to use the outer container or the inner container. So here in this example, here is the outer container of this card component, and then here's the inner container of this section.

Okay, so I learned this from Anatode, where we can actually define like a CSS variable on the outer container. And I can pass this to a child element that is part of a container too. So it will take the outer container value.

So the value in here is like coming from the outer one. But now if I don't define it, it will just take the CQW from the inner container.

And here is a video. Let me just see it. So now when I resize the inner container, notice how the font size is changing.

But when I switch that off and resize from the outer one, notice how it will look like.

Sorry.

Okay, so now we come to the anchor positioning. So in the card like layout, we have, we have a tag component, okay?

And that tag component lives within the content, like on the right side. So how we can position that tag component on the Top left corner.

Okay. You might say that. Okay, it's like easy. I can just use lift and top. Okay, that works. But what if we want to put this on the top right corner? We cannot.

If we do this, it will look like this.

So we can use anchor positioning.

We can define like the anchor name on the thumb and then we can use position anchor.

Okay. And it will just work.

But it is still not supported. It's only in Chrome and Safari. So here is the final example. So with an allowing us to build stuff that were not possible before. So in this example, I wanted to place the description and the author name on top of the image. And how we can do that without anchor?

We can't, I think. So the idea is that to make the image as an anchor and then place the description on top of the image. So I used like anchor name on the thumb and then I used the left right to make it like span from the left and right sides and to the bottom one too.

So here's a video of me resizing this.

Notice how it just works.

And I love that about anchors really.

Okay, now we come to grid areas. So in short, we can use the grid areas to have like a visual, let's say maybe a visual like UI inside css. So we. We can see how the grid looks like.

So if, if it makes a rectangular shape, it.

It will just work. So here is an example where we have like this, the side by sidebar or the header. Header.

And this is an example too. So when we have like the banner, it. It will span all the width. Or we can have it like this. As you see. But what if we have a lot of cars at the bottom? What will happen?

Because the coat item is taking the full height.

We might get something like this. So the coat section will be so long that it just looks odd. So we can fix that by using CSS has to act as an and like we can nest or we can use two CSS has to have a condition. So if we have 10 articles or more and we have one quote, I want to change the layout so it.

It will look like this. So I think for me that the grid area is container query and has best friend. Because when you mix them together, you will get a lot of layout options.

And now we come to the logical props in css.

So instead of writing embedding, lift embedding, right. And that stuff we. We can just switch and use the inline start and inline end. So as you see in this example, so the start and end can it just Mean the left in LTR and the right and like end means the right in LTR and in RTL you can just flip them. So here I just switched the direction and I made this section as you see in here. So because I was using the anchor self end, it just goes to other side.

And if you want to learn more about RTL styling, I have a complete guide on RTLStyling.com which is all about RTL.

Okay, so we are done with this example and now I will show you this example where it shower of container queries and CSS has. So in this example I have this header. Okay, so notice that when I resize it a little bit, the search is converted to like like this go to file button and then the tag labels are also hidden. So here is a video of me resizing this. Notice that okay, the goto file is now in button and now the labels are hidden.

Now when I hide the info on the right it will also expand and when I hide the table of contents. So so it's like designing a component that can work anywhere.

And if we want to build this with media queries, we will write a lot of conditions to handle this. So we want to handle when we have the table of contents and the info or maybe we want to have like, we want to handle it maybe for like one of them. But if we write this with contera in mind, we will just write it once and it will work anywhere. You just write the CSS once.

So now we come to a CSS clamp. So in this example we have the min container variation or the min curve variation size and the maximum size. And I like to use this tool by 9elements which is like you can just enter the min and the max size and then you can also add select the values you need and it will just work. You have just to replace the VW with the cqw.

So clamp and container like with the query units will get us ultrafluid components.

So like clamp it works well with negative values. So in this example I have this element that is positioned left minus 30 and on small screens I want it to look like this.

So what we can do, we can use the clamp to actually define the min and max values. And then we can use the non container width or the rubber width we have and we can use some math to actually have it works. So here's the video.

Note that when I resize it will push itself to the right side and it just works.

Okay, so this is an example where I will show some interesting stuff we can do with anchor positioning.

So in this layout I use the grid areas to define each part of it.

Okay. And then I used an positioning to position the cube text and the context like to the image. So the calm and the keep, like they don't live within the same div that have the image.

Okay. So I define the image as an anchor and then I placed the column to the right side and the keep to the left side. And also that little note, I use also anchor for this. So when you resize the screen it will shift. So let me just show you.

So here when we resize the screen for like a little bit, it will show on top of the image and the keep curl will shift its position too. And for the quotes I used display contents to ungroup the div they live within and to merge them with the other codes so they act as a one grid.

And here is like on mobile we have this text right here. I used position try, which I will show you in a bit. So this is a video of me resizing this. Notice how the calm and the keyboards are using fluid font size. And now the message will move on top of the image and now the grid will just flow. So this design, I think if we go back in time, maybe one or two years, we can't do it because we didn't have encores back then, but now we can do it. And again it's like all about we design this with the container in mind. So we can just throw, we can just throw this anywhere and it will just work and like even extra fun we can do. But I need to show that in the browser and I will show it in Safari because it's not working in Chrome as I need.

So like here we have the keep and the calm. And now when I change like the align self like for this image to the left side or to the start side, it will look like this.

And for that I use position try to do it. And if we even use the end, it will shift like this. So this is not even like this is not changing based on the viewboard size. It's like changing on the position of the image itself.

So here, yeah, I just use justify itself and it just works. And now we will explore some cutting edge CSS for like even smarter layouts. So we can use the sibling index which is in Chrome Canary only if I'm not mistaken.

So for the font size of this code we can fix the same problem by just using the sibling index. And I also use the captured idea From Roma block. Thank you. Roma. Where is Roma?

Okay, so here is the component. Like the first we have the font size, it's 21 pixels and then at 18 and then it comes down to 17 and like even we can do some crazy stuff with sibling index like this one. I use the APS with the siblings to have this kind of layout. The Castle Abi I wish that I have much time to go through this. But we can use has to actually change the layout of this section and turn it into a slider or something. So here I use the scroll button, the score group and the score marker, target and all of that.

So here is a video of me using it.

Notice that when I add more cards, it will turn itself into a cursor.

Yes. So, smart layout summary. So with the smart layouts, we need to build content aware.

We need to have the components adapt to their surroundings.

We need to build them with defensive CSS in mind. So we need to think ahead when we style the stuff and know what might cause an issue and what might not. And finally we need to rely on CSS has to allow us to have this conditional styles again. So like building a layout to me is all about defining the main grid, defining the layout zones and the conditions for each zone and then build the components with those zone conditions in mind and then repeat the process.

So a layout can be as simple as a button or as large as a new section, for example.

And I can imagine if we use this mindset, we will have a lot of connections like you see in this image which I made in Adobe XD because it has this very nice visual between the item.

So with, with all that in mind, we have so many stuff that can alter the layout. As you see in this one simple section we have a lot of stuff to do.

So what I really hope for when we search for responsive design is we get something like this. We see the information about textbooks, CSS grid and anchors and all that new stuff instead of seeing this boring mobile tablet and desktop size thing. So when we use all those CSS features, when we combine them, we will achieve even smarter layouts. So as you see in this little figure, when we connect each of them together, we will get. This is Martelly, I think.

Thank you.

Wow, Ahmad, thank you for that. Please join me near the flowers. Should I take it in with me? Just don't drink it. Just don't drink it.

Scrolling, it's a thing. Yes. And yesterday I learned that if you scroll vertically it's called scrolling. But if it's Horizontally, apparently it's called crawling. So yesterday I scrolled from the. No, I crawled. Yeah, whatever. Ahmad, you have shown some beautiful latte art. Out of curiosity, how many cups does it take before you get to that result? Hundreds of cups? Only a hundred?

Yes. I thought it would take you thousands of cups to drink them all afterwards, or no. Okay. Because otherwise it would be like One of the things that you mentioned in your talk is you've talked a lot about has. I think we all agree that it's like it's one of those features in CSS that changed how you write css, how you approach problems.

Are there some other features besides the ones that you have mentioned, like container queries that the thing that have totally changed how you write css, besides has, I would add container queries. I think they are very, very helpful. Especially if you pair them together. You will get a lot of stuff. Yeah, yeah, I think it's container queries to me. Yeah, yeah.

We had a question from the audience about has Vlad asked, like, okay, are there performance implications when using has? Is it something that we should be concerned about? Yes or no? I would say, like, it depends on the use case you have in mind. So if you are using head, like if you are using has to manage a very large number of components, then yes, you might need to test. But if it is for a small layout, then I think it should be fine for. Yeah, I think it should be fine if it's for a small guard or something tacking on to that. Because we have Chrome engineers present here at the event. The advice they always give me is if you are using has, scope it through a subtree.

So don't do something like colon, root, colon has, because then it has to look like through the entire tree. If you're only checking for a has on like a side nav, then do nav has and it will only look inside of that subtree.

Also be very specific about what you're querying inside of your has. Like if you do a has colon checked, it will try and find all checked things which has like an implied asterisk prepended to it. So be very specific. Like I want to check for an input colon checked and then also don't walk the tree extensively inside of your has. So don't do something like has some element and then do a sibling combinator, some element and then with a knot and then another sibling combinator if you want to check it out. DevTools has a selector performance thingy for that.

That said, next question you've Shown CSS grid. Of course you've mentioned responsiveness. There's a question from the audience like, okay, how do you combine them? Wouldn't you still need to use media breakpoints for mobile desktop and so on to redefine the areas of your layout?

Yes, we will use AT media mainly for things that span the full viewport size, like the header and the footer. But for the inner components we can just use AT container and stuff like that.

Is there a thing that you like to do when changing the layout of a grid? Is there some technique that you use to tackle that?

That's a very good question. You mean to change the grid in a way that it flows itself? Like I don't have to control like everything of it. Not maybe that it flows itself, but that you are very specific about now, okay, like now I want one box at the top, two at the bottom and then when it's more narrow, do it three underneath each other or whatever.

Yeah, yeah. So for that I will also like, I will use Min max with autofit and. And if I have a layout that let's say that I need to place columns, I would like to place elements somewhere I might use maybe the span keyword because I like it because it will let the elements actually span two columns without using maybe a fixed like, hey, I want this to span from column, let's say one to two columns. So instead I can just like type span1. For example, like you mentioned the autofit autofill. It's one of those things that I always need to look up when I'm trying to use it again. And then, yeah, like each time I need to like to make sure which one will actually fill the space or which one is not.

I just need to search do it. Yeah, same to the rescue.

Another question that we have from audience. I think it's a really good one. When you were using style queries to match a certain variable and then correspond to the value of the style of the custom property, why would you do that over adding a class in your markup?

Because adding a class is actually.

We need to add it ourselves or we need to have maybe some kind of JS logic to add that class.

But with the style queries we can have some conditions built in CSS and we can assign a CSS variable like the section and it will just work. Yeah, right.

So if the media query or the container query matches, then you change the custom property value and then the style query takes over.

Like, oh, you changed. It's fun, right? CSS we all love it. We all love it. Yes. Another question. This is from a designer, I suppose. It's Hannah. She mentioned it's hardly possible to fully cover responsive mockups in Figma.

What is it that you expect from designers?

Are mockups in three viewports enough? Whose responsibility is it to design the areas in between those mockups?

Yeah, so this is a good question. So actually I think that designer should learn how to code first.

This is the first thing. You can clap it out. The second thing is that the design process should change. Like in my opinion. So now when I design something, I will mostly only work this on the homepage size, for example, and I will take most of the work, I will start writing CSS right away and see how those things work in the browser. So you are designing in the browser?

Yes, kind of like this. But like I don't move to that step unless I have the look and feeling there.

So I don't have to change the spacing and color in the browser. I just play with the layout itself, you know, so instead of like, let's say like having maybe like a feature of the new section, I can just like design how will this look in Figma? And then I will move to css, still like to make it work as I need tacking on that. So would you love to have something like that as a crossover of figma, but then that gave you all the web features so that you can directly play into some type of new free business idea, like some type of new app that allows you to directly do all this stuff using web technologies? Yes.

I actually thought about this and tried to make something, but I failed because it's so complex. But yeah, I would love to have something like this. I might even help with the design or the UX of it. Not like the deep technical side.

Looking at my list, Looking at my list. So many questions, so many questions. Karen asks, does the number of conditionals grow exponentially? Because if you've shown a bunch of things to account for within each component, like screen size, number of children, location of the component, and so on, does it have a big increase on your code or the number of things that you need to take into account? It can grow like the conditions can. They can grow.

But the idea is that when we have those conditions in their, it will let us actually write less css because we manage like every single case and we don't have to duplicate styles or to write stuff again. Right. And I think you showed it nicely here at the end. You had this big layout with all the squiggles on, like, oh, this thing needs to do that and this thing needs to do that. There's a lot of things that you need to think about.

Yes. And I love it, by the way, how you look at something and you go over all these details. I bet it takes a lot of work to maybe like do the first one, but does it improve over time? Do you get better at it? Yes, yes. So like you've shown this big layout, like how long does it take you to do that?

Like maybe the first example, five minutes, an hour? Half a day?

Day? I don't know, two weeks? I think I built the demo in maybe one hour or something. Crazy. Right?

Like so much time to actually like design the slides.

So. Yeah, to have all those conditions and styles. Yeah. Wow. Another complication to throw in the mix. Like you've now shown design with English text left to right. Say you want to support art right to left.

Is it very complicated to do nowadays or do you. No, it's fairly easy because if you just like stick with the start and end stuff, you will build like most of the RTL website and you will just end with stuff that you need to change your stuff like the background position X or Y. Say like you have an input with an icon on the left side.

Like as a background image in rtl you need to switch that. So it should be on the right side.

And in CSS we don't have a thing like background position, start or end. But if we have that, we can mostly just build like an RTL layout without changing anything in CSS still. So I'm hearing use logical properties for that. Use logical units like VI for example. But then there are some rough edges regarding like background position, which it still uses X and.

Yes. Okay. Are there other things like backgrounds that are X and Y fixed that you think like, this is a pain point. I didn't get the question. Can you just please repeat it? Yes. So background X and Y is one of the more difficult things or like things that you have to think of when doing rtl. Are there other things out there or X, Y based background X. I can just think of this. Maybe not.

So I think there is one thing, but I can't like get it to my mind right now. So yeah, I will share it if I. Cool. And I bet people can find it on. You have a wonderful. One of many websites that you have is the RTL styling.

Yes. RTLstyle.com yeah. So people. It's open to everyone to check out. Yes. Okay. So if you ever need, or if you want to be prepared for an RTL website, you can find all the info on there, I suppose. Yes. All right, Cool. You also wrote a book. We've already mentioned debugging css. Out of curiosity, how do you start at writing a book? A blog post?

I will mostly start with a demo because it will get me excited to move on.

Yeah, that is the style with those interactive articles. But in the past, when I used to design images of things two years ago, I used to start with the intro content or hey, in this article we will learn how to do stuff and like. But yeah, it's just like writing like what, like the end result, like for the learner will be.

So if you read that article, you can see like from the first like few lines, you have an extra fan on stage. Hi.

Thank you. With Alma joining us on stage, I think this is a nice moment to now give a big war of applause not only for Alma, but also for Ahmad for doing the talk. Thank you.

Thank you so much.