Typically, I would love to come up with lengthy tips or tutorials as these people do, but often I end up with a wealth of drafts for ideas, but never get any real helpful content out to my readers. What I need is something more like a Tumblelog, which is more of a quick and dirty (not like that) stream of consciousness as a blog entry.

So, here I go, entry #1.

Dodging Cache Issues

I swear every time there is an issue with a client project or user on a website, it is a cache issue. You’ve seen it before. You are using the same image name or same stylesheet name and a users computer is caching it and causing issues with your new content.

A simple solution is just to rename the file. Thats easy right? Sometime yes. Sometimes it isn’t. We all may need to keep the same file names for a myriad of different reasons. Ok. Here’s mine.

Episode #1

I have a flash file that I update every couple of months. I don’t want to deal with renaming it, but I don’t want it to serve up the old version as cache. The solution is simple:

My code previously:

<embed....src="myfile.swf"....>

My NO-cache code:

<embed....src="myfile.swf?v1"....>

Basically, I’m appending a query string to the file as if I am passing in variables. Since webservers see this as a different file, it will cache it as a new file name, specifically “myfile.swf?v1″. Also, this makes it easy for versions. Next time you export your file, it will be v2, v3, v4… and so on.

Episode #2

I have a webcam that transfers a camera shot via ftp to my webserver. But, it FTP’s the image to the same directory with the same filename every time. Yeah, I could write a PHP script to get the picture and serve it up as a different file name every time, but that’s way too hard for a simple issue.

Also, I used to use a META REFRESH to refresh the page to serve up a new image, but that is frowned upon and refreshes the entire page. So, naturally I am thinkin’ JavaScript.

So, I get this rad script all hooked up to call a function every couple of seconds to refresh the image…here she be:

function refreshImage(){
if( document.getElementById('webcam-image') ){
setInterval(
function(){
var img = document.getElementById('webcam-image');
img.src = img.src;
},
4000
);
}
}

I’ve wrote some code to run this function on page load. Basically, this code just resets the src attribute of the image every 4 seconds. However, because the image is cached, I have issues. The code works fine, but keeps serving up the same image, so the user doesn’t see a change.

So, to employ my NO-cache technique, I whip up the following code:

function refreshImage(){
if( document.getElementById('webcam-image') ){
setInterval(
function(){
var img = document.getElementById('webcam-image');
if( !img.origSrc ) img.origSrc = img.src;
img.src = img.origSrc + "?" + (Math.random()).toString();
},
4000
);
}
}

Here, I save the original src attribute in a variable called origSrc and then every 4 seconds (4000 ms), I set the src attribute back to it’s original url. However, the magic comes in the querystring. I didn’t want to mess with an incrementing number, so I am just using a random number, but that’s all I need. So, when this function is called the first time, lets say the random number is 0.30301759604092937 (a decimal number between 0 and 1), the image’s src attribute becomes src="live.jpg?0.30301759604092937. Four seconds later, the code is ran again and the source attribute becomes src="live.jpg?0.0826765920752568, thus always rendering a new NON-cached version of the image. Voila!

P.S. If this technique is way too obvious or if you already knew it, please feel free to say “I agree.” Comments that insult should be reserved for an infinite amount of time.

First, a quick preview for the over-caffeinated and impatient (try clicking on a rating):

Quite awhile back, I wrote and article entitled Creating a Star Rater using CSS. In fact, if the CSS for this article is a little confusing, you may want to visit my previous articles to get yourself acquainted. I wrote it to my best ability and I shared what I could with the growing CSS-loving community. It was pretty flippin’ cool if you ask me, but it needed more. So, out of that need was born CSS Star Rating Part Deux, a vast improvement to the first, but by no means perfection. Out of the many comments I received about the most recent version, there were still some lacking areas.

By now, people’s grasp as a whole has grown quite a bit I feel and I think that this time does not warrant a full-fledged tutorial (also, my lack of time doesn’t help either). However, there are some significant issues with my most current Star Rating tutorial and I have always wanted to take another go at it.

In my thoughts, here is what the CSS Star Rating, part Deux is missing:

• Cross-browser support: I received multiple emails and comments stating that it was pretty quirky in browsers like IE6 and even Firefox.
• Ajax & Back end code : This is a need, but I’m not gonna tackle it. Plenty of people have contributed to the creation of the ajax or back end code, including slim, jon, and an especially nice presentation and project over at masuga. Needless to say, these guys do a great job and I don’t need to replicate their work.
• Tables and other wierdness: I had tons of report that the rater didn’t work in table cells and only God knows how many other situations.
• Inline Ratings: People also wanted to place their ratings inline. The current rater didn’t allow for that at all. Also, my feeble attempts to coerce it to work were of no avail.
• Uber mini Ratings: People also wanted little mini raters. Well, guess what. Problems arose with those too :(
• Pseudo-State: I say pseudo, because using only CSS, I cannot create a rating system that will hold when you click it and when you refresh it. Back end scripts an databases are needed for that. Basically, it still would be nice when you click the 3rd star, for it to stay there for a little bit.
• Percentage-based widths: This wasn’t really a request, but It seemed if a person wanted to make a different sized rater, there was a lot of repeating of 20px. 40px, 60px….etc. There just was a lot of exact dimension redundancy.

Well, thats the list! No wonder I wasn’t really happy with the thing. I remember when I first created it, it was my baby. Now, I hate the previous version. Whatever. Ok, enough rant from me. Lets get you guys up into the nerdy stuff.

Ok, so for a refresher, here is the XHTML:

Basic Rater XHTML:

<ul class="star-rating">
<li class="current-rating" style="width:60%;">Currently 3/5 Stars.</li>
<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
</ul>

Inline Rater XHTML:

<span class="inline-rating">
<ul class="star-rating small-star">
<li class="current-rating" style="width:30%;">Currently 1.5/5 Stars.</li>
<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
</ul></span>

Small Rater XHTML:

<ul class="star-rating small-star">
<li class="current-rating" style="width:50%">Currently 2.5/5 Stars.</li>
<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
</ul>

No big shockers with the code. Basically new to the scene here is the fact that the inline rater is wrapped with a span and the small rater has an additional “small-star” class added. I’m sure you can imagine that you can call “small-star” any class you would like and adapt the CSS to your liking for the right size and image you would like.

Next, in true throw-it-in-your-face tutorial style, here is the CSS:

Basic Rater CSS

.star-rating,
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus,
.star-rating .current-rating{
background: url(star.gif) left -1000px repeat-x;
}
.star-rating{
position:relative;
width:125px;
height:25px;
overflow:hidden;
list-style:none;
margin:0;
padding:0;
background-position: left top;
}
.star-rating li{
display: inline;
}
.star-rating a,
.star-rating .current-rating{
position:absolute;
top:0;
left:0;
text-indent:-1000em;
height:25px;
line-height:25px;
outline:none;
overflow:hidden;
border: none;
}
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus{
background-position: left bottom;
}
.star-rating a.one-star{
width:20%;
z-index:6;
}
.star-rating a.two-stars{
width:40%;
z-index:5;
}
.star-rating a.three-stars{
width:60%;
z-index:4;
}
.star-rating a.four-stars{
width:80%;
z-index:3;
}
.star-rating a.five-stars{
width:100%;
z-index:2;
}
.star-rating .current-rating{
z-index:1;
background-position: left center;
}

The real difference between this CSS and my previous Star Rating tutorials has to do with the addition of :active and :focus pseudo states to hold the rating when clicked, percent-based widths, and the elimination of the use of floats to accomplish the CSS. It is important to mention also the use of overflow:hidden to keep the rater from spilling out over its set width and height as well as the use of a set pixel height line-height. I found that Internet Explorer really had issues with the rater CSS when resizing text, so if I set it to an exact pixel height, issues were resolved.

Inline Rater CSS

.inline-rating{
display:-moz-inline-block;
display:-moz-inline-box;
display:inline-block;
vertical-align: middle;
}

I found that if I wrapped the Star Rater unordered list with a span with a class of “inline-rating” and used the CSS rules above, I could achieve an inline rater. My apologies for the non-standard CSS attributes, but achieving an inline-block behavior in CSS is not an easy task. Most importantly to me is that it works and works in quite a few browsers.

Smaller Rater CSS

.small-star{
width:50px;
height:10px;
}
.small-star,
.small-star a:hover,
.small-star a:active,
.small-star a:focus,
.small-star .current-rating{
background-image: url(star_small.gif);
line-height: 10px;
height: 10px;
}

I’ve tried to make adapting the rater much easier for all of you. As you can see in the CSS above, you will not have to change a ton. Just add a class to your unordered list; In this case I used “small-star.” Update the width and height to the desired values. Make sure to change your image and line-heights as well. This makes creating other variations of the rater much more simple. If you need to make a 3 star, 4 star …N star rating system, you are gonna have to get your hands a little more dirty…sorry :(.

I am much more happy with the performance and support of this version and I feel that it will help to resolve the shortcomings that the previous versions had.

So, yeah I know its bad for me. But occasionally I break down and buy a delicious artery clogger from McDonalds.

For my first Howto concoction, I wanted to show the public a delicious breakfast sandwich, the McRogie:

The McRogie Breakfast Sandwich: Ingredients

• Sun-Maid Raisin Bread (or any cinnamon raisin bread you like)
• A few eggs (for french toast)
• A splash of vanilla
• A splash of milk
• Hickory Smoked Bacon
• Grey Poupon Mustard (insert mustard of choice here)
• Swiss Cheese

The McRogie Breakfast Sandwich: Preparation

• Mix a few eggs with a splash of milk and a splash of vanilla (french toast style)
• Dip the raisin bread in the egg mixture (both sides). Give it about a minute to soak in.
• Slap your soaked raisin bread on a frying pan and cook that sukka till its light brown.
• Cook up yer bacon till its done how you like it. I like it crispy, yet flippy (if thats possible). Ohhh…and yes, that is a technical term, so use it.
• Once the bacon is done, slap the swiss cheese and the bacon on one half of the french toast bread.
• Slather the other peice of french toast with Grey Poupon (I like it thick baby)
• Smush the two halves together and enjoy….

If you make this or have any other ideas to make this better, let me know. Also, check back for more howto’s in the future.