DEV Community: Ten Zhi Yang

Move Zeroes To End

Ten Zhi Yang — Sun, 25 Apr 2021 15:17:47 +0000

This may or may not be the optimal solution, DO NOT blindly memorize my solutions

Target audience: Beginners in js (please feedback!)

This week’s question:

Given an integer array, move all 0s to the end of it while maintaining the relative order of the non-zeroes. Bonus: do this without making a copy of the array!

Example:

$ moveZeroes([0,2,0,3,8])
$ [2,3,8,0,0]

Filtering zeroes and adding at the end

One of the first solution that comes to mind for this question is to remove the zeroes, and append it to the end of the array.

const moveZeroesNaive = (arr) => {
  let noZeroes = arr.filter((num) => num !== 0);
  return [...noZeroes, ...new Array(arr.length - noZeroes.length).fill(0)];
};

This solution works, and there are probably other ways to code this such that we wont make another copy of an array. Filter makes a copy, and spreading also copies by value in js.

Bubbling

const moveZeroesBubble = (arr) => {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] === 0) {
      for (let j = i; j < arr.length - 1; j++) {
        arr[j] = arr[j + 1];
        arr[j + 1] = 0;
      }
    }
  }
  return arr;
};

const arr = [0, 2, 0, 3, 8];
moveZeroesBubble(arr);
console.log(arr);

This solution is similar to what we expect of bubble sort. Every time we face a zero, we bubble a zero to the end. This has a complexity of O(n^2) and takes no extra space.

Abusing sort

One thing we can try is to make use of tools already available to us. In js, we have an in-place sort, and can rely on the js engine to have a decent sort algorithm, of O(n log n) complexity (probably timsort)

const moveZeroes = (arr) => arr.sort((a, b) => (b === 0 ? -1 : 0));

const arr = [0, 2, 0, 3, 8];
moveZeroes(arr);
console.log(arr);

What we can do is to not sort according to both values, but put in a comparison result that checks if one of the array is a zero or not! (if we did a === 0 instead, we get the 0s at the front)

Super ugly number

Ten Zhi Yang — Sun, 11 Apr 2021 14:02:24 +0000

This may or may not be the optimal solution, DO NOT blindly memorize my solutions

From Cassidy's weekly newsletter.

Target audience: people comfortable in js (please feedback!)

This week’s question:

Given an integer n and a sorted array of prime integers called primes, return the nth “super ugly number”. A “super ugly number” is a positive number whose all prime factors are in the array primes.

Example:

$ superUgly(1, [2,3,5])
$ 1
$ superUgly(11, [2,7,13,19])
$ 28

I haven't seen this problem before and it was a bit confusing why the first example returned a 1 when 1's prime was not in the list, but after looking it up, I found that 1 is the first result by convention. Now the first thing that came to mind is why we needed 1 by convention, I think this led me to think that maybe we can build up the list of super ugly numbers starting from 1, and then using the primes given.

Let's work out the second example on paper

super ugg nums = [1]

super ugg nums = [1, 1*2]

super ugg nums = [1, 1*2, 1*2*2]
// [1,2,4]

super ugg nums = [1, 1*2, 1*2*2, 1*7, 1*2*2*2]
// [1,2,4,7,8]

super ugg nums = [1, 1*2, 1*2*2, 1*7, 1*2*2*2, 1*13, 1*2*7, 1*2*2*2*2]
// [1,2,4,7,8,13,14,16]

super ugg nums = [1, 1*2, 1*2*2, 1*7, 1*2*2*2, 1*13, 1*2*7, 1*2*2*2*2, 1*19]
// [1,2,4,7,8,13,14,16,19]

super ugg nums = [1, 1*2, 1*2*2, 1*7, 1*2*2*2, 1*13, 1*2*7, 1*2*2*2*2, 1*19, 1*2*13]
// [1,2,4,7,8,13,14,16,19,26]

super ugg nums = [1, 1*2, 1*2*2, 1*7, 1*2*2*2, 1*13, 1*2*7, 1*2*2*2*2, 1*19, 1*2*13, 1*2*2*7]
// [1,2,4,7,8,13,14,16,19,26,28]

Looking at how we calculated this, I felt that there's 2 things I had to keep note of. I always need to know when to start using the next prime, and I also need to check where's the last time I used the previous prime, i.e when calculating 1*2*2*7, I need to use the 7 prime with the last time I calculated 2*2.

