It’s Friday, so that means it’s time to take a quick break and write something. Today’s topic: Using Javascript in Web Forms

Background
One of my current web-projects, Palmer Datacat (note: authentication required), is an online collection of data, metadata, and dictionaries of units and attributes. One feature we are implementing is the ability to add and/or edit any dictionary item directly from the web page. This requires using html-built web forms to take in user data and send it to a script that processes it and writes to a database.

Problem
Pure html web forms are static. That is, they offer no elements of interactivity. This is not a problem when the form should always contain the same fields. For instance, a guestbook form is static when it always has input fields for name, email, and comment.
However, data about an attribute (in the attribute dictionary) may differ depending on that attribute’s measurement scale. For example, attributes that are “nominal” and “ordinal” require different data input than those that are “interval” and “ratio”. The “datetime” attribute also requires its own specific input fields.

How can we build a form that only shows the needed fields based on previous input values?

Solution: Javascript!
Javascript is a ubiquitous client-side programming language enabled by default in most web browsers. With javascript programs, you can add dynamic effects and layers of interactivity to your web pages.

Before building the attribute form, I did a little research online to learn more about javascript and to see if there were any helpful tools for building javascript-integrated web forms.

quirksmode.org
Quirksmode may be the best javascript reference I’ve found. The author of this site touches many subjects in friendly depth, such as event-handling and best-practices for writing javascript code. I would not have been able to build the attribute form as quickly as I did without consulting this site first.

Form Assembly
Form Assembly has a Form Builder, which is an amazing tool for building a dynamic web form. It’s geared for html-newbies, but it is the best form-generation tool I’ve ever found (most of them are bad). The Form Builder builds compliant javascript-enable forms that work in any browser. (Note that the Form Builder tool does not work in Safari because it requires a built-in XSLT engine available to javascript which Safari lacks. The forms it builds, however, do work).

The features offered by Form Assembly include:

• Switch behavior – toggling on/off of certain fields based on previous input
• Repeat behavior – Ability to add/remove fields if more/less data is needed
• Pagination – Split the form on multiple pages
• Validation – Client-side form validation

Form Assembly offers a large javascript file that contains functions for each of these behaviors. You do not need to use the Form Builder tool in order to achieve this functionality. Rather, you could develop your own web form from scratch, and attach certain functionality to given fields using class naming conventions.

The downside to Form Assembly is that the javascript file is hefty, with over 1000 lines of messy code and weighing in at 43kb. Though I was initally amazed with the Form Assembly library, I ultimately decided not to use it. I reasoned I could build my own library of javascript functions geared toward specific form elements. This not only keeps the file size low (7kb), but also optimizes the script’s performance since it is not a generic one-size-fits-all library which must accomodate anything.

Prototype
Another javascript library I’ve found is Prototype which appears to be an advanced javascript-based framework for web developers. Prototype is relatively new and is seeing heavy use by lots of “Web2.0” web sites. Using and building on Prototype, you can do lots of cool effects and tricks. Unfortunately, documentation is currently lacking.

Attribute Form
Because the palmer development site is password-protected, I’ve duplicated the attribute form on my local working site. My javascript code is also available.
The two behaviors I’ve implemented are: Switch and Repeat.

Switch Behavior
When clicking on a Measurement Scale value (nominal, ordinal, interval, ratio, and datetime), a different box of fields may show. This is accomplished by registering an “onclick” event to each of the five checkboxes. The javascript then detects an “onclick” event and calls a function toggleMeasurementScale. This function displays and hides certain html boxes (divs) by accessing their styles.

The same function applies in the NonNumericDomain box (for nominal and ordinal measurement scales). When selecting an option in the drop-down box, certain fields will display.

Repeat Behavior
With “nominal” or “ordinal” selected for Measurement Scale, and “Code Definition” selected for Non Numeric Domain, a table of input fields (with 2 columns) appears. This table is used to define a codeset, being a list of pairings of code values and their definitions. Because different attributes may differ in the size of their codesets, an “Add a row” link helps implement a dynamic table that can increase or decrease in size to accomodate the size of an attribute’s code set.

To accomplish this, the “Add a row” link is not a conventional hyperlink like most links on web pages. Instead of taking you to a new page, it instead calls a javascript function called addRowTableCodeDefinition. This function generates html for the new row of input forms and appends it the table element. Likewise, the “Remove” link removes the chunk of html from the table element.

Will this form work everywhere?
Unfortunately no. However, with most modern browsers, the answer is yes, as long as javascript is enabled (which it is by default). I tested this form in Win/IE, Firefox, and Safari, and it works fine in all of them. The form will not work in earlier browsers, such as Netscape 4 and IE 4… but seriously, who still uses these browsers?

