• Contact
• Date-O-Matic
• Verse-O-Matic
• Web Tools
• WP-Members

Lightweight XML and RSS Feed Buttons Using CSS

I can’t claim that this is a completely original idea. I’m certain that somewhere out there someone has come up with the same idea (probably several someones). Here is my way of creating lightweight XML/RSS Feed buttons using only CSS.

The goals in this project were:

1. Create an XML/RSS feed button without an image file
2. Use only CSS
3. Have the end result be smaller in file size than using an image
4. Be able to have the end result load with the page instead of an extra file

I began by actually downloading an XML button image: . The file size of the image is 429 bytes and using an image editor to sample the exact colors of the background and the borders. The colors were as follows:

• #FF6600 – background
• #FFC8A4 – border top
• #7D3302 – border right
• #3F1A01 – border bottom
• #FF9A57 – border left

Arial will do fine for the font, and it was obviously bold weight, white in color, and 11 pixels. The image size was 36 x 14.

With this information, I assembled the following CSS to get this button:

 

.cssbutton {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #FF6600;
    height: 14px;
    width: 36px;
    text-align: center;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #FFC8A4;
    border-right-color: #7D3302;
    border-bottom-color: #3F1A01;
    border-left-color: #FF9A57;
}

The above CSS is 602 bytes, so at this point, we’re actually heavier than the image itself. Since the goal here is to create a button of shear microscopic file size, every byte matters. So I went through this original CSS and reduced what is redundant, combined what could be combined, eliminated white-space, and used short-cuts when possible. This reduction yields the same result:

 

.cb{
    font:11px Arial,sans-serif;
    font-weight:bold;
    color:#fff;
    background-color:#f60;
    height:14px;
    width:36px;
    text-align:center;
    border:1px solid;
    border-color:#FFC8A4 #7D3302 #3F1A01 #FF9A57;
}

This gets us to 241 bytes, almost half of the size of the image file. That certainly qualifies as an improvement. But we can do better. The above does contain carriage returns and tabs for easy comparison to the original. Eliminating those extra bytes gets the size down to 185 bytes. Now we’re talking.

(Note: From here on, the file sizes do not include carriage returns. However, to make them easier to read in this column, I have displayed them with carriage returns. Running the CSS on a single line with no whitespace improves the file size considerably.)

Further size reduction is certainly possible if you are willing to give up the shading effect of the borders. Here’s an example:

 

This reduces the size to 147 bytes:

.cb{
    font:11px Arial,sans-serif;
    font-weight:bold;
    color:#fff;
    background-color:#f60;
    height:14px;
    width:36px;
    text-align:center;
    border:1px solid#7D3302;
}

Or eliminate the border all together and we get it down to 123 bytes, 28% the size of the image file:

 

.cb{
    font:11px Arial,sans-serif;
    font-weight:bold;
    color:#fff;
    background-color:#f60;
    height:14px;
    width:36px;
    text-align:center;
}

For my money, I like the extra colors on the borders. It makes the text look like the image file and we are still improving the size by almost a 50% reduction.

One thing to remember is that your mileage may vary. In a perfect test environment, such as an HTML file with just these examples and no other CSS, the above code is all we needed. However, to display the examples in this post, I had to add some extra properties to the CSS to overcome the inherited properties of the rest of my page.

Google Trends: A valuable tool for webmasters and bloggers

Google Labs does it again with their recent unveiling of Google Trends.  Google Trends will give users the inside scoop on what search terms are hot, and how hot.

If you are a webmaster or blogger trying to increase your exposure, this type of information is key.  You can see not only what terms the world is searching for, but what the trend of those search terms has been over time.  Additionally, you can compare up to five different search terms to see how they compare in terms of trend.

Here is what Google says about the service:

With Google Trends, you can compare the world’s interest in your favorite topics. Enter up to five topics and see how often they’ve been searched for on Google over time. Google Trends also displays how frequently your topics have appeared in Google News stories, and which geographic regions have searched for them most often.

Here are some links for more information:

About Google Trends (includes FAQs)
Google Trends Discussion Group

