Peter works on the web!

Visual Studio Redesign: lose the designers, add a command prompt?

peter.nospam@nospam.twototango.be (Peter) — Sun, 26 Jul 2009 08:37:54 -0500

There has been a clear shift in the way I use Visual Studio lately. Visual studio has a lot of built-in panels to help you develop the next killer application. There are a lot of panels I hardly ever use. Most of my time I spend, not quite surprising, in the text editor editing code. As for the other panels I may be using about 10% of all available options. Windows like the Server Explorer, Document Outline, Object Browser, I don’t think I ever opened them while developing. And I didn’t even mention the designers yet. I am a full-time web developer but I never open the HTML designer.

So I would like to propose a Visual Studio redesign, let’s just throw out all the designers and unnecessary windows (like when editing a css file lose the CSS properties, Manage Styles, CSS Outline windows) and go back to basics. Build a really good text editor. Once everything is stripped to the bare minimum add a panel which gives you direct access to the command prompt. I got this idea from a Ruby on Rails editor called RadRails. You can generate controllers, models, etc… from a panel within the IDE.

Why a command prompt? I have noticed that developing isn’t centralized in Visual Studio any longer. Next to Visual Studio I always have a command prompt open. By using tools like JavaScriptMVC and LESS, I now use the command prompt very frequently. By running small commands from the command prompt snippets of code are generated for you. And although code generation is considered evil by some, there is a big difference between Microsoft code generation and those tools. They generate code for you but give you the opportunity to change it without any effort. The Microsoft way of code generation, the part I can remember because I try to use it as less as possible, is saying: do not touch our generated piece of art, you are not worthy. And if you dare to change it, it will smack you in the face for doing so. With code generated by Microsoft I constantly have the feeling that I’m not in control.

So my proposal is, stop building a huge beast with gazillion panels which tackles it all. Create a light weight text editor, let’s call it Textmate for Windows, and give users the possibility to add the tools they want to use in addition to that text editor by accessing them through the command prompt directly in the IDE.

I’ve googled around for a solution but the only posts that came near were posts which let you launch a command prompt from within Visual Studio. Not really what I was looking for. Let’s hope the Visual Studio Team has implemented this option in Visual Studio 2010…

Compressing and combining files with JavaScriptMVC

peter.nospam@nospam.twototango.be (Peter) — Sat, 18 Jul 2009 08:36:27 -0500

This is the third article on JavaScriptMVC, so if you’re interested in more these are my previous posts on the subject:

In these previous posts I’ve shown you the MVC capabilities of the framework, now I would like to look into its combining and compressing features. By now you should be familiar with the js.bat command file which comes with JavaScriptMVC. If this doesn’t ring a bell, please read my previous posts or go to the JavaScriptMVC website.

Justin, one of the co-authors of JavaScriptMVC, mentioned in the comments of my previous posts that reducing HTTP requests is the number one performance enhancement recommendation by the Yahoo performance team. They even have a list of best practices for speeding up your website. JavaScriptMVC can help you combining your javascript files, external files as well as files generated by the framework. It’s actually very easy to do. To reference your JavaScriptMVC project in your HTML page you use the following code:

<script language="javascript" type="text/javascript" src="../../jmvc/include.js?tab_manager,development"></script>

At this moment JavaScriptMVC is running in development mode, which means no combined files, no compressing. It loads up the files in your browser just as you created them. This can be easily checked with Firebug. Load up your page which references the javascript in Firefox and enable the Firebug Script tag. If you open up the list of script files you’ll get something like this:

All files should be in this list: controllers, external resources, … This comes in very handy when developing and debugging. But lots of different files are loaded so performance wise this is not the way to go. Fortunately we have JavaScriptMVC to help us. You can load the production version of your code by using the following HTML code:

<script language="javascript" type="text/javascript" src="../../jmvc/include.js?tab_manager,production"></script>

Notice that the ‘development’ parameter has been changed to ‘production’. That’s pretty easy huh? Now let’s reload the webpage in Firefox and see what the result is.

Quite a surprise! We went from twenty or more javascript file to only two files being loaded: index.js and production.js, both are provided by JavaScriptMVC. But how and when is the production.js file created? It is done manually using the js.bat command file once again. You can compress and combine all your files using this command:

js apps/{application_name}/compress.js

So if we take the example of the previous post, to generate the production file for our Tab Manager:

js apps/tab_manager/compress.js

This will combine and compress all your files referenced by JavaScriptMVC into the production.js file. Whether it’s a controller, a model or an external resource it doesn’t matter. Even jquery itself is combined into this file when referenced as a resource in your JavaScriptMVC application. It doesn’t matter if the original file already has been minified, this all just works.

As you can see the framework offers you a great way to enhance the performance of your web application without much effort.

Getting the element that has the focus via JavaScript

peter.nospam@nospam.twototango.be (Peter) — Sat, 11 Jul 2009 10:04:34 -0500

This is one of those things that you only need on very specific occasions. I needed to get the element that has the focus on a page. Went to Google and found the answer somewhere deep into a forumthread. So for future reference here goes:
Internet Explorer supports the document.activeElement property which gives exactly what I was looking for: the element that has the focus. Because you always have to be careful about javascript properties that are described on a MSDN page, they could be Internet Explorer only, I decided to write a little test to see if it works in the major browsers. I tested this in the following browsers (and corresponding platforms):

Internet Explorer 6 - Windows
Internet Explorer 7 - Windows
Internet Explorer 8 - Windows
Mozilla Firefox 3.5 – Mac
Mozilla Firefox 3.5 – Windows
Google Chrome – Windows (only works for textbox and select elements)
Safari – Mac (only works for textbox and select elements)
Safari – Windows (only works for textbox and select elements)

