 Thank you. So, I don't have a lot of slides. In fact, I don't have any slides. But I have something to show, okay? So, that's the talking. Okay, other way. This way. Okay, okay. So, if I do this, I can't tell. I have to like. Yeah, yeah, yeah. Okay. So, trust me, I have prepared a little bit, but not too much. So, I'm going to talk about this feature called CSS counters. Now, some of you may know about these already. I didn't until, I don't know, maybe a few months ago. And I wanted to give a talk here at Singapore CSS. And I figured this would be a good one. But as I was thinking about what to say, I realized that there was something, there was a deeper meaning to this. All right? So, probably halfway through, I would become a bit like Rembley and stop talking about counters, but just, you know, too bad. So, okay, one day I woke up and I decided I had to make a list of things that I love. Okay? And this is a non-exhaustive list. React, CSS, JS, Jamstack. If you don't know what that is, stick around at the end. And of course, being a, you know, engineer at heart, I wanted to label it in a, I wanted to number it in a sensible fashion, right? So, of course, I can do that, right? Like we just saw JavaScript really powerful. So, I'm not going to go deeply into the code, but the output is that the top level is 123, then it's like 1.1, 1.2, blah, blah, blah, kind of like your exam questions, I guess. So, okay, long story short. So, can you see? So, long story short, I put a, I put an array of the things that I want to show up here. And then I wrote a questionable function down here to display it. So, it's recursive, which is already a bit like, okay, am I trying to make a point or not? But there's two parts. So, the first part, the first thing it does is it renders some react, some list items inside an ordered list. That's fine. That's got nothing to do with counting. But the second part is it's got this funny argument that I put here called depth. And this is where I try to include the logic of iterating and counting and adding the like sections. So, like 1.1 and then, so that's two sections, 1.1.1 is three sections. So, I got it to work, right, as you can see. But it's kind of questionable. And what's questionable about it is that it's not very readable. Okay, there's kind of a lot of weird things going on. The logic to calculate the numbers is tightly coupled to them being like numbers. And if I wanted to have a different kind of counting system, this is not going to work. So, it's kind of fragile. So, but it works, right? So, job done, right? Okay, obviously not. There is a better way, arguably a better way. I think it's better. And I'm going to show you what that is. And okay, to make the point, I've taken out all the JavaScript. So, it's the same list. Here is the CSS. It's like, structurally it's the same thing. It's audit list with list size terms and there's nested stuff. But if you notice, I've got the exact same numbering system. And there's no JavaScript, right? So, how did I do that? Wouldn't you like to know? So, okay. So, this is the HTML. And how I did this was... Basically, all the logic, all that complex logic in the questionable JavaScript function is reduced to basically these... Okay, not even this one. Basically, to these seven lines. So, 11 to 13 and 20 to 23. And fun fact, this is more declarative than React. So, yeah, think about that. So, what happens here basically is CSS has this feature called counters. Okay. And what counters let you do is they give you a solution to count things. And how this works is you use this property called counter reset and you give your counter a name. I'm going to skip ahead a little bit here and go straight to the nested counters example, which is what I've got here. So, what I've said here is I have a counter called section on every audit list. And in each list item, I increment that counter. Right? So, if we go back to the HTML, we can see that there's more than one level of audit list. There's a top level and then each sublist is another audit list. So, what's happening here is that the section counter in each child audit list increments it self as well. And then for each one of those, the list items in that audit list also increment. So, the point of CSS counters is you don't actually have to understand that too much. All you have to do, all you have to know is that you can use the counter reset property to get a, to create a counter. And then you can access the value of the counter. And you can do that through this function, this built-in CSS function called counters. So, you give it a name section, which is the counter that we declared. And you join it with a separator. So, this could be something else. And basically that's it. So, here's where the opinions in the ramblings start. So, this is great, right? It achieves what I needed. It's, in my opinion, a lot cleaner. Your mileage might vary, of course. But I think this is a lot cleaner. But I did have to figure it out, right? I didn't know this beforehand and it wasn't immediately obvious to me how this works, especially with the nested counters example. So, the fact that there was another solution to my problem that I didn't know sounds like non-knowledge. But it's a bit more significant than that because I was listening to the speaker called Richard Harris, who's the creator of Svelte.js. Don't worry about that. It's the JavaScript thing. And in his talk, he said frameworks are for, we use frameworks to not to help us organize code, but to help us organize our minds. And this was like, I was mind blown when I heard this. Because it's not just frameworks, right? It's actually almost everything that we as engineers use, especially the high-level languages like JavaScript and CSS and all that. So this was quite a revelationary moment when I heard this. And I'm trying now to apply that to everything that I think about. So, in general, when we create these solutions, we're not doing it for the benefit of the machine that's running our code, right? We're doing it for the benefit of ourselves and the other people looking at the code. So what this means is that there's a lot of people out there trying to make your life better. And they are like your strange friends from faraway places, right? The person that invented CSS counters, I don't know them, but their solution has helped me. And they did it for me, right? They did it for me and all the other people that want to make lists of things they love and other lists. So even though I didn't know how this works, and when I looked at the Mozilla, the MDN docs initially, I was like, yeah, I kind of get it, but don't really get it. I felt I owed it to this person to figure it out because they've created a solution for me that may be better than the one that I knew already. So really, at the end of the day, it's not about, like, a lot of what we do is not about code, but it's about people. And this is something that's quite important to me. And so when you, in our profession, when we do things like use CSS counters, we're creating connections with other people. I feel like I've made a connection with the person that invented CSS or created CSS counters, right? They've affected my life in some way. And that's quite a profound realization that we've all invented all this stuff for each other. And it's not just relevant for things like massive public things like CSS. When you look at a code base, a new code base, I'm sure everyone has looked at a new code base and thought that it sucks, right? But it doesn't matter if it sucks, right? Because it's been written by someone. And when you read it and you understand it, you are communicating with them on a different level. So yeah, I think that's quite enough. So half CSS counters, half life. But I hope you get my point here, which is that there's, especially with CSS in this day and age, there's a lot of hot takes on it and a lot of shade and stuff. But the important thing I think is to not dismiss solutions outright because they've been created by somebody that's trying to do the same thing as you. They've done it one way and it's not the way that you might be familiar with, but it might be a better way than the way that you are familiar with. Thank you. Wait, about counters or about life? I saw it on a tweet. I can't remember which tweet, but should I keep this on? Yeah. It was a tweet, yeah. I think it was, oh no, I can't remember, but it was a tweet. And I think what struck me was it was a problem which I would have instinctively gone JavaScript to solve and there was actually something else non-JavaScript and much more like a first class solution for it. And how do you feel about the founder or the creators of Code Sandbox? Is that a trick question? Code Sandbox? I love Code Sandbox. I think it's one of the greatest tools. Okay, sorry, that's a bit extreme. I think it's a fantastic tool. Oh yeah, so yeah, that reminds me. When I, so if you notice, I actually had two sandboxes. So when I made the first one, I, you know, I hit the blue, no, the blue, like create the React Sandbox, the empty sandbox. And then when I did this, I went into something extreme and I hit the brown one, which is the vanilla sandbox. No React. Good job, sir. Yeah, so good job for Sandbox for having that Code Sandbox. Okay.