Backbone.React.Component, backbone-dom-view

17 Feb 2014 | By Alex Young | Comments | Tags backbone dom views react

Backbone.React.Component

If you like Facebook’s React library and Backbone.js, then take a look at José Magalhães’ Backbone.React.Component (GitHub: magalhas / backbone-react-component, License: MIT, Bower: backbone-react-component). It acts as a bridge so you can bind models, collections, and components on both the client and server.

The author has made a blog example that you can run locally. The server uses Express, and keeps collections updated with data both on the server and in the browser.

backbone-dom-view

backbone-dom-view (GitHub: redexp / backbone-dom-view, License: MIT, Bower: backbone-dom-view) by Sergii Kliuchnyk is a view class for Backbone that allows selectors to be bound to helper methods using a shorthand notation that supports binding model fields, view events, and calculations.

Sergii’s example is a to-do model:

View = Backbone.DOMView.extend
  template:
    '.title':
      html: '@title'
    '.state':
      class:
        'done': '@is_done'

It has RequireJS support, tests, and documentation in the readme.

JS-Git Progress, jide.js, Val

14 Feb 2014 | By Alex Young | Comments | Tags git browser ui

JS-Git Progress

Khalid Khan sent in an email to say that Tim Caswell JS-Git project is seeing a lot of activity recently. It seems like this new branch has changed a lot compared to the old branch.

I’d file this under “Captain’s Log: Supplemental”, but let’s see what happens over the next few weeks. If you’re interested in this project, it might be a good time to start following Tim on Twitter.

jide.js

Patrick Gotthardt recently wrote two articles about jide.js. One includes jide.js benchmarks:

Since the next release of jide.js is supposed to introduce massive performance improvements, I thought it might be a good idea to see how it holds up against this benchmark. I used a modified version from vue.js which seems to include a few more nice frameworks.

There’s also a nicely presented introduction to jide.js:

jide.js is a new toolkit for creating modern web applications. It consists of a collection of useful controls and all the tools you need to create your own, application specific, components. jide.js fully embraces AMD (require.js) to allow you to pick only those parts of it that you truly need. Starting with version 1.0.0-beta3, you’ll also be able to use it with Browserify.

At its core, jide.js is built around observable values, event emitters, and data binding. It utilizes the features of modern browsers (IE9+) to create a solid cross platform experience and to leverage the features of the current JavaScript language instead of clinging to the past.

Val

Mark Steve Samson has created a Valentine card generator (GitHub: marksteve / val, License: MIT). If you’ve been desperately searching for a tweenHeart function, then you’re in luck!

Pageres: Responsive Screenshots

13 Feb 2014 | By Alex Young | Comments | Tags node apps design

Pageres

Sindre Sorhus sent in pageres (GitHub: sindresorhus / pageres, License: MIT, npm: pageres), a command-line tool for generating screenshots of websites.

You can install it with npm install --global pageres, and then run it with a URL and a size:

pageres http://dailyjs.com/2014/02/12/node-roundup/ --sizes 800x600

It’s based on webshot, which is another small module that wraps around PhantomJS. There are other modules like pageres, but what I like about it is the focus on sizes: you could script it to generate screenshots of responsive websites. The command-line options allow you to specify many dimensions at once, so it’s easy to generate results for a responsive site.

This will work well if you’ve got marketing materials that include screenshots, or if your designers want to see useful outputs from a CI server.

Another cool feature is the Node API:

var pageres = require('pageres');

pageres(['todomvc.com'], ['1366x768', '1600x900'], function () {
  console.log('done');
});

I’ve made a few lightweight wrappers around PhantomJS before – there’s a HTML to PDF invoice generator in production that I made last year that’s been ticking over nicely. However, I like the focus on dimensions in pageres, and the command-line interface is very friendly.

Node Roundup: Multiple Node Instances, to-locals, pipes-and-filters

12 Feb 2014 | By Alex Young | Comments | Tags node modules apps

Running Multiple Instances in a Single Process

StrongLoop has a useful blog with lots of posts about Node. Yesterday Ben Noordhuis posted Running Multiple Instances in a Single Process:

Imagine a node-webkit application where each window runs its own Node instance that is isolated from all other windows. Or Node embedded in a phone or network switch where it is performing routing logic for multiple connections, but in a single process.

