Barbell Weight Calculator – Android App

I’ve published my first Android app! ? This is yet another Barbell Weight Calculator, pretty much a copy of my web app version. The main differences are: 1. it is an installable Android app from the Google Play Store, and 2. it can calculate percentages of your one rep max!

Since this app was created using React Native, the code can be built for Android devices, as well as iOS devices. I would love to put this app in the Apple App Store, however, Apple charges a yearly developer fee of $99! Google, on the other hand, charges only a one-time developer fee of $25. So in the mean time, I’ll only be supporting the Android version of the app.

If you have an Android phone, check out the Play Store link below! Otherwise, feel free to take a look at the code on GitHub.

Google Play Store: https://play.google.com/store/apps/details?id=com.seewes.barbell

GitHub: https://github.com/doobix/barbell-native

Screenshots:

Barbell Weight Calculator

Hi! Haven’t updated this blog in a while. Just wanted to say that I made a little web app using React to make calculating barbell weights easier.

For example, if we’re trying to lift 210 pounds, which plates do we need to get? By using the web app, it quickly tells us that each side of the barbell needs to have: 45lbs, 25lbs, 10lbs, and a 2.5lbs.

Check out the web app here: http://barbell.seewes.com

GitHub repo here: https://github.com/doobix/barbell

Screenshot:

Integrating Counter-Strike: Global Offensive with Philips Hue

csgo-c4-hue

Recently, Valve had released their Counter-Strike: Global Offensive game state integration for developers to use. This allows the game client to send all game data, such as the player’s health, guns, ammo, frags, etc. to a HTTP POST endpoint server.

After seeing the PGL Arena Effects in the DreamHack Cluj-Napoca CS:GO tournament a couple of months ago, I decided to make full use of my Philips Hue lights in my room by recreating the C4 bomb lighting effects.

Coding

Since I’ve been coding in Python a lot recently, I stuck with this language for this project. First, I had to create the HTTP server to receive the POST game state data, so I used the Flask microframework. I launched the Flask server and joined a game in CS:GO, and immediately I was seeing tons of JSON being received in the terminal window. All I really needed was the C4 bomb information, which I was able to find in data[’round’][‘bomb’]. By checking that key, I noticed there were 3 values if the key existed: planted, exploded, and defused. If the bomb isn’t planted, there won’t be a bomb key in the round object at all. So after getting the bomb status, I made the server write the result to a file conveniently named bomb_status.

Now I had to do the fun part — making my Philips Hue lights turn on and change colors. I went step by step with the Philips Hue API Getting Started guide, and it was very easy to follow and understand the RESTful interface. Once I understood how to control the Hue lights, I wrote a 2nd Python script for reading the bomb_status file. In this 2nd script, I have a while loop that runs indefinitely, with a 250ms wait time in between each loop. In each loop iteration, it gets the bomb status and goes through a series of if-statements to determine what to do. Here’s the run down of it:

  • if bomb is planted: make each light blink red 1-by-1.
  • if bomb is planted and plant time has been >= 30 seconds: make all lights blink red every second.
  • if bomb is exploded: make all lights turn orange.
  • if bomb is defused: make all lights turn blue.
  • if bomb has no status: make all lights turn white.

And that’s basically it.

Final Result

My Python code is now on GitHub:
https://github.com/doobix/csgo-c4-hue

I have created a Node.js version of the same code, also on GitHub:
https://github.com/doobix/csgo-c4-hue-node

A video of the script in action is uploaded to YouTube:
https://www.youtube.com/watch?v=QBdI54MHB-k

Reddit thread:
https://redd.it/3wjpgg

csgo-c4-hue

Code School

If you’re interested in learning some programming, I recommend checking out some of the free courses on Code School. They have some very good instructional videos, and they give you assignments to do after each video is watched.

If you enjoyed the free courses, you can sign up through this special link to get full access for only $9 for the first month: http://mbsy.co/cr67n. After that, the price goes back to $29/month, but you can cancel the subscription any time.

Setting up a brand new OS X for web development

After getting a new MacBook for work, there were a few things I installed to make it better for coding, which I have listed below.