For the Webkit browsers (Safari, Chrome) it appears that the document.activeElement property will only be set if the element that has the focus is a textbox or a select element. Where the other browsers also report if a checkbox or a radiobutton has the focus.

This was my testing HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <link rel="stylesheet" href="c/style.css" media="screen,projection" type="text/css" />
        <script src="j/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script src="j/index.js" type="text/javascript"></script>
    </head>
    <body>
        <input type="text" id="text-box" /><br />
        <input type="checkbox" id="checkbox" />
        <label for="checkbox">checkbox</label><br />
        <select id="select">
            <option value="1">Testing</option>
        </select><br />
        <p>
            Current active element: <span id="current-active-element"></span>
        </p>
    </body>
</html>

With a little bit of javascript attached to it:

$(function()
{
    setInterval("updateActiveElement();", 500);
});

function updateActiveElement()
{
    $('#current-active-element').text($(document.activeElement).attr('id'));
}

This test page will write out the ID of the active element every 500 milliseconds so we can clearly see which element has the focus.

James Goodfellow has written a post about the property which is now, according to his post, part of the HTML 5 specification. For browsers that don’t support the property, James provides a workaround.

If you want to test it yourself, I uploaded the test page.

Tags from Technorati: html,focus

The MVC in JavaScriptMVC

peter.nospam@nospam.twototango.be (Peter) — Mon, 06 Jul 2009 15:54:09 -0500

DISCLAIMER: I recently started using JavaScriptMVC and got to like it a lot. These blogposts are a way for me to document my learning process of the framework. There is the possibility that I misinterpreted certain principles or abusing the framework at some points. So don’t be afraid to ask questions or set things straight in the comments.

In my last post I outed my love for JavaScriptMVC. I got the remark of James that a library that consolidates javascript files doesn’t make it MVC and that is absolutely correct. But JavaScriptMVC is much more then just javascript file consolidation. In this post I would like to show the MVC capabilities of the JavaScript framework and how a typical application built with JavaScriptMVC is structured.

When you download the framework and unzip it to the folder of your choice you get the following file structure:

We will touch some of the folders and files in this structure. The js.bat is a very important one because we will be generating a lot of the files via this command file. As an exercise I will build a fairly simple tabbed interface using JavaScriptMVC. I’ve put the result of this tutoria online. The initial mockup of the application looks like this:

Before we can start writing code, we have to create an application. You can do this by navigating in a command prompt to the folder where you unzipped the JavaScriptMVC bytes and executing the following command:

js jmvc\generate\app tab_manager

The batch command has generated a couple of application files. This batch file will also be used to generate models, controllers, views and much more. Before we go any further let’s digg into how JavaSciptMVC uses the MVC pattern. From their website we get the following explanation for models, views and controllers:

Model
wrap an application’s data layer, this is done in two ways:
- request data from and interacting with services.
- Wrap service data with a domain-specific representation

Controller
event delegation that helps logically organize your event handlers

View
Is used as a templating library, it builds html strings from JSON

While using the framework I took the liberty to use parts a little different. Controllers I use as defined for event delegation. But models I don’t use solely for requesting data from a service. I try to make my models as fat as possible and also do things like UI manipulation. Because I use JavaScriptMVC in combination with ASP.NET my usage of the View has been limited. I will be mainly speaking about the Models and Controllers given that my *.aspx (or *.ascx) page is my actual view.

When generating the application, JavaScriptMVC generated an index.html page for us which automatically includes the necessary javascript. We’ll be using that page to create our tab control. I changed the HTML a bit, this is the end result:

<html>
    <head></head>
    <script language="javascript" type="text/javascript" src="../../jmvc/include.js?tab_manager,development"></script>    
    <style type="text/css">
        li
        {
            border:solid 1px #000;
            float:left;
            margin-right:5px;    
            padding:10px;
        }
        
        li.selected
        {
            background-color:#000;
        }
        
        li.selected a
        {
            color:#fff;
        }
        
        p, ul
        {
            margin:0;
            width:300px;
        }
        
        p
        {
            border:solid 1px #000;
            height:200px;
            padding:10px;
        }
        
        ul
        {
            list-style-type:none;
            height:41px;
            padding:0;
            width:300px;
        }
    </style>
    <body>
        <ul id="tab_manager">
            <li class="selected"><a href="#tab-1">Tab 1</a></li>
            <li><a href="#tab-2">Tab 2</a></li>
            <li><a href="#tab-3">Tab 3</a></li>
        </ul>
        <p id="tab-1">Tab 1 selected</p>
        <p id="tab-2" style="display:none;">Tab 2 selected</p>
        <p id="tab-3" style="display:none;">Tab 3 selected</p>
    </body>
</html>

Some basic CSS rules and HTML to represent the tabbed control. I think this code speaks for itself, let’s create the javascript that is needed to make this control work. In order to respond to events that occur we first need a controller that will do the event delegation. So we use the js.bat command batch to generate a controller, this is the command:

js jmvc/generate/controller tab_manager

In our controllers folder we now have a tab_manager_controller.js which we will use to hook into the events that occur on our html page. We can hook into different sort of events and all the important ones are supported. So in order to respond to a click on one of the tabs we add the following method to the controller.

TabManagerController = MVC.Controller.extend('tab_manager',
/* @Static */
{},
/* @Prototype */
{
   'li click': function(params)
   {
        new Tab().select(params.element);  
        params.event.preventDefault();
   } 
}
);

