I have discovered recently that my CSS needs to re-use background images instead of calling separate images for background. They call this CSS Sprites. It helps to speed up your load time. This was brought to my attention by a co worker who showed me a utility for the Firefox plugin firebug. YSlow is the name of the utility, it lets Yahoo! grade your web site’s source code. I think its pretty cool.
I wrote a script today to redo Vindy.com’s current way of displaying the number of comments on a story (on the most commented block).
Previously it would grab an image which was named with the number (of which there were that many comments).
It would look kind of like this: <img src=”image/directory/<? comment_count ?>.gif”/> and print an image with that name. This example using PHP short hand style tags. It would display an image the output would look kind of like this:
<img src=”image/directory/213.gif”/>
This method is fine if you are OK with having hundreds of gifs in your image folders that you have to change when colors on your site are considered old and need re-done. Images like this one:
would have to have 214 others before it and more after it if you had a very popular discussion going on.
Now that number (of comments) is passed to a JavaScript and processed as a string.
I was able to create 12 images that do what I had hundreds of images doing before:
I created this using the following principals:
What this allowed me to do is call individual digit images instead of the number 123.gif getting referenced for a story with a hundred and twenty-three comments, I was able to break it up to something like this:
startscript{ define string variable; print start_image.gif print individual digit images in javascript loop ending in string.length {1.gif 2.gif 3.gif} print end_image.gif }endjavascript
My LinkedIn Profile
My Photostream
My facebook (for friends and family)
Jonathon Ireland is powered by Wordpress.
This theme is designed by Jonathon Ireland.
