DEV Community: Nat's Tech Notes

Day 5/30 Days of CodeWars: JavaScript Edition

Nat's Tech Notes — Tue, 05 Jul 2022 01:14:35 +0000

I'm back with more CodeWars katas! I took a break to focus on other things for a while, but now my mind is refreshed and ready to solve some more coding challenges.

CodeWars challenges solved
1) Sum of two lowest positive integers (7 kyu)
2) Ones and Zeros (7 kyu)
3) Shortest Word (7 kyu)

Kata 1: Sum of two lowest positive integers

Instructions

Create a function that returns the sum of the two lowest positive numbers given an array of minimum 4 positive integers. No floats or non-positive integers will be passed.

For example, when an array is passed like [19, 5, 42, 2, 77], the output should be 7.

[10, 343445353, 3453445, 3453545353453] should return 3453455.

Breaking down the problem with P.R.E.P.

Parameters
The function expects one parameter: an array of 4 or more
positive integers.

Returns
The function should return one value: the sum of the 2 lowest numbers in the array.

Examples
The following test cases are provided by CodeWars.

[5, 8, 12, 19, 22], 13
[15, 28, 4, 2, 43], 6
[3, 87, 45, 12, 7], 1
[23, 71, 33, 82, 1], 24
[52, 76, 14, 12, 4], 16

The array is the parameter passed to the function and the number is the integer that should be returned from the function.

Pseudo code
See pseudo code section for each solution

Solution 1: Sorting the array

Pseudo code

1) Create a new array with sorted numbers from smallest to largest.
2) Return the sum of the first two numbers in the array.

Solution

function sumTwoSmallestNumbers(numbers) {  
  const sortedNums = numbers.sort((a, b) => a - b);
  return sortedNums[0] + sortedNums[1];
}

Notes

The .sort() array method - as the name suggests - sorts the elements of the array and returns the sorted array. It can receive an optional comparison function - like in the solution above - to sort the array in a specific manner. In this solution, passing it the comparison function of a - b will sort the numbers from lowest value to highest value.

Solution 2: Using array destructuring

This solution is similar to the one above but uses a different method of selecting the numbers inside the array called array destructuring. When working with arrays, it can be a very useful method to work with the elements inside the array.

function sumTwoSmallestNumbers(numbers) {  
  const [a, b] = numbers.sort((a, b) => a - b);
  return a + b;
}

Notes

Instead of declaring a variable storing the complete sorted array, a new array is declared holding only two values: a and b, which will automatically hold the values of the first two numbers in the sorted array.

Solution 3: One-liner

The following solution combines the two lines of code from solution 1 into a single line of code.

function sumTwoSmallestNumbers(numbers) {  
  return numbers.sort((a, b) => a - b)[0] + numbers[1];
}

Notes

The .sort() array method does not actually make a copy of the array but mutates the original array. So instead of storing the sorted array in a new variable like in solution 1, the elements can be selected directly from the array passed to the argument once it has been sorted.

Kata 2: Ones and Zeros

Instructions

Given an array of ones and zeroes, convert the equivalent binary value to an integer.

Eg: [0, 0, 0, 1] is treated as 0001 which is the binary representation of 1.

Examples:

Testing: [0, 0, 0, 1] ==> 1
Testing: [0, 0, 1, 0] ==> 2
Testing: [0, 1, 0, 1] ==> 5
Testing: [1, 0, 0, 1] ==> 9
Testing: [0, 0, 1, 0] ==> 2
Testing: [0, 1, 1, 0] ==> 6
Testing: [1, 1, 1, 1] ==> 15
Testing: [1, 0, 1, 1] ==> 11

However, the arrays can have varying lengths, not just limited to 4.

Breaking down the problem with P.R.E.P.

Parameters
The function expects one parameter: an array of ones and zeroes of any given length.

Returns
The function should return one value: the integer representation of the binary inside the array.

Examples
All test cases provided can be found in the instructions.

Pseudo code
See pseudo code section for each solution

Solution 1: Parsing a binary string

Pseudo code

1) Convert array to string.
2) Convert the string to an integer by parsing it.
3) Return the integer.

Solution

const binaryArrayToNumber = arr => parseInt(arr.join(''), 2);

Notes

1) Unlike the solutions from kata 1, all the solutions in this kata use the ES6 arrow function syntax.

2) The .join() array method is used to convert the array into a string. It concatenates the array elements into a string using either commas to separate the array values inside the string (default) or by using the separator specified inside the parenthesis. In this case all the numbers are joined together without a comma or any spaces between the numbers.

3) The parseInt() function receives two parameters: the string to parse and the radix that will be used for parsing - in our case 2 for binary.

Solution 2: Reducing the value with math

Pseudo code

1) Start with a sum (accumulator) value of 0.
2) Multiple the accumulator by 2 and add 1 each iteration of the loop.
3) Return the accumulated value.

Solution

const binaryArrayToNumber = arr => {
  return arr.reduce((acc, cur) => acc * 2 + cur, 0);
}

Notes

1) The .reduce() array method is used to "loop over" an array, executing a callback function on each element of the array. The callback function has access to both the current element in the array and the previous value, which is an accumulation of all the executed calculations combined (often called the accumulator). This sum or accumulator value can be passed a default value, which is specified after the comma (in this case the default value is 0).

2) Since the .()reduce method essentially loops over each item in the array, it takes more time to execute than the first solution, which has the same execution time regardless of the array length. While the difference in time will be rather small because of how fast execution time is nowadays, it is still something to take into account, especially when dealing with longer arrays. Solutions that can operate in constant time - meaning independent of the array length - are more favorable than solutions that take more time depending on array length.

No third solution for this kata will be provided. There are technically other ways to solve this challenge, but they are much more difficult to understand and/or have significant downsides, which make them less desirable as a solution.

Kata 3: Shortest Word

Instructions

Simple, given a string of words, return the length of the shortest word(s).

String will never be empty and you do not need to account for different data types.

Breaking down the problem with P.R.E.P.

Parameters
The function expects one parameter: a string of words.

Returns
The function should return one value: the length of the shortest word in the string.

Examples
The following test cases are provided by CodeWars.

("bitcoin take over the world maybe who knows perhaps"), 3
("turns out random test cases are easier than writing basic ones"), 3
("Let's travel abroad shall we"), 2

The string of words between the parenthesis is the string passed to the function, followed by the number that should be returned from the function.

Pseudo code
See pseudo code section for each solution

Solution 1: Using a for loop

Pseudo code

1) Create an array of the words contained in the string.
2) Declare a new variable with a value of the first word's length.
3) Loop over each word in the array. 
4) Check if word's length is smaller than the value of the variable.
5) If it is, set the word's length as the new value of the variable.
6) Return the variable's value.

Solution

function findShort(s){
  const arr = s.split(' ');
  let shortest = arr[0].length;
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].length < shortest) {
      shortest = arr[i].length;
    }
  }
  return shortest;
}

Notes

The .split() array method is used to convert the string into an array of words. The string is split into substrings each time a space is encountered, which is not included in the substrings.

Solution 2: Sorting the words by word length

This solution uses a very similar approach as solution 3 of kata 1, except with one extra step (turning the string into an array) and the sorting is done based on word length.

Solution

function findShort(s){
  return s.split(' ')
          .sort((a, b) => a.length - b.length)[0].length;
}

Notes

Just like in the 3rd solution of kata 1, the first element in the array is selected once the array has been sorted. We then get the length of that word since we don't want to return the word itself, but its length.

Solution 3: Finding the min in an array of word lengths

