23. February 2016

Pointing Fingers

pointing-fingers (GitHub: jareware/pointing-fingers, License: MIT, npm: pointing-fingers)

A interest of mine is testing. Sadly there are not that many changes in the Javascript community in the field of testing. But then I found pointing-fingers over the weekend, which is a tool for testing upstream API’s. Since “Software doesn’t exist in a vacuum” we need to take unexpected API changes into account. But thoroughly testing third party API’s is of course not what we want to do. This tool offers you a sensible middle ground, and a convenient workflow for:

  • Documenting the upstream API format, as not all API’s are perfectly documented
  • Versioning that documentation, as API’s tend to change over time
  • Automatically alerting you to API changes, as sometimes upstream vendors won’t
  • Explicitly accepting those API changes, as your app will likely need to be changed accordingly

An example test with all the optional options using Mocha and Chai’s assert:

import { assert } from 'chai';
import { testUpstreamChanges } from 'pointing-fingers';

describe('GitHub API', () => {
  testUpstreamChanges({
    learn: false, // turn this on to update your fixtures (defaults to false)
    fixtures: 'test/fixtures/', // fixtures will be written here (defaults to "/dev/null")
    runner: it, // run each test in a separate Mocha it() block (defaults to running everything together)
    assert: assert.deepEqual, // which assert(actual, expected) to use (defaults to simple string comparison)
    placeholder: '(IGNORED IN TEST SUITE)', // ignored fields are replaced with this (defaults to null)
    ignores: [ // these are simply delegated to lodash's _.set() (defaults to [])
      'data.documentation_url', // we don't care if the doc URL changes, so ignore that field
      'headers.content-length', // this could also change spontaneously, and we're not interested
      'headers.date' // ^ ditto
    ],
    transforms: [ // these are invoked with the response object to allow arbitrary checks/ignores (defaults to [])
      res => res.status = (res.status >= 400 && res.status < 500) // ensure it's 4xx, but tolerate small changes
      /*
      // transforms which throw an Error are ignored, so it's safe to traverse/iterate complex objects without
      // littering the transform function with key existence checks. also, the res object is always an isolated
      // clone, so in-place mutation is fine.
      res => res.data.Teams.forEach(x => x.TeamRankingPoints = isNumber(x.TeamRankingPoints)),
      */
    ],
    headers: { // these are attached to outgoing requests (defaults to {})
      'X-Api-Key': process.env.MY_SECRET_KEY
    },
    method: 'GET', // (defaults to "GET")
    base: 'https://api.github.com', // all URL's are prefixed with this (defaults to "")
    urls: [ // these are the actual URL's that will be tested (defaults to [])
      '/user' // the URL's can be listed as simple strings
      /*
      { // ...but also as objects
        url: '/something-else',
        headers: { // all options (ignores, transforms, etc) can be overridden per-URL
          'X-Api-Key': 'some other key'
        }
      }
      */
    ]
  });
});

Head over to the challenge page of Websocket Challenge - part two and see what you need to do in order to make on to this weeks Hall of Hero’s.

22. February 2016

Realm React Native

Realm (GitHub: realm/realm-js, License: Apache-2.0, npm: realm)

Today at Facebook’s React.js Conference, The Realm team launched a new Realm mobile database designed for React Native. This database should offers easy object persistence and full query capabilities. The performance profile is usually 2–10x faster than existing options such as SQLite and CoreData.

When you are not familiar with Realm then you don’t know that, it was designed from the ground up to enable reactive app development. This is possible via live objects, change events, and support for unidirectional data flows.

By example:

const Realm = require('realm');

class Person {}
Person.schema = {
    name: 'Person',
    primaryKey: 'name',
    properties: {
        name: 'string',
        age: {type: 'int', default: 0},
    },
};

const realm = new Realm({schema: [Person]});

// Query
let people = realm.objects('Person', 'age >= 17');
people.length // => 0

// Write
realm.write(() => {
    savedPerson = realm.create('Person', {
        name: 'Hal Incandenza',
        age: 17,
    });
});

// Queries are updated in real-time
people.length // => 1

For more information and full documentation check the Realm website where the developer have posted a lot of amazing examples to help you get started.

