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.

 

 

 

I’ve finished the second intermediate Front End project, the FCC Weather App! You can see my codepen here.

The project felt easier than the first one, as I’ve already learned about the API and getJSON methods. Nevertheless, there were a series of road blocks I had to overcome.

Looking back, here were the key steps I took, and resources I consulted, that helped me complete this challenge —

• Understanding how to get user location data. I read through the related FCC course material and W3 school documentation to have a better grasp of the concept.
• I used the dark sky API to get the relevant data. To get the right data from the API, I also researched how to access nested arrays.From Stack Overflow: “You can access it this way : data.items[1].name or data[“items”][1][“name”] . Both ways are equal. “I also had to refresh my memory to research about the difference between single quote and double quote in JS : turned out they are the same and can be used interchangeably!
• Btw, I kept running across the crossorigin issue – the fact that the API data can’t be displayed on Codepen correctly b/c compatibility between HTTP and HTTPS. In the end, the easiest way I found was to simply add https://crossorigin.me/  in front of the actual URL – boom, problem solved!
•  To get the location data to HTML using JQuery, I googled and figured out that there should be no quotation marks around the variables. e.g.  url = “https://crossorigin.me/https://api.darksky.net/forecast/a24805f95bcff8508810dda799ced947/” + locationLat + “,” + locationLong 
• I also learned how to add parameters from the API data. I could have added a chinese version of the weather info, but I didn’t. The method was worth learning nevertheless. You use the question mark here to access the Chinese version —  https://crossorigin.me/https://api.darksky.net/forecast/a24805f95bcff8508810dda799ced947/38.9104844,-77.0593264?lang=zh
• Learning how to change CSS of certain HTML elements using JQuery took the longest time. The format is actually pretty easy — $(‘img’).attr(‘src’, ‘url’) for example. Or  $(‘body’).css(“background-image”, ‘url’)
• It also took me a while to find the right weather icon that would work with my conditions. Turned out the openWeather app has all the icons you can access through URLs directly.
• I learned how to switch between F and C by watching the Code360 Tutorial on youtube.
• I also tried both “if … else” and “switch” statements to set the conditional weather icons and background images. I learned that the switch statement is simpler and faster to process. switch(){case x: action; break;}
• It was hard lesson learned that special attention needs to be paid to the “OR” conditions in if…else or switch conditions. In If … else, you need to write newWeather === “cloudy”||newWeather === “partly-cloudy-day” instead of newWeather === “cloudy”||”partly-cloudy-day”. Trust me, the second won’t work because the second Or condition , if “partly-cloudy-day” = “partly-cloudy-day” will always evaluate to True and screw up all the rest of the conditional statements … !!With Switch, it’s easier — you can just use case x: case y : followed by the action statement.
• Also, when I figured out all the functionalities, I finally got to sketch out the structure of my app, to make my CSS work. Having an idea of what you want your app to look always help guide your actions. 

Besides these steps, there are two resources I found particularly useful to boost my productivity —

• Microsoft Onenote. You can probably use Evernote too. I found that during those days when I was productive, I used OneNote to break down all the big, and small steps, and make them into To DO list to break the Big project into small actionable steps, and that helped me getting “unstuck” easily. Each time I got stuck on something, I asked myself, what action item on my OneNote page can this problem turn into. Sometimes it’s simple as “google this method this evening”. See below example of my OneNote page for this challenge. I used the right side to jot down important lessons/examples I learned. 
• the FCC forum, or stack overflow. When I got confounded by why the conditional statements wouldn’t work, I googled for the longest time, and finally decided to ask a question on the FCC forum — for the first time … !I got an answer within about 10 min, and my question was solved!! And I learned so much more about the if else statements, and the person even suggested other ways to improve my codes. I learned so much by posting … !

Finally, one last thing I learned through this project is that, the key is to get “unstuck” as soon as possible. When I couldn’t figure out the “if … else…” statements, I tried the “switch” statement instead, and it worked … ! that helped me move forward, without pondering over this question I wouldn’t have solved on my own.

