Hemanth.HM

A Computer Polyglot, CLI + WEB ♥'r.

Authoring Node Modules

| Comments

So far I have authored/contributed around 200+ modules on npm and they get around 1.5M downloads per month, which is a decent figure; as a part of this I have learnt a few things and I would like to share the same in this post.

Todo before writing a module:

  • Search npm and look for an already existing module that solves your issue: you could do a npm search <module> or search from the site

  • If you find one such good module, do read its code and see if you can improve something, it might be performance, logic or test fixes.

  • If you find a module and it does not do exactly what you are looking for, then send a PR with the changes you wish.

Writing a neat package:

  • If you are one of those smart lazy devs, you might want to use generator-node. If that is too heavy for you then checkout generator-nm

  • If you do not want generators you can stick with npm init and create the required dir structure manually.

  • Make sure your package.json is valid, maybe you would need package-json-validator

  • If you are new to npm you can use validate-npm-package-name to check if your package name is a valid npm package name.

  • It would be good if you make sure that your package.json has a files attribute which in turn has a main attribute in it.

  • Make sure you have test cases in place and also integrate it with continuous build service, like travis.

  • Use badges like: nodei, david et.al

  • Make sure your README.md looks good, as it has info about how to install your module, what it does, API docs and a gif, logo is a plus.

  • Take care while releasing package, using tools like release-it

Getting to the top:

There are many ways to showcase your module so that people will find it and hopefully use it but here are a few good ways to create a useful package:

  • Dig into GitHub and find a few trending projects, read the source, find code that can be extracted into a module, make a module and send a PR with it, most of time it gets accepted as modularity always wins.

  • Dig into the most dependent modules of node and repeat the above steps.

  • If the above did not work in your favour, make your own light weight module that just does a small part of the larger module.

P.S: It's not just about getting to the top, rather it's about doing one thing and doing it the best way.

Further reading:

P.S: Thanks to @nihar108 for typo and grammar fixes.

ES7 Async Await

| Comments

async/await of ES7 is one my fav proposals, that would for sure change the way we handle asynchronous code in javascript!

Let see it's application with few examples:

Promise sample:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let p1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => { resolve('Promises 1 '); }, 30);
  });
}

let p2 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => { resolve('Promise 2'); }, 10);
  });
}

async function getVal() {
  var res1 = await p1();
  var res2 = await p2();
  return res1 + res2;
}

(async function() {
  var res = await getVal();
  console.log(res); // Promise 1 Promise 2
}());

FS stuff:

1
2
3
4
5
var lieFS = require('lie-fs'); // Promisifed FS.
(async function() {
  var list = await fs.readdir('~/');
  console.log(list);
}());

Chain animation [From the spec]:

1
2
3
4
5
6
7
8
9
async function chainAnimationsAsync(elem, animations) {
  var ret = null;
  try {
    for (let anim in animations) {
      ret = await anim(elem);
    }
  } catch(e) { /* ignore and keep going */ }
  return ret;
}

async await fetch!

1
let data = await (await fetch(url)).json()

Do let me know if you have your own set, until then happy async/await!

Create a Nodeschool Workshop

| Comments

Today happens to be the international nodeschool day and hence this post!

There are many ways of creating a nodeschool workshop, in this post I shall walk you through the steps of creating a workshop using a module /me authored named adventure-runner

First up install the module: npm install --save adventure-runner

All you need in your workshop root:

  • runner.js: The brain of the workshop.

  • problems dir: Where all your problems are located.

  • package.json: Like any other module.

runner.js would be like:

1
2
3
var runner = require('adventure-runner');

runner('example-adventure',[ 'dinosaurs', 'robots', 'wowsers' ]);

or

1
2
3
var runner = require('adventure-runner');

runner('example-adventure','./problems');

P.S: Use the first variant if the order of the problems are important.

The problems dir will have sub dirs of problem in it, in our example the diansaurs dir must have a index.js in that, which would:

  • Exports problem statement with exports.problem

  • Exports verify function exports.verify = function(args, cb) where args would be the args passed from the CLI to verify and cb would decide if the solution to the problem was proper or not.