Don’t forget to check out the challenge section. This weeks challenge extends on last weeks challenge so if you didn’t do that challenge you have some catching up to do. If you have great ideas for next challenges please reach out to me on twitter @DailyJavascript.

19. February 2016

Weekly Challenge - WebSocket Challenge part two

This week I only got one submission and sadly that did not past the test. This probably has nothing to do with the code but with the way I tried to run the project. So I’d like to ask you to include a small readme when submitting a repository. Check out the efforts Pablo Osso did this week trying to make the tests pass on the Results page.

For the second part of this challenge series we are going to implement the basic UI to go with the server which we created in the last challenge. If you did not complete last weeks challenge you can find the unit test in this repo but you will have some catching up to do. The User interface should include all the test scenario’s. This means that you need to build page on which a user can:

  • Pick a username
  • See when a new user has joined
  • Send messages to the whole group
  • Send private messages between another user

After getting some feedback on the challenges I will use a point system to rank the results. I do not think it is my place to criticize anybody on their ability to code, that is why you can earn points by completing curtain aspects of the challenge. For this challenge it will be features working. Each of the features completed and running on Heroku is worth one point. When you want to earn more points you could add more features such as:

  • List the online users
  • Avatars
  • Channels instead of one big group
  • Private groups within a channel
  • Implementing magic links
    • Youtube embed video
    • Images
    • Website description

Once again completed challenges can be submitted to this Google Form. When you submit before Friday next week your implementation will be featured in the weekly results which will be called Hall of Hero’s from now on.

Tip: You don’t have to make the user interface for the web. You can make it run in terminal for instance.

18. February 2016

CLog.js

CLog.js (GitHub: CVarisco/CLog.js, License: MIT, npm: clog_js bower: clog)

CLog.js is a very lightweight library create custom colored log messages for the browser. Sadly this feature is only available in Google Chrome. In other browsers it falls back to the default console.log.

The problem this library tries to solve is the same problem Chalk and Colors.js are trying to solve. But this library is only focused on the browser.

I hope to see more options to style with such as background-color, underline and maybe strike-through, right now it only supports colors. You can install it using bower, npm or downloading it here.

Then you can instantiate it like so:

var options = {
    group: false,
    colors: {
        log: "#31f095",
        debug: "#e86024",
        data: "#DDDDDD"
        error: "#e22f2f",
        network: "#08bce9",
    }
}

var CLog = new CLog(options);

Now we can use it within our code like this:

CLog('debug', 'Pizza is awesome!!');

And it will log it in the color assigned to debug. In this same place we can give it a HEX color and it will use it.

CLog('#FFCFFF', 'Pizza is awesome!!');

Today is normally the last day you can submit your solution for this weeks challenge. Since I have only received one submission up till now, I will leave the submissions open until tomorrow night around 8PM Amsterdam time, which would be 2PM New York time. Be sure you send in what you got before that time. When it’s not finished yet, hurry up. If you need a reminder on what the challenge was head over to the challenge page of: Websocket Challenge.

17. February 2016

Superhero.js

Superhero.js is a great gathering of articles, videos and presentations to help you become a better JavaScript developer. This is a real outcome for people who feel overwhelmed by the amount of articles appearing across the web. It is hard to distinguish between the relevant and the irrelevant stuff out there.

The collection is split up in categories so you have some context on why you should read it, or you can easily find a relevant resource to your problem. The categories are:

  • Understanding JavaScript: Syntax, style and gotchas
  • Organizing your code: API design, patterns and frameworks
  • Testing your application: Testable code, readable tests
  • Tools of the trade: Workflow, developer tools and debugging
  • Performance and Profiling: Fast and memory-efficient code
  • Securing your app: Principles, access control and validation
  • Under the hood: Understanding the browser
  • On the horizon: Stuff to keep an eye on

When you would follow them all down you have a very nice learning path. Even if you have being doing JavaScript for sometime now, I would still recommend you take a gander at this page cause it really highlights some amazing resources.

If you haven’t started on this weeks challenge yet, go to the challenge page of the Websocket Challenge since there are only two days remaining in the challenge.