Tag Archives: utility

John Michelin 2:40 pm on April 4, 2017
Tags: , , , , , utility   

A little fun with Javascript

Just playing around with the spread operator and I found a neat little design pattern I think I am going to work in:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
 
let testArr = [9,1, 2, 6, 3, 4];
const newMax = (arr) => {
  if(arr.length === 1) { return console.log('end')};
  var [a, ...arr] = arr;
  let max = Math.max(a,...arr);
  console.log(max ,' >=', ...arr);
  newMax(arr);
}
newMax(testArr);
//output
9 ' >=' 1 2 6 3 4
6 ' >=' 2 6 3 4
6 ' >=' 6 3 4
6 ' >=' 3 4
4 ' >=' 4
end

Seems a fun way to look for edges like in the water trap toy problem? I am not sure, but it will be fun to play around with it.

Another thing that used to annoy me was how you had to use string concatenation. It just looked so ugly. I finally (okay I am late to the party) started using backticks for multi-line parties!

1
2
3
4
5
6
7
8
 
var motion = `Le mouvement de lacet sur la berge des chutes du fleuve,
Le gouffre à l’étambot,
La célérité de la rampe,
L’énorme passade du courant
Mènent par les lumières inouïes
Et la nouveauté chimique
Le voyageurs entourés des trombes du val
Et du strom.`

And finally a little more fun with the spread operator (thanks Alex Rauschmayer) but you can make an array only contain unique values in a very clean, native way.

1
2
3
4
 
const arr = [7, 3, 1, 3, 3, 7];
[...new Set(arr)]
//returns
[ 7, 3, 1 ]
John Michelin 6:20 pm on September 26, 2016
Tags: , , , utility   

Publishing an NPM Module Part 7

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 7: Making a Browser Build

Now what if we wanted to make it so a website could consume our nifty library? We could force them to create a node api to use our wonderful features. Or we could be nice and just let them load up via cdn! I think we should go that route. So first we need to install webpack the module bundler! In a nutshell webpack will take all of your various bits and bobs and package them up. So head to your project folder in your console and type:

$ npm i -D webpack

Now we need to create a basic config file for it.

import {join} from 'path'

const include = join(__dirname, 'src');

export default {
    entry:  './src/index',
    output: {
        path: join(__dirname, 'dist'),
        libraryTarget: 'umd',
        library: 'randomCharacterName',
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {test: /\.js$/, loader: 'babel', include},
            {test: /\.json$/, 'loader': 'json', include}
        ]
    }
}

Entry is pretty simple, where do we look for the app? Output is also fairly self-explanatory, where do we put the distributed files and what do we do with them. Path is the place, libraryTarget is what format we will be exporting, in our case we are using umd and finally library is just the name of the library. The devtool section specifies a tool to help with debugging in our case we are using source-map to help us track down where errors are actually occurring.  The modules section allows us to use certain loaders. In our case we will be using babel load and json loader.  In fact we should probably install them!

$ npm i -D babel-loader json-loader

Now that those are in place we need to modify a few things in our package.json file. We are going to rename build to build:main, add build:umd and build:umd.min.

glyphicons-424-git-create
"build:main": "babel --copy-files --out-dir dist --ignore *.test.js src",
"build:umd": "webpack --output-filename index.umd.js",
"build:umd.min": "webpack --output-filename index.umd.min.js -p",

Go ahead and run:

$ npm run build:umd

Neat! Only problem now is how to we run all of these when we need to build again… There is a nifty package just for that called npm-run-all.

$ npm i -D npm-run-all

Now jump back to package.json and add in the new supercharged build script:

"build": "npm-run-all --parallel build:*",

Now after you have this all committed and pushed take a look at npmcdn.com/name-of-your-library. See mine for an example. You can go to a specific version by adding an @ to the end of the url and specifying the semver i.e. 1.6.0. You can also specify which one you want by adding a pointer to a specific file in your dist directory. 

https://npmcdn.com/random-character-name@1.6.0/dist/index.umd.min.js

All cool stuff! This is the conclusion of this tutorial. My next one will be building out an API, stay tuned.

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
John Michelin 2:45 pm on August 5, 2016
Tags: bash, , sudo, travisCI, utility   

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.