DEV Community: Mark Harless

Rigging Math.random()

Mark Harless — Sat, 15 Aug 2020 22:00:57 +0000

Math.random() returns a random decimal number between 0 and 1 (1 being exlusive). So 0, 0.5 and 0.99999 are all valid returns for this JavaScript function.

But what the hell can we do with that?

Pro tip: Scroll to the bottom where I created an NPM package to handle many JavaScript random number generation for you to use ;)

Well, here's one advanced example! What if we can pass in an array of arrays to a function containing data and the percent chance of it being selected against all of the other elements in the array? Sounds a bit confusing but let's take a look at an example array argument:

const arr = [
  ["Hoyt", 15],
  ["Kassad", 30],
  ["Silenus", 45],
  ["Weintraub", 10],
]

As you can see above, there are strings that we want to use to represent our data to be randomly selected. You can replace this with a number, another array, an object, etc. And the second element in the index is a number representing the percent chance of that array to be selected.

chance(arr) {
    const total = arr.reduce((acc, curr) => acc + curr[1], 0);
    if (total !== 100) throw new Error("sum of percentages must equal 100");

    const sorted = arr.sort((a, b) => a[1] - b[1]);

    const percent = to(100);
    let sum = 0;

    for (let j = 0; j < sorted.length; j++) {
      sum += sorted[j][1];
      if (sum >= percent) {
        return sorted[j][0]
      }
    }
  }
}

to(num) {
  return Math.round(Math.ceil(this.randomizer() * num + (num > 0 ? 1 : 0)) - 1)
  }

In the code above we've made two functions. chance() is the one we've been talking about but it also uses a function called to(). Looking at chance() the first section checks to see if the sum of the numbers in the arrays equals 100. If it's any more or any less we throw an error.

Then we create a constant called sorted which is all of the arrays sorted by the smallest percent chance of happening to largest. We also create sum and set it equal to 0.

From there we create a random percent value between 1 and 100 (inclusive) using our second function to().

Lastly, we add the percentage chance of the first element to our sum variable. We create a standard for loop to go through each array. If sum is less than percent, we repeat the loop by adding the next percent chance to sum. We repeat this until sum is equal to or greater than percent. And that, ladies and gentlemen, is how you rig JavaScript randomization.

I've created a little side project to handle various number randomization methods on npm called totally-random. It can create a random number between two numbers, a random number up to a positive number or down to a negative number, random strings (alpha, numeric and alphanumeric) of different lengths, random colors (hex, rgb, rgba, hsl and hsla), and much, much more!

It is open source so feel free to contribute if you find this package to be of any use to you :)

Sum All Primes

Mark Harless — Sun, 09 Aug 2020 16:58:13 +0000

A prime number is a whole number greater than 1 with exactly two divisors: 1 and itself. For example, 2 is a prime number because it is only divisible by 1 and 2. In contrast, 4 is not prime since it is divisible by 1, 2 and 4.

Rewrite sumPrimes so it returns the sum of all prime numbers that are less than or equal to num.

Sometimes I forget not everything needs to be solved within one block of code. If your function tries to solve more than one problem, you should consider divvying up its tasks into other functions.

This problem is actually asking us to do two things: check if the number is prime and add up all the primes numbers up to num. We can do this by using two functions. The first one is to check if the number is prime. It simply returns a boolean of true or false:

const isPrime = num => {
  for (var i = 2; i < num; i++) {
    if (num % i === 0) return false
  }
  return true;
}

isPrime() takes num as an argument. It will then run a for loop starting at 2 (because we already know 1 is a prime number). If at any point during our iteration num is divisible by i, we will return false and the function will end there. Otherwise, the number is a prime number and we return true.

This function does exactly what is asked of it: check to see if num is a prime number. It doesn't do any more or any less, however, we still have another function to write. We need to add the sum of all the prime numbers that are less than or equal to num.

const sumPrimes = num => {
  let primes = []

  for (let i = num; i != 1; i--) {
    if (isPrime(i)) primes.push(i);
  }
  return primes.reduce((acc, curr) => acc + curr)
}

You can see in this function we are using isPrime() to check if the number, well, is prime. If I were to have combined both of these functions into one it would have been pretty messy.

So, sumPrimes takes in num, then it creates an empty array which we will use to store our prime numbers. A for loop is started but if you look closely, i is instantiated to num and from there we go down until i is equal to 0. At this point the loop will end. Inside the loop we are simply checking if num is prime. If it is we add it to our array. If it isn't we do nothing and keep iterating. Our return statement looks fancy schmancy using the reduce method but I only did that to make it look impressive. All it's doing is adding up all of our primes and returning it to us. And that's it!

Like I stated in the first paragraph of this blog post, it's important to know what a problem is asking of you. If you can read between the lines and notice it's wanting you to do more than just one thing, consider if splitting it up into separate functions would be better.

Caesar's Cipher

Mark Harless — Fri, 31 Jul 2020 13:53:40 +0000