Let's create a simple nodeschool adventure, called adventure-math:

Basic dir setup:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Create a dir named adventure-math and cd into it.
mkdir adventure-math && cd $_

# Create a empty package.json and install the deps.
echo {} > package.json
npm install adventure-runner

# Create a `runner.js`
touch runner.js

# Create a problems dir and cd into it
(
  mkdir problems && cd $_

  # Create a addition problem dir with index.js in it.
  mkdir addition
  touch addition/index.js
)

Write some code:

Fill the runner.js with the style you intent to use.

1
2
3
var runner = require('adventure-runner');

runner('math-adventure','./problems');

Fill the problems/index.js with the problem.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var pwd = require('process').cwd();

// Problem def, quick tip use ES6 template strings.
exports.problem = 'Write a program that adds two given numbers: \n\n' +

  '* Create a file `add.js` which returns the sum of two numbers\n\n' +

  '* Don\'t forget to export you function. module.exports = function() {}`);\n\n' +

  'Finally to verify do a `math-adventure verify add.js`\n\n';

// Verifier
exports.verify = function(args,cb) {

  // Propose solution
  var proposed = require(pwd + '/' + args[0]);

  // Check if the solution is correct.

  if ( proposed(3,4) == 7 ) {
    console.log("You have solved it!");
    return cb(true);
  } else {
    console.log("Sorry, your solution is wrong :(");
  }
};

Mention the bin property in your package.json along with other fields, so that it looks something like below [Even better if you had used npm init ;)] :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  "name": "adventure-math",
  "version": "0.0.0",
  "description": "Learn your math!",
  "bin": {
    "adventure-math": "runner.js"
  },
  "author": "Hemanth.HM <[email protected]>",
  "license": "MIT",
  "keywords": [
    "nodeschool",
    "adventure",
    "education",
    "math",
    "fun"
  ],
  "dependencies": {
    "adventure-runner": "^2.0.0"
  }
}

Final steps:

npm link to link the binary and now you must see something like below on executing adventure-math on your CLI.

nodeschool-sample.png

The user is expected to write the solution and verify it for themselves ;)

Hope you liked the post, feel free to modify the flow as per your need.

For the lazy ones here are few links:

That's it for now, happy node-schooling! :)

Currying in ES6

| Comments

As a ritual, let us start with an image of hot curry! :

Indiandishes by kspoddar

Breaking down a function that receives multiple arguments into a series of functions that receives part of the arguments is termed as currying a function.

Moses Schönfinkel introduced it and later was implemented by Haskell Curry, hence it's famous as curry.

Say we have a function : f::(x, y) -> z when curried we get curry(f) :: x -> y -> z.

In ES6 with the help of arrow functions and spread operators we can implement curry like:

1
let curry1 = f => (a) => f(a);
1
let curry2 = f => (...a) => (...b) => f(...a, ...b);
1
let curry3 = f => (...a) => (...b) => (...c) => f(...a, ...b, ...c);
1
let curry4 = f => (...a) => (...b) => (...c) => (...d) => f(...a, ...b, ...c, ...d);

Well, now you might be thinking of curryN or nCurry which would be like:

1
2
3
4
5
6
7
8
9
10
11
12
let nCurry = n =>
  (f, ...args) =>  {
        return function(...nargs) {
            let combinedArgs = args.concat(nargs);
            if (combinedArgs.length < n) {
              combinedArgs.unshift(f);
              return _curry.apply(null, largs);
            } else {
              return f.apply(null, largs);
            }
        };
  };

And can be used like:

1
2
3
4
5
6
7
8
nCurry(n)(f);

/*
Example:

nucrry(6)(fn); // Would give the curried version of `fn` that takes 6 args.

*/

Simpler example:

1
2
3
4
5
6
7
function listify(a,b,c,d) {
  return [a,b,c,d];
}

var listifyCurry = ncurry(4)(listify);

