Experimenting With GatsbyJS and the WordPress.com API

If you follow me on Twitter, you’ll know that my November project was to rebuild my personal site using GatsbyJS and the WordPress.com API:

If you’re not familiar with Gatsby, it bills itself as a “blazing-fast static site generator for React.” Having used React to work on Calypso and build some other small projects here and there, I figured it would be a pretty fun experiment.

Obviously, November has come and gone, and yet, you’re still seeing a traditional WordPress theme on my personal site. I ended up not launching my GatsbyJS site (although it is more or less built!) for a few reasons. I’ll touch on those reasons as well as my experience working with GatsbyJS.

Continue reading “Experimenting With GatsbyJS and the WordPress.com API”

Building a Simple React Todo List and Timer

Theodoro—A React todo list and Pomodoro Timer

One of my goals for 2016 was to ship stuff, quite a few things in fact. We’re close to half-way through the year already, but I finally shipped a thing—a simple React todo list!

GitHubProject PageGIF

On Friday, I put some finishing touches on Theodoro (I know—terrible name) a React-based Pomodoro timer and todo list project I’ve been working on. It’s not perfect, and I’m sure there are some improvements I could make. The goal of the project was always to learn about React (with everyone’s first project—a todo list). At this point, I’ve gotten what I wanted out of the project so it’s time to put it out in the wild and move on.

I wanted to breakdown some of the trickier elements I ran into along with some next steps that I’m taking in particular.

Continue reading “Building a Simple React Todo List and Timer”

My Approach to Learning JavaScript

I discuss my current approach for learning JavaScript
I shared a variation of this blog post on learning JavaScript internally within Automattic a few weeks back. I thought it might be helpful so I’ve adapted it here for a blog post. I’m also asking for some accountability help at the end.

If you’ve read my blog, project posts, or weekly updates over the past year, you’ve probably noticed a heavy focus on learning JavaScript. About a year and a half ago, I decided I wanted to move more towards doing more development-oriented work at Automattic.

I’ve never been shy about talking about this. I’m a bit believer in sharing goals out in the open versus keep them close to the chest. I thought I would share my initial thought process and how I’m currently approaching the goal for anyone that might be interested. One warning before we begin—this is just my experience. Your mileage may vary.

Continue reading “My Approach to Learning JavaScript”

Code Challenge: Simple Mode

Here’s another fun code challenge from Coderbyte:

Using the JavaScript language, have the function SimpleMode(arr) take the array of numbers stored in arr and return the number that appears most frequently (the mode). For example: if arr contains [10, 4, 5, 2, 4] the output should be 4. If there is more than one mode return the one that appeared in the array first (ie. [5, 10, 10, 6, 5] should return 5 because it appeared first). If there is no mode return -1. The array will not be empty.

Continue reading “Code Challenge: Simple Mode”

Code Challenge: Greatest Common Factor

This week’s JavaScript code challenge again comes from Coderbyte:

Using the JavaScript language, have the function Division(num1,num2) take both parameters being passed and return the Greatest Common Factor. That is, return the greatest number that evenly goes into both numbers with no remainder. For example: 12 and 16 both are divisible by 1, 2, and 4 so the output should be 4. The range for both parameters will be from 1 to 10^3.

Continue reading “Code Challenge: Greatest Common Factor”

Code Challenge: Triple Double

Each week, I offer up a JavaScript code challenge. Want more? You can find others here.

Again, this week’s code challenge comes from my trusty favorite, Coderbyte:

Using the JavaScript language, have the function TripleDouble(num1,num2) take both parameters being passed, and return 1 if there is a straight triple of a number at any place in num1 and also a straight double of the same number in num2. For example: if num1 equals 451999277 and num2 equals 41177722899, then return 1 because in the first parameter you have the straight triple 999 and you have a straight double, 99, of the same number in the second parameter. If this isn’t the case, return 0.

Continue reading “Code Challenge: Triple Double”

Code Challenge: Consecutive

Each week, I offer up a JavaScript code challenge. Want more? You can find others here.

This week’s code challenge comes again from Coderbyte:

Using the JavaScript language, have the function Consecutive(arr) take the array of integers stored in arr and return the minimum number of integers needed to make the contents of arr consecutive from the lowest number to the highest number. For example: If arr contains [4, 8, 6] then the output should be 2 because two numbers need to be added to the array (5 and 7) to make it a consecutive array of numbers from 4 to 8. Negative numbers may be entered as parameters and no array will have less than 2 elements.

Continue reading “Code Challenge: Consecutive”

Code Challenge: Additive Persistence

Each week, I offer up a JavaScript code challenge. Want more? You can find others here.

First, I’ll admit that I’m a day overdue on this code challenge. Last week, I was on vacation in Austin, TX, and I’m still playing catchup. Still, that’s no excuse! After being away for a week, I felt a bit rusty. Today’s code challenge is a shorter one from Coderbyte.

Using the JavaScript language, have the function AdditivePersistence(num) take the num parameter being passed which will always be a positive integer and return its additive persistence which is the number of times you must add the digits in num until you reach a single digit. For example: if num is2718 then your program should return 2 because 2 + 7 + 1 + 8 = 18 and 1 + 8 = 9 and you stop at 9.

