Ramblings of a Developer

Starting with BitlBee

WyriHaximus — Mon, 09 Apr 2012 17:58:30 +0000

A while ago I was somehow introduced to bitlbee and I loved the concept. Not only for the possibilitie to have IRC, FB, MSN and Google Talk in the same application/window. But also cause it can be extended to be used as a real-time log viewer for your CI Server and website. This is a first of 3 blog posts on the subject with some extra tips & tricks on the side.

Setting it all up

It’s just a simple aptitude command to install and start it, after it’s installed you connect to it with your favorite IRC client. Once you’re connected make sure you register with the server and follow the quickstart intro.

$ sudo aptitude install bitlbee

Configure Facebook

Setting up facebook is simple but you need to keep a few things in mind. First off you need a Facebook username. Next run this command and make sure you type your username all lowercase cause it will fail if you don’t. (Note that you can use acc instead of account if you don’t like typing it over and over again.)

$ account add jabber USERNAME@chat.facebook.com PASSWORD

Since by default userId’s will be shown instead of full names we use the following 2 commands to use the full name and add a [fb] prefix to each facebook user.

$ account facebook set nick_source full_name

$ account fb set nick_format [fb]%-@full_name

Configure Google Talk (Jabber/XMPP)

Adding your Google Talk account is as simple as adding a facebook account. Just replace USERNAME with the Google account email address.

$ account add jabber USERNAME PASSWORD talk.google.com:5223:ssl

Just like the facebook account we also set a prefix here.

$ account gtalk set nick_format [gtalk]%-@handle

Giving each account it’s own channel

The following commands create channels for Facebook and Google Talk and set them to only show Facebook users in the facebook channel and Google Talk users in the gtalk channel.

$ /join &facebook
channel facebook set fill_by account
channel facebook set account fb
/join &gtalk
channel gtalk set fill_by account
channel gtalk set account 0

Finishing up

Now that we set everything up we want to connect our accounts simply run the following command and it will connect to the remote servers.

$ account on

Just hit the save command to save your configuration to disk.

$ save

Interesting reads/links

Starting with BitlBee originally appeared on Ramblings of a Developer on April 9, 2012.

Shortcode in Feedburner Email Widget 1.1.3 for wordpress

WyriHaximus — Thu, 08 Sep 2011 18:11:16 +0000

In the just released Feedburner Email Widget 1.1.3 a shortcode has been added by request. The shortcode can be used in 2 different ways in posts you use

1	[feedburner_email_widget uri="http://feedburner.url.here"]

and in php you use

1	echo feedburner_email_widget_shortcode_func(array('uri'=>"http://feedburner.url.here")); ?>

Both methods make a call to the same function and the arguments reflect the available settings for the widget through the wp-admin.

Title -> title
Feedburner feed URL -> uri
Above input text -> above_email
Below input text -> below_email
Input placeholder text -> email_text_input
Submit button caption -> subscribe_btn
Show feedburner link -> show_link
Form CSS ID -> form_id
CSS Styling -> css_style_code
Analytics Category -> analytics_cat
Analytics Action -> analytics_act
Analytics Label -> analytics_lab
Analytics Value -> analytics_val

Shortcode in Feedburner Email Widget 1.1.3 for wordpress originally appeared on Ramblings of a Developer on September 8, 2011.

Building an endless image/photo/screenshot stream

WyriHaximus — Fri, 01 Jul 2011 11:37:44 +0000

For WoW-Screenshots.net I was looking for a sweet Endless Stream script but I only stumbled into some weird scripts that did more then they should or nothing at all. Finally I ran into a simple script giving some good hints.

For this script jQuery is required and the str_replace port from phpjs.org.

The basics of the script is are simple: on the window scroll event check if the user scrolled nearly or to the bottom of the page if so fetch information from the server and add them to the page.

First off we start with the class constructor

1
2
3

function endlessEntityStream(conf) {
var self = this;
}

We add a few configuration options and match them against the conf object:

1
2
3
4
5
6
7