Pseudo code

1) Create an array of the words contained in the string.
2) Create another array containing the length of each word.
3) Find the lowest number in that array.
4) Return it.

Solution

function findShort(s){
  return Math.min(...s.split(' ').map(word => word.length));
}

Notes

1) The .map() array method is used to create a new array by looping over the original array and executing a function on each element inside the array. An arrow function is used in this solution, which can be read as for each word in the array, return the length of the word.

2) The Math.min() function receives numbers as its parameter and returns the number with the lowest value out of those numbers. The numbers passed to it have to be separated by a comma and cannot be contained inside an array.

3) The spread operator (...array) is used to turn the array of numbers into numbers that can be passed to the Math.min() function.

What solution did you implement?
What solution did you find the most elegant?
What solution did you have trouble understanding?

Let me know, I'd love to hear from you!

I hope you found this article helpful.

Connect with me on ...
Twitter
GitHub

Rainbow Drops Background Animation [No JS]

Nat's Tech Notes — Wed, 29 Jun 2022 21:31:45 +0000

I've been playing around with pure CSS/no JS background animations, inspired by all the beautiful creations that can be found on CodePen.

Today I made a rainbow drops background animation that I'm really proud of. It was also my first time using Haml and SCSS - or any HTML/CSS preprocessors for that matter - so I learned a lot while making this (and had a ton of fun!).

Hope you enjoy!

Connect with me
CodePen
Twitter
GitHub

Day 4/30 Days of CodeWars: JavaScript Edition

Nat's Tech Notes — Thu, 16 Jun 2022 03:35:14 +0000

CodeWars challenges solved
1) Highest and Lowest (7 kyu)
2) Sum of the first nth term of Series (7 kyu)
3) Remove the minimum (7 kyu)

Kata 1: Highest and Lowest

Instructions

In this little assignment you are given a string of space separated numbers, and have to return the highest and lowest number.

Examples

highAndLow("1 2 3 4 5");  // return "5 1"
highAndLow("1 2 -3 4 5"); // return "5 -3"
highAndLow("1 9 3 4 -5"); // return "9 -5"

Notes

All numbers are valid Int32, no need to validate them.
There will always be at least one number in the input string.
Output string must be two numbers separated by a single space, and highest number is first.

Breaking down the problem with P.R.E.P.

Parameters
The function expects one parameter: a string of one or more valid, space separated numbers.

Returns
The function should return one value: a string with the highest number, followed by a single space and ending with the lowest number.

Examples
The following test cases are provided by CodeWars.

("8 3 -5 42 -1 0 0 -9 4 7 4 -4"), "42 -9"
("1 2 3"), "3 1"

The string of numbers between the parentheses are the numbers passed to the function, followed by the string of numbers that should be returned from the function.

Pseudo code
See pseudo code section for each solution

Solution 1: Looping over the numbers

Pseudo code

1) Turn the string of numbers into an array of numbers.
2) Declare variable 'highest' and set it to the first number.
3) Declare a variable 'lowest' and set it to the first number.
4) Loop over the array starting at index 1.
5) Set 'highest' to the current number in the loop if it's higher.
6) Set 'lowest' the current number in the loop if it's lower.
7) Return a string of highest and lowest with a space in between.

Solution

function highAndLow(numbers){
  const arr = numbers.split(' ').map(Number);
  let highest = arr[0];
  let lowest = arr[0];
  for (let i = 1; i < arr.length; i++) {
    if (arr[i] > highest) highest = arr[i];
    if (arr[i] < lowest) lowest = arr[i];
  }
  return highest + ' ' + lowest;
}

Notes

1) The .split() string method splits a string into substrings and returns an array of those substrings. The splitting is done based on the parameter provided when calling the method - in this case a single space signifying it should be split whenever a single space is encountered.

2) The .map() array method is used in combination with the Number object to convert the substrings returned from the .split() method into actual numbers (instead of strings containing numbers). This is important to avoid errors when we do the comparisons inside the for loop.

3) When declaring the highest and lowest variables, we use the let keyword, since their values will change. Both variables are initialized with a default value of whatever number is first in the array. This is done using the bracket notation - arr[0].

4) Unlike most loops when iterating over an array, the loop starts at index 1 instead of index 0 since we just want to compare if any values besides the first number in the array are higher or lower than the current highest and lowest value. We loop until the end of the array and increment the index by 1 each iteration. This is fairly standard procedure in cases like these.

5) Since only one action/line of code is executed for each if statement, the {} can be omitted.

6) Because of type coercion in JavaScript, the highest variable is converted to a string when the ' ' is added to it and it remains a string when the lowest variable is added.

Solution 2: Sorting the numbers

Pseudo code

1) Turn the string of numbers into an array of numbers.
2) Sort the array of numbers from lowest to highest.
3) Return a string with the last and first numbers of the array.

Solution

function highAndLow(numbers){
  const sortedNums = numbers.split(' ').sort((a, b) => a - b);
  return [sortedNums[sortedNums.length - 1], sortedNums[0]].join(' ');
}

Notes

1) The .sort() array method loops over an array, sorts its values and returns the sorted array. In this case, it is passed a callback function that compares two numbers - a and b - and sorts them accordingly. So if b is smaller than a, the b value will be pushed to the left of the a value until all values have been sorted correctly.

2) Inside the return statement, a new array is created containing the last number in the sortedNums array (sortedNums[sortedNums - 1]) and the first number (sortedNums[0]). That array is then converted into a string using the .join() array method, which similar to the .split() method receives a parameter signifying how the array should be joined into a string.

Solution 3: Extracting the max and min number

Pseudo code

1) Turn the string of numbers into an array of numbers.
2) Get the max (highest) number out of all the numbers.
3) Get the min (lowest) number out of all the numbers.
4) Return a string containing the highest and lowest numbers.

Solution

function highAndLow(numbers){
  const numArr = numbers.split(' ');
  return `${Math.max(...numArr)} ${Math.min(...numArr)}`;
}

Notes

1) A template literal is returned containing two expressions calculating the largest and smallest number in numArr. Expressions and variables inside template literals are denoted with the ${code} syntax.

2) The Math.max() and Math.min() functions are used to return the largest and smallest numbers respectively from a list of numbers passed as parameters.

3) The spread operator (...) has many use cases, but in this case is used to turn the array of numbers into individual arguments that are passed to the Math.max() and Math.min() functions.

Kata 2: Sum of the first nth term of Series

Instructions

Your task is to write a function which returns the sum of the following series up to nth term (parameter).

Series: 1 + 1/4 + 1/7 + 1/10 + 1/13 + 1/16 +...

Rules:

You need to round the answer to 2 decimal places and return it as String.
If the given value is 0 then it should return 0.00
You will only be given Natural Numbers as arguments.

Examples:(Input --> Output)

1 --> 1 --> "1.00"
2 --> 1 + 1/4 --> "1.25"
5 --> 1 + 1/4 + 1/7 + 1/10 + 1/13 --> "1.57"

Breaking down the problem with P.R.E.P.

Parameters
The function expects one parameter: a natural number representing the amount of numbers/fractions that should be added to the total sum.

Returns
The function should return one value: a string containing a number.

The number inside the string should be 0.00 if the argument the function is called with is 0. Otherwise, it should be a number rounded up to two decimal places.

Examples
The following test cases are provided by CodeWars. These do not include the ones mentioned in the instructions above.

(3), "1.39"
(4), "1.49"

The first number represents the nth number passed to the function as an argument, followed by the string that should be returned from the function.

