Published on Saturday, December 13, 2008 .
Date pickers have become ubiquitous user interface elements in online forms. If you do not know what date pickers are, they are those interactive calendars that pop up to assist you when selecting a date. They are not useful in all situations, like when you already know the date you are going to enter. In this case you can just type the date in, as this tends to be quicker and simpler than using a date picker. However, a date picker can be very useful when you are trying to figure out the date of the Monday before Christmas, the date of next Thursday, or the date of the first Wednesday in May. This is because a date picker allows you to visualize the relationship between a date, January 4th, 2009, and a weekday, Sunday. Yet, the common date picker does have its fair share of drawbacks.
What the Date Picker Lacks
The common date picker is lacking in speed and simplicity when compared to typing a date into a text field. Typing a date into a text field is a relatively quick and easy process, usually ten keystrokes is enough to enter a date formatted as mm/dd/yyyy. What makes this task even quicker is that you only need eleven keys to enter any date (0-9 and /); using the number pad makes this even easier. On the other hand, selecting a date using a date picker can be a slower and more complex process. If you are selecting a date six months from the month initially displayed in the date picker, then you have to change the month six times before you are shown the appropriate month. The same or a worse problem arises when navigating through years. If the date picker allows navigation by year and month it is only slightly more problematic than only changing the month. On the other hand if the date picker only allows navigation by month, changing the year takes eleven more clicks. It also does not help that most date pickers use a cryptic system of symbols to represent moving forward and back one month or one year. These symbols are the single and double angle quotation marks – or something similar – pointed either right or left. The single angle quotes navigate through the months while the double angle quotes navigate through the years. This is not the most intuitive way to represent month and year navigation. All of these problems contribute to the relative slowness and complexity of common date pickers.
Continue reading 'Improving the Date Picker User Interface (UI)'
Published on Wednesday, November 12, 2008 .
Callback functions are used in JavaScript (JS) extensively. They are required
for AJAX/XHR, event handling, and in popular JS libraries. However, passing around
functions as arguments can cause headaches, especially for beginner JS programmers.
Problems with binding/this
One of the biggest problems with passing functions as callbacks is
this and what it
refers to. You usually run into the problem when passing an object's method as a
callback function. Another way to encounter this problem is by passing as a callback a function that
expects to be bound to a certain type of object. You'll usually get an error stating that
this.someProperty is undefined. You can resolve this with
Function.apply,
Function.call or a closure. For example:
//using Function.call
takesCallback(
function callbackProxy(argOne, argTwo){
//assume myFunction is already defined
myFunction.call(myObject, argOne, argTwo);
}
);
//or using Function.apply
takesCallback(
function callbackProxy(argOne, argTwo){
//assume myFunction is already defined
myFunction.apply(myObject, [argOne, argTwo]);
}
);
//or using a closure
takesCallback(
function callbackProxy(argOne, argTwo){
//assume myObject is already defined
myObject.myMethod(argOne, argTwo);
}
);
In the code above, the function takesCallback takes a callback function as its
only argument and calls that function at a later time with two arguments. The function, callbackProxy is
a wrapper function that takes the arguments and passes them to the real callback, while ensuring
that the function is bound to the correct object.
Continue reading 'JavaScript Callbacks and Binding (and Callback Arguments and References)'
Published on Monday, October 1, 2007 .
This past weekend I participated in
Startup Weekend Houston. For some reason I ended up in the UI design group, even though my specialty is front-end web-dev. I had a blast though, working with the UI team,
Matt Alberty,
Marcus Mateus, and Ramesh Bhaskar. Two and a half days went by incredibly fast, and in the end we ran short on time and only partially launched. But, this project will keep moving forward. We created
TipDish, a news wire for social media. If you blog/dish, you can
register at the site to receive tips pertinent to the subject(s) you blog about. We expect a full launch sometime this month.
Published on Monday, August 6, 2007 .
In the spirit of consistency, I decided to add a shadow to the tooltips (View the example). They just didn't blend in with the rest of the Google Maps overlays. So I set out to replicate the "standard" Google Maps shadows.
Replicating the Shadow
Through a mix of reasoning, instinctive guessing, and trial and error, I have devised a technique to replicate the shadows using Adobe Photoshop. It's a fairly simple process and the steps are outlined below.
- Make a copy of the overlay's layers and merge and rasterize the copies if needed
- Make the copy all black (I use a gradient map and set both ends to black)
- Perform a Free Transform and set the Height/Vertical Scale to 50% and the Horizontal Skew to -45°
- Apply the Gaussian Blur filter (I set it to .5 pixels for small images and 2 to 3 pixels for large ones)
- Set the Opacity to 45%
- Save the shadow layer only as a PNG
Continue reading 'The Google Maps Tooltip Gets a Shadow (and HTML Support)'
Published on Wednesday, June 6, 2007 .
I was recently checking my site traffic reports to see where my visitors were coming from and I found a mind-blowing (at least for me) CSS technique for visited links. Eva-Lotta Lam uses a check mark background image for visited links rather than simply changing the text color. You might not think that this is mind-blowing, but consider that using background images to attach information to links has been around for awhile now, i.e. external link icons.
Why has this technique not been applied broadly to visited links as well? It makes so much more sense than changing the color. You don't have to think about which color corresponds to a visited link as opposed to a non-visited link. The color swapping doesn't really help across different websites because there is no standard convention for which colors to use. The exception may be blue for non-visited purple for visited, but these are antiquated and clash with most websites' color schemes. Using a check mark doesn't require that users remember a link had a different color when or if they re-encounter it after they have visited the it the first time. Users do not have to compare one link's color to another and try to remember which of those links has been visited and which has not. The check mark conveys the same meaning without requiring the user to think as much; it is a much better solution.
Evalotta pointed out that Paul Boag also uses this technique. If you know of any others, let me know.
I've been working more and more with the Google Maps API recently. And one thing strikes me as odd; it's difficult to find examples of how to retrieve geocodes for addresses. If you're going to implement the API in a website, you usually have to take multiple addresses and convert them to geocodes. But how do you do this?
Enter Geocoder. You may be asking yourself, "Who's Geocoder?" No, no my friend; Geocoder is not a who, it's a what. It is a little web app that will retrieve the coordinates of any address (known to Google Maps), using the Google Maps API. The beautiful thing about Geocoder is that it allows you to perform batch retrievals using any character(s) to separate the records. Geocoder also gives you the ability to drop a draggable marker onto the map and it will tell you the coordinates of the location you move it to. This is extremely helpful for locations without addresses. And best of all, Geocoder is completely free and onemarco.com-independent. "How," you ask? Simple, you can download Geocoder and insert your Google Maps API key in the index file. It will run on any web server as long as you have an API key. I've even zipped it up into a convenient archive so that you can download all the files with one click.
Geocoder is free to use for any reason without any restrictions. Just credit me if you redistribute it.
P.S. I would like to thank Simon Reynolds for designing my masthead. You can check out his blog at SR28.com and his artwork at 4StoryStudio.com. His blog is designed beautifully.
Published on Wednesday, May 16, 2007 .
Welcome to my JavaScript blog, onemarco.com, or as I like to call it, Blog de Alionso. I've been developing with JavaScript for about six months now and I've learned so much from others' blogs. I'll be sharing some of the scripts I've developed recently, in the hopes that my experience and knowledge will help others.
What?
Today I present the Tooltip object for the Google Maps API. It is used to add quickly-appearing, easy-to-style (via CSS) tooltips to Google Maps' markers. This is in contrast to the built-in tooltips of versions 2.5 and higher, which appear after a short delay and cannot be styled. You can view an example the new example of the tooltips in action which also includes a sidebar.
View the Tooltip source code. The code is free to use for any reason without any restrictions. Just credit me if you redistribute it.
Why?
I developed the tooltips for two reasons. First, I find it difficult to figure out which marker a sidebar entry belongs to. It is time consuming to look at the letter for the entry and find the matching letter on the map, especially when markers overlap and hide each other. It is easier if the tooltip appears above the marker when I hover over the sidebar entry. Secondly, sometimes I just want to quickly figure out what a certain marker on the map is without having to look for its corresponding letter in the sidebar. And having to click on the marker to pull up the location's name is annoying, especially when it moves the center of the map. It just seems natural to me that when you hover on a marker, the name of the location should appear. Besides, it was a good exercise in extending the Google Maps API.
Continue reading 'Custom Tooltips for the Google Maps API'
