Publishing an NPM Module Part 1

These are my notes based on the phenomenal tutorial by Kent C. Dodds hosted by egghead.io both of which are my go to sources when I want to learn something new. I highly suggest you sign up for the pro subscription.

>Part 1 | Part 2 | Part 3 | Part 4 | Part 5 | Part 6 | Part 7

Part 1 : The Setup

These are my notes based on the phenomenal tutorial by Kent C. Dodds hosted by egghead.io both of which are my go to sources when I want to learn something new. I highly suggest you sign up for the pro subscription. They are focused on a ‘code first’ delivery so you start learning right away. I made these notes to dig a little deeper on some of the topics, but I would not have known where to get started without these two wonderful resources!

I will be using the following icons to denote certain sections.

glyphicons-55-clock  = Time Saving Idea

glyphicons-499-sunglasses = Pro Tip

glyphicons-31-pencil = Note

glyphicons-197-exclamation-sign = Alert

glyphicons-424-git-create = Code Update

glyphicons-28-search  = A Closer Look

Overview

  1. Create the git repo
  2. Create the library
  3. Publish to npm
  4. Create test suites
    1. Karma
    2. Mocha
    3. Chai
  5. Set up continuous Integration
    1. Travis-CI
  6. Add ES6/ES2015
    1. Babel
    2. web pack
  7. Distribute
    1. NPM
    2. GITHUB
    3. UMD

Create the GitHub Repo

First head over to github.com to create your account if you don’t already have one. Next create a new repo. You can skip creating the README.md as we will be making our own in the next few moments. Take note of the url for the repo as we are going to add it in as the origin in the following steps.

$ echo “# Project name” >> README.md
$ git init
$ git add README.md
$ git commit -m "Initial Commit"
$ git remote add origin <git url> //i.e. https://github.com/jmichelin/something.git
$ git push -u origin master

Setting up NPM

Install Node

To verify that you have node installed run:

$ npm -v

Head to https://docs.npmjs.com/ and read about init-author.name, init-author-email, init-author-url, init-license and save-exact. These set up defaults making future projects even easier. The save-exact true makes your project configured with an exact version rather than using npm’s default semver range operator. There are more but these are some of the more common ones that tend not to change between projects. 

glyphicons-55-clock
Run the following commands:

$ npm set init-author-name 'Name' 
$ npm set init-author-email '<your_email>' 
$ npm set init-author -url '<your_website>' 
$ npm set init-license 'MIT'
$ npm set save-exact true //makes sure you use exact versioning

let’s look at npmrc:

$ cat ~/.npmrc

You will see all of the defaults you set above saved there in case you ever want to edit them.

Create npmjs.com account by heading over to npmjs.com and click on sign up.

screen-shot-2016-09-06-at-4-27-30-pm

Then back in your console:

$ npm adduser

enter npmjs account name, password and Email, add user creates an auth token that you should keep private.

$ npm init

Accept default name, version, enter a brief description, entry point is the file that will be looked at when you require(‘module-name’); change the entry point to read src/index.js accept default for test, for github repo, enter some keywords, accept default license, and create package.json.

Next…Creating a Library

glyphicons-499-sunglasses start thinking about what you might want to make and keep it simple.

Added UMD version to NPM Module

I added a browser consumable version of my amazing (to me at least) random-character-name module. Now you can just include the cdn version and you are good to go. It was pretty easy really. I just needed to add a few build scripts to package.json. I installed webpack as a dev dependency and put in the following two scripts:

"build:umd": "webpack --output-filename index.umd.js",
"build:umd.min": "webpack --output-filename index.umd.min.js -p",

You can use it over at https://npmcdn.com/random-character-name@1.6.0/dist/index.umd.js or for the minified version head to  https://npmcdn.com/random-character-name@1.6.0/dist/index.umd.min.js.

Happy random name generating!

My first NPM Module