Pseudo code
See pseudo code section for each solution

Solution 1: Looping n times to add to the sum

Pseudo code

1) Declare a variable 'sum' with a default value of 0.
2) Loop n amount of times to add the calculation to the sum.
3) Return the sum.

Solution

function SeriesSum(n) {
   let sum = 0;
   for (let i = 0; i < n; i++) {
     sum += 1 / (3 * i + 1);
   }
   return sum.toFixed(2);
}

Notes

1) Each loop, a fraction is added to the sum value, which is calculated by multiplying the current index by 3 and then adding 1 to that. So the first iteration the fraction would be 1/1 since 3 * 0 = 0 + 1 = 1, followed by 1/4 since 3 * 1 = 3 + 1 = 4 and so forth. However, if n is 0, the loop won't iterate since i must be smaller than n for the loop to execute and 0 is not smaller than 0.

2) The .toFixed() method is used to format the number to its correct amount of decimals, in this case 2.

Solution 2: Reducing an array of n length to its sum

Pseudo code

1) Create an array of n items.
2) Loop over the array.
3) Each iteration, add the calculation to the sum value.
4) Return the sum.

Solution

function SeriesSum(n) {
   return [...Array(n)].reduce((sum, curr, i) 
       => sum + 1 / (3 * i + 1), 0).toFixed(2);
}

Notes

1) The Array object is used in combination with [] and the spread syntax (seen in solution 3 of kata 1) to create an array holding n amount of undefined values. The number of items the array should contain is passed to the object as a parameter.

2) The .reduce() array method is then used to loop over the newly created array and execute a reducer callback function. The callback function can receive 4 parameters: the sum, also referred to as the accumulator or previous value, the current value, a.k.a. the value in the current iteration of the loop, the index and the array object which can access the array itself. Not all parameters need to be used - and in fact often times only the first two are - but they do always occur in the same order. Since we need access to the index parameter, the 2nd parameter is also mentioned, even though it is not actually used.

Solution 3: Recursively calculating the sum

Pseudo code

1) Return the formatted sum if the recursive base case is reached.
2) Otherwise return the recursive function and sum calculation.

Solution

function SeriesSum(n, sum = 0) {
   return n === 0 
     ? sum.toFixed(2) 
     : SeriesSum(n - 1, sum += 1 / (3 * n - 2));
}

Notes

1) A conditional ternary operator is an alternative to an if else statement. It executes the code after the ? if the condition specified is met and the code after the : it's not met.

2) A recursive function is used to calculate the sum. Recursion can be a rather hard concept to grasp. Essentially, a recursive function is a function that calls itself inside of itself. Since this basically creates a loop, a recursive function always needs a base case that specifies when the function should stop calling itself. The recursive function in this example first calls itself with the n value. Each subsequent iteration, it subtracts 1 from n until the base case is reached, in this case until n reaches 0. It then stops calling itself, exiting the loop and returns a value, the formatted sum value.

Kata 3: Remove the minimum

Instructions

The museum of incredible dull things wants to get rid of some exhibitions. Miriam, the interior architect, comes up with a plan to remove the most boring exhibitions. She gives them a rating, and then removes the one with the lowest rating.

However, just as she finished rating all exhibitions, she's off to an important fair, so she asks you to write a program that tells her the ratings of the items after one removed the lowest one. Fair enough.

Task
Given an array of integers, remove the smallest value. Do not mutate the original array/list. If there are multiple elements with the same value, remove the one with a lower index. If you get an empty array/list, return an empty array/list.

Don't change the order of the elements that are left.

Examples

* Input: [1,2,3,4,5], output= [2,3,4,5]
* Input: [5,3,2,1,4], output = [5,3,2,4]
* Input: [2,2,1,2,1], output = [2,2,2,1]

Breaking down the problem with P.R.E.P.

Parameters
The function expects one parameter: an array of integers.

Returns
The function should return one value: a new array of integers that does not contain (the first instance of) the lowest value in the original array.

Examples
The test cases provided by CodeWars are the same ones mentioned in the examples above in the instructions.

Pseudo code
See pseudo code section for each solution

Solution 1: Pushing numbers except smallest into a new array

Pseudo code

1) Find the index of the smallest number.
2) Create a new variable holding an empty array.
3) Loop over the array of numbers provided as an argument.
4) Push the number to the new array if its index isn't the index 
   of the smallest number.
5) Return the new array.

Solution

function removeSmallest(numbers) {
  const smallestIndex = numbers.indexOf(Math.min(...numbers));
  const newArray = [];
  numbers.forEach((number, i) => {
    if (i !== smallestIndex) newArray.push(number);
  });
  return newArray;
}

Notes

1) The .indexOf() method returns the first index at which the element specified within the method can be found within the array. It returns -1 if the element is not found.

2) The .forEach array method loops over a given array and executes a function on each of its elements.

3) The .push() array method adds an element to the end of the given array. It is used inside the .forEach() loop to add the number of the current iteration inside the loop to the new array if its index does not match the index of the (first) lowest number in the original array.

Solution 2: Filtering out the smallest number by index

Pseudo code

1) Find the index of the smallest number.
2) Return a new array containing all elements except the (first) 
   smallest number.

Solution

function removeSmallest(numbers) {
  const smallestIndex = numbers.indexOf(Math.min(...numbers));
  return numbers.filter((num, i) => i !== smallestIndex);
}

Notes

The .filter() array method returns a new array containing all elements that fulfill the condition specified within its callback function.

Solution 3: Slicing out the smallest number by index

Pseudo code

1) Find the index of the smallest number.
2) Return a new array containing all elements before and after the 
   (first) smallest number.

Solution

function removeSmallest(numbers) {
  const smallestIndex = numbers.indexOf(Math.min(...numbers));
  return [...numbers.slice(0, smallestIndex), 
         ...numbers.slice(smallestIndex + 1)]
}

Notes

The .slice() array method returns a new array containing a part - or slice - of the original array without modifying the original array. It receives two parameters: the index at which it should start copying and the first index that should be excluded from the copy.

What solution did you implement?
What solution did you find the most elegant?
What solution did you have trouble understanding?

Let me know, I'd love to hear from you!

I hope you found this article helpful.

Connect with me on ...
Twitter
GitHub

Day 3/30 Days of CodeWars: JavaScript Edition

Nat's Tech Notes — Mon, 06 Jun 2022 17:35:29 +0000

CodeWars challenges solved
1) Grasshopper - Check for factor (8 kyu)
2) Double Char (8 kyu)
3) Remove exclamation marks (8 kyu)

Kata 1: Grasshopper - Check for factor

Instructions

This function should test if the factor is a factor of base. Return true if it is a factor or false if it is not.

Factors are numbers you can multiply together to get another number.

2 and 3 are factors of 6 because: 2 * 3 = 6

You can find a factor by dividing numbers. If the remainder is 0 then the number is a factor.
You can use the mod operator (%) in most languages to check for a remainder

For example 2 is not a factor of 7 because: 7 % 2 = 1

Note: base is a non-negative number, factor is a positive number.

Breaking down the problem with P.R.E.P.

Parameters
The function expects two parameters: two numbers, one of which is the base number and one that might or might not be the factor number.

Returns
The function should return a Boolean value: true or false.

If the base parameter can be divided by the factor parameter without returning a decimal number, it should return true.
Otherwise, it should return false.

Examples
The following test cases are provided by CodeWars.

(10,2), true
(63,7), true
(2450,5), true
(24612,3), true
(9,2), false
(653,7), false
(2453,5), false
(24617,3), false

