I dunno, maybe someone might find this helpful, either way enjoy!

If you did happen to find this tutorial informational or helpful in anyway, please let me know below by leaving a comment. As I venture more and more into 3d information sharing, I want to know how my teachings are being received by my viewers before really continue any further down this avenue.

Thanks everyone!

I dunno, maybe someone might find this helpful, either way enjoy!

If you did happen to find this tutorial informational or helpful in anyway, please let me know below by leaving a comment. As I venture more and more into 3d information sharing, I wanting to know how my teach are being received by my viewers before really continue any further down this avenue.

Thanks everyone!

CLICK HERE TO START PLAYING OUR GAME!

So what makes this game so different you ask? Well the game is completely browser-based. That’s right, a full 3D environment third person shooting game that is playable through your web browser!

It’s a simple game of Marines vs. Insurgents based in a mideast town (for the BETA at least, we have three total levels for full release of the video game).

We used the Unity3d game engine to develop this game, and although our game is still in a official “BETA” title, I felt it was finally time to share this awesome work with the rest of my readers and the world.

In order to play Combat Extreme (the 3d third-person shooter) on Facebook through your web browser, you must have the unity3d web player installed. The web player is designed specifically to render geometry and post process effects directly through ones browsers (Yes even IE).

Combat Extreme (the 3d third-person shooter) is indeed exclusive to facebook.com right now and may or may not be opened to further social gaming markets. We really wanted to create a seamless experience for our UX, and insisting the user create a new account with an email address conformation + allow the app on their page was asking way too much. Thus, we eliminated the biggest step and allow our users to login to Combat Extreme (the 3d third-person shooter game) through their facebook account.

CLICK HERE TO START PLAYING OUR GAME!

Here is how I like to think of every form’s fundamental steps:

• Accessibility
• Markup
• Layout
• Behavior
• Validation
• Conformation

Six seemingly basic ideas that all forms in one way or another need to embody to be considered any kind of success. Lets break down each step of our form fundamentals:

Accessibility

Taken from http://www.creativecriminals.com

I think we can all agree that collecting or sending information seems to be a huge corner-stone of importance amongst many websites. It should come as no surprise then that making our site’s forms work for all visitors is extremely important.  Being able to tab through, or screen read over different fields in a logical manner is key for success.

Screen readers are widely used for accessibility needs from a computer. Most screen readers observe and read off all the different parts of a window to the user. Screen readers also typically listen for voice and key events to help the user navigate through the windows of information.

When screen readers come to a web page, their typically tends to be lots of information it has to read off to the user. Most of the time this information is either redundant, meaningless or unhelpful information.

While keeping accessibility in mind through every step, we can better assist our visitors through our forms (be it what ever size) in a fast, descriptive and logical way. Not only will this greatly improve our very important forms, but grant a great user experience to all our visitors.

Markup

Great lets take a peek at some form markup that only uses the follow elements:

• form
• ol, li
• fieldset, legend
• label
• input, textarea, select, options, button

We use ol and li (ordered list) to better help guild accessibility through our form. We also keep accessibility in mind by making use of feildsets and legends to better organize and describe our form to screen readers, like so:

<form method="post" action="#">
    <fieldset>
        <legend>
            May 12th Event Registration
        </legend>
        <ol>
            <li>
                <fieldset>
                    <legend>
                        Full Contact Name
                    </legend>
                    <ol>
                        <li>
                            <label for="first-name">
                                First Name
                            </label>
                            <input id="first-name" />
                        </li>
                        <li>
                            <label for="last-name">
                                Last Name
                            </label>
                            <input id="last-name" />
                        </li>
                        <li>
                            <label for="middle-initial">
                                Middle Initial
                            </label>
                            <input id="middle-initial" />
                        </li>
                    </ol>
                </fieldset>
            </li>
            <li>
                <fieldset>
                    <legend>
                        Contact Information
                    </legend>
                    <ol>
                        <li>
                            <label for="address">
                                Mailing Address
                            </label>
                            <input id="address" />
                        </li>
                        <li>
                            <label for="state">
                                State
                            </label>
                            <select id="state">
                            <option>..</option>
                            <select/>
                        </li>
                        <li>
                            <label for="zip">
                                Zip Code
                            </label>
                            <input id="zip" />
                        </li>
                        <li>
                            <label for="email">
                                Email Address
                            </label>
                            <input id="email" />
                        </li>
                    </ol>
                </fieldset>
            </li>
            <li>
                <fieldset>
                    <legend>
                        Attending Questions
                    </legend>
                    <ol>
                        <li>
                            <label for="adults-attending">
                                How many adults will be attending?
                            </label>
                            <select id="adults-attending">
                            <option>..</option>
                            <select/>
                        </li>
                        <li>
                            <label for="children-attending">
                                How many children will be attending?
                            </label>
                            <select id="children-attending">
                            <option>..</option>
                            <select/>
                        </li>
                        <li>
                            <label for="meal-choice">
                                Choose a meal type
                            </label>
                            <select id="meal-choice">
                            <option>..</option>
                            <select/>
                        </li>
                    </ol>
                </fieldset>
            </li>
        </ol>
    </fieldset>
