madcat.nl is dead, long live madcat.nl

I've always registered my domains using two companies. The first being the behemoth GoDaddy for my .com's and the second being TransIP for my .nl's.

However one domain remained with Protagonist and that has been bugging me for some time. Since they don't actually provide the service I want (ssh access) and the fact being that I want everything centralized.

So! The time for ignoring it is over. Today I initiated the transfer and signed a hosting cancellation form. After about 5 years its time to ditch Protagonist for my very own Linode instance.

Sure it takes a bit more work and you have to know what you're doing. Though if you've got multiple hosting plans with multiple providers, its almost always cheaper and less of a hassle. Well.. for me at least.

I will also be moving my email accounts to gmail or google apps, but I haven't decided yet which is best. I'll let you know how that works out.

Django FileBrowser and MarkItUp

What I wanted to do was override the default action for the insert Picture in the markItUp edditor with the FileBrowser manager popup, and have the image selection flow back into the edditor.

Thats right, it will be a nerdy post.

I used django-filebrowser 3 without grappelli found here:
http://code.google.com/p/django-filebrowser/source/browse/#svn/branches/filebrowser3-no-grappelli

First I changed the sets.js, which defines your settings (in JSON).

I copied the markitup/sets/textile folder to my own js folder and added the MARKITUP_SETS to my settings.py to point to the new location. Check the django-markitup docs for more about settings.

After that I changed the "sets.js" file to this:

mySettings = {
 previewParserPath: '/markitup/preview/',
 onShiftEnter:  {keepDefault:false, replaceWith:'\n\n'},
 markupSet: [
        ... snip ...
     {name:'Picture', replaceWith: function(markItUp) {
         FileBrowserHelper.show(markItUp);
         return false;
  }},
        ... snip ...
 ]
}

/**
I added the FileBrowserHelper object so that it can store the original markitup
object that fired the event / popup, so that I can use it when trying to return 
to the edittor.
**/
var FileBrowserHelper = {
    markItUp: false,

    show: function(markItUp) {
        this.markItUp = markItUp
        var textarea_id = $(markItUp.textarea).attr('id');
        FileBrowser.show(textarea_id, '/admin/filebrowser/browse/?pop=1&type=');
    },
    
    triggerInsert: function(url) {
        $(this.markItUp.textarea).trigger('insertion', 
            [{replaceWith: '!(left)'+url+'(beschrijving)!'}]);
    }
};

I used Mark Story's story for inspiration.

The problem I had was that the code which does the roundtrip for the default FileBrowserField does not support a textarea. So I had to create a seperate piece of code and override the template which handles the file selection view (filebrowser/templates/index.html) and change the default FB_FileBrowserField.js for my own.

I changed this (original):

    ... snip ...
    {% ifequal query.pop '1' %} <!-- FileBrowseField -->
    <script language="javascript" type="text/javascript" 
      src="{{ settings_var.URL_FILEBROWSER_MEDIA }}js/FB_FileBrowseField.js">
    </script>
    {% endifequal %}
    ... snip ...

For this (my filebrowser/templates/index.html):

    ... snip ...
    {% ifequal query.pop '1' %} <!-- FileBrowseField -->
    <script language="javascript" type="text/javascript" 
      src="{{ settings_var.MEDIA_URL }}js/filebrowser/FB_FileBrowseField.js">
    </script>
    {% endifequal %}
    ... snip ...

Next I copied the FB_FileBrowseField.js and placed it in my own js directory. I changed the FileSubmit method to the following code so that it triggers the right event and injects your image into the textarea on the position of your cursor:

function FileSubmit(FileURL, ThumbURL, FileType) {
    
    // var input_id=window.name.split("___").join(".");
    var input_id=window.name.replace(/____/g,'-').split("___").join(".");
    var preview_id = 'image_' + input_id;
    var link_id = 'link_' + input_id;
    var help_id = 'help_' + input_id;
    input = opener.document.getElementById(input_id);
    preview = opener.document.getElementById(preview_id);
    link = opener.document.getElementById(link_id);
    help = opener.document.getElementById(help_id);
    // set new value for input field
    
    if(input.type == "textarea") {
        
        opener.FileBrowserHelper.triggerInsert(FileURL);
        
    } else {
    
        input.value = FileURL;
        
        if (ThumbURL && FileType != "") {
            // selected file is an image and thumbnail is available:
            // display the preview-image (thumbnail)
            // link the preview-image to the original image
            link.setAttribute("href", FileURL);
            link.setAttribute("target", "_blank");
            preview.setAttribute("src", ThumbURL);
            help.setAttribute("style", "display:block");
        } else {
            // hide preview elements
            link.setAttribute("href", "");
            link.setAttribute("target", "");
            preview.setAttribute("src", "");
            help.setAttribute("style", "display:none");
        }
    }
    this.close();
}

