I gave a talk at the Auckland JS Meetup and I thought I’d put some links for some additional info.
For writing command line apps with Node.js
Using Titanium Studio with node.js
Extra credit
Hope this info helps someone and if you have any questions hit me up on twitter or email me kevin @ kevinisom.info
I am a big huge fan of the YUI Framework. Now YUI is full of awesomeness. One of the most awesome widgets is the Overlay and that’s what this post is all about.
One of the foundations of YUI is the Widget class, and the Overlay extends the Widget. In fact the Overlay is only one line of JavaScript. In fact that one line starts to show off some of the awesomeness of YUI and how you can use YUI to compose useful controls without having to have thousands of lines of code.
This first JSFiddle below shows an overlay being constructed and it’s contents filled by the srcNode, it’s width set to 300px, and render being set to true tells YUI to render it into the dom.
Now I’m sure you’re thinking that’s not very interesting. And it’s not, however by setting a few additional properties and applying some additional css hopefully I can show just how useful it can be.
In this example the overlay uses the centered and constrain attributes to show over the div simulating an ajax request while the content is swapped out. The centered attribute centers the widget in the viewport, or if a Node is passed (as in this instance) in, it will be centered to that node. The constrain attribute sets the node to constrain the widget’s bounding box to.
Lastly using the plugin functionality that YUI exposes adds animation for showing and hiding the overlay. The Animation Plugin example shows how something like that is made.
In this sample by setting the align property and some css (inspired by this blog post on it) you can achieve some nice looking (well relative in this example, the colors are a little rough) tooltip with very little code. A much easier to manage option instead of bringing in a library you have no control over just for tool tips.
The align attribute is used to align a reference point on the widget, with the reference point on another Node, or the viewport. The attribute takes a node as the first argument followed by an array of points. The WidgetPositionAlign class has constants defined for this.
The YUI Gallery has some great plugins for the overlay.
I hope this has helped show how useful and versatile the overlay control is. As I mentioned when I started, I think the Overlay is a great example of just how powerful YUI is. After all the overlay is 1 line of code
Y.Overlay = Y.Base.create("overlay", Y.Widget, [Y.WidgetStdMod, Y.WidgetPosition, Y.WidgetStack, Y.WidgetPositionAlign, Y.WidgetPositionConstrain]);
That’s it, simply mixing in a number of different small classes you can get a lot of functionality
IE6 users don’t deserve to use the internet.
Die IE6 DIE!
Your browser sucks.
Nobody users the internet with JavaScript turned off.
All things I’ve said or heard. But sometimes you can’t shut the door to ie6 or any fringe browser. But that doesn’t mean you have to give ever browser the exact same experience. Besides, what about users that have JavaScript turned off? Or use a screen reader? Can you say no to paying customers? Maybe you can, but not everyone has that luxury.
All Browsers can be supported, that doesn’t mean that they have to be supported in the same way. For instance, you have some boxes that by design should have rounded corners, and a drop shadow. Now that’s easy in a modern browser that doesn’t suck. But to get that in older browsers requires more divs, more images, more work and more importantly the solution adds to the burden of older browsers with slower rendering engines and slower javascript engines.
So that’s it. Don’t make those older browsers work hard. If you want to have a form popup in an overlay, allow a user to fill in the details, submit it to the site, have the overlay fade away and then update any relevant page elements with data from a callback. That’s a lot of work for those older slower browsers. Not only is it a lot of work for the browser, the further you have to go back the more work it is for the developer. However have the default behavior actually take a user to a page that has the form in it, have the form then post to the server, and then redirect the browser back to the default page and have the server render the updated html.
Now that may sound like a lot of work, but really, more than likely it is. Most script libraries that do that sort of thing already let’s you structure your markup that way. This way you have handled both the older browser as well as the scriptless browser, and as long as you followed accessibility guidelines you should be sorted with screen readers fairly well too.
The key thing is to not try to be a hero and spend hundreds of hours making a web application that looks and works right in all the browsers (unless you turn off JavaScript) and as always, communicate with the stakeholders about how much work is required for either option and the pitfalls of each.
Some resources
With all of the progress on getting node.js to run on windows people may want to start writing complex apps with it. Well at least apps that use more than what’s shipped with it. Now on Linux or OS X that means using npm. Unfortunately npm is still a long way off for windows by the looks of things (it currently uses symlinks and Windows XP doesn’t have symlinks) but you can still use all of those packages at npmjs.org it just means more work.
First find a package you will want to use. In this case I want to write a new web app with express.js. Express.js is a web framework for node and is similar to sinatra for ruby. You can use the search functionality available on the npm site to find the express package. You will see the description, version, dependencies, repository, and node engines listed. Take note of the dependencies, you will have to repeat these steps for all the dependencies. Download the latest tgz file (at the time I’m writing this, it’s 2.4.6) Unpack the file and rename the folder from package to express. Repeat that for connect, qs, and mime, as well as jade (or any other template engine you want to use.
After downloading and renaming all the packages, copy them to a folder called node_modules in your project. You will want to make sure you add the folder to your ignore list for your version control. Unless you’re going to deploy to a windows machine with IISNode as solutions like Heroku and Nodester will install your dependencies for you.
Finally you will want to create a package.json and list your dependencies so when you deploy or someone wants to use your app they can use npm to install the dependencies and run your app.
So you should end up with a project directory that looks something like this
root
|—node_modules
| |—connect
| |—express
| |—jade
| |—mime
| |—qs
|—public
|—views
|—app.js
|—package.json
Hopefully this all makes sense, and here’s hoping that npm will be coming to windows in the near future. So get going and write some node apps.
My experience using Eclipse on OS X tends to be, keystroke, keystroke, rainbow wheel of doom, keystroke, keystroke, rainbow wheel of doom. Keystroke, rainbow wheel of doom, curse close Eclipse, open Textmate.
I find it funny that AngryBirds was shown off at Google IO, made with GWT and runs so much better in IE 9 than Chrome
That is beyond awesome. I want one “@Pete_Brown: Zombie Garden Gnome. http://t.co/UjHPCVN”
At swimming with Ms 7 and Ms 8. Amazing to think how they’ve improved. Don’t understand people that don’t make their kids learn
This is awesome! Create your CSS3 Code via a Photoshop-like Layer-Style-Box.
http://t.co/uPaV562
//cc @smashingmag
– Oliver (mywayhome) http://twitter.com/mywayhome/status/68197847920685058
RT @github_csharp: Nancy - A Sinatra inspired web framework for the .NET platform. Be sure to checkout the Wiki for http://bit.ly/kfi1eH