DailyJS

DailyJS

The JavaScript blog.


Tagsponsored-content
Featured

sponsored-content build-tools build-systems wallaby.js testing build

Wallaby.js, Brunch

Posted on .

Wallaby.js

Wallaby.js, the continuous test runner that outputs results directly into your editor, currently has a 20% discount on IntelliJ Platform licenses until 7th of June 2015. There are also free betas available for Visual Studio, which usually costs $100 for a single license or $160 for a company seat license.

Wallaby.js for Visual Studio is new, and it supports code coverage, smart actions, and it has font and colour options. This is what it looks like:

Wallaby in VS

In that screenshot the green squares means that the source is covered by at least one test, and the pink square means the source is on the execution path of a failing test. The blog post on Visual Studio has more details and gifs for each feature.

In other Wallaby.js related news, it's recently got support for the Facebook Jest testing framework (which I've been using with React projects). You can find an example in wallaby-jest-sample.

Finally, Artem Govorov, who works on Wallaby.js, has been writing interesting posts about JavaScript testing on his blog. Check out Heroes of JavaScript and Testing for an amusing (but useful) overview of testing in JavaScript.

Brunch

If you're not entirely happy with Gulp and Grunt, did you know there's an older build system called Brunch? It's installable with npm (npm install -g brunch), and the people behind it have created a new guide that makes it easy to get started.

Brunch is not a task runner. Gulp and Grunt are generalised task runners, and one of the reasons they exist is not everyone can run JavaScript programs can easily run a makefile. I really like using makefiles for Node projects, but Windows web developers often complain that they don't have make installed, or don't want to install it. Another reason to use Gulp or Grunt is they can provide higher-level abstractions that make reading and writing tasks easier for web developers.

So why is Brunch not a task runner? Well, it's a purely focused on asset-building. It knows about JavaScript and CSS, and can handle incremental building and smart concatenation of these files. I recently spent a good two hours combining Watchify and Browserify in a Gulp task to get incremental builds working for a React/Browserify project, but if I'd have used Brunch I could have just run brunch watch --server.

Using Brunch with an existing project might have been as much work as my Gulp/Watchify/Browserify task -- I haven't yet tried using Brunch with a big and established (OK, messy) project. I have, however, tried creating a Brunch skeleton to see what a Brunch-built project looks like, and it seems pretty good to me. If you find Gulp and Grunt hard to use then try a Brunch skeleton and take a look at the new Brunch guide.

Featured

meteor books plugins databases servers apps mysql sponsored-content jquery

Your First Meteor Application, OData Server, ItemSlide.js

Posted on .

Your First Meteor Application

Your First Meteor Application

David Turnbull's Your First Meteor Application is a highly focused, beginner-friendly introduction to Meteor. David updates the book regularly when Meteor changes, so it's worth checking back every so often to look for new content.

You can read the book online or download the PDF for free. If you prefer video, there are also screencasts for $39.

OData Server

The OData Server (GitHub: gizur/odataserver, License: MIT, npm: odataserver) by Jonas Colmsjö is an OData server that's backed by MySQL. It's easy to drop into an Express project, and it's designed to work as a quick "mobile backend as a service" type of app.

It has a simple HTTP API, and Jonas has included usage examples for curl that show you how to create users, databases, and insert data. It actually does things like MySQL database and schema creation, so it requires a MySQL administrator account to work correctly.

If you're interested in this and want to quickly try it out, the advanced usage guide has instructions for deploying it to Docker.

ItemSlide.js

ItemSlide.js (GitHub: itemslide/itemslide.github.io, License: MIT, npm: itemslide) by Nir Lichtman is a touch-friendly carousel.

With jQuery you can set it up like this:

var carousel = $('ul');  
carousel.itemslide({ swipe_out: true });  

And it has events for responding to user interaction:

carousel.on('pan', function(e) {});  
carousel.on('changeActiveIndex', function(e) {});  
carousel.on('changePos', function(e) {  
  console.log('new pos:', carousel.getCurrentPos());
});
carousel.on('swipeout', function(event) {  
  console.log('swiped out slide:', event.slide);
});

You don't have to use it with jQuery, but if you do you'll get things like mousewheel support.

Featured

testing rest ES6 sponsored-content coverage

Wallaby.js Updates, Jasmine ES6 Tests, Chakram

Posted on .

Wallaby.js Updates

I recently wrote about Wallaby.js, and the authors have just released a major update that adds support for ES7, RequireJS, Browserify, and webpack. I'm a fan of Browserify so I was excited to see this -- you can get it at hwallabyjs/wallabify. The webpack postprocessor is available here: jeffling/wallaby-webpack.

Other updates include the news that a full-time developer has joined the project, and a tutorial that introduces the idea of live editing with testing.

Wallaby.js is an intelligent test runner for JavaScript projects, and has some cool features like editor-integrated code coverage reporting, and parallel test execution. It supports React JSX, popular test frameworks like Jasmine and Mocha, and even works with TypeScript and CoffeeScript.

Wallaby.js is a commercial product, but it's currently free during the preview. The site has more details on how to sign up for the preview: http://wallabyjs.com/.

Jasmine ES6 Tests

