I've put together an annotated JSHint configuration file. This is mostly just a text formatted cut and paste of the documentation on the website (DRY shudder) in a format suitable for use with node-jshint. I find it handy to have it all in one place when setting up new node projects. You can grab the config from:
Inspired by discussion at the Code & Cocktails meetup last month I released the alpha version of Cardecademy last night.
Last night my colleague Tim Walling and I gave a a talk the Node.js in the wild Meetup on Sharing Code Between Node.js Applications. This was based on our experiences growing a code base to support the backend for RumbleTV Baseball and RumbleTV Football. I've posted the slides with notes. Happy to answer any questions.
JavaScript Patterns by Stoyan Stefanov
My rating: 3 of 5 stars
A grab bag of practices and techniques for JavaScript development for the core language and some browser specific concerns. The Essentials, Literals and Constructors, Functions, Object Creation Patterns, and Code Reuse Patterns chapters mostly rehash material from "JavaScript: The Good Parts". The author provides additional exposition on the concepts but doesn't introduce much new material. The Design Patterns chapter includes some good examples of JavaScript implementations but accurately points out many already exist in third party libraries. The DOM and Browser Patterns chapter provides a brief introduction to browser specific concepts and concerns but you'll want to consult the referenced books for more detailed discussions. This book is a great primer for JavaScript development due to the breadth of topics is covers but is worth a pass if you've already read other JavaScript books covering these topics.
View all my reviews
Yesterday I found myself playing with a configuration hierarchy. Anything set in the environment would override anything defined by a defaults.json file which would override anything hardcoded into the application. My initial attempt led me to discover some interesting things about node's process.env object. Without further ado:
console.log(process.env.hasOwnProperty('PROPERTY_NAME'));
Any guesses what the output will be?
With node 0.6.10 I get:
TypeError: Property 'hasOwnProperty' of object #<error> is not a function
Not what I was expecting. What about a different test:
console.log('hasOwnProperty' in process.env); // output -> true console.log(process.env.hasOwnProperty); // output -> undefined
Fun. I've not look at the node source but given that the environment could define a property called hasOwnProperty it makes sense that process.env masks the standard prototype model even if the in operator exposes it.
Besides being a fun exercise playing with node, why does this matter you might ask? What started this all was detecting if an environment variable existed but was set to the empty string. The standard if check fails:
// This simulates launching node like: EMPTY= node env.js process.env.EMPTY = ''; if (process.env['EMPTY']) { console.log('EXISTS'); } else { console.log('DOES NOT EXIST'); } // output -> DOES NOT EXIST
Since the empty string is falsy in JavaScript this doesn't work. As we saw above doing a hasOwnProperty check won't work and the in operator could give false positives.
Thinking outside the box, given that the source of the values in process.env is the environment node was launched from, we know that the environment can't set a property value to be undefined. The simple existence check then is to see if the value is undefined:
console.log(typeof process.env['EMPTY'] !== 'undefined');
Or just use underscore's isUndefined method since you should be using that library anyway.
UPADTE
Just because we can't call hasOwnProperty() directly on process.env doesn't mean we can't still use it. Instead we just need to call it indirectly:
console.log(Object.prototype.hasOwnProperty.call(process.env, 'EMPTY')); // output -> false process.env.EMPTY = undefined; console.log(Object.prototype.hasOwnProperty.call(process.env, 'EMPTY')); // output -> true process.env.EMPTY = ''; console.log(Object.prototype.hasOwnProperty.call(process.env, 'EMPTY')); // output -> true
JavaScript: The Good Parts by Douglas Crockford
My rating: 4 of 5 stars
An appropriately opinionated exploration of JavaScript. The exhaustive diagraming of the language syntax and common methods can be skipped by those who have used the language before. The observations in the chapters on Functions (4), Inheritance (5), Style (9), and lists of gotchas in appendices Awful Parts (A) and Bad Parts (B) make this a must read for anyone developing with JavaScript. The author has a very strong point of view that is presented throughout the book, but I found warranted given the number of ways on can unintentionally harm yourself in JavaScript.
View all my reviews
Kevin Hoyt gave a talk about how to use the AIR SDK to develop an AIR application using HTML and JavaScript.
The AIR SDK includes:
Binaries:
adl: Launcher for AIR applications
adt: Packager for AIR applications
Frameworks:
AIR Aliases: shortcuts for HTML development
Service Monitor: ability to detect if you are online or offline
Application descriptor template, code samples, and badge packager and source are also included. Currently 4 clicks to install and launch an application from a website using the badge process.
HTML Main Application:
He created a standard HTML file and saved it as index.html (not a requirement to be named index.html).
From a terminal running the adl command with -help will give you information on the command line syntax. Besides launching your application, adl can also pass command line arguments into your application.
He created an application descriptor from the template. Import difference from the Flex example was to set the rootContent to index.html. Descriptor also supports fileTypes which lets you associate a file extension with your application.
WebKit will include CSS3 support.
DreamWeaver has extensions that suppy AIR capabilities. Can launch applications and edit descriptors from within DreamWeaver.
He added an HTML text form field and button. Created an event listener which is registered as part of a body onLoad function. The first version of the event listener function popped up an alert to test that everything was working. Next he pulled the text form value out and saved it to disk.
In JavaScript, the rough code is:
var file = window.runtime.flash.filesystem.File.desktopDirectory.resolve('boston.txt'); // If you include AIRAliases.js this can be shortened to var file = air.File.desktopDirectory.resolve('boston.txt'); // Now that we have a file reference: var stream = new air.FileStream(); stream.open(file, air.FileMode.WRITE); stream.writeMultiByte("text", air.File.systemCharset); stream.close();
The AIR API also has support to read and write in an asynchronous mode using events.
Aptana: Open Source Eclipse IDE for JavaScript/HTML development and debugging. Includes built in support to run and package AIR applications. Best part is the sample applications that come bundled with it. Meebo directory includes custom HTML chrome application example.
Kevin Hoyt is back with a second talk about how to integrate ActionScript with JavaScript within a single AIR application. Currently on the web you have an HTML page and throw in an embed to display some video, but it is a black box. Likewise a Flash application is mostly not interacting with HTML at all. Script bridging is the magic that makes it all possible.
He showed a simple Flex application with a location field that loads and displays an HTML page within AIR. Currently AIR can't display Flash embedded in an HTML page that it is rendering. That should be supported in a later beta.
AIR has a Flex tag called
<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:TextInput id="input" enter="web.location = input.text;"/> <mx:HTML id="web" width="100%" height="100%"/> </mx:WindowedApplication>
In ActionScript you have full access to the HTML object and through it access to all JavaScript like functions such as getElementById. To read an HTML value in ActionScript:
// Read an HTML text field var name:Object = web.javaScriptDocument.getElementById('txtName').value; // Update an HTML text field web.javaScriptDocument.getElementById('txtName').value = "text";
Data comes back as a JavaScript String, which doesn't map directly to an ActionScript String. The returned value should be stored as an Object. He didn't mention about gotchas when going in the other direction.
Next he showed how to use native drag and drop. The example took a desktop image and droped it on the Flex application. NativeDragEvent and friends let you handle the drag and drop. Once the Flex application got the image, it introspected the HTML and replaced all images in the rendered web page with the dropped in image.
The next example showed how JavaScript can leverage and manipulate ActionScript. JavaScript developers should consult the Flex 3 SDK documentation to know what is available and what packages the classes are in.
The application's back story is about wanting to display the user's version of an icon for a specific file extension. Showing a sample from the core in the Aptana (source available) that knows how to determine and show the custom icons. OS returns an Array of different icons. The example uses PNGEncoder in ActionScript to render the information. HTML can include ActionScript libraries by specifying the SWF as the script source.
<script src="library.swf"></script>
The last example was showing that HTML rendered in AIR can be manipulated by Flash. It loaded a simple HTML page and then applied Flash filters to various divs. Really cool capability. No source shown.
The last session was a collection of quick demos from the speakers and audience members. My apologies in advance if I missed your contact information.
Todd Prekaski (audience): Demoed a photo album builder application. Allows pulling in pictures from the local file system. Has some integration with Flickr and zoomr (wasn't completely clear on what that functionality was). Has random photo placement mode for viewing a collection of pictures. Has ability to email collection to contacts. Hopes to add online synchronization to pull down additional image presentation components (stylized borders, filters, etc.). Tool also supports photo resizing, rotation, and other simple effects.
Daniel Dura: TwitterAIRCamp is a way to do a nice public presentation of Twitter data. If you want to get in on the fun onairbustour is the Twitter name.
Salsa created by Christian Cantrell. Application that does drag and drop file uploading/downloading to Amazon S3.
Johnny Boursiquot (audience) from Pier: Business value calculator being used by companies like HP. Goal is to make sales people mobile and allow offline ROI value calculations. It uses Flex charts, graphs, and HTML output (will switch to PDF when supported). Took approach of what is the business value of AIR. Primary reasons for going with the platform included: way to extend backend service onto the desktop, easy to update, and online integration allows robust security model.
Kevin Hoyt demoed some more applications from Adobe labs. He created an AIR version of MapCache. Allows saving maps, copy to clipboard, and drag and drop. Rendering an HTML version. Mentioned source is on his site.
Geocode allowing geo tagging an image by dragging it onto the map. Still working on this application. Again an HTML/JavaScript application. It handles such activities as copying images, extracting thumbnails, and displaying the images in the UI. Makes heavy use of asynchronous events to do it on the fly without hanging the UI.
Kevin also ported a version of Ted Patrick's AIR Chat to HTML/JavaScript. The application uses Amazon EC2, running Python socket server, to provide simple chat services. The port uses the Ext JS Framework. HTML version is not posted yet.
Mike Chambers: Is a World of Warcraft player and uses Wowhead to track game information. Wrote an AIR wrapper around Wowhead. It is an always on top window that allows typing in a search term and launching the results in a browser window.
Hubble: Geo tagging image uploader for Flickr. Shows where images are located on the map. Nice UI to geo tag and upload. Can drag image onto map to tag it with drop location. He mentioned that the application is fairly buggy right now.
GeoPlotter: Show a Yahoo map and you can plot any latitude longitude pair on the map. Supports ability to drag a data file of way points and plot them all on the map. Most of his code is on Google code.
Ascension: One of the first AIR applications. It is an MP3 player and way to explore your music. Supports importing your music from iTunes, grabbing album art of Amazon, and displaying lyrics from lyricwiki. Has ability to display a slide show of images from Flickr that match the artist's name.