 Ya, okay. Hello, everybody in the zoom. We got zoom bomb just now so I guess it was a good thing that we have our own channel. Sorry to whoever is on YouTube. So anyway, welcome to the 50th edition of Talk CSS. We unfortunately Covid is still a thing in Singapore for the benefit of our audience, some of whom I know you are not residing in Singapore We have our own term for shelter in place or stay at home or MCO depending. We call it circuit breaker or CV. It is an appropriately Singaporean synonym. I assume that only the locals will get the joke. Let's leave it at that. So because the situation is like that, we are still online. We are even more online than before because we used to be like okay speakers just huddle in one heck of space and everybody else be at home. Now everybody is at home. So amazing. So anyway, we have a Twitter presence called Singapore CSS. We have a hashtag called Talk CSS. Use it if you feel like it. Don't use it if you don't feel like it. Next. So you can find us at these links. Nobody uses them so we'll just move on. So I have a code of conduct. We do not tolerate harassment of participants of any kind. We got zoom bomb so clearly we need to do better. But in general, I think the rest of you are fairly decent people. So yes, akong says behave yourself or you'll be kicked out. Shoutouts to engineers.SB who will contain the post produced cards of all the talks today. And we must also, as always, shoutout Cheon who is a SWAT King of Singapore. He is not around in this particular meetup at this particular time. But know that we will always give him a mention because he printed the first crop of stickers that Singapore CSS ever had. We also have friends. We kind of were offshoot of our sister meetup, Singapore Jazz, who is still going on, I think, occasionally. In theory, it's every month, like they are middle of the month, we are start of the month. Our best friend meetup is called Re-Acknowledgeable. We have a slide for them later so never mind. Post of the month in the webs. It hasn't changed for the past 4 months. Colour of the month, not everybody. My favourite segment is colour of the month. So in case you all didn't know, there are 148 named CSS colours, which is enough for 12 years plus-plus-plus worth of meetups. We are at about year 4. So don't worry, lots of colours to go. Colour of the month is called Lower Blue. It's one of the longer names. But remember, when you're using a named CSS colour, no spaces, no dashes, no underscores, it's just one single long word. You can read it however you want. You can say cornflour blue, but I think it's cornflower blue. So if you don't like hex codes, you don't like RGBA codes, you can use this beautiful English word, cornflower blue. Where did it come from? Cornflower blue is a shade of medium to light blue, containing relatively little green compared to blue. This hue was one of the favourites of a famous Dutch painter, Johans Vermeer. I think I butchered his name, but never mind. The most valuable of blue sapphires are also called cornflower blue. So this is a very valuable colour here. Name CSS colours actually were pulled from the X11 colour. So this cornflower blue was part of the initial set of 68 that was committed to the X11 repo on the 19th of August 1985. Just useless trivia that you probably never need to know. So the agenda for today is HTML and CSS news on the month by me. Very long, oh my god. I always wondered is it because everybody is stuck at home and everybody's like, let's just push features and write more specs and update everything. I don't know, really long. And then a lot of people wrote articles, a lot of people made code pens. So I'll just highlight a few of the more interesting ones. And then we have What's New in HTML by our original co-founder, Chris Leonard, dining in all the way from Melbourne. So he's in the wrong time zone. Hi, Chris, thanks for coming. And we have how to build this meaning penman sheet by also one of our very familiar local speakers, Zelle, who probably is bouncing his daughter on his knee right now. So I'm going to move on to the news. Let's see. Okay, I'll get rid of this and share the appropriate screen. Zoom is so unwieldy. Okay. HTML and CSS news for the month of May. So 75, Firefox. 75 was released, month of May. So bunch of bug fixes, lots of stuff, blah, blah, blah, blah. The only thing I want to talk about is the min function, max function and clam function. So these mathematical, okay, not really mathematical, but CSS functions have been implemented in 75. So it allows for a range of values, which is really cool because we never used to be able to do range. The first inkling of a range that we could actually do, you had to use grid. You could use a min max function within the context of grid. And now that these like a more generalized functions have come out, you can use min max and clam. So what min does is that you, it accepts one or more. So you can put in a bunch of values. It will, and apparently it it will return you or it will use it's called like a maximum allowed value based on like where you want it to be. Max is converse. So it's like a minimum allowed value. And then clam is like there's a max and a min. So this is something in 75. So it's like stable. So like everyone can go and try. You don't have to go and tweet your settings to do it. There is something that I want to talk about that does require that little. So there's also a roundup a post from Hex.mozilla where they talk about all the features in 75. So that's quite good. Let me refresh this because I pushed a change 5 seconds ago. Safari technology preview. So it's the Safari but with a purple logo. And I think they do release every two weeks. So it's quite nice because this is literally I think the latest and greatest of features that you can find in a browser. People like to shit on Safari but Safari technology preview is actually pretty good if you want to see implementations of like the really new stuff. So for example, they put in selectors level 4. Support for these and it's LH which is line height and RLH I think so LH is equal to the computed value of line height while root LH RLH is I believe line height of the root element as opposed to the current element. There's a summary article on CSS tricks. So it's also in the links Let's see. CSS colour 4 Buk fixer No, not going to talk about this. This is fun. Okay, the entire browser share so I can open your tab. I love this bug or issue report because the revert of revert there is a CSS value known as revert I think when Chromium first released it, there was an issue so they reverted the revert before reverting it back again. I just like this title I'm like, come on guys amazing. The gap property is finally in Chrome Canary, Firefox had it for so long and I've used gap in so many places and then I've always had to write a fallback for Chrome and now I'm like, okay, it's in Canary so hopefully eventually it will be standardised, which would be nice and also my not so secret, not very secret agenda is to sort of have convince Chrome people that they need better grid tooling because if you are using Chrome to do two grid, there's no numbers and stuff like that but oh no, numbers I mean it is slightly similar to what you call Firefox implementation this is a good sign my friends so yeah, that's browser news spread news is surprisingly long because there have been months where I had no spec updates but this month we have a long list so CSS speech module candidate recommendation actually got released I don't think a lot of people are very familiar with CSS speech because like to be told, I mean the proportion of people who are very familiar with screen media, readers I also not that many, I'm very glad Zale is around because he actually dug into a lot of the accessibility stuff so if you have any questions I believe he can answer them I'm just putting this out there so the speech module basically just defines CSS properties so I guess you can sort of like style the way the screen reader is going to read the text so that's pretty interesting colour adjustment module 1 very, very new spec so what it does is for user preferred colour preferences so you would have things like colour scheme property so like like that there's forced colour adjust so that one was put in for you can force a more accessible colour scheme I believe so it's very, very new like initial working drug kind of things but I think this is a pretty cool I always love the colour related module so maybe I'm biased media queries level 5 I talked about this a past couple of months because they've been doing a bit of work on it so I think they just push the new update properties and values API level 1 so I wonder this is not new like no updates but I just wanted to point at it because CSS tricks also released and I think on the add property value I also it was quite new to me because it's so draft it might not even be real but what it's supposed to do is it represents a custom property registration directly in your style sheet without having to run any JS so that's pretty cool so this is kind of more this is very related to like the Houdini and the custom properties segment of CSS so this is something that is interesting to you this is something to look out for CSS box model is a spec in and of itself so basically it was split out from CSS 2.1 where it was a whole spec and I think chapter 9 section 8 was box model which talks about the margin padding I think borders is not in here but they are splitting it out and defining it in its own spec and level 3 and split some stuff out to level 4 but essentially this is the spec that focuses just on the box model I think this is better because they go into more in depth about how it works as well as there are more diagrams the original one was so confusing I don't know if you read it, I stared at it for some other presentations I had to do and I still don't understand it they say it's English, it's not but this one is so you can give it a try CSS text module level 3 working graph was also updated text module is nice so basically this is the module that covers the bit that does line breaking, justifications alignment, your white space handling and stuff, text transformation and here is also where there's a bit of internationalisation aspects to it because there are certain properties for example hiding punctuation this property actually is quite specific to type setting for hand characters, east Asian text so I also quite fond of this module Ruby is tangentially related to east Asian text because Ruby is an annotation on top of like it's not language specific but it's most commonly seen for east Asian text so it's kind of like to indicate to you how to read character so you can do this on the web there's a Ruby element and corresponding CSS for you to style it and I think they are making it more granular in terms of how you want to lay out like the spacing between the Ruby characters and the main characters whether you want them align to the site or how it's going to be you know so this is what the CSS Ruby module covers and corresponding HTML element is a Ruby element so if that's something that you work with probably you'd like to look into this a lot of interesting things, these are way more links that I normally put in CSS findings from the new Facebook design is really interesting article because I think most people got to roll out about like this last month so this gentleman he's like a walking CSS encyclopedia he goes into very CSS properties in general but he also does these case studies so I follow him on all the things really really interesting articles Dark Mode was released on Stack Overflow so they talked about how they implemented it, I thought this was really nice so there's the functions and you can use CSS to control text selection just in case you didn't know but I want to highlight the cool pen section because this lady I can't pronounce her last name so I'm just going to try Sarah Forsyme this is a fashion on the internet come on as you can see the CSS column it's empty it's an image of my friends it's CSS so since everyone is playing Animal Crossing I guess the switch is a very apt piece of art this is also quite cute and I also want to highlight the cat because it's a cat animated small legs that's nice 4.04 I love people and they are creative I also have a favourite HTTP status code we can talk about this next year's April Fools' Day this is very very nice and Spring is over Singapore is very hot I'm very unhappy let's just look at the cat typing so anyway that's it for news updates I've dragged this on long enough so I'm going to hang over to Chris stop share