console.log(listifyCurry(1)(2)(3)(4)); [1,2,3,4]

Hope you enjoyed your curry! ;)

ES7 Features

| Comments

ECMAScript 7 is the next evolution of the ECMA-262 standard, this is at a very early stage, you may want to checkout paws-on-es6 as well.

Exponentiation Operator

Performs exponential calculation on operands. Same algorithm as js Math.pow(x, y)

1
2
3
let cubed = x => x ** 3;

cubed(2) // 8;

Array comprehensions

Declarative form for creating computed arrays with a literal syntax that reads naturally.

1
2
3
4
5
6
7
8
9
10
let numbers = [ 1, 4, 9 ];

[for (num of numbers) Math.sqrt(num)];
// => [ 1, 2, 3 ]

[for (x of [ 1, 2, 3]) for (y of [ 3, 2, 1 ]) x*y];
// => [ 3, 2, 1, 6, 4, 2, 9, 6, 3 ]

[for (x of [ 1, 2, 3, 4, 5, 6 ]) if (x%2 === 0) x];
// => [ 2, 4, 6 ]

Generator comprehensions

Create a generator function based on an existing iterable object.

1
2
(for (i of [ 2, 4, 6 ]) i*i );
// generator function which yields 4, 16, and 36

Async functions

Deferred Functions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function wait(t){
  return new Promise((r) => setTimeout(r, t));
}

async function asyncMania(){
  console.log("1");
  await wait(1000);
  console.log("2");
}

asyncMania()
.then(() => alert("3"));

// logs: 1 2 3

Async generators

Deferred generators.

1
2
3
4
5
6
7
8
9
10
11
12
13
// provider
async function* nums() {
  yield 1;
  yield 2;
  yield 3;
}

// consumer
async function printData() {
  for(var x on nums()) {
    console.log(x);
  }
}

Object Observe

Asynchronously observing the changes to an object.

1
2
3
4
5
6
7
var obj = {};

Object.observe( obj,function(changes) {console.log(changes);} );

obj.name = "hemanth";

// Would log -> [ { type: 'new', object: { name: 'hemanth' }, name: 'name' } ]

Object.getOwnPropertyDescriptors

Returns a property descriptor for an own property.

1
2
3
let life = { answer: 42 };
Object.getOwnPropertyDescriptor(life, 'answer');
//^ { configurable: true, enumerable: true, value: 42, writable: true }

Array.prototype.includes

Determines whether an array includes a certain element or not.

1
2
3
[1, 2, 3].includes(3, 0, 7); // true
[1, 2, NaN].includes(NaN); // true
[0,+1,-1].includes(42); // false

Typed Objects

Portable, memory-safe, efficient, and structured access to contiguously allocated data.

1
2
3
4
5
6
7
8
9
var Point = new StructType({
  x: int32,
  y: int32
});

var point = new Point({
  x: 42,
  y: 420
});

P.S: The same is maintained as a git repo.

SMS Service With Firefox OS

| Comments

Assume a senario, a course booking service which need an SMS feature with the below work flow:

  • A customer sent a message of the format: <name> <course_name> <course_time> <number_of_tickets>

  • We need to reply to the sender with a thank you message of the format: Thank you <name>! Your booking (<number_of_tickets tickets) for <course_name> at <course_time> is confirmed.

This can be easily achived with the below code in fxos:

1
2
3
4
5
6
7
navigator.mozMobileMessage.onreceived = (sms) => {
   let cust = sms.message.sender,
   [name,courseName,courseTime, tcktCnt] = sms.message.body.split(' '),
   msg = `Thank you ${name}! Your booking (${tcktCnt} tickets) for ${courseName} at ${courseTime} is confrimed.`

   navigator.mozMobileMessage.send(cust, msg);
 }

Well, this is just a snippet, you would have to do a bit more to make it a service, for a quick hacky way, you could run the offical SMS app in debug mode and execute this snippet in the browser console.

There might be more better ways to do it, but this was one of easiest ways for me at a hackathon.

