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

<div class='intro'> You can send in your Node projects for review through our <a href='/contact.html'>contact form</a> or <a href='http://twitter.com/dailyjs'>@dailyjs</a>. </div> <h3 id='expresssoap2json'>express-soap2json</h3> SOAP might not be the most exciting technology to work with, but if you like Node and Express then <a href='https://github.com/tonyskn/express-soap2json'>express-soap2json</a> (License: MIT, npm: <a href='http://search.npmjs.org/#/express-soap2json'>express-soap2json</a>) by Tony Sokhon can make it a little bit easier to work with. By wrapping around a SOAP service, express-soap2json creates a JSON/HTTP proxy. It’s built using the <a href='https://github.com/milewise/node-soap'>soap</a> module by Vinay Pulim. Tony has included some Mocha tests, and the README has some basic documentation. <h3 id='an_alternative_to_nodes_'>An Alternative to Node’s <code>console.time</code></h3> In <a href='http://nodetime.com/blog/powerful-alternative-to-nodes-console-time'>A Powerful Alternative to Node’s console.time()</a>, Dmitri Melikyan discusses using his <a href='http://nodetime.com/'>Nodetime</a> profiler in place of <code>console.time</code> and <code>console.timeEnd</code>. <blockquote> What if you want to know more about what happens in-between, say CPU time or other nested network of file operations in microsecods precision? </blockquote> <h3 id='cb'>cb</h3> <a href='https://github.com/jmar777/cb'>cb</a> (License: MIT, npm: <a href='http://search.npmjs.org/#/cb'>cb</a>) by Jeremy Martin is yet another control flow library. Or is it? <blockquote> Not exactly. There are literally hundreds of libraries available for easing some of the pains associated with the continuation passing style, and most of them do a pretty good job at this. </blockquote> <blockquote> Rather than compete with these libraries, <code>cb()</code> focuses on a much narrower range of problems, and is intended to be complementary to your control flow library (or lack thereof) of choice. </blockquote> It features timeout and error handling with a chainable API, so the following is possible: <div class='highlight'><pre><code class='javascript'>var cb = require('cb') , fs = require('fs'); fs.readFile( '/usr/share/dict/words' , 'utf8' , cb(console.log) .error(console.error) .timeout(50) .once() ); </code></pre> </div> <h3 id='apiserver'>ApiServer</h3> <a href='http://kilianc.github.com/node-apiserver/'>ApiServer</a> (GitHub: <a href='https://github.com/kilianc/node-apiserver'>kilianc / node-apiserver</a>, License: MIT, npm: <a href='http://search.npmjs.org/#/apiserver'>apiserver</a>) by Kilian Ciuffolo is a modular framework that’s a bit like <a href='http://mcavage.github.com/node-restify/'>Restify</a>, but can also be used to make Express-style web applications. Kilian has written his own comparisons with Express and Restify, and it’s compatible with Express middleware even though it’s not built with Connect. The routing module, <a href='https://github.com/kilianc/node-apiserver-router'>apiserver-router</a>, features a caching system, and applications are built using objects. These objects are known as modules, and each method is an API endpoint. It works with plain objects and prototype classes – classes are ideal if the module has a state (Kilian’s example passes in a database reference). The author has also included a Mocha test suite, and the documentation is pretty solid too.<img src="http://feeds.feedburner.com/~r/dailyjs/~4/oJ4CVNYqV4s" height="1" width="1"/>

http://dailyjs.com/2012/05/16/node-roundup

link

Stomach Contents: Structure - array

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

title

Stomach Contents: Structure - struct
value	Node Roundup: express-soap2json, cb, ApiServer

updated

