<?xml version="1.0"?>
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rss="http://purl.org/rss/1.0/" xmlns:a="http://www.w3.org/2005/Atom" xmlns:dt="http://xsltsl.org/date-time" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns="http://www.w3.org/1999/xhtml">
  <rss:channel rdf:about="http://yoan.dosimple.ch/blog/">
    <rss:title>Yoan Blanc’s weblog</rss:title>
    <rss:link>http://yoan.dosimple.ch/blog/</rss:link>
    <rss:description>The boring weblog of Yoan
    Blanc</rss:description>
    <rss:items>
      <rdf:Seq>
        <rdf:li rdf:resource="http://yoan.dosimple.ch/blog/2010/02/06"/>
        <rdf:li rdf:resource="http://yoan.dosimple.ch/blog/2010/01/12"/>
        <rdf:li rdf:resource="http://yoan.dosimple.ch/blog/2009/12/31"/>
        <rdf:li rdf:resource="http://yoan.dosimple.ch/blog/2009/11/28"/>
        <rdf:li rdf:resource="http://yoan.dosimple.ch/blog/2009/10/31"/>
        <rdf:li rdf:resource="http://yoan.dosimple.ch/blog/2009/09/24"/>
        <rdf:li rdf:resource="http://yoan.dosimple.ch/blog/2009/08/17"/>
        <rdf:li rdf:resource="http://yoan.dosimple.ch/blog/2009/07/18"/>
        <rdf:li rdf:resource="http://yoan.dosimple.ch/blog/2009/06/26"/>
        <rdf:li rdf:resource="http://yoan.dosimple.ch/blog/2009/05/10"/>
      </rdf:Seq>
    </rss:items>
  </rss:channel>
  <rss:item rdf:about="http://yoan.dosimple.ch/blog/2010/02/06">
    <rss:title>Writing testable JavaScript</rss:title>
    <rss:link>http://yoan.dosimple.ch/blog/2010/02/06</rss:link>
    <dc:date>2010-02-06T12:00:00+01:00</dc:date>
    <dc:subject>JavaScript jQuery YUI</dc:subject>
    <content:encoded><![CDATA[<p>
When some people still focus on documentation, I tend to slip on saying that it’s not that important.
</p><blockquote>
<p><em>“Working software over comprehensive documentation”</em></p>
<p><a href="http://agilemanifesto.org/">Manifesto for Agile Software Development</a></p>
</blockquote><p>
Most of us already know about unobtrusive JavaScript and how good it is. Maybe also about event delegation and how many listeners you are sparing with that little technique (thanks to <a href="http://api.jquery.com/closest/">jQuery’s closest</a>). I’ll be a bit more generalist here and talking about writing code that enable you to test them with unit tests (using QUnit, YUI, …).
</p><p>
Before you think about it, yes <strong>Test Driven Development</strong> or <strong>Behavioural Driven Development</strong> (which are very close if you do the first one right) will force to you do so. If you know those, go with them but the following pitfalls might still be interesting.
</p><p>
Don’t use the module pattern when you really mean class.
</p><pre>var Foo = {
 init: function(state) {
  this.state = state;
 }
}

Foo.init(42);</pre><p>
How many instances of <code>Foo</code> can you have on your page once initialized ? The answer is one as this represent a kind of singleton. It also means that you won’t be able to test as many instances as you want representing tons of different cases. Stick with the good ol’ way.
</p><pre>function Foo(state) {
 this.state = state;
}

new Foo(42);</pre><p>
Stay away from id’s as well for the same reason and try to use classes instead. It means no <code>document.getElementById</code> within <code>Foo</code>’s constructor.
</p><p>
Separate the content from the logic, you JavaScript module/class should be about the logic only. Strings, translations, configuration, ... should be kept outside. Giving a JSON structure as only parameter of a constructor is common and readable.
</p><pre>new Foo({
 class: "foo",
 quantity: 42
});</pre><p>
<a href="http://api.jquery.com/jQuery.extend/">jQuery’s extend</a> (YUI’s ..., Prototype ...) offer a good way to mix good default values with configuration.
</p><p>
Next one is loose coupling. Being sure that a module what work as well alone or when it has to interact with many other ones is key when building big and complexe systems.
</p><p>
The involved technique is to rely on an event mechanism. On a very safe web environment (like Opera widgets, Pre application, Apple dashboard, …), DOM3 events can be used. You only have be tied to a DOM node to fire them. YUI implements an easy to use Observer pattern (called <a href="http://developer.yahoo.com/yui/event/#customevent">CustomEvent in YUI2</a>), jQuery offers something similar which integrates with how it manages DOM events (Prototype as well).
</p><pre><i>// b will send data to a</i>
var a = new A();
var b = new B(a);

<i>// or</i>
var a = new A();
var b = new B();
a.onChange(b.onChanged, b);</pre><p>
Those are very similar, thus it seems easier to adapt, test or reuse. Isn’t it?terminal
</p><p>
And last but not least, don’t put your init in the libraries/modules/… Anything that involves <code>onload</code>, <code>DOMContentReady</code>, … is tied to a particular usage already and shouldn’t live into a library or module imho.
</p><pre>function A(element) {
 <i>// whatever</i>
}

$(document).ready(function() {
	new A($("#a")[0]);
});</pre><p>
It means that those two blocks of code should live separately. At last in your developement environment. Then, you’re totally free to join, compress and maybe obfuscate them as you won’t test or develop against that version.
</p><p>
And it’s more a personal taste issue here. I don’t like stuff that are automagically loaded because of a particular class name or id.
</p><p>
If you see more of them, feel free to contribute.
</p>]]></content:encoded>
  </rss:item>
  <rss:item rdf:about="http://yoan.dosimple.ch/blog/2010/01/12">
    <rss:title>PHP is a templating language</rss:title>
    <rss:link>http://yoan.dosimple.ch/blog/2010/01/12</rss:link>
    <dc:date>2010-01-12T12:00:00+01:00</dc:date>
    <dc:subject>APC PHP doSimple</dc:subject>
    <content:encoded><![CDATA[<p>
For my last project, I had to use <abbr title="PHP Hypertext Preprocessor">PHP</abbr> and managed to make it fun by —among other stuff— rewriting a templating tool. Templates was one of the first thing we did with <a href="http://batiste.dosimple.ch/">Batiste</a> for <a href="http://dosimple.ch">doSimple</a>. It was <a href="http://dosimple.ch/articles/Template/" hreflang="fr">qregexp based</a>, not very flexible, ugly and for sure, inefficient.
</p><p>
Let’s redo this, keeping in mind that <a href="http://www.php.net">PHP</a> is already a templating language.
</p><pre>&lt;!DOCTYPE html&gt;
&lt;html lang=<b>&lt;?php</b> echo $lang <b>?&gt;</b>&gt;
<b>&lt;?php</b> echo $html <b>?&gt;</b>
&lt;/html&gt;
</pre><p>
This is valid PHP, and can be seen as a template with two parameters: the language (<code>$lang</code>) and some html content (<code>$html</code>).
</p><pre><b>&lt;?php</b>
$lang = "en";
$html = "&lt;h1&gt;Hello World!&lt;/h1&gt;";
<i>// the file above</i>
include("hello.php");
</pre><p>
That was too easy. But it’s not very clean, imho because you cannot do anything with the result. Let’s do this a little bit better.
</p><pre><b>&lt;?php</b>
function template($template, $args) {
 extract($args);
 ob_start();
 include($template);
 $result = ob_get_contents();
 ob_end_clean();
 return $result;
}

echo template("hello.php",
              array("lang" =&gt; "en",
                    "html" =&gt; "&lt;h1&gt;Hello, World!&lt;/h1&gt;"));
</pre><p>
This way, you don’t pollute the global scope with variables and are able to reuse templates. It’s still very, very basic but will enable you to understand the final class Template that is used by <a href="http://www.bluespirit.ch">bluespirit.ch</a>. I’ll show you how it works but let you dive into the PHP code to understand it.
</p><pre><b>&lt;?php</b>
<i>// templates is a directory</i>
$tpl = new Template("templates");

echo $tpl-&gt;index(array("title" =&gt; "Hello",
                       "links" =&gt; array(1,2,3));
</pre><p>
Now the templates, let’s start with the index (the function call above is in fact using <a href="http://php.net/__call">__call</a>).
</p><pre><b>&lt;?php</b>
$this-&gt;inherits("layout");
$this-&gt;block("head")
<b>?&gt;</b>
&lt;title&gt;<b>&lt;?php</b> echo $title <b>?&gt;</b>&lt;/title&gt;
<b>&lt;?php</b>
$this-&gt;endblock();
$this-&gt;block("body")
<b>?&gt;</b>
&lt;h1&gt;<b>&lt;?php</b> echo $title <b>?&gt;</b>&lt;/h1&gt;
&lt;ul&gt;
<b>&lt;?php</b>
foreach($links as $link):
<b>?&gt;</b>
&lt;li&gt;<b>&lt;?php</b> echo $this-&gt;link(array("link" =&gt; $link)) <b>?&gt;</b>&lt;/li&gt;
<b>&lt;?php</b>
endforeach
<b>?&gt;</b>
&lt;/ul&gt;
<b>&lt;?php</b>
$this-&gt;endblock();
</pre><p>
The layout, from which this template inherits.
</p><pre>
&lt;!DOCTYPE html&gt;
&lt;html lang=en&gt;
&lt;head&gt;
&lt;meta charset=utf-8&gt;
<b>&lt;?php</b> $this-&gt;block("head") <b>?&gt;</b>
&lt;title&gt;Untitled Document&lt;/title&gt;
<b>&lt;?php</b> $this-&gt;endblock() <b>?&gt;</b>
&lt;/head&gt;
&lt;body&gt;
<b>&lt;?php</b>
$this-&gt;block("body");
$this-&gt;endblock()
<b>?&gt;</b>
&lt;/body&gt;
&lt;/html&gt;
</pre><p>
and link, of course.
</p><pre><b>&lt;?php</b>
echo $link
</pre><p>
Which could have been more complex.
</p><p>
That’s the very basics, the final one includes more features like some block control meaning you can no only override a block but also append or prepend some content which is very useful for the usual end of the page scripts. Another one that I like very much is some cache (using <a href="http://php.net/apc">APC</a> (or <a href="http://github.com/greut/apc_alt">apc_alt</a>) enabling avoiding regenerating a piece of layout everytime.
</p><p>
Having this kind of cache also means that you might ending up doing bad things in the templates (views) like SQL requests. This is for example used on the homepage of <a href="http://www.bluespirit.ch/">bluespirit.ch</a> where the news are coming from a RSS feed parsed by <a href="http://pipes.yahoo.com">Yahoo! Pipes</a>. It doesn’t <a href="http://www.wait-till-i.com/2009/12/18/curl-your-view-source-of-the-web/" title="cURL &#x2013; your &#x201C;view source&#x201D; of the web">cURL it</a> all the time.
</p><p>
All this in <a href="http://github.com/greut/template">on GitHub</a>, get it, fork it, fix it. And I’ve got one question for the PHP masters in the room, how do you do monkeypatching in PHP? (I know how much evil it is, but I promise that I won’t break anything)
</p>]]></content:encoded>
  </rss:item>
  <rss:item rdf:about="http://yoan.dosimple.ch/blog/2009/12/31">
    <rss:title>MMIX</rss:title>
    <rss:link>http://yoan.dosimple.ch/blog/2009/12/31</rss:link>
    <dc:date>2009-12-31T12:00:00+01:00</dc:date>
    <dc:subject>2009 Opera Eboutic Life</dc:subject>
    <content:encoded><![CDATA[<p>
It’s been more than 10 years now that I made my first website (using Netscape Composer). Apart the fact that I loved it, nobody would have been able to say that I still would be doing that today. Here comes the quick last year review and the try of getting an overview of next year. Promising as far as I can tell. I’m realizing that I didn’t do any last year, what a mistake.
</p><p>
So in 2009, I left Oslo and the web application team of Opera Software because I wasn’t happy. Not being able to fully enjoy the Friday beer might be a cause or not.
</p><p>
Back in Switzerland I was able to take some time with my former girlfriend, visiting her and some friends of her in Germany. I still wanted to work on some projects but I realize now that it was stupid to not being able to do one thing at the time and appreciate it.
</p><p>
In June, I joined <a href="http://www.eboutic.ch/">eboutic.ch</a> as a Rails developer. Those guys weren’t afraid to pick someone who never done anything serious with Ruby on Rails before. Hopefully <a href="http://www.accolade.ch/" hreflang="fr">Raphaël</a> was there to guide me and show me the way when I was being to pythonic or, even worse, phpish. In the six month I spent there, we actually manage to do some big stuff and that is really a good achievement for the company itself. Migrating to a very fresh version of Rails, revamping all the HTML during the redesign, auto-magically generating the daily mailing (that were done by hand before that, every single day) and many more.
</p><p>
Excuse me if I offend you, but the more I work with different technologies the more I realize that the differences between them is basically the syntax of the language itself. As Paul Graham would have said, Ruby is an acceptable Lisp. I’m back at hacking in PHP since a couple of weeks, and it’s, sometimes, quite painful.
</p><p>
During that time, I lived in a couple of flats, looking for a room or waiting for September to know what would have happened on her side. All the flat I lived in or visited sucked. My job was getting on my nerves and I had the feeling to be stuck in a dead-end. So, I blew everything up. Locality, job, girlfriend, ... It’s time to take the time of doing things like I feel them, or to feel them.
</p><p>
Thanks to Paris Web, and the people I met there who told me what I already knew but could see myself. I’ve been travelling between city, jumping from jobs to jobs for more than 3 years now. This is what I like doing: being a pain in the arse, getting stuff done on time, putting some quality, learning stuffs and travelling (it doesn’t have to be far).
</p><p>
So since this month, I’m a (no-yet-too-expensive-)freelancer, I’ve got a flat in Neuchâtel (which is a complete heresy for almost all my friends, the one who didn’t already reject me). I’m looking forward to enjoying this city even more.
</p><p>
As a side thing, thanks to the professor who supervized my diploma (in 2006) I had the opportunity to give a 2 hours JavaScript crash course including an introduction about the awesomeness of getting a new job every six months. And to act as an expert for diploma. It’s good but very hard to go back into the school reality. I knew the gap was huge but felt in it nonetheless.
</p><p>
Enough with last year, let’s look at the bright future. More weddings and children to come. Not mine, but it makes me feeling how good it was to be innocent. Innocent doesn’t mean nice at least not applied to myself.
</p><p>
On the work side, the challenge will be to find a (correct) balance between working and doing anything else that doesn’t involve any kind of computer. Pure utopy, but it’s good to start trying at some point. Another one will be having enough work.
</p><p>
And last but not least, my mother is leaving Switzerland for starting over in Corsica. I’ll have to take care of some of her furnitures but most important the cats for a couple of month. Two devils worse that kinds because it’s totally hopeless to believe in educating a cat.
</p><p>
Feel free to drop me an e-mail if you have some mice for the cats, some freetime or a need for a couch. I’ll be pleased to help.
</p>]]></content:encoded>
  </rss:item>
  <rss:item rdf:about="http://yoan.dosimple.ch/blog/2009/11/28">
    <rss:title>Python web app as an egg with Paste, Fabric and Spawning</rss:title>
    <rss:link>http://yoan.dosimple.ch/blog/2009/11/28</rss:link>
    <dc:date>2009-11-28T12:00:00+01:00</dc:date>
    <dc:subject>Fabric Paster Python Spawning WSGI</dc:subject>
    <content:encoded><![CDATA[<p>
One of the major success of PHP is how easily you can deploy PHP applications. Thanks mod_php for that. Python or Ruby requires quite more work even though it’s not that painful if your using something like <a href="http://www.modrails.com/" hreflang="en">Passenger with Ruby</a>. I’m still looking for a way that I find brilliant. So I played with <a href="http://pythonpaste.org/" hreflang="en">Paste</a>, <a href="http://pypi.python.org/pypi/Spawning" hreflang="en">Spawning</a> and <a href="http://peak.telecommunity.com/DevCenter/setuptools" hreflang="en">setuptools</a> to build a very minimalist <a href="http://yoan.dosimple.ch/blog/2009/01/31/" hreflang="en" title="Playing with Middlewares">WSGI application</a> you deploy without any pain using <a href="http://fabfile.org" hreflang="en">Fabric</a>.
</p><p>
Before we start, you can find the code bellow on <a href="http://gist.github.com/235338" hreflang="en">GitHub</a>.
</p><p>
First the <code>setup.py</code> file that describe our application:
</p><pre>from setuptools import setup, find_packages

setup(name="app",
      version="0.1",
      description="example application",
      long_description="",
      keywords="",
      author="Yoan Blanc",
      author_email="yoan.at.dosimple.ch",
      url="http://yoan.dosimple.ch/blog/",
      license=’All rights reserved’,
      packages=find_packages(),
      zip_safe=False,
      install_requires=[],
      entry_points={"paste.app_factory": ["main=app:make_app"]},
     )</pre><p>
It’s all standard except the entry point called <code>paste.app_factory</code> that will be used by Paste to create the WSGI application. For the Djangoist here, Paster acts like your <code>manage.py</code>.
</p><p>
Make the <a href="http://wsgi.org" hreflang="en">WSGI</a> application itself, into <code>app/__init__.py</code>:
</p><pre>def application(environ, start_response):
 start_response("200 OK",
                [("Content-Type", "text/html")])
 return ["&lt;h1&gt;Hello World!&lt;/h1&gt;"]</pre><p>
And the factory (called <code>make_app</code> inside <code>setup.py</code>) is required as well in the same file.
</p><pre>def make_app(global_conf, **app_conf):
    return application</pre><p>
Now, you might be wondering how this make_app is called. Paste works with <em>ini</em> files that decribe your configuration, from the app your using to the database, the server, logs, and so on. It’s very handy to replicate the same kind of environment you find when working with Ruby on Rails by having different ini files for each.
</p><p>
So there is the <code>app.ini</code>:
</p><pre>[app:main]
use = egg:app

[server:main]
use = egg:Spawning
host = 127.0.0.1
port = 8000
num_processes = 1
threadpool_workers = 1</pre><p>
The first section describes the application to use. It’s the egg that setuptools will create and install. That’s right, your application is exactily like any other python package. It means dependencies resolution, updates,… And the second part describe which server paster will have to use to run it. Spawning is a very efficient server that handles graceful code reloading. Pure happiness.
</p><p>
Before you can run it using :
</p><pre>$ paster serve app.ini</pre><p>
You’ll have to install it.
</p><pre># python setup.py develop</pre><p>
<code>develop</code> means it symlinks the package to your directory and you won’t have to reinstall it later to take into account the changes made.
</p><p>
It should run just perfectly. Now let’s worry about deploying it somewhere else. Local web applications are nice but sharing them is cool too.
</p><p>
This is the <code>fabfile.py</code>, Fabric is more or less like <a href="http://www.capify.org/" hreflang="en">Capistrano</a> (Ruby):
</p><pre>from __future__ import with_statement
from fabric.api import env, run, put, local, cd

env.hosts = ["localhost"]
env.path = "~/www/app"

def build_egg():
    local("python setup.py bdist_egg")

def cleanup():
    local("rm -rf build")
    local("rm -rf dist")

def start():
    with cd(env.path):
        run("PYTHONPATH=app.egg paster serve app.ini"
            "--daemon --pid-file=app.pid")

def stop():
    with cd(env.path):
        run("paster serve --stop-daemon "
            "--pid-file=app.pid")

def deploy():
    build_egg()
    put("app.ini", env.path)
    put("dist/*.egg", env.path+"/app.egg")
    cleanup()</pre><p>
A pythonic Makefile, more or less that has special power to deal with deployment. This how you can use it.
</p><pre>$ fab deploy
$ fab start</pre><p>
It created a .egg, uploaded it to the destination and started the Spawning server using Paster. It will run on the port <code>8080</code>, to see it on the port 80 I’d use something like <a href="http://nginx.net/" hreflang="en">Nginx</a> as a proxy. But it’s a different story (and very simple by the way).
</p><p>
After you made some changes simple run:
</p><pre>$ fab deploy</pre><p>
to see them live.
</p><pre>$ fab stop</pre><p>
Will stop the server.
</p><p>
How awesome is that?
</p><p>
There is a lot more that can be done regarding how you’re playing with the eggs. Using <a href="http://pypi.python.org/pypi/virtualenv" hreflang="en">virtualenv</a> to keep multiple, sane environments and maybe your own cheeseshop where all your eggs can live (see <a href="http://github.com/ask/chishop" hreflang="en">Ask’s Chishop</a>)
</p><p>
I’m very fresh on that field but am very happy seeing that such good tools exist. Please share your experience, I’m looking forward knowing what kind of process is used in the real word out there to.
</p>]]></content:encoded>
  </rss:item>
  <rss:item rdf:about="http://yoan.dosimple.ch/blog/2009/10/31">
    <rss:title>Adaptive layout for the mobile web</rss:title>
    <rss:link>http://yoan.dosimple.ch/blog/2009/10/31</rss:link>
    <dc:date>2009-10-31T12:00:00+01:00</dc:date>
    <dc:subject>CSS iPhone Mobile Opera Webkit</dc:subject>
    <content:encoded><![CDATA[<p>
One web, is still in the air and we, as web developers, are still hoping that it will be the case. Nowadays, phones are getting better and better and the need of doing a specific version of any website if, as I see it, fading away. When someone tells you: <em>“Hey, I need an iPhone/Android/Pre/Maemo app (or maybe an Opera/Vodafone widget) for my website!”</em> I would try to show her/him that, at a very small cost, a well done website can be adapted to those devices.
</p><p>
If the iPhone marketshare is quite big, other platforms are emerging. The cool side is that they are built on Webkit as well, like: Android or Palm Pre. Less powerful phones might run Opera mini which has also a very good support of web standards. I’ll try to show simple things you can do to give your website a better experience everywhere without building multiple versions of it.
</p><p>
The biggest problem, the width. On the desktop side, it’s commonly assumed that 1024x768 is the standard. This is why the ~960px width layout is so common (take Yahoo!, Facebook, LinkedIn, …). My opinion is that netbooks will gain some marketshare too and it also weight the fact that one size fits all will be outdated in the next years.
</p><p>
Devices might use HVGA 480x320 (iPhone, Pre, HTC Dream) or QVGA 320x240 or maybe bigger or smaller. The iPhone comes with a feature to control the viewport, which might be supported by the others (like <a href="http://dev.opera.com/articles/view/opera-mobile-9-5-the-developer-angle/" hreflang="en">Opera</a>) or not.
</p><pre>&lt;meta name=viewport
      content="width=320; user-scalable=1;"&gt;</pre><p>
Like <a href="http://www.slideshare.net/glazou/paris-web2009-one-web" hreflang="en">Daniel Glazman said during Paris Web 2009</a>, please don’t prevent the user to scale in/out. This is totally non-standard and there is a standard way of doing that. It’s called media-queries.
</p><pre>&lt;link href="small.css"
      media="handheld, only screen and (max-device-width: 480px)"
      rel="stylesheet" 
      type="text/css"&gt;</pre><p>
This stylesheet gonna be applied on handheld devices and others with a very narrow screen (smaller than 480px in this case) and it enables to do cool things like :
</p><ul>
    <li>going with a liquid layout instead of a fixed or elastic one;</li>
    <li>linearizing multiple-columns layout (<code>float:none</code>);</li>
    <li>hiding unnecessary stuffs (like you already do in your print stylesheet of course);</li>
    <li>resizing big picture (<code>max-width: 100%</code>);</li>
    <li>making small things bigger, so you can click them more easily (like tiny icons);</li>
    <li>taking into account that there is no <code>:hover</code> state on a touch screen;</li>
    <li>and many more…</li>
</ul><p>
Such small screen cannot take advantages of the two dimensions, like a usual monitor does, so a linear (in the Y-axis of course) layout is preferred.
</p><p>
They are of course many, more issues that can be addressed like the iPhone file-size cache limitation, bandwidth reduction, HTTP calls,… I wouldn’t focus on those until you get an audience worth doing so. If it’s not your target of course.
</p><p>
I won’t throw the baby with the bathwater and native applications are good if you need to do specific things with the device itself or require specific performances. Phones offer, or will offer, access to the address book, the camera, the geo-localization,… Most of those require specific actions which aren’t completely specified/implemented yet, like <a href="http://bondi.omtp.org/" hreflang="en">OMTP Bondi</a>  or <a href="http://dev.w3.org/geo/api/spec-source.html" hreflang="en">W3C</a> itself. 
</p><p>
The best platform to test that is OSX, simply because the iPhone SDK won’t work elsewhere. Testing with the Android emulator or Opera Mini can be done on any platform. Mozilla promised to release soon a version of Fennec targeting the Maemo platform which is already using <a href="http://maemo.nokia.com/features/maemo-browser/" hreflang="en">Gecko</a>. By the way, the <a href="http://maemo.nokia.com/#device-intro" hreflang="en">N900</a> looks awesome! To develop it, simply activate that stylesheet for everyone, so no media-queries.
</p><p>
It very easy to start adapting a website to smaller devices and may even force you to have a better grid structure. Maybe not yet a business advantage, but sooner or later it will.
</p>]]></content:encoded>
  </rss:item>
  <rss:item rdf:about="http://yoan.dosimple.ch/blog/2009/09/24">
    <rss:title>Working on the edge</rss:title>
    <rss:link>http://yoan.dosimple.ch/blog/2009/09/24</rss:link>
    <dc:date>2009-09-24T12:00:00+01:00</dc:date>
    <dc:subject>Rails Ruby Work</dc:subject>
    <content:encoded><![CDATA[<p>
At work we worked (it’s now over) quite hard to migrate our codebase to take advantage of the latest features and bug fixes of the underlying framework and libraries (in our case Ruby on Rails). It’s hard because of the decisions that were made upfront by the consulting company who started it.
</p><p>
Let’s start with the background. The development started in 2008 and they picked Rails 1.2.x when Rails 2.0.x existed for almost one year already. This design decision might have been motivated by the fact that some libraries weren’t yet ported to the latest version but still. PDF-writer instead of Prawn when it was known that the later gonna <a href="http://www.infoq.com/news/2008/08/ruby-pdf-generation-prawn" hreflang="en">become the one maintained</a> and I can continue with other examples.
</p><p>
This recalls me a story of a huge homemade CMS that had to run inside an emulator for the OS running an utterly old version of Perl because they were no budget to maintain it. When you get there, it’s obviously too late.
</p><p>
I wanna make an analogy with the (most popular) operating system out there:
</p><ul>
<li>I’m using a GNU/Linux flavoured distribution (the very modular one that compiles everything) so I can update it as often as I want (usually once a day) and when something break it’s usually one of them that is easy to identify and most of the time easy to fix too.</li>
<li>I also use OSX at work and you can feel the upgrade fear. One medium-sized upgrade with often no possible rollback. It toke one week-end  to my workmate to get his dev environment running again. During the last upgrade I had to reinstall everything coming from macports and most of the Ruby gems.</li>
<li>And last but not least, Microsoft Windows. How many Windows 98, 2000 are out there? Many users of IE6 are stuck to it because there are stuck to a particular version of the OS underneath too. I dunno the cost of installing a new version of Microsoft Windows into a company but it must be big (if you take into account the time required).</li>
</ul><p>
Web development nowadays is closer to the Linux (and some other unices) distribution philosophy than the two others. Your application is using a bunch of libraries, maybe a framework. They usually have a website, the open source ones a bug tracker, feed of the changes, mailing list and maybe hosted somewhere you can interact with (like github, bitbucket, google code, ...) You can keep an eye on the changes, update them easily.
</p><pre># Ruby
gem update
# Python
yolk -U
easy_install -U xxx</pre><p>
I’ll not give any details about CPAN (Perl) or PEAR (PHP) since I’ve never used them.
</p><p>
Software development, in the web field at least because it’s what I know the most, is also subject to entropy and requires some energy to keep everything clean. Keep your working environment clean, like a cook has to clean his entire kitchen once in a while. If project manager should do regular bug triage, developer can do, for example <code>TODO</code>/<code>FIXME</code> cleanup sessions.
</p><p>
A trivial advice: when you start a development that will last a couple of months, go with the most recent version or why not the bleeding-edge one (often called <em>trunk</em>, <em>tip</em>, <em>head</em>, …) if it might be stable when you’ll be done.
</p><p>
I’m wondering if a company that doesn’t have the resources to maintain a piece of code shouldn’t open source it to take advantage of a community-to-build. But this has a cost too.
</p>]]></content:encoded>
  </rss:item>
  <rss:item rdf:about="http://yoan.dosimple.ch/blog/2009/08/17">
    <rss:title>XML with Padding</rss:title>
    <rss:link>http://yoan.dosimple.ch/blog/2009/08/17</rss:link>
    <dc:date>2009-08-17T12:00:00+01:00</dc:date>
    <dc:subject>E4X JavaScript Python</dc:subject>
    <content:encoded><![CDATA[<p>
Last week we had a small arguing on #openweb about whether JSON is better than XML. The only reason to me JSON is really beating XML is called JSONP (JSON with Padding). It’s a way to get data from a different domain using JavaScript. That data is formatted in JSON (which stands for JavaScript Object Notation). I’ll show how to send data formatted in XML which the huge drawback to only work on Gecko (because it relies on a technology that only it supports: <a href="https://developer.mozilla.org/En/E4X" hreflang="en">E4X</a>).
</p><p>
But as we are forced to use Gecko we should simple go for the <a href="https://developer.mozilla.org/En/HTTP_Access_Control" hreflang="en">Cross-domain XmlHTTPRequest</a>, it’s simpler and safer.
</p><p>
JSONP works by appending a script to the page that will call a function we gave it with the data we expect:
</p><pre>callback({hello:"World!"});</pre><p>
for example. It’s totally unsafe and you have to really trust that third party. XMLP relies on the fact that E4X makes XML first citizen, like <code>RegExp</code>, <code>Array</code> or any other native type.
</p><pre>var a = &lt;root&gt;I’m the root&lt;/root&gt;;</pre><p>
So, XMLP might look like:
</p><pre>callback(&lt;hello&gt;World!&lt;/hello&gt;);</pre><p>
On Gecko (reading Firefox and bros), E4X can be enabled by adding <code>eax=1</code> to the type:
</p><pre>&lt;script type="text/javascript;e4x=1" …&gt;&lt;/script&gt;</pre><p>
E4X is quite interesting to play with. Unfortunately Gecko and Flash are the only two platforms where you can use it. By Gecko I mean SpiderMonkey and Rhino (the two JavaScript engines Mozilla branded).
</p><p>
Grab this very <a href="http://yoan.dosimple.ch/blog/2009/08/17/xmlp.py">basic example application for Python</a>.
</p>]]></content:encoded>
  </rss:item>
  <rss:item rdf:about="http://yoan.dosimple.ch/blog/2009/07/18">
    <rss:title>Live statistics for your website</rss:title>
    <rss:link>http://yoan.dosimple.ch/blog/2009/07/18</rss:link>
    <dc:date>2009-07-18T12:00:00+01:00</dc:date>
    <dc:subject>GoogleAnalytics Memcached Python Ruby</dc:subject>
    <content:encoded><![CDATA[<p>
If Google Analytics (formerly Urchin) has become one of the most popular tracking systems, it fails at being live because of its architecture. You only get valid data the day after which is the default view anyways. I tried to make something to improve the actual solution we are using at work.
</p><p>
What we do have <a href="http://www.eboutic.ch/" hreflang="de">at work</a> is a basic session counter. It helps us not pushing a release when a lot of people are surfing the website even it has been easier since we switched from Mongrel to Passenger. From a simple number, like <em>“280 sessions”</em> I’d try to move that to the next level and having a view of the actual usage.
</p><p>
The idea is to count views and to store that into <a href="http://www.danga.com/memcached/" hreflang="en">memcached</a> using the current time as a key and putting a timeout of the length of the needed graph.
</p><pre><i># first visit</i>
memcache.add(now, 1, 3600)

<i># next visits</i>
memcache.incr(now)
</pre><p>
And to build the graph, you get all the values from a set of keys at once and then use Google Chart is used to build a nifty view.
</p><p style="text-align:center;">
    <img src="/blog/2009/07/18/preview.png" alt="Stats for the last hour (preview)"/><br/>
<a href="http://yoan.dosimple.ch/blog/2009/07/18/full.png">Stats of the last hour charted</a> by <a href="http://code.google.com/apis/chart/">Google Chart</a>.
</p><p>
This is a <a href="http://rack.rubyforge.org/" hreflang="en">Rack</a> (or a <a href="http://wsgi.org/" hreflang="en">WSGI</a>) middleware so can fit into your application very easily. Get the source code that contains an example:
</p><ul>
<li><a href="http://yoan.dosimple.ch/blog/2009/07/18/livestats.ru">Ruby</a> (<code>thin -R livestats.ru start</code>)</li>
<li><a href="http://yoan.dosimple.ch/blog/2009/07/18/livestats.py">Python</a> (<code>python livestats.py</code> or <code>spawn livestats.application</code>)</li>
</ul>]]></content:encoded>
  </rss:item>
  <rss:item rdf:about="http://yoan.dosimple.ch/blog/2009/06/26">
    <rss:title>Email interface for Twitpic</rss:title>
    <rss:link>http://yoan.dosimple.ch/blog/2009/06/26</rss:link>
    <dc:date>2009-06-26T12:00:00+01:00</dc:date>
    <dc:subject>Email SMTP Python Twisted TX</dc:subject>
    <content:encoded><![CDATA[<p>
The <a href="http://lamsonproject.org/" hreflang="en">Lamson Project</a> emerged recently, but dealing with emails as always been around. Sending emails can be a pain for other reasons than receiving email is one too. Let’s focus on the second one with a simple demo that posts a picture to <a href="http://twitpic.com/api.do" hreflang="en">TwitPic</a> from an email using <a href="http://twistedmatrix.com/" hreflang="en">Twisted</a>.
</p><p>
Disclaimer, I haven’t tested <em>Lamson</em> but feels more confident to go with a solution built on top of Twisted then another one redoing most of the job using plain <a href="http://docs.python.org/library/asyncore.html" hreflang="en">asyncore</a> and <a href="http://docs.python.org/library/threading.html" hreflang="en">threads</a>.
</p><p>
We will start by using <a href="https://launchpad.net/tx/txmailserver" hreflang="en">txmailserver</a> originally built by <a href="http://oubiwann.blogspot.com/2009/01/twisted-mail-server-conclusion.html" hreflang="en">Duncan McGreggor</a>, a set of tools to set up a basic STMP server, with POP3 support.
</p><p>
Read the file <a href="http://yoan.dosimple.ch/blog/2009/06/26/server.tac">server.tac</a> to see all the boiler plate, I’ll show the interesting parts.
</p><pre>def twitpic_it(dest, message):
 pass # see bellow

domains = {
 "twitpicit.org": [
  Script(r"[a-zA-Z_0-9\-\.]+\+.+",
         twitpic_it)
 ]
}</pre><p>
It’ll accept any email users that look like: <code>me+mypassword@twitpicit.org</code> and call the <code>twitpic_it</code> function. From there we can do whatever we want. No more details on the email treatment.
</p><pre>def twitpic_it(dest, message):
 username, password = dest.local.split("+", 1)
 
 <i># finding the part which is a picture</i>
 <i># and building a temporary file with it</i>
 file = file_from_message(message)

 if file is not None:
  datagen, headers = <a href="http://atlee.ca/software/poster/poster.encode.html#poster.encode.multipart_encode" hreflang="en">multipart_encode</a>({
   "username": username,
   "password": password,
   "message": message["Subject"],
   "media": file
  })

  request = urllib2.Request(
   "http://twitpic.com/api/uploadAndPost",
   "".join(datagen),
   headers)

  file.close()

  urllib2.urlopen(request).read()</pre><p>
There you go, you’re able to <em>twitpic</em> everything you like from any email client. After you’ve set up that on one of your domain of course or you can try it locally using a simplistic Python script: <a href="http://yoan.dosimple.ch/blog/2009/06/26/test.py">test.py</a>.
</p><pre>$ twistd -ny <a href="http://yoan.dosimple.ch/blog/2009/06/26/server.tac">server.tac</a></pre><p>
in a different shell:
</p><pre>$ python <a href="http://yoan.dosimple.ch/blog/2009/06/26/test.py">test.py</a> mypicture.png My message</pre><p>
The server should display the response from Twitpic. Of course this is purely overkill if you can directly use the API.
</p><p>
Email is still an interesting interface for people that aren’t techie at all. For people that sits behind a desk with only that as an interface to the outside world because the IT service decided that you shouldn’t spend your day playing on Facebook or because you are <a href="http://lwn.net/Articles/262570/">Richard M. Stallman (RMS) himself</a>.
</p><p>
Most of the time a bad usage of emails is made, like answering leads to nothing (the infamous noreply), of you have to visit it inside a browser to do something. Don’t neglect it as a tool that most of the people understand and know how to use it. It means they <a href="http://www.sensible.com/buythebook.html" hreflang="en" title="Don&#x2019;t make me think, the book">don’t have to think</a> too much in order to use it.
</p><p>
The code is on <a href="https://code.launchpad.net/~greut/txmailserver/imap4">Launchpad</a>.
</p>]]></content:encoded>
  </rss:item>
  <rss:item rdf:about="http://yoan.dosimple.ch/blog/2009/05/10">
    <rss:title>Messages powered web applications</rss:title>
    <rss:link>http://yoan.dosimple.ch/blog/2009/05/10</rss:link>
    <dc:date>2009-05-10T12:00:00+01:00</dc:date>
    <dc:subject>AMQP JavaScript Python RabbitMQ</dc:subject>
    <content:encoded><![CDATA[<p>
The web is made of messages, e-mail is the first class citizen of them. Instant messaging protocols (like the beloved XMPP) and now Twitter and every twitter-like applications are collecting and sending back tons of messages. Let’s see how this concept can be applied and becoming very useful at a smaller scale too.
</p><p>
Before going further, <a href="http://www.hackdiary.com/" hreflang="en">Matt Biddulph</a> (CTO of <a href="http://www.dopplr.com" hreflang="en">Dopplr</a>) made a very interesting presentation explaining how Dopplr is using messages that transit between the different parts of the application. Take a look at it! <a href="http://www.slideshare.net/carsonified/dopplr-its-made-of-messages-matt-biddulph-presentation">Dopplr: It's made of messages - Matt Biddulph</a>
</p><p>
How messages can help your web application to become better? Like every good manager do, by delegating. Instead of doing everything yourself, let other people doing that for you. The drawback is that you’ll have to wait on that person to do his job, the good ones are that you can quickly answering your customer (sending back a HTML page in our case).
</p><p>
I wrote a simple application called <a href="http://bitbucket.org/greut/up/" hreflang="en">up!</a> that is an image uploader. The cool thing about this image uploader is that, like Flickr for example, once the pictures are uploaded the application tells you that the thumbnails are currently processed and that you’ll very soon get them without telling anything before its done (which is rude, but common)
</p><p>
Let’s dive with the image upload.
</p><p style="text-align:center">
    <img src="/blog/2009/05/10/rabbit_0.png" alt="Upload schema"/>
</p><p>
When John uploads his picture, the file is saved into a temporary directory and a message of this kind is sent to a queue called resize.
</p><pre>
("/tmp/foobar.jpg", "jpeg")
</pre><p>
And respond directly with a HTML page containing a placeholder for the thumbnail.
</p><pre>&lt;p id="preview"&gt;
 &lt;span&gt;foobar.jpg&lt;/span&gt; sent.
&lt;/p&gt;
&lt;p id="loading"&gt;&lt;em&gt;
 Please wait for the preview
 to be generated.
&lt;/em&gt;&lt;/p&gt;</pre><p>
Now, the client will try to obtain the expected thumbnails.
</p><p style="text-align:center">
    <img src="/blog/2009/05/10/rabbit_1.png" alt="Message passing schema"/>
</p><p>
On the client-side a JavaScript code will ping that expecte picture every 2 seconds as long as the server doesn’t find it and therefor answers with an error 404.
</p><p>
During that time, a consumer (a different process, independant from the web server) will get that message, resize the picture in 3 different sizes and put them at the right place. The arrow that goes back to the queue is a message acknowledgement saying that everything went find and that the message can be removed from the queue. The goal is to not lose any messages, if possible.
</p><p style="text-align:center">
    <img src="/blog/2009/05/10/rabbit_2.png" alt="Thumbnails are generated schema"/>
</p><p>
Once the thumbnails are available, the page displays the picture and the polling is stopped.
</p><p>
Different messaging mecanisms exist, some of them are very simple, like <a href="http://stomp.codehaus.org/" hreflang="en">STOMP</a>, but most of them are transcient only. It means no persistancy, if nobody listens; the messages are lost. Because shit happens, I prefer having some kind of persistency and acknowledgement that a message was well processed. Persistance means slowliness too. For that, this demo uses <a href="http://www.rabbitmq.com/" hreflang="en">RabbitMQ</a> and the <a href="http://www.amqp.org/" hreflang="en">AMQP</a> protocol. The first one is powered by Erlang and both of them are open source. Installing RabbitMQ is as simple as (once downloaded and extracted): <code>make run</code>. Learn more about RabbitMQ reading: <a href="http://blogs.digitar.com/jjww/2009/01/rabbits-and-warrens/" hreflang="en">Rabbits and warrens</a>.
</p><p>
As libraries, it uses both <a href="https://launchpad.net/txamqp" hreflang="en">txamqp</a> (<em>tx</em> stands for <a href="http://twistedmatrix.com/trac/" hreflang="en">twisted matrix</a>) and <a href="http://pypi.python.org/pypi/amqplib" hreflang="en">amqp-lib</a>. I find <em>amqp-lib</em> handy for the client side, to just send a message and prefer <em>twisted matrix</em> for a server that has to live (if possible) for ever and without causing too many trouble. Using only <em>amqp-lib</em> is of course possible.
</p><p>
Resizing image is one use case, maybe not the best one. In another application, I’m also using a queue for sending e-mail notifications, or it could be IM notification (AMQP instead of XML-RPC in my <a href="http://yoan.dosimple.ch/blog/2008/02/28/" hreflang="en">twootr article</a> for example), ... Separating them from the web server logic as the great advantage that you can tune both of them separately, instanciate more processes to handle image resizing the one you have have too much work without affecting anyone else. Small pieces of software collaborating together.
</p><p>
I’ve read once, that once you’ve gone in that path, you cannot go back. You’ve been warned. I think that big monolithics web apps aren’t agile enough those days where data are growing bigger and data are going faster to many people, mediums and third-parties.
</p><p>
<a href="http://bitbucket.org/greut/up/" hreflang="en">Download it from bitbucket</a> and feel free to hack it or to send me any questions.
</p>]]></content:encoded>
  </rss:item>
</rdf:RDF>