And for something interesting, here is the Google Trends data on the terms “google trends.” Interestingly, when I looked at it, the “Hotness” was ranked as a mere “mild.”  I would have expected more from a newly released data tool.

I’ll be looking forward to some type of API for this from Google Labs.

Date-O-Matic Javascript Day/Date Display

This is a very simple date script that I wrote years ago. I have used it in some form or another on just about every site that I have worked on. It is a nice, simple, client-side javascript to display the day and the date.

To use it, place the following in the of your html document:




In the location that you want the date to display, place the following:

This will output the date. You can apply CSS to the output as necessary, or, for those lacking the necessary skills, you could wrap this with a (yuck!) tag.

Obviously (or maybe not so obvious), there are a number of changes one could make based on desired output. For example, the days or months could be abbreviated in the script if you wanted “Thurs, Jan 12, 2006″. Or, the more savvy could change it to an output of “Thursday – 1/12/2006″ by changing the month names to appropriate numbers and then changing the document.write section to:

document.write(d[today.getDay()]+" - ");
document.write(m[today.getMonth()]+"/");
document.write(today.getDate()+"/");
document.write(""+today.getFullYear());


Or, if you need scientific or European dating, switch the date and the month lines to get this:

document.write(d[today.getDay()]+" - ");
document.write(today.getDate()+"/");
document.write(m[today.getMonth()]+"/");
document.write(""+today.getFullYear());


If you are an old javascript hack, you probably had all that figured out (or already wrote your own), but if you are a js noob, tinkering with the output and maybe adding or subtracting from it, is a good way to “get under the hood” so-to-speak and learn how to use javascript.

Have fun!

XAMPP

Posted on August 15, 2005 | Filed Under Web

Do you need a packaged installation of Apache, mySQL, PHP, and Perl? Complete with its own control panel? Packaged for Windows? Easy to install?

Asking for the moon, aren’t you?

But wait… Apache Friends has something for you! A freely downloable package of open source web tools is available at http://www.apachefriends.org/en/xampp.html.

Further Optimization of the W3C Validation Images

Posted on June 13, 2005 | Filed Under Web

So call me picky, but I went ahead and tried to further optimize the process for using the W3C validation buttons. I know that seems like trying to eek out another 10 horsepower from a 400 horsepower sports car, but it really bothers me to reduce efficiency for something so useless (which brings up the point, “Why use them at all?” but that’s another story).

I felt that I could probably create some efficiencies by combining the images and using an imagemap for the links instead of using two separate images. There are basically three potential areas then for optimization:

1. size of the html on the page
2. size of the single image vs. two seperate
3. reducing the images requested from 2 to 1

Note that this whole process is only an option if you actually have both valid XHTML and CSS. If either of these don’t validate, you need to just use the one image for the one that does validate.

Ok, so here is what I did:

I started by combining the two images into one single image:

This allowed a reduction in server requests from 2 to 1. Instead of asking the server for and image, then another, the browser only has to ask for a single image here. Also the total size of the single image is 1287 bytes. Compare this to 1441 bytes for the combined images. (Note that I am using 16 color gifs for both of these, as opposed to the 128 color originals. See my post on this.)

The second part of this process was to change the html to call the single image, use an image map to separate the links, and make sure it was valid XHTML, then measure the results in bytes.

342 bytes the old way:



alt="Valid XHTML 1.0!" height="31" width="88"
class="graphic"
align="middle" />

src="/images/w3c/w3c_css_16c.gif"
alt="Valid CSS!"align="middle" />


396 bytes the new way:




So, the html for the new way is actually a little bigger. But that is ok because our total weight of the images combined with the html is actually less. 1783 bytes the old way, 1683 bytes the new way – we save a total of 100 bytes. Doesn’t sound like much, does it? So I guess we will justify the whole process by saying that we’ve reduced the hits to the server in this process from 2 images to only 1.

Like I said, it’s like eeking out an extra 10 horsepower from a 400 horsepower engine. OK, maybe more like an extra 5, but it was fun, wasn’t it?

---