To win you’ve got to stay in the game.
-Claude M. Bristol

Recently I watched a video on Coursera on Model Thinking where the instructor, Scott E Page explained the Game of Life (a zero player game) divised by mathematician John Horton Conway. The game is basically a grid of cels and each cel has a ‘on’ and a ‘off’ state or in other words, an ‘alive’ or ‘dead’ state. It has simple rules that can create complex patterns over time. If a cel is alive, then it can continue to ‘live’ only if it has exactly 2 or 3 neighboring cels alive, else it dies or goes ‘off’. A dead cel can come alive only if it has exactly 3 neighboring cels alive. Over time, this creates intricate patterns and even animations!

I decided to implement this in Javascript/jQuery for fun. This hardly took an hour and it happens to be my second project on Github. Though I need to implement some more customizations, its here for you to look at and here if you d like to fork it and make better

Pre-requisites:

• Git
• A BitBucket account (free)
• A Virtual Private Server (I use Linode. If you dont have a VPS yet, then I highly recommend Linode and I d be delighted if you use this link as this has my referral code in it)

Log in to your BitBucket account and create a Git repository. Leave the ‘private’ checkbox selected. Once its created, use the link it will provide to clone the newly created repository. In a terminal, change directory to the wp-contents/theme folder in your WordPress installation and paste the git command which may look something like

git clone https://yourname@bitbucket.org/yourname/my-wp-theme.git

Enter the password and you are set to create your WordPress theme. Once you make some additions or changes to this theme folder, commit the changes and push them to BitBucket.

git add .
git commit -a -m "some message to identify this commit"

The first time you push, you may run into an error due to the size of files being pushed. In that case set the http post buffer to a little higher number

git config http.postBuffer 524288000

Once you are ready to take your new WordPress theme live, login to your VPS and in your wp-content/themes folder clone the repository from BitBucket just the way you did when you cloned it on your local machine. Whenever you make changes to your theme, push them to BitBucket and then pull them inside your theme folder on your VPS by issuing the git command

git pull

Time does not change us. It just unfolds us.

-Max Frisch

I m happy to post about my first ever jQuery plugin. This plugin will allow you to add a simple timer to a HTML element like DIV or SPAN or any other valid display element. You can style this element to show the timer in a nice way

Currently this plugin has 3 self explainatory methods to interact with it:

1. $(“#divId”).timer(“start”);  -> this will initialize the timer inside the div with id = “divId”. You can even pass in the number of seconds you’d like to start the timer at, like this, $(“#divId”).timer(“start”, 2500);
2. $(“#divId”).timer(“pause”); -> this will pause a started timer
3. $(“#divId”).timer(“resume”); -> and this will obviously resume a paused timer.

Make sure to include the latest jQuery file and this plugin file in your HEAD section. Click here for a demo of this plugin. Download the zipped folder (includes the plugin + demo HTML page) from GitHub. Here’s the script itself.

We were suddenly faced with the necessity of training a lot of young men in the art of navigation.

-Clyde Tombaugh

Navigation items built out of li elements or a common class name assigned to multiple divs or a set of elements that act as a bunch of options to select one from… all of these need a selected or highlighted state visually for the option that was clicked on. Also these kinda items need to store the currently selected item. Instead of writing a few lines of code every time I needed to have an item highlighted or selected, I wrote this simple Javascript function to manage this task with the following goals
* Highlight one item from a set
* Unhighlight currently highlighted item (if any)
* Store the currently highlighted element

You can either use the .js file for this in your project or simply copy the class from here and paste it in your common helpers file if you use one.

function Highlighter(selClass)
{
    this.sC = selClass;
    this.currItem;
}
Highlighter.prototype.highlight = function(item)
{
    if(item != this.currItem)
    {
        if(this.currItem != undefined)
        {
            this.currItem.removeClass(this.sC);
        }
        item.addClass(this.sC);
        this.currItem = item;
    }
}

How to use this?

In your HTML page, add a unordered list. For example,

<ul>
    <li>Home</li>
    <li>About</li>
    <li>Bleh</li>
    <li>Contact</li>
</ul>

In the head tag of the HTML page, make sure you are pulling jQuery along with the Highlighter JavaScript function as well as a CSS class for the highlighted state of the list element. I m calling it ‘sel’ for now. You can call it anything you like. Just make sure to pass that name to the JavaScript function.

Here s my simple CSS style for the unordered list and the sel class.

ul
{
    padding: 0px;
}
li
{
    list-style:none;
    display: inline-block;
    padding: 5px;
    background-color: #f2f2f2;
    color: #666;
    cursor: pointer;
    font-size: 12px;
}

Document Ready

$(document).ready(function(){
    var navHighlighter = new Highlighter("sel");
    $("li").click(function(){
        navHighlighter.highlight($(this));
    });
});

And that should enable the highlighter on the unordered list elements. Here’s a little demo of this function in action.

Create a text file with the following text in it and name it something like 2finger-scroll.

#!/bin/sh
synclient VertTwoFingerScroll=1
synclient HorizTwoFingerScroll=1
synclient EmulateTwoFingerMinW=5
synclient EmulateTwoFingerMinZ=48

In the terminal go to the directory where this file resides and make it executable:
sudo chmod +x 2finger-scroll

Add this file to the Startup Applications list. Now it ll enable 2 finger scroll on the trackpad every time you boot into Ubuntu. For it to take effect right away, enter

./2finger-scroll

Welcome those big, sticky, complicated problems. In them are your most powerful opportunities.
-Ralph Marston

Update: I ve converted this function into a jQuery plugin and put up a demo for it. If you d like to improve this plugin then you can clone it from github.

Here s a nice way to use jQuery and make table headers sticky when a page is scrolled down and the table headers reach the top. This is a feature in the new look that Google is sporting, in Google documents, Gmail etc. Obviously Google is not using jQuery to accomplish this and they are probably using some fancy code to do it. This is just a quick way to get it working on table headers.. <th> elements. In this setup we calculate the distance of the table from the top, check if it reaches 0 while scrolling and apply the CSS property position:fixed to it. If it falls back under the distance it had, then we revert the position to normal.

Pass in the table’s id to the function that follows it. For example if you have a table that had an id = “my_table”, then pass this in the document.ready function:

$(document).ready(function(){
    makeTableHeadersSticky("#my_table");
});

function makeTableHeadersSticky(tableId)
{
    //collect widths of all the th elements
    var thArr = $(tableId + " th");
    //create an array to hold the auto calculated widths of each element
    var thWidthsArr = [];
    $(tableId + " th").each(function(){
        thWidthsArr.push($(this).css("width"));
    });
    var pos = $(tableId).offset();
    //set the distance of the table from the top,
    //we ll need to make the headers sticky when this distance is 0  
    var thTop = pos.top + "px";
    //set the widths of the first and last tr's ths/tds...
    //this is done coz in some cases,
    //the widths will get messed up if the data was generated dynamically
    var count = 0;
    $(tableId + " tr:first-child>th").each(function(){
        $(this).css("width", thWidthsArr[count]);
        count++;
    });
    count = 0;
    $(tableId + " tr:last-child>td").each(function(){
        $(this).css("width", thWidthsArr[count]);
        count++;
    });
    $(window).scroll(function(){
        if($(window).scrollTop() > pos.top)
        {
            $(tableId + " tr:first-child").css("position", "fixed");
            $(tableId + " tr:first-child").css("top", "0px");
        }
        else
        {
            $(tableId + " tr:first-child").css("position", "relative");
            $(tableId + " tr:first-child").css("top", thTop);
        }
    });
}

A good fox does not eat his neighbor’s fowl!
-French proverb

This post is supposed to be just a reminder for me on how to upgrade the default Firefox on Ubuntu. 10.04 uses Firefox 3.6.23 when Firefox has released version 5, 6, 7 and very recently 8 in 2011 itself. Mozilla had announced this development plan.

To upgrade the Firefox version to the most recent one, you ll need to run the usual update and upgrade commands on apt-get and then add the following ppa to the Ubuntu repository list:

sudo add-apt-repository ppa:mozillateam/firefox-next

After that again

sudo apt-get update
sudo apt-get upgrade

And Firefox should be at its most recent offering which is 8 as of today.

I export the svn log to a xml file

svn log --xml -v > mylog.xml

And then I add a XSL stylesheet to the log file that got created on its second line (right after the XML version declaration)

<?xml-stylesheet type="text/xsl" href="myxsl.xsl"?>

And finally I use the following XSL to filter out other authors and only include my commits. If you are copying this from here, then make sure you substitute my name ‘walmik’ with your name.

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
<h2>My SVN log</h2>
<table border="1">
<xsl:for-each select="log/logentry">
<xsl:if test="author='walmik'">
<tr>
<td><xsl:value-of select="@revision"/></td>
<td><xsl:value-of select="author"/></td>
<td><xsl:value-of select="substring(date,1,10)"/></td>
<td><xsl:value-of select="msg"/></td>
<td>
<xsl:for-each select="paths/path">
<table>
<tr>
<td></td>
<td><xsl:value-of select="@action"/></td>
<td><xsl:value-of select="."/></td>
</tr>
</table>
</xsl:for-each>
</td>
</tr>
</xsl:if>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

As you can notice I m using a substring to format the date to show just the year, month and day.

Now when I open the XML in a browser, I can copy the work log entries from missing dates and paste it inside the Google spreadsheet. Of course, this whole exercise would be pointless if you are not in the habit of adding a message to your commits!

count=0; for file in *; do mv $file $count.png; let count=$count+1; done;

The first case can be tackled by pulling data after a small delay so that TinyMCE assets are loaded. The second case can be handled as follows:

To remove rich text capability from a textarea with the id ‘tmce-id’:

tinymce.get("tmce-id").save();
tinymce.execCommand('mceRemoveControl', true, "tmce-id");

In the above code, we saved the contents before removing the control so that the most recent edited text is available in plain view. You may also want to strip the tags that the editor had added to the text. You can just use a regular expression to do so and put in a function so you can reuse it quickly:

function stripHtml(str){
return str.replace(/<\S[^><]*>/gi, "");
}

So now the code would look like:

tinymce.get("tmce-id").save();
tinymce.execCommand('mceRemoveControl', true, "tmce-id");
var str = $("#tmce-id").val();
$("#tmce-id").val(stripHtml(str));

To add rich text again,

tinymce.execCommand('mceAddControl', true, "tmce-id");

In case of multiple TinyMCE textarea instances on the same page, you can pass a custom HTML attribute to the buttons that toggle TinyMCE. So if you are looping from 0 to 10 while adding textareas then the buttons that you are drawing for toggling can have a custom html attribute such as

<a class='enable-rte-btn' ref='tmce-id-0'>Enable Rich Text</a>
<a class='disable-rte-btn' ref='tmce-id-0'>Remove Rich Text</a>
<textarea id='tmce-id-0' class='tinymce'></textarea>

You can draw out multiple textareas like this incrementing 0 to 10 or whatever the number and then enable TinyMCE on textareas with the class ‘tinymce’. If there are too many textareas then pull the data after a small delay (based on the number of textareas you have) and load it in the textareas. After that add a click function to enable or disable rich text on all tags with the class ‘enable-rte-btn’ and ‘disable-rte-btn’ respectively.