The Man Grooveshark Playlist

Here’s another Grooveshark playlist I put together. All song titles have the word “man” somewhere in them. If you have any suggestions, I’ll take them into consideration. One noted omission is Black Sabbath – Iron Man, as I hear it way too often, and it doesn’t really add to the quality of the playlist.

Listen to “The Man” on Grooveshark.

Posted in Grooveshark Playlists | Comments closed

Placeholder Image Generator

This is a great tool for placeholder images for wireframing a project.

A while back, a service called Placehold.it was posted to reddit. It received mixed reviews, most of the criticism being that the site owners themselves, or a hacker could replace all your placeholder images with something much less work appropriate. I decided to create my own placeholder image generator, and release the source code. That way, you can host the application. Sure, it could still get hacked and leave you in a sticky situation, but now it’s your site, not another person’s site. I assume most people put more trust in themselves than others.

Here’s a quick example of how it works (default image):

Placeholder Image

You can view more examples as well as learn how to use it by reading the documentation. The source code is available at the bottom of the documentation, both with a generic version, and one specific to CakePHP.

Posted in Design | Comments closed

The Wonder Years Grooveshark Playlist

I made a Grooveshark playlist capturing most (it’s really hard to get it all) of the music from the Wonder Years TV series. I used wonderyearsguide.com as a reference point. I’m not sure if the website is complete, but it covers quite a bit of music. Some songs that are notably missing are any Christmas songs. I thought they would take away from the playlist, since most people don’t care to listen to Christmas music outside of the season.

There’s a lot of great music from the 60s and 70s, and a few classical pieces as well. Let me know if there’s something notable missing, and I will update the playlist so long as Grooveshark has it available.

Posted in Grooveshark Playlists | Comments closed

Nature Valley National Parks Project

As I was eating my highly nutritious granola bar breakfast this morning, I noticed some writing on the wrapper. Nature Valley National Parks Project will donate $0.10 for each wrapper you mail in, through August 31, 2010. My first WTF was “why would I spend $0.42 on a stamp for you to donate $0.10?” I’m sure I could mail more than one per envelope, but it’s still not very cost effective. Secondly, if this is about nature and preservation, wouldn’t it be better to have a code on the wrapper that I can enter into a website so i don’t have to waste a paper envelope, and fossil fuels don’t need to be burned to deliver all these wrappers to your processing plant? I should note that they will donate a minimum of $250,000 (and a maximum of $500,00), but this seems more like a poorly done marketing campaign, and a mock effort at actually helping the environment.

Posted in General | Comments closed

Misplaced Hate on Flash Based Websites

Flash receives a great deal of hate from the web development community, myself included. Common complaints include load times, performance, unnecessary animations/transitions, forcing users to watch (long) intro movies, inability to bookmark content or specific pages, inaccessibility (especially to mobile users), auto play audio, and that it is bad for SEO. The thing is, most of these same complaints can, and do arise from poor development using HTML, CSS, and Javascript.

I can easily include unnecessary animation and transition effects on my site with Javascript, especially with one of the many Javascript frameworks readily available now. I can load down the site with numerous images and other media, CSS and Javascript files, and bloated markup. I can make a website difficult to use for users, and especially mobile users. I can poorly use AJAX for everything making it difficult or impossible to link directly to anything but the home page.

Flash as a development tool does not require superfluous transition effects and animations (AFAIK). It doesn’t force the developer to include an intro to the site, or to auto play some audio file. There are ways to make sites more accessible in Flash, allowing for bookmarking or directly linking to inner content. The website doesn’t have to take an SEO hit just because it uses Flash. Flash would be less resource intense if there were fewer animations and transitional effects. A secondary, light weight version of the site can be made for mobile users, and others that either don’t have Flash or don’t want to use it.

In my experience, the blame for poor Flash sites often rests in the hands of the developer. It is a poor choice to load up a website with animations. It isn’t user friendly to force users to watch an intro movie that you think is super awesome. The lack of bookmarking, direct linking, and the hit to SEO are all avoidable and to allow for otherwise is laziness. Remember, Flash is just another technology that is often used improperly through no fault of its own.

Posted in Design | Comments closed

jQuery Form Focus Plugin

This jQuery plugin will add a background color to text, password, and textarea input fields in forms when focused, and then revert to the original background color on blur. It is a one line call, with one (optional) parameter, the background color.

You can target all forms on the page with this simple line:

$('form').formFocus();

This will default the focused background color to: #f0f0c0

You can specify the background color as follows:

$('form').formFocus({backgroundcolor:'#ff0000});

which would make the focused background color a very bright red. You can also target forms specifically, whether you only want to use it on a single form, or if you want to specify different background colors for each.

$('#demo1').formFocus({backgroundcolor:'#ff0000});

$('#demo2').formFocus({backgroundcolor:'#0000ff});

Download jQuery Form Focus Plugin

Posted in jQuery | Comments closed

Toolbars on the Bottom of the Page

Adding a toolbar pinned to the bottom of the view port is becoming more common for websites. The idea is to add a bit of functionality, making common links easily accessible at any time. The problem is that it can often give the site a false footer, as is the case with CNET.

CNET Toolbar gives website a false bottom.

As you can see with the image above, scrolling to this point of the article can give the reader the impression that this is the end of the article (as it did with me). But, viewing the image below will show you that there is a large amount of content below this point.

The rest of the page after the false bottom.

Because of the design of the rest of the site, mainly the appearance of the header, a reader can mistakenly assume that an article has ended, when they have yet to read the bulk of the content. When adding functionality such as a toolbar like this, make sure you aren’t decreasing the usability of the site in the process.

Posted in Usability | Comments closed

CakePHP Image Helper

I’ve rewritten my image helper to extend off of CakePHP’s built in HTML helper, rather than reinvent the wheel. The major benefit of using this helper is that it determines the image dimensions, if not specified, and applies them to the image tag, which is one of Google’s rules to optimize browser rendering.

<?php
/**
 * This class builds an image tag. The main purpose of this is to get the image dimensions and
 * include the appropriate attributes if not specified. This will improve front end performance.
 *
 * @author Seth Cardoza <[email protected]>
 * @category image
 * @package helper
 */
class HtmlImageHelper extends AppHelper
{
    var $helpers = array('Html');

    /**
     * Builds html img tag determining width and height if not specified in the
     * attributes parameter.
     *
     * @param string $src relative path to image including the 'img' directory
     * @param array $attributes array of html attributes to apply to the image
     *
     * @access public
     *
     * @return no return value, outputs the img tag
     */
    public function image($src, $attributes = array()) {
        //get width/height via exif data
        //build image html
        if(file_exists(WWW_ROOT . $src)) {
            $image_size = getimagesize(WWW_ROOT . $src);
            if(!array_key_exists('width', $attributes) && array_key_exists('height', $attributes)) {
                $attributes['width'] = ($image_size[0] * $attributes['height']) / $image_size[1];
            } elseif(array_key_exists('width', $attributes) && !array_key_exists('height', $attributes)) {
                $attributes['height'] = ($image_size[1] * $attributes['width']) / $image_size[0];
            } else {
                $attributes['width'] = $image_size[0];
                $attributes['height'] = $image_size[1];
            }
        }

      
        return $this->Html->image($src, $attributes);
    }
}

Download CakePHP HTML Image Helper

Posted in CakePHP | Comments closed

Dissecting Yahoo’s 10 Things Not to Buy in 2010

Yahoo has an article in finance listing 10 items that are pointless to buy in 2010. There are several items on the list that I will definitely still purchase in 2010 despite Yahoo’s flawed logic. The first being DVDs. The article states:

On average, DVDs sell for at least $20 each. That’s pricier than signing up for Netflix or renting movies from cable providers’ on-demand channels.

I’ve never paid $20 or more for a DVD. Maybe if you are an idiot and go to a specialty shop to buy the DVD the week it comes out, you will end up paying this much for a DVD. I rarely pay more than $10 for DVDs because I don’t mind waiting for them to drop in price after their initial release. It’s similar for TV shows on DVD. I’ve never even paid $20 for a season of a TV show on DVD. While I do expect there to be a further decline in DVD purchase because of Blu-ray, Netflix, and Redbox, I see no reason not to buy a DVD if it’s something you will enjoy over and over again.

External hard drives are another item listed, stating that online backup services are the way to go. First, never put all your eggs in one basket. You should have more than one backup, and never rely on someone else to do it for you. Secondly, the article even contradicts itself by stating these online backup services are more expensive than external hard drives. These online services have their benefits, but if you just need a backup of documents and pictures get a couple cheap external hard drives, or even better internal hard drives and an external enclosure.

Next up is compact digital cameras. It seems that in 2010 smaller is not better. Yahoo would have you believe that compact digital cameras are going the way of the pager because of bigger and better DSLR cameras. The problem is that DSLR cameras are much more expensive, and much much larger. While I would love to have a DSLR because I enjoy photography, no one is going to want to bring a these to the club, restaurant, party, etc. to take casual pictures with friends and family.

Update: Gareth makes a great point in the comments, while DSLR cameras probably won’t replace compact point and shoot models, cell phone cameras are getting better with each generation. I expect them to be a much more likely replacement as it is a device almost everyone has on them at all times anyway.

Last up is CDs. This is the toughest one for me to argue for continuing buying, and is more of a personal preference. I still haven’t paid for a digital download of any audio, but have purchased a few CDs as recently as a week ago. Just like DVDs, CDs can be found rather cheap if you don’t mind looking around. I like the fact that I have a physical good for my money, for the same or even a lower price than its digital counterpart. It’s easy for me to grab one disc and bring it wherever if that’s all I want, but I will most likely rip it to my computer and put it on my mp3 player as well.

The average person will most likely be purchasing these items well through this year. While some are adopting newer and better technologies, not everyone needs to, or has the money to as newer technologies are often more expensive.

Posted in General | Comments closed

jQuery Selectors Last and Last-Child

jQuery has a plethora of selectors, two of which being :last and :last-child. It should be very obvious that these do not achieve the same goal. Well, I spent the better part of an hour figuring that out. I went down the page of selectors knowing jQuery has a selector for :last-child, and saw :last first. I toyed around with it a bit to no avail. I finally did a couple searches on jQuery last selectors and found out that jQuery also has a :last-child selector, which is what I was really looking for.

The :last selector selects the last element on the page matching the entire selector. The :last-child selector selects all last children matching the entire selector.

$(‘div p:last’) would select the paragraph highlighted in red:

<div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</div>
<div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</div>
<div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</div>

while $(‘div p:last-child’) would select the paragraphs highlighted in red:
<div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</div>
<div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</div>
<div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</div>

Posted in jQuery | Comments closed