Archive for Programming

A Visit From Chris Heilmann

Chris Heilmann from Yahoo is in the office today and he’ll have three talks throughout the day out of which I plan to attend two.

He’s just finished his first talk about the future of Javascript and the web.
It was a very high-level talk without too much technical details as there were a lot of business people attending but it was very interesting still. it wasn’t so much how to do things but more what you can do and where we are going with Web3.0, sharing and integrating web applications.
The second talk will be about web performance. From what i understand he’ll show us tips & tricks, what to do, what not to do etc.

I’ll try to get my head around the talk during the weekend and summarize the two when I have digested the contents of them.

jQuery Check & Uncheck All – Update

Go here for the final verison of jQuery check/uncheck all

I had a chat with a colleague about my check/un-check all function yesterday.
He liked the idea but felt it was a bit too obtrusive so I’ve rewritten it a bit.
It doesn’t affect your DOM much at all and if you don’t have javascript enabled you won’t see the checkall option any more.

The HTML
The fieldset I’ve used in this example can be exchanged for any other container such as a div, p td or what ever suits you. You can also add what ever mark up you want around the check boxes.

<fieldset class="checkallgroup">
   <input type="checkbox" /> Box 1
   <input type="checkbox" /> Box 2
</fieldset>
$(document).ready(function()
{
	$('.checkallgroup').append('<label><input type="checkbox" class="checkallselect" />&amp;amp;amp;amp;amp;nbsp;Select/Deselect All</label>');
	$('input.checkallselect').click(function()
	{
		if($(this).data('status') === undefined || $(this).data('status') == 'true')
		{
			$(this).parent('<label>').parent('.checkallgroup').find('input[@type=checkbox]').attr('checked', 'checked');
			$(this).data('status', 'false');
		}
		else
		{
			$(this).parent('<label>').parent('.checkallgroup').find('input[@type=checkbox]').removeAttr('checked');
			$(this).data('status', 'true');
		}
	});
});

jQuery Check & Uncheck All



Go here for an updated version of this script!


I googled around a bit for a simple solution to use check/uncheck all checkboxes using jQuery today but I couldn’t find a simple generic solution to the problem so I wrote my own instead.
It will keep track of multiple instances of check all groups on the same page and toggle the status of the boxes when clicked multiple times.

HTML Mark-up
First off you’ll need a bit of html: A couple of check boxes and a select all box.
A couple of things to consider in the mark up:
1. The class of the checkboxes must be the same as the value of the select all for that group.
2. The id of the select-all box must correspond to the id of the div layer containing the status.

<input class="group_1" name="boxes_1[]" value="somevalue_1" />Checkbox 1
<input class="group_1" name="boxes_1[]" value="somevalue_2" />Checkbox 2
<input class="group_1" name="boxes_1[]" value="somevalue_3" />Checkbox 3
<input type="checkbox" class="nn-checkall" value="group_1" id="checkall_1" />Select/Deselect All
<div id="checkall_1_status">true</div>

<input class="group_2" name="boxes_2[]" value="whatever_1" />Checkbox 1
<input class="group_2" name="boxes_2[]" value="whatnot_2" />Checkbox 2
<input type="checkbox" class="nn-checkall" value="group_2" id="checkall_2" />Select/Deselect All
<div id="checkall_2_status">true</div>

The jQuery Code
The value of the select-all keeps track of which boxes to toggle.
Using the id of the select-all we get the current status from the div layer.

$(document).ready(function()
{
	$('.nn-checkall').click(function()
	{
		var $sClass = $(this).val();
		var $check = $('#' + $(this).attr('id') + '_status').text();
		if($check == 'true')
		{
			$('input[@type=checkbox].' + $sClass).attr('checked', 'checked');
			$('#' + $(this).attr('id') + '_status').text('false');
		}
		else
		{
			$('input[@type=checkbox].' + $sClass).removeAttr('checked');
			$('#' + $(this).attr('id') + '_status').text('true');
		}
	});
});