Continuing on with my FreeCodeCamp algorithms and data structures! We are given this:

One of the simplest and most widely known ciphers is a Caesar cipher, also known as a shift cipher. In a shift cipher the meanings of the letters are shifted by some set amount.

A common modern use is the ROT13 cipher, where the values of the letters are shifted by 13 places. Thus 'A' ↔ 'N', 'B' ↔ 'O', and so on.

Write a function that takes a ROT13 encoded string as input and returns a decoded string.

All letters will be uppercase. Do not transform any non-alphabetic character (i.e. spaces, punctuation), but do pass them on.

These are my favorite types of problems. Where you can easily do it in your head but difficult when it comes down to coding it.

We can start by creating an array of the alphabet, repeated twice! Why? Because all of the letters will shift 13 characters down the alphabet. If we're given the character "z" to shift, our code would not understand that it needs to go back to "a" and continue down the alphabet. Do you want to code that? I don't. So we are just going to repeat it twice to make it easier for us.

const rot13 = str => {
  let cipher = "";
  const alphabet = [..."ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ"];

  return cipher;
};

Now we have to create a for loop where we go through each character in our str, shift it 13 spaces, then add it to our cipher. Some of the tests have punctuation, though! So we'll have to determine if our loop is seeing a character in the alphabet or something else. Here is the final result:

const rot13 = str => {
  let cipher = "";
  const alphabet = [..."ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ"];

  for (let i = 0; i < str.length; i++) {
    if (/\w/.test(str[i])) {
      // checks if letter
      cipher += alphabet[alphabet.indexOf(str[i]) + 13];
    } else {
      cipher += str[i];
    }
  }

  return cipher;
};

You can see in our for loop that we use REGEX to determine if what we're seeing is a letter or not. if it's a letter, we move it down 13 spaces then add it to our cipher variable. if it's not a letter, we simply just add it to the variable.

It's that easy! I challenge you to come up with a different way of solving this algorithm!

My First NPM Package

Mark Harless — Fri, 24 Jul 2020 13:31:18 +0000

We all have our pain points when it comes to programming. Mine is using the Math function with JavaScript. It's a wonderful tool when you know what you're doing but I constantly find myself having to Google what each method means. Off the top of your head, do you know how to generate a random number between 50 and 100? I know you're not required to know these sorts of things but what if we can make it easier on us?

That's why I created totally-random! A utility class to help with random number generation in JavaScript. It's a real-life NPM package I made all by myself that you can install and use right now! Let's me show you how :)

To get started you will need to install the package to your project with the following command:

This will add a node_modules folder to your project (if you didn't have one already) and include totally-random.

Now, let's import it to our JS file:

The first line is the import statement using require. Right now, I don't know how to implement the ES6 import statement but that can be something I can add in a future release.

In the next line, we create an instance of the TotallyRandom class. You can actually see the entire class and its included methods in the repo here.

There's not much to it now but I just wanted to create a working NPM package before I deep dive into adding more methods. The included class methods are probably more than what you need from it, anyways. Let's explore some of them:

You can get a random number up to a positive number and even get a random number down to a negative number. You can also get a random percentage.

Getting a random number within a range of two numbers hasn't been easier! You can even pass an optional third number which will return an array of n randomly selected elements within the range of numbers you provided. Whoa!

You can also get random colors generated! You can see random.color() will return a random HEX value and random.color('rgb') will give you a random RGB value.

There are several more methods I'm not going to list here for the sake of length. I hope you guys find totally-random a useful tool to add to your projects to make it just a bit easier.

I will continue to work on this package by adding a more clear README, more random number methods, and maybe I can find a quirky thing or two to add just for fun. Please feel free to contribute!

Frequency Patterns

Mark Harless — Sun, 19 Jul 2020 14:56:59 +0000

Last week I had received a coding challenge from a company. Mind you, this is the furthest I've gotten in the interview process since I began my job search 5 months ago. The problem was to create a function that would return true or false if the given arguments could create a proper binary tree.

I don't know what binary trees are. I've never even heard of them. I did a quick Google search and saw a summary of what they were. I completed the problem in under an hour after I saw I passed the tests. What I didn't know, however, was there were hidden tests after I submitted my work. The company reached out the next day and told me that they would not be moving forward with me, unfortunately.

I took this is a learning experience. I realize now that since I had gone to a coding boot camp, I probably missed a lot of useful info that someone who got a CS degree didn't. Binary trees possibly being one of them. I did more research and I deduced that I need to learn algorithms and data structures. So, today, I'm going to show you something I learned with the course I'm taking: Frequency Patterns.

Many coding challenges given to developers during interviews follow a pattern. Colt Steele, the person who made the course I'm studying, has narrowed many of them down and frequency patterns are one of the most common. The frequency problem is where you have to count the number of times something shows up. For instance, the anagram challenge.

An Anagram is a word or phrase formed by rearranging the letters of a different word or phrase, typically using all the original letters exactly once. Here are some fun anagrams examples: 'Dormitory' and 'dirty room', 'schoolmaster' and 'the classroom', and 'listen' and 'silent'.

Let's create a function that returns either true or false if two words are an anagram of each other! Note: I know you can solve this by alphabetizing both words and comparing the two, but we're trying to learn a process that applies to many more problems. I'm only using an anagram as an example because it's easy and straightforward.

const anagramCheck = (str1, str2) =>

}

