Thibaut Van Spaandonck’s blog

People & Business Development on HTML5 Gallery

My latest web project, People & Business Development, has recently been selected by HTML5 Gallery, a website that showcases exemplary HTML5 websites with the objective that their implementations serve as a reference for web developers. It also features a dedicated page with the description, rating and suggestions of improvements so that webmasters of the showcased websites can perfect their creations.

HTML5 Gallery being a popular website, the impact on People & Business Development’s visits has been dramatic, as well as its ranking in Google (ended up at the 2nd place for some keywords).

Think I’ll put some interest in CSS galleries too

Visual Studio “collapse solution” extension

Have you ever been annoyed by the expanded projects and items in Visual Studio, and lost so much time in collapsing them all manually ? Sure you do, especially if, like me, you have the track active item option checked (which highlights the current opened file in the solution explorer, resulting in automatic expanding of the parent project and namespaces). Wouldn’t it be great if you could right-click on the solution and select “collapse solution” ? You ain’t dreaming

First, click on Tools and select Extension Manager :

Then, select Online Gallery in the left pane, start typing collapse in the search box and select the Collapse Solution extension. Restart Visual Studio and you’re done !

Enjoy

Getting Visual Studio 2010 search back

If you already worked using Visual Studio 2010, you surely noticed the new, simplified interface and the different code profiles that you can choose after the installation. As a result, you’ve got a bigger area to code and the toolbars are kept to the minimum (at least if you chose the code only profile like me).

But the thing is that I’m addicted to the search box and it’s gone (maybe due to my config, but surely others had the same case)… Here’s how to get it back :

• Step 1 : check that you’ve enabled the standard toolbar. To do this, right click in the toolbar area (top of the IDE) and select Standard
  
  
  
• Step 2 : go to the customize options of the standard toolbar by clicking on the little arrow at the rightmost of it.
  
  
• Step 3 : click on the Add command button, go to the edit pane and add the find in files and go to find combo. Then use the move down button to rearrange the commands you’ve just added. Their standard place is just before the solution explorer command.
  
  
  
• Final tips : here are 2 simple shortcuts that will maybe make you addicted to that search box. First, moving the mouse and clicking into it to put the focus each time you want to perform a search isn’t really productive. Try [ctrl] + [:]. It will automatically put the focus into it. Then type > of [fileName] and it will list for you all file occurences starting by the name you’ve just entered. The magic behind it is the following : the “>” sign transforms the search box into a command window, and “of” stands for “open file”. An essential trick !
  
  

Make good use of it

Bad smells in code by Martin Fowler

At the company I’m currently working for, there’s a big poster on the wall with the following headline : “if you see something like this, please raise your hand to improve code quality”. Below is the content of that poster – a list of things to avoid when coding – from Martin Fowler’s refactoring book.

• Duplicated code : the same code structure in two or more places is a good sign that the code needs to be refactored: if you need to make a change in one place, you’ll probably need to change the other one as well, but you might miss it
• Long methods : longs methods should be decomposed for clarity and ease of maintenance
• Large class : classes that are trying to do too much often have large numbers of instance variables. Sometimes groups of variables can be clumped together. Sometimes they are only used occasionally. Over-large classes can also suffer from code duplication
• Long parameter list : long parameter lists are hard to understand. You don’t need to pass in everything a method needs, just enough so it can find all it needs
• Divergent change : software should be structured for ease of change. If one class is changed in different ways for different reasons, it may be worth splitting the class in two so each one relates to a particular kind of change
• Shotgun surgery : if a type of program change requires lots of little code changes in various different classes, it may be hard to find all the right places that do need changing. Maybe the places that are affected should be all brought together into one class
• Feature envy : this is where a method on one class seems more interested in the attributes (usually data) of another class that in its own class. Maybe the method would be happier in the other class
• Data clumps : sometimes you see the same bunch of data items together in various places: fields in a couple of classes, parameters to methods, local data. Maybe they should be grouped together into a little class
• Primitive obsession : sometimes it’s worth turning a primitive data into a lightweight class to make it clear what it is for and what sort of operations are allowed on it (eg creating a date class rather than using a couple of integers)
• Switch statements : switch statements tend to cause duplication. You often find similar switch statements scattered through the program in several places. If a new data value is added to the range, you have to check all the various switch statements. Maybe classes and polymorphism would be more appropriate
• Parallel inheritance hierarchies : in this case, whenever you make a subclass of one class, you have to make a subclass of another one to match
• Lazy class : classes that are not doing much useful work should be eliminated
• Speculative generality : often methods or classes are designed to do things that in fact are not required. The dead-wood should probably be removed
• Temporary field : it can be confusing when some of the member variables in a class are only used occasionally
• Message chains : a client asks one object for another object, which is then asked for another object, which is then asked for another one, etc. This ties the code to a particular class structure
• Middle man : delegation is often useful, but sometimes it can go too far. If a class is acting as a delegate, but is performing no useful extra work, it may be possible to remove it from the hierarchy
• Inappropriate intimacy : this is where classes seem to spend too much time delving into each other’s private parts. Time to throw a bucket of cold water over them !
• Alternative classes with different interfaces : classes that do similar things, but have different names, should be modified to share a common protocol
• Incomplete library class : it’s bad form to modify the code in a library, but sometimes they don’t do all they should do
• Data class : classes that just have data fields, and access methods, but no real behavior. If the data is public, make it private !
• Refused bequest : if a subclass doesn’t want or need all of the behavior of its base class, maybe the class hierarchy is wrong
• Comments : if the comments are present in the code because the code is bad, improve the code