The numbers between the parenthesis are the base and factor arguments passed to the function, followed by the value that should be returned from the function.

Pseudo code
See pseudo code section for each solution

Solution 1: Checking if quotient is an integer

Pseudo code

1) Check if dividing base by factor returns an integer.
2) If it does, return true.
3) Else, return false.

Solution

function checkForFactor (base, factor) {
    if (Number.isInteger(base / factor)) {
        return true;
    } else {
        return false;
    }
}

Notes:

1) The modulo/remainder (%) operator mentioned in the instructions can be a bit hard to understand for beginners. So instead of checking for the remainder of the division, we check if the quotient - a.k.a. the result of the division - is an integer using the Number.isInteger() method.

2) As shown in the next solution, using if/else statements like this is actually unnecessary since the condition itself already evaluates to true or false. However, it's not uncommon for beginners to write it out like this, since it's easy to read and understand the code.

Solution 2: Short-hand of solution 1

Pseudo code

1) Check the quotient of base divided by the factor.
2) Evaluate if the quotient is an integer.
3) Return the result of that evaluation.

Solution

function checkForFactor (base, factor) {
    return Number.isInteger(base / factor);
}

Notes:

As mentioned in solution 1, there is actually no need to use if/else statements just to return true or false values. The condition specified inside the if statement itself evaluates to true or false so when we return the condition itself, we actually return the result of evaluating that condition.

Solution 3: Conditional return with modulo operator

Pseudo code

1) Check the remainder of base divided by the factor.
2) Evaluate if the remainder is (strictly) equal to 0.
3) Return the result of that evaluation.

Solution

function checkForFactor (base, factor) {
    return base % factor === 0;
}

Notes:

1) The modulo or remainder operator returns the remainder of the first number divided by the second number. For example in 23 % 3, 23 cannot be evenly divided by 3, but 21 can (3 * 7) and 23 - 21 = 2.

2) If the remainder is 0, that means the base can evenly be divided by the factor, meaning the factor parameter is an actual factor (and should therefor return true).

Kata 2: Double Char

Instructions

Given a string, you have to return a string in which each character (case-sensitive) is repeated once.

Examples (Input -> Output):

* "String"      -> "SSttrriinngg"
* "Hello World" -> "HHeelllloo  WWoorrlldd"
* "1234!_ "     -> "11223344!!__  "

Good Luck!

Breaking down the problem with P.R.E.P.

Parameters
The function expects one parameter: a string.

Returns
The function should return one value: a string where each character in the string appears twice in a row.

Examples
The following test cases are provided by CodeWars.

("abcd"), "aabbccdd"
("Adidas"), "AAddiiddaass"
("1337"), "11333377"
("illuminati"), "iilllluummiinnaattii"
("123456"), "112233445566"
("%^&*("), "%%^^&&**(("

The string passed to the function as an argument is found between the parenthesis, followed by the string that should be returned from the function.

Pseudo code
See pseudo code section for each solution

Solution 1: Using a for loop

Pseudo code

1) Create a variable initialized as an empty string.
2) Loop over all the characters in the string.
3) Add the character to the string variable twice.
4) Return the string variable.

Solution

function doubleChar(str) {
    let doubleString = '';
    for (let i = 0; i < str.length; i++) {
      doubleString += str[i] + str[i]
    }
    return doubleString;
}

Notes:

1) Strings, just like arrays, start at index 0 so to avoid off-by-one errors, we also start the loop at index 0.

2) Each iteration of the loop, the doubleString variable is set to the current value of doubleString and the character currently being iterated over in the loop is added to that twice. This is done with the help of the addition assignment operator (+=).

3) This solution is somewhat similar Day 1, kata 1, solution 1.

Solution 2: String to array back to string

Pseudo code

1) Turn string into array.
2) Loop over array.
3) Create new array with each character appearing twice.
4) Turn array back into string.

Solution

function doubleChar(str) {
    return str.split('')
              .map(char => char.repeat(2))
              .join('');
}

Notes:

1) The .split() string method splits a string into substrings and returns an array of those substrings. It takes a parameter that specifies how the string should be split. In our case the empty string parameter indicates it should split each character into its own substring.

2) The .map() array method executes a function on each element in the array and returns a new array with the results of calling that function on each element.

3) The .repeat() string method takes a number as its parameter, concatenates the string the method was called on the amount of times specified in that parameter and then returns that as a new string.

4) The .join() array method is pretty much the opposite of the .split() string method and - as the name suggest - joins elements of an array into a new string. It takes a parameter specifying how the array elements should be joined, in our case the empty string signifying each character should be joined without any white-space or other characters in between.

Solution 3: Using regular expressions

Pseudo code

1) Replace each character by the character twice.
2) Return the result of replacing all characters.

Solution

function doubleChar(str) {
    return str.replace(/(.)/g, '$1$1');
}

Notes:

1) The .replace() string method replaces the characters, text or patterns specified in the first parameter by the text, characters or patterns in the second parameter.

2) Regular expressions are used in strings to find, match or replace certain patterns inside the string. They always consist of / / with the pattern specified in between.

3) Capture groups are used here to not just find the matching pattern, but remember it. A pattern in a capture group is surrounded by () and can also be accessed using the $ symbol, followed by the number of the capture group - in this case 1 since there is only 1 capture group in the regex.

4) The . inside the capture group is known as a wildcard character and can match any character except for line terminators such as \n which indicates a new line.

5) The /g flag stands for global, If this flag wasn't used, the regex would only match to the first character and replace it, but not replace any subsequent characters. The global flag ensures it matches with ALL characters it can match to, in this case any characters in the string.

Kata 3: Remove exclamation marks

Instructions

Write function RemoveExclamationMarks which removes all exclamation marks from a given string.

Breaking down the problem with P.R.E.P.

Parameters
The function expects one parameter: a string.

Returns
The function should return one value: a string containing no exclamation marks.

Examples
The following test cases are provided by CodeWars.

("Hello World!"), "Hello World"

The string between the parenthesis is the argument passed to the function, followed by the string that should be returned from the function.

Pseudo code
No pseudo code for this kata

This coding challenge is fairly similar to the previous kata with some minor differences, so the solutions will be fairly similar, with some minor changes (hence why there won't be any pseudo code either). I'll be focusing mostly on the changes between these two kata.

Solution 1: Using a for loop

function removeExclamationMarks(s) {
    let newString = '';
    for (let i = 0; i < s.length; i++) {
      if (s[i] !== '!') {
        newString += s[i]
      }
    }
    return newString;
}

Notes:

Instead of adding each character twice to our newString variable like in kata 2 solution 1, we check if the character in the current iteration is an exclamation mark. If it's not, we add the character to the newString variable. If it is, it wil essentially skip this iteration and continue to the next one.

Solution 2: String to array back to string

function removeExclamationMarks (s) {
    return s.split('').filter(char => char !== '!').join('');
}

Notes:

Instead of using the .map() array method like in kata 2 solution 2, we are using the .filter() array method. It takes a callback function which specifies how the array should be filtered - in this case any character that is not an exclamation mark. It returns a new array with all elements that fulfill the condition specified inside the callback function.

Solution 3: Using regular expressions

function removeExclamationMarks(s) {
    return s.replace(/!/g, '');
}

Notes:

This is basically a simplified version of kata 2 solution 3 and it replaces any exclamation marks with an empty string, meaning exclamations marks just end up being "cut out" of the string.

What solution did you implement?
What solution did you find the most elegant?
What solution did you have trouble understanding?

Let me know, I'd love to hear from you!

I hope you found this article helpful.

Connect with me on ...
Twitter
GitHub

Day 2/30 Days of CodeWars: JavaScript Edition

Nat's Tech Notes — Wed, 01 Jun 2022 20:36:01 +0000

CodeWars challenges solved
1) Grasshopper - Personalized Message (8 kyu)
2) Parse nice int from char problem (8 kyu)
3) Correct the mistakes of the character recognition software (8 kyu)