Thus to build the next, number, all I have to do is to loop through the list of primes, multiply then by some past super ugly number and then pick the smallest one. Let's figure out the past ugly number later, and write something down first

const superUgly = (n, primes) => {
  let ugly = [1];
  for (let i = 0; i < n; i++) {
    const options = primes.map((item) => item * ugly[ugly.length - 1]);
    const next = Math.min(...options);
    ugly.push(next);
  }
  return ugly;
};

This gives us [1,2,4,8,16,32,64,128,256,512,1024,2048] what's happening here is that we will always reference the previous time we used the 2 prime, and we will always use the 2 prime for the next iteration as it always gives us the small number. This solution looks extremely wrong, but it actually gives us a few things that work towards the final answer. We are calculating the next number by using the min of all of the primes * some previous iteration. We just haven't figured out which previous iteration to use. 1,2,4 makes sense but we didn't start using the 7, as by the time we were ready to use 7, we were returning min(1*2*2*2, 1*2*2*7) and inserted an 8 instead.

So maybe what we can do is to reference in the ugly list, some number that 7 needs to multiply by. let's keep track of the index of the previous iteration, by using an array, since we only need to keep track of one index per prime.

const superUgly = (n, primes) => {
  let ugly = [1];
  let prevIndices = new Array(primes.length).fill(0);
  for (let i = 0; i < n; i++) {
    const options = primes.map((item, index) => item * ugly[prevIndices[index]]);
    const next = Math.min(...options);
    ugly.push(next);
  }
  return ugly;
};

This gives us [1,2,2,2,2,2,2,2,2,2,2,2], which makes sense, because we never moved the prevIndices when we select the min, so let's increment the prevIndices every time we pick that result for our next

const superUgly = (n, primes) => {
  let ugly = [1];
  let prevIndices = new Array(primes.length).fill(0);
  for (let i = 0; i < n; i++) {
    const options = primes.map(
      (item, index) => item * ugly[prevIndices[index]]
    );
    const next = Math.min(...options);
    const updateIndex = options.findIndex((item) => item === next);
    prevIndices[updateIndex]++;
    ugly.push(next);
    // console.log(
    //   prevIndices,
    //   prevIndices.map((num) => ugly[num])
    // );
  }
  return ugly;
};

At this point, if you're lost you can un-comment the console log to see what the prevIndices is doing, basically it lets us know when was the previous time we used this particular prime to insert into ugly. Our return value for this function is [1,2,4,7,8,13,14,14,16,19,26,26] which is really, really close to what we want! However, it seems like we cut off early, due to having multiple branches to calculate 14 and 26, this stops our loop prematurely. We could insert the ugly values into the set, but then we'd lose the use of our prevIndices, what we could do is to write a different terminating condition, one where we terminate once we reach n unique solutions, giving us this:

const superUgly = (n, primes) => {
  let ugly = [1];
  let prevIndices = new Array(primes.length).fill(0);
  while (new Set(ugly).size < n) {
    const options = primes.map(
      (item, index) => item * ugly[prevIndices[index]]
    );
    const next = Math.min(...options);
    const updateIndex = options.findIndex((item) => item === next);
    prevIndices[updateIndex]++;
    ugly.push(next);
  }
  return ugly;
};

This gives us the correct answer with [1,2,4,7,8,13,14,14,16,19,26,26,28] ! now change return ugly to return ugly.pop() and we're done!

This question is not particularly easy, I think I happened to figure out the answer while finding out more information about the question itself, since I wasn't too familiar with primes and factors, let alone prime factors, so I probably had a spark of inspiration from other problem descriptions and would not have come to the answer so quickly if I didn't look up this question from other places.

Don't falter if you can't figure it out on your own, mathematical problems like this that require some kind of trick doesn't usually come intuitively, so it's just a matter of practice and knowing other questions like this that can help solve future similar questions!

Largest number from two array

Ten Zhi Yang — Sun, 28 Mar 2021 16:32:05 +0000

This may or may not be the optimal solution, DO NOT blindly memorize my solutions

From Cassidy's weekly newsletter.

Target audience: people comfortable in js (please feedback!)

This week’s question:

You’re given two integer arrays (n and m), and an integer k. Using the digits from n and m, return the largest number you can of length k.

Example:

n = [3,4,6,5]
m = [9,0,2,5,8,3]
k = 5
$ maxNum(n, m, k)
$ 98655

