Archive: August 2008

Implementing linked multiselects with jQuery, LiveQuery, and Low Pro: Part 1: Requirements and interaction design

Brian Dillard, Monday, August 18, 2008 @ 6:10 pm

Last week I spent a couple of days lashing together a UI widget for a project that needed a little Ajax assistance. As always, I looked for an opportunity to learn something along the way, so I got signoff on using jQuery and some plugins I hadn't previously employed.

The result? A down-and-dirty mini-project that let me test drive Color Animations, jqModal and Low Pro for jQuery while employing tried-and-true solutions such as jQuery Templates and Live Query. What's more, the requirements for the widget itself left room for some careful consideration of user experience design.

In the end, I built a client-side demo in just a few days and handed it off to the project lead for integration with a complex back end. Now I'm free to refine my deadline-constrained code into something a little more OO and share the results.

This week, I'll talk about the project's complex usability requirements and Pathfinder's user-centered solution to those requirements. Next week, I'll walk you through our first pass at building custom code, roping in open-source libraries and making it all work together on a tight deadline. Finally, I'll walk you through the refactoring process so you can see the final, properly factored and reusable version.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

Many Varied Components, or… Multi Variable Complexity, or… Mainly Vanilla Coding

Noel Rappin, Friday, August 15, 2008 @ 3:32 pm