anagramCheck('listen', 'silent')

This is our starting point. We know listen and silent are anagrams of one another so this function should return true. We also know that a word with a length of, let's say, six characters, can never be an anagram of a word with a length of 7. The number of characters must be the same! So let's add that check:

const anagramCheck = (str1, str2) =>
  if (str1.length !== str2.length) {
    // must be same length to be valid anagram
        return false;
    }
}

anagramCheck('listen', 'silent')

Remember, there are dozens of ways to solve the same problem. The way I'll be showing you how to solve this is by creating an empty object and storing the character with the number of times it occurs in the other string — key/value pairs.

If a key/value pair exists inside of our object, we will simply increase its occurrence by one. If it doesn't exist, we will instantiate it with the value of one. We can easily do this with a for loop:

const anagramCheck = (str1, str2) => {
  if (str1.length !== str2.length) {
    // must be same length to be valid anagram
        return false;
    }

  // object used to store chars and number of occurences
  let lookup = {};

  for (let i = 0; i < str1.length; i++) {
    // if char exists, increase by 1
    // if char doesn't exist, set to 1
    lookup[str1[i]] ? (lookup[str1[i]] += 1) : (lookup[str1[i]] = 1);
  }

}

anagramCheck('listen', 'silent')

If we console.log(lookup) this is what we would get:

{
  e: 1,
  i: 1,
  l: 1,
  n: 1,
  s: 1,
  t: 1
}

These characters all appear in str1 one time only. Now we create another for loop that will be used to subtract characters from str2 from our lookup object. If at any point there is a 0 count from a character and our second loop needs us to subtract 1 from it, we return false because it wouldn't be a valid anagram. Here's what that looks like:

const anagramCheck = (str1, str2) => {
  if (str1.length !== str2.length) {
    // must be same length to be valid anagram
        return false;
    }

  // object used to store chars and number of occurences
  let lookup = {};

  for (let i = 0; i < str1.length; i++) {
    // if char exists, increase by 1
    // if char doesn't exist, set to 1
    lookup[str1[i]] ? (lookup[str1[i]] += 1) : (lookup[str1[i]] = 1);
  }

  for (let i = 0; i < str2.length; i++) {
    if (!lookup[str2[i]]) {
      // checks if char value is not 0
      return false;
    } else {
      lookup[str2[i]] -= 1;
    }
  }

  return true
}

anagramCheck('listen', 'silent')

The first if condition inside of our second loop will be false if the number is 0. 0 is a falsy value so it will return false. If it does, our function will return false. Else it subtracts 1 from our character inside our object. If it passes all of this, our two words are anagrams of one another so we return true.

I think this is a great pattern to learn since it can be applied to many different problems. The course I'm learning from can be found here. It's over 20 hours long and covers a lot of material that many people who graduated from a coding bootcamp probably don't know. Also, Udemy goes on sale very often so don't ever buy it at full price!

Roman Numeral Converter

Mark Harless — Sun, 12 Jul 2020 17:16:14 +0000

I'm continuing my quest to complete Free Code Camp's JavaScript Algorithms and Data Structures section. If you are new to coding or need a refresher, I highly suggest Free Code Camp! The lessons are short and sweet, and each of them has a challenge at the end!

It's important to note that I'm going back-and-forth between solving the problem and blogging. So what you're reading here is my thought process along the way. It won't be perfect but it's what I'm thinking.

Moving to the second algorithm:

Convert the given number into a Roman Numeral. All Roman Numeral answers should be provided in the upper-case.

And that's all I need to get started. This one is a bit more difficult than the previous. I don't know how I'm going to do it but I know I should create an object for my Roman Numerals (I think):

function convertToRoman(num) {
 const romanNumerals = {
   1: "I",
   5: "V",
   10: "X",
   50: "L",
   100: "C",
   500: "D",
   1000: "M"
 }
}

I made it a constant because it will never change. The number 10 will always and forever be equal to "X". In my head, I know that formulas never change. Therefore, always make them a constant!

Edit: I'm just now realizing that maybe I don't absolutely need an object as I stated above but I will keep it there anyway. I'm not sure what best practice is in a situation like this.

So, now we have to slowly convert num to a string. Let's create that empty string variable. This will be what we return:

function convertToRoman(num) {
  const romanNumerals = {
    1: "I",
    5: "V",
    10: "X",
    50: "L",
    100: "C",
    500: "D",
    1000: "M"
  }

  // return value
  let romanNumeral = ""
}

My thought process now is to subtract from num one-by-one and add the corresponding Roman Numeral to romanNumeral. For instance, the number 1,500 will be subtracted by 1,000. At the same time, "M" will be added to our return statement. Then 500 will be subtracted from num, and "D" will be added to our return statement. This will spit out "MD" as the Roman Numeral.

