The <label> Tag

The label tag makes completing forms easier. The main point of the label tag is to provide a usability improvement for mouse users. According to the W3C: “Some form controls automatically have labels associated with them (press buttons) while most do not (text fields, checkboxes and radio buttons, and menus).  The LABEL element is used to specify labels for controls that do not have implicit labels”.

So what does the label tag do for us? Basically it allows you to extend the clickable area for most form elements. For example, instead of having to click on a radio button, you can click the button or some text that’s been enclosed in a label tag. While a typical radio button might appear like:

<input name=“option1” type=“radio” /> Click here to select option 1

The same button with a label could look like either:

<label><input name=“option1” type=“radio” /> Click here to select option 1</label>

or

<input name=“option1” type=“radio” id=“option1” /> <label for=”option1”>Click here to select option 1</label>

Notice the differences between these two examples. In the first example, the input element and associated text have been wrapped within a label tag (implicitly associated). This is the easiest way to use the label tag; however in some cases the text you want to associate with a form element may not be adjacent to it. This is where the second example comes in handy. Here, the associated text is wrapped by the label tag, and the label tag has a “for” attribute which specifies the id of the element to associate the label’s contents with (explicitly associated). In this case, we use the id attribute of the input element “option1” in our label’s for attribute. The end result is identical from the user’s perspective.  Labels also allow you to target the text of form elements so that you can style them without any extra div or spans tags. Pretty handy.

Check out this example that shows two simple forms; one without labels and one with.

If you click on the various elements on the form on the left, you’ll see the only way to make choices is to click exactly on the control, whereas on the form on the right, not only can you click on any of the form controls, but you can click on the text associated with the control. And in the table example, you can even click the space around the control (the blank areas in the table cell) which allows you to easily select the radio buttons.

Also note that labels help users that have screen readers when they access forms. Screen readers will read out the label text and then the form elements associated with it. Without label tags, most forms are just read as list of items with the text coming together (e.g. first name, last name, email address) followed by a list of form fields (e.g. input box first name, input box last name, input box email, etc). With label tags added, screen readers read the label correctly along with the input field it’s associated with.

While the label tag is nothing new, some developers forget how beneficial they are while others don’t know they exist. So the next time you’re designing a form, remember that people don’t like to have to hit tiny targets with their mouse when they can just as easily click in the vicinity to accomplish the same goal.



I’ve seen code wrapped at 80 columns plenty of times before, but something about picking apart this code at that moment made me suddenly ask why. What was so special about this 80 column “standard” and why was it seen throughout the programming world? When I first started out coding this was just assumed to be the way to do things but I had never fully heard an explanation as for why this was done.

As it turns out the answer lies in old technology and tradition. In the early days of coding,  text based terminal displays were only 80 characters wide, so any lines longer than 80 characters needed to be wrapped. There just wasn’t any choice in the matter. Remember that GUIs and mice didn’t exist back then and scrolling was typically done only vertically. Some people believe that the even older computing method of using punch cards, which also typically had 80 columns, is the reason for this style of coding, however while it may have influenced the design of those old terminals, I don’t believe that punch cards directly gave way to practice of coding text at 80 columns.

Now since virtually no one uses an old terminal to write code, and today’s monitors are larger and have larger display resolution than older machines, why do we still see this? The answer? Tradition. Well that and readability. While most modern code editors will let you type a single line for as long as you want, reading that line becomes a huge pain in the ass. You’re forced to scroll horizontally to the right to read the code or comment, and then scroll back to the left to get back to the rest of the code. While an 80 column limit might seem constrictive or limiting, it actually makes code easier to read, and can help you write better code by making you find ways to shrink your code down to fit in one line. Another advantage to limiting the characters per line is code comparison. By staying with the 80 column rule you can usually fit two files side by side and examine them line by line quite easily.