It’s a pretty tall order because Node started out as – and still is – a single-threaded application, built around the concept of a single event loop, with hundreds of global variables that store various bits of state.

The post goes on to show how add-on authors can use contexts, with NODE_MODULE_CONTEXT_AWARE.

to-locals

eyy sent in to-locals (GitHub: eyy / to-locals, License: MIT, npm: to-locals), a module that transforms callback functions into Connect middleware that automatically sets res.local for use in views. This example shows how easy it is to expose Mongoose models:

var users = toLocals(mongoose.model('users'), 'find', 'users');
app.get('users', users, function(req, res, next) {
  // res.locals now has the loaded users
});

It’s a small project, but even so Mocha tests have been included, and the documentation highlights the main features.

Pipes and Filters

Pipes and Filters (GitHub: slashdotdash / node-pipes-and-filters, License: MIT, npm: pipes-and-filters) by Ben Smith is a module for composing sets of asynchronous operations:

Pipeline.create('order processing')
  .use(decrypt)
  .use(authenticate)
  .use(deDuplicate)
  .breakIf(function(input) { return input.exists; })
  .execute(message, function completed(err, result) {
    // error or success handler
  });

Ben wrote a blog post that introduces the module with detailed examples: Pipes and Filters to cure Node.js async woes.

How can we perform complex processing on an input data structure, while maintaining independence and flexibility?

The Pipes and Filters pattern provides one possible solution. Described in the Enterprise Integration Patterns book as a method to “divide a larger processing task into a sequence of smaller, independent processing steps (Filters) that are connected by channels (Pipes).”

jQuery UI 1.10.4, jqModal, floatThead

11 Feb 2014 | By Alex Young | Comments | Tags jquery plugins ui

jQuery UI 1.10.4

jQuery UI 1.10.4 is out:

The fourth maintenance release for jQuery UI 1.10 is out. This update brings bug fixes for Widget Factory, Position, Droppable, Resizable, Accordion, Autocomplete, Button, Datepicker, Dialog, Menu, Slider, Spinner, Tabs, and the CSS Framework. For the full list of changes, see the changelog.

jQuery UI 1.10.3 was released last May, so it’s been quite a while since the last release!

jqModal

jqModal (GitHub: briceburg / jqModal, License: MIT, GPL) by Brice Burgess is a plugin for showing modals, popups, and notices. To use it, you just need a suitable container element with dialog content and then to call $('#dialog').jqm();.

It can load content using Ajax, and allows dialogs to be nested. External content can also be loaded using iframes.

jquery.floatThead

jquery.floatThead (GitHub: mkoryak / floatThead, License: CC BY-SA 4.0) by Misha Koryak is a plugin for floating table headers. Headers can be floated inside elements with overflow scrolling, and also for the entire window.

Overflow scrolling requires that the “scroll container” is specified:

var $table = $('table.demo');
$table.floatThead({
  scrollContainer: function($table){
  return $table.closest('.wrapper');
}});

Kettle.js, Backbone.SuperModel, Mem.js

10 Feb 2014 | By Alex Young | Comments | Tags mvvm mvc backbone

Kettle.js

Kettle.js (GitHub: smelnikov / kettle, License: MIT) by Sergey Melnikov is an alternative approach to Backbone views that uses a declarative syntax to define elements, their bindings, and their associated events.

It supports two-way data binding, sub views, and can be extended to support custom Kettle elements.

Mem.js

Mem.js (GitHub: artyomtrityak / mem.js, License: MIT) by Artyom Trityak is a memory management library for Backbone. It allows you to save, retrieve, and destroy instances of Backbone classes:

var View = Backbone.View({});

// On set returns new stored function instance or object
var headerViewIns = Mem.set('headerView', View, { el: 'body' });

It can remove and recreate instances with Mem.reset, and remove outdated objects with Mem.manage.

Backbone.SuperModel

Backbone.SuperModel (GitHub: laoshanlung/backbone.supermodel, License: MIT, npm: backbone.supermodel) by Tan Nguyen is model class that offers support for nested collections. It supports dot notation for getters and setters, and an updated toJSON that reflects the nested structure. Relationships can be defined between models as well.

var wallet = {
  money: {
    amount: 4000,
    currency: 'euro'
  },
  name: 'Tan Nguyen'
};