Let’s reflect over this code. This code defines a TabManagerController class which controls an element that has the id ‘tab_manager’, the id that our ul-tag has. There is one function in the controller that will respond to a click event on a li-tag. Notice how they use CSS selectors to define the event handlers. No real rocket science here for anyone who already is familiar with JavaScript and CSS selectors. Now we could write all necessary code in the controller, but in order to keep my JavaScript code maintainable I would like to use the controllers as a delegation mechanism to my models. This is somewhat different from what the guys of JavaScriptMVC are recommending to use models for. I try to get my models to reflect the different concepts in my application. So we want to generate a Tab model to show and hide the different tabs. Again we use the batch we are already familiar with to generate the model:

js jmvc/generate/model ajax Tab

This will generate a Tab.js file under the models directory. Now we can add the necessary methods to this class in order to manipulate a certain tab. The nice thing about this is that it resides in its own class which has a name that reflects the actual UI object it will manipulate. You might have noticed the ‘ajax’ parameter we have provided. This is simply because a model has to be generated with a certain data type (json_p, ajax, xml_rest, …). We will not be using one of the types in our code so this can be ignored for now. This is how the implementation of the Tab model looks like:

/**
 *
 */
Tab = MVC.Model.Ajax.extend('Tab',
/* @Static */
{
},
/* @Prototype */
{
    getTabContentSelector: function($tab)
    {
        return $tab.find('a').attr('href');
    },

    hideTabContent: function(selector)
    {
        $(selector).css('display', 'none');
    },
    
    showTabContent: function(selector)
    {
        $(selector).css('display', 'block');
    },

    select: function(tabToShow)
    {
        var $currentSelectedTab = $('li.selected');
        
        this.hideTabContent(this.getTabContentSelector($currentSelectedTab));
        $currentSelectedTab.removeClass('selected');
        
        var $tabToShow = $(tabToShow);
        
        $tabToShow.addClass('selected');
        this.showTabContent(this.getTabContentSelector($tabToShow));
    }
}
);

Notice that I use jQuery in the mix. jQuery and JavaScriptMVC are actually very compatible. You do have to include jQuery as a resource in order to be able to use it, more on that later. There are four functions in the Tab model, the most imporant one is the select function which takes a tab (which is actually an li-element) as argument. The content to show is currently hidden in the page, each tab has a corresponding p-tag which holds the data for that tab, but this could be replaced by an Ajax call in order to request some data for a specific tab.

The last thing I have to mention is the tab_manager.js file in the app folder. That file looks like this:

include.resources('jquery-1.3.2.min');
include.engines();
include.plugins(
    'controller','controller/scaffold',
    'view','view/helpers',                         
    'dom/element',
    'io/ajax',
    'model/json_rest','model/xml_rest'
    );

include(function(){ //runs after prior includes are loaded
  include.models('Tab');
  include.controllers('tab_manager');
  include.views();
});

This is actually the main file of our application which determines what resources, plugins, models and controllers are loaded. As you can see the jquery file, the tab_manager controller and the Tab model are present in this file. Don’t forget to add new models and controllers to this file, otherwise they will not be loaded and executed.

Because this post is already rather lengthy I will leave it here and give you some room to expirement with the code. I know there are a lot of concepts that are left unexplained but I’m planning on writing a few more posts to go into further detail into certain concepts of the framework. As always if you have any remarks the comments are still open and free.

To finish would like to end with a brief overview of the important files and folders so you have a nice overview of where to find everything we used in this tutorial.

apps
    tab_manager.js                  general application file to load models, controllers and resources
    index.html                      file which holds the necessary html code, used for testing purposes
controllers
    tab_manager_controller.js       controller which responds on events coming from the tab manager
models
    Tab.js                          model which represent a tab
resources
    jquery-1.3.2.min.js             jquery file

Source code of this article
Result of this tutorial

Tags from Technorati: JavaScriptMVC,JavaScript

Finally found what I have been looking for: JavaScriptMVC

peter.nospam@nospam.twototango.be (Peter) — Mon, 22 Jun 2009 03:29:14 -0500

I'm very passionate about the code I write, and with the coming of jQuery I really began to love Javascript. But the Javascript I wrote was more of the procedural kind. I tried to split it up per page or user control but it still felt bad. For pages with a lot of interaction the JavaScript files grew very quickly over a couple hundred LOC. There is the possibility to split these up, but the problem that then arises is that the browser launches a request for each javascript file. And most (older) browsers have a suprising low amount of simultaneous request (I thought it was around 2 or 3, it was certainly below 5). So each file I added to make my application more maintainable resulted in a slower application. Not a good situation to be in.

I was constantly on the lookout for something that could easily minify and merge all my JavaScript files and still keep maintainability while developing. I had read solutions of people who had a build task that did this for them. But that seemed like a pretty vulnerable system. The build script has to create a new file on a certain location and has to change your pages so they include the correct javascript file (the newly generated one). So I lived with the pain.

Until I read about JavaScriptMVC on Ajaxian and decided to check it out. What is JavaScriptMVC? I'll quote from their site:

JavaScriptMVC is a framework that brings methods to the madness of JavaScript development. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.

So it uses some conventions and the MVC pattern to give you the ability to manage your JavaScript code. But the biggest thing I like so far is the possibility to run in different modes (development, test and production) and if you run in production all your javascript including your external libraries like jQuery get minified and combined into one javascript file. Yes that's right even if you have a dozen javascript files, after minifying them you'll only have one file called production.js left. The big advantage is that the browser only has to do one request to the server to load all of the javascript. You know what that means, faster loading times!

If you write a lot of JavaScript code, check out JavascriptMVC right now. I'll be writing more details about the framework in the coming weeks as I'm still in the process of learning it.