Oh and while 80 columns is sort of a standard, 72 and 76 column layout are also quite common, but slightly more restrictive. Personally I am lazier than I like to admit and I often don’t pay a load of attention to how many columns each line of my code takes up. But that’s being both a bit lazy and selfish. By making your code readable, it helps you and anyone else looking at it…and you just know you’re going to need another set of eyes looking at your code at some point to help ferret out a bug down the line. And while I’m no advocate for 80 columns, if you stick with a layout that makes your code easy to read why not pick something like 100, 120, or 132 columns now that most people have larger monitors? Being lazy I also don’t think that any of this should be a rule but more of a suggestion or guideline. Bottom line, once you get your code to work the way you want it to, why not make it look good and improve the readability at the same time?

Requiring taxpayers to file returns without being told what the government already knows makes as much sense “as if Visa sent customers a blank piece of paper, requiring that they assemble their receipts, list their purchases — and pay a fine if they forget one,” said Joseph Bankman, a professor at the Stanford Law School.

In other words, why in 2010 are we still burdened by the same ridiculous, error-prone system, that is decades old, that everyone (except accountants) hates? Most people either pay someone to prepare their taxes or they buy software and do it themselves. There are also those who use free software to prepare their taxes, but regardless of how you do it, it takes time, sometimes money, and is an endlessly annoying task.

In the digital age, filing income tax returns should be a snap. The important data from employers and financial institutions have already been sent to the government’s computers. Yet taxpayers are still required to perform the anachronistic chore of preparing a return from scratch. And, in many cases, they pay a software company for the privilege.

I highly encourage you to read this article and start thinking of how much better this annual root canal could be. I just got mine done and it made me sick.

Update: I may be disgruntled but I’m not as angry as this guy.

For those of you that haven’t looked at the code that generates the thumbnails, the plugin uses the individual carousel images as the background image (CSS background-image) for each respective thumbnail div. I did this primarily for speed. By reusing the carousel images as the background images for the thumbnails, there’s no added processing needed to create the backgrounds. The trade off here is pretty obvious; speed for recognition.

For many images this works out just fine, but for some it doesn’t. Therefore I have come up with two alternatives for better thumbnail images. I will present these options here, but I am not yet making this part of the plugin itself. Your feedback will determine if a future version of the infinite carousel will incorporate one of these new methods to generate thumbnails.

Method #1 – HTML

The other easy solution to creating thumbnail is to simply resize the carousel images to fit into a smaller area. The biggest issue with this resizing the individual images and using them as thumbnail images is that a) the quality degrades (pixelization) and b) the aspect ratio may not be the same as the original image. There’s nothing you can do about the quality when you take a large image and change the width and height attributes in a web page. Thems is just the facts of web life. An images resized by altering its dimensions will end up pixelated to some degree. Not the end of the world. The aspect ratio can also be overcome by properly calculating the correct width and height for thumbnails based on your full size images. For example, if your images are 800×600, setting a width and height for your thumbnails of 40 pixels would end up squashing the image. However if you set them to 40×30 then they would better represent the actual images.

Click here for an example of method #1.

Method #2 – PHP

Another solution is to generate properly resized thumbnails automatically using the proper aspect ratio using PHP,  so that the smaller image is the proper size and not pixelated. The trade off here is processor utilization. If you have a lot of traffic to your site then without some sort of caching mechanism, the constant thumbnail generation could end up being a real drain on your server. The aspect ratio isn’t as much of a problem with the PHP solution as the PHP script that generates the thumbnails can easily be coded to generate the them using the same aspect ratio as the full size images.

Click here for an example of method #2.

Method #3?

While I did say there were two alternatives for the thumbnail issue, there does exist a third option — manually creating the thumbnail images. You could generate your own scaled down versions of your carousel images and then point the plugin to a folder of thumbnails. This would require extra work in creating and managing more images, increase the number of requests to the server (unless we used sprites), and also require some sort of special naming convention so that the plugin could correlate images with their respective thumbnails. This would increase the quality of the images and keep server processing to a minimum, at the expense of giving you more work in creating and managing images. I’m not big on more work myself, but to each his own.