Superfluous Patterns of Javascript

| Comments

Here list of things that we can get rid in javascript, with the advent of ES6:

No more + (addition operator) to perform string concatenation:

With the help of Template Strings we no more need +

Instead of:

1
2
3
4
var fname = "Hemanth",
    lname = "HM";

console.log("Hello " + fname + "." + lname);

We could:

1
2
3
let fname = "Hemanth", lname = "HM";

console.log(`Hello ${fname}.${lname}`); // Hello Hemanth.HM

No more use of the keyword function:

With Arrow Function Definitions we can do something like:

1
let greet = (name) => `"Hello ${name}`;

Which with ES5 would be:

1
2
3
var greet = (function (name) {
  return "Hello " + name;
}).bind(this);

P.S: Lot of them say that this an abuse, as arrow functions are mainly meant for lexical scoping, but I like this ;)

Also, with better object literals:

1
2
3
var Hulk = {
  name: () => "Mr.H";
}

That would have been:

1
2
3
4
5
var Hulk = {
  name: function () {
    return "Mr.H";
  }
};

No more arguments conversions:

Yes! No more converting arguments to Array with [].slice.call(arguments) Rest parameters puts them to rest ;)

1
2
3
let sortRestArgs = (...theArgs) => theArgs.sort();

console.log(sortRestArgs(5,2,7,1)) // [1,2,5,7];

We use to:

1
2
3
var sortRestArgs  = function(){
  return [].slice.call(arguments).sort();
}

No more || the (OR) operator trick/check:

With the help of default arguments, we can re-write something like:

1
2
3
4
5
6
7
var frameWork = function(namespace) {
  namespace = namespace || {
    utils:{},
    core:{}
  };
  // some more code
}

To something like:

1
let frameWork = (namespace = {utils: {}, core: {}}) => ''

No more var that = this saving the context:

Major use of Arrow functions, is about the lexical scoping.

1
2
3
4
5
6
7
8
9
10
11
var Person = function(fname, lname, age ) {
    this.fname= fname;
    this.lname = lname;
    this.age = age;

    var that = this;  // We need to save the context.

    this.yo = function() {
        return "Yo! " + "I'm" + that.fname!
    };
}

This could be simplified to:

1
2
3
4
5
6
var Person = (fname, lname, age) => {
   this.fname= fname;
   this.lname = lname;
   this.age = age;
   this.yo = () => `Yo! I'm ${this.fname}!`; // `this` reffers to Person.
}

Similarly we could use this pattern in EventListeners, setTimeout et.al

Well, that's it for now, this list sure has some great potential to grow ;)

Update 0:

Below are few insights from Reginald Braithwaite

Ternary operators are a little different, we have had them for decades, and the consensus is that they are hard to parse visually.

They’re a clear case of brevity hindering readability. Whereas, we have had arrow-like notation for functions in other languages for decades, and the consensus is that they are easy to read. They’re new to JavaScript, so they seem difficult, but that will pass. I am very comfortable that programmers just getting into JavaScript will have no idea why anybody wouldn't like them.

My personal suggestion is to use arrows when you don’t care about the things that function give you. So use arrows, except:

  • If you need to write a recursive function, use function name (...).

  • If you want to have a readable stack trace (which is often!), use a named function expression or function declaration.

  • If you want to put helper functions at the bottom of the code so that the main thing is at the top, use function declarations.

  • If you care about this, use the function keyword, for example if you’re writing a true method or a method decorator.

  • If you care about arguments, and don’t want to use parameter destructuring, use function.

ES6 Reflect API

| Comments

What is the reflect object all about?

ES6's Reflect object is a single ordinary object that contains methods related to Ecmascript 6 reflection API.