var myStuff = new Backbone.Model();
myStuff.set('wallet', wallet);
myStuff.get('wallet').money.amount; // 4000

The project includes tests and benchmarks, and examples can be found in the readme.

HTML5 Game Per Week, Oboe.js

07 Feb 2014 | By Alex Young | Comments | Tags node modules games json

One HTML5 Game Per Week

Princess Quest

Thomas Palef sent in his project to create one HTML5 game a week. He’s created seven games so far, including Princess Quest, a vertical jumping game that uses Phaser.

He’s also posting short blog posts about how he makes the games.

Oboe.js

Oboe.js (GitHub: jimhigson / oboe.js, License: BSD, Bower: oboe, npm: oboe) is a library for handling JSON HTTP responses before the request has finished:

It glues a transport that sits somewhere between streaming and downloading to a JSON parser that sits somewhere between SAX and DOM. It is small enough to be a micro-library, doesn’t have any external dependencies and doesn’t care which other libraries you need it to speak to.

The website has a video and more documentation that explains how it works.

Nordic.js, Octocard

06 Feb 2014 | By Alex Young | Comments | Tags conferences events node modules

Nordic.js

Nordic.js

Nordic.js is a two day conference that takes place in Stockholm in September. They’re accepting proposals for talks, so you might want to bookmark that link if you’re interested in speaking.

Tickets aren’t yet available, but apparently a related meetup in Stockholm is extremely popular, so it’ll sell out quickly.

Octocard

Octocard (GitHub: zmmbreeze / octocard, License: MIT) is a GitHub widget, with a nice, compact design and a cool graph.

It’s used by including a <script> element with data attributes, and you can theme it fairly easily.

There’s also a Node project called octocard-server that can serve data from MongoDB. It uses GitHub authentication, and the octonode GitHub API wrapper.

Node Roundup: bitcoinaddress.js, atry, Node Web Modules

05 Feb 2014 | By Alex Young | Comments | Tags node modules apps bitcoin

bitcoinaddress.js

If you need to take Bitcoin payments on your site, then bitcoinaddress.js (GitHub: miohtama / bitcoinaddress.js, License: MIT, npm: bitcoinaddress) by Mikko Ohtamaa might help. It’s a module for handling Bitcoin payments. It can be run as a client-side script, or as a Node module. It allows Bitcoins to be sent, or specific currency amounts based on “fiat” amounts.

It’s based around bitcoin: URIs, and allows you to display “Pay from wallet” links on your pages. It also displays QR codes so people can easily make payments using mobile Bitcoin apps.

atry

atry (GitHub: CodeCharmLtd / atry, License: MIT, npm: atry) from Code Charm (Damian Kaczmarek) is an alternative to Node’s domain module. The basic idea is to allow exceptions to be caught using an asynchronous API:

atry(function() {
  setTimeout(function() {
    throw new Error('I am Error');
  }, 10);
}).catch(function(err) {
  console.log('Error:', err);
});

It has an intercept method that returns an “exception safe” callback that you can pass as a callback to asynchronous APIs like fs.readFile.

Node Web Modules

Node Web Modules (GitHub: caio-ribeiro-pereira / node-web-modules, License: MIT) by Caio Ribeiro Pereira is a Node web application that shows a list of popular web frameworks for Node. If you select one of the modules it shows a screenshot and some statistics.

The project is powered by Express and Redis, and it uses the GitHub API. The module list it displays on http://nodewebmodules.com/ is useful for beginners, but you might also like to take a look at the source to see how it works.

Spectra, GizmoJS, EdisonJS

04 Feb 2014 | By Alex Young | Comments | Tags jquery design

Spectra

Spectra (GitHub: aakpat6 / spectra, License: MIT, npm: spectra) by Aakash Patel is a library for working with colours. It’s a function that accepts various colour formats: RGB, HSL, hex, and CSS colour names.

It can also convert formats, so calling colour.hex() will return a hex value. Colours can even be compared with the .equals method. There are additional methods for processing colours, including harmony, which can generate harmonies for analogous, triad, complementary, square, and rectangle colours.

The Spectra API documentation has examples for each method, and the author has included unit tests.

EdisonJS