We're used to using transpilers for client-side code and sometimes Node projects, but what about tests? If ES6 really makes code more readable and maintainable, then I definitely want to use these language features to make my tests better! Torgeir Helgevold sent in a tutorial about writing Jasmine tests with ES6. The basic idea is to add preprocessors to a karma.config.js file that includes settings for Babel.

Karma is the test runner used by AngularJS, and it's test framework agnostic, so you could adapt this technique to work with Mocha as well.

Because Karma can easily be used to manipulate your test files before they execute, then it makes sense for people who want to use transpilers. I haven't done this before (my tests are usually very vanilla Mocha/assert tests), but it seems like a reasonable solution.

Chakram API Testing

Chakram (GitHub: dareid/chakram, License: MIT, npm: chakram) by Dan Reid is an API testing framework, based on promises. It includes Mocha and Chai, but instead of calling done callbacks you can use the wait method:

var chakram = require('chakram');  
var expect = chakram.expect;

describe('Minimal example', function() {  
  it('should provide a simple async testing framework', function() {
    var request = chakram.get('http://httpbin.org/get');
    expect(request).to.have.status(200);
    expect(request).not.to.have.header('non-existing-header');
    return chakram.wait();
  });
});

There's a list of extended chai expectations, and methods for HTTP and promises in the Chakram module documentation. This includes methods for HTTP verbs, so you can do chakram.patch and chakram.put.

Featured

libraries data maps tutorial sponsored-content geoip

Introduction to SimpleMaps

Posted on .

Interactive maps are a great way to visualize geographic data or improve website navigation. Now that SVG is supported by all modern browsers, it has become a popular format for interactive maps. Vector maps scale beautifully and are an attractive and lightweight alternative to Google Maps and OpenStreetMap.

SimpleMaps is a commercial interactive map library. It adds region-level zooming, responsiveness, legacy browser support, latitude/longitude calibration, mobile-friendly tooltips and more to an otherwise static SVG file. If you'd prefer to implement these features on your own, it also offers a free library of web-optimized SVG maps (MIT licensed).

This tutorial will demonstrate what is possible with SimpleMaps and how to get started. To begin, go to http://simplemaps.com/world and download the world map trial. Open test.html in a web browser to view the map.

Initial

The map consists of two JavaScript files: worldmap.js and mapdata.js. The vector paths and the map logic are stored in the worldmap.js file. All customizations to the map are stored in the mapdata.js file. The map can be easily customized by making changes to the mapdata.js file in a text editor and refreshing the browser.

The mapdata.js file contains defaults that can be overwritten for individual countries. For example, to make all countries red, you would simply set:

state_color: 'red',  

in the main_settings object. To override that default and make the USA blue, you'd simply add:

color: 'blue',  

to the US state_specific object. The description property for each country accepts HTML which will be displayed in the tooltip upon hover or (when a mobile device is detected) click.

To speed up the customization process, SimpleMaps offers an online customization tool that makes it easy to customize properties quickly using a spreadsheet. Countries, locations, and regions can all be customized using this Excel-like interface. Changes to the map are reflected in real time.

Customization

All customizations are automatically saved to the mapdata.js file. This makes it easy to switch between the convenience of the spreadsheet editor and the control of making changes directly to the JavaScript object. It is even possible to edit the JavaScript code online using the "Code" tab.

Code

When you are finished, you can install the map on a webpage by embedding both scripts and adding a target <div>:

<script type="text/javascript" src="mapdata.js"></script>  
<script type="text/javascript" src="worldmap.js"></script>  
<div id="map"></div>  

To fully integrate SimpleMaps with other web page elements you can utilize its JavaScript API. This makes it possible to update the map, listen for map events, and dynamically zoom around the map.

All around, SimpleMaps aims to simplify the process of creating interactive maps while retaining the flexibility that has made SVG maps so popular.

Featured

books sponsored-content meteor react WebComponent

SceneVR: Node and WebGL 3D Scenes

Posted on .

SceneVR

For years I've wanted to make a WebGL version of Elite (or maybe Elite II). The technical trick to making it really compelling and native to the web would be if it streamed data with WebSocket to the client... maybe huge persistent galaxies could live on clusters of Node/io.js servers!

I'm never going to have the time to make anything like that, but Ben Nolan's SceneVR project (GitHub: bnolan/scenevr, License: BSD, npm: scenevr) seems like a fun way of experimenting with interconnected virtual reality worlds. The demo allows you to walk around a 3D world with links to various games. There's a Pac-Man game, a chess game, and some other cool stuff as well.

It works by streaming XML data to the browser from a Node server. The server uses Express, and the scenes rendered on the client use HTML-like markup with CSS:

<scene>  
  <box id="mycube" position="1 2 3" scale="1 1 1" style="color: #f07" />
</scene>  

The scenes can then be scripted with JavaScript, so you can add rules to create games:

document.getElementById("mycube").addEventListener("click", function(e){  
  document.scene.removeChild(document.getElementById("mycube"));
});

It even supports multiplayer games by streaming player events to each client. Editing scenes also pushes data to the client, so you can live edit and quickly preview the results.

Ben has added WebVR browser support, so if you've got an Oculus Rift you can actually view scenes in VR.