Create screendumps as seen in different browsers

I just found this really nice service called Browsershots.org. You just type in an URI some distributed computers (mostly Linux) visits the site and creates the screenshots. The images appears after a few minutes.

It is perfect now in the changing times between IE6 and IE7 since it's not possible to have them installed on the same computer. It can be done with the unofficial stand alone versions, but I heard it doesn't work that good.

Browsershots.org currently supports the following browsers:

# Linux: Dillo 0.8, Epiphany 2.14, Firebird 0.7, Firefox 1.0, Firefox 1.5, Firefox 2.0, Firefox 3.0, Flock 0.7, Galeon 2.0, Konqueror 3.5, Mozilla 1.7, Navigator 4.8, Opera 9.0, Phoenix 0.5, SeaMonkey 1.0

# Windows: MSIE 6.0

Now we only need a similar thing for Safari.

Update: They have now added support for Safari.

Thanks to Edoardo Sabadelli for writing about it in his blog. And of course to the people behind the service for making it happen.

By Jesper Lind

Visual search with Quintura

http://www.codeodyssey.se/upload/resource/blog/Quintura_codeodyssey.jpg

Quintura is a really interesting new search service where the results is presented in a visual manner. If you search the name of our company is looks something like the picture. Normal links are presented in the lower part.
By Jesper Lind

Procedure ... expects parameter ... which was not supplied : ADO.NET Error

I had some problems with figuring out the cause about this error.

Procedure <procedure name> expects parameter <parameter name>, which was not supplied : ADO.NET Error

At last I found the solution on Data Mining Developers.

Example of the problem

string ColumnName = null;
//error will be thrown if the variabe ColumnName is null
if(ColumnName ==null)
ColumnName=string.Empty;
SqlParameter param = new SqlParameter("@ColumnName", SqlDbType.NVarChar, 100);
param.Value = ColumnName;
cmd.Parameters.Add(param);
cmd.Execute();

By Jesper Lind

Tag frequency and popularity acceleration

Alex Hillman headlines his blog with the sentence "tagging isnt just for hoodlums anymore" and I couldn't agree more. Tags and social bookmarks are just everywhere and part of most Web2.0 services.

On my web site there's not that much content yet. But I feel I need to upgrade my categories soon and perhaps add a tag cloud.

Jason Kottke is having similar thoughts and writes an interesting post about how to calculate how much the popularity of the tags are accelerating. In this way you can produce a list of tags that represents what's been going on recently on the site. Sort of like the "hot tags" on Flickr.

By Jesper Lind

This autumns CSS Reboot has begun

http://www.codeodyssey.se/upload/resource/blog/cssrebootbegins.jpg

Yes! I have finally completed my contribution for this autumn's CSS Reboot. An affair where hundreds of web developers are encouraged to update their web sites simultaneously.

The process
I am not an web designer but foremost an programmer. I can not compete with the other contributions of the reboot but wanted to take part anyway. My goal with this design was to create an web standard correct site without any CSS-hacks at all. I was really tired of the old look and wanted to improve. I wanted to use rounded corners on some places and for this I used the teriffic Nifty Corners Tube. But since it is not possible to have transparency on the outside of the corners I also used another technique found on 456bereastreet.com.

No support for IE6
I decided not to have any support for IE6 or earlier versions of Internet Explorer and I wanted to use transparent PNG images (which does not work in IE6). So if you can't see my logo in the top or if the borders look strange - you are probably using IE6.

Other rebooters
There are a lot of nice rebooters this time. I will update this section as I find more web sites that I like. Here are some of them in no particular order.

I especially like 32framespersecond.com with the nice collage of images.

The german designer site Mein Brandenburg has done an absolute masterpiece. Very nice images in the gallery as well.

I also like the contribution from the developer Edoardo Sabadelli. A nice design with an intresting three-column layout with the meny in the middle. Works really well.

Weknowhtml.com has done a stylish layout against a dark gray background. Love that frog! Simple and clean html, these are definitely an company I would trust if I needed a site design.