self.conf = {};
self.conf.loading = false;
self.conf.identifier = conf.identifier || 'EES_%id%';
self.conf.url = conf.url;
self.conf.count = conf.count;
self.conf.prevId = conf.initalId;
self.conf.template = conf.template;

We load the first batch upon constructing the class. Since the backend provides us with information whether or not we should continue checking for more:

1	self.load(conf.startCount);

We hook into the window scroll event. This and the previous 2 blocks are code are all in the constructor:

1
2
3

$(window).scroll(function(){
self.check();
});

Now we need 2 settings and 2 getters to keep the code a bit cleaner

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

endlessEntityStream.prototype.setLoading = function(bool) {
var self = this;
self.conf.loading = bool ? true : false;
};

endlessEntityStream.prototype.getLoading = function() {
var self = this;
return self.conf.loading;
};

endlessEntityStream.prototype.setPrevId = function(prevId) {
var self = this;
self.conf.prevId = prevId;
};

endlessEntityStream.prototype.getPrevId = function() {
var self = this;
return self.conf.prevId;
};

The following functions are the most interesting. First the check function that checks the scroll status. Seccond the load function that does most of the heavy lifting.

The function works very simple. It check if you either scrolled to the end of the page or within the 500 pixels above the end of the page. Then it checks if a load is already in progress and load if not. Note the 500 in the function, change that to your needs if the default isn’t working properly.

1
2
3
4
5
6
7
8

endlessEntityStream.prototype.check = function() {
var self = this;
if($(window).scrollTop() == $(document).height() - $(window).height() || ($(window).scrollTop() + 500) >= $(document).height() - $(window).height()) {
if(!self.getLoading()) {
self.load(self.count);
}
}
};

We start the load function by preventing another load can start. Another imported part of this method is the replacing of 3 keywords with the corresponding information.

%id% – the id of the last added item, the backend uses this the determine where to start reading
%count% – the amount of items the backend should return
%mathrnd% – a random number, it can be used to force updates

1
2
3
4
5
6
7
8

endlessEntityStream.prototype.load = function(count) {
var self = this;
self.setLoading(true);
url = self.conf.url;
url = url.replace('%id%',self.conf.prevId);
url = url.replace('%count%',self.conf.count);
url = url.replace('%mathrnd%',Math.random().toString().replace('0.',''));
};

Now we know where we should fetch the information from we can send the request and parse the returned data:

1
2
3
4
5
6
7

$.get(url,
function(data){
if (data != "") {
var entities = $.parseJSON(data);
}
}
);

After the data has been parsed we’ll walk through the data and add the item at the end of the stream. This happens in several steps. First off an identifier is generated for the current item and the identifier (based on the previous id) from the previous item is generated. Second the entity properties are matched against the template. And finally the item is added to the end of the stream and the current id is set as previous id.

1
2
3
4
5
6
7
8
9
10
11

for(var entity in entities.shots) {
var identifier = self.conf.identifier.replace('%id%', entities.shots[entity].id);
var previousIdentifier = self.conf.identifier.replace('%id%', self.getPrevId());
var html = self.conf.template;
$.each(entities.shots[entity], function(index,value) {
html = str_replace('%' + index + '%', value , html);
});
html = html.replace('%identifier%', identifier);
$('#' + previousIdentifier).after(html);
self.setPrevId(entities.shots[entity].id);
}

Once everything has been loaded we’ll check the data if this is the last block or not. If it’s the last block it keeps the loading process locked. If it isn’t the last block it unlocks the loading process and invokes the check method again. This makes sure a user keeps buffered at all times until there is nothing more to fetch.

1
2
3
4
5
6

if(entities.lastShot) {
self.setLoading(true);
} else {
self.setLoading(false);
self.check();
}

We now have all the class code ready to use we need to tell it where to get it’s data from and how to append it where. The following configuration options are needed to make it all work:

url – Url

1	http://domain.tld/path/to/stream/%id%/%count%/

target – The stream container

1	ESSContainer