When I first read this question, the most obvious solution was to combine the arrays then sort them, the first k numbers will be the answer. We can chain some functional functions together like so:

const maxNum = (n, m, k) =>
  [...n, ...m]
    .sort((a, b) => b - a)
    .filter((_, i) => i < k)
    .join("");

What this does is to spread n and m (O(n+m)) followed by sorting them by descending order, O(n+m log n+m) and then filtering (O(n+m)) and joining (O(k)) this gives us a complexity of O(n+m log n+m). There are many ways to implement this same logic more efficiently, but the bottle neck is the sorting.

My next idea came to me by identifying that I only needed the biggest K values, and sorting wasn't necessary. This means that we can make use of some data structure which has a better amortised cost, such as a heap. Here's my array implementation of a heap:

function MaxHeap() {
  this.heap = [];
  function getChildrenIndex(curr) {
    return [2 * curr + 1, 2 * curr + 2];
  }
  function getParentIndex(curr) {
    return curr % 2 === 0 ? (curr - 2) / 2 : (curr - 1) / 2;
  }

  return {
    heap: this.heap,
    insert: function (value) {
      let { heap } = this;
      heap.push(value);
      let currIndex = heap.length - 1;
      let parentIndex = getParentIndex(currIndex);
      while (heap[currIndex] > heap[parentIndex]) {
        const tmp = heap[parentIndex];
        heap[parentIndex] = heap[currIndex];
        heap[currIndex] = tmp;
        currIndex = parentIndex;
        parentIndex = getParentIndex(currIndex);
      }
    },
    remove: function () {
      let { heap } = this;
      const lastItem = heap.pop();
      let currIndex = 0;
      let [l, r] = getChildrenIndex(currIndex);
      const returnVal = heap[0];
      heap[0] = lastItem;
      while (heap[currIndex] < heap[l] || heap[currIndex] < heap[r]) {
        const tmp = heap[currIndex];
        if (heap[r] > heap[l]) {
          heap[currIndex] = heap[r];
          heap[r] = tmp;
          currIndex = r;
        } else {
          heap[currIndex] = heap[l];
          heap[l] = tmp;
          currIndex = l;
        }
        [l, r] = getChildrenIndex(currIndex);
      }
      return returnVal;
    }
  };
}

and then the driver function will just iteratively add n and m into the heap, with an average O(1) of insertion (O(n+m)) then removing k items (O(k)) and this gives us an average case of O(n+m) but worst case no better than the previous solution.

const maxNum = (n, m, k) => {
  let h = new MaxHeap();
  n.forEach((item) => h.insert(item));
  m.forEach((item) => h.insert(item));
  return Array(k)
    .fill(0)
    .map((_) => h.remove())
    .join("");
};

Finally my thought went to the problem itself. Since the input are digits, we know that there can be at most 10 different input values, this allows us to do some non-comparison sorting, but we didn't need anything as complex as radix sort, when just counting the digits would do. This solution basically counts all the digits (O(n+m)) and then goes through the count (O(10) = O(1)) and then reassembles the string. Giving us O(n+m) time complexity and a virtually constant space.

const linearMaxNum = (n, m, k) => {
  const count = {};
  let res = "";
  let all = [...n, ...m];
  all.forEach((item) => {
    if (!count[item]) {
      count[item] = 0;
    }
    count[item]++;
  });
  for (let i = 9; i >= 0; i--) {
    res += new Array(count[i]).fill(i).join("");
  }
  return res.substr(0, k);
};

Paint can room coverage

Ten Zhi Yang — Sun, 07 Mar 2021 10:59:00 +0000

This may or may not be the optimal solution, DO NOT blindly memorize my solutions

From Cassidy's weekly newsletter.

Target audience: beginners in js (please feedback!)

This week’s question:

Given a room size, and the square footage a paint can can cover, return how many cans of paint you need to buy to paint a room. Assume the room has four walls. If you’d like to expand this, you can add doors, windows, or any other room features that might make the problem interesting to solve.

Example:

room = { length: 12, width: 10, height: 9 }
canCoverage = 200
$ numberOfCans(room, canCoverage)
$ 2 // (12x9x2)+(10x9x2) = 396, so two cans will cover it

This question is logically fairly simple, in fact most of the solution is already given in the example!

