Geekality

jQuery: Nice and smooth hover effect

Torleif — Thu, 26 Aug 2010 17:44:31 +0000

Needed to add a hover effect on some table rows and wanted to make it look nice. Think I managed to get it quite smooth in the end and thought I could share it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// In the document ready event
$(function()
{
// Attach handler
$('table tbody').delegate('tr', 'hover', hoverHandler);
});

function hoverHandler(event)
{
switch(event.type)
{
// When mouse comes over
case 'mouseover':
$(this)
// Stop animation where it is
.stop(true)
// Start fading up
.animate({backgroundColor:'#fd8'}, 'fast');
break;

// When mouse goes out
case 'mouseout':
$(this)
// Jump to end of animation
.stop(true, true)
// Start fading down
.animate({backgroundColor:'transparent'}, 'slow');
break;
}
}

You can check out a live version here: hover-effect.html

I would like to have used a class instead of a hard-coded color though. I tried to use addClass and removeClass, but with animation those proved to be quite buggy in this case. The problem with hard-coded colors is first of all that it generally is much better to collect styles in style-sheets than to have them spread out in other code. Secondly, doing it this way will override any background-color the rows might have had before you hovered over them.

A case where the second can ruin things a bit is if you have alternated background colors. This could be worked around if you take it into account in the handler though. Just for fun I tried to do just that: hover-effect-alt.html

Note that this might not work so well if your table is dynamic (if you sort, add or remove rows for example). But anyways, looks pretty cool I think

How to open an elevated Command Prompt window

Torleif — Mon, 16 Aug 2010 19:16:48 +0000

This is just a little step-by-step guide for how you can open up an open an elevated Command Prompt under Windows 7 (and Windows Vista I think). That is, a Command Prompt with Administrator privileges which allows you to do more stuff than you usually can.

Slow way

Open your Start Menu
Go to All Programs
Go to Accessories
Right-click Command Prompt
Select Run as administrator
Answer Yes to the following User Account Control question

Fast way

Open your Start Menu
Type cmd in the search field, and you should have an item called cmd.exe selected
Press Ctrl + Shift + Enter
Answer Yes to the following User Account Control question

After following either of those, you should now have an elevated Command Prompt window running in front of you.

And now I have a simple guide I can link to if I mention elevated Command Prompt windows on my blog

JavaScript: Uppercase first letter in a string

Torleif — Wed, 30 Jun 2010 13:21:07 +0000

In PHP there is a very handy function called ucfirst which

Returns a string with the first character of str capitalized, if that character is alphabetic.

Needed that in JavaScript, but discovered there was no such thing.

Luckily I quickly found a function over at StackOverflow that I adjusted slightly and added to the string class:

String.prototype.ucfirst = function()
{
return this.charAt(0).toUpperCase() + this.substr(1);
}

Can be used like so:

alert('some text'.ucfirst())
// Alerts: Some text

Alternative method

In some cases it might be good to handle this in CSS instead though. For example to uppercase the first letter in all list items, you can do this:

li:first-letter
{
text-transform: uppercase;
}

Weeee Ok, back to work…

PHP: How to easily provide JSON and JSONP

Torleif — Sun, 27 Jun 2010 18:03:28 +0000

Have some server-side data that you would like to grab through an AJAX call? For example by using the jQuery.ajax method?

A really easy way of doing this is by using the JSON format.

JSON

It is hyper simple. All you need to do is to set the content-type to application/json and encode your data using the json_encode function.

header('content-type: application/json; charset=utf-8');

$data = array(1, 2, 3, 4, 5, 6, 7, 8, 9);

echo json_encode($data);

You can test it out for example in the FireBug console by running this line:

$.ajax({url: 'data.php'})
// Response: [1,2,3,4,5,6,7,8,9]

You should see the request being done in the console and also in the Net tab. If it didn’t work, you might be subject to the following:

Due to browser security restrictions, most “Ajax” requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.

A nice and simple solution to that problem is JSONP.

JSONP

As stated on Wikipedia,

JSONP or “JSON with padding” is a complement to the base JSON data format, a usage pattern that allows a page to request and more meaningfully use JSON from a server other than the primary server.

I’m not sure I get everything about JSONP, but I have used it and I know that it works It’s almost just as easy as plain JSON actually, and all that’s needed is to wrap the JSON encoded data in a callback function provided as a GET parameter.

header('content-type: application/json; charset=utf-8');

$data = array(1, 2, 3, 4, 5, 6, 7, 8, 9);

echo $_GET['callback']. '('.json_encode($data).')';

You can test it by running

$.ajax({url: 'data.php', dataType:'jsonp'})
// Response: jsonp1277656587731([1,2,3,4,5,6,7,8,9])

This time you won’t see the call in the FireBug console though, but only in the Net tab. That’s because the data is loaded in a script tag instead of through an actual AJAX call. Thankfully jQuery handles all of that though, so you don’t have to worry about it at all. You’ll get the same JSON data in your response handler, ready to be used however you want to

What if you’d like to have both options?

JSON and JSONP

Providing both is easy as cake. Just check if the callback parameter is set or not:

header('content-type: application/json; charset=utf-8');

$data = array(1, 2, 3, 4, 5, 6, 7, 8, 9);
$json = json_encode($data);

echo isset($_GET['callback'])
? "{$_GET['callback']}($json)"
: $json;

That’s all! Please comment if you have any feedback

PHP: Generating transparent PNG fillers

Torleif — Sun, 13 Jun 2010 13:45:38 +0000

So, I was fooling around the other day with an HTML table and wanted to make the odd rows slightly darker. Figured I could use for example an 80% transparent black PNG to do that (or could have just assigned a darker color, but where’s the fun in that?). Either way, ended up making a little something that I thought I could share just for the fun of it. I learned a few things, so maybe someone else can too

So, here’s how to make a small transparent PNG filler image on-the-fly using PHP

I called the script fill.php, and the first line looks like this:

header('Content-type: image/png');

This starts the php script and sets the content-type to image/png which means the web browser will that we are an image and not an html file which usually is the default.

Next up we get the parameters from the user:

$p = $_GET + array
(
'r' => 0,
'g' => 0,
'b' => 0,
'a' => 0,
);

Here I create an array with default values and merge it with the $_GET array so that values from the user will override the default values. This means we are sure we have all the values we need and that the user only have to specify the ones he want to.

The r, g and b values should be a number between 0 and 255 and the alpha value should be between 0 and 127. So, next up we need to make sure that that is the case so we don’t use some other bogus we might have gotten:

array_walk($p, function (&$item, $key)
{
$item = min(max(0, $item), $key == 'a' ? 127 : 255);
});

This goes through each parameter and makes sure it is a number between 0 and 255 (or 127 for the alpha).

Since we have what we need now, we can start with creating our image:

$img = @imagecreatetruecolor(15, 15)
or die('Cannot Initialize new GD image stream');

We also need to set a flag that we want to use full alpha channel information (as opposed to single-color transparency) in this image:

imagesavealpha($img, true);

We are now ready to fill our image with the color we are asked for:

$color = imagecolorallocatealpha($img,
$p['r'],
$p['g'],
$p['b'],
$p['a']);
imagefill($img, 0, 0, $color);

And finally output the result and destroy the image resource we have been working with:

imagepng($img, null, 9);
imagedestroy($img);

And that’s actually all there is to it!

The complete code looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

header('Content-type: image/png');

// Replace default parameters with user input
$p = $_GET + array
(
'r' => 0,
'g' => 0,
'b' => 0,
'a' => 0,
);

// Make sure they are within limits
// (colors: 0-255, alpha: 0-127)
array_walk($p, function (&$val, $key)
{
$val = min(max(0, $val), $key == 'a' ? 127 : 255);
});

// Create image
$img = @imagecreatetruecolor(15, 15)
or die('Cannot Initialize new GD image stream');

// Use full alpha channel information
imagesavealpha($img, true);

// Fill image
$color = imagecolorallocatealpha($img,
$p['r'],
$p['g'],
$p['b'],
$p['a']);
imagefill($img, 0, 0, $color);

// Output result
imagepng($img, null, 9);
imagedestroy($img);

If you want to check out a working demo version of this, you can test out my little testing tool I created while having fun with this at tools.geekality.net/filling-factory

Let me know what you think! And as usual, please let me know if you see something that is wrong or could be improved or anything like that

C#: How to send emails

Torleif — Sun, 16 May 2010 00:21:02 +0000

Sending a basic email message in a C# application is quite easy thanks to a class called SmptClient.

We simply need an address to send to, an address to send from, the message we want to send and the client:

That was pretty simple, wasn’t it? But what if we need to authenticate with our server? And what if we want to send our message in a more secure manner?

Authentication

You will quite often find that an SMTP server requires you to authenticate yourself before it will let you do anything. This is however very simple to do. All we need, is to provide our credentials to the client:

var client = new SmtpClient("smtp.example.com")
{
Credentials = new NetworkCredential
{
UserName = "me@example.com",
Password = "password",
},
};

Now, when you try to send your message like before, it should be sent without problems But what if you want to send your email securely?

Using SSL to encrypt the connection

To send emails through an encrypted connection, all you have to do is to set the EnableSSL property of the SmtpClient to true:

var client = new SmtpClient("smtp.example.com")
{
EnableSSL = true,
Credentials = new NetworkCredential
{
UserName = "me@example.com",
Password = "password",
},
};

When you now try to send your email, it will use the Secure Socket Layer to encrypt the connection. Like me, you might run into a problem though; an AuthenticationException with the following message: The remote certificate is invalid according to the validation procedure.

Imperfect certificates

After reading about how these certificates work and some more digging around I found out that the certificate of the SMTP server I use is considered invalid for two reasons: Firstly it was not issued by a trusted Certification Authority (like VeriSign or Thawte), but by my host (Dreamhost) themselves. And finally there is a mismatch between the domain I’m connecting to (smtp.example.com) and the domain the certificate was issued to (mail.dreamhost.com).

Manual certificate validation

