New Features in npm

06 Sep 2013 | By Robert Kowalski | Comments | Tags node npm

npm is moving fast, so here are some features you might have missed since 1.3.7.

Remove devDependencies

We’ve noticed people running into situations where ./node_modules gathers cruft. For example, installing devDependencies during deployment due to various reasons.

To clean up in npm 1.3.10 and above, just run: npm prune --production

Repository Shorthands

Use the shorthand "username/repo" for the field repository in your package.json.

People generally use a full Git URL in the repository field:

  "repository": {
    "type": "git",
    "url": "git@github.com:robertkowalski/npm-registry-mock.git"
  },

However, GitHub is the default, so you don’t need to write the full URL. This just got merged and is available in npm 1.3.10. Here’s an example:

  "repository": {
    "type": "git",
    "url": "robertkowalski/npm-registry-mock"
  },

Open Repositories Directly in a Browser

Since npm 1.3.8 the new command npm repo will open the repository website in your browser for the specified package. For example, npm repo express will open the Express GitHub page.

Conclusion

In npm 1.3.7 and up a huge amount of functionality has been added – which is why you should always keep Node up to date! I hope you learned something new about npm. You can find me on Twitter @robinson_k and GitHub at robertkowalski.

Home Automation with Node

05 Sep 2013 | By Alex Young | Comments | Tags node modules hardware
Heimcontrol to Major Tom...

I don’t post much about hardware on DailyJS, but I really should! I like tinkering with Arduino and small board computers like the Raspberry Pi – so far I’ve managed to use one as a cheap NAS, an IR control (by wiring up an IR sensor to the GPIO pins), and a 96khz/24bit audio player. Naturally I was interested when I saw the heimcontrol.js project (GitHub: ni-c / heimcontrol.js, License: MIT) by Willi Thiel.

It’s currently being debated on Hacker News, but hasn’t been updated for five months – hopefully the publicity will get people contributing to the project. It uses an Arduino board with the Pi, and provides access to the GPIO pins so you can communicate with both analogue and digital systems.

There’s a video on the project page that shows the HTML/WebSocket/MongoDB-based interface in use. The user is able to view and change a temperature control, turn a radio light switch on and off, and also operate a TV by IR through the Arduino board.

The user interface is responsive, so it looks good on a desktop or phone. If you get this running and have USB ports spare, you could always add some other stuff to it like ASIC miners!

Node Roundup: Forky, dsjslib, Node-huxley

04 Sep 2013 | By Alex Young | Comments | Tags node modules testing cluster data-structures

Forky

Forky (GitHub: brianc / node-forky, License: MIT, npm: forky) by Brian M. Carlson is a wrapper around the cluster module to make it easier to use and test.

The forky function loads workers based on the number of cores on your system. If any of the workers dies, Forky will spawn another one:

The best way to handle unexpected errors in node is to shut down your process and spawn a new one. Forky makes clean process shutdown and respawn easy as pie.

dsjslib

dsjslib (GitHub: monmohan / dsjslib, License: MIT, npm: dsjslib) by Monmohan Singh is a collection of common data structures and utility functions.

It includes:

  • Cache: An in-memory cache implementation, inspired by Google’s Guava project
  • AVL Tree: Map-like functionality backed by a balanced tree
  • BTree
  • RWayTrie: A data structure for fast retrieval of values associated with string keys
  • TernarySearchTrie: Similar to RWayTrie, based on Algorithms, 4th Edition by Robert Sedgewick and Kevin Wayne

It includes unit tests, so you can get a feel for each API and see how the classes are meant to be used.

Node-huxley

Node-huxley (GitHub: chenglou / node-huxley, License: MIT, npm: huxley) by Cheng Lou is a port of Instagram’s Huxley project. It allows sequences of events in a web application to be recorded and compared against screenshots.

Huxley was originally designed for tracking “visual regressions in web applications”:

Huxley is a test-like system for catching visual regressions in Web applications. It was built by Pete Hunt with input from Maykel Loomans at Instagram.

jQuery Roundup: Recurrence Widget, HeapBox

03 Sep 2013 | By Alex Young | Comments | Tags jquery plugins ui widgets
Note: You can send your plugins and articles in for review through our contact form.

Recurrence Widget

Dealing with recurring dates isn’t easy, but one way of adding a layer of structure to projects that must deal with them intelligently is by following standards like iCalendar. Johannes Raggam sent in jquery.recurrenceinput.js (GitHub: collective / jquery.recurrenceinput.js, License: MIT), which is a UI widget that is compatible with RFC5545.

The widget allows various repeat rules to be selected and then outputs a string that should be usable in ICS files.

HeapBox