Finally I just want to add that you probably want to hide the status layer using css (display:none;) and that the mark-up validates against W3C.
I’d also like to add that this solution can be improved and made even more dynamic if you’d like. It would be very simple to add a parent div layer and not have to add classes to the boxes for example but I chose this mark up mainly because it is unobtrusive. After all, div layers has properties of its own… Cheerio :)

SEO work

I’m trying to increase the SEO ranking of this blog. I don’t really know why since 90% of my visitors most likely use the RSS or have the url bookmarked but it’s always fun to find links to the blog on other sites (see Wikipedia Sockstress References for example).

I’ve made three changes on the website so far:

  1. Unique title on every page. It’s actually a quite ugly solution from a technical perspective but every singe page on the site has it’s own unique title. How did I achieve it? Parsing the URL. As I said, ugly but it works :)
  2. Incoming link is the bomb so I’ve added the “Share this” links you’ll find below every post. Use them if you find my posts interesting, please please please :)
  3. The third change isn’t really a change but still it will hopefully have a positive affect on the ranking. I’ve started to link more in my posts. See the my previous post on Gears of War 2 for example. Linking to other sites with relevant content within the a-tag can actually make the search engines like you so I’m going to give it a try.

Let’s Share

I’ve added a couple of links at the bottom of each post to make it easy to share them if you want to.
Do it :D

PS. I haven’t actually tried them because I don’t have an account on any of the sites so please let me know if they don’t work.

New Server

I’ve finally moved nordenfelt.com to the new vp server by ipeer. So far it looks good.
I forgot to set up two sub domains but that’s the only glitch so far and I can’t really blame any one else for that either :)

Is jQuery Becoming Standard?

I just stumbled across some interesting news, or acctually a co-worker did and sent me the info.
Earlier today jQuery’s weblog announced that Microsoft and Nokia will ship products with jQuery as part of the bundle.
According to the weblog Microsoft is going to ship Visual Studio with jQuery as a complement to their ASP.NET AJAX Framework and Nokia will incorporate jQuery into their widget plaform enabling it for their cellphones.

This is good news as it doesn’t only mean that jQuery probably will become stronger from this but also that I made the right descision when I picked jQuery back when I compared it with a few other libraries. See jQuery in action at photo.nordenfelt.com.

Sources:
http://jquery.com/blog/2008/09/28/jquery-microsoft-nokia/
http://weblogs.asp.net/scottgu/archive/2008/09/28/jquery-and-microsoft.aspx

Playing With Typography, Part 1-2 – Font Size

Just a quick update to the previous post.

In the body section of the CSS I wrote ‘font-size: 100%;’
If you set this to 62.5% instead you will have a 10px base for you em fonts.

The way this works is that 100% is the equivalent of 16px.
This means that 1em = 16px.
When you set the body font-size to 62.5% you actually set the base font to 10px (0.625*16=10) which will give you 1em = 10px.

In the ends this means that 1.2em = 1.2*10px = 12px. It just makes your life so much easier when setting the default font-size for your elements since most graphic design is measured in pixels.

Playing With Typography, Part 1 – Font Size

After my recent play-around with the typography on the site I decided to stay on the topic and this will hopefully be the first real post about it in a series of posts.

For this first one I’ve only been playing with fonts, font-sizes and line-heights.
It’s nothing special really but what is interesting is that it scales with the browsers increase/decrease font functionality which, for example, the ‘px’ measurement will not properly do.

From the example it is also evident that you have to adjust the font size depending on which font you use. Also line-height is very underestimated, and frequently forgotten. All browsers will give you a default value, just like with font-size, and that value will most likely make the text on your site readable. What you have to ask your self is if you want it readable or do you want your users to enjoy reading the text?

I’ve provided a couple of examples with different fonts. I’m not saying they are perfect in any way but hopefully they will illustrate how you quickly can change the way you present your texts.

View the examples here.

The CSS that made the examples:

body
{
	background-color: #EEE;
	color: #000;
	font-size: 100%;
}
h2
{
	font-weight: normal;
	font-variant: small-caps;
	margin:0;
}