</form>

The main idea for this form is described in our first legend (May 12th Event Registration), it describes both an event time and the form’s purpose. Next is our second level nested legends that describe our three fieldset sections (full contact name, contact information and attending questions).

Finally we use labels to better describe our input fields to the visitors. Notice each label carries the “for” attribute and value of its corresponding input’s id. This “for” attribute helps screen readers better identify what label is for what form field.

Notice our above markup’s semantics, this is key for both accessibility and development purposes. If you would like to read a great article on building with great semantics I suggest you read Christoph Saxe’s great article on the subject.

A great tip I use all the time when building out my form’s markup, is to simply turn off the browsers styles. With the browsers styles turned off, you get a perfect picture of the relationships between your form’s fieldset and legend nesting:

Form Fundamentals - Learn to observe your forms without any styles

You can see how we better make use of the ol now to better guide our visitors through the nested fieldsets and legends.

Layout

Now let’s talk about form layout, and how it’s here to ultimately visually aid user experience. Visual layout is very important in better helping guide our visitors through our information quickly. Poor layout will always leave visitor’s feeling as if the form was more like work, than a simple information fill out.

Take a look at what our form’s layout with CSS applied would ultimately look like:

Form Fundamentals - Basic Form Layout

As mentioned back in the markup step, all the different form’s markup parts are to help visitors through our form in a logical manner. The layout should not be any different, in that its goal is to visually help visitors better identify our form’s logical different parts.

Form Fundamentals - Clearly Indentify Form's Section.

In the above figure, we can clearly identify all the main areas of our form by color:

• The main form it’s self (Peach)
• Main Heading Legend (Purple: Detailed Description of the overall form’s main purpose.)
• Section Fieldsets (Green: Feildsets help with accessibility to step through our form in a logical fashion.)
• Section Fieldset Legends (Blue: Detailed Description of each grouping of fields with our fieldsets.)

Our first level legend has the largest font size to better visually bring the form’s main purpose to the forefront. Preceding the first form’s legend is our next level of fieldsets and legends that are spaced out, and also use a large font size.

There is one more layer of “patterns” to observe in this particular form however. Looking more closely we can see some repeated field sizes in their parent’s limited real estate under a fixed width:

Form Fundamentals - Always identify or come up form field size patterns.

In the figure above we have 4 colors representing our 4 different size variants for all our different fields. It’s smarter to identify and/or come up with a “field size pattern” to help cut down unneeded styles. Once you have a field size pattern, you can begin to class and distribute these different sizes over the form’s markup as you see fit.

Taking our 4 field size patterns from above, we would then have 4 CSS classes on hand to implement in our markup as we desired:

• form .tiny {…}
• form .short {…}
• form .medium {…}
• form .long {…}

Applying these “field size pattern” classes as you see fit (typically the field’s parent list item wrapper) will speed up the overall form layout process. Also, all the preceding forms you build should be just as fast to build, if using these same patterns.

Color contrast is also very important for visitors who happen to be colorblind. Keeping your labels, legends, fields and field values at best contrasted will help, and is always a good idea in general for a layout aimed at great user experience.

Got Element Visual Problems?

Sometimes you can be faced with the need to not display a label or legend, yet you don’t want to remove the element due to its use for accessibility.

At this point I suggest making a class called “.accessibility”, and give it a text-indent style of “-9999em” as well as a position absolute with a left of “-9999em”. By setting our accessibility class to use text-indent and position styles, we ensure to keep our markup intact for accessibility needs, but also achieve our visual goal. You never want to use the display:none; style to hide accessibility important elements, this will cause problems for screen readers.

