February 9, 2012

Using Dojo for a simple show/hide toggle effect.

kungfu Using Dojo for a simple show/hide toggle effect.Without a doubt, my favorite Javascript library is Dojo Toolkit. Unfortunately, it can be a bit challenging to learn via the dojo.manual, especially if you aren’t interested in the widgets, just the DOM, UI, and FX libraries.

I just wrapped up a project where I used Dojo quite heavily on the site. One effect I thought was particularly effective was a simple show/hide toggle with nice fades. Take a look at the live page.

[Read more...]

Prototype library – dissected

surgical tools Prototype library   dissectedThanks, Jonathan Snook for creating such a useful (and gorgeous) set of printable reference sheets for the excellent Prototype library for Javascript.

I use Prototype to support almost all my Javascripting on the net, both at work and on personal projects. It is a great library, and this reference just makes it clear how clean and well laid-out the library actually is.

[tags]javascript,prototype,reference[/tags]

Javascript Programming Conventions

chain Javascript Programming ConventionsI’ve been meaning to write a Javascript “best practices” style guide for some time. Bad Javascript is just so painful to read and so easy to find that it brings a bad flavor to the whole language. I might be exaggerating, but only a little.

The Dojo Javascript Programming Conventions just released recently makes the first part of that article no longer needed.  I agree with all their suggestions.  Ok, not all, but most of them.  Basically, I agree enough to modify my own style just to have a standard to follow.

Javascript is such a fun and powerful language, and it has really come into its own with the rising popularity of “Web 2.0″.  It is high time for programmers to treat it like we do any other “real language”, with standards, best-practices, and excellent toolkits.  Dojo and Prototype are leading the way, in my opinion.

[tags]Javascript,dojo,standards,coding standards[/tags]

Ajax remoting for Invisible Castle

happy Ajax remoting for Invisible CastleI offer the code for my Invisible Castle site under a GPL license. However, it is not the easiest code in the world to get running. Plus, it is really overkill for most people. Most people who ask for the code really just want a die-roller with database lookup for their site. They aren’t really prepared to provide a working Python/Cheetah/MySql install. That’s fine, I could help them out and pick up a new skill in one fell swoop.

Ajax to the rescue

I quickly wrote a simple remote interface to the die-roller, and then used the Prototype library to implement an Ajax interface to it. Simple simple simple. It worked beautifully, with one problem, that pesky restriction agains cross-domain XMLHTTPRequests. So, I wrote a simple little PHP proxy page, and it works perfectly!

All together, this was a pretty nice payoff for a couple hours of work, including ramping up from zero about XMLHTTPRequest objects. I already have two remote client sites functioning happily using the script, which has a working demo with install instructions here.
[tags]javascript,Ajax,cross-site scripting,xss,xmlhttprequest,prototype[/tags]

Prototype modification to fvlogger

logger Prototype modification to fvloggerfvlogger.js is a fine logging system for Javascript, but when you are already using Prototype.js, it unnecessarily duplicates a lot of functionality. I’ve forked the original code to “fvlogger 1.0.proto”, removing this duplication. In addition, I’ve added a sweet “add the logger to the page” function to the script. The end result is much smaller and cleaner looking than the original, I think.

This script is based on fvlogger 1.0, available from Five Volt Logic. It requires prototype, and if you want to use its auto-insertion features, it requires Behaviour.js as well. If you aren’t already using the Behaviour library, you should. It will revolutionize your use of Javascript, fully separating user interaction from markup. Most times I use it, I never have to use a single line of inline javascript at all. That is incredibly liberating!

If you want to use Prototype 1.3.x, you will also need to load a few functions borrowed from “the future”, which I’ve helpfully included as “prototype_future.js”. Just look at the test page in the zip, and all should be clear.

Download protologger-1.0.zip and let me know what you think.

[tags]javascript,libraries,prototype,logging,fvlogger,behaviour[/tags]

On Closures

Recently, I’ve been something of a language evangelist at work. I’ve been promoting the power and utility of Python and Javascript to both coworkers and management. One thing I’ve found difficult to get across to them is the concept of "Closures", and why the lack of Closures in many mainstream languages (such as Java) is an irritating, slowing, nuisance.

I use them all the time, yet it is not so simple to explain why they are, to phrase it the way my son would, "So Sweet". I would go so far as to say that if you aren’t using closures all over the place in Javascript you probably dislike Javascript and think it is a toy suitable only for web designers. Seriously, closures are what turned me into a Javascript fan, that and the incredible Prototype library. In Python, closures are natural, yet frightening for so many who come from a Java or C++ background.

This article won’t teach you everything about Closures, and it is written using Ruby as an example, but it may show you why you would want to try them. Thanks, Tom Moertel, and Reddit.

link: Closures and the Professional Programmer

AJAX goodness for Invisible Castle

I just rolled my first real AJAX application out to testing. My Invisible Castle site is a die-roller for online gaming. It lets uses roll dice, and it lets their game masters or fellow players go look them up later. Fairly simple, but it got over 150,000 rolls last year alone.

I like to use the site as a testbed for new technologies that I’m interested in learning or exercising. This has worked out really well for me, leading me to the excellent Cheetah Template page template system for Python. Last fall, I completed a major refactoring of the site, and moved it to Dreamhost. With Cheetah in place, and the code all clean and lovely, I am now finding it very simple to add new features.

AJAX, why?

Despite it being a testbed, I don’t like to add features for the sake of features. That’s just silly. I could “ajax-up” the site, making it prettier I suppose. Maybe I’ll do that as I work on the site, but for my first AJAX app, I wanted something more interesting. So, I decided to open up the site to remote calls.

I want remote gaming sites to be able to embed a tiny amount of well-written Javascript, and end up with the ability to roll “in place” for their users. This morning, with the aid of Prototype and Behaviour libraries, I whipped out a nice remoting system in just a couple hours.

Cross-site

The most annoying part of the whole mini-app was enabling the cross-site AJAX call. I solved it by writing a quick PHP script which simply uses curl in the background to call my site, passing along the parameters. That script gets installed on the site which wants to use my roller, and bang, instant on.

It was fun to write. Take a look at the remote test here and let me know what you think. Notice, not a single line of ugly in-line javascript. Behaviour is a wonderful library!