const calcCanCoverage = (length, width, height, canCoverage) =>
  Math.ceil((length * height * 2 + width * height * 2) / canCoverage);

console.log(calcCanCoverage(12, 10, 9, 200));

Now the input isn't really in that format, so let's find some way to extract that information.

const room = { length: 12, width: 10, height: 9 };
const canCoverage = 200;

const calcCanCoverage = (length, width, height, canCoverage) =>
  Math.ceil((length * height * 2 + width * height * 2) / canCoverage);

const numberOfCans = (room, canCoverage) => {
  const { length, width, height } = room;
  return calcCanCoverage(length, width, height, canCoverage);
};

console.log(numberOfCans(room, canCoverage));

And that's the whole thing solved! However, since this is not much of an article, let's attempt some input management. One of the things we want to handle is if room is not an object that has our length width or height. Here we can think of using some value to show "error". Logically thinking, we can use either -1 or null as the error response. In this case, I'll use -1.

const numberOfCans = (room, canCoverage) => {
  const { length, width, height } = room;
  if (!(length && width && height)) {
    return -1;
  }
  return calcCanCoverage(length, width, height, canCoverage);
};

This will handle cases where length, width and height are 0, any one of those is NaN (if room is not an object) and also if any one of those is null or undefined (if room is empty object).

We should also handle if length, width and height is a number. let's type-cast in our input validation

const numberOfCans = (room, canCoverage) => {
  const { length, width, height } = room;
  if (!(Number(length) && Number(width) && Number(height))) {
    return -1;
  }
  return calcCanCoverage(length, width, height, canCoverage);
};

This will allow '12' to be type-casted into a number,'12a' will be NaN. Booleans will be converted into 1 or 0.

If we want to add another check right now, it would be quite verbose to check everything again, so let's use Object.values on the room object, so that we get all the values, and an every function to test every integer.

const numberOfCans = (room, canCoverage) => {
  const { length, width, height } = room;
  if (!Object.values(room).every((val) => Number(val))) {
    return -1;
  }
  return calcCanCoverage(length, width, height, canCoverage);
};

This introduces a new bug in that the validation will pass if room is an empty object. We could check that length width and height exists in the object, but I would just check if room is an object and has values.

const numberOfCans = (room, canCoverage) => {
  const { length, width, height } = room;
  if (
    !room ||
    Object.keys(room).length === 0 ||
    !Object.values(room).every((val) => Number(val))
  ) {
    return -1;
  }
  return calcCanCoverage(length, width, height, canCoverage);
};

Now the last thing I can think of is to check if the room dimensions are positive, so let's add that in the every function

const numberOfCans = (room, canCoverage) => {
  const { length, width, height } = room;
  if (
    !room ||
    Object.keys(room).length === 0 ||
    !Object.values(room).every((val) => Number(val) > 0)
  ) {
    return -1;
  }
  return calcCanCoverage(length, width, height, canCoverage);
};

No matching adjacent chars

Ten Zhi Yang — Sun, 28 Feb 2021 14:11:23 +0000

This may or may not be the optimal solution, DO NOT blindly memorize my solutions

From Cassidy's weekly newsletter.

Target audience: beginners in js (please feedback!)

Given a string str containing only the characters x and y, change it into a string such that there are no matching adjacent characters. You’re allowed to delete zero or more characters in the string. Find the minimum number of required deletions.

Example:

$ everyOther('xxyxxy')
$ 2 // str becomes ‘xyxy’

$ everyOther('yyyyy')
$ 4 // str becomes ‘y’

This one came to me very quick. I would think that a optimal solution would not be any faster than O(n). If we look at the problem, we notice that essentially, the matching adjacent characters would mean looking at both side of all the characters. eg. in 123 we would look at the right of 1, check that 2 is not the same and then do the same for 2. We don't have to check 2 back with 1 again as that would be a double count. This means that every character needs to be accessed at least once.

Let's write a loop, were we start from 0 and end at str.length - 2

const everyOther = (str) => {
  for (let i = 0; i < str.length - 1; i++) {
  }
};

we then need to check the current letter with the next

const everyOther = (str) => {
  for (let i = 0; i < str.length - 1; i++) {
    const curr = str[i];
    const next = str[i + 1];
    if (curr === next) {
      // do something here
    }
  }
};

And if we look at the question again, notice that it only asks for a count, not the string after we're done with it. So let's add a counter.

