Wednesday, July 31, 2019

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.


Friday, July 19, 2019

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.


Wednesday, July 17, 2019

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:


And a quick tweet about it:


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.


Saturday, July 13, 2019

Day 097: The freeCodeCamp JavaScript Algorithms and Data Structures Certificate!

Look mom! I got the thing!

This was after completing their last problem: JavaScript Algorithms and Data Structures Projects: Cash Register.

Mom, it was a harrowing ordeal to get this thing!

As you know, I track my time coding or learning to code with Toggl. How much time did I spend on this the last problem?  In total about 9 hours and 52 minutes

Holy mother... why?

The long and short of it is that you need to know the value of each of the currency item in order to solve the problem. I had set my penny to $0.1 instead of $0.01. 

I basically solved this damn thing like 3 different ways after working with that incorrect original reference data the whole time, but could not get why the heck it was not solving. Part of the reason was because I was adamant on getting it done on July 12th so I kept cranking at the problem up until around 3am in the evening until I finally gave up for the day due to sheer exhaustion. 

So roughly 9.5 hours was spent banging my head on this thing. In the end, I asked my husband for help and after a series of questions of why... that we identified that my penny was off by a decimal in like 10 mins. FML

And after that, the problem was solved as a whole pretty quickly after writing out the last bit of logic for the insufficient funds cases. 

I should have given it a rest and/or asked for help much sooner. The bulk of the solution was written out and validated in about 2-3 hours and it would have been solved by then if it wasn't for being off by the decimal. I kept hammering at why it was not working with a tired brain which worked against me. And my stubbornness (which is amplified with the tired territory) pretty much made me avoid asking for help until I became desperate. I really need to stop doing that and be better about knowing when to stop and knowing when to ask for help!

So the takeaway from working through all these algorithms is not the content itself (though I did learn lots!) but mostly about myself in how to be a better person and a better programmer.

Now that this is done and over with, I still want to solve the remainder of the Intermediate Algos that I skipped, but I want take a break from algos problems in general for a few days so I can move on to the Front End Libraries section in FCC, the more fun and creative bits.

I am pretty pleased that I manged to get the second certificate before my 100 days on Tuesday!


Wednesday, July 10, 2019

Day 094: FCC Intermediate Algorithms: Wherefore art thou

Currently, I am only about halfway through the FCC Intermediate Algos section. I had initially skipped Intermediate Algorithm Scripting: Wherefore art thou since it is dealing with objects and objects are not my cup of tea, but then I encountered another problem with objects so might as well get this one done before moving on, yes?

I really like working with challenges that have arrays. I understand it and enjoy it. But when you throw an object into the mix, I start having problems. And then you add objects into arrays or arrays into objects and nest them in some way or another, my eyes get crossed!

It is partially because the object references the location and not really the values itself (or something like that). So when you compare the following "same" objects in the below array, the result is a false. Try to iterate through that mess and you can get a sense as to why it confuses the heck out of me.

const testArr = [
  { key1: "value1", key2: "value2" },
  { key1: "value1", key2: "value2" }
];

console.log(testArr[0] === testArr[1]); // false

But objects is in part what makes Javascript OOP, so I better get used to it.

The FCC challenge requires the following:
Make a function that looks through an array of objects (first argument named "collections") and returns an array of all objects that have matching name and value pairs (second argument named "source"). Each name and value pair of the source object has to be present in the object from the collection if it is to be included in the returned array.
whatIsInAName(
  [
    { first: "Romeo", last: "Montague" }, 
    { first: "Mercutio", last: null }, 
    { first: "Tybalt", last: "Capulet" }
  ], 
  { last: "Capulet" }
);

// should return [{ first: "Tybalt", last: "Capulet" }].

Being aware of the conditions of objects and key value pairs that make it hard for me, how did I initially tackle the problem? I used Object.keys() and Object.values() to convert the array of objects into an array of arrays, combining the keys and the values as "keys+Values" with use of the for.. in loop, something like the below as an example.

const srcKey = Object.keys(source);

  for ( let i = 0 ; i < collection.length ; i++){
    for (let key in collection[i]) {
      console.log(key + ":" + collection[i][key]);
    }
  }

Midway through writing up my answer, I realized that it was probably a very inefficient and um... bad way to work with objects in getting to the solution.

So I peeked at the hints.

I was on the right path to use the Object.keys(), but I wasn't using it correctly. And filter() and Object.hasOwnProperty() also made an appearance.