Here’s my solution collapsed:

[code language=”javascript” collapse=”true”]
function AdditivePersistence(num) {
// Break up the numbers into an array
var numbers = num.toString().split(”);
// Set the initial count to 0
var count = 0;

// Return the count if num is a single number
if (numbers.length <= 1) {
return count;
};

// If num isn’t a single number
do {
// Set the initial sum to 0
var sum = 0;
// Loop over the numbers array and add each number to the sum
for (var i = 0; i<numbers.length; i++) {
sum = sum + Number(numbers[i]);
}
// Set numbers equal to the new array after splitting the sum
numbers = sum.toString().split(”);
// Increment the count variable
count = count + 1;
// Do this while numbers.length is larger than 1
} while (numbers.length > 1);

return count;
};
[/code]

First, I took the num argument passed in and split it up into an array so I could cycle over it. If the array had a length of 1, I could just return 0.

If the length of the array was larger than 1, I started a do/while loop. I cycled over each number in the array with a for loop and added it to the sum variable. At the end of the for loop, I set the numbers variable equal to the sum broken up into an array. For example, if the initial number was 2345, the sum would be 14. So, the numbers variable would be set equal to [1,4]. I repeated this process while numbers.length was greater than 1. Finally, I returned the count, which was incremented each time I went through the do/while loop.

Code Challenge: Number Search

Each week, I offer up a JavaScript code challenge. Want more? You can find others here.

This week’s code challenge again comes from Coderbyte. It’s quite a bit easier and shorter than last week mainly because I was slammed with Drink for Pink events and prepping for the Automattic Grand Meetup!

Here’s the gist:

Using the JavaScript language, have the function NumberSearch(str) take the str parameter, search for all the numbers in the string, add them together, then return that final number divided by the total amount of letters in the string. For example: if str is “Hello6 9World 2, Nic8e D7ay!” the output should be 2. First if you add up all the numbers, 6 + 9 + 2 + 8 + 7 you get 32. Then there are 17 letters in the string. 32 / 17 = 1.882, and the final answer should be rounded to the nearest whole number, so the answer is 2. Only single digit numbers separated by spaces will be used throughout the whole string (So this won’t ever be the case: hello44444 world). Each string will also have at least one letter.

Here’s a test case for example:

Input = “H3ello9-9”
Expected Output = 4

The string “H3ello9-9” contains 6 items that aren’t numbers. If you sum up the numbers (9,9,3), you’ll get 21. If you divide that by 6, you get 3.5, which rounds to 4.

Here’s another test case:

Input = “One Number1
Expected Output = 0

Here’s my solution collapsed:

[code language=”javascript” collapse=”true”]
function numberSearch(str) {
var separatedString = str.split(”);
var letters = [];
var numbers = [];
var sum = 0;

for (var i=0; i<str.length; i++) {
var currentItem = separatedString[i];
if (isNaN(parseInt(currentItem))) {
letters.push(currentItem);
} else {
numbers.push(currentItem);
};
};

for (var i=0; i<numbers.length; i++) {
currentNumber = Number(numbers[i]);
sum = sum + currentNumber;
};

return (Math.round(sum/letters.length));
};
[/code]

First, we create some variables we’ll need later on. The first (separatedString) breaks up the given string. The variables letters and numbers hold empty arrays. Then, we set the sum to 0.

Next, we cycle over the string determining whether or not currentItem is a number by using isNaN(parseInt(currentItem)). If the item isn’t a number, push it on to the letters array. If it is a number, push it on to the numbers array.

Next, we cycle over the numbers array and add the currentNumber to the sum total.

Finally, we use the Math.round() method to round up the result of sum divided by letters.length and return that number.

Code Challenge: Blackjack

Each week, I offer up a JavaScript code challenge. Want more? You can find others here.

This week’s challenge comes from Coderbyte, which has been a fun resource. The instructions are a bit of a doozy:

Have the function BlackjackHighest(strArr) take the strArr parameter being passed which will be an array of numbers and letters representing blackjack cards. Numbers in the array will be written out. So for example strArr may be [“two”,”three”,”ace”,”king”]. The full list of possibilities for strArr is: two, three, four, five, six, seven, eight, nine, ten, jack, queen, king, ace. Your program should output below, above, or blackjack signifying if you have blackjack (numbers add up to 21) or not and the highest card in your hand in relation to whether or not you have blackjack. If the array contains an ace but your hand will go above 21, you must count the ace as a 1. You must always try and stay below the 21 mark. So using the array mentioned above, the output should be below king. The ace is counted as a 1 in this example because if it wasn’t you would be above the 21 mark. Another example would be if strArr was [“four”,”ten”,”king”], the output here should be above king. If you have a tie between a ten and a face card in your hand, return the face card as the “highest card”. If you have multiple face cards, the order of importance is jack, queen, then king.

It sounds a bit confusing at first glance, but if you know how to play blackjack, the rules make sense, particularly the rules surrounding aces. Here are some test cases:

  • Input = “four”,”ace”,”ten”; Output = “below ten”
  • Input = “ace”,”queen”; Output = “blackjack ace”

Continue reading “Code Challenge: Blackjack”