Photo: Joe Shlabotnik- We design and build extraordinary applications for companies looking to make the next great idea a reality.
- learn more
Grails and JSONP: How Easy is That?
For all of those Java developers casting longing glances at their buddies doing Rails development, there is hope. Grails, which has just celebrated its 1.0 release, is a Rails-like "convention over configuration" framework that aims to do for the Java world what Rails has done for Ruby. Instead of Ruby, the dynamic programming language of choice is Groovy, which compiles to bytecode (no Groovy to Java translation) and integrates smoothly with just about any Java code you may be using.
I'll stop hyping Groovy and Grails in general here; there's plenty of good informational stuff on the Grails and Groovy home pages. I will note that if you run off the tracks a little bit, you can find yourself reading through 500-odd line stack traces of Groovy, Spring and Hibernate -- there's room for some improvement there.
One of the many nice things about Grails is it's support for JSON and XML. Let me put together a simple example that shows off some of Grails' power.
Topics: Ajax Examples, Application Development, Grails, Groovy, Java, JSON, XML
Some Very Modest Good News on Advertising and Ajax
Every month I check in on the state of advertising and Ajax. Nielsen has ditched the page view, but they've really shrugged their shoulders at how to measure traffic for advertising purposes on Ajax-enabled web sites. To make things worse, even Google, a pioneer in many things Ajax, is mum on Ajax and Adsense. Just search through their help forums for all of the unanswered questions on how to make Adsense work with Ajax sites. This deafening silence on Google's part (not even a "don't do it"), leads me to believe that they are either working on a solution but don't want to tip their hand, or that they are just as out to sea as everyone else.
So, the modest good news is that some people are working to solve the measurement problem. In the case of search recommendations, Baynote measures interest in the targets of search results, then reranks those results based on that interest. In other words, if someone goes to a search result, scrolls through the page, leafs through a couple of DHTML tabs, etc., then they probably found the page interesting. If, on the other hand, they only spend a second deciding that the page sucks, then go back to the search results, then they probably found the page uninteresting.
Topics: Advertising, GWT, Tools, Web 2.0
Google Summer of Code 2008
Got an Open Source or Free software project? Want some young, eager college developers to give you a boost? Then you should check out the Google Summer of Code. The details:
Over the coming months we'll be working with open source and free software groups to select hundreds of student projects from thousands of applications. Then, during the summer, we'll distribute millions of dollars in stipends to the students cranking out the code. Our goal is to increase the world's supply of open source software while providing young programmers inspiring, meaningful summer jobs.
Since the first Google Summer of Code in 2005, the program has had remarkable success. Last year we connected 900 students with more than 130 open source mentoring groups, including such prominent organizations as Dojo, Python, Samba and Ubuntu. Several past students are still contributing to their projects and many are serving as mentors in this year's program. Meanwhile, similar programs are springing up all over, including the Finnish Summer Code Program, the GNOME Women's Summer Outreach Program, the Season of Usability, and game publisher NCSoft's Winter of Code.
This year's Google Summer of Code promises to be the most successful we've ever held. We've extended the program timeline to allow students and mentors to discuss applications before settling in to write them, and we're continuing last year's tradition of announcing accepted applicants early to allow students more time to bond with their project communities.
We look forward to applications from organizations and students eager to participate. Applications for organizations open March 3 and close March 12; for students, applications open March 24 and close March 31. Coding will run from May 26 through August 18.
Note the appropriate use of the semicolon in the second-to-last sentence. 
We're thinking of gettin us one of them thar summer of code students for one of our own Open Source projects: RSH.
Technorati Tags: announcement, google, summer of code
Topics: Announcement, Google, Open Source
Keeping up with Firefox 3: The agony and the ecstasy of full page-zoom
I've been playing with the page-zoom feature in Firefox 3 Beta 3. Thanks to the hard work of the Mozilla folks, Firefox is now the third major browser (behind Opera and IE7) to support this feature. (Safari, of course, supports page zoom on the iPhone but not yet on the desktop.) I don't know whether to be elated or annoyed.
A little background: For years, browsers have allowed users to scale the font-size of any web page using built-in browser controls. The text would get bigger, but other page elements wouldn't. Increasing your font size wouldn't affect the layout of the page at all. If sites weren't careful about how they built their CSS, absolute positioning and fixed-width elements would conflict with the zoomed-up font sizes. The result wold be pages where the main content was readable, but navigational and chrome elements looked grotesquely distorted or in some cases disappeared into the seams of the CSS (see photo below).
Topics: Accessibility, Firefox, Firefox Extensions, IE7
jCarousel Lite: DHTML image slideshows with 2kb of code
After posting last week about the strengths and limitations of jCarousel, the jQuery image-carousel plug-in, I did some digging and found jCarousel Lite, another option for your image-slideshow needs. Written and maintained by Ganeshji Marwaha, jCarousel Lite is optimized for size and simplicity rather than configurability. It weighs in at just 2kb, but you lose a lot of the more advanced options you get with jCarousel, such as Ajax slideshows and integration with Thickbox. Still, for plain-vanilla DHTML slideshows, jCarousel Lite offers a fast and lightweight solution that requires very little custom code.
Topics: Ajax Frameworks, jQuery
Buy My Book! (Please?)
.jpg)
This week, my book Professional Ruby on Rails will be officially released. You can see sample chapters here, and you can buy the book at Amazon (affiliate link).
This book is designed to meet the needs of an intermediate to advanced Ruby on Rails user. The first wave of Rails books could not assume that the user had any pre-existing knowledge of Rails. As a result, they spent a lot of time covering the basics. The target reader for this book is somebody who has already read one of the basic books and now has to apply this knowledge to building a complete web site all the way from conception to deployment.
Written over the summer and fall, all the sample code in the book uses Rails 2.x, specifically including RESTful structures, respond_to, new migrations, cookie-based sessions, and other new features.
Topics: Books, Ruby on Rails
Radiant CMS: Some tradeoffs, but they’re worth it
We're continuing to iterate on our redesign of the Pathfinder website using Radiant CMS, which I posted about last month. Now that we actually have IA and design artifacts and content for the new site, I'm getting more intimately acquainted with this Rails-based CMS tool. Our main objective with Radiant is to allow business users to create content in Textile without dirtying their hands in markup. I think Radiant will do the trick, but it takes some work to set it up.
Like a lot of UI engineers, I'm used to building systems that separate content from rendering. Usually, though, I've had a commercial-grade templating system at my disposal to help build and enforce this separation. I've used Tiles, Struts and various roll-your-own frameworks in the past with great success. Unlike those tools, however, Radiant is designed primarily for simplicity, not flexibility. As with Rails itself, Radiant encourages you to take the "happy path" and do things its way. Instead of fine-grained, n-depth templating, you get layouts, pages and snippets:
- A layout is a page-level template.
- A page is a bunch of content plugged into a Layout.
- A snippet is an include that can be plugged into either a layout, a page or another snippet.
What's missing? A module- or snippet-level layout. This makes it difficult to abstract away the presentational aspects of a recurring content block. Let's say, for example, that your layout has a sidebar with an arbitrary number of content blocks within it. CSS considerations demand that you apply a markup wrapper to each one of those content blocks, like so:
Topics: Content Management, Radiant CMS, Ruby on Rails
Qualification of a Pair Programmer: A Good Listener
Be a Good Listener. We've all heard this phrase. As I experienced recently, it applies readily to pair programming as well.
I am currently helping a student learn Java while she is taking an algorithms class. Having had teaching experience in the past, I was able to teach her the basic stuff fast and well. It was mostly a one way street where I talked and she listened. As she grew more comfortable with Java, she starting asking non-trivial questions. I quickly realized that it was no longer a one way street. I had to make conscious effort to not discount what she said/asked and say what I had to say. It took us longer to arrive at a solution _together_ if I talked more than I listened. I had to resist the temptation to arrive at a solution _alone_ and bring her along; at her speed. To bring her along, I had to listen more and make an effort to understand what she understood and where she missed. This may seem counter-intuitive but I realized that it was best (in terms of code quality and long term sustainability of happy pairing relationship) when I listened to her and gave her just enough information to find her way instead of imposing my way onto her.
I understand that pairing with a newbie is distinct from pairing with your co-developer. But still, being able to align yourself to someone else's thoughts goes a long way in achieving better results.
Happy Pairing !
Topics: Web/Tech
Goldberg workflow
In a current project there is the need to use email to allow customers to 'sign up' for information updates. In working through the user experience I have been looking deeper into how different programs have enabled email to process and initiate workflow that it led me to solve a problem in a surprising way. It also reminded me of how in user research it can be nonsensical and even counterintuitive how people use software to help them with their tasks. Its all a strange rube goldberg like process, which gives me an excuse to share the "Pitagora switch" video, which always invigorates me when a software project seems to lose momentum.
I started with a basic problem of the customer (In this case, me) who is a amateur oenophile. I try a new wine and would like to keep track of my thoughts and rankings in the easiest way possible. I have an account on Corkd, a wine rating site, but the customer experience is lacking in some ways, and adding wines is a chore. A friend mentioned that he only buys wine based on label, and that is important, so I would like to keep a photo for reference as well. Many sites do photos, many do blogs, but I wanted to do them both together. So I set up my own site with a bit of wordpress and a domain name, I was up and running. However, it still seemed a chore, if I was enjoying a wine, I would have to go to the computer, log in, write, set up, upload photos, remember which one... oh, again, too much work, and the site and content stagnated.
Armed with some experience in the email interfaces to these blogging/cms systems, I came up with a weird way to make the process easier. It does involve an iphone, but that is just to enable the 'mobile' experience. As I went through it, it worked perfectly, and was quite a bit of fun, not to mention a triumph of non-linear thinking! To summarize:
- Enjoy some wine - be sufficiently inspired to blog something about it
- Use the iphone (or I suppose any picture phone) to photograph the wine label
- Email the picture to flickr (check flickr account details for your personal email address that posts the picture)
- Set up flickr to be aware of the 'wineskeptic' blog by pointing it to a script within wordpress that will accept XML posts
- This enables the little 'blog this' link above the picture, using the iphone web browser enter the tasting notes. Save.
- Check the blog, notes and picture are posted, success!
I hadn't really used the flickr service for anything but archiving and sharing photos before, and its a very cooperative model they enabled. The photo is not the main reason for the post. If you have experiences with similar ways you mashed up some technologies to solve a workflow problem, please comment!
Topics: Task Flows, UXD
GWT Rolodex now at Google Code
Chris Jones was kind enough to move his GWT Rolodex widget over to Google Code. Looks like you no longer have to resize your own images.
Grab your stack of images (you'll get the best results from images that are roughly the same medium size) and place them in the same package space as your RolodexCardBundle.
That's it. Just drop them in a directory. Check out the RolodexImageBundleBuilder.java for the code that does the magic at compile time.
One enhancement planned already is to do a real perspective transform to "get rid of the jaggies."
Technorati Tags: ajax, gwt, rolodex
Topics: Ajax Frameworks, Ajax Widgets, Google, GWT
GWT: DOM and Opacity
One thing missing from the DOM class in GWT is the ability to set element opacity in a browser independent way. You do have DOM.setStyleAttribute, but in IE you set the opacity by squeezing a alpha(opacity=val) into the filter, where in most other browsers you set the opacity style attribute directly.
If you take a peek into the prototype library, you'll see all sorts of cruft around setting opacity, such as supporting Konquerer, etc., but in the world of GWT, we just have to support a few browsers (IE6+, Mozilla, Safari, Opera). I had a need for a kinder, gentler opacity when I started developing GWTaculous, my pure GWT port of the Scriptaculous effects library. I implemented my own DOMX class to support those extended DOM operations I needed.
Topics: Ajax Frameworks, CSS, GWT
More jQuery plug-ins: jCarousel and the dreaded window.alert()
In addition to the jQuery UI Tabs plug-in I mentioned in yesterday's post, I've been playing with jCarousel, a fairly mature component for building DHTML and Ajax slideshows out of images or arbitrary markup. Overall, I was impressed enough with jCarousel to build half of my latest piece for IBM developerWorks around it. But despite the component's many configuration options, I found that I had to do some hacking to bend it to my will. jCarousel can get a little confused when you load dynamic content, especially if that dynamic content includes blocks of markup rather than just individual image files. It miscalculates some widths in its behind-the-scenes DHTML trickery, causing images to load but never appear in the carousel. To get around this problem, I used the brute-force approach of applying a hard-coded width to my carousel:
//build the carousel
jQuery('#imageCarousel').jcarousel({
itemLoadCallback: itemLoadCallback,
scroll: 1
});
//now recalculate the width of the unordered list
//that makes up the carousel items
jQuery('ul.productImages').css("width","3012px");
Topics: Ajax Development, Javascript Libraries, jQuery
Design Pattern 3 - not page flips
In interaction design it is considered a noble pursuit to find metaphors that take real life interactions and mimic them onto the computer screen. There are some notable successes such as the desktop metaphor, as well as some notable failures, such as the desktop metaphor. It reminds me of a friend who was experiencing trouble with their hard drive (this was a macintosh) so they dragged all their files 'out' of the hard drive onto the desktop and then reformatted the drive. After doing this he understood that the metaphor didn't hold up to this kind of use. As computer users become more savvy, metaphors that exist only in the computer realm are becoming more common and accepted.
I was perusing an online catalog, IKEA, and noticed they had dismissed the odd, yet well used idea of a page 'flipping' or 'dog-earing' when you clicked on the corner to advance. As seen in the movie, the advance takes place, shifts the page, then switches it with the next page. Not only does this transition take less time, it effectively communicates in shorthand the idea of 'flipping' without using a direct paper metaphor. Nicely done.
When to use
Pagination seems most useful when transitioning print to screen. Since many magazines and newspapers have abandoned the fidelity to print, and removed the need to screen capture print ready art, this is becoming rarer and rarer. I do think paginating between photos in an album is an experience not well handled in many photo sites web interfaces (I mean you flickr!).
How does it work?
Since this is flash, you can get away with the movement out of the constraining box, which is tougher in HTML, since absolute sizing is not as common, moving and swapping is probably available within a DHTML library, but movement across frames seems to be very flash specific behavior.
Topics: Design Patterns
Lesser Known Test Processes
While Test-Driven Development (TDD) and Behavior-Driven Development (BDD) get all the headlines, thousands if not millions of developers have worked out their own ad-hoc variations on these processes. This is a list of alternate testing processes, some of which are useful, some of which less so. It's a different way of thinking about the benefits of doing testing -- at the very least, it's a way to think about the costs of backsliding on TDD.
Data Driven Testing (DDT)
Also Known As: Begging The Question, Blank Box Testing
Process Description: Write your tests first as in normal TDD, however instead of actually asserting an expected value, assert against a blank value (as in assert_equal(nil, user.batting_average)). The test, of course, fails. You then fill in the expected value based on the result of the failing test. Bingo! The test passes.
Pitfalls: If you aren't careful, this turns in to Tautology Based Testing. Specifically, you need to verify that the returned value really is what you expect. If you are doing this too often, it may mean you don't really understand what your code is doing.
Actual Uses: There are a couple of benefits to this testing process. First off, it guarantees a failed test the first time around, which is proof that the basic test setup is correct, and that you are testing the item that you think. This is also useful in cases where the correct answer is easier to verify than to generate by hand (a long string, for example). It's preferable to use the literal result of the actual program then a separate non-literal calculation of the answer, even if you paste in the literal result.
Topics: Ruby on Rails, Test Driven Development, Testing
jQuery UI in action: Thumbs up on tabs, thumbs sideways on themes
The first two installments haven't even been published yet, but I spent most of last week hammering out the third entry in the series I'm writing for IBM developerWorks. The first two installments tackled things like modal dialogs, tooltips and lightboxes. But for the latest piece, I delved a little deeper into full-scale Ajax by showing readers how to load page fragments and images on the fly into tabbed interfaces and image carousels. As before, I enjoyed writing for a more beginner/intermediate audience. And I especially enjoyed the chance to play with jQuery and all of its shiny new plug-ins.
Inspired, perhaps, by the success of YUI and Ext, all the big JavaScript frameworks are releasing companion libraries of packaged, themable UI widgets. jQuery is no exception. My latest IBM piece uses jQuery UI Tabs, one of many components in the new jQuery UI framework. UI Tabs began its life as a standalone plug-in. With the launch of jQuery UI, it has become more tightly integrated with the other components. Ultimately, that's the lure of an umbrella concept such as jQuery UI: fewer far-flung extensions of unknown provenance; more plug-and-play efficiency.
Topics: Ajax Development, jQuery, Progressive Enhancement
About Pathfinder
Recent
- Project Website Part 4: Drag and Drop in jQuery
- The App Store, iPhone, and You
- Multiple Column Sorting with Drag and Drop using Scriptaculous
- Five jQuery plugins that are a joy to use
- Visualizing Your Database Schema Entirely in Rails
- jQuery plugins: Five tips for separating the good from the bad and the ugly
- Resolved: Should schema.rb be included in your source control?
- Flash 10 - FileReference Runtime Access
- Papervision3d 2.0 (Great White) in Flex 3 (Part I)
- MetaWidget - Convention over Configuration UI
Archives
- July 2008
- June 2008
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
- June 2007
- May 2007
- April 2007
- March 2007
- February 2007
- January 2007
- December 2006
- November 2006
- October 2006
- September 2006
- August 2006
- July 2006
- June 2006
- May 2006
- April 2006
- March 2006
Topics
.NET
3d
Accessibility
actionscript
activerecord
Add new tag
Adobe
Adobe AIR
Advertising
agile
Agile Development
AIR
Ajax
Ajax Applications
Ajax Bookmarking
Ajax Components
Ajax Development
Ajax Examples
Ajax Frameworks
Ajax Intervention
Ajax libraries
AJAX Obfuscation
Ajax Performance
Ajax Products
Ajax Tools
Ajax Widgets
Analysis
Android
Announcement
Announcements
antennae
Apollo
Application Architecture
Application Development
ASP.NET
Asynchronous Processing
awards
Back Button
Benchmarking
Best Practices
BJAX
Blaze Advisor
blog
blogging
Books
Browsers
Business Reasons for Ajax
Business Rules
C#
Canvas
Case Studies
Chicago
CMS
COBOL
Code Generation
Color
COMET
Conference
Consistency
Content Management
CRM
CSS
Design
Design Patterns
Desktop
Desktop RIA
Developer's Notebook
Diagnose
Dojo
Domain Knowledge
Drools
Echo2
Echo3
Editorial
ERP
Ethnographic Research
Ext JS
Facebook
FileReference
Firefox
Firefox Extensions
Flash
flash awards
flash player 10
Flex
flexunit
Flow
Frameworks
front end development
Games
Google
Google Gears
Grails
Graphics
Greasemonkey
Groovy
GStreamer
Gwittir
GWT
Healthcare
Hibernate
IDE
Ideation
IE
IE6
IE7
IE8
ILOG JRules
Information Architecture
Innovation
Instructional Design
Interaction Design
Interview
iPhone
iTunes
Java
Javascript
JavaScript frameworks
Javascript Libraries
JBoss Rules
Jess
Jetty
Jobs
jQuery
JSF
JSON
JSR-94
Lazlo
Legacy Systems
LinkedIn
Mac
Mash Note
Mashups
MetaWidget
Methodology
Microformats
Microsoft
Mobile
Mootools
Mozilla
Music
MVC
Office
Open Screen
Open Source
Opera
pagination
Pair Programming
papervision3d
Patterns
Peer Creation
Performance
Personas
PHP
plugin
process
Web/Tech
Progressive Enhancement
Project Website
Prototype
Prototyping
QA
qooxdoo
Radiant CMS
rails
Really Simple History
Requirements
Requirements
Alice Toth
Requirements Visualization
RETE
Review
Rich Interactions
ruby
Ruby on Rails
SaaS
Safari
San Francisco
Scalability
Scenarios
Scriptaculous
SDLC
Search
Security
Selenium
Semantic web
SEO
Server Side
Silverlight
SOA
Social Networking
Software Processes
Songbird
Sprajax
Spreadsheets
Standards
Story Telling
Struts
Task Flows
Test Driven Development
Testing
Tools
Training
Trends
Tumblr
Tutorial
Tutorials
Unit Tests
Usability
Usability Testing
User Experience
user experience design
user interface
User Interface Standards
User Research
UXD
Video
Visualization
VLC
Volta
Web/Tech
Web 2.0
Web Design
Web Development
Webkit
Weblogs
Web Services
Web Standards
Widgets
will_paginate
Windows
Wireframes
WordPress
workflow
XML
XUL
Zeigarnik
Zeigarnik Effect
ZK