HeapBox (GitHub: FilipBartos / heapbox, License: MIT) by Filip Bartoš is a select replacement. It has an event-based API, supports standard features like disabling the control, and has some nice flat UI themes.

Bobun, Backbone Eye, Rssi

02 Sep 2013 | By Alex Young | Comments | Tags node modules backbone templating

Bobun

Bobun (GitHub: neoziro / bobun-ui, License: MIT) by Greg Bergé is a simple UI-focused data-binding library for Backbone.js:

Bobun provides a simple way to bind a model to a view, or a view to model, a view to a view, or even a model to a model. It adds the ability to call set, get, and validate on the view. Bobun a simple way to manage and clean subviews thanks to Backbone.babysitter.

Binding a model looks like this: Bobun.Binding.bind(modelA, modelB, 'symetricAttribute'); – everything is namespaced under Bobun. There’s also Bobun.Binding.bindTo for one-way bindings, and there are also some view-specific features in Bobun.View:

Bobun.View.extend({
  events: {
    'click': 'domEventTriggerProxy'
  }
});

Backbone Eye

Backbone Eye (GitHub: dhruvaray / spa-eye, License: Simplified BSD) by Dhruva Ray is a Firebug extension for debugging Backbone applications:

Backbone Eye presents application specific models and views to introspect. Models show only application specific properties and shield away internal Backbone framework details. Search for models having certain attribute values, pin interesting models or use most-used models list to dig deeper.

The project’s homepage has screenshots with examples of how it handles models, collections, and views. It has some interesting features for visualising data flows. For example, interaction trails shows a sequence of interactions which have occurred on the selected model as a result of standard Backbone write operations.

Rssi

Rssi (GitHub: mvasilkov / rssi, License: MIT, Bower: rssi) by Mark Vasilkov is a string interpolation library inspired by Ruby’s syntax.

There are many template engines in JS, many unbelievably slow, while others (like doT) are quite fast but use unsafe evaluation: try . Rssi is 10x faster than Mustache, and 25-30x faster than Underscode and Lo-Dash templates (Rssi does about 1,300,000 ops/sec on my old Mac Mini, with Mustache scoring 130,000 and Lo-Dash about 45,000). Rssi is also marginally slower than doT, the upside being: it’s perfectly safe to use, won’t access global variables, call functions etc. (in fact, you can use rssi in an untrusted environment, e.g. let users customize their profile page).

If you’re looking for something secure without the more abstract features of larger templating libraries, then Rssi might be a good choice. It has unit tests and can be installed from npm or Bower.

ChocolateChip-UI, Bootstrap Grid Builder, Bootstrap 3 Performance

30 Aug 2013 | By Alex Young | Comments | Tags libraries bootstrap performance benchmarks ui mobile

ChocolateChip-UI

ChocolateChip-UI

ChocolateChip-UI (GitHub: sourcebitsllc / chocolatechip-ui, License: BSD) from Sourcebits is a new UI framework for mobile web applications that is designed to look like iOS 7, Jelly Bean, and Windows Phone 8.

ChocolateChipUI uses specific HTML5 tags for structural markup. The article element is the “basic building block of ChocolateChip-UI”:

Every article should have a unique id so that it can be identified by the navigation system. These must be valid HTML ids. At load time, ChocolateChip-UI checks to see if you have manually set the navigation state of your articles. If not, it will set the first article as current and the others as next. This will mean that initially you app may momentarily load in a state of disarray before it is arranged properly. As such, we strongly recommend that you always put a state on each article so that it loads correctly.

It uses its own JavaScript framework instead of a more established library, and is based around event-based widgets. It has some low-level features like touchscreen gesture recognition, but also includes higher-level widgets like UISegmented, UIPopup, and so on.

The authors have written a guide on how to transition from jQuery:

ChocolateChipJS is very similar to jQuery. But it’s also much smaller. Uncompressed it’s just 60kb and compressed, 26kb. In contrast, jQuery is 2.0.3 uncompressed is 242kb and compressed, 84kb. ChocolateChip was designed for modern mobile browsers. It has no legacy code for browser not on current mobile devices.

Bootstrap Grid Builder

Jay Kanakiya’s Bootstrap Grid Builder (GitHub: kanakiyajay / bootstrap-grid-builder, License: Apache 2.0) is a tool for exploring and generating column/row grids based on Bootstrap 3’s new markup.

It allows you to switch between different devices so you can see what a given layout will look like on a phone, tablet, or desktop.

Bootstrap 3 Performance

Parashuram Narasimhan sent in Bootstrap Performance using telemetry and an article about it: Bootstrap - Evolution over two years:

The performance drop seems to stop at 2.3.2 release and looks like the latest 3.0.0 release was aimed at making things faster. A lot of components in 3.0.0 are way better than their 2.3.2 counterparts.

