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]
THIS IS MY JOURNEY TO SUCCESS.
I'm publicly committing to the #100DaysOfCode Challenge starting today!— Samantha Bretous (@samanthabretous) September 24, 2019
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.
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.
Woke up early to get this hour of code in today. For day 3 of #100DaysOfCode I added Google Analytics and fixed some CSS issues on my personal website.— Samantha Bretous (@samanthabretous) September 25, 2019
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 4 of #100DaysOfCode. Kicked off my tile puzzle. Started by shuffling an array and creating a function to determine if the shuffled array is solvable.— Samantha Bretous (@samanthabretous) September 26, 2019
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.
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 6 of #100DaysOfCode: Attempted to have Gatsby read from MDX files on my personal site. Ran into my favorite error "Uncaught SyntaxError: Unexpected token <" Going to "git stash" my changes for now and come back to this update later.— Samantha Bretous (@samanthabretous) September 29, 2019
Hey :) if you want me to take a look I'm happy to. Just throw me a link to the branch— :party-corgi: (@chrisbiscardi) September 29, 2019
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 7 of #100DaysOfCode. Poked around Gatsby's Browser API, so I could give an informative response to the issue I opened.— Samantha Bretous (@samanthabretous) September 30, 2019
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 8 of #100DaysOfCode: Studied some HTML navigation best practices. Curious... Do you like hamburger menus on desktop?— Samantha Bretous (@samanthabretous) October 1, 2019
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.
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 10 of #100DaysOfCode: Spent an hour writing my next technical blog. Still, a work in progress.— Samantha Bretous (@samanthabretous) October 3, 2019
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.
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 12 of #100DaysOfCode: Ran VS Code's debugger inside Gatsby's Node API. It was really helpful to get better context of what's really going on.— Samantha Bretous (@samanthabretous) October 4, 2019
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 13 of #100DaysOfCode: Watched a few videos of how Git LFS works. Hopefully I won't make the same mistake I did a month ago.— Samantha Bretous (@samanthabretous) October 6, 2019
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.
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.
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 16 of #100DaysOfCode: Learning the Manhattan Distance Algorithm. |x1 - x2| + |y1 - y2|. Easy breezy?— Samantha Bretous (@samanthabretous) October 9, 2019
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.
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.
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 19 of #100DaysOfCode. When you run out of disk space and your computer won't let you delete anything because you are out of disk space.— Samantha Bretous (@samanthabretous) October 11, 2019
So I found melody.dev 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 20 of #100DaysOfCode: Took me an hour to get Ruby gem commands to work. But so worth it.— Samantha Bretous (@samanthabretous) October 12, 2019
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 21 of #100DaysOfCode: wrote an algorithm to find all the next possible moves in my slide tile puzzle.— Samantha Bretous (@samanthabretous) October 13, 2019
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 22 of #100DaysOfCode: Added some UI to my slide tile puzzle.— Samantha Bretous (@samanthabretous) October 14, 2019
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 23 of #100DaysOfCode: spent an hour writing content for my next blog post.— Samantha Bretous (@samanthabretous) October 16, 2019
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 24 of #100DaysOfCode: Studying the A* (Star) SEARCH Algorithm for my slide tile puzzle. I get the concept but the implementation... YIKES.— Samantha Bretous (@samanthabretous) October 17, 2019
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 25 of #100DaysOfCode: Now that I am 25% done with this challenge, I took the time today to confirm the tasks I work on are aligned with my goals.— Samantha Bretous (@samanthabretous) October 18, 2019
Day 26 lead into Day 27...
...Day 27 lead into 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 26-28 of #100DaysOfCode: Getting pretty close to solving this A* algorithm for my slide tile puzzle.— Samantha Bretous (@samanthabretous) October 21, 2019
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 29 of #100DaysOfCode: Started the Gatsby e-commerce tutorial. Working on hiding all the Stripe API keys from the frontend code.— Samantha Bretous (@samanthabretous) October 22, 2019
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.
Sometime tutorials take longer then expected. So I finish the Gatsby e-commerce tutorial from Day 29.
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 32 of #100DaysOfCode: Figured out the accessibility bug when creating a custom multi select component made with a button and an ul vs html's native select element.— Samantha Bretous (@samanthabretous) October 25, 2019
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.
A* (Star) Algorithm ✅— Samantha Bretous (@samanthabretous) October 26, 2019
Ohhhhhh does it feel good.
Day 33 of #100DaysOfCode
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.
... continuation of Day 34
Day 34-35 of #100DaysOfCode: Started working on the front end of my slide tile puzzle.— Samantha Bretous (@samanthabretous) October 28, 2019
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.
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.
... continuation of Day 36
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.
... continuation of Day 38
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.
... continuation of Day 41 another day of travelling this time to ATL for work.
Long time no update. Don't worry I'm still out here doing #100DaysOfCode— Samantha Bretous (@samanthabretous) November 3, 2019
36-37: Redesigning my personal site's homepage.
38-39: Tile puzzle can now solve itself. AI magic below.
40-41: Read the first few chapters of a coding book. pic.twitter.com/Ep8WPylAYE
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.
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"
... continuation of Day 43
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.
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.
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.
... continuation of Day 47
... continuation of Day 48
Recap of my #100DaysOfCode journey— Samantha Bretous (@samanthabretous) November 11, 2019
D42 Big O refresher
D4344 Figuring out what AI powered UX can look like
D45 Fixed bug in A* algo when going from 3x3 to 4x4 puzzle
D46 fixed the animation styles when re-rendering the tiles
D47-48-49 attempted to add linear conflicts to A* algo