 Okay, sing twinkled, you go little star. Sing twinkled, you go little star. Oh wait, wait, wait. I need to enable the audio first. Taw! Taw! I'll keep ticking so they can test. Hello, hello... Sing twinkled, you go little star. Excellent, very good. Kikung. I'm on your... I'm, I'm on your... Okay. It's a livestream, or rather the zoom. The zoom doesn't ring. Can you share? Can point the web? Okay, okay. Alright, alright. Okay, okay. Okay, so... Ya, basically, I'm just gonna share a bit about myself. Talk about mask go-wear, some of the other go-wear. And essentially, some of the other stuff, some learning points and shameless background. So... I'm basically a software engineer at GavTech. I've been there for 3 years, so I've worked on a lot of projects. Your HDB resale portal, moments of life. Half-time monitoring, but this is actually not very important. What's more important is this part. It's by ranking, so I love to read books. I love to play video games. So usually I play video games more than I read books. And of course I like to do some CSS animations. Last but not least is, I love puns. So I love puns so much that... Normally I don't introduce to people that I'm a software engineer, but rather I'm a software developer. And the reason is because Dave and developer is a developer. Ya, sorry. Very bad pun. So anyway, sometimes I do some things on Codepan. And because I love puns so much, right? I also did a pen, which is basically on bad puns. Ya, so like... Ya, just like really bad puns. Ya, just like some random stuff. So this thing here is actually something that I learnt from Mandi. It's also a variable font, especially when you click, then it grows and then you can shrink it. So it's like some of the stuff that I do on Codepan. Right, so... Okay, so about must go where. How this whole thing came about. Basically our government announced that they'll be giving out free must. Right, from the first... FAT to the fourth FAT. Sorry, to the ninth FAT. And then actually on our end, we heard the news on the 30th Jan morning but actually we don't know what's going on. We just told that we need a team to build a website. So then we formed a team volunteer basis. So we have a designer and an engineer from some project. And then there's an engineer myself and two other engineers from other projects. So the funny thing is like, the way I see it is Nick Fury calling Avengers but no one knows who we are fighting. So we're all dead and we're like, okay, what are we doing? Then we don't know. So our base assumption was, okay, let's just build some kind of website which is more of a directory. You just enter whatever location and then you get to see basically where you can collect your must from. You can go to Amokyo Community Centre then we thought what would be interesting is we have things like estimated wait time or what's the current queue time, status of mass, blah blah blah. So we thought, okay, maybe we need on the ground they need some way to update this website and we thought maybe we could use Google Sheets for them to do the updates. And our assumption is you can collect anywhere at any community centre. So if you stay at Pasiris and for whatever reason you want to go all the way to Bunle to collect your must, you can. Then there were discussions like, oh, what's the fastest way to getting set up? So on the front-end, we're actually using React and Teowin CSS. Teowin CSS is actually a utility class based library. It's actually really pretty fast for development. But there are some downsides to it which I'll explain later. So our back-end was AWS 3, CloudFront, LambdaH, and Google Sheets. So once you're done with your React, you just throw in AWS and that's pretty much it. So the domain name, this part is where things get a bit more comical. Our production is So the staging was muskgoeware.com and the reason why this happened was because when my colleague came over and was asking what domain should we buy and say let's buy muskgoeware because it's easy for people to remember and I was just joking with him just saying maybe we should buy muskgoeware.com then we built a website to basically track Elon's mass movement. So this guy so he knew that it was a joke but when he bought the domain he spelled wrong. So that's how we ended up with muskgoeware.com So if oil fails we can actually just if oil fails we can just build a website to track Elon's mass. I know where the taxpayer is So I think probably sometime in the afternoon we realised that actually it's not true that you can collect from any community centre or like residence for god was it committee or something and actually you can only collect from the ones at your district and the reason for this is because of logistics. So imagine if everyone goes to the mass then there needs to be some logistics effort to transfer extra stock from the other CCs to that location because of concerns like that that's why we are tight to collect from the dedicated CC but we also still had an assumption that on the ground they are still able to provide real time on this. So then our design change to So on the 31st gen that's where we got the data set and the data set is actually a mapping of residential poster code to CC and something new called RN which like we have no idea what it was. What's interesting is it's just a mapping to the name but there was no address and this is also where we start to learn more collection points than just the community centre so I don't know why they make things so complicated but in Singapore apparently we have a community centre we have residents committee we have a neighbourhood committees and then we have a residents network so community centre is most of us know what is it the other three actually they are all the same thing the only difference is one is meant for private estate and one is just a combination of both so this is also where we realise that these R-C-N-C-R-N is actually volunteer base it's not someone from the government that's running this someone from the government that's running this so this is also where we realise that real time update might not be realistic because these are volunteers typically they are elderly so if you want them to use a google sheets it's a bit hard and then at the same time it's volunteer basis so the opening hours is random the location also random can be at your like some park somewhere can be at below your void deck everything is random and then there's also concerns like what if there's a long queue so if there's a long queue public perception if we display a long wait time how would the public feel? would it mean that there's a lot of people rushing to collect mask then it creates panic or like what if it's shown that the mask stock is low so things like that that's where we realise not realistic that's where you also stop work then at 8pm I went for a meeting with my senior director met the various stakeholders like PA, SAF then we kind of show them what we have and then it was okay so we need to remove all this real time update thing but they still want the website to display where to collect we also realise that it's a decentralized operation which means actually there isn't a single point of contact that handles this whole distribution it's more like they just tell all the various districts own target carry on everyone go and think of how they want to distribute send people to the residence house to distribute the mask some people say you all come and collect at here, at there, blah blah blah and that's one thing that our town councils do very well what they do very well is to create posters everything is about posters so this is what happens so this is from various districts everyone creates a poster you look at the format everyone has a different format everyone has a different format okay so on our end now we need a website to display all these locations and in our mind it's like oh my god how do we translate this into a structured data form so this one really it's really xiao liao la we have no idea how we're going to do it our initial plan was to do a reverse mapping so reverse mapping so based on this maybe one of this you're supposed to you're at block 5, 7, 2 woodlands, whatever coverage, don't know what la but basically based on the block number we thought maybe we can reverse map this to a residential poster code but we realised it's very ridiculous la because it could be at this block you could go to here to collect but the street name will be different la so you need someone to be smart in all the district segregation in Singapore and poster codes in order to do the mapping correctly so as we tried we realised it's quite impossible and then I spoke to my boss jokingly and why don't we just map it to the street then we just display all the posters and that's where he say actually that's not a bad idea so that's why must go away in the end you enter your poster code you see a whole bunch of posters la so so that's myself, I was working on the front-end we actually called back 2 back-end engineers because we need to store posters now la in S3 or something and we have our senior director assistant director and a team of people so I'll explain you sound also quite interesting la because you never I don't know la first time I see director do paper-paper it doesn't work la of course la it was all night there with us okay okay like a deputy secretary who activated like a team of people so it's like 11pm essentially what this team of people were doing they were going on social media your facebook, your whatsapp maybe like their void deck they are taking photos of all these posters and sending to our 3 directors and what our 3 directors are doing they are trying to they are essentially doing photoshop la and then tagging it this is for Emirati so basically that's what we did until about 4am, 5am this is kind of like our text tag la as you can see here we use google sheets and this is actually my google drive account this is someone else google drive account sorry la during crunch time anything goes la so basically this is where the residential poster code mapping to the cc to the district is at and then it will be constantly uploaded to esri bucket and then on the other end this is basically the top part is where we store the photos at la so when the api call is made it will query and find which district you add the posters so then we went live 4am we went for McDonalds went back home 7am and then we got caught back at night because apparently a lot of people were visiting the website but there were a series of issues citizens thought it was a fake website because we didn't put the mask head or like our our graph tag logo there's reason for that la i'll explain why la secondly they thought it was a fake website because it's a dot sg domain and it's not like a dot graph dot sg domain and there's also cases where some districts have no posters some district actually on friday night when we were scraping their social media they were changing their photos so then we were displaying the wrong information there are things like wrong mapping from the poster to the district and some poster code cannot be found there's a lot of issues with the data so during that day what happened was our senior director activated like 50 people to come down to office and basically do like updating the posters and adding more poster codes that are missing so why is there no mask head or logo it's because we did this mask away website and we realised that oh my god we have to display a list of posters and they are pretty ugly posters we didn't want to associate it with graph tag so actually that's the real reason la when we did it we were like oh my god this is so ugly but then of course after that we have to add it in why not dot graph dot sg domain because it just takes a longer time to procure which eventually we did it there were actually a ton of improvements that we did to the website la we added i.e support optimise performance, add analytics we actually switched from stitch images because people were complaining that actually they don't understand like having all these posters stitched together so we switched to carousel but carousel also has its own issues because then people say they cannot find what they want they didn't know that you can press to view different posters la so we make those buttons more prominent we added language translation, security and just a whole ton of stuff la in total that Saturday i think we did about 40 deployments just to the website alone la the poster site la that's that has always been going on that's production so post 9 fab so post 9 fab what happened they say that okay so all these rcncrn no longer you can collect you can only collect from cc like your community centres and that's where we switch from the posters back to table form so that's basically pretty much the story of must go where there is a few other go where's that's going on right now we have flu go where which is to find this phpc is like public health preparedness clinic something like that la basically it's just clinics that are prepared for this kind of outbreaks so you can search based on your location what's the nearest one you can go we have a temperature go where which is actually an internal product for temperature declaration it will rot soon to various other agencies la not sure if it will go public don't know yet then there's actually a whole bunch of other things that I cannot confirm that whether they are going to be released soon so I'll just say that they are all ideas one of it is the first one I can tell you that it's not happening already so the first one is they had this idea where we scan our identity card and then you're entitled to buy like 2 boxes of mass and so there's a team that was working on that but then eventually they script this off there is a contact tracing idea using like your mobile app and bluetooth somehow they can do contact tracing okay idea la so then there's also poster generation because we realize all the ugly posters generated by thumb consoles la so we wanted a way to help them out to standardize things la so sorry I'm just like being very bitterly honest okay so then there's also this idea that maybe like if there's ever in the future like another mass distribution or whatever maybe you want to have another feature where you can state that you want to give your mass away to like the people who need it more or whatever iya so this is sample of temperature go where actually a bit lame la but basically it's just you declare your temperature law okay next this is some of the other stuff that we did this was the first basic concept and basically when you type then the face will just like iya so then we add this to mass go where but of course we will make it look nicer la so when you type something that when you type something that it doesn't recognize or like some invalid quote or whatever la eh what's happening then we also add it to flugo where slightly different this is basically following the first one la too long then you question la okay so learning points but i guess to me the most important part was really about optimizing for performance and skill there's this guy called Alex Russell senior staff software engineer chrome project fugu whatever la but basically it's something to do with was and he gave this very good talk la okay at a conference it has to do with why we have to optimize for performance and tldr is this is more towards mobile la so tldr is we are on a 4g network but we're not really 4g because congested la a lot of people on it la and then there's also people who have budget phones which doesn't have processing power and this affects their experience la so maybe on iphone website could take like 10 seconds to load but people on budget phones right it could take them 30 seconds to load and then there's also things like wasting people's data blah blah blah so back to why i brought this up is because give you some statistics first for flugo where masco where has over 1 million visits visits is like in a 30 minute session flugo where you know thousand 2 million page views and other kind of things la but basically what i want to show here is that most people actually access it through the mobile phone so that's the first point actually it's the same for masco where a lot of people also access through mobile phone other is actually desktop la i don't know why the analytics consider it as other la and apparently got people access through television also i don't know how they do okay anyway so mobile devices there's actually a ton of mobile devices but these are some of the consider the more lower end mobile devices that don't really have like really good processing power so based on statistics actually we do have some users in Singapore using phones that are not so good okay so this is where i have to admit we actually mess things up so back to performance i guess the very common sense is to optimise your images la like a whole set poster la ya yes ya biasa so for flugo what happened was i did a light house check and actually i realised that there was one point of time that our images added up to 6.8MB and then another thing we realised is that we didn't turn on cash so every time the person visits the website 6.8MB ya so of course when i saw that i was like kind of filming la but anyway you can use tools like chrome or this light house to check for this kind of things there's also a light house c i you can actually integrate with your view plan and like to flag things out what's interesting is there's this thing called feature policy or even experimental feature but basically it can help you to detect oversized images and if it's oversized over a certain threshold you will replace it with a placeholder and then they will basically warn you la so maybe something to look for in the future ya so i think there's a whole bunch of stuff here la ya you guys can check this out if you're interested okay so moving on use cash control but you need to know what you're doing don't cash the wrong thing you can also remove unused css so the thing about teowin the concept is to create many many utilities that you can use but the problem with that is that the package size is pretty huge so one way to get around it is you can use something called purge css which will basically remove all your unused css and there's like other stuff la you can use like spell which is actually very performant lazy loading, you can use a webpack analyzer to analyze your javascript libraries and all that kind of things la so okay last slide so basically right i'm basically from gaff tech Singapore la so our goal is engineering, digital, government making lives better we're constantly looking for software engineers, designers, whatever la so if you're interested you can join us la this picture here is actually a tool that we're building for ica, it actually is out already la we're actually building for ica but essentially when you upload your photo la last time i don't know if you use the ica system la they have this very old legacy tool that you need to use to crop the images and adjust coloring now it's all automated you upload your photo we detect the face, we crop around the face we check whether your head is tutored we check whether your head is turn we check for blurness we fix the brightness we also do the most interesting is background replacement so if you deal with images i think this will be very interesting because in the first place, how do you know what's the background so if you're interested, come join us la then you'll find la so basically if you're interested just drop me an email la official email tag.gov.gc unofficial email is just you want to remember very easy la so in hokken la kwa means si so kwa de si mi na look kwa de si mi grow you the brand la everybody clap because this fine gentleman is the automat singly speaker i'll prove also it's bonus season i think give this man a bonus excellent so you must come back again anyway moving on so you have shot stop sharing your screen