SSL has two purposes: security and authentication. And the security will actually work fine and all the traffic will be encrypted even if the authentication fails. In other words, as long as we can look at the certificate ourselves and be sure that we thrust it, we can go ahead and continue with our work.

To check the certificate ourselves we can provide a RemoteCertificateValidationCallback delegate to a class called the ServicePointManager.

ServicePointManager.ServerCertificateValidationCallback
= OurCertificateValidation;

But how can we decide if we should trust the certificate or not? Well, I have found three ways that works nicely. Well, actually just two since the first way is to just cover your eyes and let anything pass.

Pretend validation

The following implementation is a way to simply say that I don’t care:

static bool OurCertificateValidation(object s, X509Certificate certificate, X509Chain chain, SslPolicyErrors sslPolicyErrors)
{
return true;
}

This is of course not very good… we should at least make some effort and check if the certificate is the one we should be getting. We can for example…

Check the certificate fingerprint

Certificates have something called a fingerprint and if we know the fingerprint of the certificate we should get, then we can compare it with the fingerprint of the one we actually got.

static bool OurCertificateValidation(object s, X509Certificate certificate, X509Chain chain, SslPolicyErrors sslPolicyErrors)
{
return certificate.GetCertHashString()
== "6B8C79AB966D70277BA86E6F820859A2B5B8CCC0"; // SHA-1 fingerprint
}

If you don’t think this is enough, you can for example…

Check the whole certificate

If you can export the certificate to a file somehow, you can then later compare the certificate you get with the one you have stored and make sure they are equal.

static bool OurCertificateValidation(object s, X509Certificate certificate, X509Chain chain, SslPolicyErrors sslPolicyErrors)
{
var actualCertificate = X509Certificate.CreateFromCertFile("example.cert");
return certificate.Equals(actualCertificate);
}

I got a hold of the certificate file by sticking the following snippet inside my validation delegate, ran my code once, and then changed it back to normal again:

static bool OurCertificateValidation(object s, X509Certificate certificate, X509Chain chain, SslPolicyErrors sslPolicyErrors)
{
using (var file = File.Create("example.cert"))
{
var cert = certificate.Export(X509ContentType.Cert);
file.Write(cert, 0, cert.Length);
}
return false;
}

I also successfully exported it from Opera, which I use as an email client, by going to Preferences, Security, Manage Certificates, Approved and then export the one I want. This of course assumes you have have previously approved the certificate for use with Opera.

Wrap-up

That’s all for now! Found it kind of fun to get this working and thought I could share it in case someone else struggles with this. Please comment and let me know if I have misunderstood something or done a big blunder or something like that! I mostly just know that my code is working, so if you know more about how these security issues work and you know something you think i should know as well: Please share! I’d like to learn

Here is my final, complete code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

using System;
using System.Net.Mail;
using System.Net;
using System.Security.Authentication;
using System.Security.Cryptography.X509Certificates;
using System.IO;
using System.Net.Security;

namespace Geekality.SecureEmail
{
class Program
{
static bool OurCertificateValidation(object s, X509Certificate certificate, X509Chain chain, SslPolicyErrors sslPolicyErrors)
{
var actualCertificate = X509Certificate.CreateFromCertFile("example.com.cert");

return certificate.Equals(actualCertificate);
}

static void Main(string[] args)
{
// Register our own certificate validation
ServicePointManager.ServerCertificateValidationCallback = OurCertificateValidation;

// Message
var from = new MailAddress("me@example.com", "Me");
var to = new MailAddress("you@example.com", "Myself");

var message = new MailMessage(from, to)
{
Subject = "Greetings!",
Body = "How are you doing today?",
};

// Create client
var client = new SmtpClient("smtp.example.com")
{
EnableSsl = true,
Credentials = new NetworkCredential
{
UserName = "me@example.com",
Password = "password",
},
};

// Try to send
using (client)
{
try
{
client.Send(message);
Console.WriteLine("Message sent!");
}
catch (AuthenticationException e)
{
Console.WriteLine(e.Message);
}
catch (SmtpException e)
{
Console.WriteLine(e.Message);
}
}

Console.ReadKey(true);
}
}
}

Universal Greeting Time (UGT)

Torleif — Fri, 14 May 2010 16:29:14 +0000

Stumbled over the concept of Universal Greeting Time on IRC a little while ago. Found it kind of brilliant

UGT (abbr.): Universal Greeting Time.
UGT is convention initially established in #mipslinux on irc.openprojects.net (now irc.freenode.net) but slowly taking over the world. It states that it is always morning when person comes into a channel, and it is always late night when person leaves. Local time of any member of channel is irrelevant. Resistance is futile. Your ass will be laminated. (geoman is exception to this rule – his ass will be fried instead).

Used as follows:
Good (UGT) Morning, Everyone! or good morning (ugt) (on entry to channel).
Good (UGT) Night – when leaving it.

The idea behind establishing this convention was to eliminate noise generated almost every time someone comes in and greets using some form of day-time based greeting, and then channel members on the other side of the globe start pointing out that it’s different time of the day for them. Now, instead of spending time figuring out what time of day is it for every member of the channel, we spend time explaining newcomers benefits of UGT.

Source: UGT

Good night!