EdisonJS (GitHub: tkambler / edison.js, License: MIT) by Tim Ambler is a router for single page applications based on hierarchical relationships. The idea is to define sections and routes. Sections contain routes, and routes map to URLs. That means visiting a URL will cause a section’s callback to fire.

The API is based around instances of sections that you define with edison.createSection. There’s also a edison.extendCleanup method that fires when people navigate away from routes.

GizmoJS

Tim Ambler also sent in GizmoJS (GitHub: tkambler / gizmo, License: MIT, Bower: gizmo). GizmoJS is a component library, similar to jQuery UI’s widget factory. It doesn’t depend on jQuery, but does need RequireJS, because the components are based on AMD. It has an event API and inheritance helper.

Vue.js, beautify-with-words

03 Feb 2014 | By Alex Young | Comments | Tags node modules mvvm mvc

Vue.js

Vue.js

Vue.js (GitHub: yyx990803 / vue, License: MIT) by Evan You is a MVVM library. It’s based around instances of the Vue constructor, essentially view model objects, that provide bindings between DOM objects and data models.

It has an event-based API with key/value observing, HTML directives (like AngularJS), and text filters. There’s a TodoMVC example that showcases some of the features. Most of the code is passed in as options to the Vue constructor, so it feels a little bit like Backbone.js views in that respect.

Vue.js is an interesting combination of features from Backbone.js, KnockoutJS, and AngularJS. Evan seems confident about its performance and features, but I think it’ll be hard to convince people to seriously try it out given how popular Backbone and AngularJS have become.

beautify-with-words

beautify-with-words (GitHub: zertosh / beautify-with-words, License: MIT, npm: beautify-with-words) by Andres Suarez is a module based on UglifyJS that replaces variable names with words.

You can pass -b to beautify the output, which essentially means you can turn minified, obfuscated code into something not quite readable, but much easier to search and grep for patterns.

Conference: mloc.js, Bootstrap 3.1

31 Jan 2014 | By Alex Young | Comments | Tags conferences events bootstrap

Conference: mloc.js

mloc.js

mloc.js is a conference in Budapest, taking place on February 13th. Tickets start at $260, but there are only 24 left!

With projects like asm.js and Emscripten, Mozilla is beginning to see JavaScript as a virtual machine and compiler target. Will it change how we think about and how we use JavaScript? How compiling C++ code to really fast JavaScript code will transform the web? At mloc.js we are bringing together representatives of major browser vendors, industrial users with large web projects, and authors of compile-to-JS projects with the goal of moving the web forward. Together we will discuss what will be possible with the web platform in the next 10 years.

There are some great speakers from PayPal, Google, Mozilla, Intel, and more.

Bootstrap 3.1

It looks like Bootstrap 3.1 is out. There’s an inconsequential and pointless discussion about it on Hacker News, so it’s probably best to ignore that and read the changelog for yourself.

One of the nice things about this release is it includes some new templates: Blog, Cover, and Dashboard. Even though I like to code these by hand, it’s great for people who want to get started quickly. The blog template doesn’t use the article element, but they do target IE 8 so that might be why.

The Art of Error

30 Jan 2014 | By Alex Young | Comments | Tags node errors
Error was originally a character in the hit video game, "Zelda".

I like to define a lot of objects that inherit from Error. I find it helps me to track down issues – post-mortem – but also to clearly handle expected errors. Sometimes writing error handling code feels like a chore, but it shouldn’t be an afterthought. Well-designed and well-tested errors will help you maintain projects, but also help users figure out what to do when things go wrong.

When it comes to using Error, I’ve found two bad practices that should be avoided:

  1. new Error is used instead of a subclass.
  2. Error is avoided altogether because “exceptions are bad”.

Let’s look at how to avoid these issues and use errors properly.

Subclassing Error

Subclassing errors is easy with Object.create or util.inherits (in Node). Here’s how you do it in Node:

var assert = require('assert');
var util = require('util');

function NotFound(message) {
  Error.call(this);
  this.message = message;
}

util.inherits(NotFound, Error);

var error = new NotFound('/bitcoin-wallet not found');

assert(error.message);
assert(error instanceof NotFound);
assert(error instanceof Error);
assert.equal(error instanceof RangeError, false);

The assertions check that the expected property was set (message), and error is an instance of NotFound, Error, but not RangeError.

