My 100 Days of Code Journey

21 min read

Sooooo... I did a thing. I made a public pledge to code for one hour a day for 100 days. The decision to start the challenge did not come lightly. There was this fear that I may not follow through. When you code for a full time job, all you want to do is relax when you get home. Doing this challenge takes a lot of discipline. However, being able to force myself to do something no matter how I feel will make me a stronger developer. I am doing this challenge to help turn my learning momentum from a stagnant line to one that is exponintal.

Disciplining yourself to do what you know is right and important, although difficult, is the highroad to pride, self-esteem, and personal satisfaction. -- [Margaret Thatcher]


Day 1

Day 2

Through out this journey you will hear me talk about building a tile puzzle. I found it a great way to practice algorithms since I don't really deal with algorithms in my day to day job. Every algorithm, some harder then others, is isolated but serves a greater purpose towards a larger goal. One of the first thing I had to learn was heap maps. I even wrote a blog post about it.

Day 3

About a week and a half before this tweet, I lost all the code to my peronsal website. It was no where to be found. Not on Github nor my local machine. How did that happened? Maybe I write a blog post about it? Long story short, I had to rebuild my site and re-add google analytics.

Day 4

Okay... here I go.

Back to the tile puzzle. The first thing I need to do was set the foundation, the architecture, of the puzzle. I had the decision of either using a flat or multi-dimensional array to represent the tiles for the board. After choosing to start the puzzle with a flat array, I had to shuffle the tiles. Which was an easy step. However not all shuffle states would lead to a solvable puzzle. There is mathamatical way to determine if a puzzle is solvable. I just had to put that math in algorthmic form.

Day 5

Finding a bug is never a good thing. Yet when I found one on a project that I use, I felt like I went to the moon and back. I opened my first ever open source issue about how Twitter's API was not loading on initial load. I wrote a concised explaination of what was happening, how someone can verify the issue, and provided solutions I thought would work.

Day 6

This was my first attempt to add MDX to my personal Gatsby site. At first I thought I could just replace all the places I saw markdown in the code with mdx. And JavaScript was quick to tell me I was wrong and got its famous error Uncaught SyntaxError: Unexpected token <. Adding MDX wasn't a crucial thing I needed so I decided not to spend time on the error message. So I stashed all my changes and came back to it at a later time.

It was pretty cool when the creator of MDX offer to help me solve my problems. I didn't take him up on it but I know he will be a great resource in the future.

Day 7

Lots of open tabs on this day as I poked around Gatsby's internals.

I had an open issue on Gatsby but I did not understand completely how Gatsby work. Honestly, I was afaird I was going to say something wrong in public. Gatsby has this method call onRouteUpdate and when debugging I found it strange that onRouteUpdate was not trigger on initial load. Nor was there another method that would fill in this gap to replace onRouteUpdate during initial load. I did not have to courage to say "I think we should reconsider how onRouteUpdate works." This is because when a user enters your website, the route is different then before so a route has been updated.

Turns out the original intention of onRouteUpdate is to run on initial load. It just was not happening in the developement environment. I was a little disappointed I could not open a PR for this issue. I spent so much time getting a deeper higher level overview of how Gatsby works. Overall it was a great experience interacting with other developer.

Day 8

I was interested in how to create a better nav bar experience for my personal website. I don't love my current one, but it does the trick. I noticed that a lot of websites were using hamburger menus on the desktop verison of their site. I was curious why that was so. Secretly, I wanted to give into the trend because I could do some cool animations.

Day 9

Okay first off... no one is good at CSS, and if you are you have just become a really good guesser. I kid I kid. But seriously, I battled with CSS on this day. And I think CSS won. Everytime I wrote another line of CSS,I pretty much questioned my existance.

Day 10

Technically I didn't code but I spent an hour writing a coding blog. That counts right? You can find the final product here.

Day 11

The pros of having a work computer is not having to buy a personal computer. However this can introduce some of its own problems when working on personal projects. I ran a special work command at work which updated my node verision to 11. My personal website could only use node verision 8. I blew away my node_modules folder countless times, as well as install node verison manager aka nvm. My personal site is alive and well.

Day 12

So I fell into the rabbit hole. I added a console.log in a function and checked what it was outputing everytime it ran. I really wanted to wrap my head aroundhow Gatsby works. In actually, I didn't have to do that.

Day 13

As I explained on Day 3, I completely lost my personal website. I wanted to understand why I could get a back up of my original code. So I took the day to learn about how Git Large File System actually worked.

Day 14

Sometimes starting off fresh can save a lot of headaches. That was the case when it came down to adding MDX to my personal Gatsby site. The answer to my problems was to move the content out of src/pages/blog to a new folder outside of source.

Day 15

Have you every had that experience when you worked on something two days ago and everything is working fine? So imagine that then coming back to the project and everything has exploded. Welp, that happened to me and let me tell you--HEADACHE. It was a recent bug with npm were I had to log in to the actually npm website.

Day 16

Back to trying to tile puzzle. I had to create an algorithm that turns the current index of a tile to a coordinate that could be used in the manhattan distance. Understand what Manhattan Distance is quiet simple especially if you live in Manhattan.

Day 17

Another day, another blog post. I released How to add a Netlify CMS widget to Gatsby. I was able to break down the differences between the two services... actually just give it a read if you have a chance to find out what I learned.

Day 18

Received a personal lesson from my mentor at work on how to use web workers. I feel so special. We went over this feature incase I want to have the A* algorithm I am working up to for the tile puzzle run off a differnt a thread.

Day 19

Woke up bright and early in the morning to get this challenge in for the day. Instead of getting to work on something I wanted to my computer was like nope. So I spent the morning cleaning out my disk space. The only problem was there wasn't enough disk space to actually delete anything to create more disk space. The irony in that. Once I restarted my computer it created just enough space to Marie Kondo my computer.

