The art of simplicity

As an architect I’m regularly involved in code reviews. One of the lessons I learned from reviewing so many codebases is that most codebases start quite well-defined and clean. It is only after an accumulating set of changes that the code evolves to a mess and turns into spaghetti. One of the parts of every system that is impacted the most by changes is the user interfaces. What started as a simple set of UI components evolves quite fast to an always growing set of changing conditions that impact the UI state. An example: an original requirement stating that a ‘Save’ button is disabled until all required fields are entered in a form evolves to a combination of AND all required fields are filled in AND a user has a certain role AND there is no application error AND we are not loading some data AND… What typically also starts to happen is that the same conditions start to come back in multiple places. Your UI becomes harder and harder to test and you get more complex bugs that are ...

Today I lost some time searching why I couldn’t get the Bootstrap Progress bar working. The problem is that the sample on the Bootstrap site( http://getbootstrap.com/ ) isn’t up-to-date for the latest Bootstrap version(Bootstrap 3.3.1). Here is the sample code as of today: Instead the correct code should look like this:

File Nesting is a feature in Visual Studio that was available for a long time. It allows you to put multiple files together under one ‘root’ file. This is a feature you’ve certainly seen in WinForms(designer generated code and codebehind), ASP.NET WebForms(HTML page and codebehind) and so on… Unfortunately to use this feature yourself, you had to start editing the .csproj files yourself. Not the best way to start using a feature! Thanks to Mads Kristensen File Nesting plugin this is no longer necessary and you can easily nest any file under another file in Solution Explorer. What makes it even nicer, is that File Nesting also gives you the option to automatically nest based on file naming rules. You can then apply those rules to any files, folders or entire projects. Install the plugin through the Visual Studio Extensions or download it here: http://visualstudiogallery.msdn.microsoft.com/3ebde8fb-26d8-4374-a0eb-1e4e2665070c . Thanks Mads!

If you like the “Modern”(a.k.a Metro) UI in Windows 8(.1), and want to use a similar user experience in your websites, have a look at Metro UI CSS 2.0 . It offers a set of styles and components to create a site with an interface similar to Windows 8.

In my continuing conquest to find the best tool for UI testing, I also had a look at Selenium , one of the oldest and most well known browser automation frameworks. I started simple by creating a new Test project, adding references to Selenium through NuGet , and writing a small test(based on a sample on their website): Unfortunately when I ran the test, it failed with the following error message:   Initialization method OLASeleniumTestProject.UnitTest1.Setup threw exception. OpenQA.Selenium.DriverServiceNotFoundException: OpenQA.Selenium.DriverServiceNotFoundException: The IEDriverServer.exe file does not exist in the current directory or in a directory on the PATH environment variable. The driver can be downloaded at http://code.google.com/p/selenium/downloads/list .. Result StackTrace:          at OpenQA.Selenium.DriverService.FindDriverServiceExecutable(String executableName, Uri downloadUrl)    at Ope...

Caliburn.Micro always had the concept of Coroutines which allowed you to write asynchronous code in a synchronous way. Starting from .NET 4.5 with the introduction of the async and await keywords, Microsoft introduced the concept of Coroutines in the language itself. So if you want to use the same code in Caliburn.Micro with the async syntax, it becomes: More information here: http://caraulean.com/blog/2013/07/15/using-caliburn-micro-with-async-await/

I have to admit, I have a big hole in my brain where I could fit some CSS knowledge. Even after years of web development, I still struggle with CSS(don’t ask me why). One of these concepts I always do wrong is CSS floats . With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. Float is very often used for images, but it is also useful when working with layouts. One site that helped me understand CSS Float and how to use it is Floatutorial . Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.

If you like the Windows 8 ‘Metro’ UX and you want to provide a similar experience in your web applications, go have a look at the Cosmo   Bootstrap theme. It contains a set of customized fonts, navigation bars, buttons, forms, and so on…

Bootstrap is a great framework for building good looking and powerful websites. However in the hands of developers, most Bootstrap sites end up looking the same. Enter LayoutIt! , a drag & drop interface builder that let you easily design your own sites by using the Bootstrap functionality. It allows you to drag & drop your template together and download the required HTML, CSS, LESS and JavaScript afterwards.

WinRT gives you a lot of AppBar buttons out-of-the-box. These buttons can be found in the StandardStyles.xaml(don’t forget to comment them out if you want to use them) and are styled like this: I wanted to create my own button and I was wondering where the value of the Content property(&#xE112) is coming from… To find the related icon you’ll have to open the Character Map program & select the Segoe UI Symbol from the font list. If you click on a specific character you see the value that is used inside the Content property(without the &#x at the beginning).

One of the cool features inside Caliburn.Micro is the support for Actions . Actions allow you to bind any UI event to a method on the ViewModel without the need of  Command binding. Last week when building a Windows 8 application I couldn’t get it working for a combobox containing a list of buttons. I wanted to execute some code once a button inside the combobox was clicked. But it didn’t work as expected. The problem was related to the fact that a ComboBox uses a FlyOut for it’s rendering which its not part of the Visual Tree. So Caliburn.Micro wasn’t able to walk the visual tree and detect the ViewModel instance that was bound to the View through the DataContext. Instead I had to give Caliburn.Micro an extra hint by using Action.TargetWithoutContext;

The airspace problem was one of the most annoying issues when integration a Win 32 component(like WinForms) with WPF. The problem is that each render technology belongs to only one airspace only. So when you place Win32 components in your WPF application they behave as a black hole for input leading to all kind of issues. I blogged about this issue before and even showed a possible workaround . With WPF 4.5 the issue is finally solved! To do this 2 extra properties are added to the HwndHost class(the base class for WindowsFormsHost ): IsRedirected and CompositionMode . IsRedirected: Set this property to true to solve the airspace problem. (It’s not enabled by default.) CompositionMode: Specified how deep the integration should go. It has multiple possible values: None : this is the default behavior and no integration is done: the airspace problems are still here. OutputOnly : The airspace problem are solved but the user (and the input system) can’t interact with the hosted ...

If you don’t have access to the new Storyboarding features in Powerpoint, don’t worry. Andreas Wulf released a free set of Windows 8 Wireframe Templates for Powerpoint . Using these templates, you can quickly put together a Windows 8 app layout and iterate on it. All elements in the set are based upon regular PowerPoint vector shapes, and are fully editable and customizable. The wireframing set is available as a .pptx file (for PowerPoint 2007 or newer) that you can download using the link below: Download Windows 8 Wireframing Set for PowerPoint (.pptx, 0.5 mb) Thanks Andreas! Some screenshots: Example grid page displaying item previews arranged in groups. Example page displaying details for a single group with previews for each item in the group. Example page displaying one item in detail. Example page displaying a list of items and the details for the selected item. Example of a Metro app in snapped view state. Collection of common...

Last week I discovered the Responsive Web Design Testing Tool by Matt Kersley . This tool has been built to help with testing your responsive websites while you design and build them. You can enter your website's URL into the address bar at the top of this page (not your browser's address bar) to test a specific page. The output will be rendered in different resolutions, giving you a quick overview of the design on different resolutions.

The Windows 8 ecosystems offers you a broad set of tiles to improve the user experience. I always forget the list of available templates so this one is for me; a link to the tile template catalog so I can never forget the list of available options: http://msdn.microsoft.com/en-us/library/windows/apps/hh761491.aspx . The template catalog lists the tile templates available for use in a tile notification, with pictorial examples of each together with their XML content. Note that when they are displayed on a computer set to a right-to-left (RTL) language, templates are flipped from their left and right descriptions here. In the static or peek templates that display an image collection, the larger square image is not quite square; it is slightly wider than it is tall. If you supply a square image, the image will be scaled for width and slightly cropped on the top and bottom.

Maybe it’s something you would not expect but Microsoft.com is a great example of Responsive Web Design. Let’s open it up on a range of devices and just for fun we’ll do the same thing for apple.com . This is how the sites look on my 24” screen:   And this on my 15” laptop screen: And this on my 10” tablet: And this on my mobile phone: Enough said?

One of the great new tools in the Visual Studio ALM ecosystem is the Powerpoint Storyboarding . It allows you to create great screen mockups in a familiar user interface(Powerpoint). Last week Microsoft released three new sets of storyboarding shapes on the Visual Studio Gallery . Common iOS Icons iPhone controls iPad controls

In Windows Phone you had a global Theme setting on your mobile phone which allows you to switch between the dark and light theme. One thing I didn’t like is that you had to use some tricks to detect the currently active Theme setting. In Windows 8 Microsoft is taking a different approach: there’s no global theme setting , instead it’s up to the developer to decide if her application uses the dark or the light theme. You can set the current theme by changing the RequestedTheme -attribute on the Application class. This can be done either through code or through XAML. <Application x:Class="ThemeSample.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" RequestedTheme="Light">

For a Windows 8 app I’m building, I wanted to use a custom font. It took me some time to figure out how to get this working. So here are the steps: Add the font file to your project. Change the Build Action to Content . Specify the FontFamily using the format: /<path to font file>/<font file>#<font name> If you don’t know the font name, double click on the font file: A sample: < TextBlock FontFamily = "/Assets/Fonts/Bauhaus93.TTF#Bauhaus 93"/>  

The Windows 8 AppBar comes with a set of default icons embedded in a set of AppBarButtonStyles . These styles are available inside the StandardStyles xaml file inside the Common folder of your Windows 8 XAML project. The strange this was that when I tried to apply these styles to my AppBar buttons, Visual Studio complained that it couldn’t find the related resource: <Button Style="{StaticResource AddAppBarButtonStyle}" /> I spent way too much time before I discovered that for one reason or another the AppBarButtonStyles were commented out inside the StandardStyles.xaml. Doh! After uncommenting the styles I wanted to use, it worked perfectly.