const everyOther = (str) => {
  let count = 0;
  for (let i = 0; i < str.length - 1; i++) {
    const curr = str[i];
    const next = str[i + 1];
    if (curr === next) {
      count++;
    }
  }
  return count;
};

And that's it! Short one this week, but there's no short of amazing solutions, particularly the one by Sophie stands out to me, I never would have thought of using regex, and there are plenty of interesting solutions which actually make use of the fact that the question specified that the entire expected input is only 2 different types of characters. It's interesting to look at all the different ways people "brand" their code in in the thread.

Weekly solutions: PPAP wildcard matching

Ten Zhi Yang — Sun, 21 Feb 2021 10:13:43 +0000

This may or may not be the optimal solution, DO NOT blindly memorize my solutions

Another one of Cassidy's weekly newsletter. I did a cursory google search and it seems like it's a leet code hard, so I'm not intending to get the optimal solution, at least on first try.

Target audience: beginners in js (please feedback!)

This week’s question:
Given a string str and a dictionary dict containing a list of non-empty words, add spaces in str to construct a “sentence” where each word is a valid word in dict. Return all possible sentences. You are allowed to reuse the words in dict.

Example:

str = “penpineapplepenapple”
dict = [“apple”, “pen”, “applepen”, “pine”, “pineapple”]

$ makeSentence(str, dict)
$ [
    “pen pine apple pen apple”,
    “pen pineapple pen apple”,
    “pen pine applepen apple”
  ]

Here's where my mind is at from the start, I can make use of a global replace to match words to a symbol. I can reconstruct the sentence by replacing the symbol back into the words, with spaces. To get the different variations of sentences, I can change the order of the dictionary such that we replace matched strings in different order.

This seems like it would be difficult to reason about as there are many loose parts, but using the same idea, let's try to use a recursive solution.

We can start by breaking up the first match-able strings of the sentence, adding a space and then throwing the output back into the function again.

We want this function to exit. For now, we can clone the input array, and then check if the new array and the original input have the same length, that can be our exit condition.

const str = "penpineapplepenapple";
const dict = ["apple", "pen", "applepen", "pine", "pineapple"];

const makeSentence = (str, dict) => {
  return breakFirstWord([str], dict);
};

const breakFirstWord = (strArr, dict) => {
  const newStrArr = new Array();
  return newStrArr.length === 0
    ? strArr
    : breakFirstWord(newStrArr, dict);
};

console.log(makeSentence(str, dict));

Now to attack the breaking up problem. In the first loop, it's straight forward, we will just break the word from index 0, that is, with input penpineapplepenapple we will break into pen pineapplepenapple. following which, we will want to break from the most recent space.

Keep in mind if it started with applepen it could be either applepen itself or apple pen, so there could be one or more most recent space.

breakFirstWord now looks like this.

const breakFirstWord = (strArr, dict) => {
  const newStrArr = new Array();
  for (let i = 0; i < strArr.length; i++) {
    const currTestStr = strArr[i];
    let mostRecentSpace = currTestStr.lastIndexOf(" ");
    if (mostRecentSpace === -1) {
      mostRecentSpace = 0;
    }
    // TODO: do something with mostRecentspace and currTestStr here
  }
  return newStrArr.length === 0
    ? strArr
    : breakFirstWord(newStrArr, dict);
};

We want to match with every word in the dictionary, at where we left the TODO, let's write something that takes a substring of the same length as the dictionary words

for (let j = 0; j < dict.length; j++) {
  const currDictTest = dict[j];
  const testSubStr = currTestStr.substring(
    mostRecentSpace,
    mostRecentSpace + currDictTest.length
  );
  console.log(testSubStr);
}

// first iter returns
// "penpi"
// "pen"
// "penpinea"
// "penp"
// "penpineap"

This looks correct, but at the back of my mind, we might need to handle the fact that the first input of the substring function may not work like expected due to us taking the index of the space, when we might need the index of the first character after the space. We will cross that bridge when it comes back.

For now, we want to break the word if there's a match and then push it into the next newStrArr.

for (let j = 0; j < dict.length; j++) {
  const currDictTest = dict[j];
  const testSubStr = currTestStr.substring(
    mostRecentSpace,
    mostRecentSpace + currDictTest.length
  );

  console.log(testSubStr);
  if (testSubStr === currDictTest) {
    const newStr =
      currTestStr.substring(0, mostRecentSpace) +
      testSubStr +
      " " +
      currTestStr.substring(mostRecentSpace + currDictTest.length);
    newStrArr.push(newStr);
  }
}