I didn't quite consider using filter() because it is a method on an array, not object. Since they are objects, I kind of agonized over that and overlooked the fact that it was an array of objects. So filter will work fine in this case. It almost always does with these matching type problems.

In my own words, filter() accepts a condition and returns that which is true or "passes the test implemented by the provided function" (per MDN). You plop in a true or false function and it gives you an array of whatever values are true to the condition.

Okay, it sounds like I have to write function that checks whether any part of the source matches the submitted collections array by looping through the array (of objects). And somewhere along the way, hasOwnProperty comes into play in there. I'm not sure if I ever used hasOwnProperty and how that comes to play. So what does it do?
The hasOwnProperty() method returns a boolean indicating whether the object has the specified property as its own property (as opposed to inheriting it). --MDN
I am going to need to use it to check if the objects in the collection has the properties of the source. Fair enough.

So cue the many searches and hours spent on this problem and I finally gave up and took a look at their code solution.

I came close to their basic solution. Most of the bits and bobs were in the right place, but I could not get the condition statement right. /sigh Always foiled by that ! operator. Here's my completed solution after reviewing theirs:

function whatIsInAName(collection, source) {
  const sourceKey = Object.keys(source);

  function existsInArray(obj) {
    for (var i = 0; i < sourceKey.length; i++) {
      if (obj[sourceKey[i]] !== source[sourceKey[i]]) {
        return false;
      }
    }
    return true;
  }
  return collection.filter(existsInArray);
}

Why does this work? Let's deconstruct this a bit using the first test case.

Step 1. We need to use Object.keys() which will return the object's name for the key value pairs. We need this information because our task is to find the one that matches with the source. In this case, we need to match the last names (key and value).

Step 2. To simplify matters a bit, I created the "sourceKey" which is the "Object.keys(source)" to keep the code a bit cleaner. You can indeed use something like "Object.keys(source)[i]" later in the conditional part of your code, but it gets harder to read. At least for me this is the case. This code produces the following:

console.log(Object.keys(source)) 
// returns "last"

Step 3. In peeking at the hints, I found that filter() needed to be used. So in this case, it is a matter of filtering out the objects in the array that does have the same sourceKey and sourceKey value and returning the objects that match in its entirety, even the parts such as the first names and values that do not match.

I am still wrapping my head around filter(), reduce() and the like, so I rely very heavily on the documentation and the examples therein to continue. I found the Filtering invalid entries from JSON example to be particularly helpful. So I create a function to check if the source key, i.e. the last name exists in the provided collection.

Step 4. I create the "existsInArray()" function that essentially takes in an array of objects as the parameter (which is the collection) which will be run later when used in conjunction with filter(). I'm, largely following the example in MDN where were will need to call the following eventually:

return collection.filter(existsInArray)

This is the same as checking through the below:

console.log(collection[i][sourceKey[j]]); 
// is same as
console.log(collection[i].last)
// returns all the last names

It is similar to collection[i] because remember that it is built in that filter() will iterate through the arrays so there won't be an actual need to iterate through the array. Though of course it is still possible to solve this problem without filter by indeed using nested for loops to iterate through the collection and checking against the source.

Step 5. Now we write the logic so that when we iterate through the collections to check if the values of the sourceKey (the last name) match. Filter accepts a boolean value and normally outputs the items that are true to the logic and removes those that are false. In MDN's example, if the function checks for all the strings in an array greater than a length of 6, it will only return an array with those strings that are true to the function.

So I initially had in the following in my if statement:

if (obj[sourceKey[i]] === source[sourceKey[i]]) {
return true;
}

Success!.. or is it?

It solved the first and second test case but not the remaining.

Why!?


Well, my initial answer also returned any of the whole object in the collection if it matched one single key+value pair from the source, whereas it should only return the object if it matches all key+value pairs in the source. So just because I match 1 key+value pair in the source, it returned the whole object. This is obviously not what I want if there is more than one key+value pair in the source.

This is also where I spent most of the time puzzling through and could not get why it was not working. I tried a few different things that did not work out. So after an hour to trying, I peeked at the answer and saw right away... that it was reversed on their end. I applied it to my answer and of course it solved right away!

But why?

Step 6. Since filter accepts a boolean value and returns the bits that are true,  the logic should identify the objects in the collections array doesn't match all the key+value pairs in the source first and mark them as false (so it is not included in the output) then return all else as true after the for loop.

