Jon Keam Doesn't Exist: March 2016

Monday, March 28, 2016

Syntax Highlighting

Blog Enhancements

I've been rocking Alex Gorbatchev's syntax highlighter for a while on this blog, and it I really liked it. It was quick and easy to use and at the time but lately, and for the past few years, I've really been into darker themes. The syntax highlighter didn't appeal to me anymore and I didn't particularly like the themes they had. So I searched around and stumbled upon Prism. I like the way Prism looks and I found the installation super simple. Take a look below at a code sample:


  var bubbleSort = function(unsorted) {
    for (var i = 0; i < unsorted.length; i++) {
      var swapped = false;
      for (var j = i + 1; j < unsorted.length; j++) {
        if (unsorted[i] > unsorted[j]) {
          var tmp = unsorted[j];
          unsorted[j] = unsorted[i];
          unsorted[i] = tmp;

          swapped = true;
        }
      }
      if (!swapped) {
        return unsorted;
      }
    }
    return unsorted;
  };

If you too want syntax highlighting like this, this is how!

Instructions

Include the theme stylesheet


      <head>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/themes/prism-okaidia.min.css" rel="stylesheet" type="text/css"></link>
      </head>

Include the prism javascript file and all the languages you want highlighted, say you wanted support for ruby


      <body>
        ...
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism-ruby.min.js"></script>
      </body>

Wrap your code that you want highlighted

 
  <pre><code class="language-ruby">
    puts 'hi' 
  </code></pre>

Done! You should get something like the following:
```
 
    puts 'hi'
  
```

Extra

For more information, definitely check out their site http://prismjs.com/.
And once you find the theme you like and language you want highlighted, stop over here for a nice cdn that will serve up the javascript and css's that you need https://cdnjs.com/libraries/prism.

Monday, March 21, 2016

Arrow Functions

I love the new arrow function in EcmaScript 6. I use it for everything, pretty much all the time :)

Quick Rundown

Basic Form


var add = (numberOne, numberTwo) => {
  return numberOne + numberTwo;
};
add(1, 2);
//returns 3

Here I'm creating a function named add that takes two parameters, numberOne and numberTwo. This function will return the two numbers added together. When the body of the function is a single expression, we can write this even more concisely.


var add = (numberOne, numberTwo) => numberOne + numberTwo;

At first glance, this looks just like a different syntax for creating a function. But there's more to it than that. Inside of the arrow function, there is no new 'this' pointer defined.

Let's look at an example (taken from MSDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions):


function Person() {
  var self = this; // Some choose `that` instead of `self`.
                   // Choose one and be consistent.
  self.age = 0;

  setInterval(function growUp() {

    // The callback refers to the `self` variable of which

    // the value is the expected object.

    self.age++;

  }, 1000);

}

Notice the strange self variable we had to create in order to access age. This is because the function growUp gets a brand new 'this' pointer that is quite different than the 'this' pointer inside of Person. That means that when growUp is called, calling this.age will not work, because there is no 'age' variable inside of the growUp function. The new fat arrow fixes this:


function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| properly refers to the person object
  }, 1000);
}

Notice that 'this' can correctly find and use the age variable. This is very nice and just feels much better overall.

Gotchas

1. Returning an object literal needs to be wrapped in parens.


const gimmeFoo = () => {  foo: 1  };
//will not work!  calling gimmeFoo() returns undefined

instead do this:


const gimmeFoo = () => ({  foo: 1  });

2. You also cannot override the 'this' inside of an arrow function. That means that bind is useless here, so don't try it. Same thing for call and apply. You can still pass in arguments, but you cannot override 'this'.

3. You also don't have access to the 'arguments' variable, but a good workaround is to use rest parameters (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters), which we won't cover here.


var f = (...args) => args[0];

4. Even if you don't have arguments, you still need the parens:


const gimmeHi = () => 'hi';

but you can also do this:


const gimmeHi = _ => 'hi';

That's pretty much it! Go forth and start using it :)

Monday, March 14, 2016

A Docker Movie - Starring Chris Pratt

Ships Ahoy

Lately I've been mucking around with a lot of Docker. If you are unfamiliar, Docker provides a new approach to deploying software. Prior to Docker, you had to install all of the libs and dependencies yourself manually on the target machine. But with Docker, you assemble containers that together all make up your application.