Kata 1: Grasshopper - Personalized Message

Instructions

Create a function that gives a personalized greeting. This function takes two parameters: name and owner.

Use conditionals to return the proper message:

name equals owner => 'Hello boss'
otherwise => 'Hello guest'

Breaking down the problem

Parameters

As mentioned in the instructions above, the function expects two parameters: name and owner.

Based on the test cases, both are expected to be (valid) strings, though in actuality they might not be.

Returns
The function should return one value: a string.

What string should be returned depends on whether or not the name and owner match (see instructions above).

Examples
The following test cases are provided by CodeWars.

('Daniel', 'Daniel'), 'Hello boss'
('Greg', 'Daniel'), 'Hello guest'

The first two values are the arguments that will be passed to the function, followed by the message that should be returned.

This coding challenge is fairly similar to the third kata solved yesterday with some minor differences. So instead of reiterating through the same solutions mentioned in that kata, I'll be providing some variations to those solutions as well as diving deeper into error handling.

Solution 1: Basic implementations without error handling

The following implementations assume that the arguments passed to the function are valid strings (like in the test cases provided by CodeWars).

Variant 1: using if/else statements

function greet (name, owner) {
  if (name === owner) {
    return "Hello boss";
  } else {
    return "Hello guest";
  }
}

This is the easiest and probably most common implementation.

Variant 2: using an if statement only

function greet (name, owner) {
  if (name === owner) return "Hello boss";
  return "Hello guest";
}

This is a similar approach to variant 1, with 2 main differences:

1) The if statement is written on 1 line and the {} after the statement's condition have been omitted. This is valid code for one-line conditional statements, though it is usually recommended to add the {}. It is also important to note that (most) JavaScript linters will add the {} when formatting code if they have been omitted.

2) There is no else statement. It has been replaced by another return outside of the if statement. This works because the function can only execute 1 return so if it does not execute the code inside the if statement, it will return the string specified outside of the if statement.

Variant 3: using a conditional ternary operator

function greet (name, owner) {
  return name === owner ? "Hello boss" : "Hello guest";
}

Variant 4: using template literal syntax

function greet (name, owner) {
  return `Hello ${name === owner ? 'boss' : 'guest'}`;
}

Template literals are useful to create complicated and multi-line strings that can include single and double quotes, as well as variables and expressions (like the ternary operator above). It also eliminates the need to concatenate strings using the + operator.

Solution 2: Handling input that is not a string

The implementations from solution 1 pass the test cases provided by CodeWars, but they also pass when the arguments provided are numbers, null, undefined, objects and arrays for examples. This is likely not behavior we would want in a real life scenario, so let's add some code to handle cases where one or both of the arguments passed are not strings.

Examples
The following test cases have been added by me:

(2, 5), 'Invalid input'
({}, []), 'Invalid input'
(null, 'undefined'), 'Invalid input'
('null', 'undefined'), 'Hello guest'

Variant 1: using if/else if statements

function greet (name, owner) {
  const isValidName = typeof name === "string";
  const isValidOwner = typeof owner === "string";
  const isValidArgs = isValidName && isValidOwner;

  if (!isValidArgs) return "Invalid input";
  else if (isValidArgs && name == owner) return "Hello boss";
  return "Hello guest";
}

Notes:

1) The typeof operator is used to verify that the name and owner arguments are strings.

2) It is common practice to start variables storing a Boolean value with 'is'.

3) The 3 first lines can easily be reworked into 1 line. I just chose to split them up for this article to make it a little easier to follow along with what is going on.

4) The if statement uses the logical not (!) operator to return the string "Invalid input" if isValidArgs is false (meaning one or both of the arguments are not strings).

Variant 2: using a nested ternary operator

function greet (name, owner) {
  // variable declarations (deleted for legibility) 

  return !isValidParams 
    ? "Invalid input" 
    : isValidParams && name === owner 
      ? "Hello boss"
      : "Hello guest"
}

Solution 3: Handling invalid input/strings

Besides arguments that aren't strings, there is another (edge) case that we want to consider: invalid strings such as empty strings and strings containing only white-space. Depending on the real-world context our code is implemented in, the rules on what is considered an invalid string might be less or more strict, but for the purposes of this exercise, we'll assume that both names (first, last and full) and usernames are allowed.

Test cases and solution

('nats_tech_notes', 'nats_tech_notes'), 'Hello boss'
('@Nat_A_Number', '12345'), 'Hello guest'
('', ''), 'Invalid input'
(' ', ' '), 'Invalid input'
(3, 5), 'Invalid input'

The test cases above were added by me.

function greet (name, owner) {
  const regex = /^[\S]\w/;
  const isValidName = typeof name == "string" 
                      && regex.test(name);
  const isValidOwner = typeof owner == "string"
                       && regex.test(owner);
  const isValidArgs = isValidName && isValidOwner;

  // deleted code: same code from solution 2
}

Notes:

1) To test the validity of the string, regular expressions are used.

2) The regular expression starts with the ^ assertion symbol, signifying the beginning of the string, followed by the \S character class to indicate no white-space. This ensures the string cannot start with or contain only white-space. It also contains the \w character class to verify the string contains at least 1 alphanumerical character. This combination allows for full/multiple names to be used which will contain white-space between each name.

Kata 2: Parse nice int from char problem

Instructions

You ask a small girl,"How old are you?" She always says, "x years old", where x is a random number between 0 and 9.

Write a program that returns the girl's age (0-9) as an integer.

Assume the test input string is always a valid string. For example, the test input may be "1 year old" or "5 years old". The first character in the string is always a number.

Breaking down the problem

Parameters
The function expects 1 parameter: a string.

The instructions specify the string will always be a valid string and the first character in the string will always be the age.

Returns

The function should return 1 value: a number, more specifically an integer.

Examples

The following test cases are provided by CodeWars.

("4 years old"), 4

The first value is the string that will be passed to the function, followed by the integer that should be returned.

Solution 1: using parseInt()

function getAge(inputString){
  return parseInt(inputString);
}

Notes:

The parseInt() function receives a string and returns an integer number if a number is present inside the string. If no number is present, it returns NaN.

Solution 2: using Number()

function getAge(inputString){
  return Number(inputString[0]);
}

Notes:

1) The Number() function can convert values that are not numbers into numbers.

2) Just like arrays, the bracket notation can be used with strings to select a character at the specified index (string[index]).

Solution 3: using regex and the unary operator

function getAge(inputString){
  const numChar = inputString.match(/\d/);
  return +numChar;

  // alternatively:
  // return +inputString.match(/\d/);
}

Notes:

1) Instead of the .test() function used in kata 1, solution 3, we use the .match() function to extract the part of the string that matches the regex pattern.

2) The \d character class is used to match digits.

3) The unary plus operator (+), much like the Number() function, converts values into numbers, if they aren't already numbers.

Kata 3: Correct the mistakes of the character recognition software

Instructions

When documents (especially pretty old ones written with a typewriter), are digitized character recognition software often make mistakes.

Your task is correct the errors in the digitized text. You only have to handle the following mistakes:

S is misinterpreted as 5
O is misinterpreted as 0
I is misinterpreted as 1