I think this can best be achieved with a while loop with if statements nested inside. It will start with 1,000 and go down (or up if you're looking at our romanNumerals object).

Note: In case it's been a while since you've used Roman Numerals, Roman Numerals can be grouped with up to three characters. This means "III" works but "IIII" doesn't (it's "IV"). This same rule applies to the bigger numbers. "XXX" is 30 but "XXXX" is not 40 ("XL")

function convertToRoman(num) {
  const romanNumerals = {
    1: "I",
    5: "V",
    10: "X",
    50: "L",
    100: "C",
    500: "D",
   1000: "M"
  }

  // return value
  let romanNumeral = ""

  while (num !== 0) {
    if (num >= 1000) {
      romanNumeral += romanNumerals[1000]
      num -= 1000
    }
  }

  return romanNumeral
}

convertToRoman(2000);
// "MM"

We got our function to return the correct Roman Numeral conversion for 2000. Great! Let's keep this going!

function convertToRoman(num) {
  const romanNumerals = {
    1: "I",
    5: "V",
    10: "X",
    50: "L",
    100: "C",
    500: "D",
   1000: "M"
  }

  // return value
  let romanNumeral = ""

  while (num !== 0) {
    if (num >= 1000) {
      romanNumeral += romanNumerals[1000]
      num -= 1000
    } else if (num >= 500) {
        romanNumeral += romanNumerals[500]
        num -= 500
    } else if (num >= 400) {
        romanNumeral += "CD"
        num -= 400
    }  
  }

  return romanNumeral
}

I'm already seeing a downfall to how we use the romanNumerals object. We can, of course, apply template literals but that's just going to make our code longer and unreadable so I've decided to remove it. I do apologize that this will be a case of draw the rest of the owl but I don't want to be typing forever!

function convertToRoman(num) {
  let romanNumeral = ""

  while (num !== 0) {
    if (num >= 1000) {
      romanNumeral += "M"
      num -= 1000
    } else if (num >= 500) {
        romanNumeral += "D"
        num -= 500
    } else if (num >= 400) {
        romanNumeral += "CD"
        num -= 400
    } else if (num >= 100) {
        romanNumeral += "C"
        num -= 100
    } else if (num >= 90) {
        romanNumeral += "XC"
        num -= 90
    } else if (num >= 50) {
        romanNumeral += "L"
        num -= 50
    } else if (num >= 40) {
        romanNumeral += "XL"
        num -= 40
    } else if (num >= 10) {
        romanNumeral += "X"
        num -= 10
    } else if (num >= 9) {
        romanNumeral += "IX"
        num -= 9
    } else if (num >= 5) {
        romanNumeral += "V"
        num -= 5
    } else if (num >= 4) {
        romanNumeral += "IV"
        num -= 4
    } else if (num >= 1) {
        romanNumeral += "I"
        num -= 1
    }
  }

  return romanNumeral
}

Strangely enough, this returns the correct Roman Numeral for every test except one 🤨. convertToRoman(3999) should return "MMMCMXCIX" but instead, it's returning "MMMDCDXCIX". This is because I have 900 returning "DCD" not "CM". This is an interesting scenario because I've always thought you can group up to 3 letters together but apparently this is a special case. It does make sense though. This is an easy fix. We just insert another if else statement immediately after the first if statement:

if (num >= 1000) {
      romanNumeral += "M"
      num -= 1000
    } else if (num >= 900) {
        romanNumeral += "CM"
        num -= 900
    }

Ta-da! This passes all of our tests! Our final result is below. I'm sure there are simpler ways to complete this challenge but that's what refactoring is for. Thank you for reading!

function convertToRoman(num) {
  let romanNumeral = ""

  while (num !== 0) {
    if (num >= 1000) {
      romanNumeral += "M"
      num -= 1000
    } else if (num >= 900) {
        romanNumeral += "CM"
        num -= 900
    } else if (num >= 500) {
        romanNumeral += "D"
        num -= 500
    } else if (num >= 400) {
        romanNumeral += "CD"
        num -= 400
    } else if (num >= 100) {
        romanNumeral += "C"
        num -= 100
    } else if (num >= 90) {
        romanNumeral += "XC"
        num -= 90
    } else if (num >= 50) {
        romanNumeral += "L"
        num -= 50
    } else if (num >= 40) {
        romanNumeral += "XL"
        num -= 40
    } else if (num >= 10) {
        romanNumeral += "X"
        num -= 10
    } else if (num >= 9) {
        romanNumeral += "IX"
        num -= 9
    } else if (num >= 5) {
        romanNumeral += "V"
        num -= 5
    } else if (num >= 4) {
        romanNumeral += "IV"
        num -= 4
    } else {
        romanNumeral += "I"
        num -= 1
    }
  }

  return romanNumeral
}

Palindrome Checker

