 So my name is Wei Yuan, as mentioned, I'm from Rocker Dan Vicky and arguably I'm going to say probably this could go very well or very bad because Trigger Number 3, I'm not sure what your memories are of Trigger Number 3 back in let's say high school or secondary school. So yeah, Trigger Number 3 incest and what did I learn in implementing? What is our motivation in doing this in the first place? Okay, so behind every solution there's some problem that we face. So this was my problem, designers come down and tell us please do this animation in one of our web applications. So just to be clear, this is already deployed, we have a solution, currently it's in one of our applications called Sumpi. Okay, so before I go into our actual approach, let me just talk about a few approaches that we eliminated, that we do not use for solving this problem. So one of the most easiest things to do, you know, we want to do an animation like this, create a gif, load it in a web page. But what's the problem? You can see, very big size, 7.5 kilobytes. It's not exactly scalable, you load this in a web application, let's say you have 10 animations you want to load, essentially it's 1 megabyte. You have mobile users in your site, you're not being generous to them. You know, essentially you're eating up their bandwidth for just loading a site. So not exactly a good solution. Okay, how about using something that's more elegant? So some of you might have heard of this thing called Lotet Files. So it's this library that's created, or series of libraries created by Airbnb where you can create a JSON file that has this animation information encoded in. And what you do is you load this library within your web application, load this JSON file and essentially you can render the entire animation out. Okay, so it's quite useful because it not only has a JavaScript library, it also has this Android Client Library as well as some iOS library. And it means that your designers can just do the work once and share it across all three different clients. Okay. And the good thing is this, for a JSON file, I found out that when we transform this to a JSON file, it was just 2 kilobytes. So as compared to previous, the previous solution of a GIF is around 98 kilobytes. You know, you see, it's clearly night and day difference. Okay. But there's another problem here. You know, again, I'm going to talk about scaling because previously we talked about if you're going to use a multitude of images or GIFs for loading, in our case here, we're trying to solve the problem for only one single animation. And you can see over here, loading the minified library is around 58 kilobytes. So you add that to your JSON, that's 60 kilobytes, somewhere around the same price that you pay for loading a GIF. So not exactly the price we want to pay if I just want to load one single animation. Okay. So on to the actual solution, you know, what we exactly did in drawing that animation in CSS. But firstly, just to call back to the previous solutions, we managed to draw all the hexagons, the animation itself, and perform the entire, the properties required for the animation. And the total price we paid was only 1.4 kilobytes. Not bad. Okay. But it's not as smooth sailing. We end up with this situation first. Okay. And the issue is because the height of the hexagon is not equivalent to the site of a hexagon. So one of my key problems when I first implemented this solution was that I start off with a square. So you know for a square, you have four sites, height is equivalent to width. But then you change it to six sites, shit, that's not the same anymore. So you have to do something about this. And there's a few solutions you can do to sort of resolve this. You know, maybe you can do some form of computation or guess and check. Guess and check until you get the finer, the right length for let's say this sites over here. You put it into your style sheets and essentially you should get a solution. But you know, we're all engineers here. You know, we want to automate the process of getting this length, you know, without having to do this entire manual process. And you know, as engineers, sometimes you have your designers or product managers, you know, they'll come to you and say, you know, this size doesn't look right. Can you make it like 5% bigger? And then, you know, we have four hexagons that I need to draw. You know, we do the whole process again. It's like, it's horrible. So, so how do you automate it? Okay, one of the earlier things that we look at is, okay, if you want to create some sort of computation function, right? Why not use something like SES? Okay, you can create functions, put in some input and generate some output for that. So, the input itself would be the height of hexagon. And we can assume that, you know, there will be some logic, some formula that you put in there to get the the site of a hexagon. Okay, and so into the more mathematical part. So, you have a hexagon. You break it down, you can see there's a right-angled triangle. So, low hand behold. Trigger number 3. Ya, you can start with something about that. So, I'm not sure if anyone is familiar with this thing. So, I guess, I'm not sure if this is a Singapore thing. But you have our math teachers usually drilling us with this thing called Tuakaso. Which is essentially a representation of the tangent, cosine and sine functions. But I'm not going to jump into the math itself. I'm not a math teacher. I probably wouldn't do a good job doing this. But the general outline of this whole thing is that essentially you can use the tangent formula to get the final answer. Because what happens is that by manipulating the tangent formula, you'll get this formula over here which is computing the length of O using the tangent of 30 degree which is the adjacent angle over here which we know. And also multiplying with the side A which is, again, this is just half of the height over here. So, we have all the properties that we need to create this function. And O itself is essentially the output you just multiply by 2. You should get the final solution that we want. Okay. But actually it turns out that there's another interesting thing here which is to implement tangent, you can actually implement you need to implement the sine function as well as the cosine function in order to compute that. And to implement cosine, you actually have to implement the sine function. So it turns out instead of implementing just tangent, you have to implement all three functions. But here's the thing. You're using functions. So why not implement a bit of use an engineering principle? Code reuse. So implement a sine function first. Then use the sine function to create a cosine function. And then use both of these functions to create a tangent function. Okay. So, more math. Oh. This slice in the middle it's not easy to see. Oh, darn it. Let me make this a little bit higher. There's some minus like symbols and all that. Ah, okay. Much better. Okay. The idea is that okay. So this is for those who are not familiar with this, this is called the Taylor series expansion. I'm not sure how to explain this probably because I'm probably not like have the expertise to explain this. The idea is that you just have this formula. You have to submit it from zero to infinity where you get this formula over here. Once you submit to infinity, you should get the final solution for whatever input that you put in for the sine function. Okay. So in breaking this down into a formula, you can look at breaking down this problem into more smaller bite-size portion. For example, you have this factorial over here. Can we create a factorial function? You have this x cubed x to the power of five. We can create some form of power function for that as well. Okay. So, okay. Creating a factorial function is very simple. Just create a loop iterate on the values all the way until some terminating value. Okay. And then you'll get the value that you want. But we made a small optimization here which is so you see over here you start off with three factorial and then you go on to five factorial and then as the formula goes on is seven factorial nine factorial eleven factorial. So the idea is that essentially I could just compute the value of five factorial from three factorial you know from a previous iteration by just taking the value of three factorial multiply by four and five. And essentially we made the function be able to accept prior values. So by doing this we reduce the runtime from n square down to n. Okay. And you can do the same for power as well. And yeah again sign function. So it's kind of long. It's kind of small as well. But essentially the idea is that the main logic is within line to the nine thirty seven I'll share this code later. So don't worry about this. But basically the main logic of this algorithm over here is to represent this function this formula over here iterating multiple times and submitting all the values together. There's also a lot of things on top but is basic optimization on assumptions you can make on the sign function. For example sign of zero has a value whole number value of zero sign of ninety degrees has a whole value return value of one. So you can just make those assumptions and return right away if your input correspond to that value. And yeah so another thing to note here is that I have this loop over here. Just not mention the formula is supposed to you're supposed to sum it up to infinity. Of course if you're writing a script we can't really like iterated infinite times. So I have this variable over here sign iteration is actually the value that we have today is 10. So what we found out was that if you sum this up to the 10th iteration the 11th iteration is essentially a value that is 10 to the power of negative 18 or 19 percent of a deviation from the final answer. So unless if you have a monitor that's huge enough to actually see the error right or rather the small difference right is essentially a very good approximation you know to the the final answer that you want. Okay. So we're done with a sign as mentioned code we use just use the sign function very simple for sign implementation and tangent yes so we are done so finally we get to this point okay I'm just going to yep so essentially yep being imagine to recreate the animation that we want at Nali in CSS okay so almost if we come to this point you might be thinking okay this should be the end of my thought but truth be told it's actually there's still one more problem okay so to be honest with all of you I when I was creating this demonstration or this presentation I wanted to challenge myself you know we create all the functions that I wrote in the code base of Soompi before but of course you know as an engineer in my company I can't just copy and paste the code out so I will rewrite a lot of things and when I was rewriting it I actually made some mistakes with my sign function you know implementation of this sign function there was some bugs in there so I debug it I fixed it but then something occurred in my mind I was thinking about you know if errors can occur in your functions or mix-ins for your SAS code you know why don't we treat it the same way as you know our front-end JavaScript code or back-end code as well you know why don't we do things like unit test crazy okay so turns out the internet is a very interesting place you search it up you can find a lot of interesting things and one of these things is this library called true it's created by this organization what they promise is you can write your test in SAS and report it with test runners like mocha so I went ahead I did it write factorial test over here you can see I'm making a session for some factorial function calculating 10 factorial and comparing again some final value okay and so yeah it turns out it worked you can see over here this is the from the client basically running the test itself I'm able to get like all the success or failures of each of this test results I can so this one I'm actually using Jess as my test runner what you can do is you need a shim file that you can include within your project to integrate this true library along with a test runner Jess okay okay so yeah what's the lessons that I learned from this just to be very clear with all of your my message that I'm trying to drive today is not to ask y'all to get and implement your own trigonometry functions please all do that there's libraries out there there's like some articles out there that probably did it better than me at the point I'm trying to drive over here is by looking into implementing something using sess creating functions or mixins taking this logic in resolve elevate CSS from a style sheet language into something that's closer to a programming language and by doing that you can actually start applying engineering principles on top of it you know one thing that we talked about code we use you know using a factorial function using the implementation in the sine function then the cosine then the tangent and then another lesson that I sort take away from that is the you need testing itself you know sort of quality control you don't think about things like quality control on your CSS because it's something that you visualize it's something that you know it's UIUX you know you have to visualize and see if you works out but in cases where you are writing functions or mixins this are logic so this are things that you need to guard against like in the future if someone writes in some new logic it should still work according to the initial specifications you put in in the past so yep those are the lessons and basically I've reached the end of this so as Paging mentioned we are hiring and looking for people so if you are looking for any of this positions you can go email her for a few more seconds okay we have to see sikap 1 more if I interested in the code examples or some of the like the just project that I mentioned earlier on like I have a project that I put on GitHub I can take a look at that from the medium article that I have over here so yep that's the end of this so hello oh no thank you thank you