It simply loads the two images into two canvas elements and extracts the red channel from one of them and inserts that red channel into the other canvas. Hey presto you get a simple anaglyph. This method has another flaw. Modifying an images data channels can only be done from an image on the same domain to obey the same domain security policy. A small proxy sorts that out but means the solution isn’t all JavaScript.

Here’s the source code for his anaglyph generator:

<script type="text/javascript">
<!--
Anaglyph = {
imgLeft : null,
imgRigt : null,
//Load images
load : function(left, right) {
//console.log('Load');
Anaglyph.imgLeft = document.createElement('img');
Anaglyph.imgLeft.src = left;
Anaglyph.imgRight = document.createElement('img');
Anaglyph.imgRight.src = right;
Anaglyph.wait();
},
//Wait for images to load
wait: function() {
if (Anaglyph.imgLeft.complete && Anaglyph.imgRight.complete) {
Anaglyph.make();
} else {
setTimeout('Anaglyph.wait()', 100);
}
},
//Actually make the anaglyph with some canvas magic
make: function() {
//console.log('Make');
var w = 640;
var h = 480;
var canvas = document.getElementsByTagName('canvas')[0];
try {
//Left image in temporary canvas
var canvasLeft = document.createElement('canvas');
canvasLeft.width = w;
canvasLeft.height = h;
var ctxLeft = canvasLeft.getContext('2d');
ctxLeft.drawImage(Anaglyph.imgLeft, 0, 0, w, h);
var dataLeft = ctxLeft.getImageData(0,0, w, h);
//Right image in result canvas
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(Anaglyph.imgRight, 0, 0, w, h);
var data = ctx.getImageData(0,0, w, h);
for (var i=0,l=dataLeft.data.length/4; i<l; i++) {
data.data[i * 4 + 0] = dataLeft.data[i * 4 + 0];
}
ctx.putImageData(data, 0, 0);
//console.log('Done!');
} catch (e) {
//console.log('FAIL!')
}
document.getElementById('result').className = '';
}
}
function getQueryParameter(name) {
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
var regexS = "[\\?&]"+name+"=([^&#]*)";
var regex = new RegExp( regexS );
var results = regex.exec( window.location.href );
if( results == null ) {
return "";
} else {
return results[1];
}
}
window.onload = function() {
if ('' != getQueryParameter('left') && '' != getQueryParameter('right')) {
var left = getQueryParameter('left');
var right = getQueryParameter('right');
document.getElementById('result').className = 'loading';
Anaglyph.load(
'image.php?url='+left,
'image.php?url='+right
);
}
}
-->
</script>

The canvas element can do so many things and my guess is we’ll be seeing it even more in the next few years.

Instant Star Rating allows you to create 5 star ratings in several different styles to go on your website. Unlike other star raters it doesn’t use Ajax. This is because Ajax doesn’t work across domains. Instead it uses the dynamic script method. When the user clicks on a star it loads a new script from the server.

The tool actually gave me some grief since I checked it worked in Firefox and failed to check in IE presuming that it would work in IE too. This was not to be, the rating javascript failed in IE due to an obscure DOM issue. IE doesn’t support innerHTML on style elements. So I tried to look for an alternative. IE has a property called styleSheet which isn’t supported by other browsers. CSS can be written to this using the cssText method. An interesting find!

I therefore used the following method to add dynamic CSS:

IR1_h=document.getElementsByTagName("head")[0]
IR1_l=document.createElement("style")
IR1_l.type='text/css'
IR1_h.appendChild(IR1_l)
if(IR1_l.styleSheet){
IR1_l.styleSheet.cssText='#rate1{padding:10px 0}'
}else{
IR1_l.innerHTML='#rate1{padding:10px 0}'
}


Please try out instant star rating, it is completely free and should work on almost any website. Check out the example below:

Extra mark-up is bad. It’s bad because if I wanted to change blogging platforms or even change theme I would have to go through every post and page and remove the HTML mark-up. Not really too difficult with only 4 posts to date but if I have a hundred or so posts in the future, it becomes a real pain.

The perfect solution would be to incorporate the mark-up in my WordPress template. Unfortunately I can’t do that because WordPress uses a template tag called the_content(), this only accepts a few variables to modify the “Read more…” link. I needed to come up with a better solution. A fairly simple solution would be to hack about with some other functions to create a modified the_content() template tag.

While this is a much better solution I don’t really like hacking the WordPress functions. Instead I decided to build a plugin. It sounds like rather a lot of work for applying a tiny bit of styling but it enables me to create an admin page where I can turn the drop caps on and off at the click of a button. Not only that but I can offer this wonderful plugin to the rest of the world using WordPress to create wicked drop caps.

My thanks go to the brilliant Ronald Huereca who wrote devlounges “How to write a WordPress plugin“. I used his code along with taking a peek at some other plugins.

I decided that while I was at it I would fix another issue with my blog theme. I use a first-child selector to choose the first paragraph of each post and make it bold. This breaks in several ways, firstly IE6 doesn’t support the selector and secondly The first paragraph is sometimes not a paragraph of text. It might be an image. To counter this my plugin also marks the first paragraph starting with a capital with a “first-child” class which I can use in my stylesheet.