The test cases contain numbers only by mistake.

Breaking down the problem

Parameters
The function receives one parameter: a string.

The string contains both letters and numbers.

Returns
The function should return one value: a string containing only letters.

Examples
The following test cases are provided by CodeWars.

"L0ND0N" => "LONDON"
"DUBL1N" => "DUBLIN"
"51NGAP0RE" => "SINGAPORE"
"BUDAPE5T" => "BUDAPEST"
PAR15" => "PARIS"

Solution 1: Creating a new string from an array

function correct(string) {
  const arr = [];
  string.split('').forEach(char => {
    if (char === '5') { arr.push('S'); } 
    else if (char === '0') { arr.push('O'); } 
    else if (char === '1') { arr.push('I'); } 
    else { arr.push(char); }
  });
  return arr.join('');
}

Notes:

1) A new empty array is initiated so letters can be pushed into it.

2) The original string is then turned into an array using the .split() method so we can loop over the array using the .forEach array method.

3) Inside the loop, we verify if the current character is one of the specified numbers and if it is, the correct letter is pushed into the array. If the character is already a letter, the letter is pushed into the array.

4) We then turn the array back into a string using the .join() method.

Solution 2: Replacing each character separately

function correct(string) {
  return string.replace(/5/g, 'S')
               .replace(/0/g, 'O')
               .replace(/1/g, 'I');
}

Notes:

1) The .replace() method, as the name suggests, replaces the text/pattern specified in its first parameter with the text/pattern specified in the second parameter and returns a new string.

2) The method is called 3 times on the same object (string) with the help of method chaining.

3) The /g flag at the end of the regular expression stands for global and is used to match not just the first occurrence, but all occurrences in the string.

Solution 3: Replacing all characters at once

function correct(string) {
  const chars = {
    '5': 'S', 
    '0': 'O', 
    '1': 'I'
  };
  return string.replace(/[501]/g, key => chars[key]);
}

Notes:

1) First an object is created to hold the incorrect number characters and their replacements.

2) The .replace() method is then used to replace all incorrect characters at once instead of one by one. To achieve this, a function is provided as the second parameter that grabs the correct replacement from the object.

What solution did you implement?
What solution did you find the most elegant?
What solution did you have trouble understanding?

Let me know, I'd love to hear from you!

I hope you found this article helpful.

Connect with me on ...
Twitter
GitHub

Day 1/30 Days of CodeWars: JavaScript Edition

Nat's Tech Notes — Mon, 30 May 2022 08:25:52 +0000

CodeWars challenges solved
1) Sum of positive (8 kyu)
2) Counting sheep (8 kyu)
3) Keep up the hoop (8 kyu)

Kata 1: Sum of positive

Instructions

You get an array of numbers, return the sum of all of the positives ones. Note: if there is nothing to sum, the sum is default to 0.

Examples

[1,-4,7,12] => 1 + 7 + 12 = 20
[] => 0

Breaking down the problem with P.R.E.P.

Parameters
The function expects one parameter: an array of numbers.

The given array of numbers can ...
1) be empty 
2) contain only positive numbers 
3) contain only negative numbers 
4) contain a combination of both

Returns
The function should return one value: a number.

The function should return 0 if ...
1) the array is empty
2) the array only contains negative numbers

The function should return a positive number if 
there is at least 1 positive number inside the array

Examples
The following test cases are provided by CodeWars.

[1,2,3,4,5], 15
[1,-2,3,4,5], 13
[], 0
[-1,-2,-3,-4,-5],0
[-1,2,3,4,-5], 9

The number following the array is the value/sum that should be returned.

Pseudo code
See pseudo code section for each solution

Solution 1: Using a for loop

Pseudo code

1) Declare a 'sum' variable.
2) Loop over the given array.
3) Check if the current number in the loop is positive.
4) If it is, add that number to the current value of 'sum'.
5) Return the 'sum' variable

JavaScript code

function positiveSum(arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] > 0) {
      sum += arr[i];
    }
  }
  return sum;
}

Notes

1) The sum variable is declared with a default value of 0 to ensure that it returns 0 if the array is empty or does not contain any positive numbers.

2) The loop starts at index 0 instead of 1 - just like an array - and continues to loop as long as the loop index is smaller than the array length to ensure no off-by-one errors occur.

3) The bracket notation - arr[1] - is used to select the element in the array at the current loop index (so if the loop is at index 0, it selects the element in the array at index 0, meaning the first item in the array).

4) The += operator is an addition assignment operator and is shorthand for variable = variable + value (in this case sum = sum + arr[i]).

Solution 2: Using the filter() and reduce() array methods

Pseudo code

1) Create a new array containing only positive numbers.
2) Loop over the new array.
3) Sum up all values in the new array.
4) Return the 'sum' variable.

JavaScript code

function positiveSum(arr) {
  return arr.filter(num => num > 0)                   
            .reduce((sum, curr) => sum + curr, 0);     
}

Notes

1) Both the filter() and reduce() array methods are used to loop over arrays and receive a callback function as its parameter.

2) The filter() callback function tests each element for a specified condition (like the if statement in solution 1) and the method creates a new array with all the elements that passed that test.

3) The reduce() method returns a single value. The callback function specifies a calculation (like adding or subtracting) or action (like concatenation) to perform on each element, followed by an initial value (in this case 0). Each iteration, the previous (or initial) value of that calculation/action is passed to the current iteration until a single value remains.

4) Both of these methods do not make any changes to the original array.

This is the solution I submitted for this challenge. In my opinion, it is an elegant solution that doesn't require a lot of code, but is still much easier to read and understand than the next solution.

Solution 3: Using the reduce() array method only

This implementation combines the approaches of solution 1 and solution 2 into a single line of code inside the function, though it was spread over 2 lines in this article to avoid having a horizontal scroll bar in the code block below.

JavaScript code

function positiveSum(arr) {
  return arr.reduce((sum, curr) => 
    curr > 0 ? sum + curr : sum, 0);  
}

Notes

1) Similar to solution 1, we loop over all the elements in the given array, except using the reduce() array method instead of a for loop.

2) The if statement from solution 1 is replaced by a conditional ternary operator to check if the number is positive. If it is, it should return the value of the sum and add the current number to it. If it isn't a positive number, it should just return the value of the sum for that iteration.

Kata 2: Counting sheep

Instructions

Consider an array/list of sheep where some sheep may be missing from their place. We need a function that counts the number of sheep present in the array (true means present).

Example

[true,  true,  true,  false,
  true,  true,  true,  true ,
  true,  false, true,  false,
  true,  false, false, true ,
  true,  true,  true,  true ,
  false, false, true,  true]

The correct answer would be 17.

Hint: Don't forget to check for bad values like null/undefined

Breaking down the problem with P.R.E.P.

Parameters
The function expects one parameter: an array of values.

The given array of numbers can ...
1) be empty 
2) contain only true values
3) contain only falsy values (like false, null, undefined)
4) contain a combination of both

Returns
The function should return one value: a number.

The function should return 0 if ...
1) the array is empty
2) the array only contains falsy values

The function should return a positive number if 
there is at least 1 sheep present (true) inside the array

Examples
The test case in this challenge is the same as the example given in the instructions above.

Pseudo code
See pseudo code section for each solution

Solution 1: Using a for loop

This problem is fairly similar to the problem in kata 1 and will have a similar solution, except for a few minor tweaks.

Pseudo code

1) Declare a 'count' variable.
2) Loop over the given array.
3) Check if the current value in the loop is TRUE.
4) If it is, add 1 to the current value of 'count'.
5) Return the 'count' variable

