Icons and Events

Dec 28, 2009
Episode 5
We are bidding farewell to 2009 with an iconic event! Actually, we're looking at how to find and use icons, and how to wire up your pages to be interactive.

Thanks to those who make Doctype possible!


Sometimes an idea is best conveyed using an icon, especially when there's an established and well recognized symbol representing a concept that everyone understands. You can be creative with the styling of your icons, but if there's already a de facto picture for something, like RSS for example, it's best to not reinvent the wheel.

When designing icons, you should always start with the contour or shape of your icon, in black and white. This will ensure that it looks good in a wide variety of stylings and mediums, that even go beyond the web. Once you have your unique shape, you can color it in and add details. The trick is to make sure that it's recognizable when it's small, but still interesting when blown up to larger sizes.

If you're not comfortable with creating your own icons, or if you just don't have the time (who does?) then you might consider just using some pre-made icons. The thing to be careful with here is content licensing. You want to make sure that the icons you pick are OK to use for your project.

Javascript Events

Programming in the browser relies heavily on events. Actions users take in the browser like clicking a link, pressing a button, or moving the mouse can all be used to trigger pieces of code. We call these actions events, and learning the quirks of event handling in the browser can be tricky, but very rewarding.

There are several ways to set up event listeners, and you can learn more from the links below. In this episode we look at adding the code right to the tag, and using the event listener utilities in modern browsers.

Understanding the order in which events fire in a nested page can be tricky. Generally they fire from the deepest element up to the top level. This is known as bubbling. Some browsers support firing in the opposite direction, this is known as capturing, and is not used as often.