16. February 2016

Pollinate

Pollinate (GitHub: everysquare/pollinate, License: MIT, npm: pollinate)

Pollinate is for the best I can describe a scaffolding engine. It takes a template project and uses Nunjucks to generate the files with the names. The name comes from visualization a tree as a “Flower”.

Think of a tree of files as a Flower and a source data as Pollen; combined together they create a fertilized project seed. Pollinate will allow you to template a set of files and store them on GitHub. When you decide to use them later you can pollinate them using an object of data. Each time you pollinate you can specify which files to discard, parse, or move.

There are three components to a Pollinate boilerplate.

  • The Flower
  • The Pollen
  • The Data

The Flower is a GitHub repository which holds all of the files. These files can be passed through a template engine which uses the supplied data.

The Pollen is just a vessel to get new data to the Flower. It can be supplied as an HTTP JSON endpoint, as a local file or directly as a set of arguments.

The data can be considered as the DNA. Both sides can supply it, but the data from the Pollen takes precedence when merging the objects. The data supplies a list of files to act upon with the template engine along with the data to inject. The data can also supply file operations to move or delete files during the process.

The developer of this project has posted an example which is very easy to follow along when you want to set up your own Pollinate.

Don’t forget to to invest some time to rehash or practice your knowledge by checking this weeks challenge: Websocket Challenge.

12. February 2016

Weekly Challenge - WebSocket Challenge

Sadly this weeks challenge did also not get a very good turn out. I know it should not have been to hard to complete this challenge, still I received two submissions for it. The results can be found here. If you have an idea how we could get more people to sent in their submissions, please reach out to me via twitter: @DailyJavascript.

For this weeks challenge you will be putting together a WebSocket server to handle chat messages. This is gonna be the first challenge in a three week series. The additions to the project will still be a surprise for now. To make sure you implement these challenges correctly I will provide you with some tests.

For this weeks challenge your server needs to pass the following tests:

'use strict';

const should = require('should');
const io = require('socket.io-client');

const socketURL = 'http://localhost:5000';

const options = {
  transports: ['websocket'],
  'force new connection': true
};

const chatUser1 = {'name':'Tom'};
const chatUser2 = {'name':'Sally'};
const chatUser3 = {'name':'Dana'};

describe('Testing The Chat Server', () => {

  it('Should broadcast new user once they connect', (done) => {
    let client = io.connect(socketURL, options);

    client.on('connect', (data) => {
      client.emit('connection name',chatUser1);
    });

    client.on('new user', (usersName) => {
      usersName.should.be.type('string');
      usersName.should.equal(chatUser1.name + ' has joined.');
      client.disconnect();
      done();
    });
  });


  it('Should broadcast new user to all users', (done) => {
    let client1 = io.connect(socketURL, options);

    client1.on('connect', (data) => {
      client1.emit('connection name', chatUser1);
      let client2 = io.connect(socketURL, options);

      client2.on('connect', (data) => {
        client2.emit('connection name', chatUser2);
      });

      client2.on('new user', (usersName) => {
        usersName.should.equal(chatUser2.name + ' has joined.');
        client2.disconnect();
      });

    });

    let numberOfUsers = 0;
    client1.on('new user', (usersName) => {
      numberOfUsers += 1;

      if(numberOfUsers === 2){
        usersName.should.equal(chatUser2.name + ' has joined.');
        client1.disconnect();
        done();
      }
    });
  });

  it('Should be able to broadcast messages', (done) => {
    let client1, client2, client3;
    let message = 'Hello World';
    let messages = 0;

    let checkMessage = (client) => {
      client.on('message', (msg) => {
        message.should.equal(msg);
        client.disconnect();
        messages++;
        if(messages === 3){
          done();
        };
      });
    };

    client1 = io.connect(socketURL, options);
    checkMessage(client1);

    client1.on('connect', (data) => {
      client2 = io.connect(socketURL, options);
      checkMessage(client2);

      client2.on('connect', (data) => {
        client3 = io.connect(socketURL, options);
        checkMessage(client3);

        client3.on('connect', (data) => {
          client2.send(message);
        });
      });
    });
  });


  it('Should be able to send private messages', (done) => {
    let client1, client2, client3;
    let message = {to: chatUser1.name, txt:'Private Hello World'};
    let messages = 0;

    let completeTest = () => {
      messages.should.equal(1);
      client1.disconnect();
      client2.disconnect();
      client3.disconnect();
      done();
    };

    let checkPrivateMessage = (client) => {
      client.on('private message', (msg) => {
        message.txt.should.equal(msg.txt);
        msg.from.should.equal(chatUser3.name);
        messages++;
        if(client === client1){
          setTimeout(completeTest, 40);
        };
      });
    };

    client1 = io.connect(socketURL, options);
    checkPrivateMessage(client1);

    client1.on('connect', (data) => {
      client1.emit('connection name', chatUser1);
      client2 = io.connect(socketURL, options);
      checkPrivateMessage(client2);

      client2.on('connect', (data) => {
        client2.emit('connection name', chatUser2);
        client3 = io.connect(socketURL, options);
        checkPrivateMessage(client3);

        client3.on('connect', (data) => {
          client3.emit('connection name', chatUser3);
          client3.emit('private message', message)
        });
      });
    });
  });
});