initalId – The id of the last item in the preloaded stream.

123

count – The number of items to be returned by the server. %count% in the url parameter is replaced by this number.

template – Template for the item placed at the end of the stream.

1	<a href="%href%" id="%identifier%" title="%title%"><img src="%src%" alt="%title%" />a>

debug – The debug option is optional but can be useful to debug issues with this script.

true

Combined that gives you this:

1
2
3
4
5
6
7

ees = new endlessEntityStream({
url: 'http://domain.tld/path/to/stream/%id%/%count%/',
target: 'ESSContainer',
initalId: 123,
count: 5,
template: ''
});

1
2
3
4
5

The script expects a JSON object in the following format:

1
2
3
4
5
6
7
8
9
10
11
12

{
"lastShot":false,
"count":5,
"shots":
[
{"id":"124","href":"\/model\/view\/124.html","src":"\/img\/124.jpg","title":""},
{"id":"125","href":"\/model\/view\/125.html","src":"\/img\/125.jpg","title":""},
{"id":"126","href":"\/model\/view\/126.html","src":"\/img\/126.jpg","title":""},
{"id":"127","href":"\/model\/view\/127.html","src":"\/img\/127.jpg","title":""},
{"id":"128","href":"\/model\/view\/128.html","src":"\/img\/128.jpg","title":""}
]
}

As you can see the object holds 2 configuration settings and 1 array with all the items. (Heck while writing this I realize that shots as name for the array might not but the appropriate name for a more general class.) The count property optional. lastShot tells the script if the shots array contains the last item and should stop polling after this.

This code is available on github. As for the future of this project it will evolve for the upcoming time to become an even more powerful script. (Might turn it into a jQuery plugin.) For a live demo see WoW-Screenshots.net.

Building an endless image/photo/screenshot stream originally appeared on Ramblings of a Developer on July 1, 2011.

Loading your Twitter Tweet Button asynchronous

WyriHaximus — Wed, 25 May 2011 14:50:49 +0000

Twitter has updated their buttons to be asynchronousby default!

Check out twitter.com/buttons

For wow-screenshots.net I was looking to boost the loading speed of the site. By spending as little time as possible waiting on additional resources. The Tweet Button by Twitter is loading in a blocking way so it is slowing down the page. It uses basic HTML elements and transforms them with a little bit of javascript. We can load the javascript in a non-blocking way to give the user a faster page loading experience. Flattr is showing how it’s done by loading the script in a asynchronous way and and transform basic HTML elements into widgets:

1
2
3
4
5
6
7
8
9
10
11
12
13

The same can be done with Twitter by replacing the standard

Though the real loading might be longer, the users perceives the page as loading fast.

P.S. For this post I was going to include Facebook, but while going over their API docs they added asynchronous support since the last time I checked. As for the reddit button, that took a bit more work more about that another time.

Loading your Twitter Tweet Button asynchronous originally appeared on Ramblings of a Developer on May 25, 2011.

Feedburner Email Widget 1.1.2

WyriHaximus — Sun, 22 May 2011 20:54:22 +0000

Feedburner Email Widget 1.1.2

About 20 minutes ago I pushed 1.1.2 for this wordpress plugin to fix a minor issue and add a Flattr button. 1.2 is around the corner with a improved admin widget. For now I don’t have anything to show but that should change in the upcoming days. However I can reveal a few details:

A wizzard to make the widget easier to use
i18n to improve support for non English sites

Feedburner Email Widget 1.1.2 originally appeared on Ramblings of a Developer on May 22, 2011.

Picking a fun reverse DNS IPv6 address for IRSSI

WyriHaximus — Tue, 01 Mar 2011 21:32:18 +0000