Day 20

So I found website on the internet and thought it was quiet nice. There CSS was spot on and I wanted to see how they did it. The best way to do that was to clone the open source repo and run the site. Of course running it right out of the box did not work. No fault to anyone, my computer always acts funny. Probably could have spent my time more wisely. But hey now I have Ruby properly set up on my computer and I was able to check out how Melody used CSS.

Day 21

Part of the A* algorithm that will be used for the tile game involved finding all the next possible game states. So I had to write another algorithm to solve for that.

// current state
[1, 2, 3, 4, 5, 6, null, 7, 8]
// next possible moves
[1, 2, 3, 4, 5, 6, 7, null, 8]
[1, 2, 3, null, 5, 6, 4, 7, 8]

Day 22

Now that I'm getting pretty close to the game actually working, I was a little inpatient to see what the game would look like. So I started building out the visual portion of the puzzle.

Day 23

Started writing this blog post of my 100 day journey. Even if no one reads this. There is tons of benefits to have a place to see my progress through out this challenge.

Day 24

Time to tackle this A* algorithm I have been building up for. I have tons of the pieces to succeed. I got a heap map, algorithm that provides the next game states and the Manhattan distance. Lets see how this goes.

Day 25

Yay! I am 25% done with this challenge. When I was writing the blog post on Day 23 and looking at all the things that I accomplished, I started to wonder if what I was working on aligned with my career goals. I took the time set down and map out what projects I would want to work on.

Day 26

Day 26 lead into Day 27...

Day 27

...Day 27 lead into Day 28...

Day 28

...This is the first time in the challenge were I sent a consecutive amount of days on one project. One because I really want to finish this tile game. And two I got stuck on this A* algorithms. The test that I wrote for getting the next possible move didn't have enough cases. This was causing codesandbox to constantly time out. Which cause a lot of frustration on my end.

Day 29

In order to be a millionaire you need to have multiple streams of income. Well I don't want to be a millionaire I do want to be financial independant from a 9 to 5. I think one way I can create another stream of income is from an online business. So I started this new venture by creating the foundation of a e-commerece site with Gatsby and Stripe.

Day 30

For the last year, once a month I meet with a group of Black Software engineer to go over how our experiences in tech. And thats all I can tell you because what happens in squad meetings stay in squad meetings.

Day 31

Sometime tutorials take longer then expected. So I finish the Gatsby e-commerce tutorial from Day 29.

Day 32

I try to not let my work task carry over to this challenge. This day I had to because I sent 8 hours coding and I couldn't do another hour when I got home. I also had no meetings that day, very rare, so maybe I did spend an extra hour. Anyways, this 100 days of code challenge is for me. I did the hour.

Day 33

The A* algorithm finally works!!!

I could not visualize how the Manhattan Distance came into play. I thought I only need to figure it out for the empty tiles. Instead I needed to get the Namhattan Distance for the whole board.

When I was able to see it, it felt like the first drop of rain after a drought.

Day 34

Now that the A* algorithm is solve hopefully you won't have to hear me talk about it again. Maybe? Anyways now I can get to the fun part the front end. Making tiles slide into the empty slot as the use interacts with it.

Day 35

... continuation of Day 34

This is the day when I started to feel burned out of this challenge. I do have a full time coding gig, which is awesome, but adding this challenge does lead to good work life balance. My sleeping scheule was all over the place. Some days I would wake up early because I knew in the evening I had life plans. And I was stressing out a lot to figure out when to get that extra hour in my busy schedule.


Day 36

I finally figured out the colors and font I would be using for my branding. I searched the web wide and far to find the perfect combination. I even created a fancy mood board for the look and feel.

Day 37

... continuation of Day 36

Day 38

I thought I won't have to talk about the A* algorithm again. Turns out its with me for life. I added the functionality for when the user hits the solve button, the puzzle solved itself. I would like to call this AI magic.

Day 39

... continuation of Day 38

Day 40

I traveled to see my grandparents this day and I'm not a huge fan of busting out my laptop on an airplane. So I took my ipad and read the few chapter of Cracking the Coding interview.

Day 41

... continuation of Day 41 another day of travelling this time to ATL for work.

Day 42

Went into another rabbit hole, this time Big O. I went over each algorithm I created for the tile puzzle and determined the speed. So thankful I choose to use a flat array to keep the game state over the multi-dimensional one.

Day 43

Since I'm feeling really burned out, opening my coding editor was not an option for me. So I read a lot of blogs on what AI powered UI can look like. And I still really dont know. I am really interested in being between design and tech as a UI engineer. I want to figure out a way to blend that world into AI. I asked some people in the industry how I could do that and they pointed me to "AI powered UI", "Human Computer Interaction", and "UX for Data management"

Day 44

... continuation of Day 43

Day 45

When going from a 3x3 puzzle to a 4x4 puzzle the A* algorithm blew up in my face. How I was calcuating current coordinates of each tile was failing. So I had to fix that real quick.

Day 46

When the AI magic is happening I original was rendering the <Board/> component for each game state. I would hide and show each <Board/> based off a given time. This was causing the animations I set up to not work because I wasn't using the same board for CSS transitions to work. So I came up with another solution with useEffect so I could use the same board.

Day 47

Now I was completely happy with the way this project turned out. It was a working game that people can play. But I wanted to add another level, master level, to the puzzle. To do this I would need a a 4x4 grid. And I'm glad I did because it added lots of new bugs. And a whole a lot of time outs in codesandbox. Now the A* algorithm is fast. But when you want to find it in the least possible moves it slows it down quiet a bit. In order to combat this I can add different heuristics. First up linear conflicts.

Day 48

... continuation of Day 47

Day 49

... continuation of Day 48