Shuffling a collection using Fisher-Yates algorithm

Lately, I came across a situation where I needed to shuffle a collection. It’s the case when, for example, you need to display elements in a random fashion.

This is where the Fisher-Yates algorithm comes into play. Created by 2 statisticians, this algorithm enables to generate a random permutation of a finite set and properly implemented, the shuffle is unbiased, so that every permutation is equally likely. Exactly what I was looking for !

Below, you’ll find my C# implementation for shuffling a generic dictionary (adapting this to shuffle any other type of collection should be straightforward) :

C ya’

Book review : Learning WCF

For future challenges, I’ll have to learn WCF in deep, so I decided to start with this book. Next one will be Lowy’s Programming WCF services book, which covers WCF even more in depth. But let’s talk about the book I’ve just read (written by Michele Leroux Bustamante, Chief Architect of IDesign and colleague of Juval Lowy). I found it was a perfect book to start with WCF : introduction to SOA and its tenets, teaching of the key concepts of WCF such as contracts, bindings, hosting, instancing & concurrency, reliability, security and exceptions & faults. And to help you master these concepts, each chapter contains several labs where you can put into practice what you’ve just learnt. A very effective approach. Just note that this book doesn’t cover peer-to-peer protocols (which is done in Lowy’s book).

Pros

• Great book, covers a lot of ground of WCF
• The labs really help in mastering all the concepts

Cons

• No cons for me. Just keep in mind that this book doesn’t cover peer-to-peer protocols

Conclusion

I recommend this book which will give you a strong knowledge of WCF on which you can build upon with Lowy’s book if you want to go even further.

jQuery UI versus custom development

During the development of People & Business Development – my latest web project (related post) – I used the great jQuery UI library for some visual components such as the carousel or accordion. For some reasons I’ll discuss below, I also implemented those features by myself and I thought that giving my experience feedback could be useful.

The carousel

The landing page of the website presents the logos of the clients, which was done using jCarousel (jQuery UI). It needed somme little tweaking but was done in a reasonable amount of time. The jCarousel file contains 878 lines of code, which is quite heavy for me because I only needed a basic behavior.

Considering all that richness I didn’t need and the fact that it always takes some time to adapt the library to the project, I decided to implement my own carousel for the twitter widget in the sidebar. Not only is the file way smaller (41 lines, I actually copy-pasted the code below so you can take a look at it), but it also took me less time to develop this custom version from scratch than adapting the jCarousel library to fit my project.

The accordion

I also used the jAccordion plugin to display the list of trainings and services the company provides (can be seen on the website here and there). The file contains 477 lines of code because you can, once again, customize a lot of things that most of the time you’ll don’t need. Integration time was very small and it perfectly fitted my needs, at least for the regular version of the website.

For the iPhone/iPod touch optimized version, I simply couldn’t use it anymore : jAccordion sometimes creates a scrollbar into the sections that the iPhone and iPod touch won’t display. There is only one main scrollbar on those devices, resulting in a cropped content. In that case, I could either adapt jAccordion, take the time to dive into the code of the plugin or develop again a custom version from scratch. I chose the latest option, which took me 10 minutes to implement and test :

Conclusion

So now you understand why I thought talking about this could be interesting as the difference between the 2 options is big. First : jQuery UI is a great library. You can do a lot of cool stuff with it, there’s plenty of documentation and the community is huge, so you’ll always find what you’re looking for.

But in some cases (like mine), using those plugins is not always the best option. First it took me less time to develop a custom version than adapting the code of the plugin to fit my needs. Second, it’s way lighter (I got 41 lines of code instead of 878 for jCarousel and 14 lines instead of 477 for jAccordion).

Although there’s no point comparing the amount of lines of code here (jQuery UI does provide much more options than my custom controls, so obviously code files are heavier), what should be remembered is : if you’ve got a good knowledge of jQuery, sometimes you’ll go much faster developing custom controls than using plugins, so think about it

Guidelines for mobile web development