If you were using this with Express, you could set other properties to make the error more useful. This is great when passing errors to next() in routes. When dealing with errors at the HTTP layer, I like to include a status code:

function NotFound(message) {
  Error.call(this);
  this.message = message;
  this.statusCode = 404;
}

Now you could have error handling middleware that handles errors in a more DRY fashion:

app.use(function(err, req, res, next) {
  console.error(err.stack);

  if (!err.statusCode || err.statusCode === 500) {
    emails.error({ err: err, req: req });
  }

  res.send(err.statusCode || 500, err.message);
});

This will send the HTTP status code to the browser, if available. It also only emails errors when the statusCode is 500 or not set. I took this from production code that generates emails when unusual things happen, and I don’t want to get notified about general errors like 401, 403, and 404.

The line that reads console.error(err.stack) won’t actually work as expected. In V8 platforms like Node and Chrome you can use Error.captureStackTrace(this, arguments.callee) in the error’s constructor to get the stack trace.

function NotFound(message) {
  Error.call(this);
  Error.captureStackTrace(this, arguments.callee);
  this.message = message;
  this.statusCode = 404;
}

When I was researching this article I noticed there’s a lot of confusion about inheriting from Error and capturing the stack. It’s hard to do it properly in every browser. If you want to read more, there’s a good Stack Overflow post about it here: What’s a good way to extend Error in JavaScript?.

Throwing and Catching Errors

You might have noticed I’ve been quiet about throw, and that’s because we hardly ever use it anymore. It’s more common to see errors passed as the first argument to a callback, or emitted as an 'error' event’s first argument.

If you’re using an API like this, you’ll probably use something like if (err) return handleError(err) at the top of your callback. You can also use if (err instanceof SpecificError) to add your own context specific error handling code.

Node developers usually avoid raising exceptions, but if you really think it’s necessary you can use throw new Error('I am Error') and then assert.throws in your tests. I find I hardly ever need to use throw.

Designing Error Objects

Once you start subclassing Error and adding your own properties, you can cause new problems by breaking the SOLID principles. To keep your errors clean, ensure an error class only has one responsibility – don’t make Swiss Army knife error objects, or trigger complex behaviours inside their constructors.

You should also create errors in logical places. If you’ve written a database layer, don’t raise the previous NotFound error from something that loads data from the database. In this case it would be better to have a Database.NotFound error object, or maybe just return undefined and then raise NotFound at the view layer.

Following the Liskov substitution principle also helps create maintainable error handling code. If you replace the previous NotFound error with a new class that has more context-specific information, then the existing code should still work. You’d break this rule if you somehow changed what notFound.statusCode did.

Conclusion

I create a lot of Error classes in my projects, but I rarely use throw and catch. You should set useful properties in error objects, but use such properties consistently. And, don’t cross the streams: HTTP errors have no place in your database code. Or for browser developers, Ajax errors have a place in code that talks to the server, but not code that processes Mustache templates.

Node Roundup: Node 0.11.11, Nightwatch.js, Hackify

29 Jan 2014 | By Alex Young | Comments | Tags node modules

Node 0.11.11

Node 0.11.11 was released today, and it’s quite a big update so I think they’re catching up after the holiday slowdown. The main binary dependencies have been updated (v8, HTTP parser, openssl, uv). There’s a huge amount of fixes for the core modules, including crypto, http, tls, and util.

Nightwatch.js

Nightwatch.js

Nightwatch.js (GitHub: beatfactor / nightwatch, License: MIT, npm: nightwatch) is a test framework that uses Selenium WebDriver. Tests are written as modules, so the exported functions are run as test cases. The first parameter is a client object, that has a chainable API for scripting access to webpages.

It includes JUnit XML support, so you can use it with a CI server like TeamCity. Both CSS selectors and XPath can be used.

If you’ve never used Selenium before, then take a look at the Nightwatch guide. It explains how it manages the Selenium server and browser instances.

Hackify

Hackify (GitHub: hackify, License: MIT, npm: hackify), by Michael Dausmann, is a collaborative code editor that features a permission system, and chat. It feels like Google Drive for programming.

The server uses Express, Socket.IO, and Redis. It’s written like a fairly typical Express application, with route separation and ejs templates.

jQuery 1.11 and 2.1, Backbone.global

