<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>Jayway Team Blog » Uncategorized</title>
	
	<link>http://blog.jayway.com</link>
	<description>Sharing Experience</description>
	<lastBuildDate>Mon, 16 Aug 2010 05:54:53 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/jayway/posts/uncategorized" /><feedburner:info uri="jayway/posts/uncategorized" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><item>
		<title>Good Practices for Rich Web Applications</title>
		<link>http://feedproxy.google.com/~r/jayway/posts/uncategorized/~3/vI3sTfI__Fo/</link>
		<comments>http://blog.jayway.com/2010/08/16/good-practices-for-rich-web-applications/#comments</comments>
		<pubDate>Mon, 16 Aug 2010 05:54:53 +0000</pubDate>
		<dc:creator>Anders Janmyr</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://blog.jayway.com/?p=6046</guid>
		<description><![CDATA[Use jQuery jQuery is the best thing that has happened to Javascript since it got first class functions in version 1.2. The library is elegant, powerful and has exactly the right level of abstraction for working with the DOM. There is nothing more to say. Learn it and use it. Good resources are: the jQuery [...]]]></description>
			<content:encoded><![CDATA[<h2>Use jQuery</h2>
<p>jQuery is the best thing that has happened to Javascript since it got first class functions in version 1.2. The library is elegant, powerful and has exactly the right level of abstraction for working with the DOM. There is nothing more to say. Learn it and use it. Good resources are: <a href="http://api.jquery.com/l">the jQuery API</a>, <a href="http://dl.dropbox.com/u/7283184/jquery-api-1.4.2.html">my view of the jQuery API</a></p>
<h2>Learn Javascript</h2>
<p>Javascript is the <a href="http://oredev.org/2010/sessions/javascript-the-language-of-the-web">programming language of the web</a>. Learn it! Javascript is different from most other programming languages. It is dynamic, it has prototypical inheritance, and works more like Scheme than any of the languages that you are probably used to. If you want to learn Javascript you should get the following books, <a href="http://www.amazon.com/gp/product/0262560992?tag=thtasta-20">The Little Schemer</a>, <a href="http://www.amazon.com/gp/product/026256100X?tag=thtasta-20">The Seasoned Schemer</a>, <a href="http://www.amazon.com/gp/product/0596517742?tag=thtasta-20">Javascript, the Good Parts</a>, and possibly <a href="http://www.amazon.com/Performance-JavaScript-Faster-Application-Interfaces/dp/059680279X?tag=thtasta-20">High Performance Javascript</a></p>
<h2>Learn CSS</h2>
<p>Many programmers think that CSS is the language of designers and not programmers. This is not the case at all. If you are lucky enough to have a designer on your team (most people don't), CSS is the language with which you communicate. It is the interface between designers and programmers and as a programmer you should know it better than the designers. By knowing CSS well you will reduce the misunderstandings between you and your designer.</p>
<p>Unfortunately, many designers don't care about how code looks, as long as the design looks good on the surface. It will be up to you to make sure that the CSS doesn't get out out of hand. It will also be up to you to keep the HTML clean, and a good way to do this is to use semantic HTML, combined with CSS. You have no idea what the designers can come up with.</p>
<p><!-- Generator: GNU source-highlight 3.1.4<br />
by Lorenzo Bettini</p>
<p>http://www.lorenzobettini.it</p>
<p>http://www.gnu.org/software/src-highlite --></p>
<pre><tt><i><font color="#9A1900">&lt;!-- </font></i>
<i><font color="#9A1900">  Old School rounded corners, invented by a GOOD designer. </font></i>
<i><font color="#9A1900">  All this code was actually needed to achieve the purpose.</font></i>
<i><font color="#9A1900">  --&gt;</font></i>
<b><font color="#0000FF">&lt;style&gt;</font></b>
<font color="#993399">.t</font> <font color="#FF0000">{</font><font color="#0000FF">background:</font> <i><font color="#009900">url</font></i>(<i><font color="#009900">dot.gif</font></i>) <i><font color="#009900">0</font></i> <i><font color="#009900">0</font></i> <i><font color="#009900">repeat-x</font></i>; <font color="#0000FF">width:</font> <i><font color="#009900">20em</font></i><font color="#FF0000">}</font>
<font color="#993399">.b</font> <font color="#FF0000">{</font><font color="#0000FF">background:</font> <i><font color="#009900">url</font></i>(<i><font color="#009900">dot.gif</font></i>) <i><font color="#009900">0</font></i> <i><font color="#009900">100%</font></i> <i><font color="#009900">repeat-x</font></i><font color="#FF0000">}</font>
<font color="#993399">.l</font> <font color="#FF0000">{</font><font color="#0000FF">background:</font> <i><font color="#009900">url</font></i>(<i><font color="#009900">dot.gif</font></i>) <i><font color="#009900">0</font></i> <i><font color="#009900">0</font></i> <i><font color="#009900">repeat-y</font></i><font color="#FF0000">}</font>
<font color="#993399">.r</font> <font color="#FF0000">{</font><font color="#0000FF">background:</font> <i><font color="#009900">url</font></i>(<i><font color="#009900">dot.gif</font></i>) <i><font color="#009900">100%</font></i> <i><font color="#009900">0</font></i> <i><font color="#009900">repeat-y</font></i><font color="#FF0000">}</font>
<font color="#993399">.bl</font> <font color="#FF0000">{</font><font color="#0000FF">background:</font> <i><font color="#009900">url</font></i>(<i><font color="#009900">bl.gif</font></i>) <i><font color="#009900">0</font></i> <i><font color="#009900">100%</font></i> <i><font color="#009900">no-repeat</font></i><font color="#FF0000">}</font>
<font color="#993399">.br</font> <font color="#FF0000">{</font><font color="#0000FF">background:</font> <i><font color="#009900">url</font></i>(<i><font color="#009900">br.gif</font></i>) <i><font color="#009900">100%</font></i> <i><font color="#009900">100%</font></i> <i><font color="#009900">no-repeat</font></i><font color="#FF0000">}</font>
<font color="#993399">.tl</font> <font color="#FF0000">{</font><font color="#0000FF">background:</font> <i><font color="#009900">url</font></i>(<i><font color="#009900">tl.gif</font></i>) <i><font color="#009900">0</font></i> <i><font color="#009900">0</font></i> <i><font color="#009900">no-repeat</font></i><font color="#FF0000">}</font>
<font color="#993399">.tr</font> <font color="#FF0000">{</font><font color="#0000FF">background:</font> <i><font color="#009900">url</font></i>(<i><font color="#009900">tr.gif</font></i>) <i><font color="#009900">100%</font></i> <i><font color="#009900">0</font></i> <i><font color="#009900">no-repeat</font></i>; <font color="#0000FF">padding:</font><i><font color="#009900">10px</font></i><font color="#FF0000">}</font>
<b><font color="#0000FF">&lt;/style&gt;</font></b>
<b><font color="#0000FF">&lt;div</font></b> <font color="#009900">class</font><font color="#990000">=</font><font color="#FF0000">"t"</font><b><font color="#0000FF">&gt;</font></b>
  <b><font color="#0000FF">&lt;div</font></b> <font color="#009900">class</font><font color="#990000">=</font><font color="#FF0000">"b"</font><b><font color="#0000FF">&gt;</font></b>
    <b><font color="#0000FF">&lt;div</font></b> <font color="#009900">class</font><font color="#990000">=</font><font color="#FF0000">"l"</font><b><font color="#0000FF">&gt;</font></b>
      <b><font color="#0000FF">&lt;div</font></b> <font color="#009900">class</font><font color="#990000">=</font><font color="#FF0000">"r"</font><b><font color="#0000FF">&gt;</font></b>
        <b><font color="#0000FF">&lt;div</font></b> <font color="#009900">class</font><font color="#990000">=</font><font color="#FF0000">"bl"</font><b><font color="#0000FF">&gt;</font></b>
          <b><font color="#0000FF">&lt;div</font></b> <font color="#009900">class</font><font color="#990000">=</font><font color="#FF0000">"br"</font><b><font color="#0000FF">&gt;</font></b>
            <b><font color="#0000FF">&lt;div</font></b> <font color="#009900">class</font><font color="#990000">=</font><font color="#FF0000">"tl"</font><b><font color="#0000FF">&gt;</font></b>
              <b><font color="#0000FF">&lt;div</font></b> <font color="#009900">class</font><font color="#990000">=</font><font color="#FF0000">"tr"</font><b><font color="#0000FF">&gt;</font></b>
                Lorem ipsum dolor sit amet consectetur adipisicing elit
              <b><font color="#0000FF">&lt;/div&gt;</font></b>
            <b><font color="#0000FF">&lt;/div&gt;</font></b>
          <b><font color="#0000FF">&lt;/div&gt;</font></b>
        <b><font color="#0000FF">&lt;/div&gt;</font></b>
      <b><font color="#0000FF">&lt;/div&gt;</font></b>
    <b><font color="#0000FF">&lt;/div&gt;</font></b>
  <b><font color="#0000FF">&lt;/div&gt;</font></b>
<b><font color="#0000FF">&lt;/div&gt;</font></b>

</tt></pre>
<p>As an additional benefit you will become better at jQuery. Not only is CSS the query language of the browsers it is the query language of jQuery. Jariba!</p>
<p><a href="http://www.amazon.com/Bulletproof-Web-Design-flexibility-protecting/dp/0321509021?tag=thtasta-20">Bulletproof Web Design</a> is a good book web design, including CSS.</p>
<h2>Decide how "Rich" your application should be</h2>
<p>How rich should your application be? The scale varies from no Javascript to only Javascript, but you will probably want to land somewhere in between. Here are a few suggestions.</p>
<ul>
<li>No Javascript, everything is server generated.</li>
<li>Slightly enhanced pages, simple validations, but no Ajax.</li>
<li>Ajax enhanced pages, but every page still reloads frequently.</li>
<li>Single page per area, entire area is handled by Javascript.</li>
<li>Only Javascript, Ajax interaction with the server</li>
<li>Only Javascript, no interaction with the server.</li>
</ul>
<p>The important thing is to <em>make a decision</em>. If you don't make the decision, everyone will do different things on different parts of the application and you will loose consistency. In GUI, consistency is king. Make a decision and move on, you can always change your decision later.</p>
<h2>Organize your code</h2>
<h3>Javascript</h3>
<p>Make sure that all your Javascript code is namespaced properly. It is impolite to pollute the global namespace and it will bite you in the end. A simple variable declaration will do.</p>
<p><!-- Generator: GNU source-highlight 3.1.4<br />
by Lorenzo Bettini</p>
<p>http://www.lorenzobettini.it</p>
<p>http://www.gnu.org/software/src-highlite --></p>
<pre><tt><i><font color="#9A1900">// Common namespace for your entire application</font></i>
<i><font color="#9A1900">// This declaration lets you split your code of multiple files.</font></i>
<i><font color="#9A1900">// If MyNamespace is defined use it, otherwise declare it.</font></i>
MyNamespace <font color="#990000">=</font> MyNamespace <font color="#990000">||</font> <font color="#FF0000">{}</font><font color="#990000">;</font>

</tt></pre>
<p>But, of course, it is also possible to get fancy and encapsulate the functions that you don't want to expose, if that is your cup of tea.</p>
<p><!-- Generator: GNU source-highlight 3.1.4<br />
by Lorenzo Bettini</p>
<p>http://www.lorenzobettini.it</p>
<p>http://www.gnu.org/software/src-highlite --></p>
<pre><tt>MyNamespace <font color="#990000">=</font> MyNamespace <font color="#990000">||</font> <font color="#FF0000">{}</font><font color="#990000">;</font>

MyNamespace<font color="#990000">.</font>Tournament <font color="#990000">=</font> <b><font color="#0000FF">function</font></b><font color="#990000">()</font> <font color="#FF0000">{</font>
	<i><font color="#9A1900">// Private stuff</font></i>
	<b><font color="#0000FF">var</font></b> tournamentCount <font color="#990000">=</font> <font color="#993399">0</font><font color="#990000">;</font>
	<b><font color="#0000FF">function</font></b> <b><font color="#000000">addTournament</font></b><font color="#990000">(</font>tournament<font color="#990000">)</font> <font color="#FF0000">{</font>
		tournamentCount<font color="#990000">++;</font>
	<font color="#FF0000">}</font>

	<b><font color="#0000FF">return</font></b> <font color="#FF0000">{</font>
		<i><font color="#9A1900">//public stuff</font></i>
		numberOfTournaments<font color="#990000">:</font> <b><font color="#0000FF">function</font></b><font color="#990000">()</font> <font color="#FF0000">{</font>
			<b><font color="#0000FF">return</font></b> tournamentCount<font color="#990000">;</font>
		<font color="#FF0000">}</font>
	<font color="#FF0000">}</font>
<font color="#FF0000">}</font><font color="#990000">();</font>

</tt></pre>
<p>You should also separate your Javascript code into different files. The namespace idiom above helps to have the same namespace across multiple files. The same principles as with other type of code is valid with Javascript, organize the code by area, when it changes, where it is used, etc. Don't be afraid of the additional load time, splitting the files will give you. The files can easily be concatenated with tools  like <a href="http://rake.rubyforge.org/">Rake</a>, <a href="http://www.scons.org/">SCons</a>,  <a href="http://ant.apache.org/">Ant</a> or even a simple:</p>
<p><!-- Generator: GNU source-highlight 3.1.4<br />
by Lorenzo Bettini</p>
<p>http://www.lorenzobettini.it</p>
<p>http://www.gnu.org/software/src-highlite --></p>
<pre><tt>$ cat file1<font color="#990000">.</font>js file2<font color="#990000">.</font>js file3<font color="#990000">.</font>js <font color="#990000">&gt;</font> all<font color="#990000">.</font>js

</tt></pre>
<p>They can also be compressed with <a href="http://www.crockford.com/javascript/jsmin.html">JSMin</a> or <a href="http://developer.yahoo.com/yui/compressor/">YUI Compressor</a>.</p>
<p><em>Optimize your environment for development, not for production!</em></p>
<h3>HTML</h3>
<p>HTML is code! Divide your pages into partials by responsibilities. It allows you to keep your pages DRY and readable. <a href="http://en.wikipedia.org/wiki/Single_responsibility_principle">The Single Responsibility Principle</a> applies to HTML too.</p>
<p>Make sure you keep the Javascript with the code that it manipulates. If you, for example, have a calendar partial that uses <a href="http://jqueryui.com/demos/datepicker/">jQuery DatePicker</a>, you have to make sure that the partial includes all the necessary Javascript to configure the calendar. Don't keep Javascript code in the page away from the partial. <a href="http://c2.com/cgi/wiki?CommonClosurePrinciple">Things that change together should be together</a>.</p>
<h3>CSS</h3>
<p>Stylesheets are code too. They should also be split into areas that allow you to easily find and navigate them. Use <a href="http://sass-lang.com/">Sass or SCCS</a> to keep your CSS files DRY. Sass is good for designers to. It gives them the ability to use variable names, mixins, etc. and simplifies their usage of semantic names such as <em>notice</em>, and <em>sidebar</em> instead of <em>yellow</em> and <em>left</em>.</p>
<p><em>Optimize your environment for development, not for production!</em></p>
<h2>Separate your Javascript from your HTML</h2>
<p>All too often I see generated HTML pages with Javascript code in them. Don't do it. Keep the HTML free from Javascript.</p>
<p><!-- Generator: GNU source-highlight 3.1.4<br />
by Lorenzo Bettini</p>
<p>http://www.lorenzobettini.it</p>
<p>http://www.gnu.org/software/src-highlite --></p>
<pre><tt><i><font color="#9A1900">&lt;!-- DON'T DO THIS!  --&gt;</font></i>
<b><font color="#0000FF">&lt;button</font></b> <font color="#009900">id</font><font color="#990000">=</font><font color="#FF0000">'update-button'</font> <font color="#009900">onclick</font><font color="#990000">=</font><font color="#FF0000">"MyNamespace.updateList();"</font><b><font color="#0000FF">&gt;</font></b>Update List<b><font color="#0000FF">&lt;/button&gt;</font></b>

</tt></pre>
<p><!-- Generator: GNU source-highlight 3.1.4<br />
by Lorenzo Bettini</p>
<p>http://www.lorenzobettini.it</p>
<p>http://www.gnu.org/software/src-highlite --></p>
<pre><tt><i><font color="#9A1900">// In the Javascript file for the page.</font></i>
MyNamespace<font color="#990000">.</font>updateList <font color="#990000">=</font> <b><font color="#0000FF">function</font></b><font color="#990000">()</font> <font color="#FF0000">{</font><font color="#990000">...</font><font color="#FF0000">}</font>

<font color="#990000">&lt;!--</font> DO THIS<font color="#990000">!</font> <font color="#990000">--&gt;</font>
<font color="#990000">&lt;</font>button id<font color="#990000">=</font><font color="#FF0000">'update-button'</font><font color="#990000">&gt;</font>Update List<font color="#990000">&lt;/</font>button<font color="#990000">&gt;</font>

</tt></pre>
<p><!-- Generator: GNU source-highlight 3.1.4<br />
by Lorenzo Bettini</p>
<p>http://www.lorenzobettini.it</p>
<p>http://www.gnu.org/software/src-highlite --></p>
<pre><tt><i><font color="#9A1900">// In the Javascript file for the page.</font></i>
MyNamespace<font color="#990000">.</font>updateList <font color="#990000">=</font> <b><font color="#0000FF">function</font></b><font color="#990000">()</font> <font color="#FF0000">{</font><font color="#990000">...</font><font color="#FF0000">}</font>

$<font color="#990000">(</font><b><font color="#0000FF">function</font></b><font color="#990000">()</font> <font color="#FF0000">{</font>
  $<font color="#990000">(</font><font color="#FF0000">"#update-button"</font><font color="#990000">).</font><b><font color="#000000">click</font></b><font color="#990000">(</font><b><font color="#0000FF">function</font></b><font color="#990000">()</font> <font color="#FF0000">{</font>
    MyNamespace<font color="#990000">.</font><b><font color="#000000">updateList</font></b><font color="#990000">();</font>
  <font color="#FF0000">}</font><font color="#990000">);</font>
<font color="#FF0000">}</font><font color="#990000">);</font>

</tt></pre>
<p>It may seem like there is a lot more code in the good example, but notice the symmetry. The code that attaches the listener is in the same file as the code that uses the listener. This is good. Symmetry is good.</p>
<h3>Use clone()</h3>
<p>Separating the HTML and the Javascript goes both ways. Don't generate HTML code in Javascript. It doesn't matter that it is super simple to do it using <em>jQuery.html()</em>. Keep them separate, use <em>jQuery.clone()</em> instead.</p>
<p><!-- Generator: GNU source-highlight 3.1.4<br />
by Lorenzo Bettini</p>
<p>http://www.lorenzobettini.it</p>
<p>http://www.gnu.org/software/src-highlite --></p>
<pre><tt><i><font color="#9A1900">// DON'T DO THIS</font></i>
$<font color="#990000">(</font><font color="#FF0000">"&lt;li data-id='123'&gt;My new item&lt;/li&gt;"</font><font color="#990000">).</font><b><font color="#000000">appendTo</font></b><font color="#990000">(</font><font color="#FF0000">"ul"</font><font color="#990000">);</font>
<i><font color="#9A1900">// OR THIS</font></i>
$<font color="#990000">(</font><font color="#FF0000">"ul"</font><font color="#990000">).</font><b><font color="#000000">append</font></b><font color="#990000">(</font><font color="#FF0000">"&lt;li data-id='123'&gt;My new item&lt;/li&gt;"</font><font color="#990000">);</font>

</tt></pre>
<p><!-- Generator: GNU source-highlight 3.1.4<br />
by Lorenzo Bettini</p>
<p>http://www.lorenzobettini.it</p>
<p>http://www.gnu.org/software/src-highlite --></p>
<pre><tt><i><font color="#9A1900">&lt;!-- DO THIS --&gt;</font></i>
<b><font color="#0000FF">&lt;ul&gt;</font></b>
<b><font color="#0000FF">&lt;li</font></b> <font color="#009900">id</font><font color="#990000">=</font><font color="#FF0000">"list-template"</font> <font color="#009900">class</font><font color="#990000">=</font><font color="#FF0000">"template"</font><b><font color="#0000FF">&gt;</font></b>All .template are hidden (display: none) in the CSS<b><font color="#0000FF">&lt;/li&gt;</font></b>
<b><font color="#0000FF">&lt;/ul&gt;</font></b>

</tt></pre>
<p><!-- Generator: GNU source-highlight 3.1.4<br />
by Lorenzo Bettini</p>
<p>http://www.lorenzobettini.it</p>
<p>http://www.gnu.org/software/src-highlite --></p>
<pre><tt><i><font color="#9A1900">// AND THIS</font></i>
<b><font color="#0000FF">var</font></b> $clone <font color="#990000">=</font> $<font color="#990000">(</font><font color="#FF0000">"#list-template"</font><font color="#990000">).</font><b><font color="#000000">clone</font></b><font color="#990000">();</font>
$clone<font color="#990000">.</font><b><font color="#000000">attr</font></b><font color="#990000">(</font><font color="#FF0000">"data-id"</font><font color="#990000">,</font> <font color="#FF0000">"123"</font><font color="#990000">).</font><b><font color="#000000">text</font></b><font color="#990000">(</font><font color="#FF0000">"My new item"</font><font color="#990000">).</font><b><font color="#000000">removeClass</font></b><font color="#990000">(</font><font color="#FF0000">"template"</font><font color="#990000">);</font>
$<font color="#990000">(</font><font color="#FF0000">"ul"</font><font color="#990000">).</font><b><font color="#000000">append</font></b><font color="#990000">(</font>$clone<font color="#990000">);</font>

</tt></pre>
<p>The point of this is, again, to keep the HTML separate from the Javascript.</p>
<h2>Decide how content flows between, the page, Javascript and the Server.</h2>
<p>Once you have decided how rich your application should be, you have to decide on a method for moving the data between the HTML Page, Javascript and the Server. My preferred choice is to have every page that is served from the server include a <em>context object</em> with all the static data for the page and to have additional data that belongs to parts of the page be sent as <em>data-attributes</em> on the elements concerned.</p>
<p>The context object will contain all the data that is commonly needed in the page.</p>
<p><!-- Generator: GNU source-highlight 3.1.4<br />
by Lorenzo Bettini</p>
<p>http://www.lorenzobettini.it</p>
<p>http://www.gnu.org/software/src-highlite --></p>
<pre><tt><i><font color="#9A1900">// Sample context object that is generated with the page.</font></i>
MyNamespace <font color="#990000">=</font> MyNamespace <font color="#990000">||</font> <font color="#FF0000">{}</font><font color="#990000">;</font>
MyNamespace<font color="#990000">.</font>Context <font color="#990000">=</font> <font color="#FF0000">{</font>
  user<font color="#990000">:</font> <font color="#FF0000">{</font>
    id<font color="#990000">:</font> <font color="#FF0000">"28"</font><font color="#990000">,</font>
    name<font color="#990000">:</font> <font color="#FF0000">"Anders Janmyr"</font>
  <font color="#FF0000">}</font><font color="#990000">,</font>
  tournament<font color="#990000">:</font> <font color="#FF0000">{</font>
    id<font color="#990000">:</font> <font color="#FF0000">"78344"</font><font color="#990000">,</font>
    name<font color="#990000">:</font> <font color="#FF0000">"Fifa World Cup"</font>
  <font color="#FF0000">}</font>
<font color="#FF0000">}</font><font color="#990000">;</font>
</tt></pre>
<p>I use the context object(s) to keep state on the client to. If it is important that the page looks exactly the same, even if the user reloads the page, I make sure that the state I stick into my context object is synched back to the server. This can easily be done, asynchronously, with Ajax and does not affect performance noticeable.</p>
<p>Elements specific data is sent along with the element it defines.</p>
<p><!-- Generator: GNU source-highlight 3.1.4<br />
by Lorenzo Bettini</p>
<p>http://www.lorenzobettini.it</p>
<p>http://www.gnu.org/software/src-highlite --></p>
<pre><tt><i><font color="#9A1900">&lt;!-- Element specific data attached to the elements with data-attributes --&gt;</font></i>
<b><font color="#0000FF">&lt;ul</font></b> <font color="#009900">id</font><font color="#990000">=</font><font color="#FF0000">"tournament-menu"</font><b><font color="#0000FF">&gt;</font></b>
  <b><font color="#0000FF">&lt;li</font></b> <font color="#009900">data-id</font><font color="#990000">=</font><font color="#FF0000">"78344"</font> <font color="#009900">data-participant-count</font><font color="#990000">=</font><font color="#FF0000">"64"</font><b><font color="#0000FF">&gt;</font></b>Fifa World Cup<b><font color="#0000FF">&lt;/li&gt;</font></b>
  <b><font color="#0000FF">&lt;li</font></b> <font color="#009900">data-id</font><font color="#990000">=</font><font color="#FF0000">"666"</font>  <font color="#009900">data-participant-count</font><font color="#990000">=</font><font color="#FF0000">"44"</font><b><font color="#0000FF">&gt;</font></b>Americas Cup<b><font color="#0000FF">&lt;/li&gt;</font></b>
  <b><font color="#0000FF">&lt;li</font></b> <font color="#009900">data-id</font><font color="#990000">=</font><font color="#FF0000">"1464"</font> <font color="#009900">data-participant-count</font><font color="#990000">=</font><font color="#FF0000">"32"</font><b><font color="#0000FF">&gt;</font></b>Rugby World Cup<b><font color="#0000FF">&lt;/li&gt;</font></b>
<b><font color="#0000FF">&lt;/ul&gt;</font></b>

</tt></pre>
<p>The same argument as with the context object applies, as soon as I change an element in the GUI i need to feed that information back to the server. With elements I usually send the information to the server before updating the GUI, since element specific data is usually permanent data and not just session data.</p>
<p>An alternative solution to the <em>context object</em> above is to use the body element as the data-container, like this:</p>
<p><!-- Generator: GNU source-highlight 3.1.4<br />
by Lorenzo Bettini</p>
<p>http://www.lorenzobettini.it</p>
<p>http://www.gnu.org/software/src-highlite --></p>
<pre><tt><b><font color="#0000FF">&lt;body</font></b> <font color="#009900">data-user-id</font><font color="#990000">=</font><font color="#FF0000">"28"</font> <font color="#009900">data-user-name</font><font color="#990000">=</font><font color="#FF0000">"Anders Janmyr"</font> <font color="#009900">data-tournament-id</font><font color="#990000">=</font><font color="#FF0000">"78344"</font> <font color="#009900">data-tournament-name</font><font color="#990000">=</font><font color="#FF0000">"Fifa World Cup"</font><b><font color="#0000FF">&gt;</font></b>

</tt></pre>
<p>I tend to use the context object because I find it easier to add functionality to it than to the DOM element.</p>
<p>Only send the data that is needed to the client with the page. The rest of the data should be loaded on demand, with Ajax. Both JSON data and HTML templates can be loaded on demand. There is no need to deliver the entire page at once. Experiment and do what gives the best user experience.</p>
<h2>Use file watchers to speed up feedback</h2>
<p>If you compare the feedback cycle of Javascript and HTML development to Java and C# development, you are probably very happy with the short, tight feedback loop. This doesn't mean that you should be content. A feedback cycle cannot be too short.</p>
<p><a href="http://xrefresh.binaryage.com/">xrefresh</a> for Firefox and IE, and <a href="http://github.com/mockko/livereload">LiveReload</a> for Safari and Chrome, are a couple of tools that will tighten your feedback loop even more.</p>
<p>Both tools are file watchers that listen to changes for files and refresh the browser when they change. If you combine this with two screens, you will have one screen for the browser, that updates continuously, while you edit your code on the other screen. Fabulous!</p>
<h2>Conclusion</h2>
<p>Rich web applications are very close to the traditional client-server model. We have to keep state on the client side to give the user a good experience. At the same time the application state, and indeed the entire application, can be swept away by a click of a button or a page reload.</p>
<p>This puts new demands on us as developers. We have to realize that we are responsible for the entire application, not just the business logic, but the HTML and CSS too. More that anything, we have to realize that Javascript is a first class programming language with its own programming techniques, which we need to master to be able to develop good web applications.</p>
<img src="http://feeds.feedburner.com/~r/jayway/posts/uncategorized/~4/vI3sTfI__Fo" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.jayway.com/2010/08/16/good-practices-for-rich-web-applications/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		<feedburner:origLink>http://blog.jayway.com/2010/08/16/good-practices-for-rich-web-applications/</feedburner:origLink></item>
		<item>
		<title>No Deadlines</title>
		<link>http://feedproxy.google.com/~r/jayway/posts/uncategorized/~3/U3QjrhNdcVU/</link>
		<comments>http://blog.jayway.com/2010/08/12/no-deadlines/#comments</comments>
		<pubDate>Thu, 12 Aug 2010 05:15:58 +0000</pubDate>
		<dc:creator>Anders Janmyr</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://blog.jayway.com/?p=5991</guid>
		<description><![CDATA[deadline, from New Oxford American Dictionary the latest time or date by which something should be completed : the deadline for submissions is February 5th. historical a line drawn around a prison beyond which prisoners were liable to be shot. Deadlines in software development induce unnecessary stress, and transform otherwise enjoyable activities into chores. We [...]]]></description>
			<content:encoded><![CDATA[<blockquote><p><strong>deadline</strong>, from New Oxford American Dictionary</p>
<ol>
<li>
<p>the latest time or date by which something should be completed : the deadline for submissions is February 5th.</p>
</li>
<li>
<p>historical a line drawn around a prison beyond which prisoners were liable to be shot.</p>
</li>
</ol>
</blockquote>
<p>Deadlines in software development induce unnecessary stress, and transform otherwise enjoyable activities into chores.</p>
<p>We need to replace deadlines with livelines. A liveline is a deployed, working version of a product. It is after the fact, a milestone set when you are done.</p>
<h2>How Deadlines Are Set</h2>
<p>Deadlines are set in different ways in different projects.</p>
<p>In the classic <a href="http://www.amazon.com/Death-March-2nd-Edward-Yourdon/dp/013143635X?tag=thtasta-20">Death March </a> project, a deadline is set by someone outside the project with no clue whatsoever about how long it will take. Typically this kind of deadline is based on some external event, where the project will be demonstrated. The event may be a conference, or something similar.</p>
<p>In Scrum, the deadlines are set by the process itself. Most Scrum projects I have worked with use a two week deadline instead of the recommended 30 days. The team decides how many stories they can complete by that deadline, based on rough estimations done in the sprint planning.</p>
<p>Some projects set deadlines by a developer being asked (or asking himself) when the task will be done. The developer will say: "I'll have it done by 3 o'clock", a wild guess.</p>
<p>The problem with all these approaches is that the deadlines are, <em>at best</em>, based on guesses of the team doing the development. But guesses are guesses, not something you can set a deadline by.</p>
<p>And deadlines work both ways, a task is <em>very</em> rarely completed before it's deadline.</p>
<h2>Kinds of Deadlines</h2>
<h3>Real Deadlines</h3>
<p>If a task is not completed by a certain time someone will die. This kind of task is really common in novels and movies. A clock is ticking and if the task is not completed by the time the clock reaches zero, BOOM!</p>
<p>If have never seen this kind of deadline in software development, but they may exist.</p>
<h3>Planning Deadlines</h3>
<p>Some deadlines are set in order to simplify planning. In the large Death March projects, the plan is to show the project at a certain date. In integration projects, the deadlines are set to be able to synchronize with other teams working on the same product.</p>
<p>This kind of deadlines are actually understandable, but I am arguing that they actually slow down projects by introducing stress, which introduces bugs. The bugs introduce bugs in the dependent projects, and slows down many projects instead of just one.</p>
<h3>Motivational Deadlines</h3>
<p>Motivation deadlines are set to get people to work. The assumption is that if a deadline is not set people will procrastinate over different ideas, or just slack off since there is no date set for the release anyway.</p>
<p>This is, absolutely, the worst kind of deadline. If the team is not motivated enough to do a good job without a deadline, you need to get a new team, not set a deadline.</p>
<h2>Why Deadlines Are Bad</h2>
<h3>Stress</h3>
<p>Consider walking on a one foot wide plank. If it is on the ground it is easy. If it is two meters up it is difficult, but if you put it at twenty meters it is a whole different ballgame. That is what its like with deadlines, they put an unnecessary pressure on people.</p>
<h3>Loss of Motivation</h3>
<blockquote><p><em>Work</em> consist of whatever a body is obliged to do, and <em>play</em> consists of whatever one is not obliged to do. -- Mark Twain</p>
</blockquote>
<p>In his book, <a href="http://www.amazon.com/Drive-Surprising-Truth-About-Motivates/dp/1594488843?tag=thtasta-20">Drive</a>, Dan Pink differentiates between <em>intrinsic</em> motivation and <em>extrinsic</em> motivation.</p>
<p>Extrinsic motivation is motivation driven by carrots and sticks, rewards and punishment. It works well for simple, well-defined tasks.</p>
<p>Intrinsic motivation works well for creative, ill-defined tasks, like programming.</p>
<p>Intrinsic motivation is fragile, <em>it disappears in the presence of carrots and sticks</em>. A deadline is a stick, whether set by ourselves or someone else.</p>
<h2>Livelines</h2>
<p>A liveline is, quite simply, a task that is done. When a task is done, it is easy for others to use it, in their plans or in reality. If we want to build a stable house, we should build it on stable ground.</p>
<p>When using livelines the iteration length is the same length as a task. This is usually a lot shorter than the usual one to four weeks common in Scrum and other agile methods. It also leads to variations in the iteration length.</p>
<p>If you implement your task all the way into production, you get <a href="http://timothyfitz.wordpress.com/2009/02/10/continuous-deployment-at-imvu-doing-the-impossible-fifty-times-a-day/">Continuous Deployment</a> or <a href="http://www.amazon.com/gp/product/0321601912?tag=thtasta-20">Continuous Delivery</a>. This puts a lot of pressure on your tooling and on automation but, I believe this is the way to go.</p>
<p>It is 2010, it is time to get rid of deadlines.</p>
<img src="http://feeds.feedburner.com/~r/jayway/posts/uncategorized/~4/U3QjrhNdcVU" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.jayway.com/2010/08/12/no-deadlines/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		<feedburner:origLink>http://blog.jayway.com/2010/08/12/no-deadlines/</feedburner:origLink></item>
		<item>
		<title>UIWebView and JavaScript Woes</title>
		<link>http://feedproxy.google.com/~r/jayway/posts/uncategorized/~3/if1229_72UA/</link>
		<comments>http://blog.jayway.com/2010/06/28/uiwebview-and-javascript-woes/#comments</comments>
		<pubDate>Mon, 28 Jun 2010 07:45:57 +0000</pubDate>
		<dc:creator>Fredrik Olsson</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://blog.jayway.com/?p=5791</guid>
		<description><![CDATA[JavaScript Core is unfortunately not a public framework on iOS, leaving us at the mercy of the UIWebView class if we want to execute JavaScript in our applications. I have used JavaScript a lot recently and want to share four gotchas that I have had. Functional code! Turns out that JavaScript is functional, not as [...]]]></description>
			<content:encoded><![CDATA[<p>JavaScript Core is unfortunately not a public framework on iOS, leaving us at the mercy of the <code>UIWebView</code> class if we want to execute JavaScript in our applications. I have used JavaScript a lot recently and want to share four gotchas that I have had.</p>
<h3>Functional code!</h3>
<p>Turns out that JavaScript is functional, not as in working but as in a functional programming language. So when calling <code>-[UIWebView stringByEvaluatingJavaScriptFromString:]</code> you do not pass in for example:</p>
<pre class="brush:javascript">return x * y;</pre>
<p>But instead:</p>
<pre class="brush:javascript">x * y</pre>
<p>Yes even without the trailing <code>;</code> character! The result returned from <code>-[UIWebView stringByEvaluatingJavaScriptFromString:]</code> will be the value of the last statement, if you add a trailing <code>;</code> then the last statement will be an empty statement and you will get an empty string as a result. Took quite some time before I figured that one out. </p>
<h3><code>UIWebView</code> must be on screen to execute script</h3>
<p>The UIWebView class will not render any content, nor execute JavaScript if it is not potentially on screen. So you must add the UIWebView to the view hierarchy even if you just have it around for executing some JavaScript in the background.</p>
<p>It is perfectly ok to let the web view be 0x0 pixels, or full transparency, but hidden does not seem to work either.</p>
<h3>All access must be on the main thread</h3>
<p>Not news since the documentation clearly says you should only work with UIKit classes on the main thread (with a few added thread safe additions in IOS 4). But this is a problem if you want to do background tasks with JavaScript, since you must call <code>-[UIWebView stringByEvaluatingJavaScriptFromString:]</code> from the main thread. Any long running JavaScript will block all user input and updates of the screen.</p>
<p>No fear though, you can make your JavaScript asynchronous. But then <code>-[UIWebView stringByEvaluatingJavaScriptFromString:]</code> will return before your script has finished and <code>UIWebView</code> do not have any obvious other way to communicate any results back to you. Obvious way that is. What you instead have to do to get asynchronious results back into the Objective-C world is by fake URL requests. Use a function like this to return results from the JavaScript world:</p>
<pre class="brush:javascript">var returnAsyncResult = function(result, context) {
    window.location = 'result://dummy.com/' + result + '/' + context;
}</pre>
<p>And then let the delegate for your UIWebView get the result as such:</p>
<pre class="brush:objc">-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
{
    NSString* urlString = [[request URL] absoluteString];
    if ([urlString hasPrefix:@"result:"]) {
        NSString* path = [[request URL] path];
        NSArray* pathComponents = [path pathComponents];
        NSString* result = [pathComponents objectAtIndex:1];
        NSString* context = nil;
        if ([pathComponents count] > 2) {
            context = [pathComponents objectAtIndex:2];
        }
        [delegate javaScriptEvaluator:self
                      didReturnString:result
                              context:context];
        return NO;
    } else {
        return YES;
    }
}</pre>
<h3>Only String results</h3>
<p>Turns out that <code>-[UIWebView stringByEvaluatingJavaScriptFromString:]</code> only returns strings as result. No problem for simple types such as said strings and numbers, but a big problem if you try to return a complex value such as an array:</p>
<pre class="brush:javascript">[1,2,3]</pre>
<p>This will not work, and will return a <code>NSString</code> of zero length. You must explicitly convert arrays to strings before returning them to the Objective-C world, easiest way would be something like this:</p>
<pre class="brush:javascript">'[' + [1,2,3] + ']'</pre>
<h3>Conclusion</h3>
<p><code>UIWebView</code> is a blunt tool. Please do use <a href="http://bugreport.apple.com">http://bugreport.apple.com</a> and file a request to make JavaScript Core a public framework. The more duplicates, the higher Apple will prioritize this issue on their todo list.</p>
<p>In the meantime UIWebView can be used to your bidding if treated with care.</p>
<img src="http://feeds.feedburner.com/~r/jayway/posts/uncategorized/~4/if1229_72UA" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.jayway.com/2010/06/28/uiwebview-and-javascript-woes/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://blog.jayway.com/2010/06/28/uiwebview-and-javascript-woes/</feedburner:origLink></item>
		<item>
		<title>Ruby and Rails Summer Reading</title>
		<link>http://feedproxy.google.com/~r/jayway/posts/uncategorized/~3/bFC-x3nNBtE/</link>
		<comments>http://blog.jayway.com/2010/06/20/ruby-and-rails-summer-reading/#comments</comments>
		<pubDate>Sun, 20 Jun 2010 06:26:49 +0000</pubDate>
		<dc:creator>Anders Janmyr</dc:creator>
				<category><![CDATA[Tips & Tricks]]></category>
		<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[rails]]></category>
		<category><![CDATA[ruby]]></category>

		<guid isPermaLink="false">http://blog.jayway.com/?p=5782</guid>
		<description><![CDATA[If you ask a Ruby programmer why he is using Ruby, you will probably get several answers like: It is dynamic. I allows me too keep my code DRY. I get results faster. Aside from all these statements, there is one statement that almost always comes up. I use Ruby because it makes me happy! [...]]]></description>
			<content:encoded><![CDATA[<p>If you ask a Ruby programmer why he is using Ruby, you will probably get several answers like: It is dynamic. I allows me too keep my code DRY. I get results faster. Aside from all these statements, there is one statement that almost always comes up.</p>
<blockquote><p><strong>I use Ruby because it makes me happy!</strong></p>
</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="http://3.bp.blogspot.com/_ELioussa2vo/TB2yZpIl5XI/AAAAAAAAAfw/vCZCP2XcwZE/s320/smiley.jpg" /></div>
<p>If you search Amazon for Ruby you get 8,829 Results and if you search for Rails you get<br />
14,113 Results. What books should you get?</p>
<p>Here are the books I recommend:</p>
<h2>Ruby</h2>
<p><a href="http://www.amazon.com/Beginning-Ruby-Novice-Professional/dp/1590597664?tag=thtasta-20">Beginning Ruby</a> is a superb book for people coming new to Ruby.</p>
<p>If you are not a complete novice, you should instead go for<br />
<a href="http://www.amazon.com/Well-Grounded-Rubyist-David-Black/dp/1933988657?tag=thtasta-20">The Well Grounded Rybyist</a>.</p>
<p>When you have finished <em>the Well Grounded Rubyist</em>, you are ready for <a href="http://www.amazon.com/Metaprogramming-Ruby-Facets-Paolo-Perrotta/dp/1934356476/?tag=thtasta-20">Metaprogramming Ruby</a> where you learn metaprogramming techniques to help you keep your code DRY and readable.</p>
<h2>Rails</h2>
<p>Since Rails is currently being updated to version 3, there are not that many books available. I can recommend <a href="http://www.amazon.com/Rails-Way-Addison-Wesley-Professional-Ruby/dp/0321601661?tag=thtasta-20">The Rails3 Way</a>, currently only <a href="http://www.informit.com/store/product.aspx?isbn=0132480336">available as a Rough-Cut</a>.</p>
<p>The lack of updated books is not a problem. The <a href="http://guides.rails.info/getting_started.html">The Ruby on Rails Guides</a> are excellent. Make sure you select the edge version.</p>
<p>Even more information is available through the videos from <a href="http://en.oreilly.com/rails2010">Railsconf</a>, <a href="http://railsconf.blip.tv/rss/itunes/">subscribe to them in iTunes</a>. The first videos where published, the day after they were filmed. Fantastic!</p>
<p>Have a happy Ruby-red summer.</p>
<img src="http://feeds.feedburner.com/~r/jayway/posts/uncategorized/~4/bFC-x3nNBtE" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.jayway.com/2010/06/20/ruby-and-rails-summer-reading/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://blog.jayway.com/2010/06/20/ruby-and-rails-summer-reading/</feedburner:origLink></item>
		<item>
		<title>Maven, the new Elephant on the Block</title>
		<link>http://feedproxy.google.com/~r/jayway/posts/uncategorized/~3/FCvbSpO0fb8/</link>
		<comments>http://blog.jayway.com/2010/01/23/maven-the-new-elephant-on-the-block/#comments</comments>
		<pubDate>Sat, 23 Jan 2010 15:39:11 +0000</pubDate>
		<dc:creator>Anders Janmyr</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[build systems]]></category>
		<category><![CDATA[buildr]]></category>
		<category><![CDATA[maven]]></category>
		<category><![CDATA[maven2]]></category>
		<category><![CDATA[rake]]></category>
		<category><![CDATA[tools]]></category>

		<guid isPermaLink="false">http://blog.jayway.com/?p=4500</guid>
		<description><![CDATA[Some of you may remember the article, by Bruce Tate, Don't Make Me Eat the Elephant Again. It was an article about EJB, and Bruce was begging Sun not to make the same mistakes with EJB3 as they had done with EJB, and EJB2. They didn't, Spring came along as better alternative and forced EJB3 [...]]]></description>
			<content:encoded><![CDATA[<p>Some of you may remember the article, by Bruce Tate, <a href="http://today.java.net/pub/a/today/2004/06/15/ejb3.html">Don't Make Me Eat the Elephant Again</a>.<br />
It was an article about EJB, and Bruce was begging Sun not to make the same mistakes with EJB3 as they had done with EJB, and EJB2. They didn't, Spring came along as better alternative and forced EJB3 to become slimmer and better. If not for Spring, EJB3 would probably look very different from what it looks like today.<br />
Well, guess what, there is a new elephant on the block and its name Maven2.</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_ELioussa2vo/S1sVp6WDq8I/AAAAAAAAAbU/Vsll0_5GjII/s1600-h/maven2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" rel="lightbox"><img border="0" height="289" src="http://4.bp.blogspot.com/_ELioussa2vo/S1sVp6WDq8I/AAAAAAAAAbU/Vsll0_5GjII/s320/maven2.png" width="320" /></a></div>
<p>
Just like EJB2, Maven2 was born out of something so unbearable that anything else was bliss. <a href="http://commons.apache.org/jelly/">Jelly</a> anyone!</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/_ELioussa2vo/S1sWI6lm3KI/AAAAAAAAAbc/A6a_3zHxpsc/s1600-h/Maven.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" rel="lightbox"><img border="0" height="246" src="http://3.bp.blogspot.com/_ELioussa2vo/S1sWI6lm3KI/AAAAAAAAAbc/A6a_3zHxpsc/s320/Maven.png" width="320" /></a></div>
<p>
But just as EJB was fundamentally flawed, so is Maven2. Build systems, even advanced ones like Maven is fundamentally about two things.</p>
<ol>
<li>Check if something that something else depends on has changed</li>
<li>If so, do something.</li>
</ol>
<p>That's it, that is what is important.<br />
The checking may contain various sophisticated methods for detecting if files, subsets of files, all files, web pages, twitter feeds, etc, has changed, but that is really it.<br />
And the doing can be anything, Copy files, commit files, build websites, run tests, generate code, launch missiles, whatever!<br />
But the key to doing this efficiently is a programming language with easy access to system commands and the ability to create simple abstractions, with methods, variables, and objects. The language should also, preferably, be one without a lot of ceremony, like Ruby, Javascript or Python.<br />
There are already build systems like this out there, <a href="http://buildr.apache.org/">Buildr</a>, <a href="http://www.scons.org/">SCons</a>, and <a href="http://rake.rubyforge.org/">Rake</a> come to mind, but they do not have the momentum of Maven, so a merger between Maven and Buildr would be wonderful.</p>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/_ELioussa2vo/S1sWTI-SneI/AAAAAAAAAbk/Z0AI_sUPXMs/s1600-h/Maven3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" rel="lightbox"><img border="0" src="http://4.bp.blogspot.com/_ELioussa2vo/S1sWTI-SneI/AAAAAAAAAbk/Z0AI_sUPXMs/s320/Maven3.png" /></a></div>
<p>So, Jason, hear my plea, Don't make me eat the elephant again!</p>
<img src="http://feeds.feedburner.com/~r/jayway/posts/uncategorized/~4/FCvbSpO0fb8" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.jayway.com/2010/01/23/maven-the-new-elephant-on-the-block/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		<feedburner:origLink>http://blog.jayway.com/2010/01/23/maven-the-new-elephant-on-the-block/</feedburner:origLink></item>
		<item>
		<title>Working at Jayway</title>
		<link>http://feedproxy.google.com/~r/jayway/posts/uncategorized/~3/P3DlXFsrKvU/</link>
		<comments>http://blog.jayway.com/2009/11/29/working-at-jayway/#comments</comments>
		<pubDate>Sun, 29 Nov 2009 07:03:11 +0000</pubDate>
		<dc:creator>Anders Janmyr</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[authority]]></category>
		<category><![CDATA[competence]]></category>
		<category><![CDATA[consultancy]]></category>
		<category><![CDATA[jayway]]></category>
		<category><![CDATA[management]]></category>
		<category><![CDATA[openness]]></category>
		<category><![CDATA[product development]]></category>
		<category><![CDATA[satisfaction]]></category>

		<guid isPermaLink="false">http://blog.jayway.com/?p=2299</guid>
		<description><![CDATA[This morning I woke up singing, like I do most mornings. There are so many things ahead of me and most of them I like to do. One of those things is going to work. I worked at Jayway, for five years, three years ago, and I recently came back. The reason I left was [...]]]></description>
			<content:encoded><![CDATA[<p>This morning I woke up singing, like I do most mornings. <img src='http://blog.jayway.com/wordpress/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' />  There are so many things ahead of me and most of them I like to do. One of those things is going to work. I worked at Jayway, for five years, three years ago, and I recently came back.</p>
<p>The reason I left was that I wanted to work with one product and one team. I wanted to do everything right, I wanted to use pair-programming, domain-driven design and test-driven development. I had many plans. It didn't turn out that way, the people on the team I worked with did not want to use pair-programming, DDD or TDD! <img src='http://blog.jayway.com/wordpress/wp-includes/images/smilies/icon_sad.gif' alt=':(' class='wp-smiley' /> </p>
<p>After a few years I gave up and came back to Jayway and I love it. The company has grown quite a bit, while I was away, and that is a good thing. Three years ago I probably thought that it was a bad thing. It isn't! Three years ago we had to come into a company as resource consultants, but now we, many times, come in as a team or get to do the project in-house. This is a really good thing. Getting to work with other Jayway people is a real Joy. They are smart, motivated and pragmatic. If I leave the project for a week, someone steps into my role and, everything works out fine. <a href="http://agilemanifesto.org/">People and interactions over processes and tools</a> is very, very true!</p>
<p>There are a many reasons why I think it is so nice to work at Jayway.</p>
<p><strong>Natural authority</strong> is a pattern from <a href="http://anders.janmyr.com/2009/11/adrenaline-junkies-and-template-zombies.html">Adrenaline Junkies and Template Zombies</a> that states:</p>
<blockquote><p>The meaning of an authority is a person who knows a great deal about something. Another meaning, in authority, is a person who is in charge. If someone who is <strong>an authority</strong> also is <strong>in authority</strong>, this is a natural authority.</p>
</blockquote>
<p>The person who knows best, gets to make the decisions. This is the way it is at Jayway. You are not assigned to a project, <strong>you are asked</strong> if you want to work on the project and, <strong>it is OK to say no</strong>.</p>
<p><strong>Management</strong>. My wife recently told me about a danish entrepreneur, Lars Kolind. He is usually called in when a company is not doing as well as it should. He talked about something that he called <a href="http://kolindkuren.dk/">Kolindkuren (the Kolind treatment)</a>. What he does in this treatment is that he turns things upside-down. And one specific thing he did was that instead of asking managers who they wanted as employees, he asked the employees who they wanted to have as managers. It turned out that no-one wanted many of the managers.</p>
<p>When I think about this and how this would work out if we did the same thing at Jayway, I don't think that anything would change. I am happy with my managers, I don't see them as managers, I see them as collegues who work to allow me to do the job I want to do. If I got to choose who I wanted to be my boss, I would choose exactly the people we have right now. And, I think we all feel the same way. An example of this came a few years ago.</p>
<blockquote><p>Thomas, the president of Jayway was fired by the board. What happened then was amazing, one week after Thomas was fired, 90 percent of the employees had resigned. <strong>If Thomas can't work for you, then we wont work for you</strong>, was the clear message that was sent. And it had effect, Thomas is back, the board is gone, and we are all happy.</p>
</blockquote>
<p><strong>Competence</strong> is the driving factor of everyone at Jayway. We all have different interests, but the common denominator is that everyone loves programming and want to get better at it. Take a look at this weeks competence workshops, and remember that they are all voluntary!</p>
<p><img src="http://2.bp.blogspot.com/_ELioussa2vo/SxFCBQD9gvI/AAAAAAAAAZ8/hYIqfG63PFk/s320/comptence_jayway.png" title="Competence Calendar at Jayway" alt="Competence Calendar" /></p>
<p><strong>Openness</strong> is very important to me. If I know why a decision has been made, I can understand why it was taken even though I may not agree with it. At Jayway all the managers write a short daily mail about what they are doing during the day. Every week Thomas updates the wiki with what is going on currently and what is planned for the future. Everything that does not have to be secret is open and available. If you want to find it, it is on the wiki.</p>
<blockquote><p>If a doctor wants to chop of my leg I would be happier with the decision if I knew that he wants to do this because I have an incurable tumor in the leg, instead of him wanting to practice his amputation skills.</p>
</blockquote>
<p>So, that is how it is to work at Jayway (at least in my mind). If you feel that competence and humbleness is more important than fancy titles, come and join us.</p>
<img src="http://feeds.feedburner.com/~r/jayway/posts/uncategorized/~4/P3DlXFsrKvU" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.jayway.com/2009/11/29/working-at-jayway/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://blog.jayway.com/2009/11/29/working-at-jayway/</feedburner:origLink></item>
		<item>
		<title>On Twitter…</title>
		<link>http://feedproxy.google.com/~r/jayway/posts/uncategorized/~3/O00QsCKcGBI/</link>
		<comments>http://blog.jayway.com/2009/03/17/on-twitter/#comments</comments>
		<pubDate>Tue, 17 Mar 2009 14:49:28 +0000</pubDate>
		<dc:creator>Mattias Ask</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[blog]]></category>
		<category><![CDATA[twitter]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://blog.jayway.com/?p=1161</guid>
		<description><![CDATA[Twitter has actually just recently gotten a lot of traction in Sweden and Scandinavia. Google Trends show this clearly which means that a Swedish blog-post about Twitter is still sort of relevant What is Twitter? Well, it's a micro blog. Users post so called tweets, messages with 140 characters or less. You can tweet, follow [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://twitter.com">Twitter</a> has actually just recently gotten a lot of traction in Sweden and Scandinavia. <a href="http://www.google.com/trends?q=twitter&geo=swe&sa=N">Google Trends</a> show this clearly which means that a Swedish blog-post about Twitter is still sort of relevant <img src='http://blog.jayway.com/wordpress/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>What is Twitter? Well, it's a micro blog. Users post so called tweets, messages with 140 characters or less. You can tweet, follow peoples tweets and search. That's basically it. And this is cool why?</p>
<h3>Keep yourself updated</h3>
<p>For me, one of the key features of Twitter is that there are really interesting people twittering. If you go to <a href="http://wefollow.com">WeFollow</a> you'll find people like <a href="http://twitter.com/kevinrose">Kevin Rose</a>, <a href="http://twitter.com/timoreilly">Tim O'Reilly</a> and <a href="http://twitter.com/guykawasaki">Guy Kawasaki</a> in the tech segment. Since they are active this means that you are able to listen to feeds from some of the, in their fields, most updated people. And Twitter is basically full of fantastic people to follow... like Chris Hughes (http://twitter.com/chews), less followed but equally interesting, who's Twitter Bio says "I was the one of first to hack the iPhone. BOOOM'"... In short, nothing is stopping anyone from evolving their web presence and getting people to follow them.</p>
<p>Before Twitter everyone knew people that where islands of new knowledge; people that seemed to have one ear to the ground and hear the most interesting things. With Twitter, these guys and girls broadcast their nuggets of information to the world, effectively building their personal brand and enabling everyone to listen to them. All of the sudden you have the opportunity to be as updated as these people are. Not only that, since you have the possibility to listen to multiple islands at once you can get a perspective of the entire world of islands... </p>
<p>Ok, there are great people to follow, and they share information, great links and insight, but this all sums up to a lot of information. Yes! In this day and age you have to accept a certain degree of white noise if you want to hear interesting signals... deal with it. Luckily there are plenty of tools to help you deal with it. I use <a href="http://www.tweetdeck.com/">TweetDeck</a> on my Mac, but there are tons of tools out there...</p>
<h3>The Twitter API</h3>
<p>The Twitter API is in my opinion is one of the most obvious reasons for Twitter success. It is an open API which anyone can use to create applications that uses Twitter data... and it's silly simple, especially if you use the Java API <a href="http://code.google.com/p/java-twitter/">java-twitter</a>. The following is what is needed to login a user and print their friends timeline (the stream of tweets from people a person follows):</p>
<pre class="java"><span style="color: #000000; font-weight: bold;">public</span> <span style="color: #993333;">void</span> printFriendsTimeline<span style="color: #66cc66;">&#40;</span><a href="http://www.google.com/search?hl=en&amp;q=allinurl%3AString+java.sun.com&amp;btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">String</span></a> username, <a href="http://www.google.com/search?hl=en&amp;q=allinurl%3AString+java.sun.com&amp;btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">String</span></a> password<span style="color: #66cc66;">&#41;</span> <span style="color: #000000; font-weight: bold;">throws</span> TwitterException<span style="color: #66cc66;">&#123;</span>
	Api api = <span style="color: #000000; font-weight: bold;">new</span> Api<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
	api.<span style="color: #006600;">setCredentials</span><span style="color: #66cc66;">&#40;</span>username, password<span style="color: #66cc66;">&#41;</span>;
	Status<span style="color: #66cc66;">&#91;</span><span style="color: #66cc66;">&#93;</span> userTimeline = api.<span style="color: #006600;">getFriendsTimeline</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span>Status status : userTimeline<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
		<a href="http://www.google.com/search?hl=en&amp;q=allinurl%3ASystem+java.sun.com&amp;btnI=I%27m%20Feeling%20Lucky"><span style="color: #aaaadd; font-weight: bold;">System</span></a>.<span style="color: #006600;">out</span>.<span style="color: #006600;">println</span><span style="color: #66cc66;">&#40;</span>status.<span style="color: #006600;">getUser</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">getName</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> + <span style="color: #ff0000;">&quot;:&quot;</span> + status.<span style="color: #006600;">getText</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span>
&nbsp;</pre>
<p>This means that anyone can do just about anything with the Twitter data. Your basic level of allowed requests is 100 request per hour and IP, but if your application is request-intensive you can ask Twitter for more and get up to 20.000 requests per hour and IP. Of course this has created a flora, or even an entire ecosystem, of applications and implementations where you can tweet, watch statistics, see the most tweeted links and everything you can imagine (just check out <a href="http://www.squidoo.com/twitterapps">this list</a>).</p>
<h3>Some tweeting advice</h3>
<p>Not that I'm an authority on this, but I still wanted to end with some advice on tweeting:</p>
<p>1. Create good content that you think people want to read. Did you published a blog post? Tweet about it. Going to a conference? Tweet about it. Did you find a new interesting framework? Tweet about it. Got a new fantastic insight? Tweet about it.</p>
<p>2. #tag your tweets. If you tweet "Just found out about this great API http://tr.im/hr8S" end it with describing #tags like this "Just found out about this great API http://tr.im/hr8S #java #dev #twitter" to make it searchable and to add more context. </p>
<p>3. Re-tweet/RT when you read a good tweet. RT is a user derived notation which is used when forwarding tweets. If you get "Jayway.com is a great company!" from me and love it you simply write "RT @mattiasask : Jayway.com is a great company!". Applications like TweetDeck also help you with this...</p>
<p>4. Try to get re-tweeted if you want to spread you tweets. A tweet can travel by RT from social graph to social graph and reach a lot of people that way. Read Guy Kawasakis' blog on how to get retweeted (http://blogs.openforum.com/2009/02/18/how-to-get-retweeted/) for more on this. </p>
<p>/Mattias Ask, <a href="http://twitter.com/mattiasask">@mattiasask</a></p>
<p>PS. I have to add cool thing about Twitter and the speed of updates, something Twitter co-founder Evan Williams <a href="http://www.ted.com/index.php/talks/evan_williams_on_listening_to_twitter_users.html">talked about at TED</a> this year. During the California forest fires in -07 Twitter followers where more updated about where the fires spread than the people listing to the traditional media sources where. Why? Because people in the actual areas where the fire spread were tweeting about it from their cellphones...</p>
<img src="http://feeds.feedburner.com/~r/jayway/posts/uncategorized/~4/O00QsCKcGBI" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.jayway.com/2009/03/17/on-twitter/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://blog.jayway.com/2009/03/17/on-twitter/</feedburner:origLink></item>
		<item>
		<title>OpenCauses.org – Do Good.</title>
		<link>http://feedproxy.google.com/~r/jayway/posts/uncategorized/~3/Vrxq_jF8sMA/</link>
		<comments>http://blog.jayway.com/2009/02/25/opencausesorg-do-good/#comments</comments>
		<pubDate>Wed, 25 Feb 2009 15:32:57 +0000</pubDate>
		<dc:creator>Mattias Ask</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[donations]]></category>
		<category><![CDATA[innovation]]></category>
		<category><![CDATA[opencauses]]></category>

		<guid isPermaLink="false">http://blog.jayway.com/?p=962</guid>
		<description><![CDATA[I had the opportunity to present the Way Group initiated project OpenCauses.org at TED@PalmSprings this year. It was a fantastic experience and I got a great response on the project. But what is it we are doing with OpenCauses.org? For good or for bad, the market is unprecedented in its power to generate wealth. What [...]]]></description>
			<content:encoded><![CDATA[<p>I had the opportunity to <a href="http://blog.ted.com/2009/02/friday_mornings.php">present</a> the <a href="http://www.waygroup.se/">Way Group</a> initiated project <a href="http://opencauses.org">OpenCauses.org</a> at <a href="http://www.ted.com">TED@PalmSprings</a> this year. It was a fantastic experience and I got a great response on the project. But what is it we are doing with <a href="http://opencauses.org">OpenCauses.org</a>?</p>
<p>For good or for bad, the market is unprecedented in its power to generate wealth. What if we could use this power, not to generate wealth, but to generate good?</p>
<p>Since the market understands money really well, why not create representative money based on donations? If we do this, everyone will be able to handle donations as money. We could own it, measure it, trade with it, work to generate more of it... and every cent of it would represent donations for good causes.</p>
<p>This is what <a href="http://www.opencauses.org">OpenCauses.org</a> is doing.</p>
<p><a href="http://www.opencauses.org">OpenCauses.org</a> really only aims to change <em>one</em> word. Instead of saying "I <em>make</em> donations to good causes" you will say "I <em><strong>buy</strong></em> donations to good causes". This slight change makes all the difference. </p>
<p><strong>What is it we are doing?</strong><br />
We are creating the Open Causes Platform, a non-profit donation platform, which will enable donations to causes aimed at the <a href="http://www.un.org/millenniumgoals/">UN Millennium Development Goals</a>. The Open Causes Platform will also hold Cause Credits. Causes Credits is representative money based on donations. This means that each Causes Credit represents a donation made to a good cause. </p>
<p>When you donate through the Open Causes Platform you receive Cause Credits for your donation. Your Cause Credits are measurable and accumulative, and  they are also transferable between users of the platform. All this combined effectively makes Cause Credits into a means of trade.</p>
<p>The Open Causes Platform is an infrastructural platform which exposes a number of web-services. With these services integrators can integrate basically any site or Internet connected product to the platform. Anyone can create pretty much any implementation of donation based services imaginable. They will be able to make donations, show how much users have donated, compare and transfer donation. </p>
<p><strong>Using Cause Credits</strong><br />
If you, as a person or an organization, own 100 Cause Credits you have donated $100 through the Open Causes Platform. If you later donate $10 more, you own 110 Cause Credits. </p>
<p>Now, let's say that I have a cellular phone that I don't use. If you give me your 110CC, I'll give you my phone. If so, I have made the actual donations for $110 and you have bought my phone in two steps. The value of my phone has paid for the $110 donation. You now own a phone, but have not made any donations.</p>
<p><strong>Summary</strong><br />
We are implementing a currency based on donations. Essentially we want to complement the market of today with a market based on generosity. Just imagine if every corporation where to accept a currency based on donations for 1% of their services and products... What couldn't we do then?</p>
<p>Mattias Ask,<br />
Founder of <a href="http://opencauses.org">OpenCauses.org</a></p>
<p>If you have any questions or want more information about the project,  go to <a href="http://www.opencauses.org">OpenCauses.org</a> or contact me at mattias.ask@opencauses.org.</p>
<img src="http://feeds.feedburner.com/~r/jayway/posts/uncategorized/~4/Vrxq_jF8sMA" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.jayway.com/2009/02/25/opencausesorg-do-good/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://blog.jayway.com/2009/02/25/opencausesorg-do-good/</feedburner:origLink></item>
		<item>
		<title>Development 13 years ago</title>
		<link>http://feedproxy.google.com/~r/jayway/posts/uncategorized/~3/ywdC38U8AzI/</link>
		<comments>http://blog.jayway.com/2008/09/22/development-13-years-ago/#comments</comments>
		<pubDate>Mon, 22 Sep 2008 17:00:07 +0000</pubDate>
		<dc:creator>Jan Kronquist</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[game]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[retrospective]]></category>

		<guid isPermaLink="false">http://blog.jayway.com/?p=314</guid>
		<description><![CDATA[Back in 1994-1995 me and a friend wrote a game called Gravity Force 2 on the Amiga. It got very popular and we still get the occasional email about it. Some people have requested to look at the source code and now it is finally released! ]]></description>
			<content:encoded><![CDATA[<p>Back in 1994-1995 me and a friend wrote a game called <a href="http://www.lysator.liu.se/~jensa/gf2/">Gravity Force 2</a> on the Amiga. It got very popular and we still get the occasional email about it. Some people have requested to look at the source code and now it is finally released! </p>
<p>This weekend I was unpacking two of the last boxes in my new apartment and I finally found my old Amiga 1200. Since it have been stored in the attic for a couple of years and in before that it was stored in the cellar, I decided that it was time to check if it was still working. It took me a quite some time to configure the TV(!) to correctly show the display, but everything else worked like a charm. It had not been booted for over 10 years! </p>
<p>Anyway I found the source code in some random folder, created an LHA archive, found an old floppy disk and using an USB floppy drive I managed to transfer the archive to my PC. Some facts:</p>
<ul>
<li>The code had not been touched since march 1995</li>
<li>It is more than 12 000 lines of (more or less) undocumented assembly code mostly in a single file</li>
<li>The labels are things like s, s2, fl, bid, cnl2 and so on</li>
<li>We didn't use a version control system. Instead all files were transfered on floppy disk between our computers</li>
</ul>
<p>Yet we were still able to create a fun computer game that worked on all the different versions of the Amiga hardware. With todays powerful hardware, different programming languages, good IDEs and the large number of frameworks I simply don't know where to start. Why is that? </p>
<p>Perhaps the fact that we were very focused on what we wanted to do and not interested in how, we were able to overcome the complexity and simply get it done.</p>
<img src="http://feeds.feedburner.com/~r/jayway/posts/uncategorized/~4/ywdC38U8AzI" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://blog.jayway.com/2008/09/22/development-13-years-ago/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://blog.jayway.com/2008/09/22/development-13-years-ago/</feedburner:origLink></item>
	</channel>
</rss>
