The JavaScript blog.


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 (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.


libraries animation jquery ui tabs

PWS Tabs, wheelnav.js

Posted on .

PWS Tabs

PWS Tabs (GitHub: alexchizhovcom/pwstabs, License: MIT) by Alex Chizhov is a jQuery plugin that helps you create modern, flat tabs, with CSS3 animations and Font Awesome Icons.

It uses data- attributes to set the tab's title and icon. The $(selector).pwstabs method accepts options for the tab position (horizontal or vertical) and the animation effect name.

The plugin source itself is fairly leightweight, and it comes with examples that include CSS. When I reviewed this plugin I had to download the examples because I couldn't access Alex's site, but he does link to a live demo in the readme.


wheelnav.js (GitHub: softwaretailoring/wheelnav) by Gábor Berkesi is an SVG-based library that you can use for a centerpiece animated navigation component. This might work well for a marketing website, which is the example Gábor uses, but I think it would be really cool on a child-friendly site with lots of bright colours site as well.

The licensing is mixed -- there are free versions but also more advanced paid versions.

A good example of the library can be found on the download page, which ties a spinning component in with some tabbed navigation.


jquery browser build-tools

Mask.js, Sloc

Posted on .


Mask.js (GitHub: bguzmanrio/maskjs, License: GPL) by Borja Guzmán is a library for validating input fields against dates, numbers, and text. It allows people to type in dates using numbers so they don't have to type in the necessary punctuation.

It prevents invalid input from being typed and allows you to skip between numbers, so it's less rigid than some implementations.

The API uses methods on Mask:

  $el: $('input.name'),
  mask: 'HH:mm',
  errorFunction: function() {},
  defaultValue: '12:00'


If you want to generate metrics for a project like source code length, how do you do things like ignore comments and empty lines? Sloc (GitHub: flosse/sloc, License: MIT, npm: sloc, Bower: sloc-bower) by flosse handles these edge cases and more. It also supports lots of languages, including JavaScript, CoffeeScript, Lua, and Swift.

It comes with a command-line script that you can run with sloc file.js, and it'll automatically recurse directories. There are options for ignoring files (--exclude pattern) and selecting an output format (--format [json|csv|cli-table]).

Sloc has a Node module, so you can require('sloc') and run sloc(source, language) to get an object with various statistics. The project itself is well-tested, and has some cool usages like atom-sloc.


libraries jquery data node modules responsive

BiMap, jQuery breakpoint

Posted on .


BiMap (GitHub: alethes / bimap, License: MIT, npm: bimap) by James Daab is a bidirectional map implementation. This is a data structure that allows you to query for values by keys and keys by values:

  a: {
    b: 1,
    c: {
      d: 2
bimap.key('a.b'); // => 1  
bimap.val(2); // => "a.c.d"  

jQuery breakpoint

jQuery breakpoint (GitHub: joshbambrick / breakpoint, License: MIT) by Joshua Bambrick is a plugin for tracking page resizes, and is ideal for when you need JavaScript to trigger in a responsive design.

You can attach listeners with $.breakpoint.on, and an array is accepted so you can respond to different preset device sizes. There's also $.breakpoint.off for removing listeners, and $.breakpoint.changeBreakpoints for changing the globally recognised device sizes.


libraries animation jquery ui

jquery.smoothstate.js, underscore-tpl

Posted on .


jquery.smoothState.js (GitHub: weblinc / jquery.smoothState.js, License: MIT) by Miguel Angel Perez promises to improve the early page loading experience by reducing the amount of sudden visual cuts.

By using unobtrusive JavaScript, jquery.smoothState.js loads content asynchronously and updates the URL with history.pushState. Animations are used as a visual cue to indicate when the main page content has been replaced.

The project's documentation uses these techniques, but take a look at the demo for a more basic example to get started.


underscore-tpl (GitHub: creynders / underscore-tpl, License: MIT) by Camille Reynders allows you to expand placeholders stored within objects:

var config = {  
  baz: '<%= qux.mofo %>',
  major: {
    badass: '<%= badass %>'
  '<%= foo %>': 'bar'

It can use mustache-style tags instead of ERB, and accepts the same options as _.templateSettings.

I've found myself using this type of thing for generating seed data or fixtures in tests, but I imagine it might also be useful if you're passing plain objects around with data-binding libraries as well.