The otherday I was looking for a cool IPv6 address to use with IRSSI as reverse DNS. (A Pingdom article inspired me.) The old one was a numeric IPv6 representation of the server running it so it had to be something more fun and cool . So with some other people (my girlfriend (for some reason she came op with b00b ), Thor and some random Google searches helped me putting together a simple list

:face:b00c (Facebook)
:tac0:be11 (Taco Bell)
:101 (lol)
:f00d (food)
:beef (beef)
:10ad (load)
:de11 (Dell)
:dead (dead)
:b00b (boob)
:51e7 (slet)
:c0de (code)
:bee2 (beer)
:babe (babe)
:abba (ABBA)
:a11:baba (Ali Baba)
:ca75 (cats)
:d09s (dogs)

Picked :101:ca75 (LOL Cats) as new IPv6 to use . Now I’m off figuring out fun addresses for WyriMaps and WoW-Screenshot content subdomains .

Picking a fun reverse DNS IPv6 address for IRSSI originally appeared on Ramblings of a Developer on March 1, 2011.

A styling guide for @predominant cakephp tags plugin article

WyriHaximus — Sun, 31 Oct 2010 19:20:18 +0000

This post assumes you’ve completed reading Graham Weldon (@predominant) article on using the plugin, the plugin pages them self and in specific the the tag cloud helper page. The helper example sets a size attribute on the li tag. A way to utilize this would be writing a piece of jQuery (or javascript in general) that would take it and apply some styling to it. This would mean a lot more resource usage compared to pure CSS.

The PHP

At the PHP side we need to change a few things currently this is the code:

1
2
3

echo $this->TagCloud->display($tags, array(
'before' => '

',
'after' => '

'));

We’ll be change that into this:

1
2
3
4
5

echo $this->TagCloud->display($tags, array(
'before' => '

',
'after' => '

',
'maxSize' => 50,
'minSize' => 1));

As you can see a few things change. First off we also supply the min and maxSize options. The helper uses these and calculates a number in between those values, we’ll use those numbers for the CSS classes later on. A option that change is before as you can see %size% is now used for a class, this class will contain it’s font-size and any options you might want to add yourself.

Generating the CSS

If your lazy and just want a working example you can skip this bit and skip to The CSS. Since the example requires 50 css class and it takes alot of time to calculate the required values by hand I’ve a little script to do it for me/us.

1
2
3
4
5
6
7
8
9
10
11

$css = '';
$class = 'fs';
$start_size = 0.75;
$stop_size = 2.5;
$count = 50;
$precision = 4;
for($i=1;$i<=$count;$i++) {
$css .= '.' . $class . $i . '{font-size:' . round((((($stop_size - $start_size) / ($count - 1)) * ($i - 1)) + $start_size),$precision) . "em;}\r\n";
}
echo $css;

The script has a few configuration values.

class – the prefix to the %size% value
start_size – the smallest possible tag size in em
stop_size – the biggest possible tag size in em
count – The number of classes and for now 50
precision – the maximum of digest behind the dot

The CSS

1
2
3

.fs1{font-size:0.75em;}
...
.fs50{font-size:2.5em;}

(Click here for the complete list.)

The Result

A styling guide for @predominant cakephp tags plugin article originally appeared on Ramblings of a Developer on October 31, 2010.

ReadyNAS Duo Try out

WyriHaximus — Mon, 30 Aug 2010 15:02:17 +0000

Bought a ReadyNAS Duo a few weeks ago and added a Western Digital WD20EARS to it. Aside from using it as a file storage I’ll also add my private client for my upcoming screenshots site to it and some media tools I might release as a cakephp plugin.

ReadyNAS Duo Try out originally appeared on Ramblings of a Developer on August 30, 2010.

Serving Static Content from tmpfs with Nginx

WyriHaximus — Sat, 24 Jul 2010 19:20:14 +0000

One way to speed up WyriMaps.net is to preload popular tiles and nodes to avoid the disk IO build up with a lot of visitors on the map moving around, zooming in and out and adding/removing node sets to the map. Using tmpfs is a simple way to use the RAM as extra cache to speed up your webpages. Tho another way to do that is using memcached wich is more interesting if you have several servers instead of one.

Preparation

First off make sure you have Nginx and tmpfs installed and the following diretories created:

1 2	/var/www/static.website.tld/ /mnt/tmpfs/nginx/static.website.tld/

The first contains the files to serve on disk we need them in case we can’t find anything n the memory. The seccond is the RAMDisk using tmpfs you mount using the following line in /etc/fstab:

1	tmpfs /mnt/tmpfs/nginx tmpfs rw 0 0

The last thing to prepare is a script that automaticly sets up the directories within the /mnt/tmpfs/nginx mount point. Since everything happens within the RAM of the server it’s all lost after a crash/shutdown/reboot.

Configuration The server

Next up is configuring nginx in/etc/nginx/nginx.conf (or somewhere else depending on your distro) to start with error handling every time nginx can’t find a file on tmpfs it generates an error even if it finds it later on the disc.

1	error_log /dev/null crit;

Seccondly within the http { } section we add to allow us to check the RAM first then the disc and then serve a 404 error page/image/something.

1	recursive_error_pages on;

Aside from these settings it’s wise to look into the Gzip and core modules for speeding up the transfer of data and buffering settings.

Configuration The host

Now this is the fun part . To start we create the server { } section within the http { } section. We add the following basic settings to make sure it listens on port 80 to the correct host (static.website.tld) and set the expiration to max so we don’t keep serving the files:

1
2
3

listen 80;
server_name static.website.tld;
expires max;

We tell the server to look in the tmpfs mount first and to check the disc after that:

1 2	root /mnt/tmpfs/nginx/static.website.tld/; error_page 404 = @static_website_tld_disc;

By telling nginx to check @static_website_tld_disc after it checked tmpfs and creating a location block we can add another 404 error_page (this is where the error_page nesting comes in we enabled earlier) to serve an error page:

1
2
3
4

location @static_website_tld_disc {
root /var/www/static.website.tld/;
error_page 404 = /404.html;
}

Now nginx first checks the ram for files and after that the disc we have one final block to add so we also serve a neat 4 0 4 error page. As final step with add a block that will tell nginx where to find 404.html (note that in the root in the block below there has to be a file named 404.html).

1
2
3

location = /404.html {
root /mnt/tmpfs/nginx/static.website.tld;
}

As the block shows I’m serving it from RAM and everytime the machine boots a script puts the 404.html file on the tmpfs mount. This results in the following config and keeps WyriMaps.net/WoW fast under high load.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

error_log /dev/null crit;
http {
recursive_error_pages on;
server {
listen 80;
server_name static.website.tld;
expires max;
root /mnt/tmpfs/nginx/static.website.tld/;
error_page 404 = @static_website_tld_disc;
location @static_website_tld_disc {
root /var/www/static.website.tld/;
error_page 404 = /404.html;
}
location = /404.html {
root /mnt/tmpfs/nginx/static.website.tld;
}
}
}

Enjoy !

Wyri

Serving Static Content from tmpfs with Nginx originally appeared on Ramblings of a Developer on July 24, 2010.

My first Google Chrome extensions for Wowhead, Thottbot, MMOC and Wowdb

WyriHaximus — Sun, 04 Jul 2010 14:37:42 +0000

After switching to Chrome a few days ago and hearing Joshua talking about how easy it is to write extensions for Chrome I decided to give it a try. One of the first thing coming to mind was everyone linking to wowhead, thottbot and all but you never know what exactly they are linking untill you click it. Most World of Warcraft database sites supply a handy tooltip script solving this problem. After a talk with Joshua and how Chrome plugins are written I gave it a shot.

The result are 4 extensions (tho basically the same code but adjusted for the 4 sites) that first check if the tooltip script is already in the webppage and stop there if it is. If the script isn’t present but links to the site are present it inserts the tooltip script into the body of the page thus attaching tooltips to the links.

The extensions:

Planning to do the same for a few other database sites later on in the week after some phpBB3 MOD work .

My first Google Chrome extensions for Wowhead, Thottbot, MMOC and Wowdb originally appeared on Ramblings of a Developer on July 4, 2010.