.accessibility {
    left:-9999em;
    position:absolute;
    text-indent:-9999em;
}

Behavior

Behavior is sometimes grouped together with the idea of some fancy fade in and out, or things elasticizing all over your pages. The kind of behavior I’m referring to however, is the behavior that helps the users understand each part of the form’s steps under all its conditions.

Sometimes you may have a need to relocate a label’s text to say the value of an input, well out of this comes all kinds of behavior needs.

One great example of form behavior is at http://www.twitter.com/

Form Fundamentals - Observe Form Behavior Needs

You’ll notice on the login form for twitter.com, there is no visible form label above each field. Twitter had decided to remove them from the visual real-estate and relocated them in the text inputs them self’s. In doing this label relocating, they have introduced a whole host of behavior needs to these inputs. These behaviors are used to help guide the visitors in understanding what it is they are filling out under each condition:

• Idle State (Display label value in Input IF, nothing is filled out in the field.)
• Over State (While hovering over the field, its seems to light up telling me what I am about to edit.)
• Focus State (The input cursor jumps to the beginning of the label value to prompt the user to type away, but not letting them forget what it is they are about to fill out.)
• Change State (The first stroke of a key wipes out the label’s value and replaces it with our typed value.)
• Blur State (Keep’s our typed value IF the input is not left blank, other wise our label copy animates back in and we start over.)

You should always think about these kinds of helping behaviors when build any form. If these behaviors help bring back form guidance or enhance the user experience, then you must consider using them.

Validation

The line between validation and behavior may seem vague, but there is a big difference. Where behavior is meant normally to help guide the user through the process under most editing states, it has almost no value to users with  accessibility needs and screen readers. Validation on the other hand, should provide clear and importance guidance to form mistakes for all site visitors with or without accessibility needs, if done correctly.

Client side validation has three main goals:

• Making sure typed values are formatted or entered correctly.
• Describe how the fields were not filled out correctly.
• Show/bring the user to where the errors have begun to occur.

If you can stick to these three main goals, you will meet the needs of your form’s requirements in a manner that all visitors can benefit from.

One great validation tool I personally like is the, bassistance.de » jQuery Validation Plugin. This plugin will allow you to meet all three validation requirements from above for any field type or scenario imaginable possible.

Another great utility to help guide your visitors along the path of validation is the digitalBush » Masked Input Plugin. This plugin will help give further visual formatting guidance to date or phone field types.

Conformation

Lastly, is conformation of a successful form submit. It becomes all to easy with HTTPRequest form submissions these days to forget the conformation message.

Without a successful conformation message (that all visitors are attuned to waiting for), you leave the visitor feeling lost or confused. It’s very important to confirm with the visitors that their information was successfully sent, received, and/or captured; this is what completes a full user experience.

Final Thoughts

In conclusion, I really hope we as a community strive to meet the above points in this article, for each and every form we build here on out. Building the web to cater to all visitor’s needs is key to the over all success of any site, and frankly the web as a community in whole.

Thanks everyone!
Devin R. Olsen

A while ago I was asked by a follow co-worker if I think it was possible to build an entire site using only two elements in my CSS selectors. Now I must admit, at the time I found the whole idea to be kinda crazy, however the more I got to thinking about it the more I started to love the challenge. So after better defining, then adopting the challenge, I felt it was time to share this code game with everyone.

Take a look at this very site's own style sheet that passes this two selector challenge

As most know, it’s always a good idea keep your CSS selectors slim to help the browser performance. With more and more complex sites however, there seems to be a trend of writing code that just works, and not code that works to the best of its ability.

When browsers read our style sheets, they do so by traversing our markup DOM through the selectors we feed it, then it applies our styles to that element or elements. The longer our selectors are, the more work the browser has to do to locate that element or elements.

Selector lengths may seem trivial at first. However if you multiply that long selector against the size of your style sheet, you can see this how this would impact a site’s performance. By cutting down the length of elements in our selector we help the browser parse through our style sheets faster. Not only does using shorter selectors help with performance, but also helps with organization and legibility for you the developer.

With the two element CSS selector challenge, you push your thinking in a more minimalistic frame of mind with little impact and/or no learning curve.

The Rules:

There is really only one rule at this time, and that’s to never ever exceed more than two elements in your CSS selectors. You may use pseudo, child, adjacent and element attributes in your selectors still, because this does not violate our rule of exceeding two elements.

Examples of valid two element selectors:

li a { .. }

#header #nav { .. }
#nav li { .. }
#nav .active { .. }

.active a { .. }
.active .active { .. }
.category #nav { .. }

li.active a { .. }
li.active a.active { .. }

#nav > li { .. }
li.current + li { .. }
form input[type="text"] { .. }

#nav li,
li.active a,
li.active a.active { .. }

These are all valid and only using two elements, even if we point to an element and it’s attribute as well.

What is not a valid two element selector?

ol li a { ... }
#nav li a { ... }
#nav .active a { ... }
#nav li.active a.active { ... }

#nav > li a { .. }
li.current + li a{ .. }
form li input[type="text"]

These are not valid because they simply exceed the “two elements only” rule.

When I first picked up this challenge I was really amazed at how natural it was for me to write selectors longer than two elements. During my challenge, I was faced with lots of little instances that really made me rethink my selector approach.

If you indeed try to pick up this challenge, the best advice I can give you is to not be afraid to use more classes in your markup. I found that whenever I was faced with a really tough instance, adding an additional class to my markup was always the best solution.

Over time, I fully adopted this challenge into my everyday practice and now it flows like second nature. So I can promise you, with just a little effort and almost no learning curve, you can drastically improved your style sheets performance and organization.

>> Click here to start your first two selector challenge

Your first challenge is to take this markup and make a proper CSS layout for it using only two elements in your selectors. Once you have completed the challenge, share your link with me here in the comments below and tell me a little about your challenge experience.

Special thanks to Paul Farning and Christoph Saxe for bringing this most excellent challenge to life!

Devin R. Olsen

Sprites are compiled versions of different creative parts of a website that typically has no need for repeating axises. Sprites are recommended to be used when ever possible to help cut down on HTTP requests to the server, and ultimately help speed up the performance of your website.

You should never include creative into a sprite that is page or content specific, or will need to be frequently updated. You absolutely can’t add creative that needs to be repeated on both the x and y value. You can however add creative that needs to be repeated by a single x or y axis, but only if you prepare the sprite so it indeed repeats from edge to edge of that sprites axis.

When thinking about how to organize my sprites, I tend to group everything into two parties:

• A global look and feel sprite.
• All other specific Case Scenarios sprites.

A global sprite is made up of all large site wide repeating creative parts (such as header and footer contents) that are compiled into a single image. Whereas specific case scenario sprites (such as custom buttons and their events) are on their own and should never be included into the global sprite. Again, we define this clear division based on the likely hood of the sprite ever needing to be update or changed at a later point.

Lets take a look at a global site sprite:

A global site sprite.

As you can see in the above sprite, we have most of the sites global creative components compiled into a single image. We even at the bottom of the above sprite have a perfect example of a creative part needing to be repeatable in (in this example the x axis) a single axis. Elements such as buttons that have different event states (hover,clicked or disabled) should always be a sprite no matter what, but again never added to this global sprite.

A button sprite, see how it's setup to be used on a sliding door technique and has two event states.

Now that we have a good understanding of the requirements and organization or sprites, lets to dig into the CSS concepts of using our sprites with our site elements. You have two methods to set your sprites as background on elements with CSS, and they are:

• background
• background-image

Here are examples of these two background setting methods:

#element{
    background:url("../sprite.png") x y no-repeat;
}

The above is the short hand version of setting the background image,  x y positions (typically pixel values) and if the background should be repeatable or not. Again, with sprites you will only ever be using either no-repeat, repeat-x or repeat-y.

.element-one,.element-two {
    background-image:url("../sprite.png");
    background-repeat:no-repeat;
}

.element-one { background-position:x y; }
.element-two { background-position:x y; }

The above version makes use of the long hand version to set the sprite over two elements, make it not repeatable and then give two unique axis position values over the two elements.

As stated above, you may set the position values in pixel, but you can also position words as well:

.element-one { background-position:0 0; }
.element-two { background-position:right bottom; }

In the above example “.element-one” gets a very specific pixel x and y axis value(equals top left). Our “.element-two” however, just states its x and y values by using top, right, bottom or left words. This really comes in handy when you have the need to position the sprite to element constantly to the top, right, bottom or left, under any width or height variants.

