 Ya, okey. We are now talk about Zen of CSS Viva Game. Let go. Hello. Hai. Maafkan saya. Ya, kerana tiada siapa di sini. Maafkan saya? Tiada siapa yang biasa. Teruskan dengan kawan saya. Ya, jadi tiada siapa yang biasa di sini. Banyak siapa yang biasa. Jadi, untuk terbincang, tentang ini, It's the Zen of CSS Viva Game. Saya ingin mengenai sesuatu yang lebih menarik, tetapi sekarang, CSS itu sedia. Oh. Okey, mari kita masuk. Okey, jadi... Dia bercakap dengan saya? Betul? Bukan ini? Betul. Kamu menggunakan laptop saya? Ya, karena... So you're using your platform, but we're good. Carry on. As your NS commander will say, carry on, recruit. Okay. So yeah, I am on Twitter and also on GitHub. I'm quite sad that I couldn't get the same handler on Twitter, but it's okay. Okay, so... Be natural. I'm trying to be subtle. What's person doing? Okay, so I think the thing that has always been interesting about CSS is that concurrently, there is discussion on both why is CSS so hard and at the same time, why is CSS so easy. So just some examples, like for example, the family guy, CSS chief that usually people will talk about talking about CSS. And at the same time, there are people who say things like this. Offensive. Yeah, jerks. Okay. So, I started to look into this and thinking like, actually, what is the hard part about CSS? And it could be that actually writing CSS easy, debugging is extremely hard. Okay, so I went the day into Stack Overflow to look at the most asked questions in CSS. So if we are looking at the first and the third questions, it's not much to talk about actually. There are things we want to know, but then it's quite straightforward. The interesting one is the second most asked question on Stack Overflow, which is, how to horizontally centre a diff? So, I think there's a question that I think a lot of us has asked along the way when we are building sites, like the vertically or centrally, diagonally centering something. It's easy, very easy. Okay, so on CSS tricks, there's a centering CSS complete guide. It's actually quite brave for them to say it's actually complete. I also don't dare to say it. I know it completely. So in this article, you'll see that it starts with this line, which is, I think the issue isn't that it's difficult to do, but there are so many ways of doing it and depending on the situation, it's hard to know what which to reach for. So I think the answer here is a lot of times when we are debugging CSS, the answer is, it depends. So this is like the best answer from senior software engineer, like, what do you think is the best way to do this? It depends. And then CSS is full of, it depends. So, so why do we end up in a situation where it depends? One is that the HTML have styles even before you boot in your styles.css. And that comes, one of it, it comes from browser default styles. So even if you don't write any style or in high style, style.css, or anyway lah, actually, you really have some styles that are inside really. So when you look at DevTool, you will realise that, let's say your HTML has a margin in your page already to begin with. And then paragraph have some padding on the top and the bottom and like, the weirdest is the least has margin and padding in a very weird way. So, and then the second thing is that there is a certain natural flow of content in CSS. So, I realise that this is a super good site to look at it where it talks about like what is the normal flow inside a HTML page. Even if you don't, even if you don't talk about browser styles, when you lay out your HTML elements, there is a certain way where they try to lay themselves out. If they don't actively try to lay themselves out, they will have stack on top of each other. So your whole page will be all the text out like start on each other. But like how you structure your content. The content itself, we know how to position themselves around each other and it makes sense. Okay, still here. So I guess in this sense you are no longer dictating a certain style. But you are actually trying to tweak styles. So, you have a certain like your content is laying itself in a certain way already. And what you are trying to do is to actually push it towards the correct direction. And so this is the part where like why it depends because your position is impacted by its containing block. So a lot of time let's say when you have something that you start and you try to ask let's say or you try to ask someone on stack overflow then they will say but then can you show me your DOM? Because I cannot solve your question without showing me the DOM. And then sometimes you show a bit of the DOM then they are like okay but actually the problem is actually more outside of the part that you share. So actually maybe you share one div the problem is because of the wrapper div that's the problem. And then a lot of time we believe that the containing block is its parent but then this is not the case. So for example let's say if you put like position absolute on an element and then you and then you don't put position relative on your like direct parent, right? That's not going to be your containing block. So your absolute will be relative to the next the first time it can see a position relative and that is containing block actually. So first tip for the Zen Obsesses Debugging is that have Dev2 Sanitation. So what this is is that when you open Dev2 you realise that when you hover over your element they have certain colours they will change background colour and you realise that you actually token element sometimes they don't highlight your element and you know you are screwed. Okay go and dig out why dig out why highlighting because when it's not highlighting something is happening and although it's printing on the screen right the CSS does not know how to actually style properly your thing and then sometimes it's not that it doesn't highlight sometimes it highlights more like let's say if your square with 50px but then when you open your Dev2 it highlights a 60px and you realise ah shay man something's wrong so I guess it's something that I just like to strive for like when I write something and then I check Dev2 it should match exactly like what I have in mind so and then I guess like the additional point is that less is more so extra rules to me is not like a good way of doing things sometimes bugs that you run into is because you wrote like extra rule like if your text align is already left and then you still write text align left sure it works but then sometimes you run to a bug and you're like oh shay it's because I write this extra thing so don't write extra thing and make sure your Dev2 it's highlighting the correct thing that you want okay so go back to side overflow don't look at more questions that are being asked so this is a question that has been viewed 1.9 million times which is how to make a 100% so if you are a modern CSS person you realise that this is a longer problem and more because you will put 100 BH but then so this is this used to be a problem I guess and I think the important thing that you we should look at is that the person who ask this question said like I've tried 100% minimum height 100% it can be that this is how we approach CSS sometimes like we just throw things to the wall until something sticks and you're like without realising what's happening so this is another question that has been asked a lot of time which is how do I do transition on the CSS display property so over here our friend here wants to transit from display 9 to display block so as a normal human being how do you understand it is that you're going to think and you got something in between it means it's like you got something so nothing 20% 50% 75% got thing I mean this is to us is our human nature we understand this way but then to CSS is like what is nothing to something like I don't understand what you're trying to tell me like how can you change from nothing to something okay sure but then you want me to transit from nothing to something yeah so so but the thing is they're very nice and then they don't tell you so for example if you were in JavaScript right like when you write something wrong and then they don't understand you most of them they will scold you so either they will scold you if you have a lintar or if you don't have a lintar they will scold you inside the console but then CSS is very nice they will never scold you something they put like a yellow triangle but then it's about the yellow triangle it's like okay so tip number 2 which is you need to look within yourself for assumptions so sometimes when you write your styling you make certain assumptions and then you think the machine should know what I'm trying to say but then no the machine does not know what you want to say be explicit about what you want to do just not a transition you need to say you want to go from zero to 100% since display cannot do it let's use visibility zero to 100 okay I don't know what you're saying berh okay so back to stack workflow question next one we have is CSS selector for no children but not empty so what this person is trying to ask is that let's say if I have a div and then the div no children means no button no p-tag but then it's old text by itself how can I select this so I want to select long dust okay never mind so the important thing is that we need to look at this line I need a pure CSS solution GS isn't an option and have no control over the sausage camera I thought I knew this stuff but this is driving me crazy I just realised what this person wrote okay okay so this will bring us to the idea of CSS as a programming language so when you are writing CSS you are not writing it for fun okay maybe some people write it for fun but then sometimes you just don't write the CSS file only you actually want to style something else so and then what you are styling sometimes there are buttons sometimes there are leaves and you realise that you want to put logic into all these elements because if they have no logic then what's the point I mean just printing out some stuff and then if you want logic then that's what we start think about programming languages so interestingly CSS class HTML is is Turing Complete I mean you can check this out it can noise please scroll okay it's okay please scroll it's yourself so there are rules that will prove to you that a programming language is Turing Complete and CSS main should pass one of it is rule 110 cool so I guess if we are talking about CSS as a programming language then a lot of times we start start to point out certain properties of it one of it is whether it's with a program language imperative or decorative and as web developers the tools that we have at our disposal the main two ones one is JavaScript and one is CSS you know what guess what they are completely different one is imperative one is decorative so usually when we write in JavaScript there's logic and logic is hard but then guess what decorative logic is even harder is like super hard okay never mind so usually what we reach out for as web developers is to use JavaScript build out so what JavaScript build out means that when you cannot style something with CSS alone you just look at JavaScript and say this you know just change this element class equals to select please because I cannot change it you change it for me or I'm not clever enough change it so I guess to borrow some ideas that we have from functional programming which is that if you are writing something that is decorative focus on the result not the steps and so a lot of time when we are doing CSS we can start because we are thinking about oh okay step one because I click my children must show but then but then it's very hard to write in CSS you think about oh if this is open the result is that the children must have underline it's going to be a lot easier to think about how you want to write this so yeah in summary three points first point there are two sanitation yes second point look within yourself for assumption the last one which is focus on the results not steps and amazing 3 2 1 i 4 5 6 7 8 9 10 11 11 12 11 11 12 13 14 15 15 16 17 17 18 20 18 20