Javascript is an added luxury. Not all platforms (mobile phones, pdas, etc.) may have it implemented, and thus having a site rely on javascript could limit your user-base. In our case (and most cases), this is not a worry. Our targeted audience are Palmer personnel with proper privileges to add/edit/delete items from our online dictionaries. Such work should always be done from a computer terminal, and with a modern browser.

Summary
Javascript can be a great aid to building dynamic web forms, and in addition, dynamic web pages. Moreover, as an integral part of AJAX (Asynchronous Javscript and XML), javascript is seeing heavy use by many latest-and-greatest web projects, such as Google Maps. This new frontier of web development helps ensure that javascript is here to stay, and will be around for a long time. Thus, it is advantageous as a web developer to learn where and how to use javascript, whether for enhancing usability or site aesthetics. Building the javascript-enabled attribute form was a great exercise for me to get started, and I am looking forward to developing more javascript applications where needed.

I’ve been bookmarking and tagging various sites and articles I encounter on del.icio.us. You can view my at delicious page, and even pull the rss feed.

Delicious is a social bookmarking manager. It’s basically a place to bookmark webpages online. This has the advantage of comfortably marking and referring to webpages from anywhere. No need to rely on one local machine, or to sync multiple local machines so that all resources are kept the same.

Delicious takes things one step further. With each bookmark, you can apply a number of tags (keywords). Tagging is a recent phenomenon in providing meta-information to objects. Just like how Gmail works with labels, tagging frees you from the static placement of an object in a given category. For example, his post is tagged with Hints and Tools (Note: WordPress calls them categories, however, tags would be more proper).

Delicious still takes things even further. It not only shows which sites are most popular (based on how many people have bookmarked it), but it also shows sites grouped by tags. For instance, if you want to find sites that contain cooking recipes, you can view all sites that have been tagged with “recipe”. This alternate approach to Google is somewhat more personal, as the human element in the filtering process is clearly visible.

There are rss feeds for every tag. So I can keep working here while my news aggregator quietly keeps collecting new sites or articles from delicious tagged with “php” or “ajax”.

There are other sites that make use of the del.icio.us API. One of them is populicious. Populicious aggregates recently bookmarked sites within the last day (or two), and organizes them by popularity, allowing you to easily see where the latest trends. Many of the sites/articles I’ve bookmarked I’ve found using populicious and trendalicious.

This stuff is all very worth checking out. I keep finding new interesting artciles every day, and a lot of them pertain to what we are doing here: ontologies, interfaces, css, php, etc.

Some of my recent items include:

• What Makes a Design Seem ‘Intuitive’? - How to measure a site’s usability
• Obie, Has It Been 9 Years Already? : Weblog - OWL Ontology meets Ruby on Rails!
• Top Ten Web Design Mistakes of 2005 (Jakob Nielsen’s Alertbox) - What not to do!
• Learning Perl the Hard Way - The best resource (for me) I’ve ever found on PERL
• A cognitive analysis of tagging - A great read that explains tagging much better than I can

If any of you who reads this is intrigued by any of these articles, please browse through my delicious collection, because I have tons of them! Perhaps you may want to start your own account. It’s free!

I finally discovered how to enable color syntax in vi:

:syntax enable

Here a couple good reference sites for customing vim and your exrc file.

• my .exrc is someone’s .exrc file which contains lots of useful settings.
• Best of VIM Tips shows some highly useful stuff, most of it I didn’t know was possible!

As I use vi more and more, I am curious to find new ways to customize it so to increase productivity. One option I may like to implement in the future is the use of abbreviations and mappings. Abbreviations are useful during insert mode to auto-complete phrases (e.g. img -> ). Mappings are useful for abbreviating commands, and can be used to wrap a line of code inside html tags or comments.

Lately I’ve visited some useful sites and tools for help with generating color schemes and also for learning more about color theory. When working on the puzzle graphic (see 2 posts below) for the interoperability site, I wanted to pick three colors, one for each piece, that looked good in harmony for the graphic (and the site).

To accomplish this, I refered to this color schemer site: Color Schemer Online.
This site was useful for generating a quick color scheme, enabling me to wisely choose colors that fit well for the puzzle.

This site offers a cool utility program (for PC and Mac): Color Schemer Studio.

Color Schemer Studio is a very handy desktop application for mixing and creating color schemes. Unfortunately, it’s shareware and has a 15-day trial limit (which can probably be reset if you delete its preferences file )

Some other useful color sites:

• Return of Design shows a list of lots and lots of submitted color schemes, with titltes.
• [ws] Color Scheme Generator 2 is a nifty, javascript-based web app.
• Color Wheel Pro has some good reading about color theory and so on.

As always, a good place (besides Google) to find more related sites is del.icio.us: http://del.icio.us/tag/color

To some extent a web represents one snapshot of an entity’s identity, and a time series of the web pages serves as a reminder of change. There’s an automated service that provides a history of a web page. The Internet Archive has the Wayback Machine making available web pages archived since 1996.