One issue with using either the HTML or PHP solution is that since we’re moving from using a background image to filling the div with an image, we can’t as easily place numbers on the thumbnails as we did previously. It can be done, but now it would require CSS to position the number over the image in the div.

Personally I’m leaning toward method #1 as the most viable solution. As long as your thumbnails aren’t tiny, scaling the full size images down should give fairly decent results and not cost anything extra in terms of server requests or processing. View the source code of the first example’s modified carousel code to see the two lines that were changed.

If you’d like to have the PHP script used in method #2, post a comment and if I get enough interest I’ll post the source.

Firefox and Chrome

First off, Mozilla and Google both released updates to their web browsers. Firefox 3.6 is out now, and in addition to some bug fixes it introduces eye candy known as “personas”, stale plugin protection, downloadable web font (WOFF)  support, support for new CSS attributes such as gradients, background sizing, and pointer events, and support for new DOM and HTML5 specifications including the drag & drop and file API, which allow for more interactive web pages.

Google released the fourth version of their Chrome browser which added the ability to add extensions and sync bookmarks across multiple computers.  They also have added more HTML 5 support including  LocalStorage, Database API, WebSockets, and more. I like Chrome, but I still haven’t switched to using it as my primary browser (still Firefox). I think it’s making good strides but for the time being I still use it  mostly for testing. I like it, don’t get me wrong, it’s just that Firefox and I are old friends and well, I don’t see a need to dump Firefox just yet.

The iTablet iSlate iPad

Just yesterday Apple released their long awaited tabled, the iPad. Almost instantly the jokes about the name iPad began to circulate around the Internet with no end in sight. I admit I also cringed at the name, and was hoping for something more inventive than iPad. While Apple’s iWhatever line is certainly good branding, it’s wearing thin on me and it’s inevitable that at some point they’ll need to come up with a better solution.

Name aside, I, like many others, was a bit let down by the product that Apple released. Granted, with all the hype and rumors swirling around the tablet, it was virtually unavoidable that no matter what Apple released that it wouldn’t be as amazing as everyone had dreamed it would. A lot of reports call the iPad just a big iPhone with no camera (or ability to make calls) and since I don’t own an iPhone (can’t stand AT&T and don’t want to endure the raping they call data charges) I guess I’ll have to take their word for it. Personally I think I’ll wait until the next generation of iPads comes out before I plunk down $500+ for one. It looks like a decent start, but it has a ways to go before I see it as the “magical” and “revolutionary” product that Steve says it is.

Stop Using IE6

It’s no surprise to those of you that read CatchMyFame that I don’t support IE6 at all. If anything I create works in iE6, it’s by accident. Not only have big names like YouTube announced that they will be ending support of IE6, even Microsoft announced that it’s probably a good thing to upgrade to a more recent browser. The fact that IE6 is still alive and kicking amazes me, though I am well aware of the arguments for using it – primarily ignorance and sloth.

HTML5 and CSS3

I’m happy to see increasing support for HTML5 and CSS3, however I haven’t jumped on the bandwagon just yet. There are some really great features in these updates, however the sad fact is that until all the major browsers support the features, we’re forced to find workarounds and create special conditions to account for those features that don’t exist yet, or aren’t fully implemented, in the major browsers. Like rounded corners? I do, but since some browsers don’t understand the border-radius rule, you either need to generate a solution for those browsers that don’t get it (<cough>IE8</cough>) or ignore it and let those visitors that use browsers without CSS3 support see squared cornered.

So the dilemma is, do we forge ahead and learn HTML5 and CSS3 now, or do we wait until there’s mass support for it and most users will benefit from it? Personally I’m in the first camp and think we should learn as much about it as possible and implement it when its most accessible and least problematic. I also think that if more developers start using HTML5 and CSS3 that it will force browser developers to come out with updates for the features more quickly.

PayPal – Love it or Hate it?