Think of it like Lego blocks. You have a block for, let's say Ruby. And you have a Lego block for Rails, and another Lego block for your database, say Postgres. And you put all these blocks together and you have your entire app. So you don't think of installing servers and language runtimes, you instead think of deploying containers (Lego blocks) that all work with each other. I would imagine that Chris Pratt could play Ruby in this particular movie. From the Docker website:

"Docker containers wrap up a piece of software in a complete filesystem that contains everything it needs to run: code, runtime, system tools, system libraries – anything you can install on a server. This guarantees that it will always run the same, regardless of the environment it is running in."

A Docker container for Ruby is completely self contained and works by itself. A Docker container for a Postgres database is completely self contained and works by itself. Or you could have them both running at the same time and poof they can work together. And a Docker container is super easy to run. You simply pull down the image of a container from a repository (typically DockerHub), then run it. Done.

Let's take a very simple example. I've been working recently with a design team that was building a prototype with static html, css and javascript. They had all their code locally and was zipping them up to me so I could open them up on my computer and view them. But this process was slow and it was very manual. No one could see the code except whoever they sent the zip to and I always had to bother them for the latest stuff. I wanted to be less turtle and more cat with my process.

My first thought was to standup an sftp server somewhere that they could copy files to that would then be served up by nginx or something. That approach is fine but required me to setup an sftp server and nginx and then configure both. It also required the design team to periodically upload the files so that I could view them. Things still felt very manual, and I was feeling lazy. If you guessed my ultimate solution involved Docker, you are correct :) The instructions below assume you have docker installed already. I am running ubuntu and the instructions for setting Docker up are great (https://docs.docker.com/engine/installation/linux/ubuntulinux/).

Setup

Nginx

1. Download the nginx image from DockerHub and install it locally.
docker pull nginx

2. Run the image
docker run --name prototype /usr/local/code:/usr/share/nginx/html:ro -d -p 8081:80 --restart=unless-stopped -v nginx

There's a lot here, so I'm going to break down the arguments a bit:

Option	Explanation
docker run	runs the nginx image that we pulled down from DockerHub
--name prototype	this is what I named my container. This makes it easy to start and stop the container bc I can reference it using this name, 'prototype'
-v /usr/local/code:/usr/share/nginx/html:ro	this mounts a volume from the host machine (my ubuntu aws instance) and makes it available to nginx. So the nginx docker container will see /usr/share/nginx/html, but on my real ubuntu machine, it's actually /usr/local/code. The last bit 'ro' means that docker cannot write to the volume (read only). One last gotcha, make sure that the docker group can read /usr/local/code on the host ubuntu machine or you will get permission denied errors.
-d	runs the container as a daemon
-p 8081:80	port bindings. the host ubuntu machine will forward port 8081 to the containers port 80.
--restart=unless-stopped	if the docker container dies for any reason, docker will attempt to restart it, unless a person stopped it manually using `docker stop [name]`

Source Code

I created a BitBucket repo that the design team could check code into. I went with bitbucket b/c they have nice free private plans.

CI Tool

I had Jenkins running already for other projects so I just added a new project. On BitBucket checkins to the repo I created, Jenkins would pull down the code and build it. Since everything was static and it's a prototype so I don't really care about code quality yet, my build doesn't really do anything. But what's important is that the Jenkins project has an scp step that scp's the code to my host ubuntu server. And it scp's all the code to /usr/local/code.

Flow

So to recap:
1. Design team checks in code
2. Jenkins pulls down latest and scp's it to ubuntu:/usr/local/code
3. Nginx Docker container has /usr/local/code mounted correctly and will serve everything in that dir to http://ubuntu:8081

The major wins for me here was that to download and setup nginx was very easy. And the deploy process was just as easy. And of course it happens on every checkin so I can see the latest whenever they push.

So Much More

Docker can do so much more than what I've put here. On my other projects, as part of my build process, I actually have Jenkins create Docker images that I check into DockerHub. I can then pull them from anywhere and run them; be it another developers laptop, or even production. And on every machine, it will run identically. And Docker just added Docker Cloud to make it even easier to deploy your docker images to a cloud like AWS, MS Azure or DigitalOcean. So if you haven't played with Docker yet, I really recommend doing so. And getting started is probably going to be a lot easier than you think it would be.

AddThis