 So basically, it's a batch of college college. It's really... You might need this. Okay, you're going to put this in your pocket, I think. Definitely amateurs. Hello. Hi. Hello, hello. Hello, hello. Hello, hello. Yes, I'm... We don't have that. Okay. Okay, yeah. It's a bunch of coding challenges come up by this guy. I will say, I think he's a very smart guy. Because the challenges are really fun to do. So it's released during the Christmas period over 25 days. So he will release one each day, and people will compete to see who can compete his challenge first for each day. And so it looks very old school like this. So each day, there will be one challenge. Then you will open up the puzzle input, then you... So the puzzle input is unique for each person who will log in. So you cannot just copy your friend's answer. So... And then you submit it. And you can... So there's... So, okay. This is just what I was saying. So you are free to use any programming language you want. So because I use JS, so I will share today's talk in JS. So there are things like leader's board. So you can see who actually complete the fastest. There are some really crazy people out there that can finish in two minutes, five minutes. Yeah. Then you can look at your own personal stack. My stack wasn't that good, but because most of the time when they released the challenge, it was lunchtime. So I wasn't doing the challenge. Yeah. So you can also see actually how many people actually completed. You can see along the way, people are dropping off because they are fighting too tough, too harmful for their health. But if you need a little more help, that's always ready. You can... People actually share their solution. And you can actually see how it's done. So I'm going to share some of the learnings I've learned from this, doing this, because if you do your day-to-day JavaScript, you hardly actually touch some of the tools that you get to learn, that is out there. You know you learn about it, but you hardly actually try out these tools because the kind of problem you face in your day-to-day is actually very restricted. So doing coding challenge sometimes actually is very helpful to open up your eyes to new things out there. So for example, first thing, generators. Actually, who here knows about generator and actually do use it in your code? Actually, you know what actually... Even you learn it, you hardly actually find a chance to use it. But actually coding challenge really has a lot of problems that actually generator is ideal for. So by the way, for those who don't know what the generator is like, basically a function with a star and the function will return the iterator. So within your function, you can have this use statement that will return a value and the next time you call the next, it will go to the next use statement. So it allows your function to operate like a go-to statement. So I'll illustrate. I'll just use one case where it's actually very nice case to say. So for example, one of the problems, day three of 2017. So the problem is actually about spiral traversal. So it's not that hard once you actually draw it out on paper. So once you draw it out on paper, you realize that actually the pattern is very easy. So right one step, up one step, left two step, down two step, right. So every time you move two, you actually increase one more step to go. So since the pattern is so easy, so we can actually write a generator for this to solve this problem. So this is basically the implementation of what I was writing down just now. So it's like write one step, up one step, then increase the number of steps to two steps then. So you see all this use statement down here. So when I actually call my function to actually get the result, so I only need to just do a dot next dot value. So why is it this one is appropriate? So you will say like, why don't I just create an object to do it instead? Or say just, why don't I just take this entire code and put inside here and isn't it as trust that I create a generator that I use the generator inside? Because just don't forget to mention one point that every code usually has two parts. So the first part, so the first part maybe is like something very simple, just do a spiral traversal. So the second part, you need to do something at each step. So you see now if I had actually done the whole function inside here, then I need to put something else and another process down here to inside each of these use statement to actually do some further tasks. So actually this actually made the code very ugly because the traversal step and the processing step can be actually separated out cleanly in this case if I use a generator. So what I need to change is just do some process at this step because I already use the current position that I traversed to. So this is one use case where actually generator is very appropriate. So you say like why don't just create an object? So the difference between generator and just create an object with internal state is your internal state is not encapsulated as a variable or as a variable in your object. It's actually encapsulated as, you can use the part of the code, how to say, sorry I have to keep going back to this. So just the position of this code encapsulates the state of the generator. So if I have written this entire thing in the form of an object, then I need to keep track which step am I in? Am I in the left step or the up step or the down step? I have to keep track like what is the number of steps that I am at right now. But with a generator all this is actually encapsulated as the position of the code which functions very much like a go-to statement. So in certain case actually go-to statement is actually much more readable than creating an object and encapsulating states. So this is the first thing that I learned. So I go to just show another example. So there's another problem because it's all Christmas later. So they have this reindeer Olympics. Actually it's very simple. If you fly for a distance then you have to rest because you need to recharge then. So you have to just see the question and just see which one arrives first. So if the problem is just simply compare a bunch of reindeer that travel in this mode, of course you can have just a complicated mathematical equation that's solved for this. But the part two of the problem requires me to actually solve for this for every time interval. So now it will be actually more wasteful to use the complicated mathematical equation. It will be easier to just compute the state of the reindeer at every step. So I just make each reindeer into an express frame as a generator. Then I just call them with a dot next for each take of the event. So this is another example where the generator can be used. So there are actually a lot, a lot other examples we didn't ever have of code. So if you all actually get to try, you all can see. So what is the next thing that I find is very useful that I learned is so we do use gadgets all the time but actually coding challenge actually push your knowledge of gadgets to the maximum because you get to try things that you don't normally try. So for example, for one question in my coding challenge it's actually finding a bar sequence. Basically it can be like A, B, B, A, A, B, A, A, B, X, Y, Y, X or Y, X. So any a bar sequence. So do you all know that actually gadgets have this very interesting pattern that you can use? So this slash 2 slash 1 basically means take the result that is the second captured result. Slash 1 means take the first captured result. So actually I didn't even know about this so I actually googled at far about this and actually used this to solve the challenge. So there are a lot of these chances to use gadgets when doing coding challenge. So another sub that I find interesting is actually 2 core. So one of the, so one of the challenges actually deals with this what we call look and say sequence. So this thing actually came out on the internet recently. Somebody came out with this challenge that trying to actually, so it starts from 1 and the next number is 1-1, next number is 2-1, this one. So it doesn't look like there's any pattern but actually this is what we call look and say sequence. How it works is since there's only 1-1, we call it 1-1, then the next time there's 2-1, so there's 2-1, next time there's 1-2 and 1-1. So this is the look and say sequence. So the task is not to figure out this challenge, this sequence because they already say it's a look and say sequence but to actually implement it, run it for 40 rounds and get the result out of it. So it's a very, very simple task. So I just write a recursion function that scan the first stretch of numbers and then continue with a recursion with the remaining stretch. So what it is, when I run it for 40 rounds, we encounter what is called step overflow because JavaScript does not have a proper to call. So there, but what about... Yes? Can you zoom in? Zoom in. You can actually share the link of the slide. You can actually look from the .js issue. Yeah. But we can actually make this into a proper to call. So by changing the function, now I return the recursion function and this is a proper to call and now I can run for as many cycles as I want. But unfortunately, it's only supported in node 7 and set spoil 12. So somehow Google VA Engine stops. The latest VA Engine doesn't support. So even with a flat, you can't do it. But in case you're actually still need this, actually there are ways to actually overcome it. You can actually do write a recursion. Any recursion actually can be returned as an iteration by using a stack. So next I'm going to share about enumeration. So a lot of coding challenge actually requires you to enumerate stuff. So enumerate all possible... So rather than try and find the solution, you just enumerate all possible solution and you find the one that meets the criteria. So some example. So for example, so we want to find all combination that totals to a certain value. So in this case, we need to enumerate all possible assignment combination like 0, 0, 0, 0, 0, 1. So in some case, we need to say travel route from... find the shortest route. So we need to enumerate all different permutation. So this is easy to say just enumerate but actually implementing enumeration requires some tricks. So in another case here, instead of enumerating a trick that covers all the destination, we're enumerating a sitting arrangement. So this is actually not very much different from enumerating route. So you actually just need to fix one position then enumerate the other person, the other people around the table. So finally, there's also this problem here that is by the ideal recipe. So let's say I have 100 units, 100 teaspoons. Then each teaspoon of a particular ingredient adds a certain properties to my cake. So we need to enumerate all the possible combination of these ingredients. So let's say I have three ingredients. I can have 0 unit of the first ingredient, 0 unit of the second ingredient. So how do I enumerate all these possible combinations? So there are ways to do that. So for example, I will use... So for example, enumerating assignment, so the 0, 1, 0. So how do I actually... What strategy to do that on JavaScript? So basically you just need to count all the binary values. So you count from 0 to 2 to the power n minus 1. So then you use number.prototype.toString2. This will give you the binary representation of the number. Then from there, you can pair it with 0 and you split it out. So this is a very easy way to enumerate from all binary combinations. So this is my implementation. So this is the easy one. This is the harder one, the split combination that I mentioned about just now. So how do you enumerate while making sure that your total is always sum up to 100? So the trick here is instead of enumerating the numbers, you enumerate the split point. So let's say I have 10 items here. So let's say I need to make four... How many here? One, two, one, two, three, four. Let's say I have four types of ingredients here. So instead of enumerating the four ingredients of the number, I enumerate the split. So I actually enumerated only three numbers down here. So I enumerate by... Say I made a card at these two positions. Then the ingredients, the units of the ingredients is actually just the difference between adjacent cards. So by doing this, I can ensure you always sum up to the total number. So this is my implementation in JavaScript. So I'm not expecting you to read this. So you can read it on your own laptop. So because I'm a very tired person, so along the way, I realized that actually I'm repeating all these enumeration tasks. So I actually write all these helpers though for my coding tasks, for different kind of enumeration tasks. So if you are going for coding interviews, can actually come and look at my helpers for revision. Because enumeration is a very basic task, but it's the kind of stuff that, under the pleasure of interviews and stuff, we always forget how to do it. So next thing, how about lazy enumeration? Because just all the functions that I share are not lazy, in the sense that it actually enumerates everything before you return. So in some cases, we actually don't want it to enumerate everything because the combination is just too much. We want it to return early once the first result comes back. Once the first result that meets a certain criteria comes back. So how do we do that? So we use this very nice new JavaScript tool also called Iterobos. So who actually tried using Iterobos before constructing your own Iterobos? Other than using the default built-in. So we can use what Iterobos does, what Iterobos is, it's basically a function that implements this special method called symbol.iterator that returns Iteratorator. So this function, this Iterobos is, you can use it by things like, say, fall off loops, or you can use the array.from, or you can use a spread operator or this. So just for example, so I rewrite the earlier one I shared about the assignment enumerator into Iterobos form. So with this form, I can actually break halfway once I actually found the result. I'm doing the enumerate every possible result out. So there is a call way to use it as a wrong one. So Iterobos, you can actually use array.from. You can use a spread operator. But these are the wrong way, because once you do it, any array.from, you actually enumerate everything already. It's no longer lazy. So the proper way is to use it in a fall off loop so it can break off early. So also while playing with coding challenge, you'll also be doing a lot of graph searches. So some of the tips for graph searches, the very basic reference search, how to implement in JavaScript, always have a visitor, which is an object. So you can key and actually check for duplicates. Then you have an unvisited, which is an array. So that first search, use a queue. So use shift. That first search, use a pop, use a step. So that's why I use a pop. So the important thing to remember, so for those who are familiar with com size and do know about that first search. So the important thing to know about, to remember for that first search is, remember that because you don't do that first search, you usually don't do that first search randomly. Because if you are, that first search, you can always end early once the results found. But that first search, you will search until the end of the tree node then before you visit the next node. So usually we will sort our results and we actually visit those that are more likely to give the result we want. So because we do some sorting, so it's important to actually reverse the sort because you are using a step. Because you are using a step, the first one that you pop is the last one that you push in. So because of the last same first search, always remember to reverse your result. So also in FL code, we also deal a lot with this kind of assembly code like of challenge. So when dealing with this kind of coding challenge, so it's very typically very hard to debug. So what I learned, what I really learned is that finally I actually convinced myself to actually use the proper way to debug instead of using a console.log. So the proper way to debug a node, a node program is that it should use this inspect, break, flag. So how many people actually do use this one before? Yeah. So a few of you. So most of you are lazy, we just use console.log. But with this node inspector, you actually get more powerful stuff, all the powerful stuff that you get from node. So... So right there are just some of the some of the learnings, as much as possible, work on paper. So I interviewed people who come in to do our coding interview, refuse to work on paper, then spend hours on the screen. So work on paper first. Example like the case where I show you all the spiral traversal disk. This kind of problem is very easy once you put it down on paper. So also don't premature optimize. Focus more on writing clean code than actually writing performance code. So let's wrap it up. So I actually check all my solutions to ever our code for the 3 years 2015, 16 and 17 on GitHub. So if you all try it out and you all start, actually you can refer to my solution. So that's all. So we have time for questions. So just back me up to the store and you did this every day for 120 days? Yeah, no, no. So it's over 25 days. So I found out about this only in 2017. So I realized that's the 2016 version and 2015 version. So over that same 25 day I decided to do all 3 years and I won't go. So what's the average time you take to solve? So it depends on how hard the problem is. Some problem I spend actually 5 hours or more to solve. So it's not that trivial like the spiral traversal and all this. The ones I show are the really trivial ones. The average problem is much more difficult. So what is the benefit you would say when you're doing more mundane tasks or if you're working on a project, do you implement some of the new techniques or smart ways of a personal problem to learn from the challenge? So for example, the generators and all this. I would say I would still find it hard to actually apply it in my daily task. But now I actually have the confidence that I actually know how to use a generator or it's even like iterables. But just learning by reading MDN and stuff, you don't really have the confidence to say that you actually really understand. But when you actually work on this stuff that is outside of your daily, what you're doing in your daily stuff, it really gives you the confidence that you actually understand these concepts. And then you might realize that actually you apply to that. So does anyone have any question on iterables or... When you do this challenge, it's like what's pushing you to do for a smart solution like a generator instead of waiting for an object instead? Because there's always a similar way to solve these problems. Because I want... So even though the challenge is really about finishing it, being the first person to finish it, to most people, I would rather play this game in the sense of writing the code that is most understandable, clean, that somebody else reading my solution will immediately notice what I'm trying to do. This is something that I actually practice a lot myself, even within my day work. So when I'm doing this challenge, I also try to actually write code in a very clean way even by using these new tools. I've heard of this thing called the 408 loop. I haven't really used it, I think. Oh, 408. Something of something. I think it's ESA. I think it's an ESA feature for a wait loop. Not yet. But I think it's actually also running on... It's running on an iterable. It's running on... Can you, like, stick a weight with the iterator stuff, the generator stuff? Yes. That's actually... Require this generator. Yeah, so I think there's actually a proposal for AC iterators. But I haven't tried it yet. Yeah. Have you found any uses for OXYs and Max and Sets? Maps and Sets. I haven't actually... Because I think objects are good enough for me for now. I mean, I didn't use maps... Sets before sometimes. Cool. Any more questions? Go for it. Did you write tests for your solutions? Why or why not? Did you write tests? No, I didn't write for that question. Did you write tests for your questions? No, but... But I usually construct my solutions that... So I was lazy here to just copy in the input rather than actually passing the... So I try and find one. So generally, I will write my function with extra variables, with some default variables that allows me to actually run tests on it. So because the actual problems, I will actually set a default value to the additional variable. So it allows me to actually run on different... So for example, the actual case, I need to run on, say, 50x50 box. But usually the question will provide some test example with, say, a 5x5 box. So I will actually supply an additional variable that allows me to actually change my function out to be able to run tests on those test cases. But it's still manual. I didn't actually specifically write a separate test for my functions. Thank you.