MHunt Design Freelance Web Solutions

1. Improve your performance with YSlow

http://developer.yahoo.com/yslow/

Yslow grades the performance of your site based on 3 rulesets. The criteria includes http requests, gzip compression, javascript placement at bottom, css expressions, dns lookups, minifying css and javascript, url redirects, 404 errors and more.
With Yslow you can figure out what is holding up the page from loading up fast. I typically check under components to see if there are any 404s for files called.

2. Compress Images with Smushit

http://developer.yahoo.com/yslow/smushit/

Compress images even further than saving for web in photoshop with Smushit.

3. Place Javascript at the bottom of your html document

Javascript calls at the bottom allow the page to load without having to wait until the javascript is loaded.

4. Compress CSS and JS Files

http://www.cssoptimiser.com/

http://www.cleancss.com/

http://javascriptcompressor.com/

5. Use CSS Sprites

The concept of css sprites is to combine multiple images into one and using background-position in your css to display only certain images.

See How to use CSS Sprites: http://css-tricks.com/css-sprites/

Video: Exactly How to use CSS Sprites: http://net.tutsplus.com/videos/screencasts/exactly-how-to-use-css-sprites/

Dave Shea explains CSS Sprites: http://www.mezzoblue.com/archives/2009/01/27/sprite_optim/

Quick tip:

In order to wrap a <span> around an <a> tag for example:

<ul>
<li>item 1</li>
<li>item 2</li>
</ul>

to:

<ul>
<li><span>item 1</span></li>
<li><span>item 2</span></li>
</ul>

Apply this jquery call:

<script type="text/javascript">
$(document).ready(function() {
    $("li a").each(function() {
        $(this).wrap('<span/>');
    });
});
</script>

jQuery Hosted on Google:

Here’s the code to link to Google’s jQuery repository. It grabs the latest jquery.

Update: jQuery source is now hosted on Google.

• Google link to jQuery:

• <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

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

You can go here http://code.google.com/p/jqueryjs/downloads/list for the download list and right-click copy-link location.

Dean Edwards IE7 Script

Also added before that is the ie7.js script. The idea here is to speed up the load time if the user has already cached this file from another site using the same technique.

<!–[if lt IE 7]>
• <script src=“http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js” type=“text/javascript”></script>
• <![endif]–>

I have to admit I’m biased when it comes to jQuery. Let’s face it, write less, do more, it’s as easy as that. if you’re a CSS coder or designer, jQuery is awesome. It’ feels natural calling a class name or an id just the way you would writing a css rule. There is really no excuse not to add behavior to your site, expecially since the advent of jQuery.

So what do I have for our jQuery lovers today?

A jQuery Widget for Mac

jQuery Widget

jQuery Cheat Sheets

• jQuery Cheat sheet
• Color jQuery Cheat sheet
• Another jQuery cheat sheet

So I have been building this large list of jQuery links for sometime now and it will continue to be updated on my urls section. But here it is:

JQuery Plugins and Tutorials:

• Apple Style Slider Gallery
• Coda Slider
• Flash-like Image Gallery
• Image Cross Fade Transition
• jFlow Content Slider
• jQuery Accessible News Slider
• jQuery Easing plugin
• Jquery Fancy Zoom
• Jquery for Designers
• jQuery Image Hover
• jQuery Image Slider
• Jquery Slide Show Cycle
• Learn jQuery Plugins
• Popup Bubbles
• Slide Out Accordion Effect
• Superfish Drop Downs
• Thick Box