There are significant performance changes between the RC and the final versions of 3.0.0. This could be due to incorrect CSS files I generated, or was there something different in the final release?

The telemetry page allows you to view performance metrics for each Bootstrap component for each point release.

Dropping Legacy IE Is No Panacea

29 Aug 2013 | By Alex Young | Comments | Tags browser ie dojo chrome

The presiding sentiment of client-side developers seems to be that dropping legacy IE support fixes cross-browser issues. While it does reduce a lot of rendering quirks, it doesn’t mean you can stop browser testing altogether.

The reality is that there are four popular browsers with a wide range of versions. Using DailyJS’s readership during August as an example, Chrome’s versions break down like this: Chrome 28 has 53%, and Chrome 29 is at 13%. Firefox has 43% on version 22 and 41% on version 23. That means we see very few Firefox and Chrome readers on older versions, so they’re doing an excellent job of keeping users up to date. Digging into the IE stats, I can see 50% using IE 10, and 0.33% on IE 6!

Why am I bothering you with browser stats? It was because I saw this bug in Dojo earlier today: #17400: Chrome 29 breaks dojo.query in Dojo 1.4.4 through Dojo 1.6. The Dojo developers quickly fixed the bug. It seems someone had used array-style accessors on a DOM node instead of the children and childNodes properties.

Even though IE 10 is far better than its predecessors, and Chrome and Firefox see fast upgrade rates due to their update mechanisms, you can’t leave out proper cross-browser testing. It’s hard work and dull, but unfortunately still important. I have a feeling the disparity in mobile browser technology will be the new IE 6, but that’s another story…

Node Roundup: 0.10.17, Defining Global Scripts in npm, loadtest

28 Aug 2013 | By Alex Young | Comments | Tags node modules http benchmarking npm

Node 0.10.17

Node 0.10.17 is out, so it seems like we’re back to weekly releases again. This version updates uv, tls, stream, dgram, and readline. The stream module fix makes errors raise exceptions when 'error' listeners are removed, which seems like a slight oversight to me…

Defining Global Scripts in npm

Joe Sullivan sent in his post about how global scripts are defined in popular npm modules. This is the kind of thing I like to see – learning from the pros. Joe summarises the common approaches at the end of the post.

loadtest

loadtest (GitHub: alexfernandez / loadtest, License: MIT, npm: loadtest) by Alex Fernández is a load testing module inspired by and partly compatible with Apache ab. It can be invoked as a command-line script or used as a module.

var loadtest = require('loadtest');
var options = {
    url: 'http://localhost:8000',
    maxRequests: 1000,
};

loadtest.loadTest(options, function(error, result) {
  if (error) {
    return console.error('Error:', error);
  }

  console.log('Tests run successfully');
});

The callback is run when the requests have been made, or the specified number of seconds have elapsed.

Do You Use the jQuery Plugin Site?

27 Aug 2013 | By Alex Young | Comments | Tags jquery plugins

The jQuery Plugin Registry was released in January 2013. It uses its own JSON format for defining a plugin and requires that you add http://plugins.jquery.com/postreceive-hook as a post-receive hook. This lets the repository collect information about new and updated plugins. The plugin site’s code is open source, and the authors use GitHub to manage feature requests and bugs.

jQuery was released in 2006, and since then a lot has changed on the web. In the JavaScript community there is a vocal group that has moved away from more monolithic frameworks, now that tools like npm, Bower, and Grunt have made it easier to manage dependencies and build client-side projects. That doesn’t mean jQuery isn’t still influential, and it’s still hugely popular.

What concerns me is despite jQuery’s continued popularity, the number of new releases on plugins.jquery.com is lacklustre. It’s far from stagnant, but npm leaves it in the dust. Not a fair comparison? Perhaps, but I know for a fact most of the plugins readers send DailyJS do not have jquery.json manifest files. I find it increasingly common to see package.json or bower.json files.

Do you use the jQuery plugin site for publishing or discovering plugins? If not, please discuss your issues with the service in the comments. Also, if you’ve been writing client-side scripts without the jQuery dependency let us know your reasoning.

Embedded JavaScript: Your Next Career Move

26 Aug 2013 | By Alex Young | Comments | Tags v8 microsoft google embedding

Most of us started out writing JavaScript for web pages. Even if you’re a server-side developer focused on Node, you probably wrote client-side JavaScript first. We see JavaScript as a language closely integrated with the DOM, and as a relatively lightweight server-side language, but you can flip this around and think of it as en entirely embedded language: after all, it’s embedded within web pages – it’s bridged to native data structures and functionalities that are required by the runtime.

Why Embed?

