Showing posts with label Code Newbie. Show all posts
Showing posts with label Code Newbie. Show all posts

Wednesday, August 14, 2019

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!

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.


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.


Wednesday, May 29, 2019

Day 053: BTDT Tip Calculator & Bill Splitter - using parseFloat, toFixed & building it in order to make it work!

Yesterday, I took take a short break from the bootcamp for a day to let the information sink in a bit (see active and diffuse learning). So what better time than to do my next BUILD THE DAMN THING project. It is a handy tip calculator & bill splitter that I probably spent way more time on that I should have.

See the Pen Tip Calculator/Bill Splitter by 4nn (@4nn) on CodePen.

Some Things I Learned

I guess I already knew these things, but it was more so putting it into practice and getting to experience the joys of parsing strings to numbers to strings to numbers so the formula would work.

I initially thought this would be quick and easy since I banged out the formula in the console in less than 5 mins.

parseInt(), parseFloat(), .toFixed()

Of course the console just deals with the parameters as numbers. It is a different story when you are pulling values from the DOM, which would output those numbers into a string. You can't really do math with strings!

So I became intimately familiar with the parse functions to get those strings into numbers. (Good to know when I tackle the building a calculator project)

parseInt() parses the value into an integer. I used this in the beginning since I was testing with whole numbers.
parseFloat() parses the value into the floating point number (with all the decimals and such).

Once that was all set, I later used the .toFixed() method to get the numbers into 2 decimal places.

Voila! The math actually worked with the DOM in codepen!

So I go about to add in the conditionals and error messages and such, but the conditionals did not work because it was essentially asking if the preTipBill === NaN. Why did it keep coming up as NaN even though the math worked out previously? Enter frustrationland!

My husband probably noticed my annoyance after some time which was his cue to help (of which I didn't ask for his help, but recognize that I need to get better at knowing when to ask). So he identified that I was doing too many things at a time before calling the if statement. I was assigning the DOM values to the variable and then reassigning the variables to parseFloat().toFixed() and then setting the condition statement. It looked something like this:

 let preTipBill = document.getElementById("preTipBill").value;
 preTipBill = parseFloat(preTipBill).toFixed(2);
 let tipPercent = document.getElementById("tipPercent").value;
 let splitBetween = document.getElementById("splitBetween").value;
 splitBetween = parseFloat(splitBetween).toFixed(0);

 if (preTipBill === "" || tipPercent === "" || preTipBill.length === 0 || tipPercent.length === 0) {
  ...
 }

Of course that mess was then checking the if conditionals to preTipBill === NaN which is not what I want especially when trying to reassign blank splitBetween values to 1 if the user opts not to split the bill. Anyways, once he pointed that out, I got it right away. Like, RIGHT AWAY. Rookie mistake!

  let preTipBill = document.getElementById("preTipBill").value;
  let tipPercent = document.getElementById("tipPercent").value;
  let splitBetween = document.getElementById("splitBetween").value;

  if (preTipBill === "" || tipPercent === "" || preTipBill.length === 0 || tipPercent.length === 0) {
    document.getElementById("output").innerHTML = "Please input all required amounts!";
  } else {

    preTipBill = parseFloat(preTipBill).toFixed(2);
    splitBetween = parseFloat(splitBetween).toFixed(0);

I needed to reassign the values LATER, preferably once the condition is met. Just moving the reassignments fixed the whole thing. Sheesh!

In working through all the projects in the Angela Yu Web Dev Bootcamp, the location of the reassignments were sort of laid out for you when working through the projects and it made a ton of sense at the time, of course. But it really isn't until you've been frustrated and 😬 over it for an hour that it really sinks in. The ORDER of your code matters! I found this to be a very valuable lesson.

On a side note: it's my mom's birthday this Saturday and I'll definitely be pulling out this little calculator at the end of the meal!

Here's the User Story
  • user inputs total initial bill
  • user inputs desired tip amount
  • user gets error message if initial bill and tip amounts are missing
  • display the tip subtotal
  • display the total amount
  • user can opt to split the bill, input number of people to split it with
  • display the per person initial bill
  • display the per person tip and total
  • if user does not split bill, only display the tip & final total
  • have button calculate and clear all

Saturday, May 18, 2019

Day 041: Making it Rain (Khan Academy)

Crunch time at work is nearly coming to an end (one more day on Monday), HOORAY!

On average, I worked about 65ish hours per workweek for the past 2.5 weeks. The weekends were not any better since I spent much of the time catching up to sleep or trying to de-compress from the workweek (and also doing some work on the weekends as well, bleh). Not only were the hours long, but the work is really freaking stressful and it involves a lot of literal running around, making snap decisions and solving things.

I have been so exhausted by the end of the day that it has been quite challenging dedicate much time to learning or even retaining any information when I do get to put in more than an hour/day. I admit to coming really short on some days (like 15 mins of tutorial videos before bed and passing out with my laptop by my side, oops). I do get some snatches of reviewing/reading materials on JS here and there during bits of down time at work, but I am not sure how meaningful that is when one is constantly interrupted.

Given how tired I am and how little time I have at the end of the day, the best I could manage was passively consuming videos here and there. Most of the actual coding I did was with the Khan Academy Intro to JS: Drawing & Animation challenges that they have in the course.

The course was such fun and the challenges were really cute! Really a breath of fresh air full of colors and movement at the end of a long, stressful day. Their most complex challenge in the course (and my favorite) so far has been the Make it Rain project. It starts you off simply enough and becomes a bit more complicated in each step. I probably spent about 3-4 hours spread over a few days working on it during quiet times at work or right before bed at home. By the end of the exercise, I was very surprised with all the code written that actually worked and refactored a few times. And the best part was that it all made sense to me!

Make it rain!
I remember looking at someone else's spin-off at the start of the project thinking about how it was impossible to do with my tired brain and limited time and that I should save it until after crunch time at work to be able to make sense of it. I know many people have said this before, but this was the challenge that demonstrated it to me: as a whole, it can seem monumental but when broken down into small parts, it's possible to do!

I initially shied away from KA because the content was geared more towards children and teenagers and I thought it may be too childish for me. Because after all, coding is serious business! *scoffs*


It's great for anyone, particularly those who may be struggling with some of the basic concepts. I honestly think they might have the best approach to introducing brand spanking new learners to JS. I especially like their explanation on object oriented design and object inheritance, the best I've seen yet (I actually understood it! Do also view the videos as well). The instructors teach without making assumptions about you and seem so happy and enthusiastic about it (since they're teaching to kids after all). It doesn't make you feel too bad if you may not get it 100%. I am actually planning on doing a few more of their other courses as fun little breaks here and there from the "serious" learning.