Mark Harless — Fri, 03 Jul 2020 20:03:19 +0000

I'm going back to the basics with Free Code Camp! I believe it's a neat website for people who are interested in coding or have some experience. One of the projects found in their JavaScript and Data Structures is a Palindrome Checker.

Here is the problem:

Return true if the given string is a palindrome. Otherwise, return false.

A palindrome is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.

You'll need to remove all non-alphanumeric characters (punctuation, spaces and symbols) and turn everything into the same case (lower or upper case) in order to check for palindromes.

We'll pass strings with varying formats, such as "racecar", "RaceCar", and "race CAR" among others.

We'll also pass strings with special symbols, such as "2A3*3a2", "2A3 3a2", and "2_A3*3#A2".

And this is what we're given to work with:

function palindrome(str) {
  return true;
}

palindrome("eye");

I much prefer ES6 syntax so let's do that real quick!

const palindrome = (str) => {
  return true;
}

palindrome("eye");

The first thing I like to do when confronting a problem is reading the instructions twice (at least). Breaking it down we need to check if a string is a palindrome — ignoring punctuation, case and spacing. Right off the bat, this tells me I need to use REGEX, ugh.

Let's first tackle this problem by having the function work correctly using a single word as an argument.

const palindrome = (str) => {
  const check = str.split('').reverse().join('')

  return str === check
}

palindrome("eye");
// true

I created a constant check that stores the string argument after several string methods are performed on it. split breaks up all of the characters and puts them in an array, reverse reverses the array, and join combines the array back into a string. Then the return statement checks to see if the two variables match and spits out the appropriate boolean.

It works as expected and returns true when the argument "eye" is passed into the function. Great! But what if I passed in "Eye" with a capital "E". Surely "Eye" is not the same as "eye" so it will return false but it is still a palindrome! Let's fix that real quick.

const palindrome = (str) => {
  const string = str.toLowerCase()
  const check = string.split('').reverse().join('')

  return string === check
}

palindrome("Eye");
// true

I added a line at the top which creates the string constant. All it does is store the argument str after we have performed the toLowerCase function on it. Now, at the end of our function, we are comparing string and check (not to be confused with str) and it works perfectly.

Lastly, we should use Regular Expressions (REGEX) to match patterns with our string. We're doing this to remove everything that's not an alphanumeric character. This includes whitespaces and special characters such as !@#$%^&*().

We do this using the replace method:

const palindrome = str => {
  const string = str.toLowerCase().replace(/\W|_/g, '');
  const check = string.split('').reverse().join('');

  return string === check;
};

palindrome('0_0 (: /- :) 0-0');
// true

REGEX is a bit of a complicated topic to cover in this blog post so I'm just going to break down how I used the replace method. After turning the string into all lowercase, I'm replacing everything that's not a letter, number or underscore with ''. The first part of the REGEX is \W which finds everything that's not a letter or a number (yes, this includes whitespaces). Strangely enough, this includes all special characters except for the underscore. So, the second part of my regex is |\_. The | means or and \_ means underscore. In the end, in plain English, we're saying remove everything that is not a letter, a number or an underscore.

You can see all of my notes on REGEX here. I've also included a great online resource to test your REGEX patterns.

And that's it! REGEX is an important skill to master in JavaScript. I think it's a tough tackle because it doesn't follow traditional JavaScript syntax. I'll be back next week to keep doing more Algorithms so please smash that "like" button and hit "subscribe"!

What are JavaScript Promises Anyway?

Mark Harless — Fri, 26 Jun 2020 14:09:38 +0000

A promise in JavaScript is much like a promise in real life. It's quite a fitting name and I applaud the person who thought of it. In code, you use it to do something, typically asynchronously. When the promise is complete, either one of two things happen: you fulfill the promise or you fail to fulfill the promise.

A Promise is a constructor function, so you must use new to create one. Here's what it looks like:

const pinkyPromise = new Promise((resolve, reject) => {
  // your code here
});

You'll notice a Promise takes in a function as an argument with two parameters: resolve and reject. Obviously, you can name these parameters whatever you want. I typically use res and rej because it's easier to type.

A promise has three states: pending, fulfilled and rejected. The promise I showed you above will always be in the pending state because we didn't tell the function how to fulfill the promise.

Here's how we can fulfill a promise:

const pinkyPromise = new Promise((res, rej) => {
  if() {
    resolve("Promise was fulfilled");
  } else {
    reject("Promise was rejected");
  }
});

We added a simple if statement that tells the promise what it should do if it's resolved or rejected. We use strings here but you can pass anything as the argument.

A typical use case scenario for promises is to fetch data from an external API or any sort of asynchronous function that takes an unknown amount of time to complete. Let's say we want to get weather data from an API. What do we do after it has successfully fulfilled its promise? That is where the then method comes in:

const pinkyPromise = new Promise((res, rej) => {
  if() {
    resolve("Promise was fulfilled");
  } else {
    reject("Promise was rejected");
  }
})
.then(result => {
  console.log(result)
});

