I can’t believe I’m writing this post. I finally finished the Simon Game, which is the last advanced front end development project, and earned my front end certificate from FreeCodeCamp!

Thanks to the solid practice I accumulated from the previous advanced front end projects, I was able to lay out a plan to complete the Simon Game in logical steps, and most importantly, think in terms of “functions” i need to create in Javascript, instead of creating code for each step or button that may be essentially repetitive. I realized that by defining the key “variables” and functions early on, I was able to write code more efficiently and effectively.

I also continued using “user stories” to disaggregate the tasks into small, concrete steps, which made the initially daunting task much more manageable. I decided that the major tasks in the game is to:

-Let the machine play buttons and their associated sounds, in incremental steps (therefore an arrMachine variable, and a MachinePlay function)

-Create a variable to record the buttons the player plays (therefore an arrPlayer variable)

-Create a function to check whether the players buttons match the machine’s buttons, and if so, make the machine play again (a checkPlayer function)

(image below: how I broke down the seemingly daunting task into small, doable steps)

After the javascript part of the project was completed, I was struggling for a while with the CSS part of the project. I was perplxed for a long time as to how to create the shapes of the Simon game, which seemed pretty complex to me at first, until I realized the four “quads” of the Simon game could be created by overlaying a circle on top of four square boxes – again, an example that all complexity can be derived from simplicity, or in this case, basic shapes.

You can view my project on CodePen here. I’m still bewildered by the fact that I actually earned the front end certificate — a task that seemed so insurmountable a year ago! I’m planning to write a post to summarize my journey over the year, so stay tuned.

 

I can’t believe I’m almost there – one more project to go to finish my front end dev certificate at FCC!

The Tic Tac Toe game was pretty challenging, and it took me a while to really figure out how to “think like a machine”, or rather, how to duplicate my own thinking by coding it out, so that I can actually use my code to win over myself.

I remember when I was a kid, I loved any kind of board games I could get a hold of, and when my parents were too busy to play with me, I would pretend to be my own opponent and play against myself — except it wasn’t nearly as fun as playing with an actual opponent. Well, not now! It was really fascinating that in the Tic Tac Toe game, a “machine” I devised could now beat me if I weren’t careful with my own moves … ! Machine learning/AI feels so tangible for the first time!

I got really stuck on this challenge because I made some really rudimentary mistakes (like misplacing the parenthesis in the “indexOf” statement, and couldn’t figure out for the life of me why my code wouldn’t run as I expected). Thankfully, I posted my confusion on the FCC forum and got help from several people – I was so thankful for their suggestions! It also took me some time to realize the right “strategy”, or logical steps, that a machine should take to win. After devising the right logical steps, the next stage was to think through all the variables involved in each click of a button, and how they may or may not change depending on how the buttons are clicked.

Most importantly, I was coding a function for each individual button, until someone on the FCC forum reminded me I could have written just one function, then make each button a variable. I changed my code entirely based on that suggestion, and saved so much time … ! How to think truly like a coder, that’s something I’m continuously grappling with.

This challenge was also particularly hard because I was in the middle of moving to a new place at the end of October, and was really stressed out at one point, by the expectation to finish my coding project by a certain “deadline”, and the realization that it might not be achievable. In the end, I was able to let go of the unrealistic “deadline”. After all, they say, there are no unrealistic goals, only unrealistic timelines. I think that’s so true.

I’m looking forward to my last front end challenge! By the way, you can view my codepen code here for this challenge.

 

In this new sprint for the FCC advanced front end project, I spent a week and finished building a Pomodoro timer. I felt really proud of myself!

 

Again, I found using the sprint methodology to — 1) break down the main project into small, achievable actions; 2) quantify these actions as a “1”, “3”, or “5”; 3) schedule daily “sprint” meetings in the mornings with myself, asking myself what I have done the day before, what I will day today, and what stands in the way for achieving my goal really helped me on track, and code this project efficiently.

The main challenge of this project is to allow the users to define their own time duration (by default, the pomodoro mode will be set as 25 min, and the break mode as 5 min), and by clicking on a “start”, “pause”, or “reset” button, be able to start, pause, or reset the timer.

