blog.paulgueller.com

I saw this post on the CSS Tricks Snippet Feed which addresses a commonly desired form behavior: to provide default text in an INPUT element that disappears when the user enters that field. The example provided works, but I have a couple issues with it:

1. Uses inline JavaScript, and must be reapplied to each element affected
2. Repeats the contents of the value attribute
3. The default text is not replaced if the user exits the field without entering new data

So I created a possible solution, using jQuery:

HTML

1

<input type="text" value="Place default text here" />

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14

jQuery( function(){
  $( 'input[type="text"]' ).each( function(){
    $(this).attr( 'title', $(this).val() )
      .focus( function(){
        if ( $(this).val() == $(this).attr('title') ) {
          $(this).val( '' );
        }
      } ).blur( function(){
        if ( $(this).val() == '' || $(this).val() == ' ' ) {
          $(this).val( $(this).attr('title') );
        }
      } );
  } );
} );

This script first iterates over each of the text input to assign a semantic text attribute, helpful not only in storing the default value, but also providing a tool-tip for reference as the user interacts with the page. It then assigns behaviors for both the onfocus and onblur events, eliminating the need to respecify data for comparison. The script is cleanly separated from the markup and, using jQuery, additional specifications may be made so as to only affect children of a particular FIELDSET or only those that possess a certain class.

I hope you find this snippet useful, and feel free to comment if you have additional information to share.

A number of companies use 37 Signals‘ Basecamp, a hosted project management, collaboration and tracking application online. It features a rich interface and many layers of administration and accountability.

Branching from an early open-source version of Basecamp, activeCollab is an alternative that can be installed and managed on a company’s own servers or local network, but has become a licensed product since it left beta.

Enter ProjectPier, which I installed and have started using for many of my clients after reading about the application. From the developer site:

ProjectPier is a Free, Open-Source, self-hosted PHP application for managing tasks, projects and teams through an intuitive web interface. ProjectPier will help your organization communicate, collaborate and get things done Its function is similar to commercial groupware/project management products, but allows the freedom and scalability of self-hosting. Even better, it will always be free.

It was easy and intuitive to set up new clients and assign them to projects, and create milestones and to-do items for everyone. Other key features that I found useful include:

• sharing and tagging of important files
• communication and notification settings, including e-mail and RSS
• custom theming and form creation

If you can live without many of the Ajax-y bells and whistles that Basecamp touts, as well as the real-time whiteboard and team time-tracking, ProjectPier is a solid application for collaboration. Download the source code and try it out!

Jeffrey Way provides a step-by-step screencast, accompanied by source code and plenty of documentation in the post titled You Still Can’t Create a jQuery Plugin? – NETTUTS.

Jeff Atwood on the Coding Horror blog recently discussed the phenomenon of being perceived or representing oneself as an expert. He provides examples of the modern “anti-expert” bias, and offers some advice to the New Experts, courtesy of James Bach:

1. Practice, practice, practice!
2. Don’t confuse experience with expertise.
3. Don’t trust folklore — but learn it anyway.
4. Take nothing on faith. Own your methodology.
5. Drive your own education — no one else will.
6. Reputation = Money. Build and protect your reputation.
7. Relentlessly gather resources, materials, and tools.
8. Establish your standards and ethics.
9. Avoid certifications that trivialize the craft.
10. Associate with demanding colleagues.
11. Write, speak, and always tell the truth as you see it.

Read the full article.

I started following @jquery on Twitter sometime ago, and they have provided a lot of great links and information.

One interesting link is to an article about methods for presenting information and creating systems to enhance user experience:

Delivering informative structure is the primary task an interactive user interface should be able to cope with. The more intuitive layout structure is designed, the better users can understand the content.

Read the full article on Noupe.

The jQuery foundation has created a new site showcasing designs that Use jQuery. They currently have only about 30 samples organized by effect/function category, but they do accept submissions so show off that great interface or behavior that you’ve created!

I recently stumbled upon a list of 54 Kick Ass Creative Logos which in turn led me to Logo Faves, who accept submissions from designers, and describe themselves as:

A collection of best designed logos around the web is showcased in Logo Faves. We don’t want to be like other Logo repositories, our idea is to bring you all the best of best logos.

Also relying on suggestions and entries from webmasters to compile its collection, Web2.0 categorizes over 100 logos and displays the user-ratings for each.

FontFeed took a bit of a different approach in grouping popular web logos by style, and even though the article was published in 2006, it is still a great source of information.

So what are you waiting for? Check out some of the design resources over at For Web Designers and submit your best work!

Of course, you could always just use a pre-configured generator.

Looking for the perfect font system for your design, compare different styles side-by-side, or embed non-”web-safe” typeface in the layout? There’s a web application for that.

Highlights include:

• STC fontBROWSER – an online tool for browseing varoius fonts and viewing how your selected text looks with each.
• WhatTheFont – upload any image with characters and instantly find the closest matches within their database
• Typetester - compare different fonts for the screen, up to three at a time
• Font Burner – replace text on your page with one of 1000 vector-based fonts with a simple block of code

Check out the entire list of 21 Typography and Font Web Apps You Can’t Live Without.

What with history being made today, I thought I would take the opportunity to share an article that provides insight into the recent administration’s two terms of office.

In the article Farewell to All That, Vanity Fair recounts the past eight years of our government’s legislative branch as told through excerpts from interviews with those close to the events.

At 14 paginated screens, it’s well worth the read:

The threat of 9/11 ignored. The threat of Iraq hyped and manipulated. Guantánamo and Abu Ghraib. Hurricane Katrina. The shredding of civil liberties. The rise of Iran. Global warming. Economic disaster. How did one two-term presidency go so wrong? A sweeping draft of history—distilled from scores of interviews—offers fresh insight into the roles of George W. Bush, Dick Cheney, and other key players.

Jon Hobbs-Smith from the UK web development firm TVI Design has compiled a list of 25 tips to making your jQuery-powered applications easier to script and faster loading. While some of the items may be considered common knowledge (such as return false; for click events to prevent default behavior) the list provides excellent links and resources to people interested in using the Write Less, Do More JavaScript Library.

Considering almost all the recent updates to the framework relate to improving speed, why not take fullest advantage of them in making your application as responsive as possible?