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

Day 115: Etch-a-Sketch Project

So I finished my etch-a-sketch project for the Odin Project a few days ago. I meant to blog about this sooner but needed a few days away from it for a bit. More on this later...

I'm happy with how it turned out!
It was a bumpy ride though... 

The requirements for the project are the following:

• Generate a grid and allow users to choose the number of cells in the grid while conforming to the original grid size.
• Allow users to clear the grid so they can draw something new. 
• When the user hovers over the grid, allows them to change the colors of the cells. 
• Optional: Allow users the option to select a random mode where each pass through a cell changes to a random RGB valu.
• Optional: Allow users the option to select a shader mode where each pass through a cell adds another 10% of black to it so that after 10 passes is the square completely black.
• My Extra: Allow users to have an eraser tool
• My Extra: Allow users the option to pick their own color using a color picker.  

I pretty much got it working in a single coding session and was so gosh darned pleased with myself. "Yeah! I know how to do stuff!"

But it wasn't quite working as intended.

When you clicked the shader button, it worked as it should, but the bug was that it became persistent and continued the shader functionality (decreasing in opacity) when you switched to any other mode as well. Clearing the grid or resizing it did not help. Nothing short of ctrl+r made it go away.

Not working as intended at all!

So I spent the next THREE days trying to figure this damn thing out. I almost got it working close to intended when I switched from using opacity to straight up changing the color values themselves (i.e. hex value of #999999 => #111111). However! There were other bugs related to the shader, where when you clicked the shader (it worked), but when you clicked it again it still worked, but now instead of going through 10 passes to get to black, it was 5 passes. If clicked shader again, it was now just 2 passes to get to black. Then 1. Other bits and bobs I tried was using the removeEventListener, forcing refresh (no, no, no), and tons of refactoring.

So with my frustrated grouchy face at home, cue the husband noticing and asking to look at my code. I grumpily told him what was wrong and after a ton of console logs, we figured it out.

I was calling the mouseover eventlistener inside a function. This function was later called from the click eventlistener.

const drawShade = () => {
  sketchPad.addEventListener("mouseover", e => {
    e.target.style.backgroundColor = "black";
    let opacity = Number(e.target.style.opacity);
    if (e.target.style.opacity <= 1) {
      opacity += 0.1;
      e.target.style.opacity = opacity.toFixed(1);
    }
  });
};

const shade = document.querySelector("#shade");
shade.addEventListener("click", e => drawShade());

Yeah, you're not supposed to do that! Why? Because once you call that function, it's going to have that mouseover eventListener hanging around forever (until refresh). And when you call the function again by clicking on the button again, that evenListener is going to duplicate itself! And so on and so forth.

So this is just another case of my wanting to cram in as many things at once instead of focusing on one functionality at a time.

For something like mouseover that is persistent, that function should only be called once. And you have to work around creating something that manages the various modes.

In the end, I created an actual "mode" value that defines what the mode should be based on the user click. And the drawMode() function, being called only once and is persistent changes the mode based on the user click.

Here's the old code when I thought I was nearly done. Compare that sucker to how different it is from the final code. There was a lot of refactoring done!

Touchy Feely Stuff

Oh boy, was this project a roller coaster ride. Before I started, I was super nervous. You know the whole thing about "if I try, I might fail. If I don't try at all, I can't fail... right?" Yeah, that's why I am always nervous before starting any project. The fear of failure.

But I started it (after procrastinating a bit), I got the grid creator to work within minutes using CSS grid, fixed up the CSS to look the way I want it to (I am really pleased with it!). I got most of the functionality to work with ease and pretty minimal googling. Huzzah! I was on cloud 9.

Then that bug reared it's ugly head. Like I said, I suffered through it for 3 days. For comparison, the project took a total of 17 hours... 10 of which was bug fixing. Yeah... And this was the time where I'm thinking "This is the second, the SECOND project on the Odin Project. If I can't do this right, how the heck do I expect to do the rest of the projects which are harder!?"  SO. DAMN. FRUSTRATING.

When I understood why it was bugging out and fixed it... it was like those 3 days were erased. Total euphoria and relief. And exhaustion. Hence why I had to take a few days away from it to decompress and let it sink in a bit.

But this is how you learn and become a better developer right? Through hours and hours of frustration and when its solved, you feel like a million bucks. I am OK with that.

Day 103: First Pull Request!

It's not much but I just made my first pull request to something that is not myself and it was accepted! Huzzah!

I am so stupid excited right now. 

It's not much. It is literally just updating an .md file as a part of the Odin Project curriculum when you complete your projects to include a link to it, but it's still sooooooo exciting to see everything in action and be included!

That said, I did finish my rock, paper, scissors project last night. Give it a whirl, there's a treat if you win! (or lose). It took about 7 hours to do spread between 3 days. I wanted to do a bit more than the minimum viable product, so I spent more time on it than was necessary. The time count actually includes looking up images and sounds for it so it was not all super productive coding, but time well spent that was still important to the project. It was nice to brush up on on a tiny bit of CSS with the project as well.

The next project, doing an etch-a-sketch seems a bit more complicating, but it should be interesting! I always like to quickly peek at code from other folks... and most of them are less than 100 lines of JS. Crazy how something may seem so complicated, but can be done in much fewer lines than I always think it would be.

Day 101: Round 2 of the #100DaysOfCode

Yesterday was my 100th day for my #100DaysOfCode. There really wasn't much fanfare other than a post to Instagram:

View this post on Instagram

Today is the 100th day of my #100daysofcode! Working on a #kawaii rock, paper, scissors game and going through all #theOdinProject projects! It's been a bumpy journey but one that has been so fulfilling. I've already been asked by those even more of a newbie than I am on what's worked for me. My number one advice is really to do the 100 days to put in the time and build a habit. Now that day 100 is done, what happens now? Without much fanfare, I am starting another 100 days! I am proud of what I've learned so far, but I still have a long ways to go! #codenewbie #girlcoder #womenwhocode #javascript #wannabedeveloper #learnprogramming #shecodes #goodhabits #milestones #learntocode

A post shared by Ann Nguyen (@anncancode) on Jul 16, 2019 at 6:23pm PDT

And a quick tweet about it:

Today is #Day100 of my #100DaysOfCode!

Huzzah!

Currently working through the projects on #theOdinProject https://t.co/kYclTFh4mF

So now what? I'm starting another 100 days! Gotta keep going!#CodeNewbie #Javascript #WomenWhoCode #LearnToCode

— AnnCanCode (@AnnCanCode) July 17, 2019

Honestly, I was too busy working on the latest project to really make a big deal out of it.

I am glad to have completed Angela Yu's Bootcamp and the FCC Algorithm and Data Structures certificate before day 100 though.

I have no plans to stop doing #100DaysOfCode until I actually make a career change into software development.

What's Next? 

The next few goals will be to complete the Modern Javascript Bootcamp course on Udemy with Andrew Mead.

As a quick note: my gold standard for Udemy instructors is still Angela Yu, but Andrew Mead is a really close second. They have very similar teaching styles with the demonstrations and then challenges. I also find Andrew's method in using NodeJS to teach Javascript to be unique too! Since it gets you used to the terminal (although I have been mostly going through his projects on the console with codesandbox.io so I can code on any computer). I am already making plans to purchase his NodeJS and his GraphQL courses when I finish up other courses/projects.

The other Udemy courses I also intend to go through are my already purchased Complete Web Developer in 2019: Zero to Mastery course by Andrei Neagoie (already about halfway through), the Modern React Bootcamp by Colt Steele, and Advanced CSS and Sass by Jonas Schmedtmann. For most cases, I will try to get through the parts I am already familiar with ASAP and focus on the challenges and projects in these courses. Other more advanced courses I would like to get are ones on MongoDB and D3. While I could purchase these courses now, I really don't want to get into the trap of throwing money at something just so I can feel like I am being productive. So I am forcing myself to complete the courses I already have before getting more.

For projects, I have plans to go through (most of) the projects list on The Odin Project. with the first one being a simple Rock, Paper, Scissors game. A few of these projects are also similar to the various freeCodeCamp projects or the projects in the Javascript30 course by Wes Bos, so it's like I can multi-task with my projects! Not that I am getting bonus points or anything like that from anyone (but myself) but it's nice to feel like I am being efficient, no? The whole point really is to build the damn thing already and get some projects under my belt.

In the meantime, I am going to throw some Edabit or Codewars problems in here and there as well as watching Linkedin Learning videos (formally called Lynda.com) during my down time. I usually don't code along with the LL videos because the courses are often really short (like 1-2 hours) and they really do not go as in depth as I prefer. These are usually reserved for winding down before bed or as I am commuting.

I am not doing any one specific course or set of projects in a linear fashion, but sort of all of them at once as I am going through my curriculum, which is loosely following in the order that freeCodeCamp laid out.

Day 052: Personal Bootcamp Debrief

So it's Tuesday now and the long weekend has come and gone. How did my personal bootcamp go?

It was really tiring, but a GREAT experience. I didn't want to spend too much time blogging about it while it was going one since I wanted to dedicate most of the time during the weekend to coding and learning to code. I posted some thoughts on instagram during the weekend.

Day 1:

View this post on Instagram

[48/100] It's a long weekend so I decided to go on a Personal Bootcamp Weekend and try to code/learn for at least 8 hours each day for the next 3 days as if I were in a real #codingbootcamp. I'm trying to get through as much of this 40+ hr bootcamp course on #udemy as possible (#webdev course by Angela Yu). I'm done with my first 8 hours, just ONE day and I am exhausted! Much props to the fulltime bootcampers who do this for weeks on end. And no wonder ya'll level up so crazy, that is so much learning and coding! Tomorrow, it continues! If you can spare a weekend or long weekend to do a personal weekend bootcamp, I totally recommend it! 

Day 3:

View this post on Instagram

[50/100] Currently learning #git and #versioncontrol with the #cli and... Huzzah! I am halfway through my #100daysofcode and on my last day of my personal #codingbootcamp long weekend. I am taking a quick break now but I have 3.5 more hours left to complete my 8 hr day of #coding for today. By the end, it would be at least 24 hours of learning and coding in the last 3 days! I feel like I have learned SO much from the very start and this weekend has been a #powerup for sure. It's been hard and tiring, but also very rewarding. I can't wait to apply everything in this course to building my apps. And for sure, I will be doing more of my weekend bootcamps in the future and maybe even drag some friends along too! 

The plan is to do something like this once a month and maybe drag some folks from my accountability group into it as well, if they want to jump in for a day or so.

As for how far I got through the material (Angela Yu's Web Dev Bootcamp), I was at 23% of the course having just finished the Bootstrap section when I started the weekend. I ended the weekend at completing 66% of the course and am into the first few videos on JSON and API.

Sort of Daily Breakdown

I was mentally wiped out the first day since it was pretty much a continuous 8+ hours of learning and coding.

The second day was much better because I took a long break in the middle so it was like 2 medium sized coding sessions vs one big long one on the first day. It was also mostly working on a project that day (building a Simon Says game) so that added variety. I also kind of stayed up until 2am in the morning that evening watching more of the videos after finishing the project because I felt like I was on a roll.

The last day was a bit shorter (since I got in those hours in the AM ), so it was not bad in terms of total hours required for the daytime. I did do the minimum number of hours on the last day so I can enjoy the long weekend and let my brain rest for a little. In all, I did clock in bout 25.5 hours of learning and coding in the past 3 days.

What I Learned

I feel like I learned SO much! The three big things: being more comfortable with the DOM, being introduced to NodeJS, and finally learning the CLI/Git/Version Control. The next bits would be to get through the API section (which is also very cool!), moving on to databases, RESTful API, and authentication and security. I would like to finish the course by the end of this coming weekend, but we will see how that goes since it depends on how much time it takes to get through the projects.

Hi NodeJS. I am so excited to meet you!

I must say, I really enjoyed the projects in this bootcamp. When she introduces you to a concept, there is a bit of code-along happening. Then there's the pausing before each mini challenge so you can work through the concepts on your own before you unpause and she goes over it. For the big projects (what she calls "boss level challenges), she lays down the to-do's for each step and you tackle them one by one. At the end, she goes over the whole project. I opted to not review her solutions unless I feel really stuck (and am happy, but annoyed with myself to say that I peeked only once during the Simon Says challenge).

You know I already had that problem before where the initial look at the code makes me wonder how in the world I can ever get to that point. But those step-by-step to-do requests really help remind me that this is what programming is all about. They are all little steps to get to the final product. And when your app works and you look back at the code, everything actually makes sense!

What's Next? 

I know I haven't finished Angela's course yet, but I am already looking ahead. Here are my next to-do's:

• Finish Angela Yu's Web Dev Bootcamp 
• Andrei Neagoie's Zero to Mastery Course (yes another kind of intro course)
• Wes Bos' Javascript 30 (more projects!)
• The Odin Project Web Development 101 (ignoring Ruby and Rails)
• The Odin Project Javascript course (ignoring anything with Ruby and Rails) 
• KhanAcademy HTML/JS (good as a break of sorts, for fun & DOM refresher)
• Build The Damn Thing personal projects
• Free Code Camp challenges/projects
• Finish up the old to-do list as bedtime refresher

I added another intro-to style course to the list, Andrei Neagoie's ZTM because he has sections that cover React & Redux which I feel is something important that is missing from Angela's course. His projects also seem really interesting too. Colt Steele's Web Dev Bootcamp course also ranked high, but he is missing React & Redux so I did not really consider it. I might consider Colt's Modern React Bootcamp course in the future though.

For Andrei's ZTM course, I will skip the parts that I am comfortable with (HTML, CSS, JS basics), use the parts I am not yet comfortable with as review on 2x speed, and delve into the projects for the experience. I am also interested in his more intermediate course, the Complete Junior to Senior Web Developer Roadmap (2019) and figured I ought to see if I like his teaching style before jumping into another 30+ hour course. Use the coupon code LEVELUPZTM to buy his course fo $10.99 without having to wait for a sale.

The focus of the list is projects, projects, PROJECTS! Which is why Wes Bos' JS30 is on the list as well as the Odin Project. I was actually slowly going through TOP Web Dev 101 as bedtime reading, so I am about 33% done with it already. It follows along nicely with Angela Yu's bootcamp contents this past weekend. In TOP, I am skipping the parts related to Ruby or Rails, but might revisit that in the future. TOP just seems to have some really great projects and the curriculum is constantly being updated (contrary to what they say on the internets).

In the middle of all this, I do intend to do the challenges and projects on FCC as well. I would like to get the full stack FCC certification eventually! FCC is kind of where it all started, so of course it is always on the list. I do admit that the website alone was not enough for me to understand the material (sometimes the wording of the challenges confused me) hence my branching out to Codecademy, Lynda, and Udemy which has been working well in helping me learn.

Okay, this post was a lot longer than intended, but it is really good to create a roadmap for myself to tackle in the next few months. This also helps to know what I am doing for my next Personal Bootcamp!