JavaScript code

function countSheeps(arrayOfSheep) {
  let count = 0;
  for (let i = 0; i < arrayOfSheep.length; i++) {
    if (arrayOfSheep[i]) {
      count++;
    }
  }
  return count;
}

Notes

1) Often times, code newbies will write if (condition === true), which isn't inherently wrong, but is in fact unnecessary. In this case arrayOfSheep[i] will evaluate to true if the value is true (or truthy) and to false if the value is falsy.

2) The increment operator (++) is used to add 1 to our counter of sheep present.

Solution 2: Using a forEach loop

The code from solution 1 can reduced to just 3 lines inside of the function using a forEach loop instead of a for loop and combining it with the conditional ternary operator seen in solution 3 of kata 1.

JavaScript code

function countSheeps(arrayOfSheep) {
  let count = 0;
  arrayOfSheep.forEach(sheep => sheep ? count++ : count);
  return count;
}

Notes

1) The forEach loop executes the code specified in the callback function on each element in the array.

2) Unlike the filter() and reduce() array methods, the forEach() array method returns undefined, unless something is explicitly returned inside the callback function.

3) The forEach loop is a great alternative to a for loop when looping over an array. It is less prone to off-by-one mistakes since it simply loops over every item in the array without us having to define the amount of times it should iterate like we do in a for loop.

Solution 3: Using the filter() array method and length property

Pseudo code

1) Create a new array containing only TRUE values.
2) Return the length of that array.

JavaScript code

function countSheeps(arrayOfSheep) {
  return arrayOfSheep.filter(sheep => sheep).length;
}

Notes

1) Like kata 1, we use the filter() array method to create a new array, this time containing only the values of the sheep that are present in the array.

2) Then we simply use the length property to count the number of values in the newly created array.

This is the solution I submitted for this kata. It is only 1 line of code, but is still easy to read and understand.

Kata 3: Keep up the hoop

Instructions

Alex just got a new hula hoop, he loves it but feels discouraged because his little brother is better than him.

Write a program where Alex can input (n) how many times the hoop goes round and it will return him an encouraging message :)

If Alex gets 10 or more hoops, return the string "Great, now move on to tricks".
If he doesn't get 10 hoops, return the string "Keep at it until you get it".

Breaking down the problem with P.R.E.P.

Parameters
The function expects one parameter: a number.

The number can be 0 or greater than 0, but should not be a
negative number.

Returns
The function should return one value: a string (message).

The function should return "Great, now move on to tricks" if
the number is greater than or equal to 10.

The function should return "Keep at it until you get it" if
the number is smaller than 10.

Examples
The following test cases are provided by CodeWars.

3 => "Keep at it until you get it" 
11 => "Great, now move on to tricks"

Pseudo code
No pseudo code for this solution since it's been pretty much provided in the parameters and returns sections above.

Solution 1: Using an if/else statement

function hoopCount (n) {
  if (n >= 10) {
    return "Great, now move on to tricks";
  } else {
    return "Keep at it until you get it";
  }
}

Solution 2: Using a conditional ternary operator

function hoopCount (n) {
  return n >= 10 
    ? "Great, now move on to tricks" 
    : "Keep at it until you get it";
}

Notes

It is not uncommon to see the code inside conditional ternary operators broken up into multiple lines like the code block above. This helps with legibility since the condition is one 1 line, followed by the code to be executed if it evaluates to true and lastly the code to be executed it evaluates to false.

This is the solution I submitted for this challenge. I'm personally a big fan of ternary operators. I know some people find them hard to read, but for me, they're often easier to read then if/else statements (unless you have a lot of statements and/or they are nested).

Solution 3: Adding error handlers

The first 2 solutions don't execute any code if the input given is invalid (a negative number or not a number at all). This was not a requirement to pass the test cases in the challenge, but a nice added extra.

function hoopCount (n) {
  if (n >= 10) {
    return "Great, now move on to tricks";
  } else if (n < 10 && n >= 0) {
    return "Keep at it until you get it";
  } else {
    return "Invalid input"
  }
}

What solution did you implement?
What solution did you find the most elegant?
What solution did you have trouble understanding?

Let me know, I'd love to hear from you!

I hope you found this article helpful.

Connect with me on ...
Twitter
GitHub

Becoming a JavaScript Code Warrior

Nat's Tech Notes — Fri, 27 May 2022 20:46:54 +0000

Today I'm starting my journey to becoming a JavaScript Code Warrior on CodeWars.

For the next 30 days I will be solving 3 coding challenges, or kata, a day, as well as writing 3 possible solutions for each kata solved. The first solution will be the simplest and most readable, followed by an intermediate one and ending with the most complex or advanced solution, which will often be a one-liner. It should go without saying, but all solutions will be written in JavaScript.

Each day, I'll write a post discussing the kata of the day where I break down the problems using the P.R.E.P. technique. P.R.E.P. stands for Parameters, Returns, Examples and Pseudo Code and is an effective technique to use when solving coding challenges, especially for beginners who struggle with this. Of course I will also provide the 3 solutions mentioned above, with details on each of the implementations.

Important note:
I debated very heavily on the ethics of writing these posts, since I am aware they can be used for cheating purposes, which is against CodeWars' Code of Conduct - rightfully so. In fact, the Code of Conduct also discourages sharing solutions on GitHub, since it makes it easier for Code Warriors to look for a solution rather than putting in the work to complete the challenge themselves.

However, while I understand their very valid concern, my posts will be focusing more on the process of solving the challenges and different approaches that can be taken, instead of just simply providing the solutions. These posts are for those of you that get stuck when trying to solve a challenge, have no idea how to go about breaking down the problem and/or are having issues understanding some of the (more complicated) alternative solutions that are provided after solving a challenge.

That said, I do HIGHLY encourage you to try to solve/understand the challenge yourself first and if you get really stuck, these resources are here to help you get unstuck.

Connect with me on ...
Twitter
GitHub

How to become a Web Accessibility Specialist (WAS)

Nat's Tech Notes — Tue, 01 Feb 2022 22:48:49 +0000

If you're anything like me - and since you're here, I suspect you might be - you probably started with a good ol' Google Search. The first results that popped up were likely a bunch of organizations promising they can make your website fully compliant (oh those lovely ads).

Now I'm not exactly looking to hire someone to make my website compliant - a.k.a. audit it. I want to become the person doing the audits myself. Again, since you're still reading this post, you presumably are as well. So how exactly do we become that person?

First, we have to get certified - twice, at that. In this post, I will outline where to get certified, how much you can expect to pay for each certification, how to get started, and what steps to take next.

1. Where can I get certified?

Certifications are obtained - and maintained - through IAAP, a.k.a. the International Association of Accessibility Professionals. So what exactly is the IAAP?

The International Association of Accessibility Professionals (IAAP) is a not-for-profit membership-based organization for individuals and organizations that are focused on accessibility or are in the process of building their accessibility skills and strategies. Information from IAAP's About page

2. First step

Before being able to get certified as a WAS, the CPACC certification must be obtained first. IAAP's website describes it as follows:

The IAAP Certified Professional in Accessibility Core Competencies (CPACC) credential is IAAP's foundational certification, representing broad, cross-disciplinary conceptual knowledge about 1) disabilities, 2) accessibility and universal design, and 3) accessibility-related standards, laws, and management strategies. IAAP CPACC Certification Page