28 Jan 2014 | By Alex Young | Comments | Tags jquery backbone

jQuery 1.11 and 2.1 Released

jQuery 1.11 and 2.1 have been released:

both the 1.x and 2.x branches of jQuery support all recent modern browsers and have the same API. The 1.x branch, this time 1.11.0, adds support for the older versions of Internet Explorer (IE6, 7, and 8). The 2.x branch, today played by 2.1.0, adds support for non-traditional web environments like node.js and browser plugins for Chrome and Firefox.

Another interesting point from the release notes was this paragraph about source map problems:

This release does not contain the sourcemap comment in the minified file. Sourcemaps have proven to be a very problematic and puzzling thing to developers, spawning hundreds of confused developers on forums like StackOverflow and causing some to think jQuery itself was broken.

I’ve noticed source maps confuse CoffeeScript developers as well, so this isn’t surprising. The tools seem solid – Chrome’s implementation has worked for me in the past, but the concept itself isn’t entirely intuitive.

The Node/browserify support is handy – that particular change was ticket 14677.

Backbone.global

Backbone.global (GitHub: DarrylD / Backbone.global, License: MIT) allows you to listen to global events in a Backbone.js application. It changes Backbone.View.prototype.delegateEvents to emit events on a global event bus, which makes it easier to hook into events for things like testing or logging.

v8js, Angular Foundation

27 Jan 2014 | By Alex Young | Comments | Tags php angular ui

v8js

On Friday I wrote about Uniter, which converts PHP to JavaScript. But what about running JavaScript in PHP? C. Scott Ananian sent in v8js (GitHub: preillyme / v8js, License: MIT), a PHP extension that lets you run JavaScript inside a PHP application.

It has both PHP and JavaScript APIs, so you can do things like var_dump in JavaScript. In the PHP side, you can evaluate JavaScript with $v8->executeString().

This project actually uses V8, and you can restrict JavaScript based on time and memory usage.

Angular Foundation

Angular Foundation

Angular Foundation (GitHub: madmimi / angular-foundation, License: MIT) is a Foundation port of the AngularUI bootstrap project.

We are aiming at providing a set of AngularJS directives based on Foundation’s markup and CSS. The goal is to provide native AngularJS directives without any dependency on jQuery or Foundation’s JavaScript. It is often better to rewrite an existing JavaScript code and create a new, pure AngularJS directive. Most of the time the resulting directive is smaller as compared to the orginal JavaScript code size and better integrated into the AngularJS ecosystem.

The documentation explains what Foundation components are supported, and shows how to use them as AngularJS directives. The authors created it after they noticed people on Stack Overflow asking about AngularJS directives for Foundation, and finding the existing solutions less complete.

Uniter, Chai Webdriver, Gamedev.js Weekly

24 Jan 2014 | By Alex Young | Comments | Tags php testing games

Uniter

When we run our yearly survey, I’ve noticed PHP is popular with our readers. So here’s something that you might either love, or consider arcane blasphemy: Uniter (GitHub: asmblah / uniter, License: MIT), a JavaScript to PHP source-to-source compiler:

Uniter allows you to execute PHP in the browser or in Node.js. As an on-the-fly recompiling interpreter (or transpiler) it results in the closest possible translation from PHP to native JavaScript code.

It includes Mocha unit tests and should run in IE 9 or above. It currently supports most of PHP’s keywords, and even has basic class support. The demo is interactive, so you can try editing the PHP source to see what happens.

Chai Webdriver

Chai Webdriver (GitHub: goodeggs / chai-webdriver, License: MIT, npm: chai-webdriver) by Max Edmands is a Chai plugin for making markup-based assertions when using webdriver. For example:

// Start with a webdriver instance:
var sw = require('selenium-webdriver');
var driver = new sw.Builder()
  .withCapabilities(sw.Capabilities.chrome())
  .build()

// And then...
var chai = require('chai');
var chaiWebdriver = require('chai-webdriver');
chai.use chaiWebdriver(driver);

// And you're good to go!
driver.get('http://github.com');
chai.expect('#site-container h1.heading').dom.to.not.contain.text("I'm a kitty!");

It works with Selenium, chromedriver, PhantomJS, and SauceLabs.

Gamedev.js Weekly

