 Okay. Hello, everybody. Hello to the one person who is in the Zoom call who is not a speaker. And our ex-number who is watching this on YouTube with a 20 second lag. Welcome to the 51st edition of TalkCFS. We did not expect to last this long. This is our fourth year as a most good TV series, usually picked at season 4. And then it just goes downhill after that. This might happen to us. We shall see. Anyway, as you can see, this is my room. Everybody's on Zoom. You're also at home or maybe you are chewing for bubble tea and watching this on your phone. I don't think that's true. So plenty, even though Garment say CV is over, it's not. Okay, they have said, ya, circuit breaker will be East or Ephesus. Long story short, they're just extending to be lah. So we are still at home and Singapore's CSS logo still encourages mandates that you should wear a mask like our local. So you can join us on these channels. Actually, nobody really uses it lah. This is legacy from 4 years ago. But the links are there need. For example, our homepage is still hosted on GitHub because we are still broke. We still have an operating budget of $0. So like that. We also have a newsletter. A newsletter basically is the text version of the next 10 minutes where I force all of you. Actually, I cannot force you lah. You can just turn off the video if you don't want to listen. HTML and CSS news for the month. So that's that. You can join this anyhow community. You have court conduct. Akong say, I'm invoking the power Akong to tell you all that we do not tolerate harassment of discipline in any form. Behave yourself or you'll be kicked out. And we have tested this. If we kick you out in Zoom, cannot come back in. Because I accidentally kicked out a friend and then she cannot come back in. So apologies to a friend. Next time I will aim properly with my mouse. So please kindly be nice to everybody. Shout out to engineers.fb. If you are in the Zoom call, Actually, I don't know what you see on YouTube but you will see an E. I call as engineers.fb. And they are the ones who have endeavored to record every single 10 meter in Singapore since 1,000 years ago. And so every meter in Singapore needs to shout out engineers.fb because they are amazing. And the logo on the right is CA stands for Chee On. Full name, Mr Lim Chee On whom I anteriorly call the Sweat King of Singapore. Because he is the Sweat King of Singapore. First batch of Singapore CSS stickers was printed by Mr Lim. Because I cannot see all in person. I have an excessive stock of stickers. We see how la. I don't know. Maybe if you want, I can go and support Sympos and then send to whatever la. You see how la. Options, options. But we got stickers la. Friends, friends, friends. Meetups are friends. We are kind of a system meetup of Singapore JS which is like the, I feel they are one of the most long standing around. They've been around for like 7, 8 years. They are the premier front-end meetup in Singapore. One day somebody said, I think Singapore JS are very JavaScript heavy. Okay, so it's far off. Then we do CSS. And then, React Knowledgeable is our best friend meetup also. They relatively young, started like 20 last year maybe. But yes, friends, friends. So you should attend their meetups too. Cause of the month, interwebs because COVID. Okay, colour of the month. This is my favourite thing. So if you have never been attended any of our 51 meetups before, you probably are sure. You can consider. If you never come back, I can understand lah. But anyway, every month we have this thing called CSS colour of the month. There are grand total of 148 CS, named CSS colours. I did not start this from the first edition but basically long story short is that there are enough CSS colours to last about 12 years. We are somewhere in 2 years for lots of colours left. So no worries. Colour of this month. Light Coral. Okay. Coral is a pink-orange colour which is a representation of I cannot pronounce this word. It's Nidarians. It's known as precious corals. Light Coral is a lighter version of Coral. The first recorded use of Coral as a colour name in English was in 1513. I may or may not be doing a lightning CSS stock on colours to pad time after my 2 esthems so we will talk about this a bit more. Okay. So how CSS colours work is that if you are like me cannot remember numbers to save your life. I cannot remember phone number. No matter how beautiful it is I cannot remember. You know how to remember phone numbers, right? I use finger, physical like I will have to tap the action to remember phone number. I cannot remember number. So anyway like Hadgscode doesn't really mean much to me. So if you don't like Hadgscode or you don't like to write colour functions you can use the English word Light Coral No space, no dash, no underscore Light Coral just spell it out understand but if you are a numbers person you can use like F08080 at the Hadgscode or you can use the RGBA or without a colour function pinkish, orangey, hue, on your side. Yes. CSS color of the month. Like color everybody. Today's agenda start off as usual me telling you all about HEML and CSS news of the month that you don't care about. And then we managed to snack. Snack Bishop who has recently started a YouTube channel on CSS. I managed to track him, track him, track, track, make him debut, debut, his second video with us. So you are premium, okay. This is like premium content of me. And then of course I also managed to track, track, track CSS Queen, Olivia Ong, dining order in, dining in all the way from KL. So there's a team here. And then if they talk very fast, then pet time, I pet time at the end talk about colors. So, okay, without further ado, let's move on to the news of the month. So if you attended a live one, basically this is the point in time where I do this in front of people. So now I'm just doing the same thing virtually where I also, oh my God, I can memorize. I'm a Gihau account. Amazing. So proud I stay out there. So everything open source lah. Of course like close what source. There's nothing here that's worth anything. Oh my God. Anyways, 51. So, June, Zoom. So from browser land, actually it looks like there's a lot of stuff. Basically from over the years, the refresh release cycle has gotten faster for Firefox. Firefox has gone on to a four-week release cycle. So depending on the calendar, right, sometimes you will get two months in a row. So like Bisma, Kena, 76, 77, 77 came out, I think yes. So it managed to catch it. But actually catch also no point lah because 77 was mostly JavaScript updates. But anyways, got bug fixers. Because they always ship bug fixers, which is great. So apparently the option element, when the element content empty, the labour value for the option element wasn't displayed, it's a bug. They fix it now. Amazing. Most of the things in 77 were DevTools for JavaScript. So I think, I don't know about the rest of you. So for me, CSS debugging, ID Fort to Firefox, then JavaScript, I will use Chrome. Because everybody for eight browsers in store lah, you need like two version of Chrome and three version of Firefox, two version Safari, and then have another computer for IE. So this is not news. But I think they're trying to catch up on the JavaScript tooling sort of things. So a lot of 77 was update. So you can check out their feature article on Mozilla Hacks. 76 we missed last month. So again, bug fix, bug fix. But what's interesting? CSS for system colours are now supported. So what are system colours? This one, this one will be interesting. System colours is different from name colours. You can name colours if you don't want to see me, like coral, like golden, broad, yellow, whatever. That's named colours. System colours, right? These are fairly new, introduced in CSS colour module 4. They are relevant for something called force colours mode, which is also a relatively new colour mode. What you do is that your browser is going to restrict colours onto a user and browser defined palette. So the options for system colours are things like active text, button face, field, link text. At the full list of all these, it's inside the spec, inside the level force spec. So this is now actually supported in 76. Quite interesting. So it's in a stable version. So if you, I don't know if you have anything like non, you know, everything that's trivial, then you want to try it out. You can go and try. Quite interesting. Again, the next thing is the features. So there's again more API staff and JavaScript staff, including audio workers. So that's 76. Safari technology preview. Actually, I kind of, I'm kind of fond of Safari technology preview these days. Of course, I was lucky enough to have a, like chat with some of the webkit engineers once and then I asked him that question. I'm like, oh, so you're like technology preview. Is it like, you know, nightly or like close coronary where you're like try stuff up. And then he was like, the webkit team is quite small. We don't really have the effort for experiments. Everything that we shipped in technology preview will end up in stable. I said, whoa. I don't know if it was you're trying to crochet or not. But basically, right, everything in technology preview, right, it's not going to be taken out. It's there. It's just event. See when I always want to roll, when the OS want to roll it up. So all the staff in technology and they are actually very cutting edge. Like now it's 107. 106 has already added support for the selector level four selectors. So there's where and is. It's very fun. Cause there was this CSF deaf rail who post a lot of this kind of quiz tweets from time to time. He was asking, what's the difference between ease and where? Quick question. They behave exactly the same. It's just that one has a is a like so ease used to be matches. So the this pack has evolved over some time, right? But what do you use it? It's used to match a list of selectors. So ease is to be called matches. And now they alias it. I don't know if matches you use can whether it works or not. If you have Safari technology preview, you can try using matches and see if it's supported. So you plug in a list of selectors and ease will hit will let you hit everything inside the inside brackets. Where does the same thing? It's just that where doesn't add specificity. I think this should be a proper lightning top. But it's outlined in the spec. You can go away. It's actually quite fun. And it's not just fun. It's actually going to be very useful because it's a I think it's quite powerful in terms of like as a selector and it can help in making your code like more coincide, especially if your styles are very based on different states, for example. So this is pretty good. Yeah, should download Safari TP as one of your secondary browser. You already have eight. What's one more? Chrome 83 has updated form control. So for a lot of the UI elements we cannot style. So they are like defaults and Chrome 83 kind of like made it look better. Yeah, so I can go and go and check that out. Support for the revert keyword is fun. I thought about this last last month. So okay, I don't want to do myself. Ah, okay. So Microsoft had they are like build event couple weeks ago and they never announced but because I don't know 20,000 people watch build someone realized that one of the presenters was using Microsoft Edge or Linux and then he screen-shotted it and he went viral on Twitter. Long story short I think Edge for Linux is might be coming out soon because you know I think they on purpose on purpose quietly, then get some do your presentation on Edge using your Linux machine, okay? Then he probably like okay fine. So yeah, we did that. In specification land some updates text decoration level 4 working graph has been updated text decoration in case you didn't know what it covers it covers like underlines, text shadows emphasis all that. I think I mentioned this about a few editions ago some of the browsers supported skip ink or something like that basically makes your underlines look better. So that's a good thing. That's a good thing. You don't have to do the border treat to make I know a lot of people don't like that the underlines are like kissing the bottom of their tags sometimes then they like do that. This gives you more granular control over your underlines and overlines if you use those things so that's a good thing. Display module level 3 also got updated basically it's a wording updates to make things more clear I think they added in a very explicit line display is not an animatable property I don't know if anybody tried to animate it doesn't make sense from an interpolation point of view why why would you try but I don't know okay but so they did a lot of clarifications position they are working graph also updated so they started to rearrange rewrite and update a lot of the stuff in CSS2 into their individual module so things like display position box model all this more part of the huge monolithic CSS2 document so now they actually modularizing it as well and then making things more clear adding examples and I think it's a very good thing so position which is like you know your relative absolute whatever they kind of like put it out into its own module and it's a it's a working graph at the moment so if you are I feel like if you are confused about a lot of the positioning stuff this is the spec to read because it explains the words the phrasing is much clearer than the original CSS2 I don't know if you ever tried to read the CSS2 one for like how they calculate sizing wah it's really target at engineers not target at humans they say it's English it's not but I read and then I read again and then third time I still don't get it I've read so many times before oh I think and I think I know but the wording for all the all the module style specs a lot more friendly so take it from someone who has read both this one you trust me trust me I I thought a lot of nonsense for the most part but this one not nonsense this one is real and so box sizing hey it's now it's own thing so this is first public working graph for box sizing and what's what's cool about this is that it introduces an explicit aspect ratio property so it's going to be it's defined there so what what aspect ratio is used in a calculation of auto sizes and and I think for most of the most recent versions of the modern browser they now set the default aspect ratio of images based on your images width and height attributes so this is not the CSS property width and height it's like your image you have a width attribute and a height attribute it's kind of like when you do SVG you put in those values modern browsers will will detect that as a as a default aspect ratio so it's from 5471 onwards I think chromium kind of a number and webkit so supporting this soon so this is this is good because you can use this to prevent layout shifts so like the most common use case I encounter this like so often I load the page then the image somehow never doesn't take very long to load then I scroll scroll scroll just as I want to click the link jump peace me off so this this ability I would say if the browser helps you set a default aspect ratio kind of meaning I don't think it will get rid of it altogether the jumping but you will minimise it so that's a good like UX improvement so this is pretty cool there's also stuff about intrinsic sizing and extrinsic sizing if you don't even know what that is I'm going to read the spec man I'm like funneling you all to read specs in terms of interesting links LAN I think because now Covid everybody just say at home write articles lots and lots of articles let's see let me just point to one that is interesting oh okay this one this one ask an expert why is CSS so if you heard of strike you know a friend who works at strike or payment payment company strike they have this public cation department I think and they they published this magazine called increment the online version all the articles are free they also have a print version very nice this edition front-end edition so it's not just CSS they interviewed Evan Yeo about view it talks about view 3 there's some CSS stuff there's like architectural stuff micro finance everything it's a lot of content it's very well designed one of my favourite sites as well as like front-end related magazine so you look for increment magazine so this is one of the features as an expert why CSS is the way it is oh my god so good so good so that's that's my recommended article the rest of it the rest of it are also very cool so just a bit you're at home what are you going to do anyway you can read more man a lot of people also do code pens let's see ya okay Animal Crossing is a thing I don't know how many of you will play Animal Crossing but like okay let's show this someone did pure CSS Animal Crossing because I guess everything in Animal Crossing can be recreated or you know so that's kind of cool pure CSS so very impressed you know what's even more impressive oh my god did I not add it in here oh shi okay no there's this oh I really didn't add it in oh my god this is very bad this is so bad but it's the basically there's a CSS oil painting I'm going to add this in later you all go and google it la it made it made news okay now okay I must use google google is a better search is it friend scene no basically is this this lady I think she open sources everything okay she has not she has done this multiple times so it's not the first time that we've talked about this her CSS is different level one it's like ah this one oh there's a new one come on load and one internet come on excuse me excuse me excuse me this is CSS you right click inspect you can see okay it's not showing up whatever anyway is CSS hello everybody you got URL go and right click is that CSS what is this this is this is crazy okay so that's it that's it for news and weather nonsense for the benefit of saving effort bishak has kind of already send me the link so I'm just going to play premiere the flexbox lay up