Tags from Technorati: Javascript,JavascriptMVC,maintainability

Book review: jQuery in Action

peter.nospam@nospam.twototango.be (Peter) — Sat, 06 Jun 2009 14:51:07 -0500

I started reading this book about 6 months ago. After reading it half way through I stopped and start reading a newly purchased book. The reason that I stopped reading was because I was excited and impatient to start reading the new book, it's a problem I have every time I purchase a new book. After finishing some books I realized that jQuery in Action was still lying around, and because the new project I'm working on depends heavily on jQuery, I decided to pick up the book where I left off and finish it.

If you use jQuery in your day job or you are interested in JavaScript development in general this book is really for you. I read this book after several months of jQuery development experience and still learned a lot about the framework.

The authors of the book recommend reading the appendices first before getting into the real stuff. They are a very good start for people who are not that familiar with JavaScript and get you up to speed on some essentials of the language like the JavaScript Object and how functions and closures work. These concepts are explained in a very clear way.

After the appendices you dive right into the jQuery goodness with the explanation of the pure basics. Selectors are a very important part which is handled in detail. Via events, animations and effects they show the basic utility functions that are built-in in jQuery. Although the whole book is a very interesting read chapter 7 really pops out and shows how you can write your own plugins, which can result in a lot of code reuse when used properly. The book is finished with how to do Ajax calls with jQuery and some of the best jQuery plugins.

I think it's quite clear by now that this book is a good read for all levels: beginner, intermediate and advanced. I've learned a lot about jQuery that made my job a lot easier. And I think that's the reason why we read technical books, broaden your horizon and learn how to use framework and tools more efficient. The authors certainly succeeded with this book.

To close I would like to list my 5 favorites things I learned or learned more about while reading the book:

Selectors, although I already knew a bunch about supported selectors I learned some new ones that I didn't know of
animate() that enables you to create your own custom animations and gives you endless possibilities
$.grep() can be used to filter arrays
$.post, $.get, $.ajax, ... all the different features in jQuery that support ajax calls to the server and a reference of all the different options.
Live Query plugin, which can monitor if certain events occur on elements which match a certain selector. The good thing about this plugin is when adding new items to the page that match the selector, you don't have to bind the events for this new item. The plugin takes care of that.

Tags from Technorati: jquery,javascript,book

Sequentially download multiple files (with jQuery)

peter.nospam@nospam.twototango.be (Peter) — Thu, 16 Apr 2009 16:02:22 -0500

On my previous job, I was working together with a colleague on a file transfer application which lived in the browser. We were up -and downloading multiple files at the same time and needed a rich user experience. To ensure the best experience when uploading we turned to swfupload, it's free and I highly recommend it. But download was another story. The user experience for downloading files is actually something for which we entirely depend on the browser. It's not that there is a lot of choice. You click a link to a file which the browser can't open then you get a save dialog box and the browser shows you a progress bar. All that is out of the hands of the developer you just put the link there or stream the file directly to the client and let the browser do his thing.

But we offered the user multiple files and he could determine which files he wanted to download. This is a simplified mockup of how the screen looked.

If a user wanted to download the files he could click the links one by one and then save them. But how to make the "Download selected files" button work. After some googling I found that there are numerous solutions for upload but didn't find any decent solution for a 'richer' download experience. And after thinking it through it makes sense, because downloading requires access to the hard disk of the user. This would be a serious risk to allow javascript to write to a certain folder on disk.

So we were stuck, some suggested of zipping all the zips to one file but we didn't want to burden the end user with the extra effort of unzipping. I got a hint on a forum post (can't remember which one sorry for that) that if you pointed the source attribute of an iframe to the file the browser would offer it as a download. So the first attempt to to this was with the following HTML code:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="j/jquery.js" type="text/javascript"></script>
        <script src="j/index.js" type="text/javascript"></script>
    </head>
    <body>
        <h1>Download files</h1>
        <iframe src="" id="download-iframe" style="display:none;" />
    </body>
</html>

And the following JavaScript was executed when the document was loaded.

$(function()
{
    $('#download-iframe').attr('src', 'file1.zip');
    $('#download-iframe').attr('src', 'file2.zip');
    $('#download-iframe').attr('src', 'file3.zip');
});

You can see I'm using some jQuery magic. If you haven't used it yet, stop reading and go check it out. Did I already mention I'm a fan?

But there is a problem with the code. Only the last file is offered as download. I guessed, I'm not 100 % sure and please correct me if I'm wrong, that the problem was that the statements were executed directly after each other. So I used a little timeout to see if that was the solution to our problem, like so:

$(function()
{
    var fileIndex = 0;
    var fileArray = [ 'file1.zip', 'file2.zip', 'file3.zip' ];

    $('#download-iframe').attr('src', fileArray[fileIndex]);
    fileIndex++;
    
    var interval = setInterval(function()
    {
        if(fileIndex < fileArray.length)
        {
            $('#download-iframe').attr('src', fileArray[fileIndex]);
            fileIndex++;
        }
        else
        {
            clearInterval(interval);
        }
    }, 
    100);
});

As you can see the code is not that much longer, I now have an array of the filenames (could be extracted from a list of checkboxes) and offer the first file as download. Then I set an interval that fires every 100 milliseconds which offers the next file as a download. Once all files have been handled, the interval is cleared and we're done.

Now the user gets prompted with 3 download dialog boxes. I know, it sucks that he still has to click three times to save each download individually. But if the user sets a default download location the files are automatically saved to that location and he doesn't have to click for each file that gets downloaded. It's certainly not perfect and from a user experience standpoint it still kinda sucks ... but it works. If you have another idea of solving this problem, please feel free to elaborate in the comments.