sure enough, in our second iteration, testSubStr is messing up, let's increment mostRecentSpace by 1, consequently, this also means a no-match of spaces is also 0.

so let's change

let mostRecentSpace = currTestStr.lastIndexOf(" ");
if (mostRecentSpace === -1) {
  mostRecentSpace = 0;
}

into

let mostRecentSpace = currTestStr.lastIndexOf(" ") + 1;

we're very close! the final output only returns a single element of ["pen pine apple pen apple "]. Looking at this result, I can see that the last word has a space to it, this leads me to guess that this array is running one time more than it needs to. console logging before every return confirms my assumption.

["pen pine apple pen apple", "pen pine applepen apple ", "pen pineapple pen apple "] ["pen pine apple penapple", "pen pine applepen apple", "pen pineapple pen apple"]

["pen pine apple pen apple "] ["pen pine apple pen apple", "pen pine applepen apple ", "pen pineapple pen apple "]

[] ["pen pine apple pen apple "]

The idea that comes straight to mind is, before pushing into the new array, I can trim the string, therefore the last iteration will not include the last space. However, this results in an infinite loop at the last step.

Alternatively having a space at the end also guarantees that I've gone through the dictionary down to the last word, this means that something like penasdf should not have any output. I think a way we can handle this is to automatically push all input where there's an empty space at the end to newStrArr, so that we will not lose any results that are computed early, (eg. pen applepen will always resolve one loop earlier than pen apple pen) but we can also check that all elements in newStrArr contains a space at the end, this can be our new break condition. Let's also trim the results in the makeSentence function

Here's the full code:

const str = "penpineapplepenapple";
const dict = ["apple", "pen", "applepen", "pine", "pineapple"];

const makeSentence = (str, dict) => {
  return breakFirstWord([str], dict).map((item) => item.trim());
};

const breakFirstWord = (strArr, dict) => {
  const newStrArr = new Array();
  for (let i = 0; i < strArr.length; i++) {
    const currTestStr = strArr[i];
    let mostRecentSpace = currTestStr.lastIndexOf(" ") + 1;
    if (mostRecentSpace === currTestStr.length) {
      newStrArr.push(currTestStr);
    } else {
      for (let j = 0; j < dict.length; j++) {
        const currDictTest = dict[j];
        const testSubStr = currTestStr.substring(
          mostRecentSpace,
          mostRecentSpace + currDictTest.length
        );

        if (testSubStr === currDictTest) {
          const newStr =
            currTestStr.substring(0, mostRecentSpace) +
            testSubStr +
            " " +
            currTestStr.substring(mostRecentSpace + currDictTest.length);
          newStrArr.push(newStr);
        }
      }
    }
  }
  return newStrArr.every((item) => item[item.length - 1] === " ")
    ? newStrArr
    : breakFirstWord(newStrArr, dict);
};

console.log(makeSentence(str, dict));

codepen:

See the Pen cassidoo newsletter 2021/7 by Ten Zhi Yang
(@Tzyinc) on CodePen.

Hacking together auto posting to dev.to from my blog

Ten Zhi Yang — Wed, 10 Feb 2021 03:49:31 +0000

update

I was informed that this feature is already inbuilt into dev.to as long as you have RSS feed, and it's known as post syndicating. Here's a guide: https://www.mariokandut.com/how-to-automatically-post-from-gatsby-to-medium-and-dev-to/

takeaway: do your research before writing any code!

In order to increase my online presence, I decided to create a dev.to account. I've never posted on medium before so I can't compare the experience from one platform to another, but dev.to was pretty intuitive. However, I already have somewhat of a content creation flow right here on my blog, and I tried manually cross posting, but I didn't really like the whole doing one thing twice. Hence I decided to hack up some auto posting script. With some luck, you'll be reading this post itself on dev.to!

Existing blog setup

I'm a very very lazy dev, and my blog really is for me to throw things together, so don't expect a production ready system here. I've tinkered around with it a bit, so I don't fully remember what came out of the box when I started this gatsby blog, but I'll list out things that are relevant to this task.

