A Look Back

Wow. Time flies when you’re having fun. Especially when you’re learning, debugging, and building web applications. It’s been a while since I’ve posted on this blog because of the craziness of part time classes and personal projects. There is so much to talk about, so much to cover, and so much more learn. Instead of a giant wall of text, I’d like to condense the experience down into bullet points. Little bagel bites of wisdom; things that I have come to realize from the past year.

 

1. Expect to drink from a firehose of knowledge, and be prepared to handle it.

Do not underestimate the amount of work required to go through learning to code. There are a million times where you will have to pick up a new library or framework. You might have a week on the job to get familiar with a completely new programming language. Sometimes, you will only have a day to take in a new tool.

There are ways to prepare yourself mentally and physically. Start slow, learning deeply, and keep building. The most educational experiences I’ve had so far are from building and debugging from scratch. It is also helpful to “simulate” a fire-hosing environment every now and then, tasking yourself with the goal of diving into a foreign language or framework with nothing held back. All in all, the process is challenging – but you come out a little smarter, wiser, and well equipped to tackle the hardships of professional development.

2. Learn how to *learn* at a rapid pace.

Yes, learning to code comfortably in the language is important. Problem solving and debugging are also critical. But in a field where new tools pop up like fireworks, it’s a daunting task to navigate the expanse for the tools you need. Web development is a rapidly growing field, especially with the growth of screen based tech such as VR and Augmented Reality. Other exciting areas include AI, machine learning, and the Internet of Things. It’s an endless amount of topics.

As you continue coding, remember that the journey has just begun. Remember that you have so much more to learn, and this will always be the case. Throughout the coding journey, you’ve had to trek through massive amounts of information and utilize them in such a way to create compelling programs. This is a skill. Don’t forget that. You have the newly acquired ability to pick up very technical knowledge. Use it, abuse it, and keep improving at it.

3. You will never “know” all of the numerous frameworks, libraries, and languages.

Just accept defeat now. Make Google an extension of your brain. Utilize Stack Overflow when necessary. Ask questions, provide answers, and be active in an ever-growing community. Feed the coding hive mind. It is not a weakness to reach out for help. This is why pair programming is so effective at times, and also why team based projects are so valuable to a programmer’s growth.

Remember, as you transfer knowledge to other people, you are reinforcing that knowledge. Keep your mind open, just as you were during those hours learning code, and you will go far.

4. Be prepared to continue learning, debugging, and creating projects.

If your primary goal for learning to code is to snatch a dev job, then you should just stop right now and save yourself the trouble. Coding requires a raw dedication and love for the craft. You don’t have to be head over heels for it, but the passion and grit needs to be there. Coding should not be another quick “in” to score a job in a rapidly growing industry. If you step in with that mindset, you will be mentally torn apart by the end of it.

Don’t forget to keep coding. There’s no definitive finishing point – it’s a lifelong commitment. A commitment to continuous problem solving, learning, and building. Don’t stop coding just because your initial portfolio is done, continue exploring frameworks, libraries, and even other fields in programming. Be active in the community and build new projects. Practice writing clean code, and refactor old code. There should always be that part of your brain that needs to be scratched.

 

That’s all for today. I’m going to continue building projects, getting better at my craft, and hopefully pick up some new skills, techniques, and practices as the journey continues!

Advertisements

Higher Order Functions in Javascript: .forEach()

Higher order functions. What a fancy name right? In Javascript, functions are considered “first class citizens” because they can be passed as arguments to other functions, and can also be returned from a function. That’s a lot of functions. The power of functional programming comes into play when we explore some of the Underscore.JS methods. The most popular ones include forEach.(), map.(), filter.(), and reduce.(). These are extremely powerful and useful methods for traversing and manipulating arrays. Out of all of them, reduce is probably the most complicated one – and also the most powerful one. We’ll save that for another day.

Let’s take a look at forEach.