I’ve been a PayPal member for a decade. That said, overall I think it’s a very good service and for web developers it’s a great way to be able to accept payments online. It’s far easier than trying to get a merchant account, a payment gateway and everything else you need to accept credit cards on the web. They offer several services that allow you to integrate their service into your website including something called Instant Payment Notification.

In a nutshell, IPN allows PayPal to send a notification to your server with transaction details whenever you receive a payment. I recently worked with NotOneBit.com to develop a system where my client could sell eBooks online and accept payment with PayPal. PayPal would notify the client’s server upon receiving payment and the customer would almost instantly be able to download their purchase. The system worked perfectly; customers were able to make purchased quickly and easily and then download the eBooks directly from the website. No fuss, no muss.

However we soon discovered a fatal flaw in PayPal’s seller protection policy after one customer claimed that their PayPal account had been hacked and someone used their information to make an eBook purchase. You see, PayPal only protects sellers where there are tangible goods that can be tracked, and since my client sold digital goods, they therefore weren’t protected. My client argued with PayPal that based upon the system that I and NotOneBit designed, that there’s no way that this claim of a hacked PayPal account could be legitimate (we send download data to the customer’s email address so this supposed hacker would have also needed to hack  this person’s  email account in addition to their PayPal account). PayPal didn’t seem to care and just reiterated their policy, so in the end, my client was out the money for the purchase (which PayPal happily refunded to the person with the supposed hacked accounts) and the eBook. In the end the person got a few free eBooks (and hopefully some bad karma). It’s really a shame that PayPal caves so easily on a topic like this when if they took a few minutes to understand what we and probably many other developers using their service to help deliver digital goods have done, then they’d see the obvious fraud.

Caveat venditor.

Version 1.1 introduces the option to specify the path to where you are storing the navigation images that come with the plugin. Previously you needed to either edit it by hand or use the folder that was coded in the plugin. Now you can specify the path on a per instance basis.

For more info, see the original before/after plugin page which has been updated with the latest information or see our jQuery plugin page which list all of our plugins.

So What’s New?

Where to begin? Based on feedback from users, I’ve added more options than you can shake a stick at. Go on, get a stick. Shake. Can’t be done. There are so many new features that I was a bit worried that the plugin might suffer from option overload, but in the end I think what remained was not only useful but vital to the plugin.

In addition to the features in the previous version, I’ve added the ability to:

• add easing as an option with separate left and right easing effects
• specify the path to the navigation images as an option
• specify how many images should be viewable at once
• specify padding around images
• specify how many images should advance when the user navigates using the previous and next controls as well as when the carousel is running automatically
• hide navigation controls
• auto hide navigation controls so that they appear only when the user moves their mouse over the carousel
• auto hide captions so that they appear only when the user moves their mouse over the carousel
• prevent the carousel from automatically starting
• move the previous and next navigation control outside the carousel so that they don’t appear on top of any images
• use keyboard navigation with the ability to disable it (left and right arrows for previous/next, p for pause, s for start)
• access callback functions

The Most Basic Example

Download

jQuery.InfiniteCarousel2.zip (contains the uncompressed and minified versions in the same zip file. The uncompressed plugin is about 18k while the minified version is about 9k)

Demos

To show off some of the things version 2 can do, I’ve created several demo pages for easy viewing. Each demo link will open in a new window. View the source code for a demo to see the options that were selected.

1. A basic example with default settings
2. Displaying and advancing more than one image at a time
3. Displaying multiple images while advancing one at a time with easing effects
4. Navigation outside the carousel with captions automatically hidden
5. Thumbnails and navigation hidden. Keyboard navigation active
6. Navigation automatically hidden with keyboard controls disabled. Also shows how to hint at the next and last images using CSS
7. An example of callback functions
8. An example of how easy it is to integrate with a lightbox plugin. Easing functions are also being used in this example
9. An infinitely scrolling slideshow with no controls enabled

