Alex Young

Some insight into how the Goog sees your feed. You might find it useful for trouble shooting - we certainly do.

Stomach Contents: Structure - struct

author

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
name	DailyJS

encoding

UTF-8

entry

Stomach Contents: Structure - array

Stomach Contents: Structure - struct

content

Stomach Contents: Structure - array

Stomach Contents: Structure - struct

type

html

value

<img src='http://dailyjs.com/images/posts/modulus.png' alt='Modulus' /> <a href='https://modulus.io/'>Modulus.io</a> is a new hosting platform dedicated to Node. Why “platform”? Well, Modulus provides a complete stack for web application development: MongoDB is used for the database and file storage, and WebSockets are supported out of the box. Applications running on the Modulus stack get metrics – requests are logged and analysed in real-time. Horizontal scaling is supported by running multiple instances of your application. Pricing is determined by the number of instances (servos) that you run, and storage used. The <a href='https://modulus.io/pricing'>Modulus pricing page</a> has some sliders, allowing you to see how much it’ll cost to run your application per-month. I asked Modulus about using different versions of Node Node, as Heroku supports 0.4 to 0.10. However, at the time of writing only Node 0.8.15 is supported. Ghuffran Ali from Modulus said that they’re working on supporting multiple Node versions as soon as Monday (27th May), so <a href='http://blog.modulus.io/'>keep an eye on the Modulus blog</a> for details on that. It’s easy to get started with Modulus – there’s a sample project, plus you can sign in with GitHub so it doesn’t take too much effort to get a basic application running. They’re also offering $15 free credit, so you could run something more substantial there to see how everything works. Modulus uses a web-based interface for managing projects that allows various settings to be changed, like environmental variables, and a global SSL redirect. There’s also a command-line client – if you sign in with GitHub make sure you use <code>modulus login</code> with <code>-g</code> so you can sign in with your GitHub account. On a related note, <a href='http://blog.nodejitsu.com/iriscouch-acquisition'>IrisCouch has joined Nodejitsu</a>. That means CouchDB and Redis are now both supported by Nodejitsu: <blockquote> This means that our users will be able to deploy their applications and databases from the same set of tools all backed by node.js. If you’re an existing IrisCouch user you will be notified and given ample time to migrate your IrisCouch account into a Nodejitsu account. </blockquote> It’s impressive to see so much innovation in the Node hosting/PaaS space! <img src="http://feeds.feedburner.com/~r/dailyjs/~4/VOyy_xdYs40" height="1" width="1"/>

http://dailyjs.com/2013/05/25/modulus

link

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
href	http://feedproxy.google.com/~r/dailyjs/~3/VOyy_xdYs40/modulus

title

Stomach Contents: Structure - struct
value	Node Hosting with Modulus

updated

2013-05-24T23:00:00Z

Stomach Contents: Structure - struct

content

Stomach Contents: Structure - array

Stomach Contents: Structure - struct

type

html

value