var each = function (collection, callback) {
   if(Array.isArray(collection)){
     for(var i=0; i < collection.length; i++) {
     callback(collection[i]);
   }
 }
 else if(typeof collection === 'object') {
   for(var j = 0, key = Object.keys(collection); i < keys.length; i++) {
   callback(collection[key]);
   }
  }
}

Here is a bare bones implementation of the forEach method. Note that we did not include index as a parameter, though it can be refactored quite easily to include it. We use a forEach when we want a projection function to act upon each element in the array. However, note that forEach does not return an array. If you do not need to directly change the elements in the array, but still want a function to act upon each element in the array, then forEach would be a good choice.

The dizzy world of Nested Loops

We want to write a function that will take in a value and create a diamond with a size based on of the number in the function argument.

In order to approach this problem, we should break it down into smaller pieces.

  *  
 *** 
***** <-- This will be n, the argument that we will input into the function.
 *** 
  *  
Additionally, n will also dictate the total vertical 
number of stars.

Since n represents the line size of the middle of the diamond, we should 
model the rest of our logic based on this assumption. In other words,
the beginning of our diamond should increase in size per line until 
the line reaches size n. 

Conversely, the bottom half of our diamond should decrease in size,
starting at line n. It should stop when the length of our line reaches one.

Let's take a look at a diamond with a bigger n:

We need to represent this in numbers, in order to identify any potential 
patterns that can be used to create our algorithm. 

     *      > i begins at one in the loop
    ***     > i = i + 2, n increments by 2
   *****    > i += 2
  *******   > i += 2
 *********  > i += 2
*********** > maximum length for diamond reached
 *********  > i = i - 2, n decrements by 2
  *******   > i -= 2
   *****    > i -= 2
    ***     > i -= 2
     *      > i reaches one, loop should end

Now we need to craft our loops to create this pattern. Let's go over the
basics of nested loops. If we had one loop printing out a line of stars,
it might look something like this:

var printStarLine = function(starNumber){
    var stars = '';
    for (var i = 0; i < starNumber; i++){
    stars += '*';
  }
    return stars;
}

Now if we called this function with an argument of 11, it would print:
'***********'. Great! Unfortunately, we need to print out a vertical line
of stars that will dictate the total like this:

*
*
*
*
*
*
*
*
*
*
*

The rule of nested loops is that if we have a loop inside of another loop, 
then the parent loop will no longer print across, as it needs to enter the
inner loop every time it runs. In this case, the parent loop will create
a vertical pattern. In our case, every time the loop adds a star, it also
needs to jump into our nested loop to do additional tasks.

Knowing this, it becomes obvious that we need to account for the spacing
between the stars, in order to form a diamond shaped pattern. Let's map out 
the potential spacing requirements in order to find some kind of pattern 
we can utilize to create our algorithm.

Since n is 11, we can assume that every vertical and horizontal space
will be filled with stars if no spacing restraints are put in place.

//if n is 11
//for (var i = 1; i <= n; i+= 2)
//  for (var j = 0; j < (n - i) / 2; j++)


//i begins at 1. We print one star. We move into the second for loop.
//This for loop will keep looping until its base condition is met, at
//which point we will go back up to the top loop.

//inside our second for loop, we add the spaces before our star.
//we use j  5 >> stars is i = 1
||||***    --> 4 >> i = i + 2.  
|||*****   --> 3
||*******  --> 2
|********* --> 1
***********
|********* --> 1
||*******  --> 2
|||*****   --> 3
||||***    --> 4
|||||*     --> 5

This pattern continues, as we fill in the leading spaces before the diamond.
|||||*||||| --> Now all that's left to do is fill in the 
||||***||||     with spaces that come after the stars. 
|||*****|||   
||*******||  
|*********| 
***********
|*********| 
||*******||  
|||*****|||   
||||***||||    
|||||*|||||

Javascript Bytes (7): Number of seconds till midnight

We want to make a function that takes in two integers as arguments and returns the amount of seconds left in the day.

 

function secondsTillMidnight(hour, minute) {

var minToSec = minute * 60;
var hoursToSec = hour * 60 * 60;
var midnight = 60 * 60 * 24;
console.log(midnight);

return midnight – (minToSec + hoursToSec);

}