(Image comes from the Rails Envy MVC public service announcements -- and I hope they don't mind)

Here's the question:

Describe the MVC design pattern as it is implemented in Ruby on Rails.

And the followup:

In an MVC design, where would you place complex business logic?

This is part of the standard phone screen we give to potential Rails developers. The expected answer goes something like this:

MVC stands for Model, View, Controller, each of which represents a section of the application. The model manages data and often persistence, the view manages presentation, and the controller mediates between user actions and associated models and views. Each of these three subsystems should have as little interaction with the others as possible. Complex business logic should go in the model, since that is the section that deals with business objects.

If your doing a phone screen with us after this, at least have the decency to phrase that in your own words...

I don't think of that as particularly controversial, although I suppose you could pick at the wording and details to taste. Interestingly, or oddly, or something, the recent stretch of phone interviews has had a nearly unanimous answer to the followup question: Controller (sometimes, to be fair, the answer would be controller and model, but with controller as the primary answer).

After a brief time-out to check my sanity and calibrate with some other people (like the video with guys from the picture), I came out of the process with the following few thoughts:

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

Custom Flex 3 Lightweight Preloader with source code

Sasha Dzeletovic, Thursday, August 14, 2008 @ 2:25 pm

Here we have a demonstration to an age old problem in Flash (inherited in Flex) - the Preloader. I think that the Flex community has long ago grown bored with the default preloader, which I am very thankful to Adobe engineers for providing us in the first place. It's just that we keep seeing it over and over and over...

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (0)

tech development

Mass Assigning Inheritance Column Values for ActiveRecord STI with Rails

Anthony Caliendo, Wednesday, August 13, 2008 @ 3:06 pm

One of the security features in Rails is to prevent mass assigning values for certain columns (when passing a hash to #new, #attributes=, and #update_attributes).  This is to ensure that a malicious user can't exploit the system by passing in values for certain attributes you really don't want them to change.

In Rails 2.1, one of the attributes that will always be protected from mass assignment is the inheritance_column.  In most cases, protecting inheritance_column; is desired because we don't want (for example) someone to change their user type by specifying type = 'Admin' when posting a form.  Despite this, there are some cases where we do want to allow the user to specify the type.

However, even if we specify #attr_accessible on the inheritance_column, we will not be able to mass assign a value to it.  Rails will not allow it unless we put in a little hack to work around this feature.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

Working effectively as a team of one: Five tips for front-end developers on Agile teams

Brian Dillard, Monday, August 11, 2008 @ 5:33 pm

Most UI engineers - a.k.a. front-end folks - have worked in environments where they're a shared resource of one person. I often did so early in my career, when I played "webmaster" to a team of writers, editors and visual designers at various online publications.

Now that I'm the Ajax lead at a small, Agile software development firm, I'm no longer the only technical person in the room. But I'm still just as specialized. It's not that my JavaScript, CSS and JSP skills are any more important than somebody else's SQL, Java or Swing skills. It's just that I'm a team of one, so utilizing me effectively takes a little more planning. Everybody at Pathfinder wears multiple hats, but I was hired specifically to wear the same hat all the time.

Many projects at Pathfinder seek my input, but my attention can only be parceled up into so many chunks. I can't serve as an actual development resource on every project. Over time, I've realized that the following strategies help me deliver the value I need for my company:

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (1)

agile ajax

Ruby on Rails with Windows - How I made it work

Karthik Muthupalaniappan, Friday, August 8, 2008 @ 1:09 pm

I have been developing with Ruby on Rails over the last few weeks. Coming from the ASP .NET/C#/VB world, I am a total stranger to a programming language like Ruby. Any new programming language is fun to learn! Ruby was even more exciting cause it was a new kinda language to me. Though I think Ruby is not as user-friendly as C# or Java, it is as powerful and flexible if not better. Combined with Rails, Ruby becomes a platform that facilitates quick and efficient development of database-driven web applications.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (2)

tech development

Project Website Part 5: Morph in 11 steps or so

Noel Rappin, Friday, August 8, 2008 @ 11:11 am

Eventually in the course of developing the Project Website application, it was time to put the project on a staging server for client viewing.

Often we'll host that ourselves, but in this case I decided to try out Morph, which provides a relatively inexpensive virtual hosting environment for Rails applications, using the Amazon Web Services cloud. Even better, Morph allows you to set up a development environment for free. (The free version is limited in size and bandwidth, and they also apparently will shut down the server if you don't deploy for 30 days -- a limitation obviously not shared by the paid environments).

I was able to go from total Morph ignoramus to running deployed app in under two hours. After reading this you should be able to do it even faster. (Full disclosure: Morph and Pathfinder are co-sponsers of the WindyCityRails conference September 20, 2008. That doesn't really have anything to do with anything, I just wanted to mention the convference)

Here are the steps:

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (4)

agile ajax

Papervision3D 2.0 (Great White) in Flex 3 (Part II & III combined) with source code

Sasha Dzeletovic, Thursday, August 7, 2008 @ 5:47 pm

The purpose of this demonstration is to use Yahoo Map and Papervision3D as a base for creating/importing 3D Objects with reference to actual locations on planet Earth using the Adobe Flex framework.

In this post I will be covering how to integrate Yahoo Maps AS3 API as an Interactive Material in PV3D 2.0 and solutions to the following problems:

- Security sandbox violation when using Yahoo Map as MovieMaterial (i.e. BitmapData.draw problem)
- Mapping Longitude and Latitude values to X and Y coordinates of a PV3D material
- Dragging Yahoo Map in PV3D (avoiding the map panning collision with PV3D)
- Simple gauge component from the ground up using basic trigonometry
- Simple tilt component again using basic trigonometry
- Making a visual component using Degrafa

Demonstrations of these solutions are packed in this air application for which you can also see and download fully functioning source code.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (0)

tech development

What’s In Your Dock?

Noel Rappin, Wednesday, August 6, 2008 @ 11:17 pm

One of the things I like most about pair programming, or going to conferences, or sneaking a glance over somebody's shoulder at their screen is getting a chance to see the applications and tools that other people use to make it through the day. I often find myself walking past somebody and wanting to stop and ask them exactly what that interesting looking icon is for.

With that in mind, here are six things that you'd find on my dock, menubar, or command line history that help me get through the day. (I consider Quicksilver and TextMate to be in the Hall of Fame, and beyond this list.)

Autotest: Part of the excellent, if underdocumented ZenTest gem, autotest runs all your unit tests, then sits and reruns the appropriate tests when you save a file in your project. It also tries to run failed tests until they pass, which is very helpful if you have only one or two failing tests and you want to put some debug print statements in the code. Generally, if I'm coding in Rails, autotest is running.

Caffiene. Super-simple little utility that sits in the menu bar. When you click it, your Mac won't go to sleep. You can even set it to revert back to normal after a set time interval. This is always turned on whenever I give a presentation or client demo -- I always hate if my computer decides to sleep in the middle of my droning on...

Evernote. Note taking application. Boring, right? Not exactly. It syncs with a web account and also with an iPhone app. I've taken to putting clippings from Rails blogs there, to prevent the "I know I saw that somewhere" syndrome. Notes can also include pictures, and the web service attempts to do character recognition and allow you to search on, say, the notes you wrote on the whiteboard during that meeting.

TextExpander. Text macro utility, which comes with a set of HTML snippets that I prefer to the TextMate ones. I also define my command line aliases here because I hate messing around in Unix config files.

Twitteriffic. Okay, it's not exactly a productivity tool as such. But it's an extremely well designed piece of software. And with all the Mac and Rails developers I follow, it's nice to get a sense of what's going on. And, well, there are a lot of funny people who hang out there.

VoodooPad. Essentially, this is a personal desktop wiki, but rather than being an ugly web app, it's a pretty nice looking Mac app. I confess that I admire VoodooPad more than I use it, but I've recently started to put project-specific data there that is either too sensitive or too pointless to expose on our public wiki.

Hope this helps. What's in your dock?

• Digg
• Reddit
• del.icio.us

Comments (1)

agile ajax

Why Chicago is Rails-town, USA

Dietrich Kappe, Wednesday, August 6, 2008 @ 10:42 pm

It's rare that dowdy old Chicago can pull rank on Silicon Valley, but with the red hot Ruby on Rails technology, Chicago leads the pack. How can I make such a claim? After all, everyone knows that SF and San Jose and points in between attract the best developers. There are 7 (and counting) reasons why I can say this:

1. 37Signals - yes, the company where it all started is headquartered in Chicago. They're out of the professional services business and selling software built in RoR, but we used to see them as a competitor and have tried to emulate some of their business plans.
2. Pathfinder Development - yes, the small but growing RoR powerhouse is also headquartered in downtown Chicago. They combine Agile development, User Experience Design (UXD) and RoR to develop "extraordinary applications," as it says in the tag line to the right. Watch for our Rails-based competitor to Mingle, Tasker, in the next few months. Of course we also have Noel Rappin, author of Professional Ruby on Rails.
3. ThoughtWorks - global IT consultancy, but an OO and Agile Rails development shop at heart. Their Agile project management product, Mingle, is implemented in Rails.
4. Centro - they're all Rails, all the time. Their core business is "providing the most comprehensive platform and services to help agencies easily and effectively buy local online media," but they have an impressive team of Rails developers powering their development. Heck, they're just a handful of blocks from us. We may have more Rails developers per square mile than any other neighborhood in America!
5. WindyCityRails - our own local Rails conference (yes, we sponsor it).
6. Two, count'em, two active Ruby groups, ChicagoRuby.org and the Chicago Area Ruby Group.
7. Obtiva - another Agile and Rails shop, this one in the suburbs.

Think your town deserves the title of Rails-town USA? Bring it on!

• Digg
• Reddit
• del.icio.us

Comments (2)

agile ajax

More on Crockford’s and Flanagan’s approaches to JavaScript

Brian Dillard, Tuesday, August 5, 2008 @ 1:03 pm

In my recent review of "JavaScript: The Good Parts," I compared this new Douglas Crockford treatise with David Flanagan's canonical "JavaScript: The Definitive Guide." I subsequently stumbled upon a perfect example of the authors' divergent approaches to my native programming language.

Here's Flanagan discussing the dreaded with statement:

Despite its occasional convenience, use of the with statement is frowned upon. JavaScript code that uses with is difficult to optimize and may therefore run more slowly than the equivalent code written without the with statement. Furthermore, function definitions and variable initializations within the body of a with statement can have surprising and counterintuitive behavior.* For these reasons, it is recommended that you avoid the with statement.

* This behavior, and the reasons behind it, are too complicated to explain here.

And here's Crockford:

JavaScript has a with statement that was intended to provide a shorthand when accessing the properties of an object. Unfortunately, its results can sometimes be unpredictable, so it should be avoided.

The statement:

with (obj) {
    a = b;
}

does the same thing as:

if (obj.a === undefined) {
    a = obj.b === undefined ? b : obj.b;
} else {
    obj.a = obj.b === undefined ? b : obj.b;
}

So, it is the same as one of these statements:

a = b;
a = obj.b;
obj.a = b;
obj.a = obj.b;

It is not possible to tell from reading the program which of those statements you will get. It can vary from one running of the program to the next. It can even vary while the program is running. If you can't read a program and understand what it is going to do, it is impossible to have confidence that it will correctly do what you want.

Simply by being in the language, the with statement significantly slows down JavaScript processors because it frustrates the lexical binding of variable names. It was well intentioned, but the language would be better if it didn't have it.

The difference between these approaches to the same topic can't help but remind me of a favorite episode of "Buffy the Vampire Slayer":

Oz: [to Faith] I'm wondering about your position on werewolves.

Willow: [proudly] Oz is a werewolf.

Buffy: It's a long story.

Oz: I got bit.

Buffy: Apparently not that long.

--BtVS S03E03: "Faith, Hope & Trick"

There's value in exhaustively documenting a language. But without concrete examples of why something's bad, programmers - obstinate autodidacts that they are - probably won't heed your advice. The Crockford book doesn't always provide such persuasive logic, but it usually does, making it ideal for JavaScript noobs who need to understand how to use the language safely and effectively.

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

“Ajax overhaul, Part 4: Retrofit existing sites with jQuery and Ajax forms” now live at IBM developerWorks

Brian Dillard, Monday, August 4, 2008 @ 1:16 pm

Last week, IBM developerWorks published the fourth installment in my jQuery/UxD tutorial series. Ajax overhaul, Part 4: Retrofit existing sites with jQuery and Ajax forms shows how to turn a multi-page checkout process into a single-screen interface using two jQuery plugins: jQuery Form and jQuery UI Tabs. As with previous installments, I tried to show not only how to use open-source JavaScript libraries, but why. Ajax integrates into existing webapps best when it's used to improve their user experience design rather than just thrown in for its own sake. In the example application I constructed for this series, Ajax was used to simplify the shopping process rather than complicate it needlessly. As always, I focused on progressive enhancement so that the overhauled interface didn't leave any users behind. This is the final installment of this series, at least for now. I hope to publish on additional topics at developerWorks soon.

• Digg
• Reddit
• del.icio.us

Comments (0)

agile ajax

Integrating Design Drafts Into Your Rails App

Noel Rappin, Friday, August 1, 2008 @ 11:59 am

This one might be a little half-baked, I'd expect the implementation and features to change a bit over time. (Image from ArtCulture)

Nearly every project we work on at Pathfinder involves coordination between the developers and the designers. Over time, we've found that the more the design and development work can be integrated, the better everybody's work is. To that end, we like to have our designers work in CSS and HTML where possible, and to keep their designs in the same Subversion repository as the rest of the code. Being able to run a development environment helps the designers see their changes, and gives both sides immediate feedback on changes.

Here's a Rails hack that takes this one step further, allowing developers and designers to go back and forth between the current developer version and the design.

Continue reading »

• Digg
• Reddit
• del.icio.us

Comments (4)

agile ajax