In the future, I think I’ll learn to keep trying different ways to solve a problem, and keep using the FCC forum as a resource, and maybe ask more question and have someone review my codes — the world is more willing to help than you think it is …!

The Wikipage challenge here we go!

 

 

 

Almost 3 weeks has gone by since my last post. But I’ve learned a lot in the past three weeks — I’ve been working on the first intermediate front end dev challenge — build a quote machine. And I finally finished it today!

Looking back, here are the processes and steps that helped me tackle this challenge effectively. I’ll have to say FCC didn’t explain the concept of API that well, as most of the codes were given to you to complete the sandbox tutorials. Therefore, when I first started the challenge, learning what API was all about, and how to use JQUERY to get JSON/JSONP data proved to be a steep learning curve. But looking back, below are the major hurdles I needed to overcome to complete this challenge, and here’s how I did it —

1. Understand JQUERY’s getJSON method. Below are the two links that I found useful, and I recommend reading through these documentations carefully to get a grasp of the key conceps.
   1. http://api.jquery.com/jQuery.ajax/
   2. http://api.jquery.com/jquery.getjson/
2. Understand  the cross-origin issue – JSON vs JSONP
   • You will soon find out that even if you’ve used the correct methods, and found an API (I used the forismatic API for the quotes), the quotes won’t show correctly on Codepen. As a lot of people say, this was the biggest time suck during the project, and a lot of the stackoverflow answers weren’t straightforward enough. In the end I found a workaround through one Codepen example. And here’s the correct code for the Forismatic API to work on Codepen: url = “https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?”
   • I also found this youtube video, which was highly engaging btw, that touched upon the difference between JSON and JSONP — highly recommend.
3. Add the tweet function. I googled this on youtube, and at first there were lots of complex examples which again turned out to be too confusing. I also googled Twitter’s developer page, but then there was too much to red … Finally, one youtube video had the most simple solution: $(‘#tweetButton’).on(‘click’, function(){
   window.open(“https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&text=”+encodeURIComponent(newQuote));
   });
4. Make the API data a global parameter. This is related to making the quotes work with the tweet button. I was able to understand the concept, and the solution better thanks to the Code360 tutorial.

 

That’s it. It’s amazing to see how many web resources helped me during the project. And I felt one of the abilities coding really helped me hone, is the ability to problem solve through identifying the correct resources online — efficiently.

Again you can see my finished codepen project here. Just to learn things from another angle, I also completed another draft project using the array method, which you can find here. Although the first API challenge took more time than I originally budgeted. I’m glad I took the time to really understand the fundamentals, and am hoping that the foundation will help me tackle the other challenges more efficiently.

 

These two week I felt completely in love with coding … ! For 12 straight days, I’ve devoted some time of the day to Free Code Camp. The first week, I finished the basic javascript lessons.

Then the past week, I devoted time in the morning, after work, to tackle the basic algorithm scripting challenges one at a time. Most challenges took an hour to complete, some I was able to do in 20 min, but some could take 2 hours, even 3 …

And the more I got stuck, the more I learned how to get UNstuck. Usually it’s a simple thing that you just need to google about: how to count all the letters in a word? How to get the third letter of a word? How to combine two conditions in an “if” statement?

And a lot of times I got stuck making simple mistakes: coding if 65<i<90 instead of if i>65&&i<90 for example. Or making a for loop exit too quickly. And so on.

Sometimes I spent more than an hour staring at my code without realizing the most simple mistakes. But looking back I am glad I didn’t just google the answer. Because I really relish every moment of the trial-and-error process. And the mistake that I spent one hour staring at and overlooking? Turned out I would seldom make it again.

I originally planned to finish the Basic Algorithm challenges by the end of May. But since I met my goal 10 days in advance, now I’m excited to continue to JSON APIs and the intermediate front-end projects in May!

Coding my way through these challenges reminded me of the middle school days when I would sit in front of my desk cracking the math problems for hours. Oh I miss those days when I was in a complete creative problem-solving flow, and am so glad coding brings these precious moments back.