As mentioned a few times now, buttons that have different creative states should be compiled into their own sprite. You can then use such things as the CSS pseudo hover selector to change between different creative states like so:

.element-two:hover { background-position:right top; }

You can also have “conditional” classes that change the sprites background-position over your elements with help of JavaScript, like so:

.element-one,.element-two {
    background-image:url("../sprite.png");
    background-repeat:no-repeat;
}

/*The Conditional Classes*/
.on { background-position:left top; }
.off { background-position:left bottom;}

//jQuery code
$('.element-one,.element-two').toggle(function(){
$(this).removeClass('off').addClass('on');
},function(){
$(this).removeClass('on').addClass('off');
});

We set our sprite to the background of our two elements (.element-one, .element-two) and then change the background-position through the on and off classes. Next we use a little jQuery to toggle the adding and removing of our on and off classes over our two elements when ever they happen to be clicked.

Here is an advanced example of using a simple sprite with CSS and JavaScript:

• Hover, then click me:

  • Header to the content 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus lacinia aliquam. Donec risus nisi, lacinia nec aliquet vitae, vehicula a quam. Phasellus ornare tempor neque, in laoreet urna eleifend a. Praesent id justo quis mi elementum adipiscing. Maecenas risus velit, fermentum at scelerisque ut, faucibus ac tortor.

• Hover, then click me:

  • Header to the content 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus lacinia aliquam. Donec risus nisi, lacinia nec aliquet vitae, vehicula a quam. Phasellus ornare tempor neque, in laoreet urna eleifend a. Praesent id justo quis mi elementum adipiscing. Maecenas risus velit, fermentum at scelerisque ut, faucibus ac tortor.

• Hover, then click me:

  • Header to the content 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus lacinia aliquam. Donec risus nisi, lacinia nec aliquet vitae, vehicula a quam. Phasellus ornare tempor neque, in laoreet urna eleifend a. Praesent id justo quis mi elementum adipiscing. Maecenas risus velit, fermentum at scelerisque ut, faucibus ac tortor.

• Hover, then click me:

  • Header to the content 4

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus lacinia aliquam. Donec risus nisi, lacinia nec aliquet vitae, vehicula a quam. Phasellus ornare tempor neque, in laoreet urna eleifend a. Praesent id justo quis mi elementum adipiscing. Maecenas risus velit, fermentum at scelerisque ut, faucibus ac tortor.

>> Click Here for Above Example’s Code
>> Click Here for Above Example’s Sprite

Final Thoughts

Lastly, because our sprites make use of some very specific x and y pixel or word based positioning, it’s very important that you update sprites with extreme caution. A slight addition or subtraction to a sprite’s creative location or overall dimensions means having to fix all your CSS position values. So I say it again, we make a clear division between global sprite and specific case scenarios based off the likely hood of the sprite ever needing to be updated.

And that’s it, I hope this little article helps a few people gather what they need in order to create great site sprites.

Thanks everyone.

Devin R. Olsen

I could open up Photoshop and used the “save for web” feature to save them as PNG 24bit with alpha transparency, but my file size for these always seems way too bloated. Trying to save them as PNG 8bit alpha transparency in Photoshop’s “save for web”, always makes the images look really bad. Not having fireworks handy was my final breaking point to hunt down this little gem:

http://www.8bitalpha.com/

8bitalpha.com is a great web site that does one thing and one thing well, it converts 24bit alpha transparent images into very nice looking 8bit alpha transparent with little to no lossy (compared to Photoshop’s save for web versions).

It’s very simple, when I needed my rotator layers to be 8bit I simply used Photoshop save for web, and saved each slide’s layer out as 24bit alpha transparent. Once done, I pull up 8bitalpha.com and drag my layers into the first box one at a time. Each time I drag a new layer, the site automatically converts and compresses my 24bit into an 8bit very nicely.

From here, I would then right-click on my 8bit version from 8bitalpha.com and save the 8bit compressed version over my 24bit version on my local machine. And that’s it, we now have nice beautiful compressed versions of our 24bit alpha transparent images into an 8bit version.

Still a little skeptical? I put a little test together to you show you my findings (pros and cons):

My Test (Pros):