As the description states, it addresses very broad and foundational knowledge about accessibility in general. It does include some aspects related directly to web accessibility, but only a very small percentage. The rest of it is focused on disabilities, adaptive strategies, and laws and regulations. It approaches all those topics from a legal, social, psychological, and economic perspective - and is therefore much more theoretical than practical.

At the time of writing - though this might change - the price for this exam is $385 for members of IAAP and $485 for non-members. Membership prices will vary depending on the type of membership but can be found here.

3. What's next?

Once the CPACC certification has been obtained, the time comes to get certified as a WAS. IAAP's website describes it as follows:

The Technical-level credential is intended for accessibility professionals who are expected to evaluate the accessibility of existing content or objects according to published technical standards and guidelines, and provide detailed remediation recommendations. They are expected to know and use the relevant technologies, not merely be aware of them. IAAP WAS Certification Page

This certification, unlike the first one, is on a much more technical and practical level. It requires knowledge of HTML, JavaScript, usability testing in different environments, understanding of WCAG 2.1 standards, accessibility best practices, and more. While being able to write code yourself isn't exactly necessary, knowledge and understanding of web languages, however, are required.

The price for this exam is $430 for members of IAAP and $530 for non-members at the time of writing - though, again, this might have changed by the time of reading. It should also be mentioned that people retaking the test - of either certification - do not pay this full price. All price information can be found on
this page.

4. Important things to note

4.1 Getting ready for the exam

There is a whole process to obtaining each certification. From preparing and applying for it, paying and scheduling the exam, to taking it and waiting for the results - that luckily are fairly similar for both.

I will be outlining these aspects in its own post that will be part of the series 'The road to becoming a WAS'. If it has already been written by the time you are reading this, you should be able to find it at the top of this post as part of that series - and I'll be adding another link here for your convenience. If neither of those are available, it means it has not been written YET (though you can follow me to get notified when it gets posted if you are interested in reading it).

4.2 Maintaining your certifications

IAAP Certifications are valid for 3 years - to ensure that certified professionals keep up with fast-changing technologies, standards, and best practices. After that, they must be maintained - which is a separate procedure (that I won't be writing about right now, though I probably will when the times comes for me to renew mine).

From Former Special Ed Teacher To Future Web Accessibility Specialist

Nat's Tech Notes — Fri, 28 Jan 2022 20:42:18 +0000

Chapter 1: Becoming a teacher

Like most people's lives, mine has been a mix of free will and pure happenstance. For example, it was my choice to get a degree in education, because I wanted to make a positive difference in this world. So much so, that I chose (world) religion as one of the two specifications within the general curriculum. I wanted - and did - teach some of the future contributors to our society about the differences between people, cultures, and religions. I dare even say that for most, I managed to help them understand and accept those differences, instead of fearing them, and assisted them in seeing the beauty in all of it.

Chapter 2: Learning from special education

It was fate, however, that nudged me into the direction of special education. While my degree's curriculum did include some introductory and pretty surface-level classes related to disabilities - mostly, but not exclusively, cognitive and learning disabilities - I had honestly never considered that route.

That is until I started applying for jobs after graduation and ended up getting only one reply out of many applications. It happened to be a position for both of the specifications I had chosen (the second being English as a Second Language - which has also served me incredibly well in many different ways). I went on the interview and about an hour after, I got the phone call saying they wanted to offer me the job. With no other options on the table for me, I accepted, and let me tell you; it was the best thing that could have happened to me. That was what first opened my eyes to how disabilities affect a person's life in so many different ways.

I ended up teaching teenagers with autism and got training from the school itself before I ever started the job. It was there that I learned that simple things that are so often overlooked, like what fonts are used, can significantly improve or decrease a neurodivergent person's chance of being able to process information. Or how to structure text and content in a way that isn't overcrowded and convoluted, a mistake that unfortunately is made so frequently.

All small, but important techniques, that taught me so incredibly much about styling, structuring, and organizing content in an inclusive way. Skills that, unbeknownst to me at the time, would be extremely valuable once I transitioned into programming.

Now my main focus was mostly neurodiversity and adaptive strategies for learning disabilities such as dyslexia for example. The school I was working for, however, did also have students that were hard of hearing or deaf and ones with low vision or blindness. I obviously did not have the proper experience to properly support students with those needs, but it did also give me a glimpse into some of the adaptive strategies they needed to be able to read, learn and process information.

Chapter 3: Switching to programming

Unfortunately, while I absolutely loved teaching, there were a few reasons I ultimately decided to step out of that sector. Not long after that I made a huge life change and ended up moving halfway across the world - to a country that did not even acknowledge my teaching degree as equal to theirs. So that left me with the question: what do I do now?

In another twist of kismet, I was obsessed with the tv show Silicon Valley at the time, especially the coding aspect of it. To the point where I started looking for other coding-related shows and movies that I could watch (though I never did quite find any I enjoyed as much). It was then that I had the not completely random thought that I could see myself potentially being a programmer.

Not one to let a possible opportunity go to waste, I sat down at my computer and started looking up how to start my coding journey. Like many others, I didn't have any specific path in mind. I wasn't sure if I wanted to go into gaming, software, web development, or any of the other routes that can be taken in programming. I just figured I would try coding and see if I liked it and if I didn't, well, no harm no foul.

Chapter 4: Code Newbie

Given that I didn't have a specific programming direction in mind, I decided to go about it a little differently. There were a couple of websites that mentioned that if you grasped C++, any other programming language would be much easier to learn. Of course, that settled it for me - cause why take the easy road when the hard road is so much more fun.

I will admit, I quite liked learning C++, right up until those dreaded pointers came up and I got completely lost. Before that though, I was pretty surprised by how much fun I was having. Given that the first program I ever wrote was a complete mock-up of a reset password process - with security questions and a 3 limit attempt and all - to practice concepts like loops and conditional statements, I clearly had a natural knack for it as well. Can't say I haven't surprised a ton of people when I tell them that was my first written program either!

Deciding C++ might not be the right fit for me though, I ultimately landed on web development and from there, everything naturally fell into place. I started learning HTML, moved on to CSS, then JavaScript - with lots of swearing and feeling dumb at times - followed by React and dipping my toes into the back-end with NodeJS and MongoDB. I especially took an interest in concepts like semantic HTML and accessibility, understanding the importance of them from my particular experiences and background.

Chapter 5: Tying it all together

It wasn't until recently that it dawned on me: I should become a Web Accessibility Specialist. Now granted, like most code newbies, it took me a while to feel confident in my own skills - we all know how real Imposter Syndrome is. It hasn't even really been that long since I stopped referring to myself as a code newbie in all honesty.

There comes a time in our journey, however, that a shift occurs, an ascension, if you will. I stopped feeling like I was still simply learning - though let's be honest, that's a never-ending process in programming - and started feeling like I knew what I was doing and what I was talking about. It was then that I gained the confidence to let the last pieces of the puzzle fall into place and to embark on the next phase of my journey: obtaining the required certifications.

Chapter 6: Sharing is caring

Not only am I incredibly excited to learn and expand my knowledge of the subject, but I am also thrilled to be using this platform as a way to document the process of obtaining the certifications. As I go through the body of knowledge for each exam, I will be writing posts - study notes, if you will - about the different categories and concepts that one should know to pass the exams.

If I can help out other people on the same journey as me, especially, but not exclusively, people that might be struggling with some of the (more theoretical) aspects, that would just be the cherry on top of the pie. Maybe I might even inspire some folks out there to start this journey themselves. After all, the more people become knowledgeable about web accessibility, the better for the future of the web - and all the people out there that are currently being excluded from a big part of it.