Katthatt.se is becoming famous ;)
Read this very interesting thread about SEO optimized URLs and note what URL they use as an example 
Archive for Web Development
Twitter + Wordpress
It took a while and a bit of trial and error (sorry about that to all of you who subscribe to my feed) but now I think it’s finally working.
I’ve got my Twits on your right and my blog posts will pop-up and be linked in my twits.
This way you can follow my blog or my twits and don’t miss a think. Ain’t it wonderful
Photo gallery updates
I’ve updated the photo gallery.
All photos are hosted on Flickr now instead of locally. This means that I’ve done a bit of rebuilding to integrate with Flickrs APIs. It turned out very nice and it wasn’t that hard to do
Ever Needed an Ajax Loader Image?
I just found this website where you can generate ajax loaders gifs on the fly. They are free to use. Very handy indeed.
www.ajaxload.info
jQuery check all – Final update?
This may, or may not be, the final version of the check all function.
The main diffrence this time is that it’s accutally a jQuery function.
You simply enable it by wrapping a group of check boxes in som kind of box (fieldset, div, td, table, or anything else that feels good) and set a class on the wrapper.
<div class="checkbox-wrapper">
<input type="checkbox" name="box1" />
<input type="checkbox" name="box2" />
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".checkbox-wrapper").checkall();
});
</script>
Include this function:
/*
* jQuery function: checkall
* Description: Adds a check all box that will toggle the checkboxes within the parent element.
* Options: text: The text that is displayed next to/the toggle box. Default is "Select/Deselect All"
*/
(function($){
$.fn.checkall = function(options){
var defaultoptions = {
text: "Select/Deselect All"
};
var options = $.extend(defaultoptions, options);
return this.each(function(){
var obj = $(this);
obj.append('<label><input type="checkbox" class="checkallselect" /> '+options.text+'</label>');
$(obj.find('.checkallselect')).click(function()
{
obj.find('input[@type=checkbox]').attr('checked', $(this).is(':checked'));
});
});
};
})(jQuery);
Summary of Chris Heilmanns Talks
As I’ve mentioned earlier Chris Heilmann from Yahoo came here last week and talked.
Last Thursday Chris talked at the GeekMeet here in Stockholm and the day after he came to the bwin Games office. He did essentially do the same talks here as he had done at the GeekMeet but I reckon the talks with us where a bit more intimate considering we were about 20 and at the GeekMeet there were about 150 in the audience.
The first talk was a high-level talk about the web. Chris hadn’t really prepared for it so he had no slides but instead he seemed very relaxed and just kept on about the the web, especially 2.0 but also what’s coming in 3.0.
He showed a lot things that’s been done recently in 2.0. Since we had business people attending the first talk he didn’t go into details, instead he showed Firefox plug-ins such as Greasemonkey.
The second talk was about performance on the web. This time he drilled further down and got technical. It was really interesting.
Basically he discussed the major pit falls in web development, especially when you are using a lot of JavaScript, and how you can work your way around them.
He also showed us a lot of useful tools such as smush.it for image optimizing, YSlow for web site load debugging and a couple of simple techniques like minifying and bundling JavaScript includes via APIs. You can find the slides here.
All in all it was two very good talks and it gave me a lot of ideas and tools that I’ll use to improve my sites in the future.
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;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:
- 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
- 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
- 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.
10 Most Recent Twits