Gradient Dropshadow Curve has a light design. I really like that AJAX search-box as well.

By Jesper Lind

The confusing cursor:hand declaration

How to make make an cursor as a hand on elements is something that been confusing me for a while. Now I have understood what I've been doing wrong. Cursor:hand is not a valid CSS declaration but only a own invention from Microsoft. You should instead use the standardized declaration cursor:pointer. Cursor:pointer works in IE6 and IE7 but not in the older IE5 and IE5.5. If you have users with old Microsoft browsers you can use a dubble declaration.

element { cursor: pointer; cursor: hand; }

The order of the declarations is important, the modern browsers will ignore the last declaration. This can cause CSS validation errors so I think I will choose to leave the old IE versions to their destiny and only use cursor:pointer in the future.

Read more about cursor styles
http://www.quirksmode.org/css/cursor.html

By Jesper Lind

How to make a link destinct?

There are several ways of making links visible in a block of text. Here are some examples.

This is a link right here but you couldn't see it right? Perhaps we should make them appear with dots beneath them like this or in another color. The yellow shade is a bit too pale, you can hardly see it can you? Or should all links be in bold, inverted or perhaps underlined? Which is your favorite link design?

CSS for the links above

<style type="text/css">
a.noStyle, a.noStyle:link, a.noStyle:active, a.noStyle:visited { color: #000; text-decoration:none; }
a.noStyle:hover { }

a.dotted, a.dotted:link, a.dotted:active, a.dotted:visited { color: #000; text-decoration:none; border-bottom:1px dotted #333; }
a.dotted:hover { border-bottom:1px solid #000; }

a.invert, a.invert:link, a.invert:active, a.invert:visited { color: #fff;background-color: #000; text-decoration:none; border-bottom:1px dotted #333; }
a.invert:hover { border-bottom:1px solid #000; }

a.yellow, a.yellow:link, a.yellow:active, a.yellow:visited { color: #E2D459; text-decoration:none; }
a.yellow:hover { text-decoration:underline;}

a.underlined,a.underlined:link,a.underlined:
active,a.underlined:visited{text-decoration:underline;}
a.underlined:hover { text-decoration:underline;}</style>

By Jesper Lind

Get currency rates using Web Service

Update: The web service used in this example is not availible any more.

I was inspired by an article about currency conversion on Code Project when I made my own example. Please read the article in the link below to find out how to add an Web Service to your project. I am using a Web Service from xmethods.net.

<%@ Page Language="C#" Trace="true" validateRequest="false" EnableSessionState="True" EnableViewState="true" SmartNavigation="false"%>
<script Language="c#" runat="server">
protected void Page_Load(object sender, EventArgs e)
{
try
{
Rate_WS.CurrencyExchangeService to_currency = new Rate_WS.CurrencyExchangeService();
float Euro_Dollar = to_currency.getRate("euro", "united states");
float Dollar_Sek = to_currency.getRate("united states", "sweden");
float Euro_Sek = to_currency.getRate("euro", "sweden");
float Sek_Yen = to_currency.getRate("sweden", "japan");

lblEuro_Sek.Text = Euro_Sek.ToString();
lblDollar_Sek.Text = Dollar_Sek.ToString();
lblEuro_Dollar.Text = Euro_Dollar.ToString();
lblSek_Yen.Text = Sek_Yen.ToString();
}
catch (Exception) { }
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Currency converter in ASP.NET</title>
<link rel="stylesheet" href="../example.css" type="text/css" />

</head>

<body>
<div id="content">
<b>Currency example using web service</b>
<br /><br />

1 US Dollar = <asp:Label ID="lblDollar_Sek" runat="server" /> SEK
<br /><br />
1 Euro = <asp:Label ID="lblEuro_Sek" runat="server" /> SEK
<br /><br />
1 Euro = <asp:Label ID="lblEuro_Dollar" runat="server" /> US Dollar
<br /><br />
1 SEK = <asp:Label ID="lblSek_Yen" runat="server" /> Yen

</div>
</body>
</html>

By Jesper Lind