In the above example, we are telling the promise pinkyPromise to log the results to our terminal so we can read it, like weather data. The then method will only run when the promise has been resolved. The catch method is used in very much the same way as then except it only runs if it was rejected:

const pinkyPromise = new Promise((res, rej) => {
  if() {
    resolve("Promise was fulfilled");
  } else {
    reject("Promise was rejected");
  }
})
.then(result => {
  console.log(result)
})
.catch(error => {
  console.log(error)
})

You can see that, again, we are just logging what we receive back into the console but this time it's the error. Keep in mind result and error can be named whatever you want it to be and the then and catch methods can be on the same line as the closing parenthesis. I only put it on a new line to better see what we added to our promise.

And that's it! To recap, a JavaScript promise is usually used for an asynchronous task that takes an unknown amount of time to complete, like fetching for data. The promise is either resolved or rejected. If it's resolved, then the then method will run. If it's rejected, then the catch method will run.

Wild How Far We Come (Revisiting Old Challenges)

Mark Harless — Sun, 21 Jun 2020 19:19:16 +0000

About 10 months ago I started my coding boot camp. It was an immersive software engineering school that lasted 15 weeks. Each future student is given what I'd call homework we would need to pass to be accepted. This is a good idea business-wise because a school doesn't want to deal with dropouts and refunds because it's too hard for them.

I remember The Hashketball Lab being the last set of problems and I was stressed about it. I think it took me all day to figure it out. I thought it was so hard I actually blogged about it because I didn't want to forget how I did it, haha! I thought it would be a good idea to revisit this challenge but, since I dislike Ruby, use Python instead. Let's do this!

Right off the bat, I see errors with the team data that I had saved. There had to have been errors when I tried to save this file. How did I not notice? Also, the data I was given is messy, messy, messy! I'm not going to change it but leave it as is because, in the real world, I'll probably be dealing with things like this. Here is the correct data:

teams = {
    'away': {
        'team_name': 'Charlotte Hornets',
        'colors': [
            "Turquoise",
            "Purple"
        ],
        'players': [
            {
                'player_name': 'Jeff Adrien',
                'number': 4,
                'shoe': 18,
                'points': 10,
                'rebounds': 1,
                'assists': 1,
                'steals': 2,
                'blocks': 7,
                'slam_dunks': 2
            },
            {
                'player_name': 'Bismack Biyombo',
                'number': 0,
                'shoe': 16,
                'points': 12,
                'rebounds': 4,
                'assists': 7,
                'steals': 22,
                'blocks': 15,
                'slam_dunks': 10
            },
            {
                'player_name': 'DeSagna Diop',
                'number': 2,
                'shoe': 14,
                'points': 24,
                'rebounds': 12,
                'assists': 12,
                'steals': 4,
                'blocks': 5,
                'slam_dunks': 5
            },
            {
                'player_name': 'Ben Gordon',
                'number': 8,
                'shoe': 15,
                'points': 33,
                'rebounds': 3,
                'assists': 2,
                'steals': 1,
                'blocks': 1,
                'slam_dunks': 0
            },
            {
                'player_name': 'Kemba Walker',
                'number': 33,
                'shoe': 15,
                'points': 6,
                'rebounds': 12,
                'assists': 12,
                'steals': 7,
                'blocks': 5,
                'slam_dunks': 12
            }
        ]
    },
    'home': {
        'team_name': 'Brooklyn Nets',
        'colors': [
            'Black',
            'White'
        ],
        'players': [
            {
                'player_name': 'Alan Anderson',
                'number': 0,
                'shoe': 16,
                'points': 22,
                'rebounds': 12,
                'assists': 12,
                'steals': 3,
                'blocks': 1,
                'slam_dunks': 1
            },
            {
                'player_name': 'Reggie Evans',
                'number': 30,
                'shoe': 14,
                'points': 12,
                'rebounds': 12,
                'assists': 12,
                'steals': 12,
                'blocks': 12,
                'slam_dunks': 7
            },
            {
                'player_name': 'Brook Lopez',
                'number': 11,
                'shoe': 17,
                'points': 17,
                'rebounds': 19,
                'assists': 10,
                'steals': 3,
                'blocks': 1,
                'slam_dunks': 15
            },
            {
                'player_name': 'Mason Plumlee',
                'number': 1,
                'shoe': 19,
                'points': 26,
                'rebounds': 11,
                'assists': 6,
                'steals': 3,
                'blocks': 8,
                'slam_dunks': 5
            },
            {
                'player_name': 'Jason Terry',
                'number': 31,
                'shoe': 15,
                'points': 19,
                'rebounds': 2,
                'assists': 2,
                'steals': 4,
                'blocks': 11,
                'slam_dunks': 1
            }
        ]
    }
}

Build a method, num_points_scored that takes in an argument of a player's name and returns the number of points scored for that player

def num_points_scored(player_name):
    for player in teams['home']['players'] + teams['away']['players']:
        if player['player_name'] == player_name:
            return player['points']

    return "Player not found"