I finally got around to publishing an NPM module (Thank you Kent C Dodds!) It is pretty simple, but it  solves a problem I have had as a writer. Names! It let’s a user generate a name, an array of names with a given length, a massive list of names or a name with specific Initials.

Simply run the following.

npm i random-character-name

and you are good to go! Head to npm or github if you want to contribute!

The method list() will return a list of all random names that were generated. The method single() will return a single random name. The method startsWithLetter(f,m,l) will let you set the initials. The method numberOfNames(number) will return the requested number of names.

var rndNameGen = require(random-character-name);
 
rndNameGen.list();
//generates a large array of names 
/* 
ex.
  [‘Em Andre Vento’,
  ‘Marsiella Lester Drisko’,
  ‘Lou Charley Hoang’,
  ‘Bettye Ransell Cristabel’,
  …
  ‘Shawnee Timothee Rigby’,
  ‘Roch Wilbur Ithnan’,
  ‘Shanta Wheeler Milicent’,
  ‘Janela Wally Marlowe’ ]
 
*/
 
rndNameGen.single(); 
//generates a string with a random name 
//ex. ‘Donnie Reinhard Levin’ 
 
rndNameGen.startsWithLetter(A,C,E);
//generates a string with a name with requested initials 
//ex. ‘Ajay Christophorus Elset’ 
 
rndNameGen.numberOfNames(3)
//generates an array with the number of names requested. 
/*
ex.
[ ‘Nedi Burt Lexine’,
  ‘Cairistiona Jacobo Merl’,
  ‘Annaliese Bartolomeo Cherian’ ]
*/

Super Useful!

If you are doing a fresh install jump to step three! It will save you the hassle of doing it later. I had to do this to make my travisCI much easier to deal with on different machines.

  1. Find the path to npm’s directory:
     npm config get prefix
    

    For many systems, this will be /usr/local.

    WARNING: If the displayed path is just /usr, switch to Option 2 or you will mess up your permissions.

  2. Change the owner of npm’s directories to the name of the current user (your username!):
     sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}
    

    This changes the permissions of the sub-folders used by npm and some other tools (lib/node_modules, bin, and share).

This worked for me but there are other options. On the npm docs site.

5 Myths About Javascript

1. JavaScript is ECMAScript.

ActionScript and JScript are other languages that implement the ECMAScript.  JavaScript was submitted to ECMA for standardization but due to trademark issues with the name Javascript the standard became called ECMAScript. Every browser has a JavaScript interpreter.

2. JavaScript just for the front end.

With the advent of nodejs and io.js (and others) this is no longer true. JavaScript can now be used to build full fledged RESTful and socket based API’s. Take a look at loopback.io and hapi.js for two (of many) API libraries.

3. JavaScript is simple.

There was a period of time that JavaScript was for front end DOM manipulation and that was about it. Over time the language has matured into a wonderful and powerful functional programming language that can emulate multiple types of inheritance paradigms.

4. JavaScript is not scalable

If this were the case we would not see companies like Google and Facebook spending so much time using it. These guys know scalable and almost everything you use on both of those sites rely on the fact that it is scalable, modular and extensible.

5. JavaScript is boring

No way! You can do so much with it that boring should never enter your mind. Even if you think you have mastered the language, if you explore a bit more you will find the weird stuff left over to maintain backwards compatibility. Check out wtfjs.com for more.

 

 

 

Out of Scope! Out of Time!

 

Dreams are great. Dream big, that’s what they always say. As a programmer you must retune this concept to dream within a reasonable scope. In this post I will go over my original concept for my second solo week project and then what actually ended up getting created.

