 The lightning talk, that's cool, that's cool. So everyone else is like super professional and like prepared and I have my notes so that's also my slides. I hope you can see it, right? I'm bringing a little bit of the usual Singapore CSS culture to the really nice, very well-organized event today. Okay, so thanks for the intro, Chris. This is me in really small font. It's like normal size now, right? Okay, okay. Anyway, so I'm on Twitter. I'm on GitHub, GitLab. I'm more of a programmer. I'm not really like a designer. So if you see colors, it's probably by accident. I'll be talking about how not to use fonts and why it's better. So that didn't go well. Okay. So yeah, like I do a lot of front-end development, but for the last, I don't know, like maybe year plus now, it's been a sort of a very deep dive into HTTP2 and I've built this little page explaining a little bit with hype and buzzwords and things, how I'm doing all kind of technical things around HTTP2, the new protocol, how to make it better for front-end development, which is my background. I'm actually building a sort of packaging tools bundlers and now my recent work is more on CDN. They can actually deploy very easily your static websites and all kinds of other things related to that. So if you're interested in network protocols and all the new possibilities with HTTP2, let me know after this very brief lightning talk. So kind of what I wanted to talk about is this little snippet. And I was supposed to talk about this like maybe a year ago when I actually coded it and showed it to Huijing. I never got around to it for one reason or another. So if it's a little bit outdated, my apologies. But it might still be of some use to some people. So basically it's a pony fill that brings a new generic font family. Font families are things like, what do you call it? Like Sanserif and Serif, right? They're very built-in font family names. So there's a new one called System UI. And I've made a pony fill for that. It's a pony fill. You're probably familiar with the term polyfill if you've done any front-end development in the last, like, in years. Basically the problem with polyfills is that they tend to overwrite behavior that's already existing to browsers, where it tries to patch over things and ends up breaking things maybe later down the road. A pony fill is very pure like ponies or something. So the point is that ponies or whatever, they're pure like pure functions are pure in that they have no side effects. Sorry if I'm going a little bit CS on you now and not CSS. So basically there's no side effects. You don't break anything by just having it in your code base. You only affect the input that you give it. So in the context of CSS what does that mean? It means that you give it a little piece of CSS code and you apply it to something and you're guaranteed that it won't break anything else. So that's sort of how I tried to code this in CSS. Normally you see pony fills now in JavaScript a lot where they implement like certain new APIs without sort of setting global variables in the browser, for instance. But anyway, so like I mentioned, it's System UI, something like a sensor. So what's wrong with sensor, right? I mean, shouldn't be the same thing. The problem with sensor is now that it sort of maps in almost all browsers on all platforms, on all devices to like really older fonts like Ariel and Helvetica. And I'm not going to start like a font war here, but there's certain things that can be done to improve fonts today on newer devices like high DPI retina screens and stuff like that. So it would be difficult to introduce that and replace the current behavior because it would pretty much break the web, right? A lot of websites are going to suddenly look slightly different or very different and over time like keep changing and it's very difficult. It's just something that you can't really introduce new technology onto the web if you're going to break anything. So don't break the web as sort of a good principle. So this new property, System UI, introduces a very desirable property which is that you always render on the latest font, whereas Sanserif sort of renders on a more like a known default that's been around for ages. System UI is going to render text in whatever is the native font on that particular device, platform, browser, whatever, right? And that will continue to change as time goes on. Like you know how for macOS, like every time there's like a new name, there's also a new font that goes with it named after some place in California or whatever, right? And it's always like slightly tweaked and whatever and you can kind of see the difference. So let me just zoom in on some arbitrary text, pull up the old inspector. Okay, so pay attention to this paragraph that talks about Helvetica and watch me butcher it. So I don't know, can you see this thing here? Yeah, I can zoom that, perfect. So if we set this to font family, Serif, you know, it looks like that. It's slightly changed. It doesn't matter. Before it was like some annoying web font, don't use that. So if you now change it to system UI, it slightly changed. I don't know, it's subtle. Let me toggle it a few times. Oh, amazing, right? It's like a world of difference. I don't know. So it's not supposed to be a massive mega change. It's not going to suddenly change it into like comic sense or something. It's just going to give you always the latest, slightly better version of every font out there on every single platform for free. So you don't need to like deploy any web fonts. It's not going to be a performance hit on your load time. It's just a free change that you get. Now, this is a relatively new thing. So is this supported everywhere? Well, like I said, this talk is about a year old. Well, it's never been a talk. This is the first time I'm just making up stuff about it. But I coded up this thing when I saw it like a year ago. And at the time, it was slightly less supported. Now it seems like it sort of works in the browsers I care about. Just saying how it is. So again, you might be able to just get away with just using it. But it could still be somewhat relevant to have a little bit of a backup. And so I'll just walk you through a little bit of how this actually works. Like what does this pony feel all about, right? So ignore the epic story of comments. Now, essentially, this is done using this guy right here. There's this root. Anyone know what that is? It's sort of like a weird selector. Basically means like the HTML element. So anything within the document, this thing is going to apply to. And you'll see that a lot in either like regular HTML for like the HTML or when you're working with Shadow DOM and web components and stuff like that, you come across this very often. And then within that, this dash dash system UI. So dash dash means it's a CSS variable. I'm declaring a variable called system UI so that I can reuse it later. Now, I'm sort of setting up a stack of fonts here. So a font stack is basically all kinds of local fonts that are available on my system without having to make network calls. And I'm doing that so that I can sort of hit a desirable target on pretty much every platform. And it takes quite a lot of trial and effort. And you need to get a lot of devices running to figure out which ones are good. I've basically done a couple of my own here and then falling back to some of the default built-ins. So this system stack emoji and system UI, these are the ones that, well, the system UI is a built-in one. Here, system stack sensor. That's the one I've also defined here. So it falls back all the way to sensor. So in the worst case, if your browser is like from the 1980s, then you'll get sensor. But otherwise, you get some of these guys. So I'm declaring font families as you can do. Like when you import like a web font, you can actually give it any name. It doesn't have to be the name that Google web fonts give you. Just put whatever you want there. So I'm just defining one as a stack for emoji and a stack for the system UI thing that I'm trying to come up with. And then I did a lot of sort of investigative journalism to figure out for every single platform and whatever, what are the actual fonts and what are they called in the browser itself. And so that's not always very obvious, but you spend enough time on Stack Overflow and you come up with a list that looks something like this. So essentially for every browser, every platform in the last 10 years, you'll get a pretty good-looking sensor font that will kind of look like the system default font. So this mimics the behavior of a system UI without having support for it in the browser. And I'm just defining it as a font family. So whenever I use this font family, this stack sensor, I'll be getting the system UI font essentially on almost every device out there. And this is pretty cool. So of course there was bugs with emoji, which we can't have any bugs with, of course. This is the most important feature. Now specifically to solve this, I did the same exercise, but this time to figure out what are all the emoji fonts called on all platforms. And I made another stack. And so for pretty much every device out there, you get the perfect emoji font, which is pretty weird for Linux. There's like so many. They all don't really work very well, and it's weird. But I don't know. Again, for the devices I care about, it works. Your mileage may vary. So the nice thing about it, I can define this Unicode range to just sort of apply these fonts to only these ranges of characters. Unicode is like a code for every single symbol out there. And so I can set ranges of these codes and then say font, go here, for these ranges only. But everything else will fall through to whatever was there. So now I can combine my two stacks, one the emoji and one for my sensor. I can combine them into this upper guy here, the system UI. And that way it falls through, right? So if it's in the range of the emoji, it'll use the emoji font. And if it's not in the range of emoji, it'll use the system UI font, which is kind of a nice way to stack stacks in CSS with the proper fallbacks and all that. And then finally there's this way of like how do you then use that so you could figure out your own way to do this. You can just copy, paste that top snippet all over the place or with this sort of experimental thing that has in the meanwhile been discontinued, sorry. But something like this exists in every preprocessor that I know of. So you're probably using such things and you could probably mimic this behavior with your tool of choice. You can then take this snippet and automatically apply it to, you know, any kind of selector that you have to style your element with the proper emoji and system UI fonts and all of the niceties that come with it. So, yeah. That was my snippet. This is something else. Okay, that was my lightning talk. Five minutes over, sorry.