Why are scripting languages embedded in other software at all? If you think about a large C++, C#, or Objective-C project, then build time and deployment are major issues. Certain programming chores lend themselves well to scripting languages, so rather than rebuilding a huge project every time a small tweak is required, changing a script might be more productive.

In game development Python and Lua are typical choices for scripting. They’re used for game interfaces, logic, asset loading, AI, and more. Part of the success of the modding community based around Unreal engine games came from the use of UnrealScript.

Binding

You’re probably wondering: why Python and Lua? It’s mainly because these languages are widely adopted and suitable for embedding. Boost.Python and Luabind are examples of libraries that help with binding. Without bindings to the underlying native code it’s impossible for the scripting language to communicate, so this has to be fast and easy.

Web UI

An alternative to low-level binding is to use a web view that hosts JavaScript code, with some event-based bindings to the underlying application. Many mobile and desktop applications use web views for chunks of UI that are easier to implement with HTML, so this is happening more often than you might realise.

Once you’ve got large amounts of UI written with HTML, the required JavaScript starts to become messy. That’s where modern MVC frameworks like Backbone and AngularJS come in: but writing this code properly is a whole skill in itself, so that’s when the C++/Objective-C developers call us for help!

Unfortunately, embedding JavaScript as a runtime isn’t simple as it should be. There are many different ways to do it for each language.

.NET

In the .NET world there are lots of projects for running JavaScript inside your applications. IronJS is an ECMAScript 3.0 implementation built on Microsoft’s Dynamic Language Runtime. ClearScript allows multiple scripting languages to be added to .NET applications: it supports JavaScript through V8 – imagine being able to add using Microsoft.ClearScript.V8 to a C# program and then do engine.Execute("Console.WriteLine(lib.System.DateTime.Now)"). There’s also Jurassic – another ECMAScript runtime.

C++

The general wisdom seems to be that embedding V8 is the way to go. There are also SpiderMonkey-based projects like libjspp.

Objective-C

Apple’s Introduction to WebKit Objective-C Programming Guide explains how to access JavaScript from Objective-C.

Another approach is to embed JavaScriptCore. Apparently, Appcelerator Titanium uses JavaScriptCore for iOS projects – you should be able to figure this out by looking at Appcelerator’s GitHub projects.

Job Opportunities

I’m currently contracting at a particularly eclectic office: my team has Objective-C, C++, C#, and JavaScript developers. The shared wisdom amongst the non-JavaScript developers is they want to embed JavaScript in their projects: whether they’re games, desktop software, or mobile applications.

That’s great for us, but it’s worth remembering that JavaScript isn’t good at everything – the type system might not suit certain projects, its scope and coercion rules can be a source of frustration for people from other backgrounds. It looks C-like, but that doesn’t mean it’s C: and that’s the problem when you’re working with people who are more fluent in C than JavaScript.

If you’re wondering how people see JavaScript from the other side, then I found Choosing a scripting language by David Rosen interesting: he struggled with JavaScript’s readability because he couldn’t overload operators, and wanted to write maintainable linear algebra code.

However, it seems like there’s a huge amount of momentum behind JavaScript in a growing number of platforms, so it’s an area you should take seriously. Don’t be surprised to find yourself writing scripts for games or apps in the near future.

Bitcoins and JavaScript

23 Aug 2013 | By Alex Young | Comments | Tags node modules security

Bitcoin

Bitcoin might seem like a crazy cryptocurrency, mainly because it is, but it’s also becoming more widely adopted. I find it fascinating because it feels like I’m finally living in a 90s Neal Stephenson or William Gibson novel, although the possibility of making online payments outside of the standard merchant account/bank model has its appeal.

I’ve been researching the state of bitcoin payments in JavaScript to see how easy it is to set up. The first thing I found was CoinWidget – this allows you to accept donations using client-side JavaScript. I’ve added a widget to DailyJS in case you want to donate, but it should be easy enough to add to your own sites as well.

Address validation

A bitcoin address includes a four byte checksum, which means addresses can be validated without talking to any servers. The bitcoin-address module (GitHub: shtylman / bitcoin-address, npm: bitcoin-address) by Roman Shtylman implements the algorithm: a double SHA-256 digest of the 21 bytes before the checksum is calculated to validate the address.

var btcAddr = require('bitcoin-address');
btcAddr.validate('1Gtov23WTQPbj4c6dMaXnXxbvFKc87Lutb');
// true

Addresses are encoded with base 58, so Roman’s module includes his own decoding library. He also uses Node Buffer objects to work with the decoded data. Node’s crypto core module is used to create SHA-256 hashes.

Wallets