Tags from Technorati: JavaScript,download,jQuery

One tool to test them all: Microsoft Expression Web SuperPreview

peter.nospam@nospam.twototango.be (Peter) — Mon, 23 Mar 2009 16:20:40 -0500

A new tool was launched by the Expression Web team at MIX09. Multibrowser testing these days is still a real pain in the ass. But as a web standards fanatic I want my websites to work cross browser. Unfortunately this implies installing a handful of browsers on your desktop. To top it off you need additional tools to test all versions of Internet Explorer. There is no one tool that you can use to test and debug your website in all browsers.

Enter one tool to test them all: Microsoft Expression Web SuperPreview (a mouthful). It wants to fill the gap in multibrowser testing and looks like a real promising tool. The point of the program is that you have one program which groups all testing. And although the early bèta that is now available only supports Internet Explorer 6 and 7 (or 8 when installed) it is planned to support almost all large browsers in the future.

My installing experience with the product was a bit disappointing. The tool kept crashing on startup. After ranting about it on Twitter I got almost immediate feedback from Justin Harrison, program manager of Expression Web. He pointed me to a blog post with a workaround for the bug I was experiencing. Talk about efficient use of Twitter!

After applying the workaround the tool worked perfectly. You have to be a bit patient because the websites load pretty slow but I'm sure they'll fix this in one of the future releases. After all this is still a beta. One killer feature that immediately catches your attention is the possibility to overlay two websites. Then you can see the real differences between the two browsers

This could grow into a killer tool which would be indispensable for web designers/developers. One thing that would really top it off is if they added real time css editing. It is already possible to select a certain element on the page by clicking on it (Firebug style). In the status bar you then get to see the properties of the clicked element. If you could then start changing the CSS (and even the HTML) and see the changes in real time that would make one hell of a debugging tool. That's also what makes Firebug so powerful.

Conclusion: I like the way Microsoft tries to fill a gap in web development I hope it quickly evolves into stable product. When it does and it supports all common browsers it will become a standard in my tool belt to test my websites cross browser. And is it possible to release a Mac version? That would be great ;-).I know, I know ... wishful thinking.

For more information on Microsoft Expression Web SuperPreview you can check the following links:

Before I sign, can I see your codebase?

peter.nospam@nospam.twototango.be (Peter) — Mon, 19 Jan 2009 19:05:30 -0500

Changing employers is always a hard decision to make. Whatever the reason is you found that new opportunity that caught your attention: money, fame, need for a new challenge. There are plenty of jobs in the sea, certainly as a developer, and it's hard to find that one true job. You don't want to end up in a job which has the same drawbacks as your previous gig. If you take the leap you want it to be worthwhile on all areas: financial, job satisfaction, etc. Although the financial aspect is an important part of the decision making it's not the holy grail. For me even more important is job satisfaction. In every job interview they're telling you they have state of the art ASP.Net Turbo 3000 code running on their Windows 2099 machines. But as we all know there is code and there is code.

To be able to make a good decision, the first thing you do is gathering intel. Asking around with friends, former colleague's, friends from friends and so on about the company you're about to sign for. If all those signs are positive and the pay is good (I've been told it should be minimum 10% more then you're current wage), you could ask to meet the team you're going to become a part of. I don't believe in first contact, certainly not at a job interview because everybody is going to be at his best. You will see your future manager for about 2 to 3 hours and he will be looking for people so he will show his most charming side. Your future team mates don't know you so they'll act like the nicest people you've ever worked with because they don't know you. If you sign the contract you're going to spend more than 8 hours per day with these people, only then you will really get to know them. Worst case scenario if the first encounter with the team was a bad one, I would be reluctant to sign. But this is hardly ever the case.

So on what grounds should your decision be based? I've never done this before but I was discussing this topic with some people and it suddenly struck me. They can offer you double the wage you are earning today but if you have to work your way through the next big ball of mud you're nog going to have a lot of fun at your new job. Unless you're looking for a real challenge. But how do you make a distinction between a challenge and professional suicide? The best way to get to know how a company works and what the quality of the codebase is: ask if you can quickly see some codefiles and if they could shortly draw how their application is architected. You'll get a crash course in how the company works and which of the statements the recruiter or manager made about the software methodology they're currently following are really true. It will be enlightning because you'll not be jumping into an abyss, you'll have a better understanding of the risk you are taking. Of course there is always risk involved but calculated risk is in my opinion a part of an exciting life!

Employers can also learn something from this: If you have a neat codebase or some really cool continuous integration system show it to your future employees. It's certainly an extra plus when trying to convince someone to sign for your company.

Tags from Technorati: job,interview,recruitment

Why learning CSS is important in a (web) development world

peter.nospam@nospam.twototango.be (Peter) — Wed, 14 Jan 2009 16:02:48 -0500

I notice that a lot of development effort is going into creating a nice back end. Creating a GUI is a matter of using the designer - better known as system.draggy-droppy - and setting the right colors via the properties panel. But lately a shift has happened which forces developers to learn about CSS.

Web development

If you're into web development and I know more and more developers are into it you must learn CSS. It's part of the web and part of web development. It will make your applications slicker and nicer looking. You can make some very slick feedback messages with CSS. And everyone knows you can create an application with an almost perfect architecture, if it looks like hell you'll need ten times the effort to convince users to use it.

JQuery

With the popularity of jQuery, the adoption by Microsoft certainly helped, a lot of developers are starting to learn the pure basics of web development. People are starting to learn the (fantastic) language that JavaScript is. JQuery introduced us to another phenomenon: CSS selectors. You can use CSS selectors to select a certain element on the page. Where CSS used to be for layout only, it is now being used to code. Most developers don't care about layout. If the code works, they are happy. So most developers didn't care about CSS, until now.