The below are some key points that one must be aware of before using them.

  • It's not a function object.

  • It does not have a [[Construct]] internal method. (Can't use new)

  • It does not does not have a [[Call]] internal method. (Can't invoke it as a function)

What are all the methods that Reflect object has?

  • Reflect.get(target, name, [receiver])

  • Reflect.set(target, name, value, [receiver])

  • Reflect.has(target, name)

  • Reflect.apply(target, receiver, args)

  • Reflect.construct(target, args)

  • Reflect.getOwnPropertyDescriptor(target, name)

  • Reflect.defineProperty(target, name, desc)

  • Reflect.getPrototypeOf(target)

  • Reflect.setPrototypeOf(target, newProto)

  • Reflect.deleteProperty(target, name)

  • Reflect.enumerate(target)

  • Reflect.preventExtensions(target)

  • Reflect.isExtensible(target)

  • Reflect.ownKeys(target)

Why reflect?

The above list, looks very familiar to the methods defined in Object but on of the major difference is that the Reflect object's method does return meaningful data rather than throwing an error in case of failure.

Let's see few examples to understand more about it:

1
2
3
4
5
6
try {
  Object.defineProperty(obj, name, desc);
  // worked.
} catch (e) {
  // bombed.
}

With reflect:

1
2
3
4
5
if (Reflect.defineProperty(obj, name, desc)) {
  // worked
} else {
  // bombed
}

Same structure applies for:

  • Reflect.set (to update a property).

  • Reflect.deleteProperty (to delete a property).

  • Reflect.preventExtensions (to make an object non-extensible).

  • Reflect.setPrototypeOf (to update an object's prototype link).

Reflect.has(obj, name) equivalent of (name in obj) and Reflect.deleteProperty(obj, name) equivalent to delete obj[name], but both of these reflect APIs are first-class functions.

We would use apply method on a function fn with a variable number of arguments packed as an array args and binding the this value to an obj as fn.apply(obj, args) but if fn has defined it's own apply method we need to invoke Function.prototype.apply.call(fn, obj, args) to make sure that built-in is invoked, but the same can be simplified to Reflect.apply(fn, obj, args)

Proxy and Reflect gel well:

There is a one-to-one correspondence between "reflect" methods and Proxy traps which ensures that the return type to be compatible with the return type of the Proxy traps.

1
2
3
4
5
var life = Proxy.create({
  get: function(target, name, receiver) {
    return Reflect.get(target, name, receiver);
  }
});

Where can I use Reflect now?

As of now you can use this in IE Technical Preview or use polyfills like echo-js or harmony-reflect

References:

Custom Elements With ES6

| Comments

Custom Elements play an important role in Web Components spectrum. Here’s a list that talks about why we need them:

  • Define new DOM elements.

  • Extending from other elements.

  • Extending DOM APIs.

  • Providing custom functionality to a single tag.

A custom element is made up of a local name, namespace, prototype and lifecyle callbacks.

After creating the custom element, the element definition is added to a registry using the document.registerElement() method. The lifecycle of a custom element is listed below:

  1. Custom element is created before its definition is registered.

  2. Definition of a custom element is registered.

  3. Custom element instance is created after its definition was registered.

  4. Custom element is inserted into active document.

  5. Custom element is removed from active document.

  6. Custom element’s attribute is created, removed, or modified.

Creating custom element with ES6 is easy using it's class feature, but it's important to note that the only subclassing that works is of your own classes, we can't subclass builtins or platform objects, the issues are about allocation of the object (especially for DOM objects), about passing arguments to the superconstructor (arbitrary arguments) --- DOM objects don't really have callable constructors right now, so until the DOM catches up with ES6 specs we need to deal with these limitations.

Luckily, we could pass the extended element to registerElement because it's implementation looks at the passed object's prototype property!

It's even more important to note that expect IE (that too to a very small extent) none of the browsers have implemented classes and we will have to use transpilers like 6to5 or Google's Traceur.

Ok, enough of theory and drawbacks let's see some code!

Basic boilerplate:

1
2
3
4
5
6
7
8
9
10
11
class CustomElement extends HTMLElement {
    // Fires when an instance of the element is created.
    createdCallback() {};
    // Fires when an instance was inserted into the document.
    attachedCallback() {};
    // Fires when an instance was removed from the document.
    detachedCallback() {};
    // Fires when an attribute was added, removed, or updated.
    attributeChangedCallback(attr, oldVal, newVal) {};
}
document.registerElement('custom-element', CustomElement);

Now, let's try extending the HTMLSpanElement (interface).

1
2
3
4
5
6
class DateSpan extends HTMLSpanElement {
   createdCallback(){
     this.textContent = "Today's date: " + new Date().toJSON().slice(0,10);
   }
}
document.registerElement('date-today', DateSpan);

Transplied code with 6to5 would look like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
"use strict";

var _inherits = function (child, parent) {
  child.prototype = Object.create(parent && parent.prototype, {
    constructor: {
      value: child,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
  if (parent) child.__proto__ = parent;
};

var DateSpan = (function () {
  var _HTMLSpanElement = HTMLSpanElement;
  var DateSpan = function DateSpan() {
    if (_HTMLSpanElement) {
      _HTMLSpanElement.apply(this, arguments);
    }
  };

  _inherits(DateSpan, _HTMLSpanElement);

  DateSpan.prototype.createdCallback = function () {
    this.textContent = "Today's date: " + new Date().toJSON().slice(0, 10);
  };

  return DateSpan;
})();

document.registerElement("date-today", DateSpan);

See <date-today></date-today> working:

Well, it was a silly little custom span element, let's make a better one.

One of favs, <xkcd-img> </xkcd-img> :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class XKCD extends HTMLImageElement {
    constructor(){}
    createdCallback() {
      var xhr = new XMLHttpRequest()
      xhr.open('GET','http://xkcd-imgs.herokuapp.com/')
      xhr.onload = function(data){
        this.style.backgroundImage = `url('${JSON.parse(data.target.response).url}')`;
        this.style.backgroundSize = "contain";
        this.style.backgroundRepeat = "no-repeat";
        this.style.position = "absolute";
        this.style.height = "100%";
        this.style.width = "100%"
      }.bind(this);
      xhr.send(null);
    };
}
document.registerElement('xkcd-img',XKCD);

See it in action:

Well, this is just the start, let's hope to see this grow better and faster...untill then happy hacking! :)

Descriptor Decorator in Python

| Comments

Decorators and Descriptor are two independent features of Python programming language, but they gel together very well, below is a descriptor decorator ;)

Say, we have a simple Greet class:

1
2
3
4
class Greet():
    msg = "meow"
    def yo(self):
        return "Yo!"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
>>> Greet()
<__main__.Greet object at 0x10046ea90>

>>> greetThem = Greet()

>>> greetThem.yo
<bound method Greet.yo of <__main__.Greet object at 0x10046eb50>>

>>> greetThem.msg
"meow"

>>> greetThem.yo()
"Yo!"

>>> Greet.msg
"meow"

Nothing special so far, everything is as expected...

Now, let's add some magic, first lets create an Accessor descriptor:

1
2
3
4
5
6
7
8
class Accessor(object):
    def __init__(self, fget):
        self.fget = fget

    def __get__(self, obj, type):
        if obj is None:
            return self
        return self.fget(obj)

Now that we have a descriptor, let's decorate our Greet class with it.

1
2
3
4
5
class Greet():
    msg = "meow"
    @Accessor
    def yo(self):
        return "Yo!"
1
2
3
4
5
6
7
8
9
10
11
12
13
>>> Greet()
<__main__.Greet object at 0x10056eb50>

>>> greetThem = Greet()

>>> greetThem.yo
"Yo!"

>>> greetThem.msg
"meow"

>>> Greet.msg
"meow"

Notice greetThem.yo vs greetThem.yo() :)

So what was the trick behind the magic?:

Dotted access to look up a member will result in:

  • Look up for the member in the instance dictionary.

  • If it's not found, the look up happens in the class dictionary.

  • If found it in the class dictionary and it has a descriptor protocol implemented, instead of just returning it, Python executes it!

Clearly the much more concise term of art should be Desecrator, says coriolinus on reddit.