 Okay, so hello everyone who is on the zoom call, I don't know how many people on the YouTube screen but welcome to talk CSS number 56. It's our 5 year anniversary, 5th birthday, so it's our wind down edition. I'll probably talk a bit more at the end of it. So anyway, party head time. So this is, it's been 5 years. I know some people are probably here for the first time and there are some of you who have actually set through our shenanigans for 5 years. So this is kind of nice. We have some social media presence. So we are at Singapore CSS on Twitter. You can use the hashtag TalkCSS. I've said this for 5 years but nobody actually uses the hashtag other than me. So we shall move on. Oh my god, my next button is not working. Ya, so our website has not changed in 5 years. I'm still hosted on GitHub because my operating budget is zero. SingaporeCSS.github.io For a record of every single TalkCSS ever. So, you know, for nostalgia reasons. We also have a code of conduct. Regardless of whether this is an online or in person meetup, we do not tolerate harassment of participants in any form. I will invoke the power of Akong to kick you out of this Zoom meeting. We also have a full version of the COC on our GitHub. Of course, the shoutouts, we would not have any of these video things. It wasn't for engineers.sg who has been with us since day one. So once again, we want to thank engineers.sg as we have always done every month for 5 years. Without you, there will be much less of us. Of course, we also want to shout out Chee On. For those of you who have never been to any of our meetups, Chee On, surname Lim, he is the swag king of Singapore. If you have any questions about creating swag for your event, company event, meetup, whatever. He has the most comprehensive knowledge in this area. He also printed the very first batch of Singapore CSS stickers for us. So he will forever be immortalised in our shoutouts. Meetups also have friends. So our system meetup is SingaporeJS still going strong. They are usually the middle of the month. So check out their GitHub repository for details. Our best friend meetup is Re-acknowledgeable. They have also gone through a format change over the past couple of months. So they will eventually come out of hiding and probably do a community event sometime in the future. So stay tuned for that. Post of the month as it has been for the entirety of 2020 is the interwebs brought to you by the internet. So this month's CSS colour of the month is Rebecca Purple. And Rebecca Purple is the 148th colour to be added to the CSS named colours list. It is a very, very special colour and it's also a very somber one. And I helped off using it as our CSS colour of the month for all these years because it never really felt right until now especially because there is a link to our speaker this evening, Eric Meyer. I had been aware of the story behind this colour from when it first came about back in 2014 because I was already working on the web since then and Jeffrey Zelman wrote a blog post titled The Colour Purple. Eventually I realised that not many people who were like most people who weren't extremely involved in CSS actually didn't really know the story behind this colour. So I'm just going to share the story behind Rebecca Purple. So Rebecca Allison Meyer had lost her fight against cancer 12 hours after her 6th birthday back in 2014 and to honour Eric Meyer's prolific work on CSS it was proposed that the HEX colour 63399 be alias to Rebecca Purple. Now Eric Meyer only had one request if the proposal went through and it was that the colour be called Rebecca Purple instead because Rebecca had told them that she was about to be a big girl of 6 years old and Rebecca was a baby name. So once she turned 6, she wanted to be called Rebecca. And she made it to 6 years old and so Rebecca it is and Rebecca it must be. This proposal was approved on the 21st of June in 2014 and it was added to CSS colour level 4 for those of you who are interested in wearing the spec that it is. So it has a very special colour and we also have a very esteem special speaker who is closing off talk CSS with us tonight also. So the agenda is like as usual has not changed you all have to sit through me talking about HTML and CSS news of the month for about like 10-15 minutes then Eric will come on with his talk designing in the background and will close off with Daniel who will talk about the ease and wear pseudo selectors. So let's move on to news. My personal favourite. I'm just going to assume you all can read the screen. Browser updates. Firefox is on a 4-week cycle so it's 82 now. Let's see what's interesting. Input type colour now keyboard accessible and that's great. Oh this, let's talk about file selector button pseudo element. So it represents the file selection button using input type file it means you can target because it's a button you can style it specifically to look different from the rest of your buttons if it's for file upload so that's kind of nice it's this pseudo element and ease and wear I'm going to reserve for Daniel to talk about this so this is like highly relevant like thank you for cooperating with us Firefox 82 and I'm sure they did this on purpose never mind moving on. Safari technology preview I feel the underdog browser that I always like to shout out every time we talk about this because they are on a if you're not on 2-week cycle and how they do things is that everything that they push into Safari TP will eventually be in stable as and when they push out the iOS updates so if you want to try out iOS and greatest in CSS I highly recommend downloading a copy of Safari TP so now we are at 115 let's see Math Style Property I don't know if Marie is on the call today but if you watch just this anyway shout out to Marie Math Style Property is now shipped so it's a property that indicates whether Math ML Equations render with normal or compact height Math ML is like the math markup language so as far as I'm concerned, I think Marie will probably be the most interested in this for the rest of you who are like e-mat never mind moving on Flow Relative Short Hand and Offset Properties this is in one of the links I have at the bottom Flow Relative Short Hands is related to logical properties top left bottom right we are doing like block start and inline start so these are short hands for like margins, padding and border etc few bug fixes so that's for for browsers specifications had some movement last month so a bunch of specs got updated as usual I'm not gonna tell what was updated I'm just gonna tell you about the specs so that you can go and find out more if you are interested properties and values has a spec this is actually quite relevant for those of you who are interested in Houdini because this is the API for registering new CSS properties so the working draft got updated last month sizing level 3 & 4 working drafts also got updated so what's covered in this particular module is the sizing properties with keywords for the extrinsic and intrinsic sizing level 4 is just a delta spec so that's pretty interesting for those of you who are complaining my layout keeps breaking at different width when CSS is developing more how should we put this dynamic ways for you to size your boxes so stay tuned grid grid CR updated so I don't think there's anything very majorly new I think it's mostly fixes FYI level 2 is just adding sub grid to the main grid spec what's interesting is level 3 working draft is already around and recently I think someone tweeted about it so it got some publicity so of course champion of CSS grid Rachel and Drew wrote about it on Smashing Magazine the gist of it TLDR is level 3 is going to cover active masonry so something pretty interesting custom highlight API module actually didn't know this existed until fairly recently but it's the highlighting of I think select the text ya so that's something that's being worked on if you have to style this during your work the future looks bright for you box model is its own thing now it used to be part of the largest spec then they pull it out and gave it its own module so it's level 3 and this in describes margin and padding properties so that's what we have math function seem to have been shipping in blink and webkit I think in addition to I think it's fairly common these days there's mean, max and clam because I like to do responsive typography my first use case is I can do this like a responsive typography thing without having to write a fairly complicated function but what it does is you can tell the browser what's the minimum width you want more math functions I think will increase the ways that we can instruct how the browser wants to size your things so this is a article that we can all go and check out lots of interesting articles this month if you're subscribed to our newsletter then I'll send it to your inbox otherwise just come to our okay cool copen this is not a copen per se but like I'm a big fan of this this let's call her a web developer designer but she's known for doing CSS portraits it might blow up my browser so yeah so I featured her work many times Diana Smith so this is just a latest work this is CSS my friends so please check it out can I go close this before my browser explodes and somehow the month of October a lot of people are very inspired to build like CSS games I think I don't know because there's also the Halloween theme right so there's a game called you must build a lighthouse oh no what did I just do sorry did I stop sharing the screen let me sorry so difficult so this is you must build a lighthouse it's a game that is built with radio buttons so you can see see what it is this is very very cool 100% CSS, no artificial colors or ingredients so that was fun this song also went partly viral on the twitter and I also like the comment of JS so yes this is a pure CSS game very fun, very interesting do check it out it's like one of those adventure games so I really like this vibe so that's it for me I'm gonna hand over to Eric so I'm stop sharing my screen now