Fizzler .Net

I recently read about Fizzler .Net, a tool which brings CSS selectors to C#. I think this is an excellent idea, using CSS selectors is very intuitive once you get used to it. I even read about using CSS selectors on plain XML files to select elements. That's even a better idea! We certainly haven't seen the last of CSS selectors in server side languages (like C#).

The problem(s)

I see 2 main problems. The first problem is browser compatibility. It takes a lot of effort to get certain CSS code to work in all browsers. Specially Internet Explorer 6 can be a real pain in the ass. A lot of developers lose courage when handling yet another problem of: "It works on Firefox but doesn't on IE6". The only solution to this is ... deal with it. Learn the Internet Explorer 6 bugs, try stuff out and get to know the solutions/workarounds. A lot of bugs have been dealt with before and after creating a few layouts with XHTML & CSS you are able to solve most of your problems.

The second problem is Visual Studio. It really lacks a tool to do good CSS coding. Sure it has intellisense but that's really it. There is a real market for a tool which support the developer who writes CSS in Visual Studio. A Resharper like tool which gives you hints like #ffffff can be abbreviated to #fff. That would really rock my world. I was hoping that Aggiornio was going to step up the plate but it hasn't so far. Another thing that should be added is cross browser testing. You should at least be able to test the different versions of Internet Explorer. Now you have to use tools like IETester and install Firefox, Chrome and Opera on the side to have a decent coverage. CSS Vista is worth checking out for this but Visual Studio is an IDE and CSS is part of the development cycle. The functionality that CSS Vista has should be incorporated into Visual Studio.

Conclusion

What are you waiting for? Good, practical books to get you started are those of Eric Meyer and the Zen of CSS design. You can find a lot of other books on my Shelfari profile, do you have an account yet? If not check it out, you can become virtual friends and it's a great way to learn about new books!

Tags from Technorati: css,jquery,web development

Posting code on your blog

peter.nospam@nospam.twototango.be (Peter) — Wed, 31 Dec 2008 09:54:48 -0500

If you have a technical blog it's very important that you can somehow easily post code snippets to your blog. I was using the Visual Studio plugin Copy source as HTML for a while but I wasn't very enthusiastic about the result. I don't like the fact that I need a plugin in Visual Studio to be able to post code to my blog. Visual Studio is for programming. Jan told me that there was a Windows Live Writer plugin as well to do this. A few days ago I found the best plugin ever. It allows you to paste code into an intermediate window and then formats it for you!

Because I recently converted to the dark side, I didn't want my code snippets all to have a black background. But this problem is solved by the plugin without any configuration (As you can see below).

Screenshot from Visual Studio.

namespace TwotoContentTests.FilterAttributes
{
    class Class1
    {
    }
}

Code pasted via the Windows Live Writer plugin.

What are you waiting for? Go download it!

Tags from Technorati: technical blogging,blogging,windows live writer,plugin

Testing the OnActionExecuting event of a Controller

peter.nospam@nospam.twototango.be (Peter) — Sun, 28 Dec 2008 13:15:06 -0500

I was doing a bit of refactoring on an ASP.NET MVC web application and was using the OnActionExecuting event in a controller to do authentication. I had not yet written a test for it, blasphemy I know, so that had to be corrected. The controller was something like this:

using System.Web.Mvc;

namespace TwotoContent.Controllers
{
    public class ExampleController : Controller
    {
        protected override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            // check if user is authenticated before executing an action and redirect if not
        }

        public ActionResult Action()
        {
            return View();
        }

        public ActionResult AnotherAction()
        {
            return View();
        }
    }
}

At first I did a stupid attempt thinking that if I would call a Controller action from the test, the OnActionExecuting would be automatically executed and tested. I quickly find out that's not the case and after thinking it through it would probably suck if it worked like that because you would have to write the same setup code over and over again for every action for which the OnActionExecuting was called. But there must be the another way to call the OnActionExecuting function directly without having to execute an Action.

No luck, as you can see you can't separately call the OnActionExecuting event on a controller because it's protected in the Controller base class. I didn't really know what to do so I googled around a bit and found this article about creating your own action filter. It seems that the OnActionExecuting event is public when you create your own custom ActionFilter. What is an ActionFilter you ask? Let me quote from the article: "An action filter consists of logic that runs directly before or directly after an action method runs. You can use action filters for logging, authentication, output caching, or other uses." Exactly what I needed in other words. So after refactoring a bit I came up with the following code:

using System.Web.Mvc;

namespace TwotoContent.Controllers
{
    public class ExampleController : Controller
    {
        [ExampleActionFilter]
        public ActionResult Action()
        {
            return View();
        }

        [ExampleActionFilter]
        public ActionResult AnotherAction()
        {
            return View();
        }
    }

    public class ExampleActionFilterAttribute : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            // check if user is authenticated before executing an action
        }
    }
}

Now the OnActionExecuting method in the ActionFilter attribute can now be tested as followed:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
using NUnit.Framework;
using Rhino.Mocks;
using TwotoContent.Controllers;

namespace TwotoContentTests.FilterAttributes
{
    public class When_executing_an_event
    {
        private ActionExecutingContext _context;
        private ExampleController _controller;

        [SetUp]
        public void SetUp()
        {
            _controller = new ExampleController();
            _context = new ActionExecutingContext(new ControllerContext(MockRepository.GenerateMock<HttpContextBase>(),
                                                                        new RouteData(),
                                                                        _controller),
                                                  new Dictionary<string, object>());
        }

