Daily Javascript

rxjs-pubsub (GitHub: richardanaya/rxjs-pubsub, License: MIT, npm: rxjs-pubsub)

In modern applications we use a lot of functional paradigms. We do this via libraries and tools like RxJs, Bacon.js and Ramda. One of the patterns I really like is the PubSub(publish and subscribe) pattern. Out of the box RxJs does not provide anything to do this.

When I came across this little library I was really happy that someone took the time to package this into a nice little module. First I shall describe what pubsub is for those who haven’t had the pleasure of working with it.

The idea is that when an “action” gets preformed and event gets emitted to whom ever cares. So first I would create my “event bus”:

const myEventBus = pubsub.create();

On this object we can attach a subscription.

myEventBus('some:event').subscribe((msg) => console.log(msg) );

Now we are listening for publications on the some:event channel. To trigger the console.log which we put as a callback we need to publish something to this channel.

myEventBus.publish('some:event', 'Some body');

This will log Some body. This example uses a string but it’s not limited to strings. That’s it. You can probably already see the possibilities with a system like this.

As the developer let’s know in a footnote:

This may seem like a simple library you may want to make yourself.

One of the thing to take into consideration is the error handling, this because the default streams provided by RxJs to not handle errors that gracefully.

lmth (GitHub: chrisdotcode/lmth, License: BSD-3-Clause, npm: lmth)

Manually concatenation of HTML strings is painful. Even jQuery gets this wrong, because we are still creating writing out our HTML but now in strings which can be very error prone and cause unneeded debugging time.

The is the reason tools like pithy and hyperscript came up. Now there is a new kid on the block. lmth is a HTML DSL for JavaScript very similar to pithy, as the developer puts it:

lmth can be considered a spiritual successor to pithy, and a cousin of sorts to hyperscript.

It can output HTML as a string or as a DOM tree. In contrast with pithy, the text content is escaped by default. But you disable this if you want to.

A quick example of how it would look:

    'use strict';
    import l from 'lmth';

    const html = l.main({id: 'main'}, [
        l.h1(null, 'Hello, world!'),
        l.img({src: '/foo.png'})
    ]);

    // To a string:
    html.render();
    // <main id="main"><h1>Hello, world!</h1><img src="/foo.png"></main>

    // To a DOM tree:
    html.toDOM();

Enzyme (GitHub: airbnb/enzyme, License: MIT, npm: enzyme)

As we all know testing code is crucial part of our job. It helps us to write and maintain a complex code base. Sadly the state of front-end testing has not being so good. But it is starting to look up.

About three months ago, Airbnb open sourced Enzyme, which is a testing utility for React. The goal of this utility is to make it easier to assert, manipulate, and traverse your React Components’ output.

This utility does not only work for React in the browser but also for React Native. Because the native components are hard to mock, the developer took the time to mock all the native components.

Leland Richardson has published a Medium post called “Enzyme: JavaScript Testing utilities for React” explaining how to get on your way testing your React application.

Leland preformed a lighting talk at React conf last week about Enzyme.

react-web-animations (GitHub: RinconStrategies/react-web-animation, License: MIT, npm: react-web-animation)

In every web application we are animating stuff nowadays. We do this using libraries like Velocity, Greensock, jQuery or we do this with keyframe animating and appending classes to trigger the animations. If you haven’t heard about the Web animation spec, it is an API to animate elements without any libraries. There is already a Polyfill available. So you can start using it today.

Now I came across a library which implements this polyfill as a React component called react-web-animations. Why use this over other animation libraries for React? Since react-web-animation uses the Web Animations API polyfill it will eventually use the native browser implementation. Chrome already has the support for these features today. The rest of the browsers how ever are a bit sad, luckily the polyfill takes care of that for us.

A simple example of how you would use the Animation component would look like this:

import {Component} from 'react';
import {Animation} from 'react-web-animation';


export default class Basic extends Component {

    getKeyFrames() {
        return [
            { transform: 'scale(1)',    opacity: 1,     offset: 0 },
            { transform: 'scale(.5)',   opacity: 0.5,   offset: 0.3 },
            { transform: 'scale(.667)', opacity: 0.667, offset: 0.7875 },
            { transform: 'scale(.6)',   opacity: 0.6,   offset: 1 }
        ];
    }

    getTiming( duration ) {
        return {
            duration,
            easing: 'ease-in-out',
            delay: 0,
            iterations: 2,
            direction: 'alternate',
            fill: 'forwards'
        };
    }

    render() {
        return(
            <Animation keyframes={this.getKeyFrames()}
                       timing={this.getTiming(2500)}>
                <div>
                    Web Animations API Rocks
                </div>
            </Animation>);
    }
}

For advanced usage you need to check the great documentation which the developer has provided.

A small side note.

Since I haven’t received any submissions for the weekly challenges, I have decided to focus on finding great libraries for you guys instead of trying to come up with new challenges to do. Thanks to the people who did participate, when you still want to be challenged I would suggest you take a look at /r/DailyProgrammer, Code Golf or HackerRank.

Cash (GitHub: dthree/cash, License: MIT, npm: cash)

Cash is a project to implement most used Unix-based commands in pure Javascript and with no external dependencies. The reason for this is to make them available cross platform. So if you find yourself stuck on using Windows because your business used it, you can just npm i cash -g; cash and be back in Unix land.

The developer’s goal is to expose to the Javascript community to these commands, and to provide a cleaner, simpler and flexible alternative to applications like Cygwin for those wanting the Linux feel on Windows.

While writing this the project supports the following commands:

• alias
• cat
• cd
• cp
• echo
• grep
• kill
• less
• ls
• mkdir
• mv
• pwd
• rm
• sort
• touch
• unalias

For additional commands the developer has decided to let the community decide. You can vote on new commands in the Road map.

For more information on check out the Github Project where the developer has also posted a wiki.

Don’t forget to submit you solution for the Websocket Challenge - part two, since there are only two days left before submission closes.