The requirements for this challenge are pretty straight forward.

  • You need to be able to connect with a single user.
  • You need to be able to connect two users or more.
  • A user should be able to send a message to a chatroom
  • A user should be able to send private messages to other users

The tests can be copied form this page but I also setup a repo which you can fork Please deploy your server to Heroku. You can create a free account here and follow a very simple tutorial if you are not familiar with how to deploy on Heroku. Submit the URL where your server is running to this Google Form before Friday next week.

I hope you guys will find this more challenging then last week. Happy coding.

11. February 2016

Deco

I would like to start out with saying that this is not sponsored content. When I came across this I was so amazed that needed to share it with you all.

Normally when you develop apps, you use an IDE. When targeting iOS you use xCode and when Android is your platform you are most likely using Android Studio. This becomes a real problem when switching context, between platform and technologies. Especially when you are building a React Native app. Deco is a solution for that. Not only is it the first IDE to come out tailored to React Native, but it also come with a registry off React Native components. These components are standardized and work very nicely together with Deco.

This is a video by one of the developer demonstrating some of the features included in the IDE by building an Uber clone in less than 5 minutes.

Sadly there is still a waitlist for the beta, I myself am still waiting to get access to it. Go to the website for more information and sign up for beta access.

Don’t forget to send in your submission for this weeks challenge before tomorrow afternoon, otherwise it will not be in the weekly results.

10. February 2016

React Native SMS Listener

SmsListener (GitHub: CentaurWarchief/react-native-android-sms-listener, License: MIT, npm: react-native-android-sms-listener)

When you are building an app which requires some form of account validation like Whats App and Telegram using React Native. There is gonna be a moment that you want to verify on bases of a text message. CentaurWarchief has created a module so you don’t need to worry about listening for incoming texts.

If works pretty straight forward, you attach an event listener and respond to incoming events like so:

import SmsListener from 'react-native-android-sms-listener'

const mySubScription = SmsListener.addListener(myMessageHandler);

function myMessageHandler(message){
    console.log(message);
}

This should not be unfamiliar. In contrast with the event listener API which get’s provided by the DOM, removing event listener works differently.

mySubScription.remove()

This is an example provided by the developer which demonstrates how to do authorization in the same manner as Whats App or Telegram do it:

let subscription = SmsListener.addListener(message => {
  let verificationCodeRegex = /Your verification code: ([\d]{6})/;

  if (verificationCodeRegex.test(message.body)) {
    let verificationCode = message.body.match(verificationCodeRegex)[1];

    YourPhoneVerificationApi.verifyPhoneNumber(
      message.originatingAddress,
      verificationCode
    ).then(verifiedSuccessfully => {
      if (verifiedSuccessfully) {
        subscription.remove();
        return;
      }

      if (__DEV__) {
        console.info(
          'Failed to verify phone `%s` using code `%s`',
          message.originatingAddress,
          verificationCode
        );
      }
  });
  }
});

Sadly it only has support for Android at this point, hopefully somebody will implement the same for iOS. For more API reference check the README and don’t forget to challenge yourself trying to duplicate the randomization algorithm used by Tetris

09. February 2016

jHaml

jHaml (GitHub: soyuka/jhaml, License: MIT, npm: @soyuka/jhaml)

jHaml is a Javascript implementation of the Haml templating engine which was originally written in Ruby. When I was still doing a lot of Rails I first got introduced to Haml. I was able to change erb like this:

<section class=”container”>
  <h1><%= post.title %></h1>
  <h2><%= post.subtitle %></h2>
  <div class=”content”>
    <%= post.content %>
  </div>
</section>

Into:

%section.container
  %h1= post.title
  %h2= post.subtitle
  .content
    = post.content

Now we use do the same for our Javascript applications. After searching a bit I noticed that there are a few implementations of this already. The reason why I like this library is that it’s based on streams and because of this it has great support for build tooling Gulp, which is also stream based. There also is a nice example of how to use it in frameworks like Express

For more details and documentation check the README which thoroughly explains how it works and how to use it.

Don’t forget the submit this weeks challenge before Friday on when I will post the results.