Oh My Zsh

Oh-My-Zsh is an open source, community-driven framework for managing your ZSH configuration. It comes bundled with a ton of helpful functions, helpers, plugins, themes, and a few things that make you shout… “Oh My ZSH!”

To install, run this command in terminal:

curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh

Solarized

A theme with a nice color palette to make looking at the terminal easier on the eyes.

Sublime Text

The best text editor for coding.

subl terminal shortcut

Edit ~/.zshrc , and add this line to the very end of the file:

alias subl='/Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl'

Restart terminal for the change to take effect.

Transferring to Google Domains

One of my domain names is expiring this month, and it would cost $11.98 + a $0.18 ICANN fee to renew for 1 year on Namecheap.com. I’ve been using them for a while now (since 2009), and I think it’s time for a change.

Google Domains (beta) came out this summer, and their domain price is exactly $12.00 for 1 year. Not to mention, they include some cool FREE features, such as the whois privacy guard and up to 100 email aliases. Namecheap.com charges $2.88 for their whois privacy guard, and $9.88 for only 1 email mailbox.

So, it was a no-brainer to transfer out of Namecheap.com and into Google Domains.

namecheap2googledomains

seeglassdoor – My First Chrome Extension

After graduating from Hack Reactor last month, I’ve been looking for companies to apply to. One thing that I found myself doing a lot of was visiting a company’s website, and then going to Glassdoor to see how employees rate that company. So I thought, wouldn’t it be nice to have a 1-click button that would display the Glassdoor ratings on demand? It would save a lot of time opening a new tab, going to Glassdoor.com, and then searching for the company.

Seeing that no such extension existed in the Chrome Web Store, I decided to create one myself. I had modified existing Chrome extensions before, but this was my first time creating a brand new extension from scratch.

Introducing… seeglassdoor!

The most difficult part was to figure out how to grab a URL from a current tab.

To grab a URL of a tab that you are viewing, you need the “tabs” permission in your manifest.json  file:

"permissions": [
  "tabs"
]

Then in your javascript, you will be able to use this code:

chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {
  var url = tabs[0].url;
  console.log(url);
});

Overall, this project was not a very difficult one, and was a good learning experience for my first Chrome extension. Feel free to take a look at my extension below.

Download seeglassdoor from the Chrome Web Store: https://chrome.google.com/webstore/detail/seeglassdoor/cgganckkpjppenjelhbimliplciledbb

GitHub seeglassdoor Project Repo: https://github.com/doobix/seeglassdoor

Quirky JavaScript Object Access

My friend asked me a simple JavaScript question last night… or so I thought.

The premise is that we have a javascript object like this:

var object = {
  1: {
    items: ['a','b','c']
  }
}

Now the question is, how do you access that items  array?

From what I know:

  • An object’s keys are stringified so that they are strings.
  • Using object.X  is the same as writing object[‘X’] .

So, I told my friend that we can access that items  array by using object.1.items  or object[‘1’].items .

However, object[‘1’].items worked, while object.1.items threw an error! To my surprise, object[1].items  also worked!

Now let’s say the javascript object is like this:

var object = {
  one: {
    items: ['a','b','c']
  }
}

In this second case, I tested it in the Chrome browser console and confirmed that it is how I originally thought it would work: object[‘one’].items  and object.one.items  both work (and object[one].items  does not work).

I think I will just use the object[‘X’]  format since it works in both cases: when the key is a number and when it is a word.

I still don’t know the reason for the quirkiness when the key is an integer, so feel free to leave a comment and let me know!

Pigeonhole Sort

Pigeonhole sort is an interesting sorting algorithm that makes use of an array filled with zeros and its indices. It can sort values in linear time and is relatively simple to implement. However, the tradeoff for its sorting speed is the space that it requires. Also, since it makes use of array indices, only positive integers can be sorted using this algorithm.

So the basic idea of pigeonhole sort is:

  • Create a new array (let’s call it pigeonholeArray) and fill it with zeros.
  • Iterate through the unsorted user’s array (inputArray).
  • For each value of the inputArray, add 1 to the index corresponding with the value in the pigeonholeArray.