Pre-Dream-Crush Wishlist

  1. Authenticate a User
    1. redirect based on user type
      1. if player show player dashboard
      2. if storyteller show storyteller dashboard
    2. allow many authentication methods
      1. github
      2. facebook
      3. username/password
  2. Create a Game Container
    1. Game state aware dashboards
      1. if game activated show game active dashboard
      2. if game is not activated show lobby style dashboard
  3. Integrated Chat
    1. allow for slash commands
      1. /init rolls initiative (based on character sheet)
        1. Show users profile picture in order on the side of the chatroom
      2. /roll <NUM> rolls the <NUM> of six sided dice
  4. Character Management
    1. Rules based character creation
    2. Import of xml files with weapon info
    3. Chat aware leveling system
    4. Save a history so you can ‘replay’ at times in the past
  5. Game Management
    1. Create a game
      1. Manage individual game sessions
        1. Scheduling and invites
        2. Calendar for in world and real world
      2. Asset Management
        1. Sound board
        2. Graphics
          1. Fog of War
        3. Maps with player/npc tokens
      3. NPC Management
        1. Scale to player level
        2. Combat Helper
        3. Name Generator
        4. NPC Generator by type
  6. Much Much More!

 

What did I end up with? A combat assistant. I use it, it works but oh man is it not what I had in my original vision.

So what did I learn? Iterative thinking should be core to project conceptualization. If I had only thought of my program as a combat assistant I would have been very happy with my results. However because I had such grandiose visions of the first iteration I felt I let myself down.

It’s all about the MVP baby! Change that mindset. It’s awesome I had so many ideas, but if only I thought about them as user stories in the backlog and the MVP as my main goal my personal satisfaction would have been much higher in the end.

Prototypal Inheritance and you.

Let’s first start by saying that Javascript is a little interesting when it comes to classes and objects. Technically I think Javascript is basically classless (probably why I like it so much…) but there are class-like activities. Just remember at its root, an Object is a just a unordered collection of key:value pairs. Anything other than strings, numbers, booleans, undefined and null is an object.

Let’s create some objects.

var anObject = {};
anotherObject = new Object();

-or-

function MyObject() {}
var myObject = new MyObject();

 

Now where does Prototypal Inheritance enter into this? Each object has an internal link to another object, known as its prototype.  This other object also has a prototype, and so on until we reach null as its prototype.null ending the chain.

Objects are buckets of properties with links to a prototype object. When access to a property is requested it will look not only at the specific objects property but all the way back up the prototype chain until the property is found or the end of the chain.

Let’s add some methods to the objects.

function MyObject() {}

var myObject = new MyObject();

MyObject.simpleLog = function(value) {
    console.log(value);
}

var difObject = new MyObject();

difObject.simpleLog = function(value){
    console.log('The value is: ', value);
}

difObject.simpleLog("something should go here"); //calls the instance specific method
MyObject.simpleLog("something should go here"); //calls the static Object method
MyObject.prototype.simpleLog = MyObject.simpleLog; //apply the static method to all instances from here on in
difObject.simpleLog("still calling instance method");  //still calls the instance method
var yetAnotherObject = new MyObject();
yetAnotherObject.simpleLog("inherited from MyObject"); //inherited simpleLog() from MyObject
MyObject.simpleLog("I also inherit."); //pre-existing instances also inherit the new function

 

So as you can see when you add a method to the prototype it gets inherited along the prototype chain. There is an order to when this gets used as you can see in the difObject.simpleLog(); call that it uses the local instance method as it does not have to go up the chain to find the one we added with the line MyObject.prototype.simpleLog = MyObject.simpleLog;

Now when we reference methods in JavaScript it is not strictly accurate in the form that other class-based languages. For JavaScript any function that you add as an object property becomes a method for that object.  An inherited function acts just as any other property on that object, including method overriding!

Another key point to remember is what happens to this. Its value points to the inheriting object not back to the prototype object where the function is an own property. Let’s look at another example.

var myObject = {
    staticValue: 40,
    someMethod: function(val) {
      console.log(this.staticValue);
      return this.staticValue + 1;
    }
};

console.log(myObject.someMethod()); //42

var yourObject = Object.create(myObject);

yourObject.staticValue = 20;

console.log(yourObject.someMethod());  //21

 

As you can see once we overwrite a value it will no longer work its way up the chain allowing for differences in the objects after they are created. Very useful! I will be digging deeper into objects and modules in another post.