If you install a wallet like Bitcoin-QT, you should get bitcoind running in the background. This has an optional JSON API. There are several npm modules for this API, like: bitcoin. This allows you to query the daemon for transactions, account balances, and you can even create backups of wallets. There’s a full API call list on the Bitcoin wiki.

Accepting payments

There’s no easy way to accept payments for web-based transactions, because you really need to talk to a bitcoin wallet to see if a customer’s payment has been made. I’ve seen people hosting Java-based wallets on Heroku, and wallets usually have APIs that we can talk to from Node, but this isn’t exactly ideal.

BIPS

That’s where bitcoin merchants come in. They handle all the messy stuff so you can keep your web application code simple. Popular merchants with sensible APIs include BIPS and Coinbase.

This is the BIPS REST API (PDF), and the Coinbase API. There are Coinbase modules on npm and a BIPS API library.

Exchanges

Exchanges, like the infamous Mt.Gox, also have APIs. Through exchanges you can track interesting information about bitcoins, particularly exchange rate values, and some even allow trades to be made. There’s an Mt.Gox module on npm, which is light on documentation: check out MtGox/API for a general overview.

If you’ve written any bitcoin-related Node or client-side projects, send them in!

Debugging with Mocha

22 Aug 2013 | By Alex Young | Comments | Tags node modules testing techniques

I do a lot of work with Mocha, because I like to write well-tested Node projects. Sometimes there are things I just can’t figure out non-interactively, and that’s when I reach for the debugger. It’s a lot better than repeatedly running tests with more and more console.log statements.

Rather than using any extra Mocha extensions, I find Node’s standard debugger works great. With Mocha you access it by running your tests in debug mode:

mocha debug

The debug option works just like node debug file.js. Node’s debugger comes from V8, which has a built-in JSON-based protocol that supports communication with a live process using TCP. That means you’re not limited to Node’s command-line tools: the fancy GUI debugger in Chrome can be used instead.

Debugging a Failing Test

To debug a failing test, look at the stack trace to figure out a good place to add a breakpoint. I usually put them in test cases, just before a failing assertion, but you can put them anywhere in the program.

Breakpoints are added by inserting debugger on a single line by itself. Once you’ve strategically placed some breakpoints, run the tests with mocha debug.

Whenever you run mocha debug or node debug, you’ll be dropped into the debugger on the first line of the program. Type c to allow the tests to continue until the first debugger statement is encountered – there may be a delay after you issue the continue command, so be patient. After that the program will run until a breakpoint is hit, at which point you’ll be dropped into a prompt.

Debugger Commands

The commands are like gdb or lldb for the most part – if you’ve used another debugger before you should be able to figure out what’s going on. If not, there are three main commands that will get you started:

  • s: Step into code
  • n: Run the next line without stepping into it if it’s a function/method call
  • repl: Enter a REPL, which we mainly use for printing values and objects

As I have some experience with other debuggers, I found it took me a while to get used to typing repl: in most debuggers there’s a specific command for printing and formatting values or locations in memory. This REPL mode is exited by typing CTRL-C once. While you’re in the REPL, you can type the name of a value or object to see it: this is usually how I fix most of the problems in my tests.

Other Thoughts

I haven’t found a way to automatically drop into a debugger when an assertion fails. I’d really like to do this – it would be a bit like how IDEs work, but I’m not sure if it’s possible.

Node Roundup: 0.10.16, ungit, image-size

21 Aug 2013 | By Alex Young | Comments | Tags node modules git apps images
You can send in your Node projects for review through our contact form.

Node 0.10.16

Node 0.10.16 has been released, which includes an update for npm, and fixes for the crypto, http, and stream modules.

ungit

ungit logo

ungit (GitHub: FredrikNoren / ungit, License: MIT, npm: ungit) is a web-based UI for Git, written with Node. It makes Git repositories easier to visualise, a bit like gitk or git instaweb, but it has some GitHub-specific tweaks.

ungit repo

It can be installed with npm install -g ungit, and is run with ungit on the command-line. You can set up an .ungitrc which is a JSON file that currently just changes the port.

Once you’re running ungit, you can make commits, discard them, fetch remote changes – pretty much the standard Git operations you’re used to, with a friendlier workflow.

image-size

If you need to get image sizes without using command-line binaries, then take a look at image-size (GitHub: netroy / image-size, License: MIT, npm: image-size) by Aditya. It looks at the relevant bits in a file by using a Node buffer, and supports popular formats like PNG, GIF, BMP, and even PSD.

It has an asynchronous and synchronous API:

var sizeOf = require('image-size');
sizeOf('images/example.png', function(err, dimensions) {
  console.log(dimensions.width, dimensions.height);
});

jQuery Roundup: Fine Uploader, SimpleSlideView, jQuery.uheprnGen