Blog:
- Starter for a blog powered by Gatsby and Markdown from Kyle Mathews
- gatsby-plugin-feed (default configs)
- hosted on digital ocean
Digital ocean server
- Nginx reverse proxy-ing a few web apps and some simple nodejs scripts
- cron job that pulls my latest build from my gatsby blog (a hacked imitation of CI, ideally you will use github's webhooks to push to the server and have the server run the build script, but I ran into issues building on my lowest tier DO server, but hey, if it works it works)
- nodejs script that automates some tasks for me
- Fetches my RSS feed from my blog every 5 mins and caches the response in memory
- Tweets for me if there's a new blog post since the last cache

Changes made

I won't provide the code snippets for this project as I'm not confident it will work as of writing this blog, but I will layout the steps I did and hopefully this will help someone out there.

Get my api key from dev to

Following the docs, I went to my settings > account > generate api key. I entered this key into my .env for my nodejs script.

Modify RSS feeds to include raw markdown

Initially I had the default settings of gatsby-plugin-feed. I copied the configuration from https://www.gatsbyjs.com/plugins/gatsby-plugin-feed/. Comparing this output with my existing output, I found that it was exactly the same, so I was confident I wouldn't break anything that's currently working. Checking my graphql queries locally, I found that I could directly query rawMarkdownBody I added that into the query in the config, as well as {"content:raw": edge.node.rawMarkdownBody} to custom_elements. I then checked by building my site locally.

Modify nodejs script

I knew that the script was already capable of tweeting when I posted a new post and I could get any information from my blog as long as it was in the RSS feed, so I wrote a function that sends a POST request to the https://dev.to/api/articles endpoint and added my api-key to my header. I then called this function where I implemented my twitter bot, passing in the title, canonical url, and content.

That's it! hopefully everything worked. I'll probably update this if it didn't.

Improvements

Assuming everything worked as planed, there are still a few changes I would want to make. The images being used will reference a relative url, so it will definitely not work in the dev.to article. I would also add tags and series to my front matter on my blog and pass it into the rss feed, and also the dev.to api.

Music in browser basics

Ten Zhi Yang — Tue, 09 Feb 2021 06:21:37 +0000

I've recently started a tech in music interest group within Shopee that will run for 8 weeks, and I want to have some content out for the first week as we will be doing mostly introductions. So this shall be my welcome and beginner starting kit to my 3 amigos Adriel, Stanley and James.

This post will try to provide an non technical explanation for some of the magic behind the web audio api so that we know what to google and research on our own. This article is suitable for people comfortable with working in JS, with minimal to no signal processing background knowledge

reference

Web audio api

The web audio api is powerful in that you should be able to build anything you need to relating sound, but as I found out, it's not very easy to use without some background in signal processing. All of our operations will revolve around the Audio Context, which is essentially a graph built from modular Audio Nodes One audio context can have multiple Audio nodes. An audio node can be an audio source, an audio destination or some audio processing module. These nodes are routed to each other (eg, source -> processing -> destination) and form a graph. There can be multiple input and output nodes.

Audio sampling

Because it's not very feasible to store a continuous audio input, we usually sample the continuous signal into a discrete representation, in the form of X values at Y time

Audio Sources

After creating an audio context, we usually want to take an input, known as an audio source. Audio sources can be in the form of:

sound generated from js (eg. creating a signal via oscillator)
raw audio data known as PCM (eg. AudioBuffer)
HTML elements like <audio> or <video>
or some MediaStream like your microphone

Effects

A lot of cool interactions we want to do involves adding effects to audio sources. We usually use the term connect to apply these effects onto an audio context Some things we can do is:

GainNode change the volume. We can add gain to an input to increase the loudness
ConvolverNode gives reverb effects
WaveShaper applies a non-liner distorter, can be used to change the tone of the sound.
DynamicsCompressorNode lowers volume of loudest parts in the signal to help reduce clipping and distortion

Destination (Output)

We can use AudioDestinationNode to select the audio source, usually for speakers of the device. Alternatively we can have MediaStreamAudioDestinationNode it uses WebRTC MediaStream under the hood. An interesting thing we can do with audio output is to have spatialization effects to simulate where the sound is coming from.

Analysis

The AnalyserNode allows us to take numerical representations of the audio context. This is usually used for visualizations

Ways to play sounds on browser

Ten Zhi Yang — Tue, 09 Feb 2021 06:20:19 +0000

Here are some lightweight code for playing sounds on browser

Audio element:

quick and easy setup
comes with player and controls See the Pen Playing audio via file upload and audio element by Ten Zhi Yang (@Tzyinc) on CodePen.

Audio buffer

better for short audio clips
easy implementation to take audio from a fetch
good for sound effects See the Pen Playing audio via file upload and audio buffer by Ten Zhi Yang (@Tzyinc) on CodePen.

Media stream

to receive a stream from somewhere
can take user devices, including mic and webcam See the Pen Playing audio via media devices and media stream by Ten Zhi Yang (@Tzyinc) on CodePen.

Oscillator

for manipulating the sound wave directly
good for creating micro-tonal sounds See the Pen Playing audio via oscillator by Ten Zhi Yang (@Tzyinc) on CodePen.

Weekly solutions: product list class

Ten Zhi Yang — Tue, 09 Feb 2021 06:16:33 +0000

I decided since I've been solving the interview questions on Cassidy's weekly newsletter I might as well put a little bit more effort into writing my thought processes down, in the scenario where people are looking for a way to solve these. That's my goal for this year. I'm not confident I can be consistent, but it doesn't hurt to try!

This may or may not be the optimal solution, DO NOT blindly memorize my solutions

Target audience: beginners in js (please feedback!)

This week’s question:
Implement a ProductList class that has two methods, add(n) (which pushes the value n to the back of the list) and product(m) (which returns the product of the last m numbers in the list). David made an awesome template for submitting your solutions, if you’d like to use it!

Usage:

ProductList p = new ProductList();
p.add(7);         // [7]
p.add(0);         // [7,0]
p.add(2);         // [7,0,2]
p.add(5);         // [7,0,2,5]
p.add(4);         // [7,0,2,5,4]
p.product(3);     // return 40 because 2 * 5 * 4

As someone who's been writing nothing but JS for a while, the first thing that comes to mind is to make use of lexical scope of JS functions to store the array. I can't say I'm super familiar with the Scope and Closure terminologies, but I'm fairly aware of what they do and how to make use of them.

so let's create a list in a function.

function ProductList() {
  this.list = [];
}

So to look at what's happening with the array, we can write some driver code

let p = new ProductList();
let p2 = new ProductList();
console.log(p.list, p2.list); // [] []
p.list.push(1);
p.list.push(2);
console.log(p.list, p2.list); // [1, 2] []

so far so good, we know that using the new operator essentially creates an object with the this context from the function.

The next step we want to do is to add elements to the list from a function provided by ProductList instead of using the one from the array. We will return this function in a JSON object, as well as the list array (if not the list will be undefined, see link to new operator above)

function ProductList() {
  this.list = [];

  function add(num) {
    this.list.push(num);
  }
  return { add, list: this.list };
}

If we change the p.list.push(1) in the driver code above to p.add(1) we should have the same result.

Finally we need a product function to multiply all the elements in the list. We want the last n numbers, so we can have a for loop that increments up to n and create an index that starts from the back and gets smaller up till n. Plugging in the given driver code, we should get the correct solution.

function ProductList() {
  this.list = [];

  function add(num) {
    this.list.push(num);
  }

  function product(n) {
    let result = null;
    for (let i = 0; i < n; i++) {
      const index = this.list.length - 1 - i;
      if (result === null) {
        result = this.list[index];
      } else {
        result *= this.list[index];
      }
    }
    return result;
  }
  return { add, list: this.list, product };
}

let p = new ProductList();

p.add(7); // [7]
p.add(0); // [7,0]
p.add(2); // [7,0,2]
p.add(5); // [7,0,2,5]
p.add(4); // [7,0,2,5,4]
console.log(p.product(3)); // return 40 because 2 * 5 * 4

Bonus: O(1) product but with O(n) add

This sprang to mind as an optimization upon deeper thinking it doesn't really work, as it makes the add function slower.

If we look at the problem, we realise there's no need to remove items from the list, therefore there's no need to keep the original values. How about calculating the product on insertion and then returning the results directly?

function ProductList() {
  this.list = [];

  function add(num) {
    for (let i = 0; i < this.list.length; i++) {
      this.list[i] *= num;
    }
    this.list.push(num);
  }

  function product(n) {
    let index = this.list.length - n;
    return this.list[index];
  }
  return { add, list: this.list, product };
}

codepen:

See the Pen cassidoo newsletter 2021/6 by Ten Zhi Yang
(@Tzyinc) on CodePen.