Daily Javascript

meow (GitHub: sindresorhus/meow, License: ISC, npm: meow)

After looking over some the source code of a CLI I might wanted to mention today, I came across this:

require('meow')

Which made me curious. So I clicked on the package, which I can do thanks to Octolinker. This landed me with in the repository of Meow, which is a CLI helper.

It parses arguments, converts flags to camelCase, shows --help message and it sets the process title to the binary name defined in package.json which is a nice cosmetic touch.

As an example:

const meow = require('meow');

const cli = meow(`
    Usage
      $ foo <input>

    Options
      -r, --rainbow  Include a rainbow

    Examples
      $ foo unicorns --rainbow
      🌈 unicorns 🌈
`, {
    alias: {
        r: 'rainbow'
    }
});

foo(cli.input[0], cli.flags);

When this is called like so:

node foo-app.js unicorns --rainbow

Meow will provide you with the following object:

{
    input: ['unicorns'],
    flags: {rainbow: true},
    // ...
}

With which you could implement a method like:

  function foo(action, flags){
    if( action === 'unicorns' ){
      const outputString = flags.rainbow ? '🌈 unicorns 🌈' : 'unicorns';
      console.log(outputString);
    }
  }

Hactar (GitHub: Hactar-js/hactar, License: ISC, npm: hactar)

Since a few month I start noticing a lot of people getting frustrated with the amount of setup required when trying new techniques. First of all I would like to refer these people that we are developers and it is our task to learn these methods and techniques. The libraries and frameworks we use are not consumer products. I do not understand where the expectation comes from that a framework or library should feel like a consumer product.

mpjme has a very great episode about exactly this problem in the Javascript community.

When I was browsing for new tools today I came across Hactar. Hactar is an attempt to resolve the issue of “Javascript Fatigue”. It configures build tools, installs dependencies, adds imports, creates tests automatically.

It does not require boilerplates, no generators, and no build tools to configure. To start using Hactar you simply write code and it figures out what you want to do and the best practices to make it happen.

Typically a workflow with Hactar would look like this;

Start up Hactar

$ hactar -p hactar-babel

# initiating npm
# name: (testcats)
# ...
# hactar is running

Open/create a file to start coding in.

emacs index.js

And add some boilerplate which you will probably copy and past from the documentation of the library you want to use:

import React from 'react';
import Button from 'react-toolbox/lib/button';

const CustomButton = () => (
  <Button label="Hello world" raised accent />
);

export default CustomButton;

Hactar will detect all the features used here and install the following packages:

• babel
  • configured with babel and es2015
• react
• react-toolbox

So you don’t have to worry about setting up any environment anymore.

Quiet.js (GitHub: brian-armstrong/quiet-js, License: MIT)

Quiet.js is a javascript binding for libquiet. In other words it’s a library for sending and receiving data via sound card. It can functions via either speakers or a cable, for instance a 3.5mm mini jack. Quiet comes included with a few transmissions profiles which configure quiet’s transmitter and receiver. For speaker transmission, there is a profile which transmits around the 19kHz range. For transmissions via cable, quiet.js has profiles which offer speeds of at least 40 kbps.

The transmission functionality is available for all evergreen browsers. Because this project is still very young it is not available via npm yet. There is already an issue logged by the developer himself to implement exports so it can be published to npm.

Quiet-js includes a blob of libquiet as well as a javascript binding, which are compiled by Emscripten. The bindings must be loaded before the compiled portion. The recommended way to include Quiet in your project is:

<script type="text/javascript" src="quiet.js"></script>
<script type="text/javascript" src="my_app.bundle.js"></script>
<script async type="text/javascript" src="quiet-emscripten.js"></script>

The developer highly recommends to also include libfec.js. An enscripted version of libfec which can be installed using npm. When libfec is not included, quiet.js will not be able to use any profiles which use convolutional codes or Reed-Solomon error correction.

Today I came across a new online editor platform that really blew me away, called Webpackbin.com.

It’s a code sharing tool like, JSFiddle, Codepen, JS Bin and many more. The thing which makes this tool stand out is that, as the name suggests, it is based on webpack. This means that you could use all the awesome features that come with it, features like importing npm modules, using loaders and hot reloading.

Besides the awesome webpack features it also has with a collaborative mode, in which you can share the same session with one or more other developer. This can be used for teaching, remote collaboration or maybe even for live coding during talks.

The developer has posted an introduction video demoing these features and more.

I’m really excited about this next generation of online collaboration and curious about what featues the developer might add in the future.

Ora (GitHub: sindresorhus/ora, License: MIT, npm: ora)

When you are making command line tools using Node.js you are probably using something like Vorpal or commander. When you want to communicate to the user that she needs to wait there are multiple things you could do. You could show a progress bar, but for that you would need to know when to fill it and when its done. Maybe you do not have this and do not wanna be bothered with implementing this. Well the maybe you wanna show a loading spinner like this:

Well than Ora is the spinner for you. It works very straight forward:

const ora = require('ora');
const mySpinner = ora('Loading undead unicorns');

mySpinner.start();

// Update
setTimeout(() => {
    spinner.color = 'yellow';
    spinner.text = 'Killing all the undead unicorns';
}, 1000);

One of the great things about this spinner is that it will not clutter up your CI logs with stuff like:

|
\
-
/
-
|

or

[=   ]
[==  ]
[=== ]
[====]

Since it will gracefully not do anything when there’s no TTY. When you do not like the default spinner, you could select another one from the list of spinners or create your own like so:

const mySpinner{
  interval: 80,
  frames: ['-', '+', '-'],
};