The underlying programming languages that make the web what it is have been evolving over the years, but never have they been as powerful as they are now. While these new abilities are great, it’s not very practical to use them unless there is cross-browser support. Lucky for us the newer versions of most major browsers have decent support for these features. Also, fall-backs can be used to ensure a decent experience for people using older browsers.

I’ve been tinkering around with HTML5 lately, and decided to create a simple to-do list to demonstrate some of the new features. Along the way, I realized which features would be most useful and added them. At some point, probably after hammering out the style sheet, it became clear that this was now more than a to-do list, it was a Task Management App.

Full Disclosure: I normally make my to-do lists with pen and paper, but I’ve been using this one for several months now and really enjoy the interface.

So let’s take a look at the Task Management App I put together with HTML5, CSS3, and the popular JavaScript Library called jQuery.

Fast Loading Web Page

My To-do List is fast loading. It contains no images at the moment. All graphics are the result of CSS styles which are rendered in the browser very quickly.

Sortable List Items

With the help of some JavaScript, users are able to drag and drop list items to alter their order. They are automatically renumbered. Because many of my list items usually linger for extended periods, my lists can become quite lengthy. I found myself adding new list items only to scroll down and drag them up to the top every time. To avoid this repetitive action, new list items now appear at the top instead of the bottom.

Editable Content

Thanks to the HTML5 feature called content editable, the list items can be edited by a user simply by clicking on the text of the list item. Once the text has been edited, the user has the option to save or cancel. Notice that each word is automatically capitalized to increase readability.

Local Storage

For a to-do list to work properly, it’s essential that the list items are remembered somehow. This is accomplished with local storage, an HTML5 API that gives web developers the ability to store up to 5MB on a users local machine. So your list will still be there when you return. The list data is stored client-side (in the user’s browser) so no worries about other people going to the site and seeing your list items.

Complete Feature List

• Fast Loading Page
• Local Storage
• Sortable List Items
• Editable Content
• Removable List Items
• New List Items Prepended (added to top of list)
• Each Word Automatically Capitalized
• Pseudo Element Based Numbers (:before)
• Clear All Button
• Donation Button (Support Creativity!)
• Border Radius
• Box Shadow
• Text Shadow

Features Wishlist

• Better Print Styles
• Multiple Lists (for different purposes)
• Removed List Items Are Saved (in separate “Done” List)
• Optional Time/Date-Based Deadlines For Each Item
• E-mail Notification of Upcoming Deadlines

I know it’s really nothing to write home to Mom about, but since I found it useful, I thought I’d share. Try out my Task Management App for yourself. If you like it, consider it my gift to you for the holidays. Also, If you have any suggestions for more features, please let me know and I’ll try to incorporate them in future versions.

Task Management App

I’m very pleased to announce the roll out of an e-commerce website for Dead River Coffee. They are located downtown Marquette, Michigan and are the area’s premiere coffee roasters. Go ahead, ask anybody. For years, the only way to get your hands on their fresh roasted coffee beans was to drive down to their shop and pick it up. Now this great coffee is available to the world at the click of a button.

The site was designed with stark minimalist intention and a purposeful simplicity to invoke a simpler time. The color scheme consists of only black, gray, and cream. The background is a textured cream color. The logo at the top is the same logo they use to stamp on a plain brown bag before filling it with the coffee beans of your choice. The logo, tag lines, page titles, and all other text are either black or gray.

Embellishments include the prominent use of tag lines in the header and footer, a large ring-shaped coffee stain in the upper left of the header, a custom coffee cup with coffee stain under it that separates the footer from the content of each page, and the one pound and half pound bags full of beans that overlap the photos on the product pages.

Also featured is a horizontal drop down navigation menu located under the header, a three-column layout for the main page, and beautiful black and white photos scattered throughout the site.

WordPress was used as the CMS. Several things were made possible by this including movable modules and dynamic content on the main page. The movable modules are actually text widgets that can be easily rearranged or exchanged in the administration panel of WordPress. Some of the content on the main page is added dynamically by pulling content from the “About” page and the “Order” page. Also, there is blogging functionality. The posts gets displayed in the “latest news” section.

I used some CSS styling techniques to make adding new photos easier. New photos added to the main page are automatically re-sized to match the width of the columns while still retaining their original ratio. Also, a thin dark border is added to all photos for consistency.

Last but not least, this is a fully functioning, fully integrated e-commerce site. The ordering process works precisely as one would expect. From each individual product page, or from the main order page that lists all products, a visitor can select one-pound or half-pound as the size and hit the “add to cart” button to begin the ordering process.

A shopping cart opens up as a modal window and displays all items in the cart, quantity, price and subtotal. It allows the visitor to modify the quantity, and displays an updated price and subtotal. By pressing the “check out” button, the visitor is taken to the “check out” page which is fully integrated with the same look as the rest of the site.

From here, the visitor can securely enter their private information. After filling in the “City”, “State”, and “Postal Code” fields, shipping is automatically calculated and a new total is displayed. By clicking “confirm your order” the transaction is sent to be processed and the visitor is shown a receipt page they can print for their records. An email receipt is also sent to the visitor.

The layout was designed to be flexible and allow for growth of content in the future. The site is being maintained by Theo at Dead River Coffee so bookmark it and check back often for updates. Seriously, if you like fresh roasted coffee beans, this is the place for you!

Check out deadrivercoffee.com to see the web site for yourself.

After being inspired the other day, I decided it was time to design a new personal site. I’ve owned the domain haidabo.com for a while, but wasn’t really sure what to do with it until now. So, it has become a place to showcase my various projects as well as aggregate RSS feeds from all of my sites with dynamically updated content.

While I was designing haidabo.com, I used a technique that I’d like to share called CSS Sprites. This wasn’t my first time using sprites, but it was the first time I planned on using them to this extent. My goal was to create the entire website using only one image. How is that possible? A sprite is a large image that contains many smaller images inside it. So, I created all of the images for the site and placed them all inside one large PNG24 image with a transparent background.

When calling for an image (any image) in the CSS file, specify the sprite as the background image and give it a width and height. Then use unique IDs or classes to shift the background position specifically for each image. One problem I ran into during this process was repeating backgrounds. Sprites don’t work well for repeating images. They do have some limited ability to repeat one-dimensionally, but it’s tricky. To keep it simple, I decided to use separate images for my repeating backgrounds.

So, why would anyone want to use this technique? Sure, it’s a bit more work to combine all your images and set all those background positions, but in the end it will make your website more efficient. Each image that is loaded on your site requires a separate HTTP-Request (to your server). By combining images into a sprite, you reduce the amount of work your server is required to do. This may not make much of a difference for a small site without much traffic, but as the size of the site and the amount of traffic increase, this becomes more of a benefit.

haidabo.com