a VPN (Virtual Private Network) is available at UCSD for off campus users to make use of UCSD services through use of an encrypted tunnel
(see http://www-no.ucsd.edu/documentation/vpn/)

It enables
-UCSD privileged library work
-remote disk mounts (ie to iocean)
-running remote applications, ie run matlab

Lessons learned recently about using VPN
-cannot make use of vpn if wired at UCSD, ie go wireless to test
-as a first line of action if have vpn errors or vpn is nonfunctioning,
open a browser window to force re authentication
-if you upgrade tiger, you need to upgrade VPN (ie to vpn4.7 aug05)

Download and documentation
-download and configure VPN client to your mac from
http://www-ono.ucsd.edu/documentation/vpn/mac/47/index.html
-where general ucsd acs network documentation is at
http://www-no.ucsd.edu/documentation/index.html

Related settings:
-home: cable modum router assigns IP address
-mac: apple: preferences: network; tab: build-in ethernet; tcip: using dhcp

In my last post, I talked about reconfiguring the /etc/ssh_config file to enable X11 Forwarding over an ssh connection. It turns out this step is unnecessary in Tiger. Instead, you can provide the “-Y” argument to the ssh command, which enables “trusted X11 forwarding”.

> ssh -Y hostname

I learned this the hard way. After I reconfigured my /etc/ssh_config file to enable X11 forwarding, I was indeed able to successfully load DBDesigner over the network (ssh connection with no args). However, I was unable to work with ER diagrams within the DBDesigner interface. The tables would disappear from the screen when I tried to drag them around, and the program ran very very slow.

I tested this process on a separate machine (PowerBook) running Panther. DBDesigner loaded and worked fine, although still a bit sluggish. This had me convinced there was a compatability issue with X11/ssh and Tiger. I searched in Google and found this thread (among others) which mentions the new -Y arg introduced to ssh in Tiger.

Note: The -X argument enables X11 Forwarding over ssh. Using this argument also makes it unnecessary to change the /etc/ssh_config in Panther.

After upgrading to Tiger, I had to reconfigure my system to enable X11 forwarding (so I could use DBDesigner over the network). To enable X11 Forwarding, open /etc/ssh_config (you need root privs). Change “Forward X11 no” to “Forward X11 yes”, and remove the pound sign from the beginning of the line.

One other Unix hint:
To refer to the last argument from your last command, type !$.
To refer to all args from the last command, type !*.
To refer to the nth arg from the last command, type !:n, where n is the arg number.
I pulled these refs from here.

**UPDATE - srhaber 9/7 **
I discovered it is not necessary to change the /etc/ssh_config file at all (which is great if you lack sudo privs). If running Panther, use the -X argument when establishing the ssh connection:
> ssh -X hostname

In Tiger, use the -Y arg:
> ssh -Y hostname

The -X argument enables X11 Forwarding, and is available to ssh in both Panther and Tiger. The -Y argument enables “Trusted X11 Forwarding” and is only to available to ssh in Tiger.

This page has many cheat sheets, covering html, javascript, css, php, mysql, subversion, and more. A valuable resource!

This site was discovered through http://del.icio.us/, a social bookmark aggregator which helps show active trends among websites. It’s basically an online bookmark manager, where users maintain personalized lists and can tag their link submissions with keywords. It determines a popular site based on how many users have it bookmarked. This search approach is a nice alternative to Google, particularly because it employs a real human/community element to finding good websites.

Karen and I have been running into an annoying problem. Anytime I create a new directory/file on iocean, its default permissions are 755. Thus, it lacks the group write permission (775). This is particularly annoying when working together on group projects. It requires either changing permissions on all affected files using chmod 775 [file], or using the sudo command to overrule the permissions completely.

I wanted to see if there was anyway to solve this problem at the source. Why not have newly created directories/files contain the proper permissions at the start? I did some research and discovered the umask command, which sets a file’s default permissions at creation time.

By default, the umask setting is 022. It ’subtracts’ 022 from 777, giving all newly created files a 755 permission. Changing the umask value to 002 makes the default permissions 775, which is what we want.

I added a line to my .bash_profile file that changes the umask: umask 002
This changes my umask value everytime I login to iocean, so I never have to do it manually. (If anyone reading this wants more information about this process, please ask in a comment, and Jerry, Mason, myself, or anyone else will be able to help.)

Note: It is sometimes important to have personalized folders to which only you want write access. Be careful when changing the umask value if the bulk of your work involves personal data. Since we are mostly living in a collaborative environment, it makes more sense to change the defaults so that file sharing becomes easier within groups.

Another Note: I created aliases to make it easier for me to change my umask values.
alias open="umask 002" # Collaborative
alias shut="umask 022" # Personal

I have these aliases stored in my .bashrc file, which is loaded by .bash_profile on each login. Using these aliases, I can simply type “open” or “shut” as commands to change my umask value, making it easier to transition between collaborative vs. personalized work.