How to Use

With the exception of new options, the carousel works in the same way as previous versions. First, all of the images that you want to display should be the same size and wrapped in a containing element (I recommend a div) which must have an ID.  Note that by using CSS, you can style the container (carousel) div to have left and/or right padding so that you can display a small amount of the previous and/or next images (see demo #6 above). The carousel must be a list where each list item is the image and optionally a paragraph containing the caption. See this example.

<div id="carousel">
<ul>
	<li><img alt="" src="p1.jpg" width="500" height="213" /><p>This carousel has no padding applied to it so you won't see hints for the previous and next images. Also, the progress bar could be disabled by setting just one option on the plugin.</p></li>
	<li><img alt="" src="p2.jpg" width="500" height="213" /><p>This is the caption for the second image. The height of the caption box is an option.</p></li>
	<li><img alt="" src="p3.jpg" width="500" height="213" /></li>
	<li><img alt="" src="p4.jpg" width="500" height="213" /><p>It's not easy being green.</p></li>
	<li><img alt="" src="p5.jpg" width="500" height="213" /></li>
	<li><img alt="" src="p6.jpg" width="500" height="213" /><p>You can easily mix images types. Gif, png, and jpeg all work without any issues.</p></li>

</ul>
</div>

All images *MUST* have the width and height declared otherwise the plugin won’t work in Safari, Chrome, and any other webkit-based browsers. Also, all images should be the same size.  If you want to have a caption with an image, it *MUST* exist in a paragraph after the image.

To use the plugin you’ll need to have a copy of  jQuery, or point to jquery on Google, and the plugin. Place the files on your site and link to them:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.infinitecarousel-2.0.0.js"></script>
<script type="text/javascript">
$(function(){
	$('#carousel').infiniteCarousel();
});
</script>

Finally, make sure that your CSS contains a rule for the width of the list within your container so that it’s set to a minimum of the combined widths of all your images. For example. #carousel ul {width:3000px}. In version 1.2 of the Infinite Carousel this isn’t necessary, however for anyone with JavaScript disabled, declaring the width in your style sheet can give them a simulated (albeit limited) carousel experience.

Be sure to check out the demos above!

Note that in this new version of the carousel, since the path to the navigation images is an option, you may need to specify the path to your installation if you aren’t using the path of “/js/infinitecarousel/images/” which is the plugin’s default path. More on the options below.

$('#carousel').infiniteCarousel({
	transitionSpeed : 2000,
	displayTime : 10000,
	textholderHeight : .25,
	displayProgressBar : false
});

Previous Version

I will continue to make the previous versions of the Infinite Carousel available until there seems to be no demand for them. To download them, click here.

• The ability to control how many images are displayed at once
• The ability to control how many images are advanced automatically or when someone manually advances the carousel
• Player controls can be disabled
• Autohiding player controls
• Autohiding image captions
• Previous/Next buttons can be displayed over the images or outside and next to them
• The path to the player images is set as an option
• an Easy integration of the jQuery Easing plugin for cool transition effects (you can specify easing effects for the previous and next transitions)
• Easy lightbox integration (tested with fancybox, colorbox, balupton, and leandroviera)
• Callback functions
• Disabling the automatic start of the carousel

Stay tuned for more information and a lot of demos. Happy holidays!

You can visit http://docs.google.com/viewer to build links that use Google’s viewer, or follow their instructions:

Technical Documentation – Instructions for building your own URLs

All viewer URLs should use the path http://docs.google.com/viewer. This path accepts two parameters:

url: The URL of the document to view. This should be URL-encoded.

embedded: If set to true, the viewer will use an embedded mode interface.

For example, if you wanted to view the PDF at the URL http://labs.google.com/papers/bigtable-osdi06.pdf, you would use the URL: http://docs.google.com/viewer?url=http%3A%2F%2Flabs.google.com%2Fpapers%2Fbigtable-osdi06.pdf

For a demo, check out this sample PDF.