Let’s begin…

Alphabetize Your Code

Alphabetizing your code is an extra organizational step often overlooked. It’s especially helpful in PHP classes containing getter and setter functions, but it also comes in handy for CSS and JS. Often times similarly named elements will be somewhat related in function, so clustering them together makes them easier to find.

I’d recommend alphabetizing everything from JS class and function names, to CSS classes and ID’s. You’ll notice that every code example in this article is alphabetized to further exemplify the point.

Comment Everything

Comments are essential, especially among devs working in groups. The styles seem to vary slightly from person to person, but the theme is the same – you can never comment too much.

Here is my commenting style for JS / PHP:

/******************************************************
 * Cart.class.js
 *
 * A class of JS functions associated with the
 * tasks performed by the shopping cart.
 * @author Koa Metter em@mail.com
 * @copyright Copyright (c) 2010, Company
 ******************************************************/
var Cart = {

    // ...

    /**
     * Add item to cart
     * @param string item_id
     * @param string item_quantity
     * @todo Check for string validity
     */
    addCartItem: function (item_id, item_quantity)
    {
        if (!Utilities.isEmpty($('#cart-items')))
		{
			Cart.AJAX({
				data: 'call=addOfferingToCart&args[0]='+item_id+'&args[1]='+item_quantity,

				// Things we'd like to do upon 'status => success' ajax response
				success: function (msg)
				{
					Cart.displayNewCartItem(msg);

					// Update cart total price
					Cart.displayCartTotal();

					// Also update checkout rebilling terms!
					if (msg.response.rebilling_terms_agreement){
						$('#billing-terms-agreement-label').html(msg.response.rebilling_terms_agreement);
					}

					Cart.proceedBtnCheck();
				}
			});
		}
    }

}

When commenting in PHP, phpDocumentor can be used to build a comprehensive dev manual for your source code. I use the same documentation style for JS simply because I come from a PHP background.

Though CSS doesn’t need the phpDocumentor-type of commenting, it should nevertheless remain detailed to explain the elements and their purpose. Clustering elements that are related to the same stylistic area or function of the website helps in organizing without the need of many comment blocks.

Indent CSS

Indenting your code is an obvious standard with most programing languages, but often times CSS is left out of the loop. Indent a CSS element if it’s a child of a parent element, like so:

#container {
    color:#222;
    width:100%;
    z-index:1;
}

    #container .lg-block {
        height:300px;
    }

    #container .sm-block {
        height:100px;
    }

.etc {
    /* ... */
}

The above CSS example shows that the class .lg-block is specifically contained within the ID #container, thus we are indenting it to visually represent the same thing.

OOP-ish Javascript

This topic deviates slightly from actual “coding standards”, but I think it’s equally important – how to format your JS into usable, organized classes. This rule takes into account all other coding standards (alphabetization, indentation, commenting, etc) and applies them to JS, adding in OOP-like objects.

Here’s an example:

var Vehicles = {
    /*
     * Give us the word "Bus"
     * @return string
     */
    bus: function ()
    {
        return 'Bus';
    },

    /*
     * Give us the word "Car"
     * @return string
     */
    car: function ()
    {
        return 'Car.';
    },

    /*
     * Give both car() and truck()
     * @return string
     */
    getCarAndTruck: function ()
    {
        return this.car + ' and ' + this.truck;
    },

    /*
     * Give us the word "Truck"
     * @return string
     */
    truck: function()
    {
        return 'Truck.';
    }
}

// Let's call the function getCarAndTruck like so:
Vehicles.getCarAndTruck();

Shuffling your JS into objects helps associate functions with tasks / groups and thus creates a more organized codebase.

Hopefully this helps. If you have a different method of commenting and/or organizing your CSS or JS code, let me know!

For those who have similar inspirational needs, allow me to lend a helping hand. I’ll list my personal favorite websites categorized by three major design pools: web showcasing, typography, and digital art.

CSS / XHTML / Flash Showcases

Digital beauty in the form of web design…

The easiest place to gather hordes of inspirational material is among the hundreds of CSS/XHTML and Flash showcase websites. Each of these showcase websites are dedicated to the programmers looking for inspiration through others works. Here are a few of the best:

CSS Vault & Design Shack

Both CSS Vault and Design Shack have a huge collection of CSS-based websites that offer the common user the ability to comment and rate each submission. The Vault also showcases a load of css demos, hacks, and tools, while the Shack sports bitchin’ tutorials.

Design Snack

Although very similar to CSS Vault and Design Shack, Design Snack uses cookies to award submissions a ranking on their website. Registered users of Design Snack can rate submissions, much the same way Digg users rate articles – the popular ratings get noticed and awarded, while the runts of the group are dropped from the website.

Stylegala

Stylegala stands out from the rest by syndicating important design-related news directly onto their website. This, along with their groovy features section, and wicked forum gives them a special place in my code-ridden heart.

FWA

Without a doubt, FWA is one of the most pristine Flash web awards on the net, showcasing over 2,300 websites in the last seven years. To be listed or better yet, receive Site Of The Day (S.O.T.D.) or Site Of The Month (S.O.T.M.) notoriety, is a real honor. Plenty of talent listed for the gawking.

A List Apart – Design