20 Aug 2013 | By Alex Young | Comments | Tags jquery plugins ui widgets mobile html5 cryto
Note: You can send your plugins and articles in for review through our contact form.

Fine Uploader

Fine Uploader

Fine Uploader (GitHub: Widen / fine-uploader, License: GPLv3) by Mark Feltner is a client-side library for managing file uploads. It’s free of dependencies, but there’s a jQuery plugin for convenience. It supports multiple file uploads, progress bar, drag and drop, upload cancelation, validation, and direct to Amazon S3 uploads. S3 uploads work using CORS, and XHR2 is used for browsers with File API support and monitoring upload progress.

The author maintains a blog about the project, and a recent post includes details on the S3 support.

SimpleSlideView

SimpleSlideView (GitHub: cloudfour / SimpleSlideView, License: MIT) by Tyler Sticka is a mobile-style UI widget for displaying and managing animated view hierarchies:

This plugin was designed to work well with non-fixed layouts, which means it can be helpful to scroll to the top of the window or container prior to a view changing. If a $.scrollTo plugin is available, SimpleSlideView will attempt to use it by default. It has been tested with jquery.scrollTo and ZeptoScroll.

The views are divs marked up with a container so they can be displayed and hidden as needed. Data attributes are used to associate navigation with markup: a link with data-popview or data-pushview allows movement through the view hierarchy. There’s also a JavaScript API for managing this.

The readme has full documentation and an example for using it in a responsive interface.

jQuery.uheprnGen

jQuery.uheprnGen (GitHub: ryanmcdonough / jQuery.uheprnGen, License: Public Domain) is Ryan McDonough’s first attempt at a jQuery plugin, but it’s cool because it wraps around Steve Gibson’s UHE PRNG script, which stands for Ultra-High Entropy Pseudo-Random Number Generator.

This carefully designed PRNG utilizes more than 1536 bits of internal state memory. The operating parameters of the generator’s algorithm were carefully chosen (it uses a safe prime factor) to guarantee that every possible PRNG state is visited before the sequence begins to repeat.

With Ryan’s script, you can call $(this).uheprngGen({ range: 100, count: 10001 }); to generate 10001 random numbers with a range of 0 to 100.

Speech Router, Botdylan, Google Cloud Storage

19 Aug 2013 | By Alex Young | Comments | Tags api storage speech chrome github

Speech Router

Speech Router (GitHub: lukasolson / speech-router, License: MIT) is a router that wraps around Chrome’s Web Speech API. It’s based around a constructor function that accepts a routes object:

new SpeechRouter({
  routes: {
    'search google for *query': function(query) {
      window.open('https://google.com/search?q=' + query);
    }
  }
});

If you haven’t seen the Web Speech API before, it’s worth checking out. At least the results seem quite good with my accent and Chrome – your mileage may vary!

Botdylan

Botdylan (GitHub: botdylan / botdylan, License: MIT) by Pau Ramon is a Hubot-inspired GitHub automation system:

We use GitHub heavily. There are some repetitive tasks that were taking away our time to hack on a better product. Since we are in the productivity space we decided to stop doing things manually and start to have a more productive environment to work with.

It can do things like add labels to issues based on events, integrate with a CI server, talk to chat rooms, and so on. It runs as a daemon, and can execute tasks periodically in the background.

Google Cloud Storage

Google Cloud Storage, sent in by Jonathan Simon, is a screencast that demonstrates a JavaScript application that talks to Google’s Cloud Storage platform. The source code is here: storage-getting-started-javascript.

This demonstration covers getting started with Google Cloud Storage using JavaScript. See the process of setting up the sample application, running the sample and using it to try out Cloud Storage API commands like ‘list buckets’.

NoFlo, Peppy

16 Aug 2013 | By Alex Young | Comments | Tags node

NoFlo

NoFlo

NoFlo (GitHub: noflo) is a project to bring a visual-based approach to programming. It currently focuses on Node, but the authors want to branch out to other platforms if you give them enough money.

The project and the site seem interesting enough, but the Kickstarter video comes off a little bit too enthusiastic. Here is a spoonfull of delicious hyperbole for you to digest: “Nothing new has really been invented in programming in the last 50 years”, “code starts as whiteboards”, “flow-based programming can eliminate spaghetti code”.

Whether or not something is truly new is irrelevant: monads have been around less than 50 years, but even so we’re still exploring their uses after a good 20 something years (random citation: Extensibe Effects: An Alternative to Monad Transformers). Just because strongly typed object oriented programming is the dominant paradigm doesn’t stop thousands of papers a year being published about programming and related fields. Even if you spend all day writing JavaScript, Java, C#, or whatever, the field is still forging ahead: these languages themselves are evolving.