I learned how to set up the “setinverval” function through googling, and was able to learn how to start a timer with a preset time duration fairly quickly. However, when I was trying to refine the design of the timer, especially allowing the time duration to be correct as the users toggle between different buttons within the pomodoro or break setting, or even between the two settings as the timer is still running, it took me a while to figure out the right variables to define.

These posts especially helped me during my research process —

1. how to use the “setInverval” function to run the timer function every second. 
2. this post inspired me to set a “state” variable to define the “state” of the timer, whether “break” or “pomodoro” depending on the buttons clicked; and also to create the pause functio. 
3. this post led me to create a sound of warning when the timer is up. 

Overall, this project especially pushed me to think through what function needs to be incorporated as users may click on each, or any button when a certain function is running, or not running.

You can view my complete project on CodePen here. I feel confident that I’m back on track, and look forward to using the “personal” sprint method to finish my next frond end project. 

The FCC Javascript Calculator project was the second Sprint I was personally on (I scheduled it to be completed in 10 days, but ended up using 13 days — but I guess that wasn’t too bad).

Using my personal coding sprints, I made an effort to spend 5 min each day to have a personal meeting on the progress of my sprint. I (tried to) ask myself every day  —

• what did I do yesterday to finish my sprint?
• What’s in the way?
• what am I planning to do today to finish my sprint?

I also used the time management approach in the Scrum methodology, to estimate how much time each smaller user story/deliverable will take, and track the “velocity” of time it takes to finish the project.

I think building that personal reflection really helped me on track, and especially with the efficiency of completing the project. Things I estimated would take 2 hrs, ended up taking only 30 min, or 15(!) sometimes.

The reflection also helped me acknowledge the roadblocks in my attempt to finish this project. Social media, lack of evening routine, eating food that depletes energy … etc. Acknowledging these hurdles pushed me to think of how to solve the problem. I became very addicted to Instagram (esp. the Stories!) at one point for example, but I tried to delete the app every time I got home from work. I found that when I did do that, I could save more time for coding; and when I reinstalled the app on certain nights, I could end up spending 2 hrs just scrolling down the phone screen – appalling, I know!

I also kept focusing on breaking down the big project into smaller, chewable bites. Below is a screenshot of how I dis-aggregate the tasks into smaller to-do items, using Onenote —

The calculator project actually isn’t as hard as I imagined. The main challenges are in turning the values stored into the buttons into math calculations using Jquery and the eval() function, and formatting the buttons/rows to look like a real calculator (by using a grid system, and the box-shadow effect).

You can see my complete project here.

 

 

It has been a while since I last posted – mainly because I’ve lost some momentum after going on a vacation in the beginning of August.

So this post is to record what happened during the 67 days when I struggled to regain my momentum to finish the coding projects.

I probably only coded about a third of these two-month time. It may sound dubious, but I found it so hard to go back to my coding routine after taking a break from coding while on vacation for 10 days.

After I got back, I had some friends visiting too. So I became increasingly overwhelmed by the fear of not being able to complete my challenges/projects as scheduled. After all, I’m planning to finish everything by the end of October!

Interesting, the more I’m afraid of failing to meet my own deadline, the more I became demotivated and started to procrastinate; the more I procrastinated, the less confident I became of being able to tackle the coding challenges. I kept telling myself: maybe you have already forgot all the CSS/HTML tricks you’ve learned!

I’m now already back on track, of course. Looking back, here’s what I did to overcome my fear, and become unstuck in the middle of the way —

• Realize that failures are just a necessity on your own to succeed. Acknowledge that fact helps you focus on your goals, and on breaking the daunting tasks into smaller, conquerable bits.
• Keep asking yourself what’s that 20% of effort you can do to achieve the 80% of results. I read the book “the art of doing twice the work in half the time” by the founder of the Scrum methodology, Jeff Sutherland, and became very inspired by the sprint approach — i.e. committing myself to completing certain tasks by a set time frame. I highly recommend this book to anyone wanting to improve their efficiency in both personal life and team environments.
  • What really excited me was, by planning some personal sprints for the remaining FCC challenges and projects (for me, it was 10 day per sprint), I realized I could still complete the front end certificate at the beginning of November — a little bit of  a delay, yes, but not a terrible outcome.