for (...){
  if (obj[sourceKey[i]] !== source[sourceKey[i]]) {
    return false;
  }
}
return true;

That's it. I have such a hard time even considering this route in using filter() or map() to define items as false first and return all else true as a way to filter more specifically. I am hoping I get better at this with time!


Tuesday, July 9, 2019

Day 093: Copy & Paste Hell, Diffchecker is Your Friend

I'm still working through the freeCodeCamp's intermediate algos. Next up was this problem Intermediate Algorithm Scripting: Convert HTML Entities which asks to convert the characters &, <, >, " (double quote), and ' (apostrophe), in a string to their corresponding HTML entities.

Easy peasy! I thought to myself since I am starting to get very comfortable with Regular Expressions and that was what I intended to use. I wrote up my code by copying and pasting the HTML entities from the of test cases below the buttons.

Huh?

I press run the tests... and for some reason, some parts did not work? I spent the next 30 mins wondering wtf I did wrong. Googled up why it didn't work as well as the solutions on how to make it work. Working through it in the console or codesandbox gave me the correct answer with what I originally wrote as well. By all accounts on StackOverflow and such, I had the right answer... but the tests were not passing on FCC. 

PS get a codesandbox.io account and you can code anywhere!

I sometimes check out the hints but I really hate looking at the solution. But after nearly an hour (my cue to start getting help) at this, I gave up and looked at how FCC did it.... and it was nearly identical to their intermediate solution. WTF?! And yes, I also checked to make sure their solution actually passed their test and it did.


And then it finally dawned on me that I might have some weird characters somewhere that FCC is not reading, so I fired up Diffchecker to confirm my suspicions..... and yep.. there's a hidden blank character that I got from when I copied and pasted the HTML entities from the FCC site.

After removing those bits from my code, the tests all passed with flying colors. /sigh


Monday, July 8, 2019

Day 092: Long Weekend Coding Retrospective, Personal Hackathon

Not that I announced it or anything, but I did another "Personal Mini Bootcamp" this past long weekend (July 4 though July 7). Since I am more precisely tracking only productive time (no break times) with Toggl, I figured it would be more reasonable to do at least 6 hours of coding or learning to code each day as opposed to the original 8hr/day. Also, if it is where I am just watching a video and not coding or trying out the examples in the videos, I count the time viewing for half (or less, depending on how much I am learning from the content).

While I knew I needed to do another one of these Personal Mini Bootcamp sessions, I only decided on July 2nd that I will be attempting it during the my long weekend since my workplace decided to give everyone a free day off on Friday, July 5th. In all, it gave me 4 whole days of coding and getting back on track.

I had a lot of courses/videos/assignments that were incomplete, so the main goal was to move on to functional programming and ES6 and asynchronous JS and wrap up those courses and videos and take occasional breaks with the FCC Intermediate Algorithms section.

As you know, I finished Angela Yu's Web Dev Bootcamp course, I also finally completed the Intro to Javascript course on Codecademy. The last few sections in this course were indeed ES6 and async JS hence the delay on completing it.

The past 2 weeks has been all about functional programming and ES6 so it was really nice doing all of these from various sources at the same time. And no surprise, a great deal of the weekend was focused on APIs, implementing them, practicing with them and creating it. I also made a very simple implementation of the Dad Joke API on Codepen (which I also need to update to include the errors and such).


For those Lynda videos that I stopped midway because I didn't want to get too ahead of myself, I finished most of them often while I was eating or on my indoor bike, counting for half time. So of course the content was further reinforcement on ES6, async JS, and functional programming. The last bits of the Angela Yu bootcamp was also all about APIs as well. It was neat how everything fell into place like that.

Another side effect of the weekend was actually finally starting to push projects onto Github and getting more comfortable with that.

I did go easy on the hours on July 4th proper (because bbqs and whatnot), but on average it does work out to be a tiny bit over 6 hours per day for the 4 day weekend. And I am also happy to say that I finally broke the 30 hour/week barrier to clock in a total of 32 hours and 13 mins for the week of July 1 through July 7 (Monday through Sunday). Woo! My general goal is to get in at least 20 hours of coding each week, which I have only achieved 2x previous to this week in the past 13ish weeks. /sigh

As an aside, I really need to think of a new name for the "Personal Mini Bootcamp" because its kind of misleading? I originally had that name because I was going through the Angela Yu Web Dev Bootcamp as my curriculum for that first weekend. I also originally chose the 8 hours so I would know what it feels like to be coding for 8+ hours a day like a full-time bootcamp student. But in reality, these weekend sessions are more like a very focused attempt to get some hours of code time in. Maybe "Personal Hackathon" might be a better name for it? Yeah, I think it makes more sense.


