Daily Javascript

First of all let me say Happy new year! The last couple of weeks I did not do any posted due to all the celebrations and illness. Luckily the holiday season is over and we can get back to creating and learning to make beautiful applications. Something some people might be interested in is the results of the latest challenge which was “Let it snow”.

Well sadly I only received two submissions. Which let me to believe people did not feel challenged by this assignment. I will do my best to find something more interesting. The results can be found on the results page of the challenge which would be Daily-Javascript.com/challenges/let-it-snow/results

From tomorrow on Daily-Javascript will be getting daily updates again. Hope you guys keep on reading.

Happy coding.

First of all let me say Merry Christmas! Last weeks challenge was a blast and I’d like to thanks everybody who submitted a solution. To view the submitted solutions check the results section of the challenge.

For this weeks challenge I wanted to something Christmas themed and came up with a lot of ideas, but since we can not spend the entire week working on the challenge I thought to go for something simple: Let it snow.

An overview of the challenges can be found at /challenges. For more details about this weeks challenge go to Let it snow.

Shipit (GitHub: shipitjs/shipit, License: MIT, npm: shipit)

Shipit is an automation engine and a deployment tool written for Node.

Shipit is an alternative for Capistrano. If you are not familiar Capistrano, it is a remote server automation and deployment tool written in Ruby. Since Capistrano was written in Ruby, you needed to be comfortable working in Ruby and be familiar with the tooling that comes with it. Nowadays we are using Javascript for everything. Web servers, build tooling, bot’s you can even control a drone using Javascript. So it makes sense to do deployment in Javascript as well.

Shipit’s task structure is very similar to that of Gulp. Since they are both based on orchestrator.

Besides the main API for handling remote work, there is also a dedicated deploy package based on git and rsync commands. With which you can deploy tag, branch or commit. Add additional behavior using hooks, build your project locally or remotely and you can do easy rollback.

A simple shipitfile.js would look something like this:

module.exports = function (shipit) {
  require('shipit-deploy')(shipit);

  shipit.initConfig({
    default: {
      workspace: '/tmp/github-monitor',
      deployTo: '/tmp/deploy_to',
      repositoryUrl: 'https://github.com/user/repo.git',
      ignores: ['.git', 'node_modules'],
      rsync: ['--del'],
      keepReleases: 2,
      key: '/path/to/key',
      shallowClone: true
    },
    staging: {
      servers: 'user@myserver.com'
    }
  });
};

The CLI structure works like: shipit <environment> <tasks ...>. So with a shipitfile.js like this:

shipit staging deploy

Usually I only mention stuff that is on Github, but I came across a tool which makes my personal development process a lot better. Sadly it’s not open source or at least not that I can tell. For now it’s still free, but eventually it will have a pricing. Do not think this is sponsored content, it is not.

So now you are probably curious what it’s all about. The tools is called Siphon and what it does is make you not use Xcode for developing and deployment of React Native apps.

The sandbox environment lets you create and test React Native apps without installing Xcode or Android Studio, which really amazed me. This would mean that you do not need to be on an Apple system to develop for iOS and Android, but if you prefer working on Slackware for instance, you can. There is no Windows support yet. If you were wondering, but the team is working on this.

Because the project is still in alpha it is missing support for a lot of things, such as the entire Android platform, but they will be rolling out plenty more features over coming weeks.

On the Siphon website are some wonderful tutorials on how to use their cli and sandbox. If I peaked your interest take a look at the Getting Started guide.

Inspire Tree (GitHub: helion3/inspire-tree, License: MIT, npm: inspire-tree)

First of all I would like to thank everybody that took the time to look at the Weekly Challenges over the weekend. If you have not looked at the challenge of last week you can still submit until Thursday night.

Now to business, Mike Botsko sent in Inspire Tree which is a un-opinionated collapsable tree UI library. The need for the library grew with the developers because the alternatives already out there where not extensive enough or just took to much hacking to make it listen to what they wanted.

Some of the features that jumped out to me are:

• Events everywhere
• ~40k minified, uncompressed
• No external dependencies
• Load data directly, via promises, callbacks, etc
• Load child nodes upfront or dynamically (or a mix of both)
• Tri-state checkboxes (optional)
• Multiselect (optional)
• Search by plain string, RegExp, custom matcher, or external resources (optional)

The renderer used by the library can be replaced with a custom renderer for framework support. Sadly there is only one example listed within the docs but it will be easy it would be to include it within React or Riot due to the Virtual DOM.

To work with this library you need to have an element on the page to target:

<div class="myTree"></div>

Now we can init tree functionality and fetch the data at the same time like so:

const tree = new InspireTree({
    target: '.tree',
    data: $.getJSON('http://example.com/some-data.json')
});

When custom behavior is needed you can attach this to be fired when curtain events are emitted. There is a list of events present on the Github page for reference. This is an example of how a click handler would look like:

tree.on('node.click', (evt, node) => {
    // node clicked!
    console.log(['node clicked', evt, node]);
});

The rest of the API is very well documented so I would suggest you browse through it if you need more convincing that this is one of the most extensive UI tree library out there.