Simply drag and drop a 24bit PNG into the page and it will auto convert it out to a 8bit PNG with little to no lossy. Then just right-click and save the newly converted version to your computer. (Much better looking than a Photoshop save for web 8bit)

24bit PNG at (6.59kb)

8bit PNG at (3.84 KB)

My Test (Cons):

This tool really should only be used as the last step to any image edit. If you try to edit this newly created 8bit PNG version in Photoshop its transparency will be filled in with black (Fireworks is fine though, and you can continue to edit the image post 8bit conversion).

My only real concern is relying on a single site to help me in this area. I would kind of like to see this made open source, but that is a whole different type of conversation.

My Conclusion

I really like this little tool. In my every day work, I find that having to add whole other app (Fireworks) to my work flow makes me die a little inside. With this tool, I can continue to use my Photoshop and just fire up 8bitalpha.com when needed, drop a file or two in and away I go with little worry.

I do however think there should be a little more control to how your images get converted here, this would really make this tool valuable. All and all, I like it and use it, so I would say try it out.

Special thanks to Simon Madine (thingsinjars), Chief Roboticist at the Angry Robot Zombie Factory for building this great little tool that I like to use almost daily.

Here is the basic setup for using the “touchmove()” event:

$('#someElm').bind('touchmove',function(e){
      e.preventDefault();
      //CODE GOES HERE
});

Nothing really different about the setup behind the “touchmove()” event and any other native jQuery event. The only difference is that when using a “touchmove()”, you must always start your event handler with a event preventDefault();.

Next, its important to point out that if our script is ran as is, you will run into some issues with events being sent to your touch handlers, and none of them having whats called “e.touches” or “e.changedTouches” properties.

“After deep debugging, I eventually discovered that the source of this problem was the fix method in jquery’s event code. The fix method tries to copy the event object in order to fix various cross browser issues. Unfortunately, it seems that mobile safari does not allow the e.touches and e.changedTouches properties on event objects to be copied to another object. This is weird and annoying. Luckily you can get around this issue by using e.originalEvent.” -  http://www.the-xavi.com/articles/trouble-with-touch-events-jquery

So to fix our issue we can simply create a new “touch” variable, then condition both “.originalEvent” and “.changedTouches” to this variable, like so:

$('#someElm').bind('touchmove',function(e){
      e.preventDefault();
      var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
      //CODE GOES HERE
      console.log(touch.pageY+' '+touch.pageX);
});

I included a little console.log() demo showing how you could test your “touchmove()” event coordinates.

The Problem:

There is one slight problem (depending on your functionality needs) when using this “touchmove()”. The event continues to fire even when your “touch” has moved out side the element.

So in other words, it seems that once the event has started, it’s no longer confined to the element its being assigned to.

The Fix:

There is no real solid fix for this issue yet, however you can band-aid the issue with a little math.

Basically, by trimming the elements top and left offset from both of the touchmove’s x and y event coordinates. You can then condition these trimmed values against both the elements width and height (respectively of course).

Completed touchmove() Event with jQuery with Confined Fix:

$('#someElm').bind('touchmove',function(e){
      e.preventDefault();
      var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
      var elm = $(this).offset();
      var x = touch.pageX - elm.left;
      var y = touch.pageY - elm.top;
      if(x < $(this).width() && x > 0){
	      if(y < $(this).height() && y > 0){
                  //CODE GOES HERE
                  console.log(touch.pageY+' '+touch.pageX);
	      }
      }
});

Vole! No matter where the location of the element to the page, or the width and height of the element, the event will only be fired in side of the element.

And that’s your basic setup for a “touchmove()” event using jQuery alone.

Have fun.

Take this scenario for instance:

The Problem:

if(animate == true){
    $('#someElm').animate({
        width:'512px',
        height:'512px'
    });
}else{
    $('#someElm').css({
        width:'512px',
        height:'512px'
    });
}