Sunday, July 7, 2019

Day 091: Finished Angela Yu's Complete Web Development Bootcamp

I just want to post that I finally completed the Complete 2019 Web Development Bootcamp course by Angela Yu on Udemy.


Man, it feels good to cross something big off my list.

I started on 5/12/19 and worked on it for a few hours each day, then took a long break from the course and left it at 90% for a while. But in the past 2 days, I made an effort to just finish and boom, I am done now!

It says the course is 43.5 hours, but there are 2 sections that are debatable in usefulness. The first is a 1hr 44min Q&A with Angela, while interesting, it should have been linked to a Youtube or something so it doesn't inflate the hour count towards the course. The other is a general module on design and colors, not specific to coding which was about an hour long. It has some uses, but I am not sure it belonged in this course. In all, I spent about 63 hours on the course (not counting the 2 above modules), watching it and working through the challenges. I did admittedly go very quickly through the HTML and CSS parts that I was already familiar with on 2x speed, or sometimes marked completed because it was too basic. The rest of the content, I normally watched on 1.5x speed.

Here's part of the review I submitted for the course posted on Udemy:

Pros: 

Angela is a charismatic, humorous, and gentle teacher. Her teaching style works really well for me as a visual & project based learner. She is very clear and concise in her explanations. IMO she speaks too slow, but Udemy allows you to adjust the video speed so this is no big deal. Angela will demonstrate and along the way and will frequently ask you to pause the video to complete mini challenges. I found this to be my preferred style of teaching in the video format. And since it is not 100% coding along like some other courses, I retain information much better. Whereas in the code along type courses, I find I am too focused on trying to catch up to their coding to pay as much attention to the concepts as I should.

She has some “boss level” challenges at the end of the major sections. Here you work on what you’ve learned in a big project such as creating a tinder site for dogs (cute), dice game, simon says game (this was an excellent project), creating your own blog/cms, among other projects. For these boss challenges, she prompts you to write a bit of code in each step. There are many steps along the way. By the last step, if you did everything correctly, you will have a complete and functional app. This really helps hammer in the fact that coding is basically tiny steps and not to get overwhelmed.

Not all the other instructors/courses do this, but Angela will code through the solutions after each challenge and will explain through each step. This can get repetitive if you are already comfortable with the content (which you can then totally skip her challenge reviews), but for the parts that were tricky for me, this was a godsend.

The video production values are excellent, very professional, always on par and often times above some Lynda courses. Her course also gives you access to the discord channel where you can get help from other students or even make some new coding friends (like I did!).

My favorite parts of the course was probably going through the Simon Says challenge and the Security and Authentication section (learned tons here).

Cons: 

IMO, she spends too much time on jQuery and Bootstrap, with a big project on Bootstrap itself. However, if you are just starting from the very beginning, I think Bootstrap is good to know to get practice with a framework and getting used to thinking about CSS in divs.

CSS Flexbox and CSS Grid are noticeably missing from the course, but hopefully she will add a section on these later.

Also missing are working with or at least introductions to the big JS frameworks out there: React, Angular, and Vue. I know it gets tricky to pick one framework for such a course, but they should at least be introduced at a high level. Students need to be aware they exist. I also wish she covered debugging a bit (not the sexiest thing in the world, I know). Even so, the cons do not detract from the content that is already there.

TLDR: 

Angela’s course and teaching style works perfectly with my learning style (visual & project based) as she often challenges you to complete steps after demonstrating how to do it. I recommend this course to anyone looking to learn about web development, if you are starting from scratch or even if you have some experience.

If you take your time like I did, you will learn a lot and get so much value from this course. Since Angela often updates the content based on student feedback, the ROI keeps getting better. Will taking this course turn you into a web developer and get you a dev job? Probably not because you need to practice what you learned and apply it to your own projects. But will it give you a strong foundation to do so? HECK YES!

Tuesday, July 2, 2019

Day 086: Intermediate Algorithm Scripting (FCC)

I like the new FCC redesign! (recolor?)
I just finished the Functional Programming section on FCC. It took a few days to get through. I get why it is useful, but dang, it is a lot to take in. Callbacks seriously gets me cross eyed. And then when you add all the (new to me) methods like forEach(), map(), filter(), reduce() etc., it is a lot to take in!

