AngularJS: About Those Custom Attributes...

06 Sep 2012 | By Alex Young | Comments | Tags mvc tutorials angularjs

The first thing I noticed on the AngularJS homepage was the use of a non-standard attribute, ng-app:

<div ng-app>
  <div>
    <label>Name:</label>
    <input type="text" ng-model="yourName" placeholder="Enter a name here">
    <hr>
    <h1>Hello !</h1>
  </div>
</div>

Suspicious as I am, I wanted to look into this further. Running a more complete HTML5 example through the w3.org validator shows errors for each ng- attribute:

  • Attribute ng-app not allowed on element div at this point.
  • Attribute ng-model not allowed on element div at this point.

Earlier HTML specifications state that unrecognised attributes should be ignored, so this should be safe enough – clients will generally ignore the unrecognised attribute and JavaScript can handle it as required by AngularJS.

The AngularJS developers have gone a step further to quell fears of rogue attributes causing unexpected issues: it now transparently supports data- prefixed attributes. That means the previous example could be written with data-ng-app and it would still work. I tried it out and found that it even copes with mixed attribute styles.

Knockout

Unlike AngularJS, Knockout embraced data- attributes from the beginning. The documentation even clarifies the use of data attributes:

The data-bind attribute isn’t native to HTML, though it is perfectly OK (it’s strictly compliant in HTML 5, and causes no problems with HTML 4 even though a validator will point out that it’s an unrecognized attribute). But since the browser doesn’t know what it means, you need to activate Knockout to make it take effect.

Although AngularJS now fully supports this approach, using custom attributes may have hurt early adoption.

Directives

The underlying mechanism that AngularJS uses to support multiple attribute prefixes is Directives, which according to the documentation turns HTML into a “declarative domain specific language”. You may have noticed that AngularJS templates are HTML – this contrasts with many other frameworks that use a string-based template system. Since templates are HTML, the entire page can be loaded and parsed by the browser. The resulting DOM is traversed by AngularJS’s compiler to find directives. The resulting set of directives is associated with DOM elements and prioritised. Each directive has a compile method, which can modify the DOM, and generates a link function.

Links are live bindings, and splitting compilation into stages like this means AngularJS can do a certain amount of work before repeatedly rendering sets of elements. The example in the documentation is rendering lots of list elements:

The result of of the li element compilation is a linking function which contains all of the directives contained in the li element, ready to be attached to a specific clone of the li element.

Conclusion

Although AngularJS may have been treated with some trepidation due to the adoption of non-standard HTML attributes, the authors have identified this and it’s possible to write applications that will validate. The “declarative domain specific language” concept is definitely interesting, and the two-stage compilation process has some advantages over other schemes that I’ve seen.

Node Roundup: redis-stream, DataGen, Cushion

05 Sep 2012 | By Alex Young | Comments | Tags node modules libraries streams redis couchdb
You can send in your Node projects for review through our contact form or @dailyjs.

redis-stream

redis-stream (License: MIT, npm: redis-stream) by Thomas Blobaum is a stream-based wrapper around the Redis protocol. It’s actually an extremely lightweight module, but the author has included tests and some interesting examples. The standard Node stream methods work, so data can be piped:

var Redis = require('redis-stream')
  , client = new Redis(6379, localhost, 0)
  , rpop = client.stream('rpop');

rpop.pipe(process.stdout);
rpop.write('my-list-key');

This doesn’t just apply to rpop, other Redis commands will also work in a similar way.

DataGen

DataGen (GitHub: cliffano / datagen, License: MIT, npm: datagen) by Cliffano Subagio is a multi-process test data file generator. It can be used to generate files in various formats, including CSV and JSON, based on template files that describe the output. Random numbers, dates, and strings can be generated.

The underlying random data generation is based on the Faker library, and Mocha tests are included.

Cushion

Cushion (GitHub: Zoddy / cushion, License: MIT, npm: cushion) by André Kussmann is a CouchDB API. It has Node-friendly asynchronous wrappers around the usual CouchDB API methods, and it also supports low-level requests by calling cushion.request. Fetching documents returns a document object that can be modified and saved like this:

var doc = db.document('id');
doc.load(function(err, document) {
  document.body({ name: 'Quincy' });
  document.save();
});

Designs and users can also be fetched and manipulated.

RoyalSlider: Tutorial and Code Review

04 Sep 2012 | By Alex Young | Comments | Tags libraries browser plugins jquery sponsored-content

RoyalSlider

There are a lot of carousel-style plugins out there, and they all have various strengths and weaknesses. However, RoyalSlider (License: Commercial, CodeCanyon: RoyalSlider, Price: $12) by Dmitry Semenov is a responsive, touch-enabled, jQuery image gallery and content slider plugin, and is one of the slickest I’ve seen. The author has worked hard to ensure it’s fast and efficient – it features smart lazy loading, hardware accelerated CSS3 transitions, and a memory management algorithm that ensures only visible slides are in the DOM at any one time.

The plugin is actively maintained, and has seen over a dozen updates since its release in August 2011. It’s distributed exclusively through CodeCanyon, but Dmitry’s site also has documentation and details on WordPress integration. Purchasing RoyalSlider gives access to a set of RoyalSlider templates that includes several types of galleries that should slot right in to your projects.

Since the plugin was originally released it has received extremely positive feedback (which is partly why it was chosen for a Featured Content post) – Dmitry has sold over 4,500 licenses, and it’s earned a 5 star rating based on 378 reviews.

Browser Support

RoyalSlider has been tested on IE7+, iOS, Opera Mobile, Android 2.0+, Windows Phone 7+, and BlackBerry OS.

Download and Setup

RoyalSliders build tool

RoyalSlider can be downloaded as either a development archive (that contains the original, unminified source), or a customised build can be created using Dmitry’s web-based build tool (access is granted once a license has been purchased).

To add RoyalSlider to a page, ensure you’ve included jQuery 1.7 or above, and then include the stylesheet and JavaScript:

<link rel="stylesheet" href="royalslider/royalslider.css">
<script src="royalslider/jquery.royalslider.min.js"></script>

The plugin expects a container element with the royalSlider class. Each child element will be considered a slider:

<div class="royalSlider rsDefault">
  <!-- simple image slide -->
  <img class="rsImg" src="image.jpg" alt="image desc" />

  <!-- lazy loaded image slide -->
  <a class="rsImg" href="image.jpg">image desc</a>

  <!-- image and content -->
  <div>
    <img class="rsImg" src="image.jpg" data-rsVideo="https://vimeo.com/44878206" />
    <p>Some content after...</p>
  </div>
</div>

Then all you need to do is run $.fn.royalSlider:

$(function() {
  $('.royalSlider').royalSlider();
});

At this point options can be provided, and believe me there are a lot of options!

Examples

RoyalSlider example

The templates distributed alongside RoyalSlider include full examples with JavaScript, CSS, and HTML. The example above is suitable for a gallery, and it includes quite a few interesting features:

  • Scrolling thumbnail navigation
  • Fullscreen mode
  • Automatically loads higher quality images in fullscreen mode
  • Responsive images using media queries
  • Keyboard arrow navigation