secondsTillMidnight(9, 21);

Javascript Bytes (7): Max of three

Here we create a function that takes in three number arguments, and then we tell the function to return the biggest of the three numbers.

 

function maxOfThree(intOne, intTwo, intThree) {

if (intOne > intTwo && intOne > intThree) {
return intOne;
} else if (intTwo > intThree) {
return intTwo;
} else {
return intThree;
}

}

console.log(maxOfThree(5,4,10));

Javascript Bytes (7): Comparing last digits

We make a function to find the last digit of two non-negative integers, and compare to see if the last two digits match. If they do, the function returns true, else, the function returns false.

function lastDigit(intOne, intTwo) {

//we needed to convert to string in order to use the slice method
//to find the last substring of our number
var lastDigitOne = intOne.toString().slice(-1);
var lastDigitTwo = intTwo.toString().slice(-1);

if (lastDigitOne === lastDigitTwo) {
return true;
} else {
return false;
}
}

lastDigit(22, 32);

Javascript Bytes (6): Asking Politely

Create a function that checks to see if the argument string contains a question mark. If it does, make sure that the question ends with a “please?”. In all other scenarios, simply return the original argument.

 

function askPolitely(question) {

//find the last char of the string
var lastChar = question.slice(-1);

if (lastChar === “?”) {
if (question.indexOf(“please”) > -1) {
return question;

} else if (question.indexOf(“please”) === -1) {
return question.substring(0, question.length – 1) + ” please?”;
}

} else {
return question;
}

}

console.log(askPolitely(“May I ask a question?”));

Javascript Bytes (5): First letter of name

Let’s check to see if the first letter of the string is “S” or “s”, then control the flow of the function accordingly.

 

function doYouPlayTheTheremin(name) {
var nameArray = name.split(“”);

for (var i = 0; i < nameArray.length; i++) {
if (nameArray[i] === “S” || nameArray[i] === “s”) {

return name + ” plays the Theremin!”;

} else {

return name + ” does not play the Theremin!”;

}

}

return nameArray;

}

console.log(doYouPlayTheTheremin(“Senny”));

Javascript Bytes (4): A Vending Machine

//function for vending machine
var vendingMachine = (function() {
//make items inside the vending machine
//return this.label is telling js to return only the label property of the object instead
//of the entire thing
var items = [
{ id: ‘001’, label: “Snickers”, price: 1.00, toString: function() {return this.label } },
{ id: ‘002’, label: “M&Ms”, price: 1.50, toString: function() {return this.label } },
{ id: ‘003’, label: “Amstel Light”, price: 3.00, function() {return this.label} }

];

//return the float to a fixed decimal point
var toMoney = function(value) {
return ‘$’ + value.toFixed(2);

}

//a function to vend the item
var vend = function(money, id) {
//verify money is greater than or equal to the price of the cheapest item
//verify the item exists
var item = findItem(id);
var msg, item_or_refund;
//check docu for toFixed()
//function orientated programming
if (toMoney(money) >= toMoney(item.price)) {
msg = ‘Vended ‘ + item.label + ‘ for ‘ + toMoney(item.price).toString() + ‘.’;
item_or_refund = item;

} else {
msg = “Sorry, not enough funds!”;
item_or_refund = toMoney(money).toString();
}

console.log(msg);
return item_or_refund;
};

//takes an id and return the result of an item’s filter – go over each item, does your id match the one we want? toss it till we find a match

//function to find the right item
var findItem = function(id){
return items.filter(function(item) {
console.log(item.id);
return id.toString() === item.id.toString();

})[0];

}

//shows all the items
var menu = function() {
items.forEach(function(item) {
console.log(item.id + “: ” + item.label);

});
};

//exits main function, vends the item
//must return all the subfunctions
return {
vend: vend,
menu: menu,
toMoney: toMoney
};
})();

console.log(vendingMachine.vend(1.00,’002′));

console.log(vendingMachine.vend(3.00,’003′));