Gamedev.js Weekly is a weekly newsletter of JavaScript game-related news. There’s an archive so you can preview it before signing up.

JellyReader: Dropbox/Google Drive Feed Reader

23 Jan 2014 | By Alex Young | Comments | Tags angularjs jquery apps services

Ray Wang sent in JellyReader (GitHub: NimbusBase / jellyreader, License: MIT), an entirely client-side feed reader that is powered by Google Drive and Dropbox. NimbusBase has been used to unify access to Google Drive and Dropbox, so the data is ultimately stored as flat files.

JellyReader itself is implemented with jQuery and AngularJS. It allows you to add feeds, view entries, toggle the read state, and you can also star your favourite items. I tried it out with my Dropbox account, and Dropbox states that the application only has access to an “app” folder:

Dropbox

I added DailyJS to it:

Jelly add feed

And the stories are rendered as you might expect:

Jelly feed view

After playing around with the web interface for a while, I wondered what the files on Dropbox looked like. Each data collection is serialised in a directory, and there is a file per item. So feeds have a directory, and stories do as well. UUIDs are used to ensure the filenames don’t clash.

Dropbox

Presumably NimbusBase data has the same structure on Google Drive.

The JellyReader source uses lots of third party components, including jFeed which I haven’t seen for a few years. I actually like the flat file approach for personal, self-hosted applications like this, although it would be interesting to see a comparison with a Dropbox Datastore implementation.

Node Roundup: Nodemon 1.0, Prana, termcoin, node-bitwise-xor

22 Jan 2014 | By Alex Young | Comments | Tags node modules bitcoin mongodb

Nodemon 1.0

Nodemon

I noticed Nodemon 1.0 was released this week (GitHub: remy / nodemon, License: MIT, npm: nodemon). This update includes local and global configuration files, execMap for mapping file extensions to programs, and some changes to the overall architecture of the project. You can now require Nodemon, and tests have been added.

Prana

Prana (GitHub: recidive / prana, License: MIT, npm: prana) by Henrique Recidive is a small framework for Node applications. Prana application objects are EventEmitters, and Prana “types” emit events as well.

It combines an ODM system with a plugin system, and currently persists data to memory or MongoDB. The author has included some examples which you can find in prana/examples, and one of them uses Express. The module’s code itself has detailed comments, and the readme is solid too.

termcoin

termcoin (GitHub: chjj / termcoin, License: MIT, npm: termcoin) by Christopher Jeffrey is a terminal Bitcoin client with a command-line interface based on blessed. It requires bitcoind to work, and looks really cool in the screenshots.

node-bitwise-xor

Stanislas Marion sent in node-bitwise-xor (GitHub: czzarr / node-bitwise-xor, License: MIT, npm: bitwise-xor), a module for performing a bitwise XOR on two buffers or strings. It iterates over each element with ^, taking into account the length to ensure each item is changed.

Contra, jquery.onoff, jQuery 1.11.0 RC1 and 2.1.0 RC1

21 Jan 2014 | By Alex Young | Comments | Tags jquery plugins ui flow-control async

Contra

Contra

Contra (GitHub: bevacqua / contra, License: MIT, npm: contra, Bower: contra) by Nicolas Bevacqua is a flow control library, similar to async, but more suited to client-side development.

It has three sets of methods: flow control, functional, and uncategorized. The flow control methods are for executing groups of functions, like λ.waterfall(tasks, done). The functional methods are a subset of what you might expect to find in Underscore.js – λ.each and λ.filter for example. I noticed that λ.each can handle both arrays and objects, so it’s different to forEach.

Each method can be exported separately, so you could just pull in a single method if you wanted to. It has Mocha tests, and can be installed with Bower.

jquery.onoff

jquery.onoff (GitHub: timmywil / jquery.onoff, License: MIT) by Timmy Willison is a toggle switch that uses checkboxes. It supports IE 9 and above, and can be loaded with an AMD loader.

Although it’s a relatively simple project, Timmy has included tests, and a Grunt build script.

jQuery 1.11.0 RC1 and 2.1.0 RC1

jQuery 1.11.0 RC1 and 2.1.0 RC1 have been released. These releases are maintenance releases, so there aren’t any API changes.

The announcement notes that these releases should work properly with Browserify, and can be installed using npm.