Day 175 – 182 Finished FCC Advanced Front End Project – Pomodoro Timer

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!

 

Screenshot 2017-10-15 at 7.08.22 PM

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. 

Day 162 – 174 Finished FCC Advanced Front End Project – JS Calculator

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).

Screenshot 2017-10-07 at 12.43.28 PM

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 —

Screenshot 2017-10-07 at 12.37.22 PM

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.

 

 

Day 94 – 161 Finished Intermediate and Advanced Scripting (and used Scrum to get unstuck)

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.