When migrating to Octopress I wanted to make sure the comments would follow me from WordPress. Since Disqus is build into Octopress it requires near-zero setup time, but when taking your precious comments with you it gets slightly harder, just a bit. To export my post from WordPress I’ve used exitwp by Thomas Frössman. It does a brilliant job exporting the posts (though I had some issues with custom markup code) and metadata. Most importantly the wordpress_id field, we’ll be needing that.

disqus.html

Open source/_includes/disqus.html and find:

1

var disqus_identifier = '{{ site.url }}{{ page.url }}';

And replace that with:

1
2
3
4
5

{% if page.wordpress_id %}
    var disqus_identifier = '{{ page.wordpress_id }} {{ site.url }}/?p={{ page.wordpress_id }}';
{% else %}
    var disqus_identifier = '{{ site.url }}{{ page.url }}';
{% endif %}

This sets the disqus_identifier to the format the Disqus WordPress plugin uses to identify posts. Since Octopress uses the post URL as disqus_identifier we’re making sure only old WordPress posts use the old format.

article.html

While the previous section does the trick for the actual Disqus thread the link to the thread still requires some work. It uses the same disqus_identifier var but in html attribute form data-disqus-identifier. (As documented here.)

Open source/_includes/article.html and find:

1

<a href="{% if index %}{{ root_url }}{{ post.url }}{% endif %}#disqus_thread">Comments</a>

And replace with:

1

<a href="{% if index %}{{ root_url }}{{ post.url }}{% endif %}#disqus_thread" {% if post.wordpress_id %} data-disqus-identifier="{{ post.wordpress_id }} {{ site.url }}/?p={{ post.wordpress_id }}"{% endif %}>Comments</a>

Conclusion

In my experience the disqus.html changes are instant while the article.html changes take some time to work their way through the system. Not sure why to be honest. How ever after that time everything migrated with you and your readers can be happy their comments didn’t go to waste.

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