Let’s say for this example, we want to sort this inputArray:

// inputArray:
[5, 2, 7, 5, 1]

The first thing the algorithm needs to know is what the maximum value of the inputArray is. We need to create a pigeonholeArray that has indices that go up to the max value. If we don’t know the maximum, we’ll have to loop through the inputArray one time to figure it out. In this case, our biggest value is 7, thus we need to create a pigeonholeArray that can hold 8 elements (which will have indices 0 to 7).

// pigeonholeArray:
[0, 0, 0, 0, 0, 0, 0, 0]

Now we need to loop through the unsorted inputArray (again), and as we do that, we will add 1 to the pigeonholeArray’s value at the pigeonholeArray’s index corresponding with the inputArray’s value. So as we iterate our input array, our pigeonhole array will look like this:

// Progress of pigeonholeArray
[0, 0, 0, 0, 0, 1, 0, 0] // when the inputArray value is at 5
[0, 0, 1, 0, 0, 1, 0, 0] // when the inputArray value is at 2
[0, 0, 1, 0, 0, 1, 0, 1] // when the inputArray value is at 7
[0, 0, 1, 0, 0, 2, 0, 1] // when the inputArray value is at 5
[0, 1, 1, 0, 0, 2, 0, 1] // when the inputArray value is at 1

As you can see, after looping through the entire inputArray, our pigeonholeArray will contain all of inputArray’s values. We will just have to make one last iteration through the pigeonholeArray. For each pigeonholeArray’s value that is greater than zero, we’ll add the pigeonholeArray’s index to the inputArray. We can replace the old values in the inputArray so that no new array needs to be created.

Check out the completed algorithm below:

function pigeonholeSort(inputArray) {
  // Find the max value in inputArray
  var max = inputArray[0];
  for (var i = 1; i < inputArray.length; i++) {
    if (max < inputArray[i])
      max = inputArray[i];
  }

  // Create pigeonholeArray filled with zeros
  var pigeonholeArray = [];
  for (var i = 0; i <= max; i++) {
    pigeonholeArray.push(0);
  }

  // Iterate through inputArray and add 1's to pigeonholeArray
  for (var i = 0; i < inputArray.length; i++) {
    pigeonholeArray[inputArray[i]]++;
  }

  // Iterate through the pigeonholeArray and replace values in inputArray
  var inputArrayIndex = 0;
  for (var i = 0; i < pigeonholeArray.length; i++) {
    // Add to inputArray until the current pigeonholeArray index is 0
    while (pigeonholeArray[i]) {
      inputArray[inputArrayIndex] = i;
      pigeonholeArray[i]--;
      inputArrayIndex++;
    }
  }

  // return sorted inputArray
  return inputArray;
}

How the JavaScript Event Loop Works

Event Loop

JavaScript has this system called an event loop. I’m not sure if my idea of it is exactly correct, but I will try to explain it from what I can recall from the lecture.

So basically, the event loop is something that is continuously running in the background of your website only if there is nothing in the call stack. It does 3 things:

  1. Invokes functions sitting in the call stack.
  2. Checks the event table for functions.
  3. Checks the message queue for functions.

Call Stack

The call stack contains functions that need to be invoked. If the functions have any callbacks, those will get added into the event table to be invoked when it is time to do so.

Example: Let’s say the current time is 2:00:00pm, and the call stack contains this function that logs “Hello World” after 1 second.

setTimeout(console.log("Hello World"), 1000);

That will get invoked, and the callback function console.log(“Hello World”)  would be added to the event table with the time set to 2:00:01pm.

Event Table

The event table stores more functions with the specific time that they should be ran. If the time in the table is greater or equal to the current time, then the function will be moved to the message queue.

Example: console.log(“Hello World”)  would only be added to the message queue when the clock has turned to 2:00:01pm.

Message Queue

Lastly, the message queue contains functions that are next in line to be ran. These functions will be popped off the queue and be added to the call stack.

Example: console.log(“Hello World”)  will be moved into the call stack. This completes a full circle, and the event loop will repeat again.