The assumption that we use whiteboards perplexes me. I don’t think I’ve used a whiteboard once in my career, and I’ve been programming commercially for 12 years now. How can making tangled masses of diagrams be a solution to spaghetti code? Won’t we just end up with spaghetti diagrams?

NoFlo has been written in CoffeeScript for simplicity.

Oh, OK… Before I give up and post that Grandpa Simpson hat gif, I’ll say this: I’m not sold on the idea, but that doesn’t mean I won’t try it. Let’s set aside the hilariously hyperbolic marketing video and see what it can do.

Peppy

Peppy (GitHub: jdonaghue / Peppy, License: FreeBSD) by James Donaghue is a CSS selector engine. He originally wrote it over four years ago, and it was well known at the time for being fast. He’s recently rewritten it with a different focus:

Peppy no longer uses large regular expressions for parsing selector strings. It now uses a selector parser that I wrote called LLSelectorParser. This is a top down parser that returns an abstract syntax tree. Peppy internally now works off of this tree.

Back when I regularly wrote the Let’s Make a Framework posts I was fascinated by how CSS frameworks work. Things have changed since then, but parsing selectors is still an interesting topic. Check out LLSelectorParser if you want to see how James implemented his.

A Look at Facebook's React

15 Aug 2013 | By Alex Young | Comments | Tags frameworks facebook ui reactive

React

React (GitHub: facebook / react, License: Apache 2.0, npm: react-tools, bower: react) from Facebook and Instagram is a UI framework. It’s maintained by Paul O’Shannessy, and Paul and Christopher Chedeau both post to the React blog regularly about new features and community news.

React is meant to be a declarative framework, so it focuses on transforming data into interface components. Data can come from servers and user input – there’s no specific transport layer support, instead other libraries like jQuery are relied on.

The first thing you’ll notice about React is it mixes HTML and JavaScript:

var HelloMessage = React.createClass({
  render: function() {
    return <div>{'Hello ' + this.props.name}</div>;
  }
});

React.renderComponent(<HelloMessage name="John" />, mountNode);

What’s going on? Well, this snippet is intended to be placed inside a script tag, with the type attribute set to text/jsx. JSX is React’s XML-based template language. It doesn’t hit the DOM until it needs to: instead a mock DOM, or faked browser is used to maintain an in-memory representation of your templates. Be aware that this comes with caveats: everything is escaped by default, so HTML entities can easily be double escaped.

You don’t need to use JSX, however: React.DOM.div({}, 'Hello ' + this.props.name) is equivalent to the previous example.

Applications made with React are based on components. Components are created with React.createClass method (not React.createComponent). Components have a “state” and “props”: the state is private, and mutable. If the state is updated, then the component will be re-rendered: this is known as reactive state, and is how React models reactive data flows. React doesn’t re-render the entire component, it tries to only render what changed:

render() methods return a description of the DOM, and React can diff this description with the in-memory representation to compute the fastest way to update the browser.

React plays well with Node-based build systems: there’s a Grunt task for building JSX, in case you don’t want to render everything in the browser. The documentation has a section on React’s tooling integration.

The documentation for React is straightforward and easy to follow: there’s a tutorial that introduces the main aspects of the framework. It’s difficult to say how it compares to other frameworks like AngularJS, but I like the distinction between mutable and immutable state and properties for modeling reactive data flows.

Node Roundup: The Future of Node, takeapeek, subtitle

14 Aug 2013 | By Alex Young | Comments | Tags node modules subtitles video
You can send in your Node projects for review through our contact form.

The Future of Node

Yakulu posted The Future of Programming in Node.js to Hacker News, which is a long message by Isaac Schlueter on the nodejs Google Group:

Callbacks will remain the de facto way to implement asynchrony. Generators and Promises are interesting and will remain a userland option.

This is not a democracy. However, there’s plenty of room for everyone’s opinion. If you want to make exciting dramatic breaking changes to node-core, and you can’t find satisfaction by writing userland npm modules, then please fork joyent/node, give it a new name and logo, and go as completely crazy as you want.

It sounds like the Node core developers are focusing on keeping Node maintainable, rather than jumping on whatever new language or API style is currently fashionable. I like this approach, because after working with faddish web frameworks that resulted in unmaintainable projects after a surprisingly short amount of time, the idea of a stable and calm core library is definitely welcome.

There were cries of a lack of innovation in the comments, setting off an interesting discussion about the future of Node. Eventually the comparison with Meteor was brought up, and Isaac talks about how it differs to Node, npm, and even how the Meteor community is managed.

It’s required reading for those of us investing in Node for the next few years.

takeapeek