2012-05-15T23: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> or <a href='http://twitter.com/dailyjs'>@dailyjs</a>. </div> <h3 id='jquery_knob'>jQuery Knob</h3> <img src='http://dailyjs.com/images/posts/jquery-knob.png' alt='jQuery Knobs' /> <a href='http://anthonyterrien.com/knob/'>jQuery Knob</a> (GitHub: <a href='https://github.com/aterrien/jQuery-Knob'>aterrien / jQuery-Knob</a>, License: MIT/GPL) by Anthony Terrien is a nice and configurable dial widget. It can be configured to exhibit a wide range of behaviours, from value range entry to an iPod clicker-style “infinite” wheel. The value that is displayed can be directly manipulated as well, and it works with scroll wheels and touchscreens. <h3 id='omniwindow'>OmniWindow</h3> <a href='http://0x000000.github.com/OmniWindow/'>OmniWindow</a> (GitHub: <a href='https://github.com/0x000000/OmniWindow'>0x000000 / OmniWindow</a>, License: MIT) by Alexander Rudenko is a fairly small modal window plugin, and the author has attempted to target it at programmers rather than designers. The documentation is good and covers the main use-cases, and despite stating that the plugin doesn’t support tonnes of options, it includes enough to keep it flexible. It’s based around events, so it can be used like this: <div class='highlight'><pre><code class='javascript'>$('div.modal').omniWindow() .trigger('show'); </code></pre> </div> And it allows class names to be overridden, in case you want to integrate it with an existing project: <div class='highlight'><pre><code class='javascript'>$('div.another-modal').omniWindow({ overlay: { selector: '.custom-overlay', // don't forget the period symbol! hideClass: 'custom-overlay-closed' }, modal: { hideClass: 'custom-modal-closed' } }); </code></pre> </div> <h3 id='bpopup'>bPopup</h3> <a href='http://dinbror.dk/bpopup/'>bPopup</a> by Bjørn Klinggaard is another modal plugin that is simply triggered by calling <code>$('element_to_pop_up').bPopup()</code>. By default it’ll reposition the popup when the browser’s size is changed. For full details on the available downloads and source code, see <a href='http://dinbror.dk/blog/bPopup/'>21.04.12: New release, bPopup version 0.7.0</a>. <h3 id='pageflipper'>Pageflipper</h3> <a href='http://wtw-software.github.com/pageflipper/'>Pageflipper</a> (GitHub: <a href='https://github.com/wtw-software/pageflipper/'>wtw-software / pageflipper</a>, License: MIT) from wtw-software uses CSS3 transitions to creative a native-feeling page sliding effect. It looks like something that would appeal to mobile web developers, but will also work with a mouse. It can also be controlled programmatically: <div class='highlight'><pre><code class='javascript'>$('#pageflipper').pageflipper('flipleft') </code></pre> </div> <h3 id='tiler'>Tiler</h3> <a href='http://borbit.github.com/tiler/'>Tiler</a> (GitHub: <a href='https://github.com/borbit/tiler/'>borbit / tiler</a>, License: MIT) by Serge Borbit is a library for working with infinite grids of tiles. This could be used to display map content, but the author has designed it with games in mind. It feels more like a standard JavaScript library than a jQuery plugin (although jQuery is a dependency), so using it requires creating an instance of a <code>Tiler</code> object: <div class='highlight'><pre><code class='javascript'>var tiler = new Tiler($('#viewport'), { tileSize: 200, sync: function(options, callback) { var tosync = options.tosync; tosync.forEach(function(tile) { var img = new Image(); var x = tile[0]; var y = tile[1]; img.onload = function() { callback([[x, y, $('<img/>').attr('src', img.src)]]); }; img.src = 'image_' + x + '_' + y + '.png'; }); } }); </code></pre> </div> QUnit tests are included.<img src="http://feeds.feedburner.com/~r/dailyjs/~4/Wg3hzmqXcEo" height="1" width="1"/>

http://dailyjs.com/2012/05/15/jquery-roundup

link

Stomach Contents: Structure - array

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

title

Stomach Contents: Structure - struct
value	jQuery Roundup: Knob, OmniWindow, bPopup, Pageflipper, Tiler

updated

2012-05-14T23:00:00Z

Stomach Contents: Structure - struct

content

Stomach Contents: Structure - array

Stomach Contents: Structure - struct

type

html

value

<h3 id='webgl_audio'>WebGL Audio</h3> <img src='http://dailyjs.com/images/posts/webglaudio-tquery.png' alt='WebGL Audio with tquery' /> WebGL experimenter Jerome Etienne has written a short tutorial entitled <a href='http://learningthreejs.com/blog/2012/05/08/sound-visualisation-vuemeter-in-webgl/'>Sound Visualisation: A Vuemeter in WebGL</a> that demonstrates an impressive, yet simple, WebGL VU meter using the Web Audio API. To make this work, he’s used his <a href='https://github.com/jeromeetienne/webaudio.js'>webaudio.js</a> library: <div class='highlight'><pre><code class='javascript'>var webaudio = new WebAudio() , sound = webaudio.createSound(); sound.load('sound.wav', function(sound) { sound.play(); }); </code></pre> </div> This library can be used alongside <a href='https://github.com/jeromeetienne/tquery'>tquery</a>. <h3 id='css_3d_earth'>CSS 3D Earth</h3> <img src='http://dailyjs.com/images/posts/css3dearth.png' alt='CSS 3D Earth' /> <a href='http://www.edankwan.com/lab/css3dEarth'>CSS 3D Earth</a> by Edan Kwan uses a JavaScript library called <a href='https://github.com/edankwan/PerspectiveTransform.js'>PerspectiveTransform</a> to display an interactive model of the Earth using shading and layers. The original class is by <a href='http://www.is-real.net/'>Israel Pastrana</a>, and the experiment is presented with a nice little <a href='http://code.google.com/p/dat-gui/'>dat.GUI</a> interface. <h3 id='net_javascript_classes'>.Net JavaScript Classes</h3> Julius Friedman sent in a project he created called <a href='http://www.codeproject.com/Tips/379704/Easy-JavaScript-Generic-List-Implementation'>Easy JavaScript Generic List Implementation</a>. Since then he’s expanded the scope and uploaded it to CodePlex: <a href='http://netjs.codeplex.com/'>.Net JavaScript Implementations</a>. The list implementation has an API that looks a lot like LINQ: <div class='highlight'><pre><code class='javascript'>function Car(make, model) { this.make = make; this.model = model; } var myList = new List(); myList.Add(new Car('Honda', 'Civic')); myList.Add(new Car('Nissan', 'Sentra')); var selList = myList.Where('make == 'Honda'').OrderByDescending('model').Distinct(); </code></pre> </div> He’s also working on a <code>Reflection</code> class as well as a pseudo type system.<img src="http://feeds.feedburner.com/~r/dailyjs/~4/qKF2faAr25Y" height="1" width="1"/>

http://dailyjs.com/2012/05/14/webgl-audio-cssearth-dotnet

link

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
href	http://feedproxy.google.com/~r/dailyjs/~3/qKF2faAr25Y/webgl-audio-cssearth-dotnet

title

Stomach Contents: Structure - struct
value	WebGL Audio, CSS 3D Earth, .Net Classes

updated

2012-05-13T23:00:00Z

Stomach Contents: Structure - struct

content

Stomach Contents: Structure - array

Stomach Contents: Structure - struct

type

html

value

<h3 id='fluent_conference'>Fluent Conference</h3> <img src='http://dailyjs.com/images/posts/fluent.png' alt='Fluent' /> <a href='http://fluentconf.com/fluent2012'>Fluent</a> will be held on May 29-31, in San Francisco. It features several tracks – one covers <a href='http://fluentconf.com/fluent2012/public/schedule/topic/830'>language issues</a> and includes a session with Brendan Eich. The <a href='http://fluentconf.com/fluent2012/public/schedule/topic/831'>browser track</a> has talks from employees of social networking favourites Twitter, Facebook, and Twitter, and even Microsoft! There’s also a track for <a href='http://fluentconf.com/fluent2012/public/schedule/topic/832'>Node sessions</a>, which has speakers from Joyent, Twitter, Groupon, and lots more interesting companies. “Early price” tickets are on sale until May 15th, and there are several tiers available: <ul> <li>All-Access Pass: $1695 (standard price: $1895)</li> <li>Conference Plus Tuesday Workshops: $1295 (standard price: $1495)</li> <li>Conference: $995 (standard price: $1195)</li> <li>Tuesday Workshops: $695 (standard price: $895)</li> </ul> There are discounts for previous O’Reilly conference attendees, company teams, academic staff, non-profits, and students. <h3 id='backbonexmpp'>Backbone.xmpp</h3> <a href='https://github.com/ggozad/Backbone.xmpp'>Backbone XMPP Pub-Sub Storage</a> (License: MIT) by Yiorgis Gozadinos is an alternative storage layer for <a href='http://documentcloud.github.com/backbone/'>Backbone.js</a> that uses <a href='http://xmpp.org/extensions/xep-0060.html'>XMPP publish-subscribe</a>. To use it, set a collection’s <code>sync</code> property to <code>Backbone.xmppSync</code>, and assign an instance of <code>PubSubStorage</code> to the collection’s <code>node</code> property: <div class='highlight'><pre><code class='javascript'>var MyCollection = Backbone.Collection.extend({ sync: Backbone.xmppSync , model: MyModel }); var mycollection = new MyCollection(); mycollection.node = new PubSubStorage('mymodels', connection); </code></pre> </div> The README has links to full documentation in the form of annotated source. <h3 id='lefunc'>leFunc</h3> <a href='https://github.com/jrf0110/leFunc'>leFunc</a> (License: MIT, npm: <a href='http://search.npmjs.org/#/leFunc'>leFunc</a>) by John Fawcett is a library that uses type checking to support function overloading in pure JavaScript: <div class='highlight'><pre><code class='javascript'>var getItems = leFunc({ 'string'; function(id) { // Do something }, 'string,object': function(id, options) { // Do something else }, 'string,object,function': function(id, options, callback) { // Do something different callback(); } }); getItems('123abc'); // Calls the first function getItems('123abc', { awesome: true }); // Calls the second function getItems('123abc', { awesome: true }, function(){}); // Calls the third function </code></pre> </div> At the moment it’ll work with any function signatures that are relatively easy to type check. That means <a href='http://dailyjs.com/2012/05/07/js101-object/'>primitive values and objects</a> will work as expected. <h3 id='frisby'>Frisby</h3> If you’re testing a lot of REST-based APIs, then <a href='http://frisbyjs.com/'>Frisby</a> (GitHub: <a href='https://github.com/vlucas/frisby'>vlucas / frisby</a>, License: BSD, npm: <a href='http://search.npmjs.org/#/frisby'>frisby</a>) by Vance Lucas might be what you’re looking for. It’s a REST API testing framework built using <a href='http://pivotal.github.com/jasmine/'>Jasmine</a>. It has a nice and friendly chainable API: <div class='highlight'><pre><code class='javascript'>var frisby = require('frisby'); frisby.create('Get Brightbit Twitter feed') .get('https://api.twitter.com/1/statuses/user_timeline.json?screen_name=brightbit') .expectStatus(200) .expectHeaderContains('content-type', 'application/json') .expectJSON('0', { place: function(val) { expect(val).toMatchOrBeNull("Oklahoma City, OK"); }, // Custom matcher callback user: { verified: false, location: "Oklahoma City, OK", url: "http://brightb.it" } }); </code></pre> </div> The project itself is also fully tested, and comes with <a href='http://frisbyjs.com/docs/api/'>API documentation</a>.<img src="http://feeds.feedburner.com/~r/dailyjs/~4/Cx7pQObG6IE" height="1" width="1"/>

http://dailyjs.com/2012/05/11/fluent-backbone-asq-lefunc

link

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
href	http://feedproxy.google.com/~r/dailyjs/~3/Cx7pQObG6IE/fluent-backbone-asq-lefunc

title

Stomach Contents: Structure - struct
value	Fluent, Backbone.xmpp, leFunc, Frisby

updated

2012-05-10T23:00:00Z

Stomach Contents: Structure - struct

content

Stomach Contents: Structure - array

Stomach Contents: Structure - struct

type

html

value

It’s time to take a look at a Windows-oriented Node module to see how it works. Before getting messy with C, C++, and all that native module stuff, let’s keep it simple by looking at something that communicates with Windows programs using Node’s streams. <img src='http://dailyjs.com/images/posts/win2/win_performance_monitor.png' alt='Windows Performance Monitor' /> <a href='http://technet.microsoft.com/en-us/library/cc749249.aspx'>Windows Performance Monitor</a> provides extremely detailed logging, featuring a wide array of counters, event trace data, and configuration information. The command-line tool, <a href='http://technet.microsoft.com/en-us/library/bb490960.aspx'>typeperf.exe</a> can write some of this data to a command window. For example, <code>typeperf "\Memory\Available bytes" "\processor(_total)\% processor time"</code> will display processor and memory counters. The output looks like this on my computer: <img src='http://dailyjs.com/images/posts/win2/typeperf.png' alt='typeperf' /> Why do I mention this? Well, the Node <a href='https://github.com/markitondemand/node-perfmon'>perfmon</a> module is a wrapper around <code>typeperf</code> that provides a <a href='http://nodejs.org/docs/latest/api/streams.html#readable_Stream'>ReadableStream</a>-based API. This is an idiomatic module that demonstrates one way of working with an existing program that comes bundled with Windows. <h3 id='the__module'>The <code>perfmon</code> Module</h3> To try it out, open a command window and make a directory: <div class='highlight'><pre><code class='text'>cd Documents\Code\ mkdir perf-example cd perf-example </code></pre> </div> Then install <code>perfmon</code>: <div class='highlight'><pre><code class='text'>npm install perfmon </code></pre> </div> Once that’s done, create a JavaScript file that uses the <code>perfmon</code> module to gather some data: <div class='highlight'><pre><code class='javascript'>var perfmon = require('perfmon'); perfmon('\\processor(_total)\\% processor time', function(err, data) { console.log(data); }); </code></pre> </div> Running it should display some logging. Press <code>ctrl-c</code> to stop it. <h3 id='child_processes'>Child Processes</h3> The author has written this by using <code>spawn</code> from the <a href='http://nodejs.org/docs/latest/api/all.html#all_child_process'>child_process</a> module. In fact, we can execute any executable using this module. Try the following script: <div class='highlight'><pre><code class='javascript'>var exec = require('child_process').exec; exec('echo %PATH%', function(err, stdout, stderr) { console.log('PATH:', stdout); }); </code></pre> </div> The output should look similar to the following screenshot, but it may vary depending on what you’ve got installed: <img src='http://dailyjs.com/images/posts/win2/path.png' alt='PATH' /> The <code>child_process</code> API is exactly the same in Unix, as we saw in the Unix and Node posts. <h3 id='portability'>Portability</h3> Does this mean Node programs are generally portable between Unix and Windows? Well, as you can see in this example, Node’s standard libraries look the same. It’s just the part that touches the operating system that may look different. In this example, the part that reads <code>echo %PATH%</code> would be different in Unix. We’ll look at other portability issues as this series progresses. For now, your homework is to find more Windows-oriented Node modules and see if you can understand the basic principles at work. The <a href='http://nodejs.org/docs/latest/api/all.html'>Node documentation</a> will be indispensable for this!<img src="http://feeds.feedburner.com/~r/dailyjs/~4/P3fByhHWU48" height="1" width="1"/>

http://dailyjs.com/2012/05/10/windows-and-node-2

link

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
href	http://feedproxy.google.com/~r/dailyjs/~3/P3fByhHWU48/windows-and-node-2

title

Stomach Contents: Structure - struct
value	Windows and Node: Windows Performance Monitor

updated

2012-05-09T23: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> or <a href='http://twitter.com/dailyjs'>@dailyjs</a>. </div> <h3 id='app_video_gallery'>App: Video Gallery</h3> <img src='http://dailyjs.com/images/posts/express-video-gallery.png' alt='Video Gallery screenshot' /> <a href='http://bits.meloncholy.com/node-video-gallery/'>Video Gallery</a> (GitHub: <a href='https://github.com/meloncholy/node-video-gallery'>meloncholy / node-video-gallery</a>, License: MIT) by Andrew Weeks is a Metro-inspired video gallery written with Express, Jade, and MySQL. It’s got JSON configuration files, separated routes, and lots of fancy front-end effects. There’s a blog post about it here: <a href='http://meloncholy.com/blog/node-js-video-gallery/'>Node.js Video Gallery</a>. <h3 id='restie'>Restie</h3> <a href='https://github.com/vdemedes/restie'>Restie</a> (License: MIT, npm: <a href='http://search.npmjs.org/#/restie'>restie</a>) by Vadim Demedes is an ORM that behaves the same in Node and browsers. Models can be declared then manipulated with the familiar <a href='http://en.wikipedia.org/wiki/Create,_read,_update_and_delete'>CRUD</a> methods, in a similar fashion to Backbone.js. <div class='highlight'><pre><code class='javascript'>var Post = Restie.define('Post'); Post.all(function(err, posts) { // GET /posts/ }); Post.find_by_id(1, function(err, post) { // DELETE /posts/1 post.remove(function(err) { // Post removed }); }); </code></pre> </div> The author has included tests that run in both browsers and Node. <h3 id='xmlliterals'>xml-literals</h3> <a href='https://github.com/laverdet/js-xml-literal'>xml-literals</a> (npm: <a href='http://search.npmjs.org/#/xml-literals'>xml-literals</a>) by Marcel Laverdet adds Node support for <a href='http://en.wikipedia.org/wiki/ECMAScript_for_XML'>E4X</a>-style XML literals: <div class='highlight'><pre><code class='text'>var anchor = <a href={href}>Hello</a>; </code></pre> </div> To mix XML and JavaScript this way, the xml-literals module has to register a file extension first, then files that contain XML literals can be loaded. The following example would make subsequent <code>require</code> calls able to load files that include XML literals: <div class='highlight'><pre><code class='javascript'>require('xml-literals').register('js'); // This file contains XML literals require('my-xml-literal-example'); </code></pre> </div> <h3 id='revised_console'>Revised Console</h3> <a href='https://github.com/tblobaum/rconsole'>Revised Console</a> (License: MIT, npm: <a href='http://search.npmjs.org/#/rconsole'>rconsole</a>) by Thomas Blobaum provides C bindings for syslog and makes the <code>console</code> methods log to syslog. This would log to <code>/var/log/messages</code> (depending on the OS): <div class='highlight'><pre><code class='javascript'>require('rconsole') console.log('hello world') </code></pre> </div> The author has included an example of using Express’ <code>express.logger</code> to log to syslog, which strikes me as potentially useful for production web apps.<img src="http://feeds.feedburner.com/~r/dailyjs/~4/i5Vb46qqxYk" height="1" width="1"/>

http://dailyjs.com/2012/05/09/node-roundup

link

Stomach Contents: Structure - array

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

title

Stomach Contents: Structure - struct
value	Node Roundup: Video Gallery, Restie, xml-literals, Revised Console

updated

2012-05-08T23: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> or <a href='http://twitter.com/dailyjs'>@dailyjs</a>. </div> <h3 id='jewel'>Jewel</h3> <a href='https://github.com/vdemedes/jewel'>Jewel</a> (License: MIT) by Vadim Demedes is an <a href='http://api.rubyonrails.org/classes/ActiveRecord/Base.html'>ActiveRecord</a>-inspired DOM query API: <div class='highlight'><pre><code class='javascript'>var Post = Jewel.define('#posts', { keys: { title: 'h1' , body: 'p' }, template: function(fields) { return '<div class="post"><h1>' + fields.title + '</h1>' + fields.body + '</div>'; } }); // Get all of the posts var posts = Post.all; // Create a new post var post = new Post(); post.title = 'Latest post'; post.body = 'Latest content'; post.save(); // Will be prepended to #posts </code></pre> </div> It actually combines templating and querying, which seems to work quite well. The author has included some Mocha unit tests, and he’s tested it in everything except IE. <h3 id='custom_drag_and_drop_with_mouse'>Custom Drag and Drop with Mouse</h3> <a href='http://www.solitr.com/blog/2012/05/roll-your-own-drag-and-drop-handling-with-jquery-ui/'>Roll your own drag-and-drop handling, with help from jQuery UI</a> by Jo Liss is a tutorial that explains how to build customised drag-and-drop interfaces using the <a href='https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.mouse.js'>jQuery UI Mouse</a> widget. It’s interesting because I’ve struggled to get <a href='http://jqueryui.com/demos/draggable/'>Draggable</a> to do what I wanted in more complex or unique situations, and building on Mouse seems to offer the flexibility some projects demand. <h3 id='touchtouch'>TouchTouch</h3> <img src='http://dailyjs.com/images/posts/touchtouch.png' alt='TouchTouch' /> <a href='http://tutorialzine.com/2012/04/mobile-touch-gallery/'>TouchTouch</a> (GitHub: <a href='https://github.com/martinaglv/touchTouch/'>martinaglv / touchTouch</a>, License: MIT, <a href='http://demo.tutorialzine.com/2012/04/mobile-touch-gallery/'>Demo</a> by Martin Angelov is an image gallery that’s also touchscreen-friendly. It features a responsive interface with CSS3 animations and gestures like swiping. All it needs is a list of images with links: <code>$('#thumbs a').touchTouch();</code> <h3 id='betterexamplesjs'>BetterExamples.js</h3> <a href='http://willemmulder.github.com/BetterExamples.js/'>BetterExamples.js</a> (GitHub: <a href='https://github.com/willemmulder/BetterExamples.js'>willemmulder / BetterExamples.js</a>, License: CC BY-SA 3.0) by Willem Mulder is an attempt to make JavaScript code examples more interactive. It’ll display both logging and errors, next to the code that generated them. This is something that I’d like to succeed because even with great tools like <a href='http://jsfiddle.net/'>jsFiddle</a> I feel like it’s still difficult to create easy to follow interactive code examples.<img src="http://feeds.feedburner.com/~r/dailyjs/~4/MjjCp5DxYVA" height="1" width="1"/>

http://dailyjs.com/2012/05/08/jquery-roundup

link

Stomach Contents: Structure - array

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

title

Stomach Contents: Structure - struct
value	jQuery Roundup: Jewel, Custom Drag and Drop, TouchTouch, BetterExamples.js

updated

2012-05-07T23:00:00Z

Stomach Contents: Structure - struct

content

Stomach Contents: Structure - array

Stomach Contents: Structure - struct

type

html

value

<h3 id='back_to_basics'>Back to Basics</h3> When people talk to me about DailyJS they often ask for more beginner’s articles. Therefore, we’re starting the JS101 series on DailyJS. These are intended to be short guides on fundamental topics that shouldn’t take more than about 10 minutes to read. I really believe learning JavaScript comes down to understanding <code>Object</code>, so what better place to start? <h3 id='types_of_values'>Types of Values</h3> In JavaScript, the humble <code>Object</code> underlies many of the language’s strengths. To understand JavaScript objects, let’s consider what types of values we have at our disposal. Take a look at the following example: <div class='highlight'><pre><code class='javascript'>var one = 1 , oneObject = new Number(1); log(one === oneObject); log(typeof(one), typeof(oneObject)); </code></pre> </div> I’ve made an interactive version of this example that you can experiment with here: <a href='http://jsfiddle.net/uWup3/'>http://jsfiddle.net/uWup3/</a>. This uses the strict equals operator to compare the value <code>1</code> with the object <code>new Number(1)</code>, and <code>false</code> is returned. The reason for this is <code>1</code> is a <a href='http://es5.github.com/#x4.3.2'>primitive value</a>, and is not an object. The number created with <code>new Number</code> is an object, as shown by the value returned by <code>typeof</code>. There are other primitive values: Undefined, Null, Boolean, Number, and String. Another interesting point relates to <code>Undefined</code> and how it’s a type whose sole value is <code>undefined</code>. <h3 id='creating_objects'>Creating Objects</h3> When working in JavaScript, we mostly concern ourselves with objects. There’s a reason why JSON is so popular and powerful, and it comes down to the flexibility of objects. The main difference between objects and primitive values is objects are clearly comprised of multiple items: <div class='highlight'><pre><code class='javascript'>var javascript = { influences: ['C', 'Java', 'Scheme'] , designer: 'Brendan Eich' , created: new Date(1995, 0, 1) }; </code></pre> </div> The ‘items’ in this object – <code>influences</code>, <code>designer</code>, and <code>created</code> – are known as properties. While it’s difficult to imagine breaking down <code>10</code> or <code>true</code> into their constituent parts, this object can easily be broken down. Notice how each value can be a different type – both primitive values and objects can be combined together in an object. Now consider this: <div class='highlight'><pre><code class='javascript'>var javascript = new Object({ influences: ['C', 'Java', 'Scheme'] , designer: 'Brendan Eich' , created: new Date(1995, 0, 1) }); </code></pre> </div> I’ve used <code>new Object</code> to create a new instance. According to the language specification, under <a href='http://es5.github.com/#x11.1.5'>Object Initialiser</a>, these forms are equivalent – creating objects with an object literal will return a new object as if <code>new Object()</code> was used. Similarly, the array literal <code>['C', 'Java', 'Scheme']</code> will create a new object as if <code>new Array()</code> had been called. The important thing to notice is the use of a constructor. In this case the constructor is <code>new Object</code>, but there are other built-in constructors. I also sneaked in <code>new Date</code> which creates a <code>Date</code> object. <h3 id='constructors'>Constructors</h3> The previous example looks more like a data record than a reusable piece of code. We can make it more reusable by creating a constructor – a function that knows how to initialise a certain flavour of object. <div class='highlight'><pre><code class='javascript'>function Language(designer, created, influences) { this.designer = designer; this.created = created; this.influences = influences; } var javascript = new Language( 'Brendan Eich' , new Date(1995, 0, 1) , ['C', 'Java', 'Scheme'] ); </code></pre> </div> Now I can make other programming languages: <div class='highlight'><pre><code class='javascript'>var c = new Language( 'Dennis Ritchie' , new Date(1972, 0, 1) , ['B', 'ALGOL'] ); </code></pre> </div> The constructor can be accessed using the <code>constructor</code> property, like this: <code>c.constructor</code>. In this case it’ll return <code>Language</code>. Play around with it here: <a href='http://jsfiddle.net/zYzER/6/'>http://jsfiddle.net/zYzER/6/</a>. In the ES5 specification under <a href='http://es5.github.com/#x15.2.4'>Properties of the Object Prototype Object</a>, other properties of objects are mentioned. For example, we also get <code>toString</code>, and some stranger sounding methods like <code>hasOwnProperty</code>. <h3 id='next'>Next</h3> I’m going to continue this series of back to basics JavaScript each Monday. Think of it as learning JavaScript in bite-sized chunks. Next week I’ll talk about prototypes.<img src="http://feeds.feedburner.com/~r/dailyjs/~4/z4XXFnvceVI" height="1" width="1"/>

http://dailyjs.com/2012/05/07/js101-object

link

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
href	http://feedproxy.google.com/~r/dailyjs/~3/z4XXFnvceVI/js101-object

title

Stomach Contents: Structure - struct
value	JS101: Primitive Values and Objects

updated

2012-05-06T23:00:00Z

Stomach Contents: Structure - struct

content

Stomach Contents: Structure - array

Stomach Contents: Structure - struct

type

html

value

<h3 id='webgl_gta'>WebGL GTA</h3> <img src='http://dailyjs.com/images/posts/gta-webgl.png' alt='WebGL GTA' /> <a href='http://experiments.hertzen.com/webgl-gta/index.html'>WebGL GTA</a> (GitHub: <a href='https://github.com/niklasvh/WebGL-GTA'>niklasvh / WebGL-GTA</a>, <a href='http://niklasvh.github.com/WebGL-GTA/'>Demo</a>) by Niklas von Hertzen is a WebGL interpretation of the original Grand Theft Auto. It parses the game files and builds maps and game objects, all rendered with glorious WebGL. There are a few glitches, but it’s amazing how much the author has done while keeping the code relatively easy to follow. <h3 id='3d_pong'>3D Pong</h3> In <a href='http://learningthreejs.com/blog/2012/05/02/augmented-reality-3d-pong/'>Augmented Reality 3D Pong</a> by Jerome Etienne, a version of Pong is presented that works using a gesture-based interface. There’s a detailed screencast that explains the code here: <a href='http://www.youtube.com/watch?v=iunNd5lmAVE'>Augmented Reality 3D Pong Live Coding Screencast</a>. The actual code is here: <a href='https://github.com/jeromeetienne/augmentedgesture.js/tree/master/examples/augmentedpong'>jeromeetienne / augmentedgesture.js</a> – take a look at the <a href='https://github.com/jeromeetienne/augmentedgesture.js/blob/master/examples/augmentedpong/index.html'>index.html</a> file to see the non-library part of the project. <h3 id='webgltextureutils'>webgl-texture-utils</h3> <a href='https://github.com/toji/webgl-texture-utils'>webgl-texture-utils</a> by Brandon Jones (the author of <a href='http://blog.tojicode.com/'>TojiCode</a>) is a set of WebGL texture libraries that can help with loading compressed formats. The file format is inferred by the file extension, but can also be overridden. It also includes support for the <a href='http://code.google.com/p/crunch/'>crunch</a> format: <blockquote> And yes, it does support DDS. The full list of supported formats is currently JPG, PNG, GIF, BMP, DDS, CRN (Crunch), and some TGAs. I don’t actually advocate using TGAs in your WebGL apps, but I had the code available so why not? </blockquote><img src="http://feeds.feedburner.com/~r/dailyjs/~4/pxIn4Uso4n8" height="1" width="1"/>

http://dailyjs.com/2012/05/04/gta-pong-textures

link

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
href	http://feedproxy.google.com/~r/dailyjs/~3/pxIn4Uso4n8/gta-pong-textures

title

Stomach Contents: Structure - struct
value	WebGL GTA, 3D Pong, webgl-texture-utils

updated

2012-05-03T23:00:00Z

Stomach Contents: Structure - struct

content

Stomach Contents: Structure - array

Stomach Contents: Structure - struct

type

html

value

I enjoyed writing the <a href='http://dailyjs.com/tags.html#unix'>Unix and Node</a> tutorials over the past few months, and I hope they got people thinking about creating Node programs that behave like first-class Unix citizens. Since last June, when <a href='http://blog.nodejs.org/2011/06/23/porting-node-to-windows-with-microsoft%E2%80%99s-help/'>Microsoft partnered with Joyent to port Node to Windows</a>, Node has gone from strength to strength on Microsoft’s ubiquitous OS. I thought it was only fair to give Windows the same treatment. In Windows and Node, we’ll take a look at Windows-centric Node development. In the first part, we’ll install Node (which now includes npm), take a look at the basics, then make a little <a href='http://expressjs.com/'>Express</a> web application to prove it’s generally portable with existing Node modules. <h3 id='installation'>Installation</h3> <a href='/images/posts/win1/win_1_stock_windows.png'><img src='http://dailyjs.com/images/posts/win1/thumbs/win_1_stock_windows_thumb.png' alt='My Windows desktop' /></a> I’m running a pretty standard installation of Windows 7 Home Professional. I’ve got a few things I like installed (Steam, Putty, Chrome, Vim, Dropbox), but nothing specifically related to development. That means there’s no compilers, Cygwin, or Visual Studio. <a href='/images/posts/win1/win_2_node_download.png'><img src='http://dailyjs.com/images/posts/win1/thumbs/win_2_node_download_thumb.png' alt='Downloading Nodes Windows installer' /></a> To download Node, go to <a href='http://nodejs.org/'>nodejs.org</a>, click “Download”, and click “Windows Installer”. This will give you a Windows Installer (MSI) file that will install Node and npm. <a href='/images/posts/win1/win_3_node_installer.png'><img src='http://dailyjs.com/images/posts/win1/thumbs/win_3_node_installer_thumb.png' alt='Running the Node Windows installer' /></a> Running the Windows installer will show a wizard, it’s pretty easy to follow. It’s just like installing any other Windows program – the Node binaries will end up in <code>C:\Program Files (x86)\nodejs\</code>, and will be accessible from <code>cmd.exe</code>. <a href='/images/posts/win1/win_4_cmd.png'><img src='http://dailyjs.com/images/posts/win1/thumbs/win_4_cmd_thumb.png' alt='Running Node' /></a> <h3 id='running_node_and_npm'>Running Node and npm</h3> To run Node, open a Command Prompt and type <code>node</code>. This will load the standard Node REPL where JavaScript can be evaluated. Here I’ve opened my <code>win.ini</code> using Node’s <code>fs</code> module: <a href='/images/posts/win1/win_5_cmd_node_readfile.png'><img src='http://dailyjs.com/images/posts/win1/thumbs/win_5_cmd_node_readfile_thumb.png' alt='Evaluating JavaScript' /></a> If you want to exit the REPL, I noticed that <code>ctrl-d</code> works (just like Unix!) Similarly, <code>npm</code> can be run. The first time I used it to search for something, it took a few minutes to download the index first: <a href='/images/posts/win1/win_6_cmd_node_npm.png'><img src='http://dailyjs.com/images/posts/win1/thumbs/win_6_cmd_node_npm_thumb.png' alt='Using npm' /></a> <h3 id='getting_help'>Getting Help</h3> When I’m working in Unix, I often find myself reading npm’s <code>man</code> pages. Windows doesn’t have <code>man</code>, so instead npm will open a browser and display HTML versions of its standard help files. <a href='/images/posts/win1/win_7_cmd_node_npm_help_json.png'><img src='http://dailyjs.com/images/posts/win1/thumbs/win_7_cmd_node_npm_help_json_thumb.png' alt='Getting help' /></a> The first time I tried this an error was displayed. However, there’s a <a href='https://github.com/isaacs/npm/issues/2405'>bug report</a> where fixes for the problem are discussed, and Isaac Schlueter stated that the problem will be fixed in Node 0.6.17. <h3 id='hello_world_from_express'>Hello World from Express</h3> Now that we’ve got Node and npm working it shouldn’t take too much work to get a little project started. Make a new directory somewhere and open your favourite editor. I’m using Vim, but you can use <a href='http://notepad-plus-plus.org/'>one of the many freely available editors for Windows</a>. Create a file called <code>package.json</code>: <div class='highlight'><pre><code class='javascript'>{ "name": "hello" , "version": "0.0.1" , "dependencies": { "express": "latest" } } </code></pre> </div> Then change directory to the location of your project in Command Prompt, and run <code>npm install</code> to install Express: <div class='highlight'><pre><code class='text'>cd Documents\Code\hello npm install </code></pre> </div> <a href='/images/posts/win1/win_8_cmd_node_npm_install.png'><img src='http://dailyjs.com/images/posts/win1/thumbs/win_8_cmd_node_npm_install_thumb.png' alt='Installing packages with npm' /></a> Make a file that contains a simple Express app, I called mine <code>index.js</code>: <div class='highlight'><pre><code class='javascript'>var express = require('express') , app = express.createServer(); app.get('/', function(req, res) { res.send('hello world'); }); app.listen(3000) </code></pre> </div> Then run it with <code>node index.js</code> and visit <code>http://localhost:3000/</code> in a browser. I got a firewall warning when I did this, but it was fairly self-explanatory: <a href='/images/posts/win1/win_9_cmd_node_firewall_warning.png'><img src='http://dailyjs.com/images/posts/win1/thumbs/win_9_cmd_node_firewall_warning_thumb.png' alt='Windows Security Alert' /></a> <h3 id='conclusion'>Conclusion</h3> On a standard consumer-grade version of Windows 7, Node can be installed and programs can be written without installing anything else. Building modules that require C/C++ compilation is a little bit more work, but community-favourite Express can be installed without any hassle. In the coming weeks I hope to look at more detailed Windows-related issues, and working with Node and Microsoft technologies like <a href='www.windowsazure.com'>Windows Azure</a>. I bought a Windows 7 license specifically to write this series, so I’m going to get my money’s worth!<img src="http://feeds.feedburner.com/~r/dailyjs/~4/SRNxWeiEeh8" height="1" width="1"/>

http://dailyjs.com/2012/05/03/windows-and-node-1

link

Stomach Contents: Structure - array

Stomach Contents: Structure - struct
href	http://feedproxy.google.com/~r/dailyjs/~3/SRNxWeiEeh8/windows-and-node-1

title

Stomach Contents: Structure - struct
value	Windows and Node: Getting Started

updated

2012-05-02T23: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

2012-05-16T14:32:36Z

version

atom_1.0

dailyjs

null

Node Roundup: express-soap2json, cb, ApiServer: You can send in your Node projects for review through our conta... http://t.co/nMRrB04o@dailyjs

Alex Young npm...

Alex Young

dailyjs