Build a method, shoe_size, that takes in an argument of a player's name and returns the shoe size for that player.

def shoe_size(player_name):
    for player in teams['home']['players'] + teams['away']['players']:
        if player['player_name'] == player_name:
            return player['shoe']

    return "Player not found"

Build a method, team_colors, that takes in an argument of the team name and returns an array of that team's colors.

def team_colors(team_name):
    if team_name == 'Charlotte Hornets':
        return teams["away"]['colors']
    elif team_name == 'Brooklyn Nets':
        return teams["home"]['colors']
    else:
        return 'Team not found'

Build a method, team_names, that operates on the game hash to return an array of the team names.

def team_names():
    arr = []

    arr.append(teams['away']['team_name'])
    arr.append(teams['home']['team_name'])

    return arr

Build a method, player_numbers, that takes in an argument of a team name and returns an array of the jersey numbers for that team.

def player_numbers(team_name):
    arr = []

    if team_name == 'Charlotte Hornets':
        players = teams['away']['players']

        for player in players:
            arr.append(player['number'])

        return arr
    elif team_name == 'Brooklyn Nets':
        players = teams['home']['players']

        for player in players:
            arr.append(player['number'])

        return arr
    else:
        return 'Team not found'

Build a method, player_stats, that takes in an argument of a player's name and returns a hash of that player's stats.

def player_stats(player_name):
    players = teams['home']['players'] + teams['away']['players']

    for player in players:
        if player['player_name'] == player_name:
            return player 

    return "Player not found"

What are Optionals in Swift Anyway?

Mark Harless — Sun, 14 Jun 2020 22:44:50 +0000

I have taken it upon myself to learn Swift, the programming language created by Apple for use on their devices. As if learning JavaScript, React, Python, Flask and Django isn't enough! I'll admit, I didn't know much about the language before I started it. I've seen sample code or screenshots posted online and they look so... confusing. It turns out, they are confusing but many of the code is autogenerated for you when you drag-and-drop an element into your file. Yep, I didn't know it was partly a visual language where you get to point and click on a simulated device to interact with it. Amazing!

I'm only a few hours into my course but I've already learned so much. Some things I like, somethings I don't like. One of those things I don't like is that you aren't able to reassign a variable to a different data type. What do I mean by this? If I were to create a variable called myName and set it to a some string, I can't reassign myName's value to, let's say, an integer. Or a float, double, array, etc. It can forever only be assigned to a string type. I hate it!

To top it off, you can't assign a variable the value of nil and reassign it to a primitive data type later. Lame! I know! This is problematic for me because I'm used to doing this all the time. In React, before any fetching occurs, I set my states to null. They can then easily be reassign to a string, array, object, etc. This isn't possible in Swift.

So what are the different methods to best combat optionals? There's if let, force unwrapping and optional chaining; but, what is recommended by many Swift developers is the guard let statement. This is the one I want to talk about. First, let's consider this single line of code:

var optionalNumber: Int?

What it's saying is to create a variable called optionalNumber and assign it the Int? property. This means that it will either be an integer or a nil value. Obviously, it will never be both, but as I said previously, if it's one data type, it can never be the other.

Guard let statements are great because it provides an early return in a function should an optional be equal to nil.

func doubleNumber(num: Int?) {

  guard let num = num else { return }

  print("The doubled number is \(num * 2)")

}

So what we're doing in this function is returning double the number that we pass in as an argument. If it's nil, however, it will exit the function early and not reach the print statement.

The second line of code is our guard let statement that catches an nil values. It does that by creating a temporary variable with the same name as number. If number is not nil it gets skipped. If it is, it will run the code within its curly brackets. Remember, the brackets are on one line but you can use it in a multiline to add more lines of code before the return statement.

And that's all there is to guard let and optionals! If you're interested in learning more about optionals, I suggest you take a look at the other ways you can use them which I provided above.

New App: Share Your Gender Pronoun in Your Bio

Mark Harless — Sat, 06 Jun 2020 14:16:38 +0000

It takes me awhile to create an app. From the initial thought, the planning, the coding and then the deployment. My simple full-stack Flask app took almost one month to complete! Granted, I was learning Python and Flask along the way, it still took awhile.

So I decided to challenge myself and create an app all in one day. What I came up with was Pronounly, an easy way for people to share there gender pronoun in their bio. Users just have to enter pronounly.co/ and append their pronoun. So if you identify as a 'she', you would use pronounyl.co/she.

The app was created using React and deployed on Heroku. Instead of paying for Heroku's SSL certification I decided to try out Cloudflare — which is amazing might I add! It also handles my redirects much more intuitively than Google Domains, I believe.

Design is also a big part of my background. While I'm not a designer by any means, I am a photographer who's very nitpicky with how things look. I wanted to go with a more "natural" and brutalist design. No colors and no animations. Nothing crazy, nothing fancy.

Since I wanted the app to look simple, I also wanted the code to be simple since it was going to be a public repo for my resume. Here's what my App.js renders:

<Router>
      <Pronounly />
      <Switch>
        <Route exact path='/'>
          <About />
          <Importance />
          <Share />
        </Route>

        <Route exact path='/he'>
          <Pronoun pronoun='he' />
          <Example pronoun='he' />
          <Importance />
          <Share />
        </Route>

        <Route exact path='/she'>
          <Pronoun pronoun='she' />
          <Example pronoun='she' />
          <Importance />
          <Share />
        </Route>

        <Route exact path='/they'>
          <Pronoun pronoun='they' />
          <Example pronoun='they' />
          <Importance />
          <Share />
        </Route>

        <Route path='*'>
          {/* 404 */}
          <Contribute />
          <Importance />
          <Share />
        </Route>
      </Switch>

      <Footer />
    </Router>

I know it's a very simple website and that it has been done before, but I'm very happy with how it turned out and how I did it all in one day. I think doing more of these "one-day challenges" will help me become a more proficient coder as it forces me to prioritize important parts of my app. But right now, I'm working on another React app using data I scraped from IMDb to play Hangman!

Scraping 127,000 Lines with Python

Mark Harless — Sun, 31 May 2020 13:41:00 +0000

I don't know what it is about web scraping that I find so fascinating. Maybe because there's a clear goal and many different ways to do something. I find myself refactoring my code even though the web scrapers works and I already have the data I needed!

Right now, I'm working on a React app based on the classic Hangman game. In this version of Hangman, I'll be using IMDb's 1,000 highest rated movies for people to guess. Users will be given the length of the title (obviously), release year, genre and summary. To shake things up a little, I've also scraped IMDb's top 1,000 rated movie stars. Users will be given the length of the movie star's name, the movie they're most famous for, and 10 portraits (I think I'll only be showing the largest four images). There will be a 50/50 chance of either a movie or movie star to pop up.

Some challenges I'm working through in my head:

Some of the movie's summaries include the title, for instance, Joker (2019). I'll need to create a function to censor it out.
How will mobile users type? There isn't going to be a form or any input field (I think). So how do I get the keyboard to show?
Can I easily implement a hangman SVG character or should I do something else?
If I show four portraits for, let's say, Tom Hardy, I think it would be best to implement a horizontal scroll for mobile users so they can still see what they're guessing. How can I make it work on the desktop?

For the movie star scraper, I used Beautiful Soup to gather the names and what movie they are famous for. On IMDb, viewing their images would create a modal popup. This was difficult to extract images from so what I ended up using was Contextual Web Search API. It's simple and free to use 10,000 times a month. Great! I only need to use 1000.

I collected the first 10 results for each movie star. The reason why I'm showing four portraits is because some of them aren't actual pictures of the actor or actress. For examaple, here's one of Lynn Shelton who's popular from the movie Humpday. And other images where the movie star is with a group of people.

Here's the scraper code:

import json
import requests
from time import sleep
from bs4 import BeautifulSoup


class Star:
    def __init__(self, name, famous_for, portraits):
        self.name = name
        self.famous_for = famous_for
        self.portraits = portraits

    def __str__(self):
        return f"{self.name}, {self.famous_for}"

    def to_json(self):
        # converts to JSON
        return json.dumps(self, default=lambda o: o.__dict__, indent=4)


page_num = 1
star_list = []


while page_num <= 1001:
    page = requests.get(
        f"https://www.imdb.com/search/name/?gender=male,female&start={page_num}&ref_=rlm").text

    soup = BeautifulSoup(page, 'html.parser')
    stars = soup.find_all('div', class_='lister-item')

    for star in stars:
        name = star.h3.a.text.strip()
        famous_for = star.find_all('a')[2].text.strip()

        url = "https://contextualwebsearch-websearch-v1.p.rapidapi.com/api/Search/ImageSearchAPI"
        querystring = {"autoCorrect": "false", "pageNumber": "1",
                       "pageSize": "10", "q": f"{name}", "safeSearch": "true"}
        headers = {
            'x-rapidapi-host': "contextualwebsearch-websearch-v1.p.rapidapi.com",
            'x-rapidapi-key': "1b193d24f4msh7e6cc900a3729c9p1a4fbbjsnb60afe89cf7b"
        }
        response = requests.request(
            "GET", url, headers=headers, params=querystring)
        sleep(1)

        try:
            portraits = json.loads(response.text)['value']
        except Exception as e:
            print(e)

        star = Star(name, famous_for, portraits)
        star_list.append(star.to_json())
        print(len(star_list))

    page_num += 50

f = open('stars.json', 'w')

for star in star_list:
    f.writelines(star)
    f.writelines(',')

f.close()

Once it's done scraping, it exports it to a JSON file in the same directory. How cool! The one thing I couldn't figure out was how to put all of that data into a single array. So what I ended up doing, for now, is select the 1,000 dictionaries and hit the bracket symbol to surround them in brackets. If anyone knows how I can get it to work automatically, please let me know!

Lastly, here's the data :)