To set up a gallery like this, all that’s required is suitable images and $.fn.royalSlider with the options along these lines:

$('#gallery-1').royalSlider({
  fullscreen: {
    enabled: true
  , nativeFS: true
  }
, controlNavigation: 'thumbnails'
, autoScaleSlider: true
, autoScaleSliderWidth: 960
, autoScaleSliderHeight: 850
, loop: false
, numImagesToPreload: 4
, arrowsNavAutoHide: true
, arrowsNavHideOnTouch: true
, keyboardNavEnabled: true
});

The option names are fairly verbose so it’s easy to tell what they do, but I’ll go over the main ones below.

  • autoScaleSlider: This automatically updates the slider height based on the width, most of the examples use this option
  • numImagesToPreload: Sets the number of images to load relative to the current image
  • arrowsNavAutoHide: Hide the navigation arrows when the user isn’t interacting with the plugin

Mobile Support

RoyalSlider running on Android and iOS

RoyalSlider includes several ways to support touchscreen devices. Swipe gestures work as expected, and there are a couple of relevant options:

  • arrowsNavHideOnTouch: Always hide arrows on touchscreen devices
  • sliderTouch: Allows the slider to work using touch-based gestures

There are also events for dealing with gestures, which you can hook into like this:

sliderInstance.ev.on('rsDragStart', function() {
  // mouse/touch drag start
});

sliderInstance.ev.on('rsDragRelease', function() {
  // mouse/touch drag end
});

I tested the plugin using several examples on iOS and Android 4.1 and was generally impressed by the performance.

Code Review

When I look at jQuery plugins I usually run through the advice found in the jQuery Plugin Authoring Guide. I’d like to only write about plugins that are well-written, and you’d be surprised how many are not, given that the jQuery team has worked hard to document exactly how to write a plugin. With that in mind, I took a look at RoyalSlider’s source to see how it stacks up.

RoyalSlider is split up into separate files using a modular approach. That enables the build tool to only include what’s necessary, so it’s actually pretty trivial to make a build directly suited to a given project. The code is also consistently formatted, so I strongly recommend downloading the development version just in case you’ve got questions that aren’t answered by the documentation – the code is easy enough to understand for an intermediate jQuery developer.

All of these modules and the main source file are wrapped in closures, so RoyalSlider doesn’t introduce any messy globals.

Most of the plugin’s code is based around a standard JavaScript constructor, which also adds to its readability. This made me wonder if the author intends to port it to other JavaScript frameworks, because it seems like large portions of functionality are neatly encapsulated from jQuery’s API.

In terms of low-level DOM coding and animation performance, it has Paul Irish and Tino Zijdel’s requestAnimationFrame fixes, and uses CSS vendor prefixing where required.

Namespacing

RoyalSlider adds these methods and objects to $:

  • $.rsProto
  • $.rsCSS3Easing
  • $.rsModules
  • $.fn.royalSlider

In general plugins should limit how many things they add to $, but I felt like the author has been careful here and only exposed what’s necessary.

  • Namespaces events and CSS classes, example: keydown.rskb
  • Correctly tracks state using royalSlider .data attribute

Other Notes

Most jQuery plugin authors seem to miss the section on using $.extend to handle options, but I was pleased to see Dmitry has done this. The main jQuery method also returns this, so calls after .royalSlider can be chained as expected.

Support and Community

RoyalSlider has its own Tender-powered support site, and the author also talks to users through his Twitter account: @dimsemenov.

WebSpecter, cerebral.js, Mobify.js

03 Sep 2012 | By Alex Young | Comments | Tags testing frameworks libraries backbone.js mobile

WebSpecter

WebSpecter (License: MIT) by Juliusz Gonera is an acceptance test framework built using PhantomJS. The author’s examples are written with CoffeeScript, but it can be used with JavaScript as well.

The tests use a BDD-style syntax, based around “features” and CSS selectors:

feature "GitHub search", (context, browser, $) ->
  before (done) -> browser.visit 'https://github.com/search', done

  it "finds WebSpecter", (done) ->
    $('input[name=q]').fill 'webspecter'
    $(button: 'Search').click ->
      $(link: "jgonera / webspecter").present.should.be.true
      done()

  it "looks only for users when asked to", (done) ->
    $('input[name=q]').fill 'webspecter'
    $(field: 'Search for').select 'Users'
    $(button: 'Search').click ->
      $(link: "jgonera / webspecter").present.should.be.false
      done()

The browser object is a wrapper around Phantom’s WebPage. A $ function is also present which is jQuery-like but not implemented using jQuery.

cerebral.js

cerebral.js (GitHub: gorillatron / cerebral) by Andre Tangen extends Backbone.js to provide a module system and a publish/subscribe application core. It uses RequireJS for modules and module loading, and modules are restricted to a “sandbox” designed to limit the elements the module has access to.

The main motivation behind cerebral.js is to encourage loosely coupled applications. When I’m working on my own Backbone.js applications I usually adopt a similar approach, so it’s reassuring to see the same ideas in a framework.

Mobify.js

Mobify.js (GitHub: mobify / mobifyjs, License: MIT, npm: mobify-client) is a new client-side web framework that aims to make it easier to adapt sites to any device. This includes responsive design techniques, but it can also be backed by a cloud service called Mobify Cloud that includes automatic image resizing, JavaScript concatenation, and a CDN. Mobify.js projects are built with Zepto and Dust.js.

The Mobify.js authors have also been building MIT-licensed Mobify.js modules, at the moment there’s a carousel and an accordion.

js13kGames, simplex-noise.js, Media Chooser, User Message Queue

31 Aug 2012 | By Alex Young | Comments | Tags games competitions services node

js13kGames

js13kGames

js13kGames is a HTML5 and JavaScript game development competition. It’s currently open for entries, and the competition will close on the 13th September 2012. The basic rule states that entries must be less than 13 KB, but please read through all of the rules before entering.

The judges include Michal Budzynski (Firefox OS developer) and Rob Hawkes (Mozilla), and the competition was organised by Andrzej Mazur.

simplex-noise.js

simplex-noise.js (npm: simplex-noise) by Jonas Wagner is a simplex noise implementation, which is often used to generate noise for graphics. The author has posted a plasma demo to jsFiddle.

Media Chooser

Media Chooser (GitHub: chute / media-chooser) from Chute is a client-side library for working with Chute’s media API. Files can be uploaded or selected from social networks like Facebook and Instagram. It’s an extremely simple way of accepting file uploads in a single page application without the traditional server-side requirements.

User Message Queue

User Message Queue (License: MIT) by Robert Murray is a FIFO message queue. It allows messages to be pushed to a queue that will be displayed one after another in a suitable container element. It’s simple and lightweight, so it might work well in combination with a client-side toolkit like Bootstrap.

Optimistic Server Interactions

