Kevin Isom

Auckland JS Follow Up

Fri, 10 Feb 2012 16:19:41 +1300

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

Nodeobjc sample

Hope this info helps someone and if you have any questions hit me up on twitter or email me kevin @ kevinisom.info

Getting to know the YUI 3 Overlay

Wed, 05 Oct 2011 23:37:00 +1300

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.

YUI Widgets

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.

Setting up an Overlay.

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.

Next Steps

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.

For Tooltips

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.

Extending from the Gallery

The YUI Gallery has some great plugins for the overlay.

In Conclusion

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

No Browser Left Behind

Thu, 01 Sep 2011 00:02:04 +1200

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

Understanding Progressive Enhancement at A List Apart.
ARIA and Progressive Enhancement at A List Apart
Accessible Forms at The Web Standards Project
Creating Accessible HTML at the Deaf Resource Library

NPM Packages on Windows

Mon, 29 Aug 2011 12:57:00 +1200

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.

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,...

Tue, 16 Aug 2011 18:57:46 +1200

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...

Sun, 15 May 2011 19:26:11 +1200

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”

Fri, 13 May 2011 21:27:03 +1200

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...

Thu, 12 May 2011 03:33:03 +1200

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

Layer Styles

Wed, 11 May 2011 23:56:37 +1200

Layer Styles:

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...

Wed, 11 May 2011 10:37:03 +1200

RT @github_csharp: Nancy - A Sinatra inspired web framework for the .NET platform. Be sure to checkout the Wiki for http://bit.ly/kfi1eH

NancyFx/Nancy - GitHub

Wed, 11 May 2011 06:32:31 +1200

NancyFx/Nancy - GitHub:

RT @github_csharp: Nancy - A Sinatra inspired web framework for the .NET platform. Be sure to checkout the Wiki for http://bit.ly/kfi1eH

window.postMessage - MDC Docs

Tue, 10 May 2011 08:47:59 +1200

window.postMessage - MDC Docs

Damn it, why is there no way to turn off the iTunes thinks it knows better than you bs? No I...

Mon, 09 May 2011 19:47:15 +1200

Damn it, why is there no way to turn off the iTunes thinks it knows better than you bs? No I don’t want to unsubscribe from that podcast.

A simple, small, and powerful CSS Grid System — Gist

Mon, 09 May 2011 16:28:22 +1200

A simple, small, and powerful CSS Grid System — Gist:

RT @ericf: A small, simple, CSS Grid “framework” http://t.co/zwRKPPi

THE SCIENCE OF COPYWRITING FOR STARTUPS for FREE ($99 value)

Sun, 08 May 2011 22:15:05 +1200

THE SCIENCE OF COPYWRITING FOR STARTUPS for FREE ($99 value):

I just got @AppSumo Science of Copywriting Action Video for FREE. Today only: http://appsumo.com/tweet/161/

RT @keithbrown42: @pluralsight submits a WP7 player with our .NET training courses, and MS fails us...

Sun, 08 May 2011 09:12:50 +1200

RT @keithbrown42: @pluralsight submits a WP7 player with our .NET training courses, and MS fails us because “.NET” is trademarked. #real …

Harald Welte's blog

Sun, 08 May 2011 05:40:12 +1200

Harald Welte's blog:

RT @asadotzler: Isn’t this a kind of theft by Apple? You can’t simply ignore license requirements of third party code in your products h …

Sinon.JS 1.1.0 out now / Sinon.JS - cjohansen.no

Sat, 07 May 2011 10:45:06 +1200

Sinon.JS 1.1.0 out now / Sinon.JS - cjohansen.no

RT @johnath: Late to the party, I know, but I’m really proud of the way we handled this here...

Fri, 06 May 2011 19:24:46 +1200

RT @johnath: Late to the party, I know, but I’m really proud of the way we handled this here at Mozilla. http://bit.ly/j1IF2b

JSPatterns.com » Blog Archive » JavaScript classes

Fri, 06 May 2011 16:20:08 +1200

JSPatterns.com » Blog Archive » JavaScript classes:

RT @stoyanstefanov: Blog: JavaScript classes http://www.jspatterns.com/javascript-classes/ #nodeconf #jsconf #flame :)