        [Test]
        public void Then_the_authenticated_indicator_must_be_set()
        {
            var subjectUnderTest = new ExampleActionFilterAttribute();

            subjectUnderTest.OnActionExecuting(_context);

            var authenticatedIndicator = Convert.ToBoolean(_context.Controller.ViewData["authenticated"]);

            Assert.That(authenticatedIndicator == true);
        }
    }
}

I first set up an ActionExecutingContext with a controller so it can be passed to the OnActionExecuting function. In the test I create an instance of the class that is under test, in this case the ExampleActionFilterAttribute class. As you can see the OnActionExecuting function can be called directly (because it's public in the base class). After executing the function I read a variable from the ViewData collection via the context that was set up earlier. Finally I test if the variable in the ViewData is filled out correctly. You actually need quite some setup code to be able to mock an ActionExecutingContext. Because I didn't need the HttpContextBase I have just injected a mock. This minimalizes the amount of Setup code that is needed.

I can't really think of a reason why the OnActionExecuting event is protected on the base Controller class and is public on the ActionFilter class. A benefit of this approach is that it results in a smaller controller class and an ActionFilter we can reuse over various controller classes. So nothing but advantages! Maybe this isn't the best solution but it worked for me. Ideas/additions/rants are always welcome.

Tags van Technorati: asp.net,asp.net mvc,web development,unit testing

VMWare Fusion vs Parallels

peter.nospam@nospam.twototango.be (Peter) — Sun, 30 Nov 2008 05:27:00 -0500

I have been using a Mac as my main development machine for over a year now. I have been very happy with it, you could call me an Apple fanboy. Because I develop in the .Net framework, and I'm not planning on changing that, I had to find a solution to be able to run Windows on my Mac. There are two options to get that done:

Installing Bootcamp: this implies that you have to reboot your machine to get to Windows
Virtualization: running Windows as a virtual machine on top of Mac OS X

The first reason I changed to Mac was the slick design but after using it intensively I came to realize that that isn't the strong point of a Mac. The strong point of the Mac is OS X. It's a robust operating system that doesn't get in your way. I was so pleased with OS X that I wanted to use my Mac for all general computer use (surfing, email, ...) and just use Windows as a shell for Visual Studio. So Bootcamp was no option for me.

The first choice was made, I wanted to work with Virtual Machines to run Windows on my Mac. There are two virtualization solutions on Mac, VMWare Fusion and Parallels. Because a good friend of mine, who has an excellent video production company by the way, recommended me Parallels I went for that solution and never looked back ... until a few days ago.

I was trying to set up a new Parallels Virtual Machine and was installing Windows XP. After 5 tries I had given up. Windows (in Parallels) kept throwing blue screens at me. In the past I had never had this problem. So out of frustration I decided to try VMWare Fusion. I installed it and created my first VMWare Virtual Machine. The first killer feature I noticed is that the desktop and documents is shared between your virtual machine and Mac OS X. It is very easy to copy files between the two.

The perfect situation for me is that I have one Virtual Machine, which I can copy if I want to test something like an early bèta and then delete it when I'm done. In this way I don't have to install application after application that I don't use in my Virtual Machine and I can keep my Windows clean. A VMWare virtual machine is only one file, you can copy it and when you boot it VMWare Fusion detects that the VM is copied. A Parallels Virtual Machine exists of several files and is less easier to copy. Another point scored by VMWare Fusion.

While doing some research on the two products, I noticed that Parallels is popular with designers and VMWare Fusion is more used by programmers. The fact that Parallels is so popular is in my opinion because of the design of the product. Starting a virtual machine is very slick, you've got rotating windows and stuff like that which makes it a great experience. Developers who use VMWare Fusion are mostly coming from Windows, on which VMWare is already very popular. On top of that, I have the feeling that VMWare Fusion is a little more robust then Parallels. A .Net developer tends to use his virtual machines a bit more thoroughly then a designer who most of the time just uses them to do some cross platform testing. I think that explains why designer prefers Parallels and developers prefer VMWare Fusion.

So I've made the switch VMWare Fusion and I'm very happy with it at the moment. Are there any .Net developers on Mac among my readers? Which virtualization platform do you guys use?

There is one thing that almost made me throw VMWare Fusion out of the window. The next screenshot explains it all:

Notice the Install McAfee menu item, I hope VMWare got a lot of money out of it because I really hate it when stuff like this get incorporated into a good product.

Note: I haven't tested Parallels 4 yet, I wrote this post before it came out.

Austin and Kaizenconf Part 2

peter.nospam@nospam.twototango.be (Peter) — Sun, 23 Nov 2008 05:19:43 -0500

Using and abusing ASP.NET MVC for fun and profit

Being a huge fan of ASP.NET MVC, I couldn't miss the opportunity to see guys that are much smarter than I am show off how they use the MVC framework. Jeremy and Chad showed real code of how they had been using the ASP.NET MVC framework in their projects.

Because this is a brand new framework, I have these moments when I'm using it that it doesn't feel quite right. I feel that the way I'm coding something isn't the best way to do it, but I don't know how to get around it. While sitting in the session I had a lot of aha-moments, I saw how other people tackled problems that I couldn't wrap my head around until now.

These are some key points that from now on I will try to keep in mind while using the ASP.NET MVC framework:

Keep your views light, your controllers medium and your model heavy
HttpContext is your enemy, controllers should not come in direct contact with the HttpContext even now it's mockable
Get rid of magic strings (for example hashtable examples like ViewData)
Thunderome principle
No if's or foreach's in the view, use extension methods, htmlhelpers and partial views to get rid of logic in your view

Another thing I couldn't wrap my head around before seeing this session was unit testing javascript with QUnit. I did write some tests with it but again bumped into some road blocks. It was great to see that other people used it with success. I'll probably be writing a blog post about this in the future, as I'm planning on taking the quality of my javascript code to the next level.

Last but not least was a demo that Jeremy gave of StoryTeller, it was a short demo but it looked very promising. I highly recommend viewing the session, you can find the video's at the KaizenConf wiki.

Presentation Patterns

This time Jeremy paired up with Glenn Block to tell us more about presentation patterns. They talked about several presentation patterns including passive view, supervising controller and view-viewmodel-model. The thing I realized is that I'm not using presentation patterns enough in my day to day job and that I should start using them where I can as soon as possible.

Open space

After the fantastic sessions it was time to kick off the open space. This was my first open space and I didn't really know what to expect. Doc List coordinated it all and it was a great learning experience. We started with a fishbowl, after which everyone participating could propose subjects. After that everyone voted and the topics that he or she was interested in. The schedule was formed.

An open space leans on four principles:

Whoever comes is the right people
Whatever happens is the only thing that could have
Whenever it starts is the right time
When it's over it's over

I followed a lot of sessions and have a lot of loose notes. I had a really good feeling with the concept of open space. The sessions are more debates and the participants discuss the things they want to talk about, not only what the speaker wants to show. Because almost everyone is participating you learn a lot from each other.

Conclusion

This was by far the best conference I've ever been to. I've learned so many things in such a short period of time. I would like to thank everyone who we met in Austin specially Conrad and Michael for letting us tag along and of course Scott for organizing the whole thing. If you are interested, there as a LOT of material produced you can find it on the KaizenConf wiki.

Austin and Kaizenconf Part 1 - workshops

peter.nospam@nospam.twototango.be (Peter) — Sat, 01 Nov 2008 21:16:14 -0500

It's finally there, Jan and I departed from Belgium to Austin, Texas to attend Kaizenconf. I have been looking forward to this for quite a while. It didn't start out good when I spilled my first drink on the plane, but it only got better from then on. After a long flight with a stopover in Atlanta we arrived at the Austin airport. A lot smaller then I expected but that didn't really matter.

Advanced NHibernate

On the first 2 days of Kaizenconf some promising workshops where scheduled, we decided to go listen to the great ayende talking about Advanced NHibernate. The talk started off with a blast when ayende gave a demo of the NHibernate Profiler that is being developed. Although beta it looks like this will be a real hit and it will help developers to get to know and control NHibernate better. I don't see myself as an advanced NHibernate user but it was nice to follow a workshop that isn't the usual introduction on how to create a Northwind CRUD application.

Below is a screenshot of the NHibernate Profiler, although it's not the best of quality you can see the query that NHibernate has generated, the different queries that were fired onto the database and much more. Very, very promising!

Another topic that was explained is the use of Lucene with NHibernate. By using a couple of attributes on your domain models to indicate which parts should be indexed, you get a very easy way to make your data searchable. Because the original is always better, here is a short video where the advantages of using Lucene with NHibernate are explained:

Advanced NHibernate: Lucene NHibernate Search from Two to Tango on Vimeo.

We went on to NHibernate caching and again I discovered something that will change the way I use NHibernate on a daily basis. Seems like caching is actually very intelligent but, as with everything, you have to watch out not to shoot in your own foot. Oren showed us an example that called the database 4 times without using any caching and called the database 42, yes forty-two, times with badly configured caching.

Here are some random notes I took that I'd like to keep in mind for future use of NHibernate:

- When loading an object via session.Load the query gets fired when the object is being accessed, not when the Load() function is called

- NHibernate solves threading issues with caching by returning different instances of the same object to different users

- Queries can also be cached, call the SetCacheable(true) function on every occurrence of the given query you want to cache

After this excellent session we were looking for something to eat. Luckily some of the attendees (thank you Chris and Tim) were kind enough to give us a ride to Rudy's BBQ where we learned that 'Real people eat meat'. I don't think they have a lot of veggies under their customers.

Functional programming - Is it a game changer?

For the second workshop a difficult choice had to be made. It was choosing between the DDD chalk talk of David Laribee or the workshop about Functional programming of Matt Podwysocki. You probably already guessed the one I chose. This was something completely different then the NHibernate talk and Matt asked several times if our brain hadn't exploded yet, and if I'm honest I had to answer yes every time he asked it. There was a lo-hot of information to take in.

The first part of the presentation was about making C# more functional. By heavily using the new features in C# 3.0, a lot of for-each loops could be eliminated with the help of stuff like LINQ and lambda expressions. Matt told us that F# is very good at math stuff, the software that determines the best player in Halo 3 is written in F#. Because F# has a specific purpose, there will never be a designer to create GUI's or web pages using F#. I think I heard a little cheering in the room after those words. I still have to take a closer look to the abundance of examples Matt provided us to be able to give a deeper insight into F# so I'll leave it at that for now.

Although I'd like to show a piece of code that Matt shared to point out the dangers that come with lazy evaluation of code:

Func<String> GetContent;

using(StreamReader fileStream)

{

GetContent = fileStream.ReadToEnd();

}

String content = GetContent();

Because the fileStream is out of scope when calling the GetContent function reference, this will give unexpected behavior which is very hard to debug if you ask me. Another good session for which I'd like to thank Matt.

The conclusion of the first day of kaizenconf is very good. As I already said the sessions were of high quality. I'm already looking forward to day 2 which has an ASP.Net MVC session given by Jeremy Miller and Chad Myers. Very exciting!