30 Aug 2012 | By Alex Kessinger | Comments | Tags mobile async
Alex Kessinger is a programmer who lives in the Bay Area. He strives to make websites, cook, and write a little bit better each day. You can find more from Alex at his blog, on App.net, and Google+.

At PicPlz we built a hybrid mobile app. We had a native container written for iOS and Android that hosted a web version of our code. PicPlz was the first time I had worked on a fully mobile website. My operating paradigm was that I was building a website for a small screen.

One day, our iOS developer asked me why our follow button didn’t just react when a user touched it. He pointed out that most iOS apps work that way. It was a glaring reminder that our app was something other than native. I genuinely had never thought about doing it any other way. I was building a web app, and when building web apps there is network IO. For things to be consistent, you need to wait until the network IO has finished. The other engineer persisted though, claiming that it doesn’t have to work that way.

In order to make it feel more native I wrote the code so that the button would activate and change state immediately. If there was an error, which was infrequent, the button would flip back to inform the user. In the other 99.99% of the time the user would feel as if the interaction happened immediately.

Since implementing these interactions in PicPlz I have found out what they are called: Optimistic server interactions. While it is how things work in most mobile applications, it’s not how most things work in web applications. Why? Well, we all know exactly what’s going on when we make a request to a server – nothing is certain unless a response is received. When we see a spinner or a loading bar we understand, but does a user? Do they understand that your web page is making HTTP requests on their behalf, or are they about to click away from your website because it feels slow?

I am sure you might be worried that this approach feels strange from a user experience point of view. Yes, it’s weird, but how often will this happen? If your code is that fragile, then you might have a bigger problem.

Coding Style

There are times when optimistic server interactions are awkward to write. For example, building a chain of such interactions will result in highly indented callbacks.

Despite this, most cases shouldn’t be more complex than the following pseudo-code example:

$('body').on('click', '.favorite', function() {
  var button = $(this);
  button.addClass('active');
  $.post('/follow', { 'favorite': true }).fail(function() {
    // flip favorite button to inactive
    button.removeClass('active');
    // inform user action failed.
  });
});

Another criticism is that if this happens too often, users will begin to question whether their actions are actually doing anything. This is a valid concern, but as I said earlier if your code really is failing this often then you probably have larger problems.

To be fair, I haven’t really tried this on any major piece of code. This is a trick I use mostly for small interactions like follow or favorite buttons. Web apps like Google Docs are clearly using this type of interaction all the time. Still, this technique is slowly working its way into larger interactions. If you do client-side rendering, then you’re 90% there. You can capture user input and update the interface immediately.

I’d like to thank Mark Storus for providing counter arguments.

Node Roundup: Stream Handbook, Screenshot as a Service, captchagen, Suppose

29 Aug 2012 | By Alex Young | Comments | Tags node modules libraries security unix streams
You can send in your Node projects for review through our contact form or @dailyjs.

Stream Handbook

Stream Handbook by the venerable James Halliday is a guide to streams, a commonly overlooked feature of Node that’s only just starting to get the attention it deserves.

So far James has written a solid introduction to streams, and he’s working on adding more detailed coverage based on Node’s related API methods and objects.

Screenshot as a Service

Screenshot as a Service (GitHub: fzaninotto / screenshot-as-a-service, License: MIT) by Francois Zaninotto is a fork of TJ Holowaychuk’s screenshot-app, which is running at screenshot.etf1.fr. Since forking the app, Francois has worked on making it more robust. It can be used synchronously or asynchronously:

# Take a screenshot
GET /?url=www.google.com

# Asynchronous call
GET /?url=www.google.com&callback=http://www.myservice.com/screenshot/google

captchagen

captchagen

captchagen (License: MIT, npm: captchagen) from the team at Fractal is a CAPTCHA image generator. It can generate both a PNG and the corresponding audio through eSpeak.

Images are generated based on a custom algorithm and the Canvas module. Mocha tests have been included.

Suppose

Suppose (GitHub: jprichardson / node-suppose, License: MIT, npm: suppose) by JP Richardson is a JavaScript version of Expect (man expect). It has a chainable API, so it’s easy to create complex expectations with a familiar syntax:

suppose('npm', ['init'])
  .debug(fs.createWriteStream('/tmp/debug.txt'))
  .on(/name\: \([\w|\-]+\)[\s]*/).respond('awesome_package\n')
  .on('version: (0.0.0) ').respond('0.0.1\n')
  .on('description: ').respond("It's an awesome package man!\n")
  .on('entry point: (index.js) ').respond("\n")
  .on('test command: ').respond('npm test\n')
  .on('git repository: ').respond("\n")
  .on('keywords: ').respond('awesome, cool\n')
  .on('author: ').respond('JP Richardson\n')
  .on('license: (BSD) ').respond('MIT\n')
  .on('ok? (yes) ' ).respond('yes\n')