At any rate, I am now heading into the Intermediate Algorithm Scripting section of FCC. I am trying to apply the Functional Programming principles to solving these challenges, so it is taking a bit longer to work through the problems.

What really helped me learn in the past was to collect a massive sheet of notes that I may or may not refer back to, but the act of putting it somewhere seems to help me understand it better some how? Or at the very least, it is good reference material. So here it is.

Intermediate Algorithm Scripting: Diff Two Arrays
I solved something similar in Edabit, but like I said, I wanted to get more practice in with the methods am not yet familiar with. I got that I needed to concat() the strings and knew filter() was the likeliest method that would help me find the answer, but I had some help from the Internets and StackOverflow to get the conditional statement correctly with the use of ! and includes() which I am not yet familiar with, nor would it be something I would have thought to use right away. I also poked around with trying to figure out how to refactor it a bit into all arrow functions, but rather move on to the next problem after a few failed attempts.
function diffArray(arr1, arr2) {
  var filterUnique = arr1.concat(arr2).filter((elem) => {
   if (!arr1.includes(elem) || !arr2.includes(elem)) {
     return elem;
    }
  })
  return filterUnique;
}  








Monday, July 1, 2019

Day 085: Finding the Sum of Consecutive Numbers with Javascript (Easy Mode w/ Carl Gauss)

While I am still digesting all the information from the Functional Programming section in FCC, I started to poke around the Intermediate Algorithm Scripting section. Low and behold, the first challenge was to Sum All Numbers in a Range.

I know that FCC wants us to do a loop, but that's boring since' I've already done a type of problem like this at least twice in Edabit and Codewars. After solving the problem there I was able to review how other folks solved this problem and recall that a few have used a formula, so cue up Google to search around. Gauss on Arithmetic Sequences hit the spot! The site goes into length about the formula and why/how it works. But I found what I was looking for here:



Where n is the number of integers.

Or for the purpose of applying it to the problem, I will use the below simplified formula.




And below are two versions of the answer. (Equations created with CodeCogs)

function sumAll(arr) {
  let min = Math.min(...arr);
  let max = Math.max(...arr);
  return ((max - min + 1)/2)*(min + max)
}

const sumAllCodeGolf = (arr) => ((Math.max(...arr) - Math.min(...arr) + 1)/2)*(Math.min(...arr) + Math.max(...arr));

Easy peasy! I think it's still good to practice writing out the loop as well. However, I am at the point where I've done enough of these arithmetic challenges that I'm getting clued into the fact that there is likely a formula for most things. If it doesn't break anything in JS, why not use it?

Quick Retrospective

Since it is Day 85 and I am 15 days away, I figured this was in order.

I know it is not recommended to do this, but compared to other folks that started around the same time I did, including some of those with zero HTML+CSS experience, I feel like I am about a month or two behind them in terms of progress. If we're using FCC as a yardstick, they're all in and around the Data Visualization section and I am still stuck in the Algorithm and Data Structures.

However! I am aware that the working like a Japanese salaryman hours that my day job demanded ate up 2.5 weeks in May and then getting into the funk due to the stolen phone/invasion of privacy last month severely demotivated me for another 2 weeks or so. I also took a long detour into Udemy courses (which I still plan on finishing) as well so FCC is not the best yardstick really. I guess that works out to be why I am "a month behind."

We all know the reasons why you should not compare your current self with someone else. Everyone learns differently and may have other circumstances in their lives that may help or hinder progress. Someone spending time between semesters at their parents home, covering their room and board will probably have more time to learn than I would since I have that day job eating up 9+ hours of my weekday (if you add in commute time). And I am probably better off in terms of being able to dedicate time to learning than a working parent with kids (and kudos to them!).

But the reason I follow these folks is not only for the camaraderie, but because I find myself feeling pretty hopeless and demotivated and I actually feel like the comparisons actually help motivate me! What it boils down to is that they are able to dedicate a whole lot more hours then I can (whatever their circumstances) whereas I sometimes only squeak by with the minimum 1 hour a day (or less on a handful of days). It makes me want to find ways to get in more hours! In fact, this was the reason I got out of my funk from last month.

Also seeing someone else's progress is extremely gratifying to me as well. The thought of "I can get there too as long as I put in the time!" is the first thing that crosses my mind.

So as long as you are aware that this is not a race, I don't think comparisons are inherently a bad thing. There are always ways to turn it on its head and use it to your advantage.