My plugin can be downloaded from my plugins page and from the WordPress Plugin Directory Of course for those who don’t want to write their own CSS like me the plugin automatically adds it’s own stylesheet to your page.

<strong class="cap" title="I" ><span>I</span></strong>

Firstly I’ve created a “strong” element with a nested unsemantic “span” inside which contains our capital letter. The “strong” element has both a title and a class attribute, the title attribute is the important one because we can use it later to generate the shadow text.

To create a large capital we use:

strong.cap {
float:left;
color:#F00;
font-family:"Bookman Oldstyle",urwbookmanl,georgia,serif;
font-size:300%;
font-weight:bold;
line-height:1em;
margin-bottom:-0.4em;
position:relative;
}

This creates a bog standard drop cap by floating the letter left and making it bigger than the surrounding text. An adjusted bottom margin makes sure the text below wraps correctly.

strong.cap span{
display:block;
height:0pt;
position:relative;
right:0.06em;
top:-1.06em;
}
strong.cap:before{
content:attr(title);
color:#333;
}

The before pseudo-class is used to generate text in modern browsers (except IE) This creates a letter before the span. Finally we need to overlay the two letters. We do this by making the span display as a block level element which pushes it onto a new line, the line-height has been set to 1em so we can push the span back over the generated letter by positioning it relatively up 1.06em and to the left 0.06em. The additional 0.06em creates a slight offset making it look like a drop shadow. Take a look at the demo.

Unfortunately IE doesn’t like it at all and so you need to put the CSS in a non-IE stylesheet. Just stick the CSS in a stylesheet called noie.css and put the following code in your existing stylesheet.

@import 'noie.css' screen;

Internet Explorer doesn’t like the media deceleration ‘screen’ and so doesn’t read the rule. Why not experiment with your own fonts and colours and see what you can come up with.

Flickr offers a range of ways for developers to integrate images with their website. I have mashed my Flickr photostream with my blog and got a wall of images at the bottom of the page. It was actually remarkably painless to set up, Flickr helps simplify the uploading, classifying and exporting of images.

I’ll give you a little tutorial of how I acheived the photo wall at the bottom of my blog.

1. Find the pictures you want and upload them to Flickr.
2. Organise your pictures, give them meaningful descriptions tags and put them into sets.
3. To make a simple HTML Flickr Badge you need to go to the following url and follow the steps http://www.flickr.com/badge.gne
4. Choose the content you want which can be either one of your sets or all your photos.
5. Choose the layout options but click select orientation to “none”
6. Don’t worry about picking colours we will style it with our own later.
7. You will get some code generated which looks like this<style type="text/css">
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_badge_uber_wrapper {width:150px;}
#flickr_www {display:block; text-align:center; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {background-color:#ffffff;border: solid 1px #000000}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
</style>
<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=3&display=latest&size=t&layout=v&source=user_set&user=26963457%40N02&set=72157605251403235&context=in%2Fset-72157605251403235%2F"></script>
<tr>
<td id="flickr_badge_source" valign="center" align="center">
<table cellpadding="0" cellspacing="0" border="0"><tr>
<td width="10" id="flickr_icon_td"><a href="http://www.flickr.com/photos/26963457@N02/sets/72157605251403235/"><img id="flickr_badge_icon" alt="tomontoast's Germany 2007 photoset" src="http://l.yimg.com/www.flickr.com/images/buddyicon.jpg#26963457@N02" align="left" width="48" height="48"></a></td>
<td id="flickr_badge_source_txt">tomontoast's <a href="http://www.flickr.com/photos/26963457@N02/sets/72157605251403235/">Germany 2007</a> photoset</td>
</tr></table>
</td>
</tr>
</table>
</td></tr></table>
<!-- End of Flickr Badge -->
8. Get rid of all the HTML and CSS fluff until you get down to the meat which makes this work:<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=3&display=latest&size=t&layout=v&source=user_set&user=26963457%40N02&set=72157605251403235&context=in%2Fset-72157605251403235%2F"></script>
9. Put that tag wherever you want your images to appear. This bit of JavaScript creates a set of divs each with class=”flickr_badge_image” inside each div is an image nested in a link.
10. Finally apply some sweet CSS to make the photo gallery look cool. If you’ve got some experience with CSS I’m sure you can apply your own styling but if you’re a bit stuck this is what I use on my blog:a img {
border:none;
}
.flickr_badge_image a{
text-align:center;
border:1px solid #433d33;
margin:0 10px 10px 0;
width:85px;
height:85px;
float:left;
}
.flickr_badge_image a:hover{
width:95px;
height:95px;
margin:-5px 5px 5px -5px;
border:1px solid #ef702e;
}
.flickr_badge_image img{
margin-top:5px;
}
.flickr_badge_image a:hover img{
margin-top:10px
}

That was fairly easy and depending on how you set it up when you change your photos on Flickr the photos on your website will change.