We have a bool variable (animate) that we condition against to either animate or set our element’s (#someElm) width and height. So why is the above bad exactly?

• Wasted bytes in our script by using this if/else condition.
• We have to use two selectors that point to the same element.
• Both conditions are altering the same styles thus it’s again a waste of script bytes.

Hopefully you look at the above little piece of code in shame as much as I do now, and ponder on how one could possibly condense such a condition?

The Solution:

$('#someElm')[(animate == true) ? 'animate' : 'css']({
    width:'512px',
    height:'512px'
});

In the above solution, we have inserted ([...]) an area that we can use to condition our jquery chaining. So in the above solution I have opened this condition area up, and conditioned our bool animate variable again. Depending on the results from our bool animate variable, our selector chooses to either use the animate or css in our chain.

So in a nut shell we have solved the following:

• No more wasteful if/else condition.
• No more need for two selectors.
• The values that are either set via “animate” or “css” are only declared once.

Thanks!

(If you wanted, you could take this optimization a step further by learning how to sum up repeated style values.)

Here is the artice on how to sum up repeated style values when using jquery animate or css.

Click to see demo of Business Card Builder

The Markup

<h3>Realtime Business Card Builder</h3>
<div class="preview">
    <img src="scripts/server-side.php" />
</div>

Notice how the preview image’s “src” attribute is not pointing to a graphical file, but rather a server side php script? This is important because although we could use PHP to render new images out on our web server on every change, its best to view a single rendering through a static image element.

The client side code

By simply building up a query string that contains the values of our form fields, we can get a realtime performance. The first thing we want to create is a variable named “base” that will contain our preview image’s “src” orignal attribute value.

var base = $(".preview img").attr("src");

We make the “base” variable so that we may reference to the original URL of the server side file later on.

Next we want to gather our image from server side when the document is done loading for the first time. By utilizing jQuery’s serialize we will gather all our form’s fields and their values and request our image from php like so:

var base = $(".preview img").attr("src");

//GATHER IMAGE FOR FIRST TIME
$(".preview img").attr("src",base+'?'+$("#realtime-form").serialize());

As you can see, we set our image’s source attribute to be that of our base url, plus a serialized string of all our form’s input names and values.

Finally we want to setup our keyup event so as the user types into any of our form inputs, a “change request” for our image to be updated will be sent to php.

var base = $(".preview img").attr("src");

//GATHER IMAGE FOR FIRST TIME
$(".preview img").attr("src",base+'?'+$("#realtime-form").serialize());

//KEYUP EVENT AND NEW IMAGE GATHER
$("input,textarea").keyup(function(){
	$(".preview img").attr("src",base+'?'+$("#realtime-form").serialize());
});

Notice how within our new keyup event we are basicly repeating our previous step of gather our image the first time? This is how we both gather changes the user has made, and request a new version of our image at the same time.

The server side code

Now lets take a look at our PHP image rendering file. The first thing we want to do in this file is to declare what format of image should it be rendering:

header ("Content-type: image/png");

We pass a content type of “image/png” to our files header so that we can have alpha transparency ability that is natural to png image formats.

Next we need to gather every possible value that is being sent to this file via our URI string. We do this by creating new variables and setting their value to each URI string value, like so:

$companyName = $_GET["companyName"];
$companySlogan = $_GET["companySlogan"];
$fullName = $_GET["fullName"];
$jobTitle = $_GET["jobTitle"];
$businessAddress = $_GET["businessAddress"];
$businessAddress = str_replace("\\n","\n",$businessAddress);
$businessAddress = str_replace("\\","",$businessAddress);
$phoneOne = $_GET["phoneOne"];
$phoneTwo = $_GET["phoneTwo"];
$emailAddress = $_GET["emailAddress"];
$siteUrl = $_GET["siteUrl"];

Notice how on some of the value gatherings I am using a str_replace() function? Again, we are replacing any instance of our hard return character (\\n) into an actual hard return upon rending our image and copy.

Next we are going to gather a temp image we will use to create the actual image we render on dynamically, like so:

$handle = $img = imagecreatefrompng( 'template.png' );

(‘template.png’ is a image file that lives on your server.)

Now we need to setup a few more variables that will come in handy when rendering our results:

$brown = ImageColorAllocate ($handle, 84, 48, 26);
$lightBrown = ImageColorAllocate ($handle, 145, 116, 94);
$white = ImageColorAllocate ($handle, 255, 255, 255);
$peach = ImageColorAllocate ($handle, 238, 222, 200);

We setup different font colors by making use of the “ImageColorAllocate()” PHP GD function and assigning it to our new “template.png” image ($handle). The array of numbers that proceeds “$handle” are RGB color values.

Now that we have everything (variable wise) setup to render our image, we need to place and setup our text in our image. Here is an example of how to do just that.

//company name
ImageTTFText ($handle, 18, 0, 20, 35, $brown, "timesbd.TTF", $companyName);

By using the “ImageTTFText()” PHP GD function, we can setup an array of parameters to place and render our copy in our image.
First, we point to our “template.png” image ($handle) want to place this copy onto. Next is an array of numerical values and they are in order as follows:

• Font Size of Copy
• Rotation of Copy
• X Position to Image’s size
• Y Position to Image’s size

After the “size, rotation and position” values, we set our desired font color via our pre-defined color variables. Next we can choose to use a custom font file that live along side this php file. Last is the copy value it’s self that we gathered from our URI string and turned into variables.

The very last part to rending our image with PHP GD, is to do some clean up work like so:

imagealphablending( $handle, false );
imagesavealpha( $handle, true );
ImagePng ($handle);
imagedestroy( $handle );

We finish off our file format of “.png” and its transparency, and lastly destroy the image when completed to free up server memory.

(Some may notice that the web address copy is rendered from an align of center on out, I show this example in the demo download.)

That’s it everyone! With a little JavaScript and PHP GD you can do some really cool stuff, and I hope to see some great examples soon.

~ Download a copy of the demo

You can read more about why using Google’s hosting of everything jQuery here.

Ok with all that said, I still find myself on Google now and then trying to hunt down Google repository links to most things jQuery. So I only felt it was necessary to compile everything into one place for other developer to quickly reference and gather their needed jQuery parts.

jQuery – Google Hosted Repository Links

Minified

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Full Source

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

jQuery UI – Google Hosted Repository Links

Minified

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

Full Source

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>

jQuery UI – Google Hosted Repository Theme Links

Google is also hosting each of the following theme’s images and sprites, so there is no need to fiddle with hosting and images for any theme on your own server.

Base:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" type="text/css" />

Black Tie: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/black-tie/jquery-ui.css" type="text/css" />

Blitzer: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/blitzer/jquery-ui.css" type="text/css" />

Cupertino: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/cupertino/jquery-ui.css" type="text/css" />

Dark Hive: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/dark-hive/jquery-ui.css" type="text/css" />

Dot Luv: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/dot-luv/jquery-ui.css" type="text/css" />

Eggplant: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/eggplant/jquery-ui.css" type="text/css" />

Excite Bike: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/excite-bike/jquery-ui.css" type="text/css" />

Flick: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css" type="text/css" />

Hot Sneaks: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/hot-sneaks/jquery-ui.css" type="text/css" />

Humanity: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/humanity/jquery-ui.css" type="text/css" />

Le Frog: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/le-frog/jquery-ui.css" type="text/css" />

Mint Chocolate: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/mint-choc/jquery-ui.css" type="text/css" />

Overcast: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/overcast/jquery-ui.css" type="text/css" />

Peper Grinder: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/pepper-grinder/jquery-ui.css" type="text/css" />

Redmond: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" type="text/css" />

Smoothness: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" type="text/css" />

South Street: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/south-street/jquery-ui.css" type="text/css" />

Start: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/start/jquery-ui.css" type="text/css" />

Sunny: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/sunny/jquery-ui.css" type="text/css" />

Swanky Purse: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/swanky-purse/jquery-ui.css" type="text/css" />

Trontastic: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/trontastic/jquery-ui.css" type="text/css" />

UI Darkness: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-darkness/jquery-ui.css" type="text/css" />

UI Lightness: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" type="text/css" />

Vader: (preview theme)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/vader/jquery-ui.css" type="text/css" />

• What is jQuery
• Plugin Basics
• Your First Plugin

What makes this book so great is how the “basics and best practices” are covered early on, while a series of introductions to actual real world plugin topics are also covered later on, such as:

• Media Plugins
  • Image Plugins
  • Video Plugins
  • Audio Plugins
• Forms and Validation Plugins
• UI Plugins

What also makes this book top notch is that after each chapter, they tend to pose a optional 5 to 10 question quiz to help with all learning types. Now, as if that was not enough, this book also covers other topics such as:

• Top jQuery Plugins
• Reference and bibliography
• Blogs to follow
• Browsers: compatibility, comparisons, and plugins

If your looking to dive head first into the world of jquery plugin development, then this the must have guide that all developers should carry with them. I recommend you grab this great book if your looking to invest into anything jQuery right now and enjoy it as much as I have these past weeks.