<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	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:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:media="http://search.yahoo.com/mrss/"
	>

<channel>
	<title>Perdido is Lost!</title>
	<atom:link href="http://luizfar.wordpress.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://luizfar.wordpress.com</link>
	<description>Just another lost weblog</description>
	<lastBuildDate>Fri, 13 Jan 2012 18:33:41 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.com/</generator>
<cloud domain='luizfar.wordpress.com' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' />
<image>
		<url>http://s2.wp.com/i/buttonw-com.png</url>
		<title>Perdido is Lost!</title>
		<link>http://luizfar.wordpress.com</link>
	</image>
	<atom:link rel="search" type="application/opensearchdescription+xml" href="http://luizfar.wordpress.com/osd.xml" title="Perdido is Lost!" />
	<atom:link rel='hub' href='http://luizfar.wordpress.com/?pushpress=hub'/>
		<item>
		<title>Thoughts on software estimation</title>
		<link>http://luizfar.wordpress.com/2011/06/28/thoughts-on-software-estimation/</link>
		<comments>http://luizfar.wordpress.com/2011/06/28/thoughts-on-software-estimation/#comments</comments>
		<pubDate>Mon, 27 Jun 2011 21:03:47 +0000</pubDate>
		<dc:creator>Luiz Perdido</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[English]]></category>
		<category><![CDATA[Programming]]></category>

		<guid isPermaLink="false">http://luizfar.wordpress.com/?p=395</guid>
		<description><![CDATA[1. Why do we estimate? Estimations are part of our everyday life. We estimate how long the bus ride to work will be so that we know what time we should wake up. Drivers estimate how big a spot by the curb is to decide if they can park there or not. Engineers estimate how [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=luizfar.wordpress.com&amp;blog=438511&amp;post=395&amp;subd=luizfar&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p><strong>1. Why do we estimate?</strong></p>
<p>Estimations are part of our everyday life. We estimate how long the bus ride to work will be so that we know what time we should wake up. Drivers estimate how big a spot by the curb is to decide if they can park there or not. Engineers estimate how much time they need to get a building done so that they can charge the clients, pay the builders, and so on.</p>
<p>So, looking at these examples, I&#8217;d say that we estimate as a means of predicting something that usually can be measured: time, distance, size, etc, without having to actually measure it. We predict because measuring it may not be worth it, or because if we measure it, once we are done, this knowledge isn&#8217;t useful anymore.<br />
With this prediction in hand we are able to make decisions. So I think that we can say that we estimate stuff to plan our actions.</p>
<p><strong>2. Estimating projects</strong></p>
<p>Let&#8217;s take the engineer as an example, I am not an engineer, but since my father is a builder, I think I can say some things about it. So the engineer has to estimate a building project, probably the differences between a project and another will eventually boil down to the material, the size, the number of builders that will be working, and a few more variables that are likely to be easily quantified. Once the engineer has all the information he needs, it&#8217;s just a matter of calculations. There aren&#8217;t many different ways of building a wall or a pillar after all. Of course, it is an estimation, so it may still prove itself invalid, that&#8217;s why it&#8217;s called estimation and not vision-from-my-crystal-ball.</p>
<p>Now, in software development we also need to estimate how long it will take, how many developers/QAs we will need, and so on, but the tricky thing is: how do we measure software? We don&#8217;t have materials, area, size. What units are going to be used as input for our calculations to come up with a reliable estimation?</p>
<p>Well, there aren&#8217;t any. Software development, different to classical engineering, isn&#8217;t measurable, because it&#8217;s an intellectual and creative type of work. Writing software for a bank is not the same thing as writing a mobile phone game. While we work in a development project we learn about the client&#8217;s domain, their needs, their specificities. And each client has their own details, even if they belong in the same type of industry. This makes all development projects a learning project. If we are learning something, we don&#8217;t really have the knowledge before it is done, so our estimations won&#8217;t be very accurate.<br />
Not to mention differences of technology, the knowledge of the team members, how to deal with the client people to gather requirements and approve a completed functionality.<br />
If you ever hear anyone saying that software development is an exact science, tell them: &#8220;Lies!&#8221;. It&#8217;s a lot about learning, finding different solutions for different problems and *a lot* of dealing with people, not so similar to the classical build-my-house project.</p>
<p><strong>3. So what do we do?</strong></p>
<p>Well, that&#8217;s a good question, since we can&#8217;t really say &#8220;we won&#8217;t estimate this software project&#8221;. We still need to plan it, and as we agreed estimations are needed for planning. So, where I come from we don&#8217;t estimate how big a software is, nor how long it&#8217;s going to take us to write it. We estimate how complex it seems to be, and the most important thing is: this estimations are relative, not absolute. We split the work into &#8220;<a href="http://en.wikipedia.org/wiki/User_story" target="_blank">stories</a>&#8220;, an <a href="http://en.wikipedia.org/wiki/INVEST_(mnemonic)" target="_blank">independent and small</a> piece of work and assign &#8220;story points&#8221; to each story, a completely abstract unit of measurement.</p>
<p>If I tell you that I will need 4 hours to wash your car, this is an absolute estimation, since 4 hours is a fixed amount of something that we all know how to measure and have a common understanding of (hours). Now if we agree that a given piece of functionality for your software is 2 story points, it&#8217;s relative because it means that it is twice as complex as it is to write another piece of functionality that is 1 story point. But a &#8220;story point&#8217; doesn&#8217;t really mean anything.</p>
<p>It&#8217;s true that there is a statistical co-relation between story points and time, as we can see on the chart below, but this co-relation of how much time in average a story point is worth varies quite a lot depending on the team, the project, the domain, technology and so on. The relativity between the points is still valid though.</p>
<div id="attachment_398" class="wp-caption aligncenter" style="width: 482px"><a href="http://www.expertprogrammanagement.com/2010/11/story-points-explained/"><img class="size-full wp-image-398 " style="border-color:initial;border-style:initial;border-width:0;" title="story-point-overlap-graphic" src="http://luizfar.files.wordpress.com/2011/06/story-point-overlap-graphic.jpg?w=600" alt=""   /></a><p class="wp-caption-text">How story points relate with one another when converting them to time units. Taken from Story Points explained.</p></div>
<p><strong>4. Estimating software</strong></p>
<p>So now that we can measure the effort to write software using its complexity in story points, we can start estimating our work. As we already agreed, development is a lot  about learning, so we can infer that the more we work on a project, with the same team and environment, the more accurate our estimations will be, since we will <em>know</em> more about such project&#8217;s details. That&#8217;s why we ideally avoid estimating a whole project at once in the beginning, it&#8217;s better to estimate it in parts. For instance, estimating a bucket of stories for each planned release or each planned iteration.</p>
<p>After a few iterations we can get a grasp of an average number of story points that team can complete in a given amount of time. It&#8217;s important noticing that any change in any of these variables: team, project and environment may and will affect this co-relation. Once we have this average number we can start predicting how much time it will take us to complete a big set of stories.</p>
<p>Now, that sounds very good in theory, but in real life we usually need to tell our clients an estimation <em>before</em> we actually start working, depending on the contract and the relationship with the client, so&#8230; what do we do? This has got to be the one billion dollars question of software development lately. And the more I talk to people about it, the more it seems like there&#8217;s no satisfying answer.</p>
<p><strong>5. Contracts</strong></p>
<p>When the client is known and there is already a strong relationship between the parts it is easier to get a flexible contract, usually in a time-and-materials fashion, allowing us to adapt the complexity x time co-relation as the project advances and negotiate deadlines x scope x team variables to get whatever the client needs the most as soon as we can deliver. This really requires mutual trust and collaboration, which agile is all about. But the world is not 100% agile, as humans are not 100% trustworthy, so from what I have experienced these contracts are not the most common out there, specially when we are trying to get a new client to partner up with.</p>
<p>On the other side of the rope lies the least flexible type of contracts: fixed-price and scope contracts. The client tells you: here&#8217;s what I need, you tell them: I need X months to get that done, and it will cost you Y money units. Needless to say there&#8217;s a big risk involved in this type of contract. If the estimation is too low either you may need to work over-hours to get the work done, or the deadline won&#8217;t be met. In the worst cases, both may happen. If the estimation is too high, the client may prefer a cheaper potential partner and leave you. In the case they accept your terms, there will probably be a big waste of money from the client&#8217;s part, and time from both your sides (see the <a href="http://en.wikipedia.org/wiki/Parkinson's_Law" target="_blank">Parkinson&#8217;s Law</a>). Not to mention requirement changes that, regardless of what the clients say, will come up during the development.</p>
<p>Most of the other types of contracts I have seen lie in between these two types or are a mix of them. Some examples I have seen are offering a couple of iterations to develop a prototype for the potential client, for free. After this prototype is ready, if the client likes what they see, the team will have a much better knowledge to work on more reliable estimations for a fixed-price contract. Another option could be a contract with a fixed deadline but variable scope, where the team compromises to deliver at least X story points. Or fixed scope but variable deadline, depending on what&#8217;s more important for that client.</p>
<p><strong>6. Managing estimations</strong></p>
<p>That said, I have had many discussions with colleagues about how to manage existing estimations, mostly in regards of whether we should re-estimate stories or not.<br />
This may become a rather hot debate, but my opinion is that: we should try to avoid re-estimating stories, unless we&#8217;re really far off.<br />
I really like <a href="http://blog.mountaingoatsoftware.com/to-re-estimate-or-not-that-is-the-question" target="_blank">Mike Cohn&#8217;s take on the subject</a>, I don&#8217;t think I can explain it as well as him, so just take a look at it!<br />
The basic idea is that we have <em>knowledge-before-the-fact</em> and <em>knowledge-after-the-fact</em>, and we shouldn&#8217;t mix them on our backlog, since we will need a normalized set of data to plan our future work on.</p>
<p>The problem arises when we use estimations not only for planning, but also to charge the clients due to the contract type. In this case re-estimating stories or not may not be an option. If the estimations are not tied with the project costs, informing the client that a given story will take longer than planned may suffice, in this case, since the development is in progress, a timed-estimation may even be accurate enough and more useful.</p>
<p><strong>7. Conclusion</strong></p>
<p>In my opinion, software estimation techniques are quite fair nowadays, the problem is not how we estimate software, it&#8217;s how we charge our clients.<br />
Estimations are called estimations for a reason, they are not supposed to be the truth written in stone, and contracts based on that are quite risky.<br />
I have the impression that once we all build a common understanding that software development is not as a classical engineering type of project many things will become simpler, and we will stop feeling that we are working in the software-estimation industry instead of in the software-development one (at least I feel like that at times).<br />
The engineering part of our work is done by the compilers and interpreters, not by the developers.</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/luizfar.wordpress.com/395/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/luizfar.wordpress.com/395/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/luizfar.wordpress.com/395/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/luizfar.wordpress.com/395/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/luizfar.wordpress.com/395/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/luizfar.wordpress.com/395/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/luizfar.wordpress.com/395/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/luizfar.wordpress.com/395/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/luizfar.wordpress.com/395/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/luizfar.wordpress.com/395/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/luizfar.wordpress.com/395/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/luizfar.wordpress.com/395/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/luizfar.wordpress.com/395/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/luizfar.wordpress.com/395/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=luizfar.wordpress.com&amp;blog=438511&amp;post=395&amp;subd=luizfar&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://luizfar.wordpress.com/2011/06/28/thoughts-on-software-estimation/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/b0d5ae0affa30208e7bab51ee423e61e?s=96&#38;d=monsterid&#38;r=X" medium="image">
			<media:title type="html">Luiz Fernando Ribeiro</media:title>
		</media:content>

		<media:content url="http://luizfar.files.wordpress.com/2011/06/story-point-overlap-graphic.jpg" medium="image">
			<media:title type="html">story-point-overlap-graphic</media:title>
		</media:content>
	</item>
		<item>
		<title>Testing events on jQuery objects with Jasmine</title>
		<link>http://luizfar.wordpress.com/2011/01/10/testing-events-on-jquery-objects-with-jasmine/</link>
		<comments>http://luizfar.wordpress.com/2011/01/10/testing-events-on-jquery-objects-with-jasmine/#comments</comments>
		<pubDate>Mon, 10 Jan 2011 17:17:41 +0000</pubDate>
		<dc:creator>Luiz Perdido</dc:creator>
				<category><![CDATA[English]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Programming]]></category>

		<guid isPermaLink="false">http://luizfar.wordpress.com/?p=380</guid>
		<description><![CDATA[Recently we had a piece of JavaScript code that looked roughly like this: So we wanted to test this using Jasmine. Our main goal was to test that when the button was clicked the form that contains it was being submitted. It would be cool if we could use Jasmine&#8217;s spies: But unfortunately this does [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=luizfar.wordpress.com&amp;blog=438511&amp;post=380&amp;subd=luizfar&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p>Recently we had a piece of JavaScript code that looked roughly like this:</p>
<p><pre class="brush: jscript;">
myApp.buttonBinder = {
  bind: function(button) {
    if (myApp.shouldChangeButtonAction()) {
      button.unbind(&quot;click&quot;).click(function() {
        button.closest(&quot;form&quot;).submit();
      });
    }
  }
}
</pre></p>
<p>So we wanted to test this using Jasmine.<br />
Our main goal was to test that when the button was clicked the form that contains it was being submitted.<br />
It would be cool if we could use Jasmine&#8217;s spies:</p>
<p><pre class="brush: jscript;">
describe(&quot;myApp.buttonBinder&quot;, function() {
  it(&quot;should bind form submit to button&quot;, function() {
    var form = $(&quot;&lt;form/&gt;&quot;);
    var button = $(&quot;&lt;input/&gt;&quot;);
    form.append(button);
    spyOn(form, 'submit');

    myApp.buttonBinder.bind(button);
    button.click();

    expect(form.submit).toHaveBeenCalled();
  });
});
</pre></p>
<p>But unfortunately this does not work. I didn&#8217;t look too much into it, but I suspect it is due to the fact that when the actual code runs, the jQuery  &#8216;closest&#8217; selector creates a new form object that represents the same DOM element. But as it is a different object the spy can&#8217;t recognize that the function submit has been called.<br />
One idea is to instead add a listener to the form&#8217;s submit event and check if this listener has been called:</p>
<p><pre class="brush: jscript;">
describe(&quot;myApp.buttonBinder&quot;, function() {
  it(&quot;should bind form submit to button&quot;, function() {
    var form = $(&quot;&lt;form/&gt;&quot;);
    var button = $(&quot;&lt;input/&gt;&quot;);
    form.append(button);
    var formHasBeenSubmitted = false;
    form.submit(function() {
      formHasBeenSubmitted = true;
    });

    myApp.buttonBinder.bind(button);
    button.click();

    expect(formHasBeenSubmitted).toBeTruthy();
  });
});
</pre></p>
<p>And voilá! This works!<br />
But it looks terrible, doesn&#8217;t it?<br />
Good thing Jasmine lets us extend itself, so we can create a new spy function and a new custom matchers:</p>
<p><pre class="brush: jscript;">
// SpecHelper.js
var jasmineExtensions = {
  jQuerySpies: {},
  spyOnEvent: function(element, eventName) {
    var control = {
      triggered: false
    };
    element.bind(eventName, function() {
      control.triggered = true;
    });
    jasmineExtensions.jQuerySpies[element[eventName]] = control;
  };
};

var spyOnEvent = jasmineExtensions.spyOnEvent;

beforeEach(function() {
  this.addMatchers({
    toHaveBeenTriggered: function() {
      var control = jasmineExtensions.jQuerySpies[this.actual];
      return control.triggered;
    }
  });
});
</pre></p>
<p>And now our test looks like this:</p>
<p><pre class="brush: jscript;">
describe(&quot;myApp.buttonBinder&quot;, function() {
  it(&quot;should bind form submit to button&quot;, function() {
    var form = $(&quot;&lt;form/&gt;&quot;);
    var button = $(&quot;&lt;input/&gt;&quot;);
    form.append(button);
    spyOnEvent(form, 'submit');

    myApp.buttonBinder.bind(button);
    button.click();

    expect(form.submit).toHaveBeenTriggered();
  });
});
</pre></p>
<p>Much better \o/</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/luizfar.wordpress.com/380/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/luizfar.wordpress.com/380/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/luizfar.wordpress.com/380/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/luizfar.wordpress.com/380/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/luizfar.wordpress.com/380/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/luizfar.wordpress.com/380/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/luizfar.wordpress.com/380/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/luizfar.wordpress.com/380/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/luizfar.wordpress.com/380/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/luizfar.wordpress.com/380/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/luizfar.wordpress.com/380/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/luizfar.wordpress.com/380/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/luizfar.wordpress.com/380/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/luizfar.wordpress.com/380/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=luizfar.wordpress.com&amp;blog=438511&amp;post=380&amp;subd=luizfar&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://luizfar.wordpress.com/2011/01/10/testing-events-on-jquery-objects-with-jasmine/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/b0d5ae0affa30208e7bab51ee423e61e?s=96&#38;d=monsterid&#38;r=X" medium="image">
			<media:title type="html">Luiz Fernando Ribeiro</media:title>
		</media:content>
	</item>
		<item>
		<title>Go learn JavaScript!</title>
		<link>http://luizfar.wordpress.com/2010/12/08/go-learn-javascript/</link>
		<comments>http://luizfar.wordpress.com/2010/12/08/go-learn-javascript/#comments</comments>
		<pubDate>Wed, 08 Dec 2010 20:11:11 +0000</pubDate>
		<dc:creator>Luiz Perdido</dc:creator>
				<category><![CDATA[English]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[Testing]]></category>

		<guid isPermaLink="false">http://luizfar.wordpress.com/?p=365</guid>
		<description><![CDATA[This post comes late, as I have realized this late myself. But it is not late enough to be useless, because most developers out there still haven&#8217;t learned JavaScript. If you work with development of some sort, big chances are you work with web development. If you work with web development, regardless of the technology [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=luizfar.wordpress.com&amp;blog=438511&amp;post=365&amp;subd=luizfar&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p><a href="http://luizfar.files.wordpress.com/2010/12/javascript_logo.jpg"><img class="alignright size-thumbnail wp-image-372" title="JavaScript" src="http://luizfar.files.wordpress.com/2010/12/javascript_logo.jpg?w=150&#038;h=126" alt="" width="150" height="126" /></a><br />
This post comes late, as I have realized this late myself.<br />
But it is not late enough to be useless, because most developers out there still haven&#8217;t learned JavaScript.</p>
<p>If you work with development of some sort, big chances are you work with web development.<br />
If you work with web development, regardless of the technology stack &#8211; be it Java, .NET, Ruby, Python, Perl or Brainfuck &#8211; your application runs on a browser, and all browsers run JavaScript, so you can&#8217;t escape from it. *</p>
<p>That said, once you have learned JavaScript, you will find out that programming in JavaScript is actually fun!<br />
I have gone through this myself as I have seen colleagues going through this too.<br />
Not only you will find out it is fun, you will see how JavaScript is a powerful language that has lots of good things that you will start to wish other languages also had.</p>
<p>Most important of all: your JavaScript code will start to look good.<br />
And once all developers in your team have learned that learning JavaScript is not only important, but necessary, your project&#8217;s JavaScript codebase will stop looking horrendous as it does nowadays. It will look good, modularized and testable. And you won&#8217;t ever again go &#8220;Oh crap, I have to touch JavaScript in this story&#8230;&#8221;.</p>
<p>Wait, did I say testable? Yes, I did! You can actually TDD your JavaScript code as well as you can TDD your &lt;favorite language&gt; code.<br />
For that I recommend <a href="http://pivotal.github.com/jasmine/" target="_blank">Jasmine</a>, have been using it in our project, love it.<br />
You can even combine Jasmine with <a href="http://www.mozilla.org/rhino/" target="_blank">Rhino</a> or <a href="http://code.google.com/p/selenium/" target="_blank">WebDriver</a> and add your JavaScript tests to your Continuous Integration pipeline. (Your project has a CI server, right?!)</p>
<p>And you know what? Learning JavaScript is EASY!<br />
I believe most developers familiar with any OO language wouldn&#8217;t need more than a couple of days to start writing more than decent JavaScript code.<br />
There&#8217;s plenty of good <a href="http://javascript.crockford.com/" target="_blank">websites</a> and <a href="http://oreilly.com/catalog/9780596517748" target="_blank">books</a> out there for you to learn it, so go on and have fun!</p>
<p>* Ok, actually, you can escape from writing JavaScript.<br />
You could go with <a href="http://code.google.com/webtoolkit/" target="_blank">GWT</a> for instance. And I remember there were other frameworks that let you develop the whole fancy UI on Java on the server side, sending only few instructions to the client &#8211; I can&#8217;t recall any names right now.<br />
The thing is: is it worth it?<br />
I worked with GWT for a considerable time in 2009 and, now that I have had more JavaScript experience, I definitely wouldn&#8217;t go back to GWT. It just seems like a lot more work to do, not to mention the messy HTML and CSSs it generates.<br />
If you&#8217;d like to have your JavaScript compiled from something else, take a look at <a href="http://jashkenas.github.com/coffee-script/" target="_blank">CoffeeScript</a> <img src='http://s1.wp.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/luizfar.wordpress.com/365/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/luizfar.wordpress.com/365/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/luizfar.wordpress.com/365/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/luizfar.wordpress.com/365/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/luizfar.wordpress.com/365/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/luizfar.wordpress.com/365/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/luizfar.wordpress.com/365/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/luizfar.wordpress.com/365/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/luizfar.wordpress.com/365/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/luizfar.wordpress.com/365/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/luizfar.wordpress.com/365/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/luizfar.wordpress.com/365/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/luizfar.wordpress.com/365/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/luizfar.wordpress.com/365/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=luizfar.wordpress.com&amp;blog=438511&amp;post=365&amp;subd=luizfar&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://luizfar.wordpress.com/2010/12/08/go-learn-javascript/feed/</wfw:commentRss>
		<slash:comments>12</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/b0d5ae0affa30208e7bab51ee423e61e?s=96&#38;d=monsterid&#38;r=X" medium="image">
			<media:title type="html">Luiz Fernando Ribeiro</media:title>
		</media:content>

		<media:content url="http://luizfar.files.wordpress.com/2010/12/javascript_logo.jpg?w=150" medium="image">
			<media:title type="html">JavaScript</media:title>
		</media:content>
	</item>
		<item>
		<title>Step-by-step selenium tests with page objects, dsl and fun!</title>
		<link>http://luizfar.wordpress.com/2010/09/29/page-objects/</link>
		<comments>http://luizfar.wordpress.com/2010/09/29/page-objects/#comments</comments>
		<pubDate>Wed, 29 Sep 2010 17:25:42 +0000</pubDate>
		<dc:creator>Luiz Perdido</dc:creator>
				<category><![CDATA[Programming]]></category>
		<category><![CDATA[Testing]]></category>
		<category><![CDATA[automated tests]]></category>
		<category><![CDATA[dsl]]></category>
		<category><![CDATA[functional tests]]></category>
		<category><![CDATA[groovy]]></category>
		<category><![CDATA[Java]]></category>
		<category><![CDATA[page objects]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[selenium]]></category>
		<category><![CDATA[testing]]></category>
		<category><![CDATA[web driver]]></category>

		<guid isPermaLink="false">http://luizfar.wordpress.com/?p=322</guid>
		<description><![CDATA[Note: this is a long post! Not long ago I wrote about functional tests and the page objects pattern in Aqris&#8217; blog. Back then we at Aqris got all very excited about page objects as they were the solution we were looking for to solve our problems on maintaining our functional test code base, which [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=luizfar.wordpress.com&amp;blog=438511&amp;post=322&amp;subd=luizfar&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p>Note: this is a long post!</p>
<p>Not long ago I wrote about <a href="http://www.aqris.com/display/DEV/2010/02/05/PageObjects+and+how+to+make+functional+tests+fun!" target="_blank">functional tests and the page objects pattern in Aqris&#8217; blog</a>. Back then we at Aqris got all very excited about page objects as they were the solution we were looking for to solve our problems on maintaining our functional test code base, which by that time was based on a set of messy helpers that nobody really understood completely.</p>
<p>Before page objects, whenever a developer in our team had to write a test that had to perform an action no other test already performed, he or she would go through that bunch of helpers trying to figure out which one was the helper that should perform such an action. The result of this approach was that the team couldn&#8217;t get to a full agreement on what was each helper&#8217;s responsibilities. Everybody agreed that the code was not good, but each person had their point of view on why.</p>
<p>We first learned about the pattern <a href="http://code.google.com/p/selenium/wiki/PageObjects" target="_blank">here</a>, when reading about WebDriver (now <a href="http://code.google.com/p/selenium/" target="_blank">Selenium 2</a>). Page objects came as the solution to separate the different actions our helpers contained in an extremely simple and even obvious way that nobody in our team had previously thought: simply creating a specialized helper for each page of the application.</p>
<p>It is in fact so simple that I still wonder how come we didn&#8217;t think of that before&#8230; I think that we were too busy trying to figure out how to deal with the helpers we had, and we were too used to have them that way. I guess that&#8217;s because the previous project we had worked on (and the first one we had a strong movement towards automated tests with Selenium) was a web app based on <em>only one single page</em> with lots of GWT-based ajax.</p>
<p>Anyway, excuses aside, we started using page objects and it was great! But then other doubts started to come up: how to deal with parts of a page that are common to many pages &#8211; for instance a side navigation bar? How to make our tests more readable? Should our page objects use selenium directly? If yes, how to resolve the selenium dependency? Can the page objects just encapsulate the locators for the html elements instead? Should page objects be responsible for the tests assertions too, depending on xUnit&#8217;s API, or should they just provide verification methods that would be used by our tests&#8217; code itself?</p>
<p>I think that these are questions that may or may not have a straight correct answer, but here I will write a bit of what worked well for us or for me later on when dealing with that.<br />
To do that I think we can write a test for an imagined scenario.<br />
Let&#8217;s try that!</p>
<p>
<h2>The problem</h2>
<p></p>
<p>Let&#8217;s say that we have a test case to test the following hypothetical scenario:</p>
<p>We have a hypothetical book store application.<br />
Every page in the application has a navigation bar on the side.<br />
An user goes to our application home page and, by clicking on a link on the navigation bar, she goes to a page to search for books.<br />
On the search books page she fills in a search form, entering &#8220;Tolkien&#8221; in the author field and &#8220;Rings&#8221; in the title field, and submits the form.<br />
She is then redirected to a search result page that contains a list of books along with the same search form already filled in with the same search data she had entered &#8211; in this case, &#8220;Tolkien&#8221; in the author field and &#8220;Rings&#8221; in the title field.</p>
<p>We want to assure that, given our test data, the search result contains the book &#8216;The Return Of The King&#8217;.<br />
We also want to assure that the search form in the result page still has the data she had previously entered.</p>
<p>The code solution after the jump <img src='http://s0.wp.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p><span id="more-322"></span></p>
<h2>The code</h2>
<p></p>
<p>(I will write the code in Groovy here, because it is similar to Java, which is a widely known language, and because with Groovy we can do some nice things to make the code more readable. But you can use whichever language you prefer.)</p>
<p>Usually we create a Page class which all other page objects classes inherit from.<br />
It keeps a reference to our selenium instance, so that all our pages know how to manipulate their elements and do all the dirty job for us, exposing higher-level actions to our tests. Plus, if the HTML elements on our page changes, we know exactly what part of our test code base has to be updated.</p>
<p>So our Page class may look like this:</p>
<p><pre class="brush: groovy;">
class Page {
  Selenium selenium   
  Page(Selenium selenium, String title) {
    this.selenium = selenium

    /*
     * In Groovy, selenium.title is the same as selenium.getTitle()
     */
    if (title != selenium.title) {
      throw new IllegalStateException(&quot;Should be on page ${title} but I am actually on page ${selenium.title}&quot;)
    }
  }
}
</pre></p>
<p>The Page constructor receives the expected page title, which is passed by the subclasses that will inherit from it.<br />
Then we check if the title of the page in which selenium currently is corresponds to the title of the page our test should be. This is a nice way to ensure the test is navigating through the pages following the flow we expect it to.<br />
It is a bit annoying to pass the selenium reference to every page we create, but I think that it is worth it anyway.</p>
<p>I also like to create Button, Link and Form classes, as usually we have to deal with all of them and specially because from the interactions with these elements our test navigates among the pages, so they can create new page objects for us too.</p>
<p>They may look something like this:</p>
<p><pre class="brush: groovy;">
class Button {
  Selenium selenium
  String locator

  Button(Selenium selenium, String locator) {
    this.selenium = selenium
    this.locator = locator
  }

  void click() {
    // sometimes Groovy allows us to omit the parenthesis!
    selenium.click locator
  }
}
</pre></p>
<p>The locator attribute is used by selenium to find the button in the page&#8217;s HTML structure. It might be an ID, an xpath expression, etc.<br />
I made Link an abstract class because each link will bring a different page to the user:</p>
<p><pre class="brush: groovy;">
abstract class Link {
  Selenium selenium
  String locator
  
  Link(Selenium selenium, String locator) {
    this.selenium = selenium
    this.locator = locator
  }

  Page click() {
    selenium.click(locator)
    return linkedPage // the same as 'return getLinkedPage()'
  }

  abstract Page getLinkedPage()
}
</pre></p>
<p>Similarly, forms are also represented by abstract classes. They know how to fill themselves with data using selenium, and which page to show after they are submitted:</p>
<p><pre class="brush: groovy;">
abstract class Form {
  Selenium selenium

  Form(Selenium selenium) {
    this.selenium = selenium
  }

  Page submit() {
    submitButton.click()
    return pageAfterSubmit
  }
  
  abstract void fill()

  abstract Button getSubmitButton()

  abstract Page getPageAfterSubmit()
}
</pre></p>
<p>With this we can start to write the classes specific to our scenario.</p>
<p>As all pages in our application contain the navigation menu, we can modify the Page class so that it contains an instance to a NavigationMenu object, which will keep the details of the actions related to the menu:</p>
<p><pre class="brush: groovy;">
class Page {
  Selenium selenium
  NavigationMenu navMenu
  
  Page(Selenium selenium, String title) {
    this.selenium = selenium
    if (title != selenium.title) {
      throw new IllegalStateException(&quot;Should be on page $title but I am actually on page $selenium.title&quot;)
    }
    navMenu = new NavigationMenu(selenium)
  }
}

class NavigationMenu {
  Selenium selenium

  NavigationMenu(Selenium selenium) {
    this.selenium = selenium
  }

  Link getSearchBooksLink() {
    return new Link(selenium, &quot;link=Seach Books&quot;) {
      Page getLinkedPage() {
        return new SearchBooksPage(selenium)
      }
    }
  }
}
</pre></p>
<p>Notice that the navigation menu has a searchBooksLink, which when clicked returns an object for the search page.<br />
The HomePage class that represents our application&#8217;s first page is as simple as it gets:</p>
<p><pre class="brush: groovy;">
class HomePage extends Page {

  static final String URL = &quot;http://localhost:8080/my_book_store&quot;

  HomePage(Selenium selenium) {
    super(selenium, &quot;My Book Store&quot;)
  }
}
</pre></p>
<p>So we can start to write our test code:</p>
<p><pre class="brush: groovy;">
def testShouldFindTolkienBooks() {
  selenium.open HomePage.URL
  def homePage = new HomePage(selenium)
  def searchPage = page.navMenu.searchBooksLink.click()
}
</pre></p>
<p>The SearchBooksPage class contains our SearchBooksForm which inherits from Form:</p>
<p><pre class="brush: groovy;">
class SearchBooksPage extends Page {
  Form searchForm
  SearchBooksPage(Selenium selenium) {
    super(selenium, &quot;My Book Store - Search Books&quot;)
    searchForm = new SearchBooksForm(selenium)
  }
}
</pre></p>
<p>All fields from our form become properties in our form class, in this case, author and title.<br />
We will use these properties to fill in the form.</p>
<p><pre class="brush: groovy;">
class SearchBooksForm extends Form {

  private static final String AUTHOR_LOCATOR = &quot;//form[@name='search_books']/input[@name='author']&quot;
  private static final String TITLE_LOCATOR = &quot;//form[@name='search_books']/input[@name='title']&quot;

  String title
  String author

  SearchBooksForm(Selenium selenium) {
    super(selenium)
  }

  void fill() {
    selenium.typeKeys(AUTHOR_LOCATOR, author)
    selenium.typeKeys(TITLE_LOCATOR, title)
  }

  Button getSubmitButton() {
    return new Button(selenium, &quot;//form[@name='search_books']/input[@type='submit']&quot;)
  }

  Page getPageAfterSubmit() {
    return new SearchResultPage(selenium)
  }

  String getAuthorFieldValue() {
    return selenium.getValue(AUTHOR_LOCATOR)
  }

  String getTitleFieldValue() {
    return selenium.getValue(TITLE_LOCATOR)
  }
}
</pre></p>
<p>Here is the SearchResultPage class:</p>
<p><pre class="brush: groovy;">
class SearchResultPage extends Page {

  Form searchForm
  
  SearchResultPage(Selenium selenium) {
    super(selenium, &quot;My Book Store - Search Result&quot;)
    this.searchForm = new SearchBooksForm(selenium)
  }
  
  def getResult() {
    def books = []
    def i = 1
    while (selenium.isElementPresent(&quot;//div[@id='books']/div[@class='book'][${i}]/span[@class='title']/text()&quot;)) {
      books &lt;&lt; selenium.getText(&quot;//div[@id='books']/div[@class='book'][${i}]/span[@class='title']/text()&quot;)
      i++
    }
    return books
  }
}
</pre></p>
<p>so now we can finish our test code:</p>
<p><pre class="brush: groovy;">
class MyBookStoreTests extends SeleneseTestCase {
  def testShouldFindTolkienBooks() {
    selenium.open HomePage.URL
    def homePage = new HomePage(selenium)
    def searchPage = page.navMenu.searchBooksLink.click()
    searchPage.searchForm.author = &quot;Tolkien&quot;
    searchPage.searchForm.title = &quot;Rings&quot;
    searchPage.searchForm.fill()
    def resultPage = searchPage.searchForm.submit()
  
    assertTrue resultPage.result.contains(&quot;The Lord Of The Rings: The Return Of The King&quot;)
    assertEquals &quot;Tolkien&quot; resultPage.searchForm.authorFieldValue
    assertEquals &quot;Rings&quot; resultPage.searchForm.titleFieldValue
  }
}
</pre></p>
<p>But this test code is still not very good.. it could be more readable and all these accesses like a.b.c.d() bum me out.<br />
So let&#8217;s improve it a bit.</p>
<h2>Improvements</h2>
<p></p>
<p>First of all, let&#8217;s try to get rid of that selenium reference there inside of our test code.<br />
To do that we can create our own extension of SeleneseTestCase with some utility methods and then make our test cases extend from it instead.</p>
<p>As we are using Groovy, we can create a method that creates the first page object our test needs for us, it can do it based on its class name and set its selenium dependency too. Let&#8217;s call this method <code>visit</code>, this way we can write on our test <code>visit(HomePage)</code>.</p>
<p><pre class="brush: groovy;">
class MyBookStoreSeleneseTestCase extends SeleneseTestCase {
  Page visit(Class clazz) {
    assert Page.isAssignableFrom(clazz)
    assert Page.URL
    selenium.open clazz.URL
    return clazz.newInstance(selenium)
  }
}
</pre></p>
<p>And our test becomes:</p>
<p><pre class="brush: groovy;">
class MyBookStoreTests extends MyBookStoreSeleneseTestCase {
  def testShouldFindTolkienBooks() {
    def homePage = visit(HomePage)
    def searchPage = page.navMenu.searchBooksLink.click()
    searchPage.searchForm.author = &quot;Tolkien&quot;
    searchPage.searchForm.title = &quot;Rings&quot;
    searchPage.searchForm.fill()
    def resutPage = searchPage.searchForm.submit()
  
    assertTrue resultPage.result.contains(&quot;The Lord Of The Rings: The Return Of The King&quot;)
    assertEquals &quot;Tolkien&quot; resultPage.searchForm.authorFieldValue
    assertEquals &quot;Rings&quot; resultPage.searchForm.titleFieldValue
  }
}
</pre></p>
<p>Usually in spoken language the verbs come first, so we can improve our custom SeleneseTestCase class by adding some dummy methods just to make our test more readable, delegating the actions to our objects:</p>
<p><pre class="brush: groovy;">
class MyBookStoreSeleneseTestCase extends SeleneseTestCase {
  Page visit(Class clazz) {
    assert Page.isAssignableFrom(clazz)
    assert Page.URL
    selenium.open &quot;http://localhost:8080/my_book_store&quot;
    return clazz.newInstance(selenium)
  }
  Page clickOn(Link link) {
    return link.click()
  }
  Page fillAndSubmit(Form form) {
    form.fill()
    return form.submit()
  }
}

class MyBookStoreTests extends MyBookStoreSeleneseTestCase {
  def testShouldFindTolkienBooks() {
    def homePage = visit(HomePage)
    def searchPage = clickOn(page.navMenu.searchBooksLink)
    searchPage.searchForm.author = &quot;Tolkien&quot;
    searchPage.searchForm.title = &quot;Rings&quot;
    def resutPage = fillAndSubmit(searchPage.searchForm)
  
    assertTrue resultPage.result.contains(&quot;The Lord Of The Rings: The Return Of The King&quot;)
    assertEquals &quot;Tolkien&quot; resultPage.searchForm.authorFieldValue
    assertEquals &quot;Rings&quot; resultPage.searchForm.titleFieldValue
  }
}
</pre></p>
<p>This test, as all other Selenium tests I have seen so far, only interacts with one page at a time. So we don&#8217;t need to have different variables for each page. We can have a single &#8216;<code>page</code>&#8216; variable and use it everywhere, something like this:</p>
<p><pre class="brush: groovy;">
    ...
    def page = visit(HomePage)
    page = clickOn(page.navMenu.searchBookLink)
    ...
</pre></p>
<p>Then we can move the page variable to an attribute of MyBookStoreSeleneseTestCase and avoid having all those assignments:</p>
<p><pre class="brush: groovy;">
class MyBookStoreSeleneseTestCase extends SeleneseTestCase {
  Page page
  Page visit(Class clazz) {
    assert Page.isAssignableFrom(clazz)
    assert Page.URL
    selenium.open clazz.URL
    page = clazz.newInstance(selenium)
    return page
  }
  Page clickOn(Link link) {
    page = link.click()
    return page
  }
  Page fillAndSubmit(Form form) {
    form.fill()
    page = form.submit()
    return page
  }
}

class MyBookStoreTests extends MyBookStoreSeleneseTestCase {
  def testShouldFindTolkienBooks() {
    visit HomePage
    clickOn page.navMenu.searchBooksLink
    page.searchForm.author = &quot;Tolkien&quot;
    page.searchForm.title = &quot;Rings&quot;
    fillAndSubmit page.searchForm
  
    assertTrue page.result.contains(&quot;The Lord Of The Rings: The Return Of The King&quot;)
    assertEquals &quot;Tolkien&quot; page.searchForm.authorFieldValue
    assertEquals &quot;Rings&quot; page.searchForm.titleFieldValue
  }
}
</pre></p>
<p>Then we can actually get rid of the references to &#8216;<code>page</code>&#8216; altogether from our test code. To do it we implement property and method missing in our MyBookStoreSeleneseTestCase, in a way that if we try to access a method or property that it doesn&#8217;t have, it looks for them in the page object:</p>
<p><pre class="brush: groovy;">
class MyBookStoreSeleneseTestCase extends SeleneseTestCase {
  // all that we already had plus:
  def methodMissing(String method, args) {
    page.invokeMethod method, args
  }
  def propertyMissing(String name) {
    page[name]
  }
}

class MyBookStoreTests extends MyBookStoreSeleneseTestCase {
  def testShouldFindTolkienBooks() {
    visit HomePage
    clickOn navMenu.searchBooksLink
    searchForm.author = &quot;Tolkien&quot;
    searchForm.title = &quot;Rings&quot;
    fillAndSubmit searchForm
  
    assertTrue result.contains(&quot;The Lord Of The Rings: The Return Of The King&quot;)
    assertEquals &quot;Tolkien&quot; searchForm.authorFieldValue
    assertEquals &quot;Rings&quot; searchForm.titleFieldValue
  }
}
</pre></p>
<p>To finish, we can improve the filling out of the form using Groovy&#8217;s <code>with</code> method and use <a href="http://code.google.com/p/hamcrest/" target="_blank">Hamcrest</a> to write our assertions.</p>
<p>First we have to overwrite the method <code>with</code> in our Form class.<br />
Groovy&#8217;s &#8216;<code>with</code>&#8216; method is very handy but it doesn&#8217;t return the own object. More about it <a href="http://jira.codehaus.org/browse/GROOVY-3976" target="_blank">here</a>.<br />
So we just add the following code to our Form class:</p>
<p><pre class="brush: groovy;">
class Form {
  // ....
  def with(Closure c) {
    super.with(c)
    return this
  }
}
</pre></p>
<p>And then our test code can be written as:</p>
<p><pre class="brush: groovy;">
class MyBookStoreTests extends MyBookStoreSeleneseTestCase {
  def testShouldFindTolkienBooks() {
    visit HomePage
    clickOn navMenu.searchBooksLink
    fillAndSubmit searchForm.with {
      author = &quot;Tolkien&quot;
      title = &quot;Rings&quot;
    }
  
    assertThat result, hasItem(&quot;The Lord Of The Rings: The Return Of The King&quot;)
    assertThat searchForm.authorFieldValue, is(equalTo(&quot;Tolkien&quot;))
    assertThat searchForm.titleFieldValue, is(equalTo(&quot;Rings&quot;))
  }
}
</pre></p>
<p>Much better uh?!</p>
<p>You can get the full code (with some workarounds to get it working without a real application) <a href="http://dl.dropbox.com/u/4214679/PageObjectsExample.zip">here</a>.</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/luizfar.wordpress.com/322/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/luizfar.wordpress.com/322/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/luizfar.wordpress.com/322/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/luizfar.wordpress.com/322/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/luizfar.wordpress.com/322/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/luizfar.wordpress.com/322/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/luizfar.wordpress.com/322/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/luizfar.wordpress.com/322/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/luizfar.wordpress.com/322/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/luizfar.wordpress.com/322/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/luizfar.wordpress.com/322/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/luizfar.wordpress.com/322/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/luizfar.wordpress.com/322/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/luizfar.wordpress.com/322/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=luizfar.wordpress.com&amp;blog=438511&amp;post=322&amp;subd=luizfar&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://luizfar.wordpress.com/2010/09/29/page-objects/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/b0d5ae0affa30208e7bab51ee423e61e?s=96&#38;d=monsterid&#38;r=X" medium="image">
			<media:title type="html">Luiz Fernando Ribeiro</media:title>
		</media:content>
	</item>
		<item>
		<title>How to switch off Dell XPS 1340&#8242;s discrete video card on Linux</title>
		<link>http://luizfar.wordpress.com/2010/06/29/how-to-switch-off-xps1340-discrete-video-card-on-linux/</link>
		<comments>http://luizfar.wordpress.com/2010/06/29/how-to-switch-off-xps1340-discrete-video-card-on-linux/#comments</comments>
		<pubDate>Tue, 29 Jun 2010 01:27:40 +0000</pubDate>
		<dc:creator>Luiz Perdido</dc:creator>
				<category><![CDATA[English]]></category>
		<category><![CDATA[Linux]]></category>

		<guid isPermaLink="false">http://luizfar.wordpress.com/?p=304</guid>
		<description><![CDATA[Finally, after months, the discrete video card of my Dell Studio XPS 1340 is switched off on Linux. The story&#8230; This laptop comes with two video cards and what nvidia calls Hybrid SLI. The idea is very nice : one video card is integrated to the motherboard and is always switched on. The other one [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=luizfar.wordpress.com&amp;blog=438511&amp;post=304&amp;subd=luizfar&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p>Finally, after months, the discrete video card of my Dell Studio XPS 1340 is switched off on Linux.</p>
<h3>The story&#8230;</h3>
<p></p>
<p>This laptop comes with two video cards and what nvidia calls Hybrid SLI.<br />
The idea is very nice : one video card is integrated to the motherboard and is always switched on.<br />
The other one is a discrete card and is manually switched on by the user when he/she wants more graphical processing power, consuming more power. This sounds interesting for laptop owners, who may want to save the battery as much as possible.<br />
When the discrete card is on, both cards work together combined to provide a more powerful graphical processing device.<br />
Even tough the idea is nice, the implementation is not, and nvidia even gave up moving on with the technology. If I am not mistaken, I read somewhere that they claim the driver implementation to control the devices together is very complicated.<br />
The drivers for Windows Vista and Windows 7 work quite well, and is maintained by the laptop vendors, in this case, Dell.</p>
<p>Now if you use Linux&#8230;:<br />
nvidia provides their proprietary driver for Linux, which is very nice, but allows us to use only the integrated card.<br />
At first it was ok for me, as I didn&#8217;t have the need to use the power of both cards together on Linux anyway. The problem is: the Linux driver does not switch the discrete card off. Yeap, that&#8217;s right, you can&#8217;t use the discrete card, but it is always on consuming power. Ironic, uh?! The result is: on Linux my laptop always runs hotter and the battery lasts shorter than on Windows.</p>
<p>I researched for a long time when I bought the laptop, but I couldn&#8217;t find a way to get the discrete card off.<br />
One good piece of news is that the <a href="http://nouveau.freedesktop.org/wiki/" target="_blank">project nouveau</a>, an open source driver for nvidia cards, plans to add full support to switching these cards on/off at will. The driver is still under heavy development though&#8230; and many features are not yet implemented.</p>
<p>So just a few days I received an update from the sites I have been following related to the subject.<br />
avilella has been running a great blog about switchable graphics on Linux, and quickly updating it on every new details that comes up. The address to his blog is: <a href="http://linux-hybrid-graphics.blogspot.com/" target="_blank">http://linux-hybrid-graphics.blogspot.com/</a></p>
<p>There is also a bug report on Launchpad regarding the same problem: <a href="https://bugs.launchpad.net/ubuntu/+source/xorg-server/+bug/312756" target="_blank">https://bugs.launchpad.net/ubuntu/+source/xorg-server/+bug/312756</a><br />
On this bug report page they are collecting information about all different laptops with switchable cards, so that they can work on a solution for everyone.<br />
But just yesterday a member from Launchpad named drphd found an ACPI method that can be called on the Dell XPS 1340 to disable the graphic card.</p>
<p>I just made a small modification on the module that avilella posted <a href="http://linux-hybrid-graphics.blogspot.com/2010/06/acpicall-simple-way-to-call-acpi.html" target="_blank">here</a>, making it specific for the Dell XPS 1340, by using the method indicated by drphd. And, thanks to these guys, we can now switch the discrete card off.</p>
<h3>The solution</h3>
<p></p>
<p>So, to use it, just download these two files:</p>
<p><a href="http://dl.dropbox.com/u/4214679/linux/xps_nv/Makefile" target="_blank">Makefile</a><br />
<a href="http://dl.dropbox.com/u/4214679/linux/xps_nv/xps_nv.c" target="_blank">xps_nv.c</a></p>
<p>Before compiling the module, run: <code>lspci -v</code><br />
You should see the information for both cards, including the IRQ and the kernel modules related to them.<br />
Now place those two files inside the same folder, cd to this folder and run:</p>
<pre>make
sudo cp xps_nv.ko /lib/modules/`uname -r`/kernel/
sudo depmod
sudo modprobe xps_nv
</pre>
<p>If you run <code>lspci -v</code> again, you should see the detailed information only for the integrated card. On my machine the output after the module is loaded is:</p>
<pre>
02:00.0 VGA compatible controller: nVidia Corporation G98 [GeForce 9200M GS] (rev ff) (prog-if ff)
	!!! Unknown header type 7f

03:00.0 VGA compatible controller: nVidia Corporation C79 [GeForce 9400M G] (rev b1)
	Subsystem: Dell Device 0271
	Flags: bus master, fast devsel, latency 0, IRQ 23
	Memory at aa000000 (32-bit, non-prefetchable) [size=16M]
	Memory at b0000000 (64-bit, prefetchable) [size=256M]
	Memory at cc000000 (64-bit, prefetchable) [size=32M]
	I/O ports at 5000 [size=128]
	[virtual] Expansion ROM at c0000000 [disabled] [size=128K]
	Capabilities:
	Kernel driver in use: nvidia
	Kernel modules: nvidia-current, nvidiafb, nouveau
</pre>
<p>To make sure that the module is loaded every time you boot your laptop, edit the file /etc/modules and add, in the end, a new line with the text:</p>
<pre>xps_nv</pre>
<p>As you see, I have the Dell XPS 1340 with a GeForce 9400M G and a GeForce 9200M GS.<br />
But I think that the same solution should also work for people who have the combination GeForce 9400M G + GeForce 210M.</p>
<p>After the module is loaded the laptop runs a bit cooler, it uses around 4W less power and the battery is estimated to last around 30-50 minutes longer.</p>
<p>Remember that every time you install a new kernel you will have to re-compile and re-install the module.</p>
<p>Cheers!</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/luizfar.wordpress.com/304/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/luizfar.wordpress.com/304/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/luizfar.wordpress.com/304/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/luizfar.wordpress.com/304/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/luizfar.wordpress.com/304/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/luizfar.wordpress.com/304/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/luizfar.wordpress.com/304/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/luizfar.wordpress.com/304/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/luizfar.wordpress.com/304/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/luizfar.wordpress.com/304/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/luizfar.wordpress.com/304/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/luizfar.wordpress.com/304/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/luizfar.wordpress.com/304/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/luizfar.wordpress.com/304/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=luizfar.wordpress.com&amp;blog=438511&amp;post=304&amp;subd=luizfar&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://luizfar.wordpress.com/2010/06/29/how-to-switch-off-xps1340-discrete-video-card-on-linux/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/b0d5ae0affa30208e7bab51ee423e61e?s=96&#38;d=monsterid&#38;r=X" medium="image">
			<media:title type="html">Luiz Fernando Ribeiro</media:title>
		</media:content>
	</item>
		<item>
		<title>Vim for the win :)</title>
		<link>http://luizfar.wordpress.com/2010/05/16/vim-for-the-win/</link>
		<comments>http://luizfar.wordpress.com/2010/05/16/vim-for-the-win/#comments</comments>
		<pubDate>Sun, 16 May 2010 11:33:29 +0000</pubDate>
		<dc:creator>Luiz Perdido</dc:creator>
				<category><![CDATA[English]]></category>
		<category><![CDATA[Linux]]></category>
		<category><![CDATA[Programming]]></category>

		<guid isPermaLink="false">http://luizfar.wordpress.com/?p=268</guid>
		<description><![CDATA[I have been using Vim a lot in the last few weeks, to edit CSS and HTML files. It might seem a bit awkward at first but once you get used to it, it becomes great! What helps a lot too is to configure Vim properly to make it perfect for use. Vim and Vi [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=luizfar.wordpress.com&amp;blog=438511&amp;post=268&amp;subd=luizfar&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p>I have been using Vim a lot in the last few weeks, to edit CSS and HTML files. It might seem a bit awkward at first but once you get used to it, it becomes great!<br />
What helps a lot too is to configure Vim properly to make it perfect for use.<br />
Vim and Vi configurations are done by setting variables using :set or by editing the file .vimrc in your home folder.<br />
I will share here my Vim configurations and some of the commands I use more often. It also works as a Vim cheat sheet for my own future reference.</p>
<p>So, my ~/.vimirc looks like this:</p>
<pre>set tabstop=2 expandtab autoindent smartindent shiftwidth=2 number</pre>
<p>&nbsp;<br />
Here&#8217;s what each of them does</p>
<table>
<tr>
<th>Configuration</th>
<th>Effect</th>
</tr>
<tr>
<td>tabstop=N</td>
<td>Sets the tab size to N spaces. The default is 4.</td>
</tr>
<tr>
<td>expandtab</td>
<td>Tabs are expanded, when you press tab, N characters will be inserted instead of a tab character (where N is the amount of spaces set for tabstop).</td>
</tr>
<tr>
<td>autoindent</td>
<td>Will keep the same indentation when you press enter in the end of a line.</td>
</tr>
<tr>
<td>smartindent</td>
<td>Vim will try to automatically detect indentations. For instance, if you go to a new line and enter a &#8216;}&#8217;, Vim will go back one indentation level.</td>
</tr>
<tr>
<td>shiftwidth=N</td>
<td>The number of spaces used for one indentation level.</td>
</tr>
<tr>
<td>number</td>
<td>Shows lines numbers.</td>
</tr>
</table>
<p>And here are some of the commands I use more often:</p>
<table>
<tr>
<th>Command</th>
<th>What it does..</th>
</tr>
<tr>
<td style="width:9em;">:N</td>
<td>goes to line N</td>
</tr>
<tr>
<td>/foo</td>
<td>searches for &#8216;foo&#8217;</td>
</tr>
<tr>
<td>:%s/foo/bar/g</td>
<td>replaces all occurrences of &#8216;foo&#8217; with &#8216;bar&#8217; in the current file</td>
</tr>
<tr>
<td>:s/foo/bar/g</td>
<td>Same as above, but replaces only on the current line</td>
</tr>
<tr>
<td>:s/foo/bar/gc</td>
<td>Same as above, but prompts for confirmation before replacing each occurrence of &#8216;foo&#8217;. Can also be used with &#8216;%&#8217; to replace all occurrences in the file</td>
</tr>
<tr>
<td>Shif + G</td>
<td>goes to the end of the file</td>
</tr>
<tr>
<td>v</td>
<td>enter select mode</td>
</tr>
<tr>
<td>&lt;&lt;</td>
<td>moves the current line one indentation level backwards;</td>
</tr>
<tr>
<td>&gt;&gt;</td>
<td>moves the current line one indentation level forward;</td>
</tr>
<tr>
<td>yy</td>
<td>copies current line to the buffer</td>
</tr>
<tr>
<td>dd</td>
<td>removes the current line out and place it on the buffer</td>
</tr>
<tr>
<td>p</td>
<td>pastes the text from the buffer on the next line</td>
</tr>
</table>
<p>Also remember that many of these commands may be used with a different number of lines.<br />
For instance, pressing 1, 0, d, d will delete he next 10 lines.</p>
<p>Any other cool commands for Vim? Let me know on the comments!</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/luizfar.wordpress.com/268/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/luizfar.wordpress.com/268/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/luizfar.wordpress.com/268/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/luizfar.wordpress.com/268/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/luizfar.wordpress.com/268/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/luizfar.wordpress.com/268/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/luizfar.wordpress.com/268/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/luizfar.wordpress.com/268/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/luizfar.wordpress.com/268/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/luizfar.wordpress.com/268/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/luizfar.wordpress.com/268/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/luizfar.wordpress.com/268/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/luizfar.wordpress.com/268/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/luizfar.wordpress.com/268/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=luizfar.wordpress.com&amp;blog=438511&amp;post=268&amp;subd=luizfar&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://luizfar.wordpress.com/2010/05/16/vim-for-the-win/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/b0d5ae0affa30208e7bab51ee423e61e?s=96&#38;d=monsterid&#38;r=X" medium="image">
			<media:title type="html">Luiz Fernando Ribeiro</media:title>
		</media:content>
	</item>
		<item>
		<title>Grails: Separating the database access from the domain classes</title>
		<link>http://luizfar.wordpress.com/2010/05/08/grails-separating-the-database-access-from-the-domain-classes/</link>
		<comments>http://luizfar.wordpress.com/2010/05/08/grails-separating-the-database-access-from-the-domain-classes/#comments</comments>
		<pubDate>Sat, 08 May 2010 16:05:00 +0000</pubDate>
		<dc:creator>Luiz Perdido</dc:creator>
				<category><![CDATA[English]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[ddd]]></category>
		<category><![CDATA[grails]]></category>
		<category><![CDATA[groovy]]></category>
		<category><![CDATA[metaclass]]></category>
		<category><![CDATA[repository]]></category>

		<guid isPermaLink="false">http://luizfar.wordpress.com/?p=212</guid>
		<description><![CDATA[Some days ago I started working on my second project involving Groovy &#38; Grails. Grails is my first contact with server side development with dynamic languages, and, despite some small problems (mostly due to the fact that the framework is still not so mature compared to others out there), I really, really enjoy it. One [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=luizfar.wordpress.com&amp;blog=438511&amp;post=212&amp;subd=luizfar&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p>Some days ago I started working on my second project involving Groovy &amp; Grails.<br />
Grails is my first contact with server side development with dynamic languages, and, despite some small problems (mostly due to the fact that the framework is still not so mature compared to others out there), I really, really enjoy it.</p>
<p>One of the things that I like is how using Groovy&#8217;s dynamic features the framework injects <a href="http://www.grails.org/DomainClass+Dynamic+Methods" target="_blank">database access technicalities</a> into our domain classes.<br />
The domain is therefore smart enough to retrieve/update its relationships and even to find/update itself, all without the need to pass around repositories dependencies whatsoever, or to force the domain classes to extend any other classes.</p>
<p>But sometimes we need to write HQL (or criterias) ourselves, and then in our first project we ended up having some domain classes quite bloated with custom queries and a lot of other database related operations mixed with pure domain-specific logic operations.</p>
<p>Something like this:<br />
<pre class="brush: groovy;">
  class Book {
    // properties, mappings, constraints
    // domain methods

    def findAllBooksFromTheSameAuthor() {
      return findAll(&quot;some HQL&quot;)
    }

    def findSimilarPurchasedBooks() {
      return findAll(&quot;some HQL&quot;)
    }
  }
</pre></p>
<p>This code is just a silly example to illustrate the problem.<br />
Of course we could have used Grails&#8217; dynamic finders for those queries too, but we would be externalizing the internals of our domain class so we like this approach of adding custom query methods better.<br />
One thing we didn&#8217;t like though, is that we had many methods like the ones above, mixed with the domain logic and properties.<br />
So we decided to move these methods somewhere else and inject them into our domain classes, like Grails does with its dynamic generic finders.</p>
<p>A very nice way to do it seemed to be using Groovy&#8217;s Delegate annotation, having something similar to:</p>
<p><pre class="brush: groovy;">
  class Book {
    @Delegate BookQueries bookQueries = new BookQueries(this)

    // properties
    // mappings, constraints, domain methods
  }

  class BookQueries {
    Book book

    BookQueries(Book book) {
      this.book = book
    }

    def findAllBooksFromTheSameAuthor() {
      return Book.findAll(&quot;some HQL&quot;)
    }

    def findSimilarPurchasedBooks() {
      return Book.findAll(&quot;some HQL&quot;)
    }
  }

</pre></p>
<p>We have to pass the book object to BookQueries because we are gonna need its properties to build our queries.<br />
For instance, we need its author to find all books from the same author.<br />
And using the delegate we can call methods from BookQueries with a Book object:</p>
<p><pre class="brush: groovy;">
  book.findSimilarPurchasedBooks()

</pre></p>
<p>The only problem with this is that we also had some static methods to first retrieve our objects.<br />
These are queries that are not related to any relationship or similarities between objects, so they are static methods in the Book class:</p>
<p><pre class="brush: groovy;">
  static def findBestSellersInMonth() {
    findAll(&quot;some HQL&quot;)
  }

</pre></p>
<p>The problem is that static methods are not delegated.</p>
<p>In our project we decided to scrap the @Delegate for good, move all custom query methods to BookQueries, including the static ones, transform them into closures and inject them manually, one by one, into the Book class during the application BootStrap, using <a href="http://groovy.codehaus.org/ExpandoMetaClass" target="_blank">Groovy&#8217;s Expando metaclass</a>.</p>
<p>But I didn&#8217;t really like this approach.<br />
I think I&#8217;d rather keep the @Delegate, and then move the static methods to a BookRepository class:</p>
<p><pre class="brush: groovy;">
  class BookRepository {
    def findBestSellersInMonth() {
      return Book.findAll(&quot;some HQL&quot;)
    }
  }

</pre></p>
<p>It might seem as a step backwards.. &#8220;why do you need repositories if you have your rich domain that can retrieve itself?&#8221;<br />
But the static modifier already tells that these methods don&#8217;t belong to our domain *objects*.<br />
They are there to initialize the objects, retrieve them from somewhere (the database).<br />
And, well, isn&#8217;t this part of the definition of repositories? =P</p>
<h4>Update &#8212; May 10th &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;</h4>
<p>Peter Ledbrook suggested using <a href="http://grails.org/doc/latest/ref/Domain%20Classes/namedQueries.html" target="_blank">Grails&#8217; named queries</a> (see comments). It looks indeed very nice, but we really wanted to move our queries out of our domain class, to make it more readable and, well, prettier <img src='http://s0.wp.com/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> </p>
<p>With the named queries we could move a static block containing the static queries to the BooksQueries class and assign this static block to a static nameQueries block in the Book class, and this would import the static queries.</p>
<p>Today I was messing with this a bit more and I realized that I could just inject the static methods into my domain class from inside my delegate itself.<br />
It&#8217;s so simple I don&#8217;t understand how come I didn&#8217;t think about that before <img src='http://s0.wp.com/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /><br />
So, if you don&#8217;t like the repository approach, you can always have something like:</p>
<p><pre class="brush: groovy;">
  class Book {
    @Delegate BookQueries bookQueries = new BookQueries(this)
    // all Book properties, constraints, domain methods, etc
  }

  class BookQueries {

    static {
      BookQueries.metaClass.methods.each {
        if (it.static) {
          Book.metaClass.static.&quot;$it.name&quot; = owner.&amp;amp;&quot;$it.name&quot;
        }
      }
    }

    Book book

    BookQueries(Book book) {
      this.book = book
    }

    def findAllBooksFromTheSameAuthor() {
      return Book.findAll(&quot;some HQL&quot;)
    }

    static def findBestSellersInMonth() {
      return Book.findAll(&quot;some HQL&quot;)
    }
  }

</pre></p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/luizfar.wordpress.com/212/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/luizfar.wordpress.com/212/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/luizfar.wordpress.com/212/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/luizfar.wordpress.com/212/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/luizfar.wordpress.com/212/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/luizfar.wordpress.com/212/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/luizfar.wordpress.com/212/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/luizfar.wordpress.com/212/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/luizfar.wordpress.com/212/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/luizfar.wordpress.com/212/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/luizfar.wordpress.com/212/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/luizfar.wordpress.com/212/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/luizfar.wordpress.com/212/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/luizfar.wordpress.com/212/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=luizfar.wordpress.com&amp;blog=438511&amp;post=212&amp;subd=luizfar&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://luizfar.wordpress.com/2010/05/08/grails-separating-the-database-access-from-the-domain-classes/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/b0d5ae0affa30208e7bab51ee423e61e?s=96&#38;d=monsterid&#38;r=X" medium="image">
			<media:title type="html">Luiz Fernando Ribeiro</media:title>
		</media:content>
	</item>
		<item>
		<title>Cool CSS tab menu</title>
		<link>http://luizfar.wordpress.com/2010/04/17/cool-css-tab-menu/</link>
		<comments>http://luizfar.wordpress.com/2010/04/17/cool-css-tab-menu/#comments</comments>
		<pubDate>Sat, 17 Apr 2010 10:02:09 +0000</pubDate>
		<dc:creator>Luiz Perdido</dc:creator>
				<category><![CDATA[English]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[effect]]></category>
		<category><![CDATA[hover]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[menu]]></category>
		<category><![CDATA[style]]></category>
		<category><![CDATA[tab]]></category>
		<category><![CDATA[tabs]]></category>

		<guid isPermaLink="false">http://luizfar.wordpress.com/?p=170</guid>
		<description><![CDATA[As you can see, lately I have been playing quite a bit with CSS. So I recently made a CSS tab menu that I thought was worth sharing. It looks like this: And it is quite simple. All that is needed is an image with the looks of the tabs, when unselected and when selected/hovered. [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=luizfar.wordpress.com&amp;blog=438511&amp;post=170&amp;subd=luizfar&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p>As you can see, lately I have been playing quite a bit with CSS.<br />
So I recently made a CSS tab menu that I thought was worth sharing. It looks like this:</p>
<div id="attachment_174" class="wp-caption alignnone" style="width: 412px"><a href="http://luizfar.files.wordpress.com/2010/04/screenshot1.png"><img src="http://luizfar.files.wordpress.com/2010/04/screenshot1.png?w=600" alt="" title="CSS Menu"   class="size-full wp-image-174" /></a><p class="wp-caption-text">CSS Tab Menu</p></div>
<p>And it is quite simple.<br />
All that is needed is an image with the looks of the tabs, when unselected and when selected/hovered.<br />
I used this:</p>
<div id="attachment_176" class="wp-caption alignnone" style="width: 160px"><a href="http://luizfar.files.wordpress.com/2010/04/menu.png"><img src="http://luizfar.files.wordpress.com/2010/04/menu.png?w=150&#038;h=12" alt="" title="CSS menu background" width="150" height="12" class="size-thumbnail wp-image-176" /></a><p class="wp-caption-text">tabs background image</p></div>
<p>You can edit the image to get whatever looks you want.<br />
So, now we only need our html and css:</p>
<p>* Please notice that I used a &#8216;header&#8217; container for the menu and I set some style attributes for position/etc, but you would probably change it to whatever your container needs.</p>
<p>HTML fragment:<br />
<pre class="brush: xml;">
&lt;div class=&quot;header&quot;&gt;
  &lt;ul class=&quot;menu&quot;&gt;
   &lt;li&gt;
     &lt;a href=&quot;&quot;&gt;&lt;span&gt;Option 1&lt;/span&gt;&lt;/a&gt;
   &lt;/li&gt;
   &lt;li class=&quot;selected&quot;&gt;
     &lt;a href=&quot;&quot;&gt;&lt;span&gt;Option 2&lt;/span&gt;&lt;/a&gt;
   &lt;/li&gt;
   &lt;li&gt;
     &lt;a href=&quot;&quot;&gt;&lt;span&gt;Option 3&lt;/span&gt;&lt;/a&gt;
   &lt;/li&gt;
   &lt;li&gt;
     &lt;a href=&quot;&quot;&gt;&lt;span&gt;Option 4&lt;/span&gt;&lt;/a&gt;
   &lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;
</pre></p>
<p>CSS:<br />
<pre class="brush: css;">
.header {
  width: 100%;
  height: 80px;
  background: #003366;
  position: relative;
}

.menu {
  margin: 0px;
  list-style: none;
  position: absolute;
  bottom: 0px;
  right: 20px;
}

.menu li {
  float: left;
  margin-left: -12px;
}

.menu li a {
  float: left;
  height: 24px;
  background: url('img/menu.png') no-repeat;
  position: relative;
  text-decoration: none;
  color: #003366;
  cursor: pointer;
}

.menu li a span {
  float: left;
  padding: 6px 31px 0 35px;
}

.selected a,
.menu li a:hover {
  background: url('img/menu.png') 0px -25px no-repeat !important;
  z-index: 10;
}

.menu li a:hover {
  z-index: 11;
  color: #99cc00;
}
</pre></p>
<p>Notice that the image has to be placed in a folder called img with the name menu.png.</p>
<p>And that&#8217;s it! <img src='http://s1.wp.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/luizfar.wordpress.com/170/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/luizfar.wordpress.com/170/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/luizfar.wordpress.com/170/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/luizfar.wordpress.com/170/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/luizfar.wordpress.com/170/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/luizfar.wordpress.com/170/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/luizfar.wordpress.com/170/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/luizfar.wordpress.com/170/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/luizfar.wordpress.com/170/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/luizfar.wordpress.com/170/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/luizfar.wordpress.com/170/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/luizfar.wordpress.com/170/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/luizfar.wordpress.com/170/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/luizfar.wordpress.com/170/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=luizfar.wordpress.com&amp;blog=438511&amp;post=170&amp;subd=luizfar&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://luizfar.wordpress.com/2010/04/17/cool-css-tab-menu/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/b0d5ae0affa30208e7bab51ee423e61e?s=96&#38;d=monsterid&#38;r=X" medium="image">
			<media:title type="html">Luiz Fernando Ribeiro</media:title>
		</media:content>

		<media:content url="http://luizfar.files.wordpress.com/2010/04/screenshot1.png" medium="image">
			<media:title type="html">CSS Menu</media:title>
		</media:content>

		<media:content url="http://luizfar.files.wordpress.com/2010/04/menu.png?w=150" medium="image">
			<media:title type="html">CSS menu background</media:title>
		</media:content>
	</item>
		<item>
		<title>How to center a floating HTML div with variable width</title>
		<link>http://luizfar.wordpress.com/2010/04/15/how-to-center-a-floating-html-div-with-variable-width/</link>
		<comments>http://luizfar.wordpress.com/2010/04/15/how-to-center-a-floating-html-div-with-variable-width/#comments</comments>
		<pubDate>Thu, 15 Apr 2010 15:34:10 +0000</pubDate>
		<dc:creator>Luiz Perdido</dc:creator>
				<category><![CDATA[English]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[alert]]></category>
		<category><![CDATA[center]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[notification]]></category>

		<guid isPermaLink="false">http://luizfar.wordpress.com/?p=112</guid>
		<description><![CDATA[Hi! I know I have been away from the blog for a long time, but I decided to wipe off a little of dust and write some small things that I have been doing here. Recently I have been working and learning lots of new and cool things, some of them are simple, some are [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=luizfar.wordpress.com&amp;blog=438511&amp;post=112&amp;subd=luizfar&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p>Hi! I know I have been away from the blog for a long time, but I decided to wipe off a little of dust and write some small things that I have been doing here.<br />
Recently I have been working and learning lots of new and cool things, some of them are simple, some are not so trivial, but many of them could be quite useful for a bunch of people out of there, including myself! I mean, I decided to restart writing small tutorials on some simple things that I usually do, like the one I wrote about<a href="http://luizfar.wordpress.com/2006/11/23/instalando-o-jdk-6-rc-no-linux-e-waters-no-brasil/"> how to install the new JDK release candidate on Linux</a>.<br />
Ever since I wrote it, many times I had to come back here to recheck one or another detail of some command, when I wanted to install a version of JDK that was not available on the Ubuntu repositories.</p>
<p>So, today I will write down how to center a floating div with variable width&#8230;. A what? <del datetime="2010-04-15T14:54:19+00:00">Portuguese</del> English please!</p>
<p>Nowadays it is very common to see on websites a small notification on the top of the screen, like those:</p>
<div id="attachment_114" class="wp-caption alignnone" style="width: 310px"><a href="http://luizfar.files.wordpress.com/2010/04/notification.png"><img class="size-medium wp-image-114" title="notification" src="http://luizfar.files.wordpress.com/2010/04/notification.png?w=300&#038;h=89" alt="" width="300" height="89" /></a><p class="wp-caption-text">Notification</p></div>
<p>I first saw these things on Google applications like GMail, but they are very nice anyways, because they avoid the use of (grr!) pop-ups (grr!) when there&#8217;s the need to notify the user about something. That&#8217;s probably why they are becoming each time more popular.</p>
<p>Anyway, this is basically a div or a span, centered on the screen or whatever other container contains it.<br />
Usually to center something it is enough to use</p>
<p><pre class="brush: css;">margin: 0 auto;</pre></p>
<p>But in this case we don&#8217;t know how wide the div should be, as it depends on the text it will show, which is dynamically provided by some programming language.<br />
So my notification div class does not have a &#8216;width&#8217; attribute and is displayed as an inline element:</p>
<p><pre class="brush: css;">
.notification {
  display: inline;
}</pre></p>
<p>In this case setting the margin to auto won&#8217;t work, so what to do?<br />
I wanted to center my notification div in relation to the screen, so I created two divs:</p>
<p><pre class="brush: xml;">
&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;notification&quot;&gt;
   Here goes my notification message
  &lt;/div&gt;
&lt;/div&gt;
</pre></p>
<p>And my CSS:<br />
<pre class="brush: css;">
.container {
  position: absolute;
  top: 0px;
  width: 100%;
  text-align: center;
}

.notification {
  display: inline;
}
</pre></p>
<p>Basically we insert the notification div inside a container that occupies the whole area in which the div is to be centered, and set text-align: center.</p>
<p>I know it is very simple but it is not always obvious <img src='http://s0.wp.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/luizfar.wordpress.com/112/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/luizfar.wordpress.com/112/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/luizfar.wordpress.com/112/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/luizfar.wordpress.com/112/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/luizfar.wordpress.com/112/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/luizfar.wordpress.com/112/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/luizfar.wordpress.com/112/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/luizfar.wordpress.com/112/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/luizfar.wordpress.com/112/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/luizfar.wordpress.com/112/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/luizfar.wordpress.com/112/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/luizfar.wordpress.com/112/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/luizfar.wordpress.com/112/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/luizfar.wordpress.com/112/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=luizfar.wordpress.com&amp;blog=438511&amp;post=112&amp;subd=luizfar&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://luizfar.wordpress.com/2010/04/15/how-to-center-a-floating-html-div-with-variable-width/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/b0d5ae0affa30208e7bab51ee423e61e?s=96&#38;d=monsterid&#38;r=X" medium="image">
			<media:title type="html">Luiz Fernando Ribeiro</media:title>
		</media:content>

		<media:content url="http://luizfar.files.wordpress.com/2010/04/notification.png?w=300" medium="image">
			<media:title type="html">notification</media:title>
		</media:content>
	</item>
		<item>
		<title>Cowboy Bebop Original Soundtrack</title>
		<link>http://luizfar.wordpress.com/2008/07/11/cowboy-bebop-original-soundtrack/</link>
		<comments>http://luizfar.wordpress.com/2008/07/11/cowboy-bebop-original-soundtrack/#comments</comments>
		<pubDate>Fri, 11 Jul 2008 15:54:32 +0000</pubDate>
		<dc:creator>Luiz Perdido</dc:creator>
				<category><![CDATA[Music]]></category>
		<category><![CDATA[Portuguese]]></category>
		<category><![CDATA[Anime]]></category>
		<category><![CDATA[Cowboy Bebop]]></category>
		<category><![CDATA[Mai Yamane]]></category>
		<category><![CDATA[Música]]></category>
		<category><![CDATA[Soundtrack]]></category>
		<category><![CDATA[The Seatbelts]]></category>
		<category><![CDATA[trilha sonora]]></category>
		<category><![CDATA[Yoko Kanno]]></category>

		<guid isPermaLink="false">http://luizfar.wordpress.com/?p=101</guid>
		<description><![CDATA[Era uma vez um desenho japonês em que a história se passava no futuro e contava a história de caçadores de recompensa a bordo de uma nave chamada Bebop. Pra quem não sabe, Bebop é uma subdivisão do Jazz, e essa é só a primeira das referências musicais presente no anime. Misturando batalhas espaciais com [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=luizfar.wordpress.com&amp;blog=438511&amp;post=101&amp;subd=luizfar&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p>Era uma vez um desenho japonês em que a história se passava no futuro e contava a história de caçadores de recompensa a bordo de uma nave chamada Bebop.</p>
<div id="attachment_102" class="wp-caption aligncenter" style="width: 406px"><a href="http://luizfar.files.wordpress.com/2008/07/cowboybebop.jpg"><img class="size-full wp-image-102" src="http://luizfar.files.wordpress.com/2008/07/cowboybebop.jpg?w=600" alt="Cowboy Bebop"   /></a><p class="wp-caption-text">Cowboy Bebop</p></div>
<p>Pra quem não sabe, Bebop é uma subdivisão do Jazz, e essa é só a primeira das referências musicais presente no anime.</p>
<p>Misturando batalhas espaciais com artes marciais e faroeste, o desenho trás uma trilha sonora de dar inveja a qualquer trilogia famosa de Hollywood, com forte influência de blues, jazz e rock&#8217;n roll.</p>
<p>A composicão da trilha sonora foi liderada por <a href="http://en.wikipedia.org/wiki/Yoko_Kanno" target="_blank">Yoko Kanno</a>, uma japonesinha batuta conhecida por suas criacões musicais para games, animes e filmes. Ela reuniu alguns músicos e formaram uma banda para a criação da trilha-sonora. Batizaram a banda de <a href="http://en.wikipedia.org/wiki/The_Seatbelts" target="_blank">The Seatbelt</a> (Os cintos-de-segurança), pois brincavam que deveriam usar cintos-de-segurança para permanecerem seguros durante as sessões de <em>jam</em>.</p>
<p>A banda não tinha um cantor principal, mas contaram com a participação de vocalistas como <a href="http://en.wikipedia.org/wiki/Steve_Conte" target="_blank">Steve Conte</a>, <a href="http://en.wikipedia.org/wiki/Mai_Yamane" target="_blank">Mai Yamane</a>, <a href="http://en.wikipedia.org/wiki/Gabriela_Robin" target="_blank">Gabriela Robin</a> (há rumores de que esta seja na verdade um pseudônimo da próprio Yoko Kanno) e outros para as músicas não-instrumentais.</p>
<p>A banda se reuniu mais uma vez em 2004 para criar a trilha-sonora do segundo <em>game</em> baseado em Cowboy Bebop.</p>
<p>Clique em &#8216;Leia o resto deste post&#8217; para poder ouvir algumas músicas da trilha.</p>
<p><span id="more-101"></span></p>
<p>Chega de conversa e vamos ao que interessa:</p>
<p>Don&#8217;t Bother None, por The Seatbelts e Mai Yamane:<br />
<span style="text-align:center; display: block;"><a href="http://luizfar.wordpress.com/2008/07/11/cowboy-bebop-original-soundtrack/"><img src="http://img.youtube.com/vi/mWEARapBMhg/2.jpg" alt="" /></a></span></p>
<p>Digging My Potato:<br />
<span style="text-align:center; display: block;"><a href="http://luizfar.wordpress.com/2008/07/11/cowboy-bebop-original-soundtrack/"><img src="http://img.youtube.com/vi/6x9LxtddBdU/2.jpg" alt="" /></a></span></p>
<p>Doggy Dogs III:<br />
<!--YouTube Error: bad URL entered--></p>
<p>Call Me, Call Me, por The Seatbelts e Steve Conte:<br />
<span style="text-align:center; display: block;"><a href="http://luizfar.wordpress.com/2008/07/11/cowboy-bebop-original-soundtrack/"><img src="http://img.youtube.com/vi/aILwUUL3EVw/2.jpg" alt="" /></a></span></p>
<p>The Real Folk Blues, por The Seatbelts e Mai Yamane:<br />
<!--YouTube Error: bad URL entered--></p>
<p>See you in space, Cowboys!</p>
<br /><img alt="" border="0" src="http://feeds.wordpress.com/1.0/categories/luizfar.wordpress.com/101/" /> <img alt="" border="0" src="http://feeds.wordpress.com/1.0/tags/luizfar.wordpress.com/101/" /> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/luizfar.wordpress.com/101/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/luizfar.wordpress.com/101/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/luizfar.wordpress.com/101/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/luizfar.wordpress.com/101/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/luizfar.wordpress.com/101/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/luizfar.wordpress.com/101/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/luizfar.wordpress.com/101/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/luizfar.wordpress.com/101/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/luizfar.wordpress.com/101/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/luizfar.wordpress.com/101/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/luizfar.wordpress.com/101/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/luizfar.wordpress.com/101/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/luizfar.wordpress.com/101/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/luizfar.wordpress.com/101/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=luizfar.wordpress.com&amp;blog=438511&amp;post=101&amp;subd=luizfar&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://luizfar.wordpress.com/2008/07/11/cowboy-bebop-original-soundtrack/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/b0d5ae0affa30208e7bab51ee423e61e?s=96&#38;d=monsterid&#38;r=X" medium="image">
			<media:title type="html">Luiz Fernando Ribeiro</media:title>
		</media:content>

		<media:content url="http://luizfar.files.wordpress.com/2008/07/cowboybebop.jpg" medium="image">
			<media:title type="html">Cowboy Bebop</media:title>
		</media:content>
	</item>
	</channel>
</rss>