• Forgo the desire to be perfect, again focus on delivering the most important results. For me, the “advanced scripting challenges” sounded very daunting at first, and I got stuck on one particular challenge (the cash register one, I think) for  a long time. At that time, being more and more frustrated, I told myself it was ok to look for hints (I’ve been very strict with myself, and tried to solve everything on my own). At that moment, I realized getting unstuck and move forward was more important than solving “everything” on my own.
• Honing my skill in defining the problem. The more I learn to find solutions online by myself, the more I realized how important it was to learn to properly define the problem you’re getting stuck on, in as accurate and general a term as possible. Most of the time, we got very hung up on one particular approach we thought of to solve a certain problem, without taking time to step back, revisit the problem, and therefore branching out to other solutions that may be more efficient in solving the same problem.
  • therefore, I learned to keep asking myself to take a step back, ask a more “meta” question of what I’m trying to achieve with my codes. I found that this “meta” approach has helped me to find solutions online quicker, and have a more divergent, creative problem-solving approach.

I regret that I have lost some time during the summer time to complete certain challenges and projects as scheduled, but I’m very grateful for this experience of getting stuck, then unstuck. It gave me lots of lessons of how to keep on keeping on, and more confidence in my own ability to rebound.

By the way, even after I took a long break from coding, all the essentials of HTML/CSS/JS still came back to me fairly quickly. The coding DNA has become ingrained in me, after all.

Yesterday I finished the last intermediate front end project – the TwitchTV API App!

The main things I learned, or hurdles I faced from this project are —

• Getting logo and status of the Twitch TV accounts regardless of if they are online or offline. If an account is offline, the default API url suggested by FCC won’t work. I found another URL to get general information for accounts that are offline.
• Learning the JQuery apend/prepend/after methods. The main task is, after using the getJSON method to get the account status, upon “document ready”, add these elements to the html — I used the JQUERY after method for this.
• Learning how to use the “for loop” together with getJSON. This has taken me lots of time – because of the asynchronous nature of getJSON, initially my username and status will show up randomly, or repetitively in my html. I learned to use for each i, function(i), to make sure that each i functions “locally” within the getJSON for loop.
  • check out this stackoverflow post – after millions of searches, this one saved my life!  https://stackoverflow.com/questions/15347750/getjson-and-for-loop-issue
• Learned how to turn status, and logo into “variables”, to use the same URL structure in the for loop. This is the first time I’ve used used “variables” to streamline my JS functions – very efficient!

After these four intermediate projects, I feel much more competent and confident in the JQuery methods, and working with APIs! Now onto my intermediate scripting challenges!

 

 

In a week, I finished the last but one FCC intermediate front end project – build a wiki page.

The wiki page allows a user to search for any wiki entries on a web page, or click to access a random wiki page.

Because I was already pretty familiar with APIs, I was able to finish the project in a fairly short amount of time.

Looking back, the key steps/overcomes were —

1. Searching how to embed a user input form using HTML.
2. Reading about the Wiki API, and especially the “Open Search” action. (I was stuck for a while because the API documentation page contained a lot of information. But thanks to CodeTutorial 360, I was able to locate the exact page for this task. I made sure to only watch the video where the useful API section was pinpointed, without looking any further to reference any more specific steps).

The other steps were similar to the previous projects, mainly using JQuery to get json data, and to embed functions when clicking on the html buttons.

You can view the codepen site here.

Now I can’t wait to finish the last intermediate front end project, before moving on the advanced sections!

Btw, a productivity tip I learned was, pay attention to the environment in which you were working. Sometimes the noises in the background, the heat, and so on affect our productivity more than we realize. For me, I’ve developed a habit in the past week to go to a tranquil park before work each day, where I could have absolute undisturbed time to focus on coding. I’ve learned that I was able to think through the problems much more efficiently. The chirping birds, the morning sunshine, the cooling breeze, all helped me stay focused on my task more than the office, or starbucks.