Because of the abundance of well-written articles on A List Apart, this website will no doubt appear once for each category. Though the website itself is pure beauty, A List Apart’s purpose is to provide meaningful web reads for us geeks. They succeed.

Typographic Hotness

It’s not what you say, but how you display it…

It may not be the most interesting of topics, but typography is probably the most important detail of web design. The text spacing, positioning, color, size, and angle can make or break a designs (web or print related) appeal. When you’re in the mood for some typographic porn, these sites might tickle your fancy:

I Love Typography

I Love Typography is hands down one of the best typography related websites – not only are endless examples archived for viewing pleasure, but its authors frequently attempt to explain why certain designs are more appealing than others.

Typographica

Typographica says it best: “Typographica is a journal of typography featuring news, observations, and open commentary on fonts and typographic design.” One of my favorite typography journals.

A List Apart – Typography

Once again A List Apart makes it into my list of favorites – this time for typography. The first true typography article I ever read came from A List Apart: Typography Matters.

Smashing Magazine

Although Smashing Magazine spreads across each of these categories nicely, it’s typography section is especially nice. There generous gift of free fonts once a month and “Monday Inspiration” articles quickly have you dreaming with font.

ISO50

Scott Hansen, a typography god, created ISO50 to display his visual works.
Easily a print design prodigy, Scott has repeatedly inspired me to think outside and even beyond the box.

Mark Boulton

Though Mark Boulton’s website has plenty of useful information, this post in particular is one of the best crash courses in learning better typography habits that I’ve ever read. Take ten minutes to absorb the tips – be a better designer. As simple as that.

Art, The Physical Kind

Inspiration that hangs from your walls…

Yes, there are many kinds of art and no, I’m not defining art as anything you can hang on your wall. However, surrounding yourself with inspirational works outside of your computer can help in grasping real world print and design. Here are a few artists that inspire me on a daily basis:

David Lanham

Digital artwork at its best. David Lanham takes everything you thought you knew about artwork and makes it better – way better. The colors are amazing – the prints so perfectly detailed. Every print available for purchase also comes in digital form, as a desktop wallpaper, allowing you to capture the inspirational goodness on all mediums.

Scott Saw

Patterns are Scott Saw’s obsession. His work is littered with brilliantly colored stencils, covered with scenes of nature, mechanical objects, or spiritual innuendoes. I personally have a small collection of Scott’s work – I recommend starting your own.

ProcessRecess – James Jean

A beautiful site coupled with amazing artwork you can actually buy – James Jean works magic on a large number of different mediums, including glass and aluminum. His use of gradients makes him my personal hero.

Are Age – 555[Design]

Are Age is his art name and real-world art mixed with Photoshop skills is his art game. (I rhymed.) Less fiction, more life. Are Age delivers rich content saturated in complex detail. One of his works are sure to appear on my wall soon.

What Did I Miss?

Add your favorite inspirations…

Obviously my inspirations might differ from yours. Add the sites that inspire your creative by leaving a comment.

The all-too-awesome PHPMailer class has been updated and is awaiting your download.

If you use MooTools (or even if you don’t), Vacuous Virtuoso’s Fancy Form is totally worth checking out. It’s a mix of CSS and Javascript that enables you to create custom form checkboxes. There are other script on the net that claim to do the same thing, but none are as cross-browser compatible.

Lastly, to add a splash of color to your ajax load processes, check out Bram Van Damme’s Progress Bar Handler. It’s probably the smoothest, best looking non-flash based progress bar on the net.

This article covers how to use Visión. To learn more about Visión, check this out.

Setup Vision

If you haven’t already done so, download a copy of Visión and unzip it to any location that’s able to parse PHP files, like localhost.

For a basic install of Visión, the only file you need to edit is index.php:

/**  setup  **/
$imgDir	= "img"; 		// image directory
$imgSub	= false;		// include sub directories when gathering images?
$imgId	= "lgImage"; 	// id tag for images

To successfully pull images from your images folder, edit $imgDir accordingly. The above example would be looking for images in a folder called “img”, located in the same directory as the index.php file you are editing.

If you would also like to include images located in folders within the images folder you’ve specified, set the $imgSub variable to true. If $imgSub remains set to false, all sub folders within the specified images folder will be ignored.

Lastly, you may choose to specify the id used for your image on display. Under most circumstances, you won’t have to change this value.

Integrate Vision

Once you’ve got the index.php edited to your liking, integrating Visión into a web application of your choice is a matter of copying and pasting a few lines of code.

Make sure all the PHP code (lines 1-11) is copied, along with the javascript code (lines 25-37), and content within the id="content" div.

Easy, Huh?

That wasn’t too hard, right? If you’ve hacked/tweaked/etc Visión for your website, let me know.

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');

The above code will work for inline CSS, that is, CSS mixed with HTML:

<div id="png_bg" style="position:absolute; left:140px; height:400; width:400;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
     src='image.png', sizingMethod='crop');" >
</div>

If you don’t want to mix your CSS with your HTML, external style sheets are the obvious choice. However the above example won’t work in an external style sheet. Instead, the path to image.png needs to be absolute, like this: /direct/path/to/image.png

Your external style sheet would look something like this:

#png_bg {
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='/path/to/image.png');
}

Shout at me if I got this all wrong.