Day 137: Pomodoro Clock & Done w/ the Odin Project's Web Dev 101!

Wow, it's been a while since the last post. The reason this took so long was because the Pomodoro Clock project itself took so long to complete! See here for the code in all its glory.

I did the set up so that it can eventually be refactored to submit to the freeCodeCamp's version of their project. Yes, I do like my twofers.

Overall, this thing took about 19 hrs and 35 minutes to complete. Why? Because I had to do it over and I added some options that did not work out.

The project started with the styling which was my favorite part because it was so straight forward to me. That didn't take too long, probably just a handful of hours.

Then coding up the functionality began.

I started by tracking the actual time with use of the Date() object and some help from w3schools. I went this route because it is supposed to be more accurate than just using setInterval by itself. But it was really freaking hard to get a pause and resume type functionality working with the setIntervals and clearIntervals. I was able to get it paused, but not resumed, or resumed incorrectly, or there would be some bug that affected it. It was a mess.

Eventually, I decided to just straight up use setInterval() by itself without relying on Date() to track the time. So that was about 5-6 hours wasted. It was actually so much simpler this way and I was able to get the pausing and resuming up and running very quickly!

By then, it was pretty much working as intended, but I planned from the start of the project that I wanted to use a progress bar.. or rather, a progress circle. I found a neat library aptly named ProgressBar.js which seemed to fit the bill. I got it working!... but only if you do not use the pause functionality. If you do use pause, bugs start presenting itself with the progress bar by either doubling in time or some other weird stuff. So then we have another 5-6 hours spent on trying to get it working. After some searching around, it appears that others who also wanted to use a pause functionality encountered the same problems.

To fix it was to edit the library itself and I am not quite there in terms of ability yet (especially since it also uses SVG which I only just started reading about). That and I was ready to be done with the project and move on already! So I called it a close, with a promise that I will build my own built-in progress bar.

After fiddling with the project for so long, I reasoned that it would be very simple to implement my own progress bar using JS to change the styles in CSS based on the % completed. And it was! While it is not the slickest thing in the world, it does and (generally) looks like how I envisioned it.

Sometimes, you just got to Keep it Simple, Stupid. (KISS)

And lastly, I am really pleased to finally finish the Web Development 101 section in the Odin Project!

Gee, I wonder where I got that idea for the progress circle from?

Day 129: CodeNewbie & the Pragmatic Programmer

If you are just starting out, I feel that it is my duty to plug the CodeNewbie community and to listen to its podcasts if you aren't doing so already. I've been taking my time going through the whole catalog on my commute to and from work, from the very beginning episode 1. I am currently at episode 141, now going through the first annual Codeland Conference talks, right before they started actually numbering their seasons! (They're at season 9 now, at the time of this writing).

I must say that Saron Yitbarek is one of the best podcast hosts I've ever listened to. She has a natural talent at it. As a newbie, my favorite episodes are the ones where she interviews developers who are self taught, are career changers, or generally have a non-traditional background. It's my daily dose of inspiration.

I do also enjoy the interviews from the folks in tech that I wouldn't normally think of since I am heavily leaning to web development or interview some big names like Sandi Metz, John Resig, and Yehuda Katz (great interview). A set of episodes that really stuck out to me that I will probably keep referring back to is where she interviews the Pragmatic Programmer founder, Dave Thomas (part 1, part 2). This is a rather special interview for me as I was going through some serious doubts at that time and listening to the interview really helped encourage me.

So if you are a code newbie, give CodeNewbie a look!

Day 121: Javascript Calculator Project Completed!

The Javascript Calculator project with keyboard support was not as terrible in terms of bug squashing (and general frustration) as the Etch-A-Sketch Project.

Two points of interested of this project was that:

1. When I began, I started going down this weird rabbit hole of pushing the clicked numbers into an array and then joining them for calculations. There were other funky stuff I was trying as well that I don't quite remember. It was a not insignificant (to me) amount of code written up that I ultimately ended up tossing out the whole thing and starting all over. 
2. One of the extra credit assignments in the Odin Project is to include keyboard support. I wrote up that bit pretty quickly and it worked for the most part, but had weird bugs that included other characters that was strangely (to me) not being filtered out by the conditional. I had used "keyup" as the eventlistener and tried a few things to fix that bug. Eventually, I decided to try using "keydown" instead. Literally just switching out one word, "keyup" to "keydown" worked! I still don't quite understand why and will need to read up on the differences between the two. 

Overall, it was a really enjoyable project! FreeCodeCamp also has this project as part of their front end libraries certification, which I was planning to just submit both to TOP and FFC in one go. However, I decided to hold off on submitting to FCC since this calculator was written entirely in JS. I am still taking my time going through the React and Redux sections and eventually would like to refactor the code to use those libraries in the future since the whole point of the project for the FCC certification is to get more experience with them. 

The next project I will be working on is the Pomodoro Clock project which again is an assignment in both TOP and FCC. I will be taking the same steps, working with it in vanilla JS and then later refactoring to React/Redux.