div.times-new-roman h2
{
	font-family: times new roman;
	font-size: 1.5em;
	line-height: 1.6em;
}
div.times-new-roman p
{
	font-family: times new roman;
	line-height: 1.2em;
	font-size: 0.875em;
}

div.verdana h2
{
	font-family: verdana;
	font-size: 1.3em;
	line-height: 1.35em;
}
div.verdana p
{
	font-family: verdana;
	line-height: 1.3em;
	font-size: 0.75em;
}

div.sans-serif h2
{
	font-family: sans-serif;
	font-size: 1.3em;
	line-height: 1.3em;
}
div.sans-serif p
{
	font-family: sans-serif;
	line-height: 1.35em;
	font-size: 0.75em;
}

div.tahoma h2
{
	font-family: tahoma;
	font-size: 1.4em;
	line-height: 1.4em;
}
div.tahoma p
{
	font-family: tahoma;
	line-height: 1.3em;
	font-size: 0.8em;
}

div.helvetica h2
{
	font-family: helvetica;
	font-size: 1.4em;
	line-height: 1.4em;
}
div.helvetica p
{
	font-family: helvetica;
	line-height: 1.3em;
	font-size: 0.8em;
}

SEC-T, Day 1

Day one of SEC-T is over and done with with mixed feelings.

First of all I want to say that I think the organisation surrounding the conference is good so far. It’s quite obvious that this is the first SEC-T ever and there’s a lot to improve for the coming years but I’m still very satisfied with how the day turned out.

The speaker list for day 1didn’t lok that exciting to me at first glance and after the first session I wasn’t impressed. It was about VMWare’s VMSafe component which is used to make Virtual Machines more secure. All in all it was a topic that didn’t really intrest me and it somewhat felt like a sell pitch. I guess the lack of interest on the topic was the real downer for me on this one though. Oded Horovitz talked very fast but at least it seemed like he knew what he was going on about.

The next speaker, Mikko Hyppönen from F-Secure, was on Organized Online Crime. Again I wasn’t expecting much but it turned out I should have. This was a really intresting talk which focused on how hackers work and how they make their money. Ofcourse Mikko talked a lot about what F-Secure do and how they fight “the enemy” but even with the product pitch this was a very intresting and rewarding talk that really uncovered a lot of new information to me. Good job!

After lunch it was time for Bosse Norgren from the Swedish IT Crime Lab. His talk focused on how the police work and what they look for during IT-Forensics. This was very intresting as he went into details about Live Forensics (on site) and what precautions they have to take at all time to ensure that they don’t compromise the evidence. You almost felt like applying for a job when he was done :)

Next it was time for a real sales pitch from Outpost24 delivered by Robert E. Lee & Jack C. Louis. Surprisingly enough it was interesting. They started out by talking a bit about the TCP/IP protocol. Basically the good old stuff you learned in school but a nice re-cap of what has been and what still is. After this introduction it was time for them to show their application Sockstress. Unfortunately they couldn’t disclose any technical details about it but they ran two demos and it was quite amazing.
Exploiting a vulnerability they showed us how they brought down port 80 on a web server (or actually the presentation laptop) in a matter of seconds. A typical Denial of Service attack. The next demo was even better. The started playing music on the very same laptop and then started Sockstress. After about two minutes the music wouldn’t play the way it was supposed to. It was slowed down, the CPU was at 100% etc. They then stopped sockstress but the machine never came back. It kept misbehaving even though the attack was over. What was really interesting was that both these attacks only sent 4 packages each second to the server machine. That’s nothing and could be done on a 56k modem. Scary but cool :)

The fainl talk of the day came from Svante Nygren, KBM (KrisBeredskapsMyndigheten). He worked with Information Security. The talk could have been very interesting but only about 15 minutes of the hour really was. There was a bit too much about KBM and not enough about IS. He did talk about the incident in Estonia last year and the similar incident in Georgia last month and that was interesting.

Time for day 2 now. Currently listening to Torbjörn Pettersson who is talking about root-kits on MAC OSX.Good stuff but I’ll get back on that topic tomorrow.

« Previous Page« Previous Entries   Next Entries »Next Page »

10 Most Recent Twits

Loading twits...