.error(function(err){
    console.log(err.message);
})
.end(function(code){

The author has included Mocha tests and examples in the readme file.

jQuery Roundup: jQuery Color 2.1.0, jQuery UI 1.9 RC, Avgrund Modal

28 Aug 2012 | By Alex Young | Comments | Tags jquery plugins jqueryui effects
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

jQuery Color 2.1.0

jQuery Color 2.1.0 (GitHub: jquery / jquery-color, License: MIT) has been released. This plugin includes lots of methods for defining, parsing, and otherwise manipulating and animating colours. Version 2 includes new API methods that allow colours to be created and modified, and this includes support for RGBA and HSLA colours and animations.

Here are some examples of the plugin in use:

// String colour parsing
$.Color('#abcdef');
$.Color('rgba(100,200,255,0.5)');
$.Color('aqua');

// RGB
$.Color(255, 0, 0);

// RGBA
$.Color(255, 0, 0, 0.8);

// Objects work as well
$.Color({ red: red, green: green, blue: blue, alpha: alpha });

// Getters and setters
$.Color(255, 100, 130)
  .green(101)
  .green(); // 101

// Conversion
$.Color(255, 100, 130).toRgbaString(); // 'rgb(255,100,130)'

jQuery UI 1.9 RC

jQuery UI 1.9 RC has been released, and updates jQuery to 1.8 and jQuery Color to the 2.0 series. The jQuery UI team are also working on upgrading the project’s infrastructure:

We’re working on a new web site, new download builder, and new documentation site to accompany the new release.

Avgrund Modal

Avgrund

Avgrund Modal (GitHub: voronianski / jquery.avgrund.js, License: MIT) by Dmitri Voronianski is a modal plugin that attempts to create the impression of depth as the modal appears on the page. The main content zooms out as the modal appears – the overall effect is surprisingly slick. Basic usage is $(selector).avgrund(), but the plugin has lots of options:

$('element').avgrund({
  width: 380
, height: 280
, showClose: false
, showCloseText: ''
, holderClass: ''
, overlayClass: ''
, enableStackAnimation: false
, template: 'Your content goes here..'
});

This plugin is based on the Avgrund concept by Hakim El Hattab.

JS101: Equality

27 Aug 2012 | By Alex Young | Comments | Tags js101 tutorials language beginner

There are four equality operators in JavaScript:

  • Equals: ==
  • Not equal: !=
  • Strict equal: ===
  • Strict not equal: !==

In JavaScript: The Good Parts, Douglas Crockford advises against using == and !=:

My advice is to never use the evil twins. Instead, always use === and !==.

The result of the equals operator is calculated based on The Abstract Equality Comparison Algorithm. This can lead to confusing results, and these examples are often cited:

'' == '0'           // false
0 == ''             // true
0 == '0'            // true

false == undefined  // false
false == null       // false
null == undefined   // true

Fortunately, we can look at the algorithm to better understand these results. The first example is false due to this rule:

If Type(x) is String, then return true if x and y are exactly the same sequence of characters (same length and same characters in corresponding positions). Otherwise, return false.

Basically, the sequence of strings is not the same. In the second example, the types are different, so this rule is used:

If Type(x) is Number and Type(y) is String, return the result of the comparison x == ToNumber(y).

This is where the behaviour of the == starts to get seriously gnarly: behind the scenes, values and objects are changed to different types. The equality operator always tries to compare primitive values, whereas the strict equality operator will return false if the two values are not the same type. For reference, the underlying mechanism used by the strict equality operator is documented in the The Strict Equality Comparison Algorithm section in the ECMAScript Specification.

Strict Equality Examples

Using the same example with the strict equality operator shows an arguably more intuitive result:

'' === '0'           // false
0 === ''             // false
0 === '0'            // false

false === undefined  // false
false === null       // false
null === undefined   // false

Is this really how professional JavaScript developers write code? And if so, does === get used that often? Take a look at ajax.js from jQuery’s source:

executeOnly = ( structure === prefilters );
if ( typeof selection === "string" ) {
} else if ( params && typeof params === "object" ) {

The strict equality operator is used almost everywhere, apart from here:

if ( s.crossDomain == null ) {

In this case, both undefined and null will be equal, which is a case where == is often used in preference to the strict equivalent:

if ( s.crossDomain === null || s.crossDomain === undefined ) {

Assertions

One place where the difference between equality and strict equality becomes apparent is in JavaScript unit tests. Most assertion libraries include a way to check ‘shallow’ equality and ‘deep equality’. In CommonJS Unit Testing, these are known as assert.equal and assert.deepEqual.

In the case of deepEqual, there’s specific handling for dates and arrays:

equivalence is determined by having the same number of owned properties (as verified with Object.prototype.hasOwnProperty.call), the same set of keys (although not necessarily the same order), equivalent values for every corresponding key, and an identical “prototype” property

Conclusion

To understand how equality and strict equality work in JavaScript, primitive values and JavaScript’s implicit type conversion behaviour must be understood. In general, experienced developers advocate using ===, and this is good practice for beginners.

In recognising the confusion surrounding these operators, there is a significant amount of documentation on the topic. For example, Comparison Operators in Mozilla’s JavaScript Reference.

Minecraft Character WebGL, OpenSceneGraph, BroadStreet, Bootstrap

24 Aug 2012 | By Alex Young | Comments | Tags webgl threejs bootstrap backbone.js

Minecraft Character in WebGL

Minecraft Items demo

In Minecraft Character in WebGL, Jerome Etienne demonstrates how to render and animate Minecraft characters using his tQuery library. This was inspired by the Minecraft Items Chrome Experiment.

OpenSceneGraph

Mickey point cloud

OpenSceneGraph (GitHub: cedricpinson / osgjs, License: LGPL) by Cedric Pinson is a WebGL framework based on OpenSceneGraph – a 3D API typically used in C++ OpenGL applications. This means it’s possible for developers experienced with OpenSceneGraph to bring their projects across to a familiar environment that runs in modern browsers thanks to WebGL.

BroadStreet

BroadStreet (GitHub: DarrenHurst / BroadStreet, License: MIT) by Darren Hurst is a set of controls for Backbone.js. It includes a list selector, iOS-style toggles and alerts, SVG icons, and labels.

Each control inherits from Backbone.View.extend, so the API looks like a standard Backbone object:

var toggle = new Toggle('controls', this).render();
toggle.setTitle('Example title');

The author recommends testing the project with a web server to avoid security restrictions caused when running the examples locally.

Bootstrap 2.1.0

Bootstrap 2.1.0 is out:

New docs, affix plugin, submenus on dropdowns, block buttons, image styles, fluid grid offsets, new navbar, increased font-size and line-height, 120+ closed bugs, and more. Go get it.

The Bootstrap homepage showcases the new features and has a slight redesign. Hopefully it’ll inspire Bootstrap users to customise their projects a little bit instead of using the same black gradient navigation bar on every single project!

How Ender Bundles Libraries for the Browser

23 Aug 2012 | By Rod Vagg | Comments | Tags ender frameworks modules libraries tutorials
This is a contributed post by Rod Vagg. This work is licensed under a Creative Commons Attribution 3.0 Unported License.

I was asked an interesting Ender question on IRC (#enderjs on Freenode) and as I was answering it, it occurred to me that the subject would be an ideal way to explain how Ender’s multi-library bundling works. So here is that explanation!

The original question went something like this:

When a browser first visits my page, they only get served Bonzo (a DOM manipulation library) as a stand-alone library, but on returning visits they are also served Qwery (a selector engine), Bean (an event manager) and a few other modules in an Ender build. Can I integrate Bonzo into the Ender build on the browser for repeat visitors?

What’s Ender?

Let’s step back a bit and start with some basics. The way I generally explain Ender to people is that it’s two different things:

  1. It’s a build tool, for bundling JavaScript libraries together into a single file. The resulting file constitutes a new “framework” based around the jQuery-style DOM element collection pattern: $('selector').method(). The constituent libraries provide the functionality for the methods and may also provide the selector engine functionality.
  2. It’s an ecosystem of JavaScript libraries. Ender promotes a small collection of libraries as a base, called The Jeesh, which together provide a large portion of the functionality normally required of a JavaScript framework, but there are many more libraries compatible with Ender that add extra functionality. Many of the libraries available for Ender are also usable outside of Ender as stand-alone libraries.

The Jeesh is made up of the following libraries, each of these also works as a stand-alone library:

  • domReady: detects when the DOM is ready for manipulation. Provides $.domReady(callback) and $.ready(callback) methods.
  • Qwery: a small and fast CSS3-compatible selector engine. Does the work of looking up DOM elements when you call $('selector') and also provides $(elements).find('selector'), $(elements).and(elements) and $(elements).is('selector').
  • Bonzo: a DOM manipulation library, providing some of the most commonly used methods, such as $(elements).css('property', 'value'), $(elements).empty(), $(elements).after(elements||html), and many more.
  • Bean: an event manager, provides jQuery-style $(elements).bind('event', callback) and others.

The Jeesh gives you the features of these four libraries bundled into a neat package for only 11.7 kB minified and gzipped.

The Basics: Bonzo

Bonzo is a great way to start getting your head around Ender because it’s so useful by itself. Let’s include it in a page and do some really simple DOM manipulation with it.

<!DOCTYPE HTML>
<html lang="en-us">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>Example 1</title>
</head>
<body>
  <script src="bonzo.js"></script>
  <script id="scr">
    // the contents of *this* script,
    var scr = document.getElementById('scr').innerHTML

    // create a <pre></pre>
    var pre = bonzo.create('<pre>')

    // fill it with the script text, append it to body and style it
    bonzo(pre)
      .text(scr)
      .css({
        fontWeight: 'bold',
        border: 'solid 1px red',
        margin: 10,
        padding: 10
      })
      .appendTo(document.body);

  </script>
</body>
</html>

You can run this as example1, also available in my GitHub repository for this article.

This should look relatively familiar to a jQuery user – you can see that Bonzo is providing some of the important utilities you need for modifying the DOM.

Bonzo Inside Ender

Let’s see what happens when we use a simple Ender build that includes Bonzo. We’ll also include Qwery so we can skip the document.getElementById() noise, and we’ll also use Bean to demonstrate how neatly the libraries can mesh together.

This is done on the command line with: ender build qwery bean bonzo. A file named ender.js will be created that can be loaded on a suitable HTML page.

Our script becomes:

$('<pre>')
  .text($('#scr').text())
  .css({
    fontWeight: 'bold',
    border: 'solid 1px red',
    margin: 10,
    padding: 10
  })
  .bind('click', function () {
    alert('Clickety clack');
  })
  .appendTo('body');

You can run this as example2, also available in my GitHub repository for this article.

Bonzo performs most of the work here but it’s bundled up nicely into the $ object (also available as ender). The previous example can be summarised as follows:

  • bonzo.create() is now working when HTML is passed to $().
  • Qwery does the work when $() is called with anything else, in this case $('#scr') is used as a selector for the script element.
  • We’re using the no-argument variant of bonzo.text() to fetch the innerHTML of the script element.
  • Bean makes a showing with the .bind() call, but the important point is that it’s integrated into our call-chain even though it’s a separate library. This is where Ender’s bundling magic shines.
  • bonzo.appendTo() takes the selector argument which is in turn passed to Qwery to fetch the selected element from the DOM (document.body).

Also important here, which we haven’t demonstrated, is we can do all of this on multiple elements in the same collection. The first line could be changed to $('<pre></pre><pre></pre>') and we’d end up with two blocks, both responding to the click event.

Removing Bonzo

It’s possible to pull Bonzo out of the Ender build and manually stitch it back together again. Just like we used to do with our toys when we were children! (Or was that just me?)

First, our Ender build is now created with: ender build qwery bean (or we could run ender remove bonzo to remove Bonzo from the previous example’s ender.js file). The new ender.js file will contain the selector engine goodness from Qwery, and event management from Bean, but not much else.

Bonzo can be loaded separately, but we’ll need some special glue to do this. In Ender parlance, this glue is called an Ender Bridge.

The Ender Bridge

Ender follows the basic CommonJS Module pattern – it sets up a simple module registry and gives each module a module.exports object and a require() method that can be used to fetch any other modules in the build. It also uses a provide('name', module.exports) method to insert exports into the registry with the name of your module. The exact details here aren’t important and I’ll cover how you can build your own Ender module in a later article, for now we just need a basic understanding of the module registry system.

Using our Qwery, Bean and Bonzo build, the file looks something like this:

|========================================|
| Ender initialisation & module registry |
| (we call this the 'client library')    |
|========================================|
| 'module.exports' setup                 |
|----------------------------------------|
| Qwery source                           |
|----------------------------------------|
| provide('qwery', module.exports)       |
|----------------------------------------|
| Qwery bridge                           |
==========================================
| 'module.exports' setup                 |
|----------------------------------------|
| Bean source                            |
|----------------------------------------|
| provide('bean', module.exports)        |
|----------------------------------------|
| Bean bridge                            |
==========================================
| 'module.exports' setup                 |
|----------------------------------------|
| Bonzo source                           |
|----------------------------------------|
| provide('bonzo', module.exports)       |
|----------------------------------------|
| Bonzo bridge                           |
==========================================

To be a useful Ender library, the code should be able to adhere to the CommonJS Module pattern if a module.exports or exports object exists. Many libraries already do this so they can operate both in the browser and in a CommonJS environment such as Node. Consider Underscore.js for example, it detects the existence of exports and inserts itself onto that object if it exists, otherwise it inserts itself into the global (i.e. window) object. This is how Ender compatible libraries that can also be used as stand-alone libraries work too.

So, skipping over the complexities here, our libraries are registered within Ender and then we encounter the Bridge. Technically the bridge is just an arbitrary piece of code that Ender-compatible libraries are allowed to provide the Ender CLI tool; it could be anything. The intention, though, is to use it as a glue to bind the library into the core ender / $ object. A bridge isn’t necessary and can be omitted – in this case everything found on module.exports is automatically bound to the ender / $ object. Underscore.js doesn’t need a bridge because it conforms to the standard CommonJS pattern and its methods are utilities that logically belong on $ – for example, $.each(list, callback). If a module needs to operate on $('selector') collections then it needs a special binding for its methods. Many modules also require quite complex bindings to make them work nicely inside the Ender environment.

Bonzo has one of the most complex bridges that you’ll find in the Endersphere, so we won’t be looking into it here. If you’re interested in digging deeper, a simpler bridge with some interesting features can be found in Morpheus, an animation framework for Ender. Morpheus adds a $.tween() method and also an $('selector').animate() and some additional helper methods.

The simplest form of Ender bridge is one that lifts the module.exports methods to a new namespace. Consider Moment.js, the popular date and time library. When used in a CommonJS environment it adds all of its methods to module.exports. Without a bridge, when added to an Ender build you’d end up with $.utc(), $.unix(), $.add(), $.subtract() and other methods that don’t have very meaningful names outside of Moment.js. They are also likely to conflict with other libraries that you may want to add to your Ender build. The logical solution is to lift them up to $.moment.utc() etc., then you also get to use the exported main function as $.moment(Date|String|Number). To achieve this, Moment.js’ bridge looks like this:

$.ender({ moment: require('moment') })

The $.ender() method is the way that a bridge can add methods to the global ender / $ object, it takes an optional boolean argument to indicate whether the methods can operate on DOM element collections, i.e. $('selector').method().

Bonzo in Parts

Back to what we were originally trying to achieve: we’re loading Bonzo as a stand-alone library and we want to integrate it into an Ender build in the browser. There are two important things we need to do to achieve this: (1) load Bonzo’s bridge so it can wire Bonzo into Ender, and (2) make Ender aware of Bonzo so a require('bonzo') will do the right thing because this is how the bridge fetches Bonzo.

Let’s first do this the easy way. With an Ender build that just contains Qwery and Bean and Bonzo’s bridge in a separate file named bonzo-ender-bridge.js, we can do the following:

<!-- the order of the first two doesn't matter -->
<script src="ender.js"></script>
<script src="bonzo.js"></script>
<script>
  provide('bonzo', bonzo)
</script>
<script src="bonzo-ender-bridge.js"></script>

If you look at the diagram of the Ender file structure above you’ll see that we’re replicating it with our <script> tags but replacing provide('bonzo', module.exports) with provide('bonzo', bonzo) as Bonzo has detected that it’s not operating inside of a CommonJS environment with module.exports available. Instead, it’s attached itself to the global (window) object. Both provide() and require() are available on the global object and can be used outside of Ender (for example, to extract Bean out of an integrated build you could simply var bean = require('bean').)

We can now continue to use exactly the same script as in our fully integrated Ender build example:

$('<pre>')
  .text($('#scr').text())
  .css({
    fontWeight: 'bold',
    border: 'solid 1px red',
    margin: 10,
    padding: 10
  })
  .bind('click', function () {
    alert('Clickety clack');
  })
  .appendTo('body');

You can run this as example3, also available in my GitHub repository for this article.

Reducing <script> Tags

The main problem with the last example is that we have three <script> tags in our page with files loading (synchronously) from our server. We can trim that down to just two, and if bonzo.js is already cached in the browser then it’ll just be loading one script.

We could achieve this by hacking our ender.js file to include the needed code, or, we could create our own Ender package that contains our code so they will persist even after the Ender CLI tool has touched the file.

First we make a new directory to contain our package. We’ll include the Bonzo bridge as a separate file and also create a file for our provide() statement. Finally, a basic package.json file points to our provide() file as the source (“main”) of the package and the Bonzo bridge as our bridge (“ender”) file:

{
  "name": "fake-bonzo",
  "version": "0.0.0",
  "description": "Fake Bonzo",
  "main": "main.js",
  "ender": "bonzo-ender-bridge.js"
}

We then point the Ender CLI to this directory: ender build qwery bean ./fake-bonzo/ (or we could run ender add ./fake-bonzo/ to add it to the ender.js created in the above example).

The completed page now looks like this:

<!DOCTYPE HTML>
<html lang="en-us">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>Example 4</title>
</head>
<body>
  <script src="bonzo.js"></script>
  <script src="ender.js"></script>
  <script id="scr">
    $('<pre>')
      .text($('#scr').text())
      .css({
        fontWeight: 'bold',
        border: 'solid 1px red',
        margin: 10,
        padding: 10
      })
      .bind('click', function () {
        alert('Clickety clack');
      })
      .appendTo('body');

  </script>
</body>
</html>

You can dig further into this and run it as example4, also available in my GitHub repository for this article.

Conclusion

Hopefully this has helped demystify the way that Ender packages libraries together; it’s really not magic. If you want to dig deeper then a good place to start would be to examine the client library that appears at the top of each Ender build—it’s relatively straightforward and fairly short.

Node Roundup: 0.8.7, Buffet, HARedis, Deployd

22 Aug 2012 | By Alex Young | Comments | Tags node modules frameworks WebSocket redis libraries
You can send in your Node projects for review through our contact form or @dailyjs.

Node 0.8.7

Node 0.8.7 is out, which includes fixes for SSL, TLS, buffer and crypto issues, and also a few Windows-specific problems. I noticed someone posted about an issue with the latest npm in Windows, but other than that 0.8.7 seems solid.

Buffet

Buffet (License: MIT, npm: buffet) by Carlos Rodriguez is a “performance-oriented” static file server:

Buffet takes a fully-bufferred approach – all files are fully loaded into memory when your app boots, so you will never feel the burn of the filesystem. In practice, this is immensely efficient. So much so that putting Varnish in front of your app might even make it slower!

It supports gzip, and will update files when they’re changed. The name of the index.html and 404.html files can be changed, and other configuration options include maxAge for setting the Cache-Control header.

The author has included Mocha tests and the project is on Travis CI.

HARedis

HARedis (License: MIT, npm: haredis) also by Carlos Rodriguez is a wrapper around node_redis that helps build fault-tolerant clusters of Redis servers. The main API difference is createClient, which accepts an array of hosts and ports, and this works with colon-separated strings for 'ip:port'.

Carlos has included the test suite from the original redis module, so running make test-cluster or make test can be used to test the project.

Deployd

Deployd (GitHub: deployd / deployd, License: Apache 2.0, npm: deployd) by Ritchie Martori and the Deployd team is a toolkit for building real-time APIs suited to web and mobile applications.

Deployd applications are created with a command-line tool called dpd. A newly created app includes a web IDE for managing the applications resources – this is basically a schema that Deployd will use to generate a suitable RESTful API. There’s a Deployd Hello World tutorial that covers the basics, and a Deployd screencast.

The project is built on technologies like Socket.IO and MongoDB, and includes tests written with Mocha.

jQuery Roundup: Infinity.js, lorem, oriDomi

21 Aug 2012 | By Alex Young | Comments | Tags jquery plugins
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

Infinity.js

Infinity.js

Infinity.js (GitHub: airbnb / infinity, License: BSD) from developers at Airbnb is an infinite scrolling plugin based on the iOS UITableView class. It’s implemented by using containers that move content in and out of the DOM based on throttled scroll events, to keep scrolling smooth. The current version has some caveats – ListViews can’t be nested or have a height set by CSS.

To back up the performance claims, the authors have made demo pages with Infinity.js turned on and turned off. At least in my browser, it’s clear that Infinity.js improves the performance. Also, several performance enhancements are currently planned, including changing the internal ListItem array to use a self-balancing binary tree.

lorem

lorem (License: MIT, npm: lorem) by Stanley Shyiko is a text generator that works with Node and browsers, and it includes optional jQuery plugin support:

$(selector).ipsum();

The author has included Nodeunit tests, and a build script.

oriDomi

oriDomi (GitHub: dmotz / oriDomi, License: MIT) by Dan Motzenbecker is a small script with optional jQuery support that creates an effect on images and web fonts that looks like folding paper, by using CSS 3D transforms.

$(selector).oriDomi({
  vPanels: 3
, hPanels: 10
, perspective: 200
, speed: 500
, shading: false
});

It works best when it can figure out the dimensions of the element it’s applied to, so it’s probably a good idea to ensure images used with the effect have width and height attributes.

JS101: The Language Past and Present

20 Aug 2012 | By Alex Young | Comments | Tags js101 tutorials language beginner

We’ve covered a lot of ground since the first JS101, but the truth is I’ve missed out an important question: what is JavaScript, and who controls it?

I’ve answered this question and covered a lot more in the History of JavaScript series. This post is a brief introduction, and after reading this post you should know the basics of JavaScript and its relationship to ECMAScript.

Who Made JavaScript?

JavaScript was created by Brendan Eich in 1995 for Netscape. Netscape submitted JavaScript to Ecma International, which is a standards organization based in Geneva. The standardised version is known as ECMAScript.

What is ECMAScript?

Most articles on sites like DailyJS will refer to ECMA-262, ECMAScript 3, and ECMAScript 5. We usually abbreviate these terms to ES3 and ES5.

  • ECMA-262 is the name of the specification, of which there are five editions
  • ECMAScript 3 (or ECMA-262, edition 3) was published in December 1999, and was supported by Netscape 6 and IE 5.5
  • ECMAScript 5 (or ECMA-262, edition 5) was published in December 2009 and is supported by Firefox 4+, Safari 6: ES5 compatibility table

ECMAScript 5 adds a lot of features that we’ve already started to take for granted: including new array methods like forEach, new Object methods like Object.create, property attributes, function binding, and more.

The Future

ECMAScript is still being actively developed. It’s tentatively known as ES.next (ECMA-262 Edition 6), and ES.next working drafts can be downloaded from the ECMAScript wiki.

Proposals for the language are collected on the strawman wiki, and discussed in detail by several contributors on the wiki and mailing lists. To keep up with this, I often check the wiki’s recent changes and the es-discuss mailing list.

Brendan Eich’s blog covers a lot of the major developments as well. For example, his latest post mentions ES6 and the relationship between the standards makers and the enthusiastic JavaScript developer community.

The language will change, and as new standards are made available you’ll need to know what your given platform or browser supports.

App.net Node Module, Prototype 1.7.1, Self, Qwerty Hancock, MilkChart

17 Aug 2012 | By Alex Young | Comments | Tags libraries node browser audio social prototype graphs

App.net Node Module

There’s already an App.net Node module: damienklinnert / appdotnet (License: MIT, npm: appdotnet. Created by Damien Klinnert, it uses the popular request HTTP module, and has Mocha tests. It supports authentication, users, and posts.

Creating a post is very simple:

client.createPost(config.post_data, function(err, post) {
  // Do something with `post`
});

Prototype 1.7.1

(SFX: Simple Minds - Alive And Kicking)

Prototype 1.7.1 has been released, which includes a rewrite of the DOM code, ECMAScript 5 compatibility, as well as other bug fixes.

Many of you have wondered whether Prototype is “dead,” and I can say that it definitely isn’t. But because of the way I work on Prototype - months of inaction followed by a flurry of commits and bug fixes - it’s fair to say that Prototype hibernates for long periods of time.

Self

Self (License: MIT, npm: self) by Ryan Munro is a class library based on Python. It supports inheritance, mixins, static properties, and can work with plain old prototype classes and Backbone.

Self is class-based sugar that’s perfect for continuation-passing style. No more var that = this;! The implicit this variable is changed to an explicit self variable that your inner functions inherit. Self plays nicely with existing prototypal, and Backbone OOP.

Self can be used with browsers and in Node programs, and includes tests for both environments.

Qwerty Hancock

Query Hancock

Qwerty Hancock (GitHub: stuartmemo / qwerty-hancock, License: MIT) by Stuart Memo is a “vector qwerty keyboard”. The project’s site demonstrates the keyboard by hooking it up to some Audio API code, so it’s actually a reusable keyboard widget that could be used to build other music-related projects.

MilkChart

MilkChart (License: MIT) by Brett Dixon is a graph library for MooTools. It generates graphs that look like Excel. It’s designed to transform HTML tables into charts, so it’s easy to integrate it with existing markup that requires graphs.

Backbone.js: Internals Summary

16 Aug 2012 | By Alex Young | Comments | Tags mvc tutorials backbone.js code-review

Over the last month we’ve looked at Backbone’s internals in detail. This post summarises these findings.

To recap, here’s a list of all the parts in Backbone.js: Hacker’s Guide:

  • Part 1: Setup, Events, Models
  • Part 2: Constructor, Inheritance, Collections, Chainable API
  • Part 3: Router, History, Views
  • Part 4: Inheritance, Sync

Leverage Events

Backbone’s classes are designed to be inherited from. Every single one of these classes inherits from Backbone.Events:

  • Backbone.Model
  • Backbone.Collection
  • Backbone.Router
  • Backbone.History
  • Backbone.View

That means when designing applications built with Backbone, events are a key architectural component. Events are the standard way to deal with user interface actions, through the declarative event bindings on views, and also model and collection changes. However, you can easily add your own custom events.

When learning Backbone it’s important to get a feel for the built-in event names. Incorrectly binding a collection reset event, for example, could cause your application to render more often than it should. Mastering events is one of the quickest ways to become more productive with Backbone.

Underscore.js

Since Backbone depends on Underscore, it’s worth keeping this in mind when dealing with any kind of arrays or collections of data. Also, familiarity with Underscore’s methods will help work with Backbone.Collection effectively.

Views

It’s easy to slip into using $, but avoid this where possible. Backbone caches a view’s element, so use this.$el instead. Design views based on the single responsibility principle.

It might be tempting to let “container” view render HTML directly by using $().html, but resisting the temptation and creating a hierarchy of views will make it much easier to debug your code and write automated tests.

Interestingly, Backbone doesn’t have a lot of code dedicated to templates, but it can work with the template method. I use this with RequireJS text file dependencies to load remote templates during development, then I use the RequireJS build script to generate something suitable for deployment. This makes code easy to test and fast to load.

API Style

Backbone’s API is thankfully very consistent. Even the history API accepts a silent option, which is used throughout the library to stop events from firing when they’re not required.

Backbone’s collections have Underscore’s chainable API, which can be handy, but care must be taken to use this correctly.

Testing Backbone

So far I’ve been reviewing Backbone’s code to demystify the framework as a whole. However, it’s worth noting that other technologies work very well with Backbone and Underscore. RequireJS and AMD modules can be a great way to break up projects.

However, one area that Backbone doesn’t address is testing. This is unfortunate, because testing Backbone projects definitely isn’t obvious. In Unit Testing Backbone.js Apps With QUnit And SinonJS, Addy Osmani describes one method in detail.

I have the following rules for testing Backbone projects:

  1. The full application should be running during testing
  2. Tests shouldn’t depend on any markup in the test harness HTML file (or as little as possible)
  3. Tests shouldn’t touch the network for data

The second rule in particular is aided by using templates loaded by RequireJS and avoiding those pesky calls to $() in views.

Node Roundup: Surviving npm Downtime, Waf Wall of Shame, stream-chat, Vein

15 Aug 2012 | By Alex Young | Comments | Tags node modules RPC WebSocket npm templating
You can send in your Node projects for review through our contact form or @dailyjs.

Surviving npm Downtime

On Sunday morning (UTC) part of npm’s service stopped functioning correctly, which meant the command-line tool failed to download packages. In response to this, Dominique Sandoz stepped up and created a mirror. Mirrors can be used by changing the location of the npm registry:

npm set registry http://npm.example.com
npm set registry https://registry.npmjs.org

Fortunately npm is now working correctly, but to help prepare for future downtime I recommend bookmarking this gist that Dominique wrote containing a list of npm mirrors and proxies.

During the downtime, several other users also offered their own solutions, mostly collaborating on Twitter and IRC. For example, Maciej Małecki created a proxy-based solution.

To my knowledge there has been no official statement on the service outage, and additionally there is no official Node/npm service status page. Hopefully someone will write up details about the outage on blog.nodejs.org, and outline the preventative measures taken to ensure future stability.

Node-waf Wall of Shame

Isaac Schlueter posted a Tweet referencing what he calls the “Node-waf wall of shame”:

Node-waf wall of shame: http://j.mp/node-waf-users Upgrade your packages to node-gyp. http://npm.im/node-gyp #deathtowaf

As I mentioned in the Windows and Node series, it’s time to move addons over to node-gyp.

stream-chat

stream-chat (License: MIT) by Raynos is a chat app based around streams. It uses the boot and multi-channel-mdm modules by the same author to route streams between browsers and Node servers.

An added bonus is the author has designed the chat app to be scalable by using seaport and mountie by James Halliday. Seaport helps manage clusters of servers, while mountie allows applications to be composed of smaller servers behind mount points. Routing is handled by bouncy. These modules help design larger systems according to the concept of separation of concerns, which suits Node web applications.

MinnaHTML.js

MinnaHTML.js (License: GPL v3, npm: minnahtml) by Robee Shepherd is an async-friendly HTML object library that can be used to build HTML:

var mh = require('minnahtml').mh
  , html = new mh.Html()
  , head = new mh.Head(html)
  ;

 new mh.Title(head).data.content = 'Example';
 
 console.log(html.generateHtml());

// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
// <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
//  <head>
//   <title>
//    Example
//   </title>
//  </head>
// </html>

The author has provided a walkthrough that covers more features in the project’s readme file.

Vein

Vein (License: MIT, npm: vein) is a WebSocket RPC module. It includes both client and server code, and a minimised build for browsers. RPC methods can be added using vein.add, and then called from clients:

// Server
vein.add('multiply', function(res, numOne, numTwo) {
  res.reply(numOne * numTwo);
});

// Browser
var vein = Vein.createClient();
vein.on('ready', function(services) {
  vein.multiply(2, 5, function(num) {
    // num === 10
  });
});

jQuery Roundup: jQuery 1.8, BBSearch, MDMagick, Document-Bootstrap, DownloadBuilder.js

14 Aug 2012 | By Alex Young | Comments | Tags jquery plugins backbone.js sessionStorage files
Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

jQuery 1.8

jQuery 1.8 has been released. jQuery 1.8 makes some fairly significant changes:

  • The selector engine has been rewritten
  • Animations have been reworked
  • .css and .animate will automatically add vendor prefixes
  • The size has been reduced compared to jQuery 1.7.2
  • Grunt build system

BBSearch

BBSearch (GitHub: fguillen / BBSearch, License: CC BY 3.0) by Fernando Guillen is a find-as-you-type style plugin that’s designed to work with Backbone.js. It can also work with JSONP APIs, and the author has included demos that use GitHub and Twitter.

$('#search-input-1').bbsearch({
  url: 'https://api.github.com/legacy/repos/search/#bbsearch-query#?callback=?&'
, itemTemplate: '<p>[@<%= owner %>] <a href="<%= url %>"><%= name %></a></p>'
, resultsElement: $('#results-1')
, parse: function(response) { return response.data.repositories; }
});

MDMagick

MDMagick

MDMagick (GitHub: fguillen / MDMagick, License: CC BY 3.0) also by Fernando Guillen is a Markdown interface for jQuery. It uses Showdown, which is a Markdown parser for JavaScript, and a-tools for handling text selections.

Document-Bootstrap and DownloadBuilder.js

Document-Bootstrap (GitHub: gfranko / Document-Bootstrap, License: MIT) by Greg Franko is a boilerplate for creating responsive Bootstrap projects. It also includes DownloadBuilder.js (GitHub: gfranko / DownloadBuilder.js, License: MIT), a project by the same author that uses the HTML5 File API to create optimised client-side scripts.

DownloadBuilder.js supports concatenating local files and files hosted on GitHub. It can also cache Ajax/JSONP requests by using sessionStorage.

DailyJS is Looking for Writers

13 Aug 2012 | By Alex Young | Comments | Tags community news

Over the last three years I’ve written over 700 articles for DailyJS. I’ve written through national holidays, trips to Europe and Asia, and I’ve enjoyed every minute of it! The time has come, however, to look for more writers. In September I’m going to become a father, and naturally family obligations will take priority for a few weeks.

Rather than leave readers without their daily dose of JavaScript news and tutorials, I’m looking for writers to contribute to the site. If you’re an open source developer and would like to promote your latest Node module or client-side library by writing a tutorial: this is your chance! I’m also interested in hearing from developers of commercial services that are relevant to JavaScript developers.

Before writing anything, fill out this form to get in touch. I’ll let you know if your suggestion is appropriate for the site.

Writing Guide

  • Articles do not need to be long – three to five paragraphs is great, otherwise consider writing a series of articles
  • Markdown is fine, although we use weird tags for code samples – here is an example post
  • British or American English is acceptable
  • DailyJS reserves the right to edit your article before publishing it

Payment

Articles will be paid for at a base rate of $25. Payment terms are negotiable, and may be subject to exchange rate conversion.

Submit your article idea here.

HubSearch, canvas-charts, Motown

10 Aug 2012 | By Alex Young | Comments | Tags libraries browser ui windows apps metro

HubSearch

HubSearch

HubSearch (GitHub: jgallen23 / hubsearch) by Greg Allen is a GitHub search interface built with Bootstrap, Underscore, and his own Fidel library for Backbone-style controllers.

I spend a lot of time searching GitHub to find projects to write about, so it’s good to see a tool that tries to improve on GitHub’s inadequate search interface.

canvas-charts

canvas-charts (License: MIT) by Praneet Loke is a graph library that only relies on the HTML5 Canvas API. The library includes a method to check if the Canvas element is supported, and it accepts an object containing options:

var chartingCanvas = new CanvasCharts();
if (chartingCanvas.isCanvasSupported()) {
  chartingCanvas.configure{
    gradientColor1: '#cd9603'
  , gradientColor2: '#f1de3f' // etc.
  });

  chartingCanvas.createCanvas($('graph'), width, height);
  // Given suitable arrays of labels for the x and y axes
  chartingCanvas.drawChart(xaxis, 90, yaxis, 35, [10, 20, 30 20, 10]);
}

Motown

Motown (GitHub: mtilchen / motown, License: LGPL v3) by Matthew P. Tilchen is a library for creating Metro-style Windows 8 applications using HTML, CSS, and JavaScript. Matthew sent this in before Microsoft decided to change the Metro name, but at this point everyone interested in this project should understand the name’s origin.

The WinJS libraries and bindings to WinRT provide a solid foundation for building applications but I feel that a significant gap remains. Microsoft […] intentionally left […] this for the development community to fill. I created the Motown JavaScript library […] to fill the gap.

This library is based on Microsoft’s JavaScript Windows API, and is built according to Microsoft’s recommendations:

Microsoft recommends that developers use a “single-page” style of navigation instead of a “multi-page” style in their applications.

Motown also supports navigation transition animations, application life cycle methods, and a declarative approach to binding HTML views to JavaScript. The project includes a Visual Studio 2012 plugin for creating new Motown apps.