takeapeek (GitHub: giodamelio / takeapeek, License: MIT, npm: takeapeek) by Gio d’Amelio is a command-line web server in the spirit of python -m SimpleHTTPServer. It supports directory indexes, and allows settings to be saved in .takeapeekrc. You can also use it as a module in Node.

It’s built with connect, and was inspired by glance by Jesse Keane.

subtitler

subtitler (GitHub: aetheon / node-opensubtitles-client, License: BSD, npm: opensubtitles-client) by Oscar Brito is an open subtitles API client.

It has a command-line tool for downloading subtitle files, and also has an event-based, asynchronous JavaScript API.

jQuery Roundup: jQuery.emphasis.js, Tipue Search

Note: You can send your plugins and articles in for review through our contact form.

jQuery.emphasis.js

jQuery.emphasis.js (GitHub: zmmbreeze / jquery.emphasis, License: MIT, jQuery: emphasis) by “mzhou” is a CSS3 text-emphasis fallback.

The author says it’s useful for East Asian languages because it adds symbols above or below characters to improve the clarity of emphasised sections. The equivalent CSS currently only works in WebKit with a vendor prefix, so this plugin will be useful to those working with these languages.

The source is quite interesting – it’s based on the CSS3 specification, which involves determining if a character is suitable for emphasis, then the insertion of fairly complex styles to simulate the emphasis marks.

Tipue image search

Tipue Search (License: MIT) is a site search plugin. It can search static JSON content, or pages on the same origin using Ajax. It also supports an image search mode, which looks for matches in JSON content that points to image URLs.

Given an index, like this:

var tipuesearch = {"pages": [
  {"title": "Tipue Search, a site search engine jQuery plugin", "text": "Tipue Search is a site search engine jQuery plugin. Tipue Search is open source and released under the MIT License, which means it's free for both commercial and non-commercial use. Tipue Search is responsive and works on all reasonably modern browsers.", "tags": "JavaScript", "loc": "http://www.tipue.com/search"},
  {"title": "Tipue drop, a search suggestion box jQuery plugin", "text": "Tipue drop is a search suggestion box jQuery plugin. Tipue drop is open source and released under the MIT License, which means it's free for both commercial and non-commercial use. Tipue drop is responsive and works on all reasonably modern browsers.", "tags": "JavaScript", "loc": "http://www.tipue.com/drop"},
  {"title": "About Tipue", "text": "Tipue is a small web development studio based in North London. We've been around for over a decade. We like minimalism with the occasional hint of retro.", "tags": "", "loc": "http://www.tipue.com/about"}
]};

Tipue can be enabled using $('#tipue_search_input').tipuesearch(); on a suitable input element.

Auto Iframe Height Plugin Update

Ilker Guller updated his Auto Iframe Height Plugin (GitHub: Sly777 / Iframe-Height-Jquery-Plugin, License: MIT, GPL) to automatically check the iframe height when the contents change.

To enable automatic resizing, you can use the watcher option passed to $.iframeHeight. It also supports several other options, including: defaultHeight, minimumHeight, and watcherTime.

Ground, Generators and Async Patterns in Node, Time Grunt

12 Aug 2013 | By Alex Young | Comments | Tags node modules grunt typescript frameworks async es6

Ground

Ground (GitHub: OptimalBits / ground, License: MIT) from OptimalBits is a web framework for Node that is written with TypeScript:

In ground, most of the application logic is moved from the server to the client, whereas the server acts mostly as an scalable, efficient distributed storage and synchronization controller.

It includes also some rather useful features such as a hierarchical routing system, an undo/redo manager, property and declarative bindings, reference counting and automatic synchronization between clients and servers. It is design to always deliver high performance and low memory consumption.

Grunt is used for building the client-side code and deploying it. It uses models in the style of the Mongoose ODM, and most parts of the framework including models have event APIs. Views are implemented using view models.

The documentation at gnd.io includes more examples and demos.

Generators and Async Patterns in Node

Gorgi Kosev sent in his essay, Analysis of generators and other async patterns in node. He looks at how generators work, how the code compares to other implementations (for example, promises), using a complexity measurement, and benchmarks of memory and execution time.

The generator solution suspend is really fast. It incurred minimal overhead of about 50-80% running time. It’s also roughly comparable with streamlinejs (when in raw callbacks mode).

Time Grunt

time-grunt (GitHub: sindresorhus / time-grunt, License: MIT, npm: time-grunt) by Sindre Sorhus displays the elapsed time of Grunt tasks:

// Gruntfile.js
module.exports = function(grunt) {
  // require it at the top and pass in the grunt instance
  require('time-grunt')(grunt);

  grunt.initConfig();
  grunt.registerTask('default', []);
}