And that's that really.

The Kraken, Linode, Wufoo and my muses

I need to tell you a story.

Last year we did a project at Fabrique for Heineken for the Champions League called the "Star Final". Its was game where you needed to sail from South Africa to Thailand. To win it you needed to get the highest score and to receive points you needed to join fleets and also do some Champions League pop-quizzes.

While designing Bram and I were convinced that when you have a game where you are sailing the world's oceans on a raft you're going to need your basic mythical creatures or at least a few pirates. So our idea was that when a player cancels her account a Kraken would appear and would drag the raft down into oblivion.

Right? Seriously.. how cool is that!

Anyway, initially the PL and Designer said "no". The reason being that it did add anything of value to the game.

Pff!

But we persevered and in the end The Kraken made its appearance in the messaging system. We (concept by Joris) created a way to send messages from one player to the other by using a "message in a bottle". When you removed the message a tentacle would creep up along the sides of the bottle and drag it down. It was a minor detail, BUT! we got the Kraken in there.

Victory at last.

(UPDATE; Lots of thanks to the hard and loving work, the epic struggle of Joris. Dedicating his own precious time to create, I dare say, a Legend. Couldn't have done it without you. Our hero.)

Mehhh...

But it didn't end there. During the project we talked about the Kraken for so long and with such intensity that it started to become a meme at Fabrique. Now everything had to have a Kraken somewhere. It was getting out of hand. We had to do something.

This was last week.

We decided to create getkraken.org. A website about all things "Kraken".

Bram registered the domain and I needed to fix the hosting. I chose Linode. We now have our very own linode VPS running our brand spanking new site getkraken.org.

Having this new server to play with, I decided to redirect all my domains to that very same server. I've had some ideas about applications and websites over the years and every time I had a "Holy Shit I'm Going To Get Rich"-thought I registered a domain for it. Tim Ferris calles these things "muses".

But there it always stopped for me.

Until today!

Today I actually did some work toward at least testing the ideas to see if there is any market for it. For every domain I registered and that was just sitting there I created a landing page like this: www.mashed.nl.

Though it isn't a proper test (because there isn't anything of value yet), at least I've got all the domains set up and can now start to write copy and do some SEO for all these pages individually.

To give you an idea of how many domains were talking about here. This is the complete list:
allprose.com
cardgameplanner.com
carrierematch.com
contractveiling.com
doodlen.nl
doodling.nl
geekrecruit.com
geocontent.nl
gotender.nl
hetmilieudieet.nl
mashed.nl
milieudieet.nl
mystakespoker.com
nietvoormeisjes.nl
phrasable.com
phraseable.com
pokenizer.com
transalot.com
verbodenvoormeisjes.nl
verselike.com

The contact form you see there is actually a form from Wufoo where you can design and create your own forms and just plunk them in the site with a bit of javascript. Done. Saved me a lot of time not having to create any mail handling code for some kind of homegrown form. I was also very impressed by their interface, I can recommend it. Especially for stuff like this.

So there is some forward motion. Lets see how long it lasts.

How Graphic.ly sets expectations for the Beta

Just got for the Graphic.ly Beta and this is how they set my expectations:

The Graphic.ly Baby Beta is unique in that we are truly giving you a product before it has matured. IT WILL SUCK BADLY. And when I said badly, I mean like one time, at band camp, when...well, lets just say it sucked. Badly.

We decided to give you the Baby Beta because we know that you care about building a really kick ass product, and we know that we must crawl before we can walk. If we dont get you involved now, the end product will just, well, suck badly.

You will be disappointed. A lot, and I mean A LOT, of features are not working yet.

I love it. Its a win-win. It sets my expectations low so that whatever I get to click on will only make me go "aawwh it aint _that_ bad". Only way to go is up.