Having recently completed a web project (related post) including an iPhone/iPod touch optimized version, here are some guidelines I’ve learnt and followed during that development : Lightweight and concise design : we read less on mobiles than on a regular computer. Go to the point, be clear, provide fast access to relevant information. Don’t fear that visitors will be missing important information, they’ll go to the full version of the website if they’re interested in what they’ve seen. No hover effects : whether it’s on menu items, links etc, don’t waste time developing hover effects. It’s a nonexistent concept on tactile interfaces. Take inspiration from the GUI style of the platform : using GUI elements in which users are already familiar will make the interface easier to use. If you’re developing for the iPhone/iPod touch, you can take a look at the iPhone GUI PSD from Teehan+Lax. You can also get some inspiration from this gallery of iPhone websites.

• Orientation detection : detect the orientation of the phone and adapt the interface accordingly. More screen width enables you to display larger images and longer paragraphs of text, improving readability on mobiles’ small screens.
• Optimize for the phone screen resolution : when developing regular websites, you have to cope with different browsers, different screen resolutions, etc. One of the greatest things when developing for a specific mobile device is that every user has the same screen resolution and same browser. So you can tailor your interfaces to the pixel without worrying about those concerns.
• Interfaces for fingers : there’s no mouse cursor on tactile interfaces and everything is done using the finger (at least if you’re using an iPhone/iPod touch). Keep that in mind by providing big enough buttons and add space between links to prevent errors. If you’re developing for the iPhone/iPod touch, I recommend you to take a look at the iPhone Human Interface Guidelines (official Apple documentation).

And that’s it for this post ! Don’t forget that this is a noncomprehensive list and if you’ve got interesting guidelines to add, don’t hesitate to comment about that

[FR] Site Web : People & Business Development

Mon nouveau projet, réalisé en tant que freelance et en collaboration avec le graphiste Quentin Flamant, est le site web pour la société People & Business Development. L’objectif principal est d’assurer une présence en ligne de cette dernière, y compris dans les réseaux sociaux (tels que Twitter, Facebook et LinkedIn), afin de présenter son activité et ses services. Le surf sur mobile étant une tendance en vogue, une version optimisée pour l’iPhone et l’iPod touch a également été développée.

Présentation de la société

Actif depuis une dizaine d’années, People & Business Development est un bureau spécialisé en coaching, en formation et en conseil pour optimiser le potentiel humain des organisations et, en conséquence, le chiffre d’affaires. Leur liste de clients comporte des noms tels que Alstom, la Commission Européenne, Delta Lloyd Life, Securitas ou encore Gefco.

Le site web

Le site a été développé en ASP.NET et utilise jQuery comme librairie javascript ainsi que jQuery UI pour les composants graphiques. Des propriétés CSS 3 ont été utilisées pour embellir le site dans les navigateurs modernes sans affecter le rendu dans les navigateurs plus anciens via le mécanisme de dégradation gracieuse. En ce qui concerne le respect des standards du Web, chaque page du site passe la validation W3C XHTML 1.0 Strict.

La version iPhone et iPod touch

Ci-dessous, des captures d’écran de la version dédiée à l’iPhone et l’iPod touch. On notera notamment la détection de l’orientation permettant une lecture plus aisée de longs paragraphes de texte ainsi que l’intégration au menu de l’iPhone et l’iPod touch, permettant un accès direct au site web.

Cliquez pour agrandir

Cliquez pour agrandir

Conclusion

L’objectif de ce post, outre l’aspect publicitaire, est de présenter une application concrète de bon nombre de mes précédents posts, incluant :

• Why you should use a CDN for your website ?
• W3C : Validate green in XHTML strict with ASP.NET
• A standards-compliant alternative to target=”_blank”
• The IE nested lists whitespace bug
• Custom paging in ASP.NET with ListView & DataPager
• Implementing the Bing API in a ASP.NET website (part 1)
• Implementing the Bing API in a ASP.NET website (part 2)
• Writing a clean CSS
• Website referencing & management

Bonne visite !

Why you should use a CDN for your website ?

What’s a CDN ?

CDN stands for “Content Delivery Network”. It’s a system of strategically placed servers around the globe so the client can access to the requested file from the closest server.

In this post, I’ll discuss the benefits of CDNs for Javascript libraries such as jQuery, MooTools, …

The benefits

Typically, you place your javascript libraries on the FTP hosting your website. CDNs allow you to host these files for you, and benefit from the following :

• you’ll optimize the client-side experience of your visitors as the libraries will be delivered faster to them, because they’ll get the files from the nearest server
• it falls back on other servers if ever one of them would be down
• you’ll save the bandwidth of your webserver as it won’t be hosting those files anymore
• you’ve got less files to maintain on your server

How to use a CDN ?

It’s very simple, you just have to include one or two javascript tags on every page you want to use those libraries (if you’re working in ASP.NET, you’ll typically place these tags on the MasterPage).

Resources :

• ScottGu’s post about Microsoft AJAX CDN
• Google’s Javascript CDN

See you