In the <a href='http://dailyjs.com/tags#angularfeeds'>AngularJS tutorials</a> I’ve been writing, you might have noticed the use of dependency injection. In this article I’m going to explain how dependency injection works, and how it relates to the small tutorial project we’ve created. Dependency injection is a software design pattern. The motivation for using it in Angular is to make it easier to transparently load mocked objects in tests. The <code>$http</code> module is a great example of this: when writing tests you don’t want to make real network calls, but defer the work to a fake object that responds with fixture data. The earlier tutorials used dependency injection for this exact use case: in <a href='https://github.com/alexyoung/djsreader/blob/c9f9d06258f4973018a1cc48c226642bbb32938f/app/scripts/controllers/main.js#L3-L4'>main controller</a>, the <code>MainCtrl</code> module is set up to load the <code>$http</code> module which can then be transparently replaced during testing. <div class='highlight'><pre><code class='javascript'>angular.module('djsreaderApp') .controller('MainCtrl', function($scope, $http, $timeout) { </code></pre> </div> Now forget everything I just said about dependency injection, and look at the callback that has been passed to <code>.controller</code> in the previous example. The <code>$http</code> and <code>$timeout</code> modules have been added by me because I want to use the <a href='http://docs.angularjs.org/api/ng.$http'>$http service</a> and the <a href='http://docs.angularjs.org/api/ng.$timeout'>$timeout service</a>. These are built-in “services” (an Angular term), but they’re not standard arguments. In fact, I could have specified these arguments in any order: <div class='highlight'><pre><code class='javascript'>angular.module('djsreaderApp') .controller('MainCtrl', function($scope, $timeout, $http) { </code></pre> </div> This is possible because Angular looks at the function argument names to load dependencies. Before you run away screaming about magic, it’s important to realise that this is just one way to load dependencies in Angular projects. For example, this is equivalent: <div class='highlight'><pre><code class='javascript'>angular.module('djsreaderApp') .controller('MainCtrl', ['$scope', '$http', '$timeout'], function($scope, $http, $timeout) { </code></pre> </div> The array-based style is more like <a href='https://github.com/amdjs/amdjs-api/wiki/AMD'>AMD</a>, and requires a little bit of syntactical overhead. I call the first style “introspective dependency injection”. The array-based syntax allows us to use different names for the dependencies, which can be useful sometimes. This raises the question: how does introspective dependency injection cope with minimisers, where variables are renamed to shorter values? Well, it doesn’t cope with it at all. In fact, minimisers need help to translate the first style to the second. <h3 id='yeoman_and_ngmin'>Yeoman and ngmin</h3> One reason I built the tutorial series with <a href='http://yeoman.io/'>Yeoman</a> was because the Angular generator includes <a href='https://github.com/btford/grunt-ngmin'>grunt-ngmin</a>. This is a <a href='http://gruntjs.com/'>Grunt</a> task that uses <a href='https://github.com/btford/ngmin'>ngmin</a> – an Angular-aware “pre-minifier”. It allows you to use the shorter, introspective dependency injection syntax, while still generating valid minimised production builds. Therefore, building a production version of <a href='https://github.com/alexyoung/djsreader'>djsreader</a> with <code>grunt build</code> will correctly generate a deployable version of the project. Why is it that almost all of Angular’s documentation and tutorials include the potentially dangerous introspective dependency injection syntax? I’m not sure, and I haven’t looked into it. I’d be happier if the only valid solution was the array-based approach, which looks more like AMD which most of us are already comfortable with anyway. Just to prove I’m not making things up, here is the minimised source for djsreader: <div class='highlight'><pre><code class='javascript'>"use strict";angular.module("djsreaderApp",[]).config(["$routeProvider",function(e){e.when("/",{templateUrl:"views/main.html",controller:"MainCtrl"}).otherwise({redirectTo:"/"})}]),angular.module("djsreaderApp").controller("MainCtrl",["$scope","$http","$timeout",function(e,r,t){e.refreshInterval=60,e.feeds=[{url:"http://dailyjs.com/atom.xml"}],e.fetchFeed=function(n){n.items=[];var o="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'";o+=encodeURIComponent(n.url),o+="'%20and%20itemPath%3D'feed.entry'&format=json&diagnostics=true&callback=JSON_CALLBACK",r.jsonp(o).success(function(e){e.query.results&&(n.items=e.query.results.entry)}).error(function(e){console.error("Error fetching feed:",e)}),t(function(){e.fetchFeed(n)},1e3*e.refreshInterval)},e.addFeed=function(r){e.feeds.push(r),e.fetchFeed(r),e.newFeed={}},e.deleteFeed=function(r){e.feeds.splice(e.feeds.indexOf(r),1)},e.fetchFeed(e.feeds[0])}]); </code></pre> </div> The demangled version shows that we’re using the array-based syntax, thanks to ngmin: <div class='highlight'><pre><code class='javascript'>angular.module("djsreaderApp").controller("MainCtrl", ["$scope", "$http", "$timeout", </code></pre> </div> <h3 id='internals'>Internals</h3> In case you’re wondering how the introspective dependency injection style works, then look no further than <a href='https://github.com/angular/angular.js/blob/0272240400d7896224f34b9f10b492994e29c655/src/auto/injector.js#L45-L71'>annotate(fn)</a>. This function uses <code>Function.prototype.toString</code> to extract the argument names from the JavaScript source code. The results are effectively cached, so even though this sounds horrible it doesn’t perform as badly as it could. <h3 id='conclusion'>Conclusion</h3> Nothing I’ve said here is new – while researching this post I found <a href='http://www.alexrothenberg.com/2013/02/11/the-magic-behind-angularjs-dependency-injection.html'>The Magic Behind Dependency Injection</a> by Alex Rothenberg, which covers the same topic, and the <a href='http://docs.angularjs.org/guide/di'>Angular Dependency Injection documentation</a> outlines the issues caused by the introspective approach and suggests that it should only be used for <a href='http://www.pretotyping.org/'>pretotyping</a>. However, I felt like it was worth writing an overview of the matter, because although Yeoman is great for a quick start to a project, you really need to understand what’s going on behind the scenes! <img src="http://feeds.feedburner.com/~r/dailyjs/~4/dEzcXA0X9fc" height="1" width="1"/>

http://dailyjs.com/2013/05/23/angularjs-injection

link

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
href	http://feedproxy.google.com/~r/dailyjs/~3/dEzcXA0X9fc/angularjs-injection

title

Stomach Contents: Structure - struct
value	AngularJS: More on Dependency Injection

updated

2013-05-22T23:00:00Z

Stomach Contents: Structure - struct

content

Stomach Contents: Structure - array

Stomach Contents: Structure - struct

type

html

value

<div class='intro'> You can send in your Node projects for review through our <a href='/contact.html'>contact form</a>. </div> <h3 id='node_0107'>Node 0.10.7</h3> <a href='http://blog.nodejs.org/2013/05/17/node-v0-10-7-stable/'>Node 0.10.7</a> was released last week. This version includes fixes for the buffer and crypto modules, and timers. The buffer/crypto fix relates to encoding issues that could crash Node: <a href='https://github.com/joyent/node/issues/5482'>#5482</a>. <h3 id='json_editor_online'>JSON Editor Online</h3> <img src='http://dailyjs.com/images/posts/jsoneditoronline.png' alt='JSON Editor Online' /> <a href='http://jsoneditoronline.org/'>JSON Editor Online</a> (GitHub: <a href='https://github.com/josdejong/jsoneditor/'>josdejong / jsoneditor</a>, License: Apache 2.0, npm: <a href='https://npmjs.org/package/jsoneditor'>jsoneditor</a>, bower: jsoneditor) by Jos de Jong is a web-based JSON editor. It uses Node for building the project, but it’s actually 100% web-based. It uses the <a href='http://ace.ajax.org/#nav=about'>Ace</a> editor, and includes features for searching and sorting JSON. It’s installable with Bower, so you could technically use it as a component and embed it into another project. <h3 id='englishtime'>english-time</h3> Azer Koçulu sent in a bunch of new modules again, and one I picked out this time was english-time (GitHub: <a href='https://github.com/azer/english-time'>azer / english-time</a>, License: BSD, npm: <a href='https://npmjs.org/package/english-time'>english-time</a>). He’s using it with some of the CLI tools he’s written, so rather than specifying a date in an ISO format users can express durations in English. The module currently supports milliseconds, seconds, minutes, hours, days, weeks, and shortened expressions based on combinations of these. For example, <code>3 weeks, 5d 6h</code> would work. <h3 id='puid'>puid</h3> puid (GitHub: <a href='https://github.com/pid/puid'>pid / puid</a>, License: MIT, npm: <a href='https://npmjs.org/package/puid'>puid</a>) by Sascha Droste can generate unique IDs suitable for use in a distributed system. The IDs are based on time, machine, and process, and can be 24, 14, or 12 characters long. Each ID is comprised of an encoded timestamp, machine ID, process ID, and a counter. The counter is based on nanoseconds, and the machine ID is based on the network interface ID or the machine’s hostname. <h3 id='nodemac'>node-mac</h3> <a href='https://github.com/coreybutler/node-windows'>node-windows</a> provides integration for Windows-specific services, like creating daemons and writing to <code>eventlog</code>. The creator of node-windows, Corey Butler, has also released <a href='http://coreybutler.github.io/node-mac/manual/'>node-mac</a> (GitHub: <a href='https://github.com/coreybutler/node-mac'>coreybutler / node-mac</a>, License: MIT, npm: <a href='https://npmjs.org/package/node-mac'>node-mac</a>). This supports Mac-friendly daemonisation and logging. Services can be created using an event-based API: <div class='highlight'><pre><code class='javascript'>var Service = require('node-mac').Service; // Create a new service object var svc = new Service({ name: 'Hello World', description: 'The nodejs.org example web server.', script: '/path/to/helloworld.js') }); // Listen for the "install" event, which indicates the // process is available as a service. svc.on('install', function() { svc.start(); }); svc.install(); </code></pre> </div> It also supports service removal, and event logging. <img src="http://feeds.feedburner.com/~r/dailyjs/~4/SSiM5aGpINI" height="1" width="1"/>

http://dailyjs.com/2013/05/22/node-roundup

link

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
href	http://feedproxy.google.com/~r/dailyjs/~3/SSiM5aGpINI/node-roundup

title

Stomach Contents: Structure - struct
value	Node Roundup: 0.10.7, JSON Editor, puid, node-mac

updated

2013-05-21T23:00:00Z

Stomach Contents: Structure - struct

content

Stomach Contents: Structure - array

Stomach Contents: Structure - struct

type

html

value

<div class='intro'> Note: You can send your plugins and articles in for review through our <a href='/contact.html'>contact form</a>. </div> <h3 id='anchorifyjs'>Anchorify.js</h3> <a href='http://plugins.jquery.com/anchorify/'>Anchorify.js</a> (GitHub: <a href='https://github.com/willdurand/anchorify.js'>willdurand / anchorify.js</a>, License: MIT) by William Durand automatically inserts unique anchored headings. The default markup is an anchor with a pilcrow sign, but this can be overridden if desired. Even though the plugin is relatively simple, William has included QUnit tests and put the project up on jQuery’s new plugin site. <h3 id='minimalect'>Minimalect</h3> <a href='http://groenroos.github.io/minimalect/'>Minimalect</a> (GitHub: <a href='https://github.com/groenroos/minimalect'>groenroos / minimalect</a>, License: MIT) by Oskari Groenroos is a <code>select</code> element replacement that supports optgroups, searching, keyboard navigation, and themes. It comes with two themes that are intentionally simple, allowing you to easily customise them using CSS, and no images are required by default. Options include placeholder text, a message when no search results are found, class name overrides, and lifecycle callbacks. <img src="http://feeds.feedburner.com/~r/dailyjs/~4/hu1BqC4Q9to" height="1" width="1"/>

http://dailyjs.com/2013/05/21/jquery-roundup

link

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
href	http://feedproxy.google.com/~r/dailyjs/~3/hu1BqC4Q9to/jquery-roundup

title

Stomach Contents: Structure - struct
value	jQuery Roundup: Anchorify.js, Minimalect

updated

2013-05-20T23:00:00Z

Stomach Contents: Structure - struct

content

Stomach Contents: Structure - array

Stomach Contents: Structure - struct

type

html

value

Learning modern modular frameworks like <a href='http://backbonejs.org/'>Backbone.js</a> and <a href='http://angularjs.org/'>AngularJS</a> involves mastering a large amount of terminology, even just to understand a Hello, World application. With that in mind, I wanted to take a break from higher-level libraries to answer the question: what is a module? <h3 id='the_background_story'>The Background Story</h3> Client-side development has always been rife with techniques for patching missing behaviour in browsers. Even the humble <code><script></code> tag has been cajoled and beaten into submission to give us alternative ways to load scripts. It all started with concatenation. Rather than loading many scripts on a page, they are instead joined together to form a single file, and perhaps minimised. One school of thought was that this is more efficient, because a long HTTP request will ultimately perform better than many smaller requests. That makes a lot of sense when loading libraries – things that you want to be globally available. However, when writing your own code it somehow feels wrong to place objects and functions at the top level (the global scope). If you’re working with jQuery, you might organise your own code like this: <div class='highlight'><pre><code class='javascript'>$(function() { function MyConstructor() { } MyConstructor.prototype = { myMethod: function() { } }; var instance = new MyConstructor(); }); </code></pre> </div> That neatly tucks everything away while also only running the code when the DOM is ready. That’s great for a few weeks, until the file is bustling with dozens of objects and functions. That’s when it seems like this monolithic file would benefit from being split up into multiple files. To avoid the pitfalls caused by large files, we can split them up, then load them with <code><script></code> tags. The scripts can be placed at the end of the document, causing them to be loaded after the majority of the document has been parsed. At this point we’re back to the original problem: we’re loading perhaps dozens of <code><script></code> tags inefficiently. Also, scripts are unable to express dependencies between each other. If dependencies between scripts can be expressed, then they can be shared between projects and loaded on demand more intelligently. <h3 id='loading_optimising_and_dependencies'>Loading, Optimising, and Dependencies</h3> The <code><script></code> tag itself has an <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async'>async attribute</a>. This helps indicate which scripts can be loaded asynchronously, potentially decreasing the time the browser blocks when loading resources. If we’re going to use an API to somehow express dependencies between scripts and load them quickly, then it should load scripts asynchronously when possible. Five years ago this was surprisingly complicated, mainly due to legacy browsers. Then solutions like <a href='http://requirejs.org/'>RequireJS</a> appeared. Not only did RequireJS allow scripts to be loaded programmatically, but it also had an optimiser that could concatenate and minimise files. The lines between loading scripts, managing dependencies, and file optmisation are inherently blurred. <h3 id='amd'>AMD</h3> The problem with loading scripts is it’s asynchronous: there’s no way to say <code>load('/script.js')</code> and have code that uses <code>script.js</code> directly afterwards. The <a href='http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition'>CommonJS Modules/AsynchronousDefinition</a>, which became <a href='https://github.com/amdjs/amdjs-api/wiki/AMD'>AMD</a> (Asynchronous Module Definition), was designed to get around this. Rather than trying to create the illusion that scripts can be loaded synchronously, all scripts are wrapped in a function called <code>define</code>. This is a global function inserted by a suitable AMD implementation, like RequireJS. The <code>define</code> function can be used to safely namespace code, express dependencies, and give the module a name (id) so it can be registered and loaded. Module names are “resolved” to script names using a well-defined format. Although this means every module you write must be wrapped in a call to <code>define</code>, the authors of RequireJS realised it meant that build tools could easily interpret dependencies and generate optimised builds. So your development code can use RequireJS’s client-side library to load the necessary scripts, then your production version can preload all scripts in one go, without having to change your HTML templates (<code>r.js</code> is used to do this in practice). <h3 id='commonjs'>CommonJS</h3> Meanwhile, Node was becoming popular. Node’s module system is characterised by using the <code>require</code> statement to return a value that contains the module: <div class='highlight'><pre><code class='javascript'>var User = require('models/user'); User.find(1); </code></pre> </div> Can you imagine if every Node module had to be wrapped in a call to <code>define</code>? It might seem like an acceptable trade-off in client-side code, but it would feel like too much boilerplate in server-side scripting when compared to languages like Python. There have been many projects to make this work in browsers. Most use a build tool to load all of the modules referenced by <code>require</code> up front – they’re stored in memory so <code>require</code> can simply return them, creating the illusion that scripts are being loaded synchronously. Whenever you see <code>require</code> and <code>exports</code> you’re looking at <a href='http://wiki.commonjs.org/wiki/Modules/1.1'>CommonJS Modules/1.1</a>. You’ll see this referred to as “CommonJS”. Now you’ve seen CommonJS modules, AMD, and where they came from, how are they being used by modern frameworks? <h3 id='modules_in_the_wild'>Modules in the Wild</h3> <a href='http://dojotoolkit.org/documentation/tutorials/1.7/modules/'>Dojo uses AMD internally</a> and for creating your own modules. It didn’t originally – it used to have its own module system. Dojo adopted AMD early on. <a href='http://docs.angularjs.org/guide/module'>AngularJS</a> uses its own module system that looks a lot like AMD, but with adaptations to support <a href='http://docs.angularjs.org/guide/di'>dependency injection</a>. RequireJS supports AMD, but it can load scripts and other resources without wrapping them in <code>define</code>. For example, a dependency between your own well-defined modules and a jQuery plugin that doesn’t use AMD can be defined by using suitable configuration options when setting up RequireJS. There’s still a disparity between development and production builds. Even though RequireJS can be used to create serverless single page applications, most people still use a lightweight development server that serves raw JavaScript files, before deploying concatenated and minimised production builds. The need for script loading and building, and tailoring for various environments (typically development, test, and production) has resulted in a new class of projects. <a href='http://yeoman.io/'>Yeoman</a> is a good example of this: it uses Grunt for managing builds and running a development server, Bower for defining the source of dependencies so they can be fetched, and then RequireJS for loading and managing dependencies in the browser. Yeoman generates skeleton projects that set up development and build environments so you can focus on writing code. Hopefully now you know all about client-side modules, so the next time you hear RequireJS, AMD, or CommonJS, you know what people are talking about! <img src="http://feeds.feedburner.com/~r/dailyjs/~4/5gT_9C74IFg" height="1" width="1"/>

http://dailyjs.com/2013/05/20/terminology-modules

link

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
href	http://feedproxy.google.com/~r/dailyjs/~3/5gT_9C74IFg/terminology-modules

title

Stomach Contents: Structure - struct
value	Terminology: Modules

updated

2013-05-19T23:00:00Z

Stomach Contents: Structure - struct

content

Stomach Contents: Structure - array

Stomach Contents: Structure - struct

type

html

value

<h3 id='impossible_mission'>Impossible Mission</h3> <img src='http://dailyjs.com/images/posts/c64-impossible-mission.png' alt='Impossible Mission' /> <a href='http://impossible-mission.krissz.hu/'>Impossible Mission</a> by Krisztián Tóth is a JavaScript remake of the C64 classic. You can view the source to see how it all works, if things like <code>this.dieByZapFrames</code> and <code>this.searchedFurniture</code> sound appealing to you. Krisztián previously sent in <a href='http://dailyjs.com/2012/04/06/toth-xregexp-plastron/'>Boulder Dash and Wizard of Wor</a> which were similar remakes written using the same approach. <h3 id='clientside_fulltext_indexing'>Client-Side Full-Text Indexing</h3> Gary Sieling sent in a post he wrote about full-text indexing with client-side JavaScript, in which he looks at PDF.js and Lunr: <a href='http://garysieling.com/blog/building-a-full-text-index-in-javascript'>Building a Full-Text Index in JavaScript</a>. I <a href='http://dailyjs.com/2013/03/01/localstorage-lunr-vlug/'>briefly mentioned Lunr</a> by Oliver Nightingale back in March. <blockquote> One great thing about this type of index is that the work can be done in parallel and then combined as a map-reduce job. Only three entries from the above object need to be combined, as “fields” and “pipeline” are static. </blockquote> <h3 id='backboneprojections'>Backbone.Projections</h3> In relational databases, a projection is a subset of available data. <a href='http://andreypopp.com/posts/2013-05-15-projections-for-backbone-collections.html'>Backbone.Projections</a> (GitHub: <a href='https://github.com/andreypopp/backbone.projections'>andreypopp / backbone.projections</a>, License: MIT, npm: <a href='https://npmjs.org/package/backbone.projections'>backbone.projections</a>) by Andrey Popp is the equivalent for Backbone collections – they allow a transformed subset of values in a collection can be represented and synced. The supported projections are <code>Capped</code> and <code>Filtered</code>. Capped collections are limited based on a size and function – the function will be used to order the results prior to truncating them. Filtered projections filter out results based on a function that returns a boolean. Projections can be composed by passing one project to another. This example creates a <code>Filtered</code> projection, and then passes it to a <code>Capped</code> projection to limit and order the results: <div class='highlight'><pre><code class='javascript'>var todaysPosts = new Filtered(posts, { filter: function(post) { return post.get('date').isToday(); } }); var topTodaysPosts = new Capped(todaysPosts, { cap: 5, comparator: function(post) { return post.get('likes'); } }); </code></pre> </div> The author has written unit tests with Mocha, and documentation is available in the readme. <img src="http://feeds.feedburner.com/~r/dailyjs/~4/kgRIePbY90s" height="1" width="1"/>

http://dailyjs.com/2013/05/17/c64-pdf-projections

link

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
href	http://feedproxy.google.com/~r/dailyjs/~3/kgRIePbY90s/c64-pdf-projections

title

Stomach Contents: Structure - struct
value	Impossible Mission, Full-Text Indexing, Backbone.Projections

updated

2013-05-16T23:00:00Z

Stomach Contents: Structure - struct

content

Stomach Contents: Structure - array

Stomach Contents: Structure - struct

type

html

value

<ul class='parts'> <li><a href='http://dailyjs.com/2013/04/11/angularjs-1/'>Part 1: Google, Twitter, and AngularJS</a></li> <li><a href='http://dailyjs.com/2013/04/18/angularjs-2/'>Part 2: Let's Make a Feed Reader</a></li> <li><a href='http://dailyjs.com/2013/04/25/angularjs-3/'>Part 3: Rendering Feeds</a></li> <li><a href='http://dailyjs.com/2013/05/09/angularjs-4/'>Part 4: Managing Feeds</a></li> <li><a href='http://dailyjs.com/2013/05/16/angularjs-5/'>Part 5: Tests</a></li> </ul> <h3 id='previously'>Previously</h3> In the <a href='http://dailyjs.com/2013/05/09/angularjs-4/'>last part</a> we changed the app to support multiple feeds. This week you’ll learn how to write a short unit test to test the app’s main controller. This will involve mocking data. If you get stuck at any part of this tutorial, check out the full source here: <a href='https://github.com/alexyoung/djsreader/commit/7b4bda96b787b7707582567db927f12cc80c5d27'>commit 7b4bda</a>. <h3 id='neat_and_tidy_tests'>Neat and Tidy Tests</h3> The goal of this tutorial is to demonstrate one method for writing neat and tidy tests. Ideally mocked data should be stored in separate files and loaded when required. What we absolutely don’t want is global variables littering memory. To run tests with the Yeoman-generated app we’ve been working on, type <code>grunt test</code>. It’ll use <a href='http://karma-runner.github.io'>Karma</a> and <a href='http://pivotal.github.io/jasmine/'>Jasmine</a> to run tests through Chrome using WebSockets. The workflow in the console is effortless, despite Chrome appearing and disappearing in the background (it won’t trample on your existing Chrome session, it’ll make a separate process). It doesn’t steal focus away, which means you can invoke tests and continue working on code without getting interrupted. <div class='image'> <img src='http://dailyjs.com/images/posts/djsreader-5-1.png' /> My workflow: mock, controller, test, and a terminal for running tests </div> The basic approach is to use <code>$httpBackend.whenJSONP</code> to tell AngularJS to return some mock data when the tests are run, instead of fetching the real feed data from Yahoo. That sounds simple enough, but there’s a slight compilation: leaving mock data in the test sucks. So, what do we do about this? The <code>karma.conf.js</code> file that was created for us by the Yeoman generator contains a line for loading files from a mocks directory: <code>'test/mock/**/*.js</code>. These will be loaded before the tests, so let’s dump some JSON in there. Interestingly, if you run <code>grunt test</code> right now it’ll fail, because the app makes a JSONP request, and the angular-mocks library will flag this as an error. Using <code>$httpBackend.whenJSONP</code> will fix this. <h3 id='json_mocks'>JSON Mocks</h3> Open a file called <code>test/mock/feed.js</code> (you’ll need to <code>mkdir test/mock</code> first), then add this: <div class='highlight'><pre><code class='javascript'>'use strict'; angular.module('mockedFeed', []) .value('defaultJSON', { query: { count: 2, created: '2013-05-16T15:01:31Z', lang: 'en-US', results: { entry: [ { title: 'Node Roundup: 0.11.2, 0.10.6, subscribe, Omelette', link: { href: 'http://dailyjs.com/2013/05/15/node-roundup' }, updated: '2013-05-15T00:00:00+01:00', id: 'http://dailyjs.com/2013/05/15/node-roundup', content: { type: 'html', content: 'example' } }, { title: 'jQuery Roundup: 1.10, jquery-markup, zelect', link: { href: 'http://dailyjs.com/2013/05/14/jquery-roundup' }, updated: '2013-05-14T00:00:00+01:00', id: 'http://dailyjs.com/2013/05/14/jquery-roundup', content: { type: 'html', content: 'example 2' } } ] } } }); </code></pre> </div> This uses <code>angular.module().value</code> to set a value that contains some JSON. I derived this JSON from Yahoo’s API by running the app and looking at the network traffic in WebKit Inspector, then edited out the <code>content</code> properties because they were huge (DailyJS has full articles in feeds). <h3 id='loading_the_mocked_value'>Loading the Mocked Value</h3> Open <code>test/spec/controllers/main.js</code> and change the first <code>beforeEach</code> to load <code>mockedFeed</code>: <div class='highlight'><pre><code class='javascript'>beforeEach(module('djsreaderApp', 'mockedFeed')); </code></pre> </div> The <code>beforeEach</code> method is provided by Jasmine, and will make the specified function run before each test. Now the <code>defaultJSON</code> value can be injected, along with the HTTP backend: <div class='highlight'><pre><code class='javascript'>var MainCtrl, scope, mockedFeed, httpBackend; // Initialize the controller and a mock scope beforeEach(inject(function($controller, $rootScope, $httpBackend, defaultJSON) { // Set up the expected feed data httpBackend = $httpBackend; $httpBackend.whenJSONP(/query.yahooapis.com/).respond(defaultJSON); scope = $rootScope.$new(); MainCtrl = $controller('MainCtrl', { $scope: scope }); })); </code></pre> </div> You should be able to guess what’s happening with <code>$httpBackend.whenJSONP(/query.yahooapis.com/)</code> – whenever the app tries to contact Yahoo’s service, it’ll trigger our mocked HTTP backend and return the <code>defaultJSON</code> value instead. Cool! <h3 id='the_test'>The Test</h3> The actual test is quite a comedown after all that mock wrangling: <div class='highlight'><pre><code class='javascript'>it('should have a list of feeds', function() { expect(scope.feeds.length).toBe(1); httpBackend.flush(); expect(scope.feeds[0].items[0].title).toBe('Node Roundup: 0.11.2, 0.10.6, subscribe, Omelette'); }); </code></pre> </div> The test checks <code>$scope</code> has the expected data. <code>httpBackend.flush</code> will make sure the (fake) HTTP request has finished first. The <code>scope.feeds</code> value is the one that <code>MainCtrl</code> from last week derives from the raw JSON returned by Yahoo. <h3 id='conclusion'>Conclusion</h3> You should now be able to run <code>grunt test</code> and see some passing tests (just like in my screenshot). If not, check out <a href='https://github.com/alexyoung/djsreader'>djsreader</a> on GitHub to see what’s different. Most of the work for this part can be found in <a href='https://github.com/alexyoung/djsreader/commit/7b4bda96b787b7707582567db927f12cc80c5d27'>commit 7b4bda</a>. <img src="http://feeds.feedburner.com/~r/dailyjs/~4/eJX08OgI61M" height="1" width="1"/>

http://dailyjs.com/2013/05/16/angularjs-5

link

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
href	http://feedproxy.google.com/~r/dailyjs/~3/eJX08OgI61M/angularjs-5

title

Stomach Contents: Structure - struct
value	AngularJS: Tests

updated

2013-05-15T23:00:00Z

Stomach Contents: Structure - struct

content

Stomach Contents: Structure - array

Stomach Contents: Structure - struct

type

html

value

<div class='intro'> You can send in your Node projects for review through our <a href='/contact.html'>contact form</a>. </div> <h3 id='node_0112_and_0106'>Node 0.11.2 and 0.10.6</h3> Clearly the Node core developers have had an early summer holiday, and are now back to unleash new releases. In the space of a few days <a href='http://blog.nodejs.org/2013/05/13/node-v0-11-2-unstable/'>0.11.2</a> and <a href='http://blog.nodejs.org/2013/05/14/node-v0-10-6-stable/'>0.10.6</a> were released. I was intrigued by the <code>Readable.prototype.wrap</code> update, which makes it support <code>objectMode</code> for streams that emit objects rather than strings or other data. The 0.11.2 release has an update that guarantees the order of <code>'finish'</code> events, and another that adds some new methods: <code>cork</code> and <code>uncork</code>. Corking basically forces buffering of all writes – data will be flushed when <code>uncork</code> is called or when <code>end</code> is called. There is a detailed discussion about <code>cork</code> and the related <code>_writev</code> method on the Node Google Group: <a href='https://groups.google.com/d/msg/nodejs/UNWhF64KeQI/zN2VCWYkMhcJ'>Streams writev API</a>. There are some interesting comments about a similar earlier implementation by Ryan Dahl, the validity of which Isaac questions due to Node’s code changing significantly since then. If you want to read about <code>writev</code>, check out the <code>write(2)</code> (<code>man 2 write</code>) manual page: <blockquote> <code>Write()</code> attempts to write <code>nbyte</code> of data to the object referenced by the descriptor <code>fildes</code> from the buffer pointed to by <code>buf</code>. <code>Writev()</code> performs the same action, but gathers the output data from the <code>iovcnt</code> buffers specified by the members of the <code>iov</code> array… </blockquote> <h3 id='subscribe'>subscribe</h3> Azer Koçulu has been working on a suite of modules for subscribing and observing to changes on objects: <ul> <li>Watch for changes to arrays: <a href='https://github.com/azer/watch-array'>watch-array</a></li> <li>Watch for changes to objects: <a href='https://github.com/azer/new-object'>new-object</a></li> <li>Array-like pub/sub: <a href='https://github.com/azer/new-list'>new-list</a></li> </ul> Now he’s also released a module for <a href='https://github.com/azer/pubsub'>subscribing</a> to multiple pub/sub objects: <div class='highlight'><pre><code class='javascript'>var subscribe = require('subscribe'); var a = pubsub(); var b = pubsub(); var c = pubsub(); subscribe(a, b, c, function(updates) { updates[0].pubsub; // => a.onUpdate updates[0].params; // => 3, 4 updates[1].pubsub; // => c.onUpdate updates[1].params; // => 5, 6 }); a.publish(3, 4); c.publish(5, 6); </code></pre> </div> This brings a compositional style of working to Azer’s other modules, allowing subscriptions to multiple lists and objects at the same time. The next example uses subscribe to combine the new-list module with new-object: <div class='highlight'><pre><code class='javascript'>var fruits = newList('apple', 'banana', 'grapes'); var people = newObject({ smith: 21, joe: 23 }); subscribe(fruits, people, function(updates) { updates[0].params[0].add; // => melon updates[1].params[1].set; // => { alex: 25 } }); fruits.push('melon'); people('alex', '25'); </code></pre> </div> <h3 id='omelette'>Omelette</h3> Omelette (GitHub: <a href='https://github.com/f/omelette'>f / omelette</a>, License: MIT, npm: <a href='https://npmjs.org/package/omelette'>omelette</a>) by Fatih Kadir Akın is a template-based autocompletion module. Programs and their arguments are defined using an event-based completion API, and then they can generate the zsh or Bash completion rules. There’s an animated gif in the readme that illustrates how it works in practice. <img src="http://feeds.feedburner.com/~r/dailyjs/~4/CKqNlKLoLCM" height="1" width="1"/>

http://dailyjs.com/2013/05/15/node-roundup

link

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
href	http://feedproxy.google.com/~r/dailyjs/~3/CKqNlKLoLCM/node-roundup

title

Stomach Contents: Structure - struct
value	Node Roundup: 0.11.2, 0.10.6, subscribe, Omelette

updated

2013-05-14T23:00:00Z

Stomach Contents: Structure - struct

content

Stomach Contents: Structure - array

Stomach Contents: Structure - struct

type

html

value

<div class='intro'> Note: You can send your plugins and articles in for review through our <a href='/contact.html'>contact form</a>. </div> <h3 id='jquery_110'>jQuery 1.10</h3> A new 1.x branch of jQuery has been released, <a href='http://blog.jquery.com/2013/05/09/jquery-1-10-beta-1-released/'>jQuery 1.10</a>. This builds on the work in the 1.9 line: <blockquote> It’s our goal to keep the 1.x and 2.x lines in sync functionally so that 1.10 and 2.0 are equal, followed by 1.11 and 2.1, then 1.12 and 2.2… </blockquote> A few of the inclded fixes were things originally planned for 1.9.x, and others are new to this branch. As always the announcement blog post contains links to full details of each change. <h3 id='jquerymarkup'>jquery-markup</h3> <a href='http://plugins.jquery.com/markup/'>jquery-markup</a> (GitHub: <a href='https://github.com/rse/jquery-markup'>rse / jquery-markup</a>, License: MIT) by Ralf S. Engelschall is a markup generator that works with several template engines (including Jade and handlebars). By adding a tag, <code><markup></code>, <code>$(selector).markup</code> can be used render templates interpolated with values. Ralf said this about the plugin: <blockquote> I wanted to use template languages like Handlebars but instead of having to store each fragment into its own file I still wanted to assemble all fragments together. Even more: I wanted to logically group and nest them to still understood the view markup code as a whole. </blockquote> The <code><markup></code> tag can include a <code>type</code> attribute that is used to determine the templating language – this means you can use multiple template languages in the same document. <h3 id='zelect'>zelect</h3> <a href='http://mtkopone.github.io/zelect/'>zelect</a> (GitHub: <a href='https://github.com/mtkopone/zelect'>mtkopone / zelect</a>, License: WTFPL) by Mikko Koponen is a <code><select></code> component. It’s unit tested, and has built-in support for asynchronous pagination. Unlike Chosen, it doesn’t come with any CSS, but that might be a good thing because it keeps the project simple. Mikko has provided an example with suitable CSS that you can use to get started. If Chosen seems too large or inflexible for your project, then zelect might be a better choice. <img src="http://feeds.feedburner.com/~r/dailyjs/~4/AGAYBTVoPoY" height="1" width="1"/>

http://dailyjs.com/2013/05/14/jquery-roundup

link

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
href	http://feedproxy.google.com/~r/dailyjs/~3/AGAYBTVoPoY/jquery-roundup

title

Stomach Contents: Structure - struct
value	jQuery Roundup: 1.10, jquery-markup, zelect

updated

2013-05-13T23:00:00Z

Stomach Contents: Structure - struct

content

Stomach Contents: Structure - array

Stomach Contents: Structure - struct

type

html

value

On a philosophical level, <a href='http://blog.izs.me/post/48281998870/unix-philosophy-and-node-js'>Node developers love Unix</a>. I like to think that’s why Node’s core modules are relatively lightweight compared to other standard libraries (is an <a href='http://www.ruby-doc.org/stdlib-2.0/libdoc/net/ftp/rdoc/index.html'>FTP library</a> really necessary?) – Node’s modules quietly get out of the way, allowing the community to provide solutions to higher-level problems. As someone who sits inside tmux/Vim/ssh all day, I’m preoccupied with command-line tools and ways to work more efficiently in the shell. That’s why I was intrigued to find bashful (GitHub: <a href='https://github.com/substack/bashful'>substack / bashful</a>, License: MIT, npm: <a href='https://npmjs.org/package/bashful'>bashful</a>) by substack. It allows Bash to be parsed and executed. To use it, hook it up with some streams: <div class='highlight'><pre><code class='javascript'>var bash = require('bashful')(process.env); bash.on('command', require('child_process').spawn); var s = bash.createStream(); process.stdin.pipe(s).pipe(process.stdout); </code></pre> </div> After installing <code>bashful</code>, running this example with <code>node sh.js</code> will allow you to issue shell commands. Not all of Bash’s built-in commands are supported yet (there’s a list and to-do in the readme), but you should be able to execute commands and run <code>true</code> and <code>false</code>, then get the last exit status with <code>echo $?</code>. How does this work? Well, the bashful module basically parses each line, character-by-character, to tokenise the input. It then <a href='https://github.com/substack/bashful/blob/699cafe4f9e35c9f4c88836866efbcbaab21b894/index.js#L114'>checks anything that looks like a command</a> against the list of built-in commands, and runs it. It mixes Node streams with a JavaScript bash parser to create a Bash-like layer that you can reuse with other streams. This module depends on <a href='https://github.com/substack/node-shell-quote'>shell-quote</a>, which correctly escapes those gnarly quotes in shell commands. I expect substack will make a few more shell-related modules as he continues work on bashful. <a href='http://documentup.com/arturadib/shelljs'>ShellJS</a> (GitHub: <a href='https://github.com/arturadib/shelljs'>arturadib / shelljs</a>, npm: <a href='https://npmjs.org/package/shelljs'>shelljs</a>) by Artur Adib has been around for a while, but still receives regular updates. This module gives you shell-like commands in Node: <div class='highlight'><pre><code class='javascript'>require('shelljs/global'); mkdir('-p', 'out/Release'); cp('-R', 'stuff/*', 'out/Release'); </code></pre> </div> It can even mimic Make, so you could write your build scripts with it. This would make sense if you’re sharing code with Windows-based developers. There are plenty of other interesting <a href='https://npmjs.org/browse/keyword/unix'>Unix</a>-related modules that are alive and regularly updated. One I was looking at recently is suppose (GitHub: <a href='https://github.com/jprichardson/node-suppose'>jprichardson / node-suppose</a>, License: MIT, npm: <a href='https://npmjs.org/package/suppose'>suppose</a>) by JP Richardson, which is an expect(1) clone: <div class='highlight'><pre><code class='javascript'>var suppose = require('suppose') , fs = require('fs') , assert = require('assert') 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') // ... </code></pre> </div> It uses a chainable API to allow expect-like expressions to capture and react to the output of other programs. Unix in the Node community is alive and well, but I’m sure there’s also lots of <a href='https://npmjs.org/browse/keyword/windows'>Windows-related fun</a> to be had – assuming you can figure out how to use Windows 9 with a keyboard and mouse that is… <img src="http://feeds.feedburner.com/~r/dailyjs/~4/E97Ux8ciWKQ" height="1" width="1"/>

http://dailyjs.com/2013/05/13/bashful

link

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
href	http://feedproxy.google.com/~r/dailyjs/~3/E97Ux8ciWKQ/bashful

title

Stomach Contents: Structure - struct
value	Unix: It's Alive!

updated

2013-05-12T23:00:00Z

http://dailyjs.com/

link

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
href	http://dailyjs.com

Stomach Contents: Structure - struct
href	http://feeds.feedburner.com/dailyjs
rel	self
type	application/atom+xml

Stomach Contents: Structure - struct
href	http://pubsubhubbub.appspot.com/
rel	hub

title

Stomach Contents: Structure - struct
value	DailyJS

updated

2013-05-24T17:16:07Z

version

atom_1.0

dailyjs

null

Node Hosting with Modulus: http://t.co/VKgunEE7NX@dailyjs

Alex Young rich internet application goodness

Alex Young

dailyjs