WordPress has become an increasingly uninteresting platform to blog on. recently I’ve fallen in love with the simplicity and robustness of markdown files. Though WordPress has several plugins doing markdown @Ceeram and @kvz pointed me to Octopress. It builds on the simplicity of markdown files and utilizing Jekyll creating a rocksolid blogging platform. (Heck Github uses it for github pages so it can’t be wrong!)

Pros

• Static files, no wasted CPU clycles for something that doesn’t change often.
• CDN ready
• Easy extensible with either existing plugins or building your own

Cons

• Setting it up requires more time and especially my setup (private git repo’s deploying it to AWS S3 serving it over AWS CloudFront).
• Not that many plugins compared to WordPress, there is a 3rd party plugin list on Github.

Conclusion

Overall I’m happy with the migration. It’s become simpler, interesting and fun to blog again. Will post some followup posts describing certain details I couldn’t find on the net.

While going over the Octopress Plugin list I noticed the missing Piwik plugin. After digging around a bit I didn’t find anything to my pleasing. So I’ve decided to create a configurable plugin using the new async code.

After wrapping the code in a template, the plugin only required 2 entries in _config.yml. The first for the host running piwik and 1 for your blogs side id.

1
2
3

# Piwik
piwik_host_name: piwik.example.com
piwik_site_id: 1

The result can be found on github.

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.

1

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.)

1

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.

1
2

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.

1

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

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

1

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.

1
2
3
4
5
6

/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.

1

account on

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

1

save

Interesting reads/links

• My perfect Irssi setup

• BitlBee

• Identi.ca, Twitter and Jabber with BitlBee via Irssi

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

<?php 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

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.

1

123

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

1

25

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.

1

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: '<a href="%href%" id="%identifier%" title="%title%"><img src="%src%" alt="%title%" /></a>'
});

1
2
3
4
5

<div id="ESSContainer">
    <a id="EES_121" href="/model/view/121.html" title=""><img src="/img/121.jpg" alt="" /></a>
    <a id="EES_122" href="/model/view/121.html" title=""><img src="/img/122.jpg" alt="" /></a>
    <a id="EES_123" href="/model/view/121.html" title=""><img src="/img/123.jpg" alt="" /></a>
</div>

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.

Twitter has updated their buttons to be asynchronousby default!

Check out twitter.com/buttons

Original post

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

<script type="text/javascript">// <![CDATA[
/* <![CDATA[ */
    (function() {
      var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
      s.type = 'text/javascript';
      s.async = true;
      s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
      t.parentNode.insertBefore(s, t);
  })();
/* ]]> */
// ]]></script>

The same can be done with Twitter by replacing the standard <script> tag:

1

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

With this:

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript">// <![CDATA[
(function() {
        var twitterScriptTag = document.createElement('script');
        twitterScriptTag.type = 'text/javascript';
        twitterScriptTag.async = true;
        twitterScriptTag.src = 'http://platform.twitter.com/widgets.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(twitterScriptTag, s);
})();
// ]]></script>

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.

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

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 :P), 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 ;).

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' => '<li size="%size%" class="tag">',
  'after' => '</li>'));

We’ll be change that into this:

1
2
3
4
5

echo $this->TagCloud->display($tags, array(
  'before' => '<li class="fs%size% tag">',
  'after' => '</li>',
  '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

<?php
$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

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 404 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 :D!

Wyri