Ivan Zlatev

How to disable the Sign in with Google pop-up across web sites

Wed, 13 Nov 2024 00:00:00 +0000

I’ve gotten tired of all those “Sign in with Google” pop-ups, especially the bad/overly aggressive implementations that do it in every new tab branch opened of the same page (looking at you TripAdvisor), so here is how to remove it.

Steps for Web

Install your favourite ad blocker (e.g. I use uBlock Origin)
Add the following custom rule and you are done:

||accounts.google.com/gsi/*

Steps for Android apps

Go to My Account -> Security (link)
Scroll down to Your connections to third-party apps and services and click on See all connections
Click on the gear/cog icon:
Turn off the Sign in prompts toggle and you’re done (direct link)

13 Emotional Resilience Challenges in Engineering Leadership and Management + Tips

Thu, 24 Nov 2022 00:00:00 +0000

This is a rather long post as it captures the 13 days of lessons learnt and tips I’ve been sharing on LinkedIn. Definitely interested to hear other’s experiences and thoughts, so do drop me a comment below, if you feel like it.

The content here is predominantly aimed at new managers and leaders as well as new managers of managers, but hopefully others can benefit too.

1. Feedback loops become slower and it takes longer to see the impact of your decisions and actions, which can create self-doubt and insecurity creep

Ensure you have measurable definition of success in place for yourself and that you refer to it.
Set clear goal and expectations for what you are focusing on and make sure that you have either reliable qualitative or quantitative way to measure progress and success
Rock your own feedback and actively seek feedback and don’t wait until your performance review time. Be aware that due to the position of authority (depending on environmental/cultural factor as well), the quality and quantity of constructive feedback may decrease.
Grow your introspective and reflective skills to self-troubleshoot and expand your mindset and perspectives.
Ensure you have a supporting structure in place, such as a mentor and coach.

2. Context switching increases by factor of N in terms of volume, frequency and types, which can be disorienting and overwhelming

Learn to identify what brain power and energy types you are using in different contexts and optimize your schedule around that. You may need to grow your self-awareness skills through mindfulness practice (e.g. meditation). Keep experimenting. You may find that meetings work best for you in the morning or maybe that focus time works best for you in the morning and so on.
Allocate regular focus time for yourself - your brain has limits. Block it off in your diary and guard it like it’s a precious stone. Accept that you won’t always be able to hold on to all of it as things may crop up, but do your best. You may find that having a bit of quiet time at the start and end of each day will help you prep and digest.
Do reset your calendar every now and then to defragment as things creep in.
Companies tend to have a heartbeat and a level of predictability associated with - learn to identify that and use it to your advantage as to how you plan your day and weeks. In a start-up that would be adrenaline pumped heart with low predictability, but as the company gets larger there will be times where certain things happen and activity escalates (e.g. performance reviews, quarterly planning).
Look for delegation, and thus sponsorship, opportunities at all times.
Give your brain time to adapt - it’s awesome like this.

3. You may feel less part of a team, which will affect your sense of belonging and can leave you feeling lonelier than before

Accept that the moment you step into a position of authority it changes the relationship dynamics. This is something a new manager will start facing, especially if they are doing the transition in the team where they have been an individual contributor before.
A bigger step-change for this is becoming manager of managers, so be mindful as you do make that transition.
Avoid isolating yourself - it will leave you feeling alone with your challenges and increase your stress levels. Instead look to connect with other peers in the company doing the same job and outside (e.g. join meetups and so on).
Make sure you have someone to talk to with whom you feel safe to share with (mentor, coach)
Deliberately invest in building better relationships at work
Take care of yourself outside of work socially and community-wise. It can be easy for work to become the sole source of sense of belonging, which is not a healthy dynamic.

4. The volume of information that you have exposure to may increases dramatically in both depth and breadth, which will feel overwhelming at times

Your brain will adjust over time and will learn how to filter it and what to capture. Perhaps you will experiment and pick up some tools/techniques in the process.
Make conscious deliberate decisions about what information you need vs want and why. The temptation to over-consume information to ‘stay on top of things’ (sense of control) is dangerous, so be strategic about it as a means to be tactical about your limited time, energy and brain capacity.
Every time you make a step change in leadership reset your expectations and re-review regularly your information needs. Give yourself time and space to figure it out over time.
Avoid being overly reactive to new information and apply self-control over the urge to explore/act on it unless needed.
Learn to let go and live in an imperfect world where you can only focus on what’s on N things at a time.
Accept that you will start getting exposed to information that you may not understand fully, so sometimes focus less on the information itself, but the thought processes and approaches behind it. Use coaching and curious questioning. Build trust.
Develop your people’s communication skills, so that information is presented at the right level of detail given the context its needed. Give peers feedback on such.
Make sure to allocate time and space to give yourself a chance to process and reflect.
Build a support structure for your self - peer community, coach, mentor. Learn how others are doing things.

5. The general level of uncertainty and ambiguity will rapidly increase which may leave your feeling anxious, scared and out of control

For new engineering managers it can be a big challenge emotionally, because there is no replacement for the predictability and early validation possible in the software development cycle (write code -> validate it works -> ship it to production). There are also no quick fixes after something goes “live”.
Accept that with every leadership step-change it will feel like uncertainty will increase - in part because it’s an entirely new role, but also because there will be more moving pieces and more people involved in the execution.
Avoid succumbing to the need for control, which is a natural tendency of the anxiety that comes and accept that you will simply not ever be in control. Adding more process, diving deeper into details to assure yourself is common action, but is a good recipe for burnout and dissatisfaction on the other side of it.
Avoid over-thinking and looking for perfection in decisions.
Accept that thing will go wrong - it’s simply a matter of fact. The best learnings come from failure (do we even learn anything when we succeed?)
Focus on iterating on your ability to set clear expectations, communicate constrains.
Learn to build trust, to let go and to build the right framework for you to have a “good enough” confidence and comfort with things, without over-indexing on reactivity due to the emotional impact of uncertainty.
When you feel out of control, take a deep breath and re-focus on what you are in control of and deliberately let go of what you can’t. Don’t bottle that tension and stress up.
Try some mindfulness practice to build emotional resiliency in what may seem like high pressure situations.
Get someone to talk to - a coach, a mentor, peers. The worst thing you can do for yourself is be overwhelmed alone.

6. The mistakes that you make will have more impact than before, which can increase the level of fear, anxiety and internal pressure to get things “right”

Watch out for the fear of failure causing anxiety, vulnerability, and behaviour such as perfectionism, overthinking, etc. Improve your mindfulness skills to pick it up.
Accept that you will make mistakes. It’s not a question of if, but more of a question of when. At the end of the day, we are all human and as such we are flawed in many ways, so mistakes are part of our nature.
Accept that you will fail. It’s a question of when, not if. Failure is hard emotionally, but is the best source of learning. Do we even learn from success?
Identify your tolerance for acceptable risk and play around with stretching it.
Do accept and acknowledge all the uncomfortable feelings that come with this - it will help build your tolerance, thus emotional resilience to them.
Sanity check your emotions with some introspective questions, such as “What is the worst that will happen?”
Swich from “What if “ type of thinking to “How will I handle”, but try to avoid getting into overthinking spirals. As you will learn, with time, there is no “right decision” - you can simply optimize for what you know at the time, hope for the best and believe that you will be able to deal with the consequences.
Avoid working in toxic company culture, where failure and mistake is a dirty word.
Use data to evaluate options and decisions.
Don’t let your ego (bruised or not) to get in the way of recognising mistakes and failure. Have you seen mistakes being swept under the carpet by leaders before? It’s important to be honest, transparent and exercise humility and vulnerability when it happens and focus on the learnings and moving forward. Be real.
Build yourself a support structure around you (manager, mentor, peers)

7. Your sense of achievement and impact may take a hit, which can create dissatisfaction creep and can affect your confidence.

This is very relevant for new engineering managers who are transitioning from doing to enabling/supporting/empowering/facilitating/etc. This is because up until this point the sense of achievement is likely based (and measured) on direct impact made through output (e.g. code), whereas now the impact be less indirect and there will be a sense of lack of be output “to show for it”.
This can be an even harder transition, when a manager becomes a manager of managers and thus steps out of the team that is delivering the impact.
It’s normal - it’s an adjustment of how you measure you worth and value-add as part of the role transition you are going through. It can take time as it’s a mindset shift and your brain will need time to rewire.
Re-think and redefine what you see as “win” and “impact” for yourself. Train your brain to start notice even the smallest of wins. Be your own cheerleader.
Avoid self-lowering thinking such as “I am not being useful or not adding value”. There might be times where indeed you are not adding value to your teams as they are self-sufficient, so be mindful and aware when to refocus your time between types of focus.
Accept that feedback loops are longer and thus it may take time to see the impact of your actions, so aim to set yourself measurable goals and get regular feedback.
Watch out for your need for creativity and keeping your creative self fulfilled too. This will affect different people at different intensity. Find something ‘yours’ and focus on it, when you have time. Alternatively look to rebalance outside of work.

8. Your sense of expertise will erode and morph over time, which can challenge your sense of competency and result imposter syndrome

It’s important to acknowledge that - the sooner the better. Every time you make a step change in leadership you are going into a new role. And surprise, surprise the goal is not to be an expert in your past role any more, so watch out not to act like one.
As you make step changes up the leadership ladder, some of your powers (e.g. ‘knowledge’) will diminish, but some others will grow (e.g. influencing). However, there may be a temporary period where you feel the disbalance and it may be frustrating until you hit the rebalancing sweet spot.
Managing someone in a role that you were very recently (e..g managing a manager when you were a manager recently) can trigger all sorts of insecurities if you don’t focus on nurturing your growth mindset. For example you may feel inadequate because you suddenly realize the way you did something before was not very good when you compare yourself/your approach to someone you manage. But, actually that’s awesome - you have just learnt something new, but also identified someone that’s very good at something that you can lean on. It’s all about perspectives. Also in general comparing yourself with others is no good anyway, so avoid in general.
Watch out for assuming that you should have a right answer and even an answer to questions that hit you by direct reports. You can’t possibly have all the answers and assuming this so will erode your confidence and competency perception, which in turn will fill you with guilt and voila - imposter syndrome. Build some coaching skills and find mentors for your direct reports for areas they need, where you can’t support them directly.
Be humble and learn. Ego is the enemy here.
If you care about this, a wonderful way to maintain some level of expertise is to learn from others and the output of others in the company and outside (e.g. system designs/RFC that are being produced by teams). Asking lots of questions in a curious way and being upfront what you want to get out of it (e.g. not interrogating/challenging) can be helpful too. Going to conferences and meetups is another way.

9. Having an increased scope of accountability can put more internal and external pressure, increasing your stress levels

Your emotional resilience will build up over time, but it’s absolutely critical to take good care of yourself at all times and find ways to cope with stress, anxiety, etc.
Focus on growing people internally and hiring so that you can delegate and grow other leaders, whilst sharing the load to create sustainability
Focus on improving your expectation management, communication, time management, prioritization, delegation skills.
There are various tools out there that can help you evaluate your accountabilities and responsibilities and evaluate where the priority of your energy-spent should be. Ask your peers, your manager for opinions as well, where is your time and energy best spent as you may end up making the wrong assumptions.
Learn to say no constructively, when needed - it’s a skill.
Find a mentor and a coach to support you

10. Supporting (and working with) an increased number of people (direct reports, skip-level reports, etc) will have a toll on you emotionally

Your emotional resilience will build up over time naturally as you get exposed to more scenarios and situations, but it’s super duper mega important to take care of yourself meanwhile. Whilst it’s easy to say “take care of yourself”, it can be harder to achieve as leadership can put you in a new place in life and how to do that may be non-obvious.
Coaching and mentoring skills can help you turn what would be situations ending up with emotional baggage to situations, which end up with no baggage and positive forward momentum.
Build self-awareness (e.g. through mindfulness practice and skill building) skills to help you improve your Emotional Intelligence and help you regulate and manage your emotional state better.
Build self-troubleshooting skills, such as introspection, reflective writing to help you train your brain and build a mindset of seeing things the same experience from different perspectives and angles.
Be clear with yourself what your values are as this will help you identify and acknowledge internal (in yourself) and external (with others) emotional conflict and thus work with it.
Get a coach and a mentor. Don’t shy away from working on a deeper level, if needed, with a psychologist/psychotherapy professional as well - working with other people can be a great way to retrigger any relational or other traumas, or simply old unresolved experiences from your past whether you are aware of it or not.

11. It can be hard to say no and/or disappoint people

Hard truth of leadership is that you will not liked by everyone and your job is not to please everyone, so the sooner you get comfortable with that - the better.
Avoid taking ownership ownership or responsibility for the emotional responses of people (e.g. disappointment, frustration, dissatisfaction) as this will lead to unnecessary sticky guilt and feeling bad about stuff (and associated fear of letting them down due to ownership taken). Do maintain a curious mindset and perhaps help them reframe and evaluate things for themselves from different perspectives.
Try to reframe personalization thinking (“I am disappointing them”) to de-personalized (the situation, circumstance, decisions and outcomes thereof. And no - I am not suggesting you do that when you need to own up to a mistake you’ve made, which is often people that don’t own their mistakes do, which in turn leads to double the erosion of trust.
Never leave space for assumptions (for both yourself and them) - be honest and direct, even if very uncomfortable. Learn to be uncomfortable, accept it and cherish it - it means you are growing emotionally.
Don’t internalize organizational limitations (aka circumstantial/situational limitations), which are negatively impacting people, as a personal failure (e.g. redundancies, teams becoming anaemic due to attrition, etc). Identify what’s within your control and influence and what isn’t as you don’t want to get sticky feelings of powerlessness/disempowerment, which will unnecessarily affect your confidence.
Consider that what on the surface may seem negative, can actually be very positive when looked from different angles. E.g. delivering uncomfortable constructive feedback that may affect the other person emotionally may be tough, but it will be helpful for their growth. Letting go someone from a team may be helpful for the team and for them to find a better fit place, etc. Not having someone promoted might save them from difficult times if they weren’t ready yet.
Practice and even do some role play with someone if that helps. Saying no and delivering hard messages is a skill.

12. When people you manage leave, it can create self-doubt and insecurity

Don’t overthink it and make assumptions and focus on the facts and what you know and what your data points are telling you (e.g. feedback).
Remember that people are empowered to make a choice for what’s right for them and that’s a good thing.
Focus on the positives - often people will leave, because they have had a chance to learn and grow and have decided to move on to the next thing and use what they have learnt. Or it could be because they have found a place that they will earn more money, get more challenge, and so on and that’s good for them. Most of the time someone leaving can be quite positive, even if it creates practical pains
Focus on having a solid succession plan in place to reduce the practical pain of people leaving.

13. You will be swimming in new and unfamiliar territory a lot of the time and this can make you feel vulnerable

Vulnerability, when acknowledged, can be very uncomfortable. Even acknowledging it can be hard as it may go against the brain’s self-preservation instincts. It may take building some mindfulness skills and reducing your emotional reactivity and increasing your tolerance to the feeling get there.
Embrace the feelings that come with vulnerability and don’t try to run way as that will only result compensatory/defensive behaviours, which are probably the wrong thing to do (e.g. micromanaging, too much process, etc)
Don’t jump too quickly into conclusions and actions - check-in on your motivations.
Ego is the enemy as it aims to protect our vulnerable self and thus deny us the humble growth mindset.
Vulnerability is powerful and not a weakness, as when your emotional tolerance to it is built up it can empower you in many different ways.

MSpec (Machine Specifications) support for .csproj-based .NET Core projects now available

Fri, 17 Mar 2017 00:00:00 +0000

I am pleased to announce that it is now possible to use and run Mspec (Machine Specification) tests when using .csproj based .NET Standard / .NET Core projects including multi-targeting scenarios.

The runner (Machine.Specifications.Runner.VisualStudio nuget package) supports:

dotnet test
Visual Studio’s Test Explorer
vstest.console
Visual Studio Team Services and TFS

For information on how to migrate from project.json to .csproj-based mspec tests please refer to this wiki page.

Another news is that Machine.Fake 2.8.0 is now also available with .NET Core (.NET Standard) support for Moq, FakeItEasy and NSubstitute.

Here is an example .csproj targeting both .NET Core 1.1 and .NET Framework 4.6:

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>    
    <TargetFrameworks>netcoreapp1.1;net46</TargetFrameworks>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Machine.Specifications" Version="0.11.0" />
    <PackageReference Include="Machine.Specifications.Runner.VisualStudio" Version="2.*" />
    <PackageReference Include="Microsoft.NET.Test.Sdk" Version="15.*" />
  </ItemGroup>
</Project>

Example output:

C:\code\mspec-test-sample\MSpecSampleSolution\Sample>dotnet test
Build started, please wait...
Build completed.

Test run for C:\code\mspec-test-sample\MSpecSampleSolution\Sample\bin\Debug\netcoreapp1.1\MSpecSample.dll(.NETCoreApp,Version=v1.1)
Microsoft (R) Test Execution Command Line Tool Version 15.0.0.0
Copyright (c) Microsoft Corporation.  All rights reserved.

Starting test execution, please wait...
Machine Specifications Visual Studio Test Adapter - Executing Specifications.
Machine Specifications Visual Studio Test Adapter - Executing tests in C:\code\mspec-test-sample\MSpecSampleSolution\Sample\bin\Debug\netcoreapp1.1\MSpecSample.dll
Complete on 1 assemblies

Total tests: 1. Passed: 1. Failed: 0. Skipped: 0.
Test Run Successful.
Test execution time: 0.8338 Seconds


Test run for C:\code\mspec-test-sample\MSpecSampleSolution\Sample\bin\Debug\net46\MSpecSample.dll(.NETFramework,Version=v4.6)
Microsoft (R) Test Execution Command Line Tool Version 15.0.0.0
Copyright (c) Microsoft Corporation.  All rights reserved.

Starting test execution, please wait...
Machine Specifications Visual Studio Test Adapter - Executing Specifications.
Machine Specifications Visual Studio Test Adapter - Executing tests in C:\code\mspec-test-sample\MSpecSampleSolution\Sample\bin\Debug\net46\MSpecSample.dll
Complete on 1 assemblies

Total tests: 1. Passed: 1. Failed: 0. Skipped: 0.
Test Run Successful.
Test execution time: 0.7364 Seconds

New features and improvements coming to C# in Visual Studio Code

Thu, 18 Aug 2016 00:00:00 +0000

Visual Studio Code is my editor of choice (even) for C#/.NET (unless I need to do some serious refactoring or software archeology exercise in the Visual Studio IDE with ReSharper). I’ve noticed a couple of opportunities for imporovements in the C# extension (GitHub) and a couple of merged pull requests all of the below updates are now available in the latest 1.4 beta of the C# extension and will land in the next release.

New: Navigate and view code of symbols for which source code is unavailable

The ability to dive into the structure of any type even such without source code was a major feature I missed in Visual Studio Code when working with a lot of third party dependencies. Now it’s here and supported are both “Go to definition” as well as “Peek Definition”:

New: C# 6 Expression bodied members syntax highlighting

Before

Note how the last declaration used to break the highlighting:

After

Improved: Namespace and usings syntax highlighting

Before

After

Improved: Method parameters highlighting

Before

After

Fixed: Reserved word highlighting (@class, etc)

Using @class used to break the highlighting for example in this case:

Announcing Machine.Specifications (MSpec) 0.11 for .NET Core, .NET CLI and .NET Standard

Fri, 05 Aug 2016 00:00:00 +0000

I am delighted to announce that MSpec (Machine.Specifications) is now available for .NET Standard 1.3+ together with a new .NET CLI (dotnet test) test runner for .NET Core and .NET 4.5+.

If you are not sure what MSpec is - scroll down for a quick intro. In short it’s a “context/specification” test framework.

This is backwards compatible version, so there shouldn’t be any issues using this version with ReSharper, CodeRush or other test runners when targeting the .NET Framework.

Package	Version	NuGet
dotnet-test-mspec	0.2.0	NuGet
Machine.Specifications	0.11.0	NuGet
Machine.Specifications.Should	0.11.0	NuGet
Machine.Fakes	2.8.0-beta3	NuGet
Machine.Fakes.Moq	2.8.0-beta3	NuGet

Machine.Fakes.Moq is in beta due to the underlying Moq dependency not having yet a stable release for .NET Standard.

Useful Links

Getting started on .Net Core and .NET CLI

Here is an example project.json of a tests project which targets both .NET Core and .NET 4.5. As you can see it includes:

Dependency on Machine.Specifications and dotnet-test-mspec
"testRunner": "mspec"

project.json

{
    "testRunner": "mspec",
    "frameworks": {
        "net45": { },
        "netcoreapp1.0": {
            "dependencies": {
                "Microsoft.NETCore.App": {
                    "version": "1.*",
                    "type": "platform"
                }
            }
        }
    },
    "dependencies": {
        "FluentAssertions": "4.12.0",
        "Machine.Specifications": "0.11.0",
        "dotnet-test-mspec": "*"
    }
}

We can now use dotnet test to run the tests:

> dotnet test

Project Example (.NETCoreApp,Version=v1.0) was previously compiled. Skipping compilation.

dotnet-test-mspec: 0.2.0
Machine.Specifications: 0.11.0.0
Specs in Example:
...***

Contexts: 3, Specifications: 6, Time: 0.13 seconds
  3 passed, 0 failed, 3 not implemented

Project Example (.NETFramework,Version=v4.5) was previously compiled. Skipping compilation.

dotnet-test-mspec: 0.2.0
Machine.Specifications: 1.0.*
Specs in Example:
...***

Contexts: 3, Specifications: 6, Time: 0.09 seconds
  3 passed, 0 failed, 3 not implemented

SUMMARY: Total: 2 targets, Passed: 2, Failed: 0.

Known Issues with the dotnet cli (dotnet test) runner

IDE integration (aka Design-Time) is not yet implemented, so you won’t be able to see or run test in Visual Studio IDE: #303
The console output format doesn’t have colours and enough new line padding, etc. This is an upstream issue with dotnet test and hopefully will be fixed in the next preview. #311. This is potentially blocking the TeamCity and AppVeyor auto-detect outputs.

Hopefully they should land in v0.3 of the test runner.

What is MSpec?

MSpec is called a “context/specification” test framework because of the “grammar” that is used in describing and coding the tests or “specs”. That grammar reads roughly like this

When the system is in such a state, and a certain action occurs, it should do such-and-such or be in some end state.

You should be able to see the components of the traditional Arrange-Act-Assert model in there. To support readability and remove as much “noise” as possible, MSpec eschews the traditional attribute-on-method model of test construction. It instead uses custom .NET delegates that you assign anonymous methods and asks you to name them following a certain convention.

You can read more about MSpec in the docs here.

[Subject("Authentication")]
public class When_authenticating_an_admin_user
{
    Establish context = () => {
        Subject = new SecurityService();
    };

    Because of = () => {
        Token = Subject.Authenticate("username", "password");
    };

    It should_indicate_the_users_role = () => {
        Token.Role.ShouldEqual(Roles.Admin);
    };

    It should_have_a_unique_session_id = () => {
        Token.SessionId.ShouldNotBeNull();
    };

    static SecurityService Subject;
    static UserToken Token;
}

and an example of Machine.Fakes usage in MSpec:

[Subject("Authentication")]
public class When_authenticating_an_admin_user : WithFakes
{
    Establish context = () => {
        Subject = new SecurityService(The<SecurityClient>());

        The<SecurityClient>()
            .WhenToldTo(client => client.SendRequest(Param<string>.IsAny))
            .Returns(true);
    };

    Because of = () => {
        Subject.Authenticate("username", "password");
    };

    It should_request_a_token = () => {
        The<SecurityClient>()
            .WasTaldTo(client => client.RequestToken());
    };

    static SecurityService Subject;
}

How does TypeScript discover type declarations and definitions for JavaScript code?

Tue, 07 Jun 2016 00:00:00 +0000

In this blog post I will cover how TypeScript discovers type declarations and the subtle differences in what they should look like depending on where they live.

Edit: Note that Visual Studio IDE, Visual Studio Code and possibly other editors have built their TypeScript/JavaScript intellisense on top of the TypeScript language service (that is - TypeScript itself), so all of the below apply for those as well.

Let’s say that we have a JavaScript module like the one below and we want to consume it together with type declarations either in TypeScript or JavaScript (TypeScripts can process JavaScript and provide intellisense via allowJs).

Our JavaScript module code

hello.js

module.exports.Name = function(first, last) {
  this.first = first;
  this.last = last;
}

module.exports.sayHi = function(name) {
  console.log(```Hi ${name.first} ${name.last}!```);
};

We want to consume it in TypeScript and we do this:

main.ts

import * as hello from 'hello';

hello.sayHi(new hello.Name("Ivan", "Zlatev"));

This will trigger a search for type declarations during the compilation/transpilation phase, so let’s go through the various possibilities.

Tripple slash comments

The legacy way to tell TypeScript that we have type declarations we want it to use for hello is to use a triple slash comment like this:

/// <reference path="path/to/declarations.d.ts" />

import * as hello from 'hello';

hello.sayHi(new hello.Name("Ivan", "Zlatev"));

And have declarations.d.ts that looks like this:

declare module 'hello' {
    export class Name
    {
        constructor(first : string, last : string);
        first: string;
        last: string;
    }

    export function sayHi(name: Name) : void;
}

Notice the use of declare module 'hello'. This is an ambient declaration and what it means is that we are telling TypeScript: “There exists a module called “hello” which exposes these types”.

This is not particlarly great approach and is error and frustration prone - We have to manually maintain the list of references and ensure the ordering is correct.

One benefit of this method is that it allows the creation of import-all.d.ts type of file with a list of references - a method used by typings (the successor to tsd) to create an “index” file with reference list to all installed typings.

tsconfig.json

The tsconfig.json file defines the TypeScript project/workspace when tsc --project directory_here is used. Among other things it supports two modes for defining the code files to process in the workspace/project:

(default) Include all *.ts (so also *.d.ts) files recursively. Files/paths can optionally be excluded using exclude: [ "path1", "path2" ]
Explicitly include a specific set of files for processing using include: [ "path1", "path2" ]

What this means for us is that as long as the our type declarations files are included (implicitly or explicitly) in the tsconfig.json we don’t need to use triple slash comments to reference them, because they will already be part of the project/workspace.

A typical tsconfig.json can look like this.

{
  "compilerOptions": {
    "target": "es5",
    "noImplicitAny": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "build"
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules",
    ".vscode"
  ]
}

You will find that when using typings (the successor to tsd) it will automatically ensure that the type declarations are included in the paths of tsconfig.json.

Local JavaScript module type declaration

Given a hello.js file which exports a module TypeScript will look for A hello.d.ts file (same file name basically).

In our case the type declaration in that file will look like the one below. Note how there is no longer a declare module 'hello' bit in the file. We no how an external module type declaration (and not an ambient one) :

export class Name
{
    constructor(first : string, last : string);
    first: string;
    last: string;
}

export function sayHi(name: Name) : void;

NPM package “typings:”

Given a module named hello TypeScript will look across the NPM packages and inside the package.json for any typings: 'path/to/definitions.ts.d' and use that. In our case again will look like this:

export class Name
{
    constructor(first : string, last : string);
    first: string;
    last: string;
}

export function sayHi(name: Name) : void;

Note the meaning of “ambient”

In a web browser environment when jQuery is imported - it declares a global variable $, which is accessible everywhere. Antother example is the Node environment - we get access to a bunch of functions things without having to import specific packages.

In such a case we are likely to see *.d.ts with global ambient declarations (“something has declared X function/variable and it looks like this”). E.g. for jQuery something like this:

declare var $: JQueryStatic;

Unfortunately some of the terminology/naming is inconsistent across tsd, typings and TypeScript itself (GitHub issue), which I personally found frustrating when trying to write type declarations for the first time.

Farewell project.json - hello MSBuild and .csproj (.NET Core)

Tue, 17 May 2016 00:00:00 +0000

Farewell project.json

There was a fairly important update from Microsoft last week, which I personally felt went a bit under the cover.

The .NET Core (and other teams) have decided to drop project.json and go back to MSBuild and *.csproj. This is not something that’s already happened in the just released .Net Core RC2 and ASP.NET Core RC2, but it’s happening.

Wondering where that announcement was made? As far as I know - there wasn’t necessarily one. It was mentioned in the stand-up (see the video at the end of this post).

This is fairly disappointing, because the project.json was a breath of fresh air. However it’s understandable (to an extend):

It would make the transition of existing Visual Studio solutions to .NET Core straightforward
It’s a huge change. It will enable leveraging existing investment in CI/RM based around MSBuild.
There is a lot going on under the hood during build in MSBuild. Think incremental compilation, resolving build-time dependencies, configuration management and tons more (hidden behind the e.g. Microsoft.CSharp.targets imported by every project). And all of that will have to be re-implemented.
Too much work to ship dotnet cli on time - remember that it’s no longer just about ASP.NET Core, but also console apps, UWP apps, Xamarin apps.
The .NET core team would have eventually ended up probably implementing/re-implementing parts of MSBuild.

Still that doesn’t make me happier right now.

Hello MSBuild and .csproj

Appears this is what will happen in future releases:

*.xproj will be replaced by *.csproj
Features in project.json will start getting merged back into the the *.csproj
It is not yet clear what they are going to do about the packages list, but it was mentioned they might keep it as json under nuget.json or merge it into the .csproj. GitHub issue tracking this here: https://github.com/aspnet/Home/issues/1433
Supposedly that transition should be smooth and potentially automatic if using Visual Studio

The good news is that:

MSBuild is open source and available on GitHub and is bound to become fully cross-platform
They is an effort to dramatically simplify and trim the structure of the .csproj - e.g. remove the requirement to have a list of files. GitHub issue here: https://github.com/dotnet/roslyn-project-system/issues/40
There is a new revamped project system coming which will enable a lot of scenarios without the need for Visual Studio: https://github.com/dotnet/roslyn-project-system/
The goal is that even with the MSBuild set-up working with builds and project will be as seamless in Visual Studio IDE as outside of it.

Announcement video

Machine.Specifications.Runner.VisualStudio 2.0.0-rc1 is out with many improvements

Fri, 11 Mar 2016 00:00:00 +0000

This is a significant update to the Test Adapter with substantial improvements on which I have been working over the past weeks.

Get it here: https://github.com/machine-visualstudio/machine.vstestadapter/releases/tag/v2.0.0-rc1

New test discovery engine built directly on top of MSpec replaces old Mono.Cecil based one:
- Full support for [Behavior] and Behaves_like<> and everything MSpec
- Full support for assembly binding (.config) during test discovery (and execution)
Out of the box support for Visual Studio Online, TFS, Visual Studio Team Services through the NuGet package
- Major performance improvements when running whole test assemblies
- Much clearer test result output
- Fully compatible with VS parallel assembly execution (enabled through MaxCpuCount set to 0 in *.runsettings)
Inner exceptions are now displayed in failed test results
Tests in Visual Studio IDE are now displayed as English text

MSpec (Machine.Specifications) Visual Studio Adapter 1.7.0 released

Thu, 28 Jan 2016 00:00:00 +0000

In the last 2 weeks or so, I have given a helping hand to Jonathan Wilkins with the MSpec Visual Studio adapter project. My initial main focus was to get the adapter nuget ready, so that it can be used in Visual Studio Online (now Team Services) seamlessly. I have also set-up a CI environment in AppVeyor.

If the udpated Visual Studio extensions is not live yet at the time you read this blog post - you can grab it from the GitHub release: https://github.com/machine-visualstudio/machine.vstestadapter/releases/tag/v1.7.0

Release notes below. If you are curious what is potentially cooking in the next 1.8.0 relase - you can look here: https://github.com/machine-visualstudio/machine.vstestadapter/issues?q=is%3Aopen+is%3Aissue+milestone%3A1.8.0

What’s new

Upgraded to use Machine.Specifications 0.9.3
The adapter now is distributed through a NuGet package in addition to the Visual Studio extension to enable Continuous Integration/Delivery scenario
- https://www.nuget.org/packages/Machine.Specifications.Runner.VisualStudio/
The adaptor is now set-up with Continuous Integration and builds of the NuGet package and VSIX extension can be downloaded from AppVeyor
- https://ci.appveyor.com/project/machine-visualstudio/machine-vstestadapter

Using the adaptor in Visual Studio Team Services (Visual Studio Online) build and release

CorrelatorSharp: Your one stop shop for context-aware logging and diagnostics

Sat, 12 Dec 2015 00:00:00 +0000

In the world of microservices and distributed systems it is very important to relate logging and diagnostic information of multiple services in the context of an operation to quickly diagnose issues.

What is CorrelatorSharp?

CorrelatorSharp is a .NET library that enables context-aware logging and correlation with no code changes or minimal such.

CorrelatorSharp is async/await aware and the current activity flows across tasks and threads automatically.

CorrelatorSharp supports out of the box (at the time of writing this post):

ASP.NET MVC 5
ASP.NET Web API
RestSharp
NLog
Application Insights

Support for the following is also planned: WCF server/client, Azure Service Bus, Azure Storage Queue, CoreCLR.

Using CorrelatorSharp in 5 minutes

1. Enable in Web API in Service “B”

Use the CorrelatorSharp.WebApi package:

config.Filters.Add(new CorrelationIdActionFilter());

2. Log the current correlation id

You can do it manually (or through one of the CorrelatorSharp packages such as CorrelatorSharp.NLog or CorrelatorSharp.ApplicationInsights):

Console.WriteLine("Current Activity Id: " + ActivityScope.Current.Id);
Console.WriteLine("Current Activity Name: " + ActivityScope.Current.Name);
Console.WriteLine("Current Activity ParentId: " + ActivityScope.Current.ParentId);

3. Pass the correlation id from Service “A” to Service “B”

If you are using RestSharp you can use the CorrelatorSharp.RestSharp or just add a X-Correlation-Id header to your requests:

RestRequest request;

request.AddCorrelationHeader();

4. Manage activity scopes

using (ActivityScope scope = new ActivityScope("Operation")) {
      Console.WriteLine("Current Activity Id: " + ActivityScope.Current.Id);
      Console.WriteLine("Current Activity Name: " + ActivityScope.Current.Name);
      Console.WriteLine("Current Activity ParentId: " + ActivityScope.Current.ParentId);

  using (ActivityScope nestedScope = new ActivityScope("Nested Operation")) {
      Console.WriteLine("Current Activity Id: " + ActivityScope.Current.Id);
      Console.WriteLine("Current Activity Name: " + ActivityScope.Current.Name);
      Console.WriteLine("Current Activity ParentId: " + ActivityScope.Current.ParentId);
  }
}

Example output:

Current Activity Id: 4050a075-51db-4e62-8a92-17720a73045e
Current Activity Name: Operation
Current Activity ParentId:

Current Activity Id: 2d7aa66d-62b4-406d-91e4-ea3305690675
Current Activity Name: Nested Operation
Current Activity ParentId: 4050a075-51db-4e62-8a92-17720a73045e

Get it now

NuGet
GitHub

MarketInvoice Roslyn Pack 0.1 released

Mon, 12 Oct 2015 00:00:00 +0000

Innovation Mondays at MarketInvoice

At MarketInvoice we run “Innovation Mondays” on the first Monday of every Sprint (at the time of writing this post we are running two week sprints). It’s an opportunity for the Engineering team to hack on new ideas and projects, explore new technologies and learn new things either in groups or individually. We discuss our achievements, prototypes and findings in our weekly two hour Wednesday lunch. We use this lunch to also have lunch and learn sessions (we recently had an F# and Akka.Net one), have an open discussion about our technology stack, processes, activities and anything that gets raised by team members prior to the team meeting.

One of the mini-projects from this week is the first release of our MarketInvoice Roslyn Pack, which is to become a collection of refactorings, code formatters, code analysis and code fixes.

Download and Install

Download Visual Studio Extension: https://visualstudiogallery.msdn.microsoft.com/9a7f4b28-f068-4417-a021-8a770d352ea9

Source Code here: https://github.com/marketinvoice/MarketInvoice.CodeAnalysis

What’s included

We’ve decided to stay minimal and have implemented two refactorings only:

1. Break parameters and arguments apart

2. Line-up parameters and arguments

What about Refactoring Essentials?

We are aware (and are using) the Refactoring Essentials, but we have decided that at least initially we would like to iterate rapidly and thus not be tied in to their release cycle. Having said that - we will definitely look into contributing some of our work to Refactoring Essentials.

FluentMigrator Part 2/3: Continuous Integration and Testing with database migrations

Sun, 13 Sep 2015 00:00:00 +0000

In this series

FluentMigrator Part 1/3: Creating and running our first database migration
FluentMigrator Part 2/3: Continuous Integration and Testing with database migrations (this post)
FluentMigrator Part 3/3: Continuous Delivery with database migrations

Having created and ran our first database migration - in this post we are going to cover the following scenario:

We want to write integration tests that hit a real database in our local developer environment
We want to also run those tests on our build server as part of every check-in

The Plan

We want to be able to do the following:

Create a temporary unique database for use with our test fixture only
Migrate the database to the latest version to match the code
Run the tests
Delete the temporary database

The end goal is to be able to write tests like this using a nicely reusable base test fixture that will do all the magic for us.

public class SavingCarsNUnitTest : DatabaseTestFixtureBase
{

    [Test]
    public void When_a_car_is_saved_in_the_database_it_should_succeed()
    {
        CarsDbContext context = new CarsDbContext(base.ConnectionString);
        context.Cars.Add(new Car() {
            Make = "make",
            Model = "model",
        });
        context.SaveChanges();
    }
}

[TestFixture]
public abstract class DatabaseTestFixtureBase
{
    private IntegrationTestLifecycle _testLifeCycle = new IntegrationTestLifecycle();

    protected string ConnectionString {
        get { return _testLifeCycle.ConnectionString; }
    }

    [TestFixtureSetUp]
    public virtual void SetUpFixture()
    {
        _testLifeCycle.SetUp(Settings.Default.ConnectionStringTemplate);
    }

    [TestFixtureTearDown]
    public virtual void TearDownFixture()
    {
        _testLifeCycle.TearDown();
        _testLifeCycle.Dispose();
    }
}

Automating the creation and deletaion of the database for the test fixture

The first problem that we face is that we need a database to run our tests against. However:

We need a temporary database to avoid sharing it across test runs and thus inconsistent states and false positives
Whichever way we automate the database creation process - we need to tell our tests where to connect to.

The way we’ve solved this problem at MarketInvoice is by:

Running a SQL Server instance (free through MSDN) to be used by our integration tests
We’ve built an IntegrationTestLifecycle component that:
- Creates a temporary database with a unique name
- Provides a connection string to the consumer
- Cleans up and deletes the temporary database on request

Let’s dive in the code of the IntegrationTestLifecycle class a bit…

public class IntegrationTestLifecycle : IDisposable
{
// <..snip...>
    public string ConnectionString { get; private set; }

    public void SetUp(string connectionStringTemplate)
    {
        string uniqueDatabaseConnectionString = GenerateUniqueDatabaseName(connectionStringTemplate);

        CreateDatabase(uniqueDatabaseConnectionString);

        DatabaseMigrationRunner.MigrateDatabase("SqlServer", uniqueDatabaseConnectionString);



        ConnectionString = uniqueDatabaseConnectionString;
    }
// <..snip...>
}

It’s pretty straightforward what’s happening here:

We are generating a unique database name to use:

private static string GenerateUniqueDatabaseName(string originialConnectionString)
{
    SqlConnectionStringBuilder connectionInfo = new SqlConnectionStringBuilder(originialConnectionString);
    connectionInfo.InitialCatalog = String.Format(CultureInfo.InvariantCulture, 
                                                    "{0}_{1}", 
                                                    connectionInfo.InitialCatalog, 
                                                    Guid.NewGuid().ToString());

    return connectionInfo.ToString();
}

We are creating a new database on the database server using that name:

private void CreateDatabase(string connectionString)
{
    SqlConnectionStringBuilder connectionInfo = new SqlConnectionStringBuilder(connectionString);

    SqlConnectionStringBuilder master = new SqlConnectionStringBuilder(connectionString) {
        InitialCatalog = "master"
    };

    using (SqlConnection sqlConnection = new SqlConnection(master.ToString()))
    using (SqlCommand createDbCommand = sqlConnection.CreateCommand()) {
        sqlConnection.Open();
        createDbCommand.CommandTimeout = DEFAULT_SQL_COMMAND_TIMEOUT;
        createDbCommand.CommandText = String.Format(
@"CREATE DATABASE [{0}] 
ALTER DATABASE [{0}] SET ALLOW_SNAPSHOT_ISOLATION ON 
ALTER DATABASE [{0}] SET RECOVERY SIMPLE", connectionInfo.InitialCatalog);
        createDbCommand.ExecuteNonQuery();
        sqlConnection.Close();
    }
}

We are migrating the database to the latest version (covered a bit later in this post)
We are exposing the brand new connection string to the consumer of the component.

Migrating the newly created database

In my previous blog post we looked at how to write a new migration on top of an existing schema. In the case of our integration tests’ life-cycle we are creating a new database, so we need to import the schema. We can do that by creating a version 0 migration.

To do that we are going to:

Export the current schema using SQL Server Management Studio using the Generate Scripts functionality

Remove any GO, USE statements and tell it not to generate the “CREATE DATABASE” statement. It will end up looking like this:

SET ANSI_NULLS ON

SET QUOTED_IDENTIFIER ON

CREATE TABLE [dbo].[Cars](
    [Id] [int] IDENTITY(1,1) NOT NULL,
    [Model] [nvarchar](max) NOT NULL,
PRIMARY KEY CLUSTERED 
(
    [Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

Add the .sql file as 0_CreateSchema.sql in our DatabaseMigrations project and set it to be an Embedded Resource (note how the file name will match our migration name):

Write our migration:

[Migration(0)]
public class _0_CreateSchema : ForwardOnlyMigration
{
    public override void Up()
    {
        Execute.EmbeddedScript("0_CreateSchema.sql");
    }
}

Finally let’s expose a simple Migration runner from our DatabaseMigrations project using the FluentMigrator.Runners NuGet package:

public class DatabaseMigrationRunner
{
    public static bool MigrateDatabase(string databaseType, string connectionString, Assembly migrationsAssembly)
    {
        try {
            RunnerContext runnerContext = new RunnerContext(new TextWriterAnnouncer(Console.Out)) {
                Database = databaseType,
                Connection = connectionString,
                Targets = new[] { migrationsAssembly.Location },
            };

            new TaskExecutor(runnerContext).Execute();
        } catch {
            return false;
        }

        return true;
    }
}

That’s it:

Downloading and running the sample code

You can find all code in this article at: https://github.com/ivanz/FluentMigratorSample

To edit the SQL Server used by the tests edit the Settings.settings file.

Speeding up test runs

The way we speed up test runs is by:

Running tests in multiple assemblies at the same time (For MSpec we use our parallel runner for TeamCity)
Sharing a database instance between a group of common tests.

FluentMigrator Part 1/3: Creating and running our first database migration

Sat, 12 Sep 2015 00:00:00 +0000

In this series

FluentMigrator Part 1/3: Creating and running our first database migration (this post)
FluentMigrator Part 2/3: Continuous Integration and Testing with database migrations
FluentMigrator Part 3/3: Continuous Delivery with database migrations

In this post we are going to cover:

What FluentMigrator is
How to create a database migration
How to run our database migration and then roll it back

What is FluentMigrator

FluentMigrator is a migration framework for .NET much like Ruby on Rails Migrations. Migrations are a structured way to alter your database schema and are an alternative to creating lots of sql scripts that have to be run manually by every developer involved. Migrations solve the problem of evolving a database schema for multiple databases (for example, the developer’s local database, the test database and the production database). Database schema changes are described in classes written in C# that can be checked into a version control system. [source]

Before we start

You can download all the code from this post at: https://github.com/ivanz/FluentMigratorSample
You will need either a SQL Server Express, SQL Server or an Azure SQL Database if you want to run the example.

Our Visual Studio solution

Let’s say we are building a Web App to catalogue cars. Our solution contains:

Domain - class library for our model and data access
WebApp- Simple MVC app
DatabaseMigrations - class library for our database migrations

This is what it looks like in Visual Studio:

And this is what it looks like when we run it:

Note: Any Entity Framework automatic database initialization/migration has been disabled in the data context.

Domain model and initial database schema

Our domain model:

public class Car
{
    public int Id { get; set; }
    public string Model { get; set; }
}

And our initial schema that matches that. Let’s assume for now that this schema is already in place in the database. We will revisit that later.

USE [master]
CREATE DATABASE [CarsDb]

USE [CarsDb]
CREATE TABLE [dbo].[Cars] (
    [Id]    INT            NOT NULL IDENTITY,
    [Model] NVARCHAR (MAX) NOT NULL,
    PRIMARY KEY CLUSTERED ([Id] ASC)
);

Creating our first database migration

Let’s add a new property to the our Car - let’s say Make, so now it looks like this:

public class Car
{
    public int Id { get; set; }
    public string Model { get; set; }

	// new:
    public string Make { get; set; }
}

To create our first database migration we need to add the FluentMigrator NuGet package to our DatabaseMigrations project.

Then we can use the fluent syntax to change the database schema to include the new column:

201509121634_Add_Make_Column_To_Car.cs

[Migration(201509121634)]
public class Add_Make_Column_To_Car : Migration
{
    public override void Up()
    {
        Create.Column("Make").OnTable("Cars").AsString(int.MaxValue).Nullable();
    }

    public override void Down()
    {
        Delete.Column("Make").FromTable("Cars");
    }
}

Anatomy of a database migration

Every migration has a version and the MigrationAttribute enables us to define the version of the database migration.

Using a timestamps-based version number (when the migration file was created) in the format of YearMonthDateHourMinute works really well for both the file name and the migration version, because:

Files in Visual Studio are displayed in the order they were created
Version number clashes are extremely unlikely

Up/Down methods (unless it’s a ForwardOnlyMigration) - to upgrade and downgrade the schema.

The fluent syntax of FluentMigrator supports pretty much everything you can think off:

Creating, altering columns, tables, foreign keys, indices, etc. .
Executing SQL statements through Execute.Sql("statements")
Executing embedded .sql files through Execute.Script("filename") / Execute.EmbeddedScript("filename").

Running our first migration and rolling it back

There are many ways to run the database migration we just created:

Command Line
PowerShell script
MSbuild task
NAnt task

Let’s use the command line tool provided by the FluentMigrator.Tools NuGet package.

Once installed Migrator.exe can be found at packages\FluentMigrator.Tools.1.6.0\tools\AnyCPU\40 and to migrate our database to the latest version we just have to point it to our database and supply the assembly that contains the database migrations.

"packages\FluentMigrator.Tools.1.6.0\tools\AnyCPU\40\Migrate.exe"^
 -a DatabaseMigrations\bin\Debug\DatabaseMigrations.dll^
 -provider SqlServer^
 -connection="Server=.;Database=CarsDb;Integrated Security=True;"

-------------------------------------------------------------------------------
=============================== FluentMigrator ================================
-------------------------------------------------------------------------------
Source Code:
  http://github.com/schambers/fluentmigrator
Ask For Help:
  http://groups.google.com/group/fluentmigrator-google-group
-------------------------------------------------------------------------------
[+] Using Database SqlServer and Connection String Server=.;Database=CarsDb;Integrated Security=True;
-------------------------------------------------------------------------------
201509121634: Add_Make_Column_To_Car migrating
-------------------------------------------------------------------------------
[+] Beginning Transaction
[+] CreateColumn Cars Make String
[+] Committing Transaction
[+] 201509121634: Add_Make_Column_To_Car migrated
[+] Task completed.

In the background this will create a new VersionInfo table that Fluent Migrator will use to track which version the database schema is at:

And to rollback one version:

"packages\FluentMigrator.Tools.1.6.0\tools\AnyCPU\40\Migrate.exe"^
 --task rollback^
 --steps=1^
 -a DatabaseMigrations\bin\Debug\DatabaseMigrations.dll^
 -provider SqlServer^
 -connection="Server=.;Database=CarsDb;Integrated Security=True;"

-------------------------------------------------------------------------------
=============================== FluentMigrator ================================
-------------------------------------------------------------------------------
Source Code:
  http://github.com/schambers/fluentmigrator
Ask For Help:
  http://groups.google.com/group/fluentmigrator-google-group
-------------------------------------------------------------------------------
[+] Using Database SqlServer and Connection String Server=.;Database=CarsDb;Integrated Security=True;
-------------------------------------------------------------------------------
201509121634: Add_Make_Column_To_Car reverting
-------------------------------------------------------------------------------
[+] Beginning Transaction
[+] DeleteColumn Cars Make
[+] Committing Transaction
[+] 201509121634: Add_Make_Column_To_Car reverted
[+] Task completed.

Summary

That’s pretty much the high level overview and in the next post we are going to look at how do we utilize FluentMigrator in a Continuous Integration scenario.

Using, configuring and distributing Roslyn analysers in teams

Sun, 06 Sep 2015 00:00:00 +0000

What are the Roslyn analysers?

As you should already know Roslyn is the name of new C# 6.0 (and Visual Basic) compiler, written entirely in C# (and VB for the VB one). The old compiler was written in C++ and this is a complete re-implementation. You can find Roslyn’s source code on GitHub.

However Roslyn is not just a compiler. It’s also and SDK (“.Net Compiler Platform”) which exposes the compiler as a service. Tools (such as Visual Studio, ReSharper, CodeRush, LinqPad) can directly hook into the syntax tree information exposed by the compiler to achieve various jobs such as code auto-completion, refactoring and code analysis. Previously those tools had to implement their own C# code parsing, effectively duplicating the compiler’s job. It’s a non-trivial task, so that’s why libraries such as NRefactory became popular. You will find it used across various tools - e.g. LinqPad, Xamarin Studio (I think).

In simplified terms Roslyn analysers are plug-ins that plug into the Roslyn compilation (parsing) pipeline and are able to spit out warnings and errors whilst editing code in Visual Studio and during compilation. They can also provide “code fixes”/refactorings.

I am not going to drill into the details of how the analysers are implemented or how to implemented one in this post, but focus more on how to use them across a team and continuous integration.

You can get all source code from this post at: https://github.com/ivanz/RoslynAnalysersUsageSample

Using Roslyn analysers as Visual Studio Extensions

The easiest way to get some extra analysers is to install the really good VS Refactoring Essentials analysers pack, which contains around 100 of them (and lots of refactoring tools).

Once you have them installed you will start seeing some warnings, such as this one:

Update: You may see sporadic MissingAnalyzerReference warnings with Refactoring Essentials and StyleCop to do with Visual Basic, which you can safely ignore. This bug is tracked in this GitHub issue.

This is great, however it’s not really useful unless everyone in the team has the extension installed, which on its own can be difficult to enforce or manage consistently.

Note on Solution Error Visualizer

I am using the Solution Error Visualizer plug-in as part of the free Productivity Power Tools for Visual Studio 2015 extension by Microsoft. This is where the underlining in the Solution Explorer of errors and warnings comes from.

Using Roslyn analysers as NuGet packages in a project

This brings us to the second option of using Roslyn analysers, which is to install them as a NuGet package in all projects in the Visual Studio solution.

Note that Visual Studio/Roslyn will handle that you could have the same analyser installed both as an extension (globally) and as a NuGet package (locally) and this won’t lead to duplicate warnings. However there is a bug where code fixes will be duplicated which is tracked here.

Once installed you will notice the analyser under the new Analysers section under References:

And if we look at the content of the .csproj file we will see this:

 <ItemGroup>
    <Analyzer Include="..\packages\RefactoringEssentials.1.2.0\analyzers\dotnet\RefactoringEssentials.dll" />
  </ItemGroup>

The downside is that we have to ensure that every new project added to the solution has the analyser NuGet package added to it, but automating that is not that hard (e.g. using pre-commit hooks in Git).

Configuring Roslyn analyser rules for a single project

That’s all great, but what if we don’t want to remove private from our fields, because it doesn’t conform to our code style? Or alternatively - we want it to be a hard error, so it conforms to our code style?

We can edit the current rules set by right clicking on Analysers and then changing the warning level:

Once saved a new file will shop up in the project RoslynAnalysersUsageSample.ruleset and if we open it we will see that the configuration has been added to the XML:

<?xml version="1.0" encoding="utf-8"?>
<RuleSet Name="Rules for RoslynAnalysersUsageSample" Description="Code analysis rules for RoslynAnalysersUsageSample.csproj." ToolsVersion="14.0">
  <Rules AnalyzerId="RefactoringEssentials" RuleNamespace="RefactoringEssentials">
    <Rule Id="RECS0145" Action="Error" />
  </Rules>
</RuleSet>

This is the same Rules Set file that we know from previous version of Visual Studio, which used to contain FxCop based rules. However an important note for those familiar with FxCop based Code Analysis rule sets is that all Roslyn analyser rules are enabled by default (in FxCop you had to add the rules explicitly).

Configuring Roslyn analyser rules for the whole solution

Let’s add a new project to the solution with the Refactoring Essentials NuGet package installed and copy paste the class above into the new project. We will notice that our custom Error level for the RECS0145 rule is not applied. And that’s because our previous customization only applied for that single project we edited:

To remedy that we need to:

Move out the RoslynAnalysersUsageSample.ruleset file in a more sensible place such as the root of the solution, because it will no longer apply for a single project.
Add it to the solution as a “Solution Item”
Configure the solution-level Code Analysis to use the rule set for all projects in the solution

That’s it!

Suppressing warnings in special cases

In those rare cases when there is a warning, but there is a valid reason why we have done something the way we have done it the System.Diagnostics.CodeAnalysis.SuppressMessage attribute can be used (or evil evil #pragma).

[SuppressMessage("Potential Code Quality Issues", 
                 "RECS0022:A catch clause that catches System.Exception and has an empty body", 
                 Justification = "This is an explanation why I have suppressed this warning.")]
void Start()
{
    try {
        throw new NotSupportedException();
    } catch { // warning here, becase the catch is empty
    }
}

Continuous Integration

No extra work is required if the code analysers are added to the solution as NuGet packages and included under Analysers.

There are two things to be aware of though:

You may see build errors if you don’t do a nuget restore .sln on the build server before calling msbuild. It appears the VS build is trying to read analyser info before nuget is able to restore the packages.
Roslyn analyser warnings are standard compiler warnings so you can use the TreatWarningsAsErrors MsBuild property too.

Final words

In this post we have covered:

What are Roslyn Analysers
How to use them in a team or individually
How to configure them across a project and a solution

I hope it was useful to you guys. Let me know in the comments!

Use a PIN code instead of password on your Surface Pro (or other Windows touch device)

Fri, 21 Nov 2014 00:00:00 +0000

Here are step instruction on how to replace the Windows login password prompt with a PIN code, especially on those yummy new Windows tablets (I am looking at you Surface Pro 3):

MSpec TeamCity Parallel Runner – NuGet package change

Sun, 09 Nov 2014 00:00:00 +0000

Two quick updates:

The mspec parallel test runner for TeamCity nuget package is now located at: https://www.nuget.org/packages/Machine.Specifications.TeamCityParallelRunner/

This change was required in order to start following the MSpec version numbers and package naming convention.

The package version as of this moment is 0.9.0, which matches MSpec 0.9.0.

If you know how to write a .nuspec which can tell NuGet that it should obsolete one package with another packages – do let me know, please.

Announcing an MSpec Parallel Test Runner for TeamCity (mspec-teamcity-prunner)

Sun, 26 Oct 2014 00:00:00 +0000

MSpec is absolutely great – no argument about it. I am using it exclusively in a current project to specify and test top to bottom. However one thing that has been bugging me for a long time is the inability to run tests in parallel on TeamCity. Most Visual Studio tools support it (CodeRush, ReSharper, etc) – why shouldn’t it be possible to do it on the build server? And as test run time kept increasing I finally got fed up and did something about it.

I am pleased to announce mspec-teamcity-prunner.exe. It is a drop-in replacement for the default console runner (mspec.exe) with the major difference that through the –threads N parameter you can specify the number of assemblies to run in parallel.

Drop-in replacement means that all you need to do is swap the path to mspec.exe with the one to mspec-teamcity-prunner.exe in your TeamCity Build Step.

For me this has lead to ~70% reduction in the time it takes to run our MSpec test suite.

Details on the project and installation instructions/NuGet package here:

https://github.com/ivanz/mspec-teamcity-prunner

Traktor Pro .tsi file format reverse-engineered – docs on GitHub

Mon, 20 Oct 2014 00:00:00 +0000

I’ve reverse-engineered the .tsi binary file format specification, which Traktor Pro by Native Instruments uses to store its Controller Mappings. I am hoping this should open the gates to new power tooling for MIDI controller mapping power tools (Traktor’s own being rather sub-optimal).

The project, documentation and instructions are here: https://github.com/ivanz/TraktorMappingFileFormat/wiki

Can’t sing enough praises of 010 Editor by SweetScape which enabled me to write scripts and define data structures incrementally on top of a binary blob.

Guide for migrating an ASP.NET MVC Solution to .NET 4.5 and ASP.NET MVC 4

Mon, 20 Aug 2012 00:00:00 +0000

You can find a very handy step by step guide for migrating to ASP.NET MVC 4 here . It might seem a bit long, but actually with a few multi-file search and replace and some regex you can do it pretty quickly.

I just wanted to add a few more tips:

Migrating to ASP.NET MVC 4

If you are still using bin deployables (“Add Deployable Assembly”) for your current ASP.NET MVC setup – you should remove it and replace it with the AspNetMvc nuget package.

If you are using MvcContrib or MvcFutures – it’s probably best to update to* MvcContrib.Mvc3-ci *and *Mvc3Futures . *Either case you will have to deal with the clash of extension methods (Html.IdFor, Html.NameFor, etc) which were previously in Mvc Futures (Microsoft.Web.Mvc.dll) but now are part of the core ASP.NET MVC assembly. Until updated versions of MvcContrib and MvcFutures come out I have resolved this by removing the using statement from my View’s Web.config for the MvcFutures extensions methods namespace. This however means that you lose tiny things like Html.SubmitButton, which you can easily replace across the whole solution with html code using a Regex.

Be careful about underwater rocks like this one about the new Date and DateTime editor templates in MVC 4. Also there seem to be model binding changes to do with DateTime – so far that has been the major pain in the ass for me.

Re-targeting for .NET 4.5

The fastest way to convert all projects is by doing a search and replace across all .csproj files and replace v4.0 with v4.5 *(or client profile, etc)

also replace in your Web.config compilation element targetFramework=”4.0″ with 4.5

The real issue are the NuGet packages – some have a .NET 4.5 specific version – a good example is Entity Framework. When the project is targeting version 4.0 of the framework and you install/update EF to version 5 you actually end up with EF 4.4 (which doesn’t have support for enums and so on). The only way to solve this is to remove all packages and install them again, which is a massive pain to do manually and unfortunately the current version of NuGet is not of much help there either, but the daily build is. More details about retargeting the NuGet packages are available in this StackOverflow question.

A few other notes

Things that I have personally tested and work fine: MiniProfiler works fine with an runtime assembly binding redirect for Entity Framework, ELMAH and Ninject work without any changes. Noticed a small regression in unobtrusive validation and checkboxed when pulling a form with AJAX, but I that ended caused by a jQuery Validation problem.

Oh and by the way, don’t forget to update your test assemblies *App.config *with the correct assembly redirects if you are running tests against ASP.NET MVC controllers, which use MvcFutures or MvcContrib, because you will end up seeing weird “Type A doesn’t match type A” errors.

To be honest I haven’t seen noticeable performance improvements with the MVC 4 + .NET 4.5 + EF5 combo so far, but time will tell.

Windows 8 Code Weekend: 8-9th September in London – dev4good

Fri, 17 Aug 2012 00:00:00 +0000

TheGivingLab.Org

We’re running a second dev4good event in collaboration with TheGivingLab.org and Givey this year to bring together talented thinkers, designers and coders from around the UK to work on some real-world issues faced by UK charities. The technology theme for the event is Windows 8, but no prior knowledge of Windows 8 app development is required.

Microsoft will present Windows 8 Developer Overview, showing us the technical perspective. Seren will be next up talking about how to design a great experience on Windows 8. (Full details of these sessions will follow shortly.) TheGivingLab.org, will be sharing charity projects, apps and experiences they’d like inspire you with and sharing learnings from their first tech experiment www.seethedifference.org. We may even work on one of your own ideas – if you’ve got one.

Our goals for the weekend are simple. We want to learn how to create Windows 8 apps that could change the way people live their lives – and then we’re going to spend the rest of the time doing it!

If you are a software developer (on any platform), designer, computing student, or are just interested in help out – then we need you. It’s going to be a real challenge – and sleep will be optional. Are you up for it? If you are, the event page is here.

Remember, this is a not-for-profit event being run by volunteers, so you won’t be paid for the work you do. You will, however, get to meet and work with some of the smartest developers and designers in the UK – all while doing some real good for society.

We’re also looking for sponsorship for this event, so please contact us if you believe you can help in any way.

If you are a UK charity or a community based organisation, then have a look at what we could do for you or contact us directly. Thank you.

We need you help – so spread the word, download our poster and put it up where you work, send it to your friends.

Heads up on a hidden breaking change in ASP.NET MVC 4

Fri, 17 Aug 2012 00:00:00 +0000

If you, like me, are using an Editor Template for DateTime and use the DataTypeAttribute with either or DataType.Date and DataType.DateTime in ASP.NET MVC 2 or 3 and happen to upgrade to ASP.NET MVC 4 be aware!

ASP.NET MVC 4 introduces two new internal editor templates for properties marked as DataType.Date and DataType.DateTime to render HTML5 input types (date and datetime accordingly).

The unexpected side-effect of this is that if you were previously capturing all DateTime *type editing through a *DateTime editor template now if your property is marked as DataType.Date ASP.NET MVC 4 will use the new internal Date editor template instead of your *DateTime *editor template.

The solution is to provide a Date.cshtml *editor template along your DateTime.cshtml* editor template.

Disable archive instead of delete mail in Gmail on iPhone/iPad

Sun, 22 Apr 2012 00:00:00 +0000

For a long time the default and very painful behaviour between the integration of iOS devices (iPhone/iPad) and Gmail’s Exchange support (required for push email) has been that whenever you delete an email it will actually archive it instead (put it in the “All Mail” folder).

Like me many people hated that and have been complaining for a long time on Google’s Forum, Groups and Feedback sites. I have personally been using a “delete” label and moving messages there to delete later on my PC.

No more!

Apparently Google have quietly (I have not seen an announcement?) added a feature to disable this annoying behavior and deleted mail will end up in Gmail’s Trash folder instead.

To enable it you have to open the Google Sync settings page from your mobile device at http://m.google.com/sync . Note that you can not access this page from your computer.

In there you will see a new checkbox saying something like “Move delete mail to Trash”. Tick, save, boom.

P.S: BTW for those of you who don’t know this is also the place where you pick which Google Calendar Calendars to make available for syncing on your device.

dev4good – Developing for a Better World

Mon, 04 Jul 2011 00:00:00 +0000

Last weekend (2-3 July) I attended the first ever dev4good – a charity hackathon where developers try to solve charity problems in a weekend. It took place in Hammersmith, London in a amazing venue on the riverside:

Three charities came to use with the following problems:

Hope and Play were looking for a way to locate and manage resources. And allow other charities or people to do the same.

The Ministry of Stories were looking for a way to get more young people writing stories and publishing these to the world. All while helping to generate a little more cash along the way.

The Design and Craft Council want to be able to automate their awards processes.

We were about 25 people and were able to split in three teams. Here is a video of my team explaining what we are planning to achieve for the Hope and Play project (I am the one speaking first):

Basically we wanted to create a proof of concept system that:

Provides a central web portal to aggregate information and also allow charities to communicate what projects they are running, and in which locations.
Allows charities to communicate in real-time work and achievements on their projects via the web portal, Twitter or mobile text messages (SMS).
Enable charities and individuals to advertise their available and required resources (human power, building material, etc) and its location.
Provides a means for charities to discover information on the web relevant to their projects and location.

At the end it looked like this (test data, which probably doesn’t illustrate perfectly the usage):

My team worked great together. We were able to quickly split the work so that everyone has something of interest to do. It was very exciting to see how we are making progress during our scrum stand ups:

At the start of the event we decided that we are going to use Git for source control and GitHub for hosting. Apart from me only one other person had used Git before, but I was happy to help out each of the guys and keep them going during the event. As you can see from the below GitHub commits timeline we were quite effective in working in parallel:

I think 99.9% of us were running Windows and using Bash or Cmd was absolutely not an option for the non-Gitters who had mainly experience with TFS or SVN. Most new Gitters used Tortoise Git, but that was still confusing as it required understanding of how everything works. Only later I learned about SmartGit and in retrospect I think we should have used that instead.

As you’ll hear on the video initially we planned to use Orchard CMS, but after some research and poking around I was personally disappointed to find out how over-complex and over-engineered Orchard is. So we dumped it and went for plain old ASP.NET MVC 3 and non-POCO Entity Framework, which worked out quite well – after all it was just meant to be proof of concept.

All in all I had great fun during the weekend. I also met some great people, who I am looking forward to seeing and work with again in the future – probably during GiveCamp UK in October!

At the end of the weekend it turned out that most people voted for me as the most supportive and helpful developer during the weekend, so I won the grand prize – a Kinect. I wasn’t expecting this at all and very grateful to everyone and very happy that I was able to help people out. Thanks guys!
And here is an end of event photo of team dev4good:
Great job guys!

Also big thanks to our sponsors:

What’s next?

We are in the process of moving and merging the team repositories in a central one in GitHub. I am looking forward to get in touch with some charities to discuss and get feedback for our proof of concept Charity Portal and its eventual real-life practical application.

Next also is GiveCamp UK! I am also tempted to go to Startup Weekend Lonodon, but I’ll see about that.

Featured on the home page of ASP.NET

Sun, 03 Jul 2011 00:00:00 +0000

Really exciting for me is that a few days ago my series on Editing Variable Length Reorderable Collections in ASP.NET MVC got featured on the home page of the ASP.NET web site. I just wanted to say thank you to the person who decided to share it with the community. Here is a screenshot:

Editing Variable Length Reorderable Collections in ASP.NET MVC – Part 3: Knockout JS

Wed, 29 Jun 2011 00:00:00 +0000

In Part 2 of this series I began moving some aspects of the collection editing to the client-side with jQuery Templates, but we realized that it’s not good enough, because instead of dealing with data we are juggling with our ASP.NET MVC views generated HTML.

In this final Part 3 of the series I want to move the collection editing completely to the client-side using the Knockout JS library JavaScript library. I will look at:

Knockout JS data-binding and tempalting
JSON Form (data really – no form) submission
jQuery Client-Side Validation

I will re-implement our sample collection editor and it is going to look exactly the same as it did before. Before I begin just a reminder that all of the source code is available on GitHub as a Visual Studio solution.

What is Knockout JS?

I am going to quote its creator (Steven Sanderson) from his introductory post, where he provides a very good overview:

Knockout is a JavaScript library that makes it easier to create rich, desktop-like user interfaces with JavaScript and HTML, using observers *to make your UI automatically stay in sync with an underlying data model. It works particularly well with the MVVM pattern, offering declarative bindings *somewhat like Silverlight but without the browser plugin.

I suggest you read the above linked post or checkout the Knockout JS web site to learn more about it, but to quickly summarize how it works:

A JavaScipt view model is defined that holds all the data. All the data properties are initialized as (or wrapped in) observable values and arrays.
HTML elements can be data-bound to a property (similar to WinForms/XAML(WPF/Silverlight)) from the view model using the *data-bind *attribute syntax. We can bind an input’s value, a span’s text, etc. to a view model property.
Whenever a value/or array changes the data-binding kicks in and the HTML element are automatically updated.
Knockout uses jQuery and supports templating via jQuery Templates.

Our Sample

To understand this lets jump straight into our sample app.

I have added a third edit option to our sample:

which surprise, surprise looks exactly the same as in the previous iteration. Apart from one extra feature – the favourite movies counter I’ve added to give you a hint of the power of Knockout JS:

View and ViewModel

Let’s firstly look at the first iteration of our view model implementation:

<script type="text/javascript">
var viewModel = {
    Id: ko.observable(@Model.Id),
    Name: ko.observable("@Model.Name"),
    FavouriteMovies: ko.observableArray(@Html.Json(@Model.FavouriteMovies) || []),

    maxMovies: 10,
    
    addMovie: function() {
        viewModel.FavouriteMovies.push(@Html.Json(new Movie()));
    },

    removeMovie: function(movie) {
        ko.utils.arrayRemoveItem(viewModel.FavouriteMovies, movie);
    }
};

$(function () {
    ko.applyBindings(viewModel);
});
</script>

We:

Serialize our ASP.NET MVC User Model to JSON (Id, Name, FavouriteMovies). Html.Json is a custom Html helper that simply wraps a JSON serializer – you can see it in the source code.
Wrap its values in Knockout observables and then once the page is loaded we initialize Knockout JS with our model
Define some add/remove movie methods to edit the FavouriteMovies collection

What’s crucial here is that we are not dealing with nor manipulating HTML markup, which is something that we were doing heavily in the previous parts.

When processed server-side the above view model will look like roughly like this in the browser:

var viewModel = {
        Id: ko.observable(1),
        Name: ko.observable("Ivan Zlatev"),
        FavouriteMovies: ko.observableArray([{"Title":"Movie 1","Rating":5},
                                                           {"Title":"Movie 2","Rating":10},
                                                           {"Title":"Movie 3","Rating":12}] || []),

        maxMovies: 10,

        addMovie: function() {
            viewModel.FavouriteMovies.push({"Title":null,"Rating":0});
        },

        removeMovie: function(movie) {
            ko.utils.arrayRemoveItem(viewModel.FavouriteMovies, movie);
        }
}

Let’s look at the first iteration of our edit view (EditKnockoutJS.cshtml) to better understand how does Knockout help us:

@model CollectionEditing.Models.User
@{ ViewBag.Title = "Edit My Account With Knockout JS"; }

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jQuery.tmpl.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout-1.2.1.debug.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout.jQueryUI-sortable.js")" type="text/javascript"></script>

<h2>Edit</h2>

@using (Html.BeginForm("EditKnockoutJS", "User", FormMethod.Post, new { id = "profileEditorForm" })) {
    @Html.ValidationSummary(false)
    <fieldset>
        <legend>My Details</legend>

        <input name="userId" type="hidden" data-bind="value: Id"/>

        <label for="name">Name:</label>
        <input type="text" id="name" name="name" data-bind="value: Name" />
    </fieldset>
    
    <fieldset>
        <legend>My Favourite Movies</legend>

        <ul id="moviesEditor" style="list-style-type: none"
            data-bind="template: { name: 'moviesTemplate', data: FavouriteMovies }, 
                       sortableList: viewModel.FavouriteMovies" >
        </ul>
        <p>You have <span data-bind="text: FavouriteMovies().length"></span> favourite movies.</p>

        <script id="moviesTemplate" type="text/x-jquery-template">
            
                <li data-bind="sortableItem: movie">
                    <div data-bind="template: { name: 'movieTemplate', data: movie }"></div>
                </li>
            
        </script>

        <script id="movieTemplate" type="text/x-jquery-template">
            <img src="@Url.Content("~/Content/images/draggable-icon.png")" style="cursor: move" alt=""/>

            <label>Title:</label>
            <input type="text" data-bind="value: Title"/>

            <label>Rating:</label>
            <input type="text" data-bind="value: Rating"/>

            <a href="#" data-bind="click: function() { viewModel.removeMovie(this); }">Delete</a>
        </script>
    
        <button data-bind="click: addMovie, enable: FavouriteMovies().length < maxMovies">Add another</button>
    </fieldset>

    <p>
        <input type="submit" value="Save" />
        <a href="/">Cancel</a>
    </p>
}

In our view we use Knockout JS to data-bind our HTML input fields to the data in the viewModel (notice the “data-bind” attributes).

For the collection editor:

Similar to Part 2, we have a movie jQuery template, which defines the HTML fields of a movie, but this time we don’t use any ASP.NET MVC helpers.
We make the HTML list reorderable via Drag and Drop with the two special sortableList and sortableItem bindings.This is a custom Knockout JS binding I’ve created and hosted on GitHub here. Behind the scenes it magically creates a JQuery UI Sortable keeps our viewModel.FavouriteMovies collection in sync when the widget changes.
We limit the number of favourite movies a user can add via the “Add Another” button to ten by using a “enabled” binding with a boolean expression. Behind the scenes Knockout JS will manage the state of the button and toggle between enabled/disabled depending on the evaluated value of the expression.
Finally we data-bind a span element to display the current number of favourite movies the user has added. Again, this is something that Knockout will keep up to date for us.

Right now with this viewModel and that view we have a working drag and drop add/remove favourite movies editor. What we are still missing however is:

Form submission and server-side handling
Form validation

Form Submission and Handling

Let’s add some more code to our view model and view to handle form submission.

Firstly we are going to implement a save function in our view model. Because we are no longer using ASP.NET model views, we can’t simply submit the form as is – the “standard” form values based ASP.NET MVC model binding won’t work properly and especially so for the collection editing part.

Thankfully starting from version 3 ASP.NET MVC supports out of the box JSON model binding. It kicks in if the HTTP request Content-Type is set to “application/json”. So instead of using form submission we are going to post our view model data via an AJAX post request to our MVC action, containing the data in JSON serialized form:

var viewModel = {
       ... snip ...

        saveFailed: ko.observable(false),

        // Returns true if successful
        save: function()
        {
            var saveSuccess = false;
            viewModel.saveFailed(false);

            // Executed synchronously for simplicity
            jQuery.ajax({
                type: "POST",
                url: "@Url.Action("EditKnockoutJS", "User")",
                data: ko.toJSON(viewModel),
                dataType: "json",
                contentType: "application/json",
                success: function(returnedData) {
                    saveSuccess = returnedData.Success || false;
                    viewModel.saveFailed(!saveSuccess);
                },
                async: false
            });

            return saveSuccess;
        }
};

Then we will suppress the default form submission behaviour and replace it with our own:

<p>
    <input type="submit" value="Save" 
             data-bind="click: function() { viewModel.save(); return false; }"/>
    <a href="/">Cancel</a>
</p>
    
<p data-bind="visible: saveFailed" class="error">A problem occurred saving the data.</p>

Note that I have added a new “saveFailed” property in the viewModel which is set by save(). I have also used a “visible” data binding on the value of that property to display the error message paragraph only if the save operation has failed.

Now let’s also look at the MVC action to handle the form submission:

[HttpPost]
public ActionResult EditKnockoutJS(User user)
{
    FormResponseData responseData = new FormResponseData() {
        Success = false
    };

    if (this.ModelState.IsValid) {
        CurrentUser = user;
        responseData.Success = true;
    }

    return Json(responseData);
}

class FormResponseData {
    public bool Success { get; set; }
}

Pretty simple action, which just validates the Model using our validation rules/data annotations and returns a FormReponseData object serialized to JSON, which contains a Success flag expected by the client side.

We can now persist our view model and also use our server-side model validation to prevent the client from doing nasty things:

We are not done just yet. Because we no longer use the ASP.NET html helpers we no longer pull the server-side validation error messages and are currently left with the generic “Something went wrong.” error message. This isn’t exactly nice nor user friendly. We can solve this by the use of client-side JavaScript based validation. Remember that we should never ever rely solely on the client-side (and we don’t in our case).

Client-Side Validation

Unfortunately at the time of writing I couldn’t find anything that validates against the Knockout JS viewModel instead of the HTML markup, so I had to resort to jQuery Validation for the client-side validation. The problem with that is that we need to ensure that we have set proper unique “name” attributes on our form fields and especially so for our collection editor elements.

Fortunately Knockout JS already has a binding for that called the “uniqueName binding”, so all we have to do is add that to our favourite movie collection editor fields like I’ve showed below and don’t worry about generating them ourselves. This is great, because as you saw in Part 2 injecting a unique name during jQuery template evaluation is relatively tricky.

<script id="movieTemplate" type="text/x-jquery-template">
    <img src="@Url.Content("~/Content/images/draggable-icon.png")" style="cursor: move" alt=""/>

    <label>Title:</label>
    <input type="text" data-bind="value: Title, uniqueName: true" class="required"/>

    <label>Rating:</label>
    <input type="text" data-bind="value: Rating, uniqueName: true" class="required"/>

    <a href="#" data-bind="click: function() { viewModel.removeMovie(this); }">Delete</a>
</script>

There are multiple ways we can use jQuery Validation and I have decided to go for the simplest declarative one, where we decorate our fields with extra attributes to describe the value constraints that we want to enforce. Let’s update the above fields to make the Title and Rating required:

<label>Title:</label>
<input type="text" data-bind="value: Title, uniqueName: true" class="required"/>

<label>Rating:</label>
<input type="text" data-bind="value: Rating, uniqueName: true" class="required"/>

Finally let’s plug-in jQuery Validation. To do that we will remove the previous submit button handler and use jQuery Validation instead:

... snip... 

        <input type="submit" value="Save"/>

... snip... 

<script type="text/javascript">
    $(function () {
        ko.applyBindings(viewModel);

        $("#profileEditorForm").validate({
            submitHandler: function(form) {
                if(viewModel.save())
                    window.location.href = "/";

                return false;
            }
        });
    });
</script>

Which gives us nice per-field validation error messages as we type:

Wrapping up

Download all of the source code from GitHub as a Visual Studio solution.

In this part we looked at Knockout JS and how great it is in terms of helping us avoid manipulation of HTML markup among many other things. This is generally something that can get really messy quickly and become hard to maintain and track. We also looked at how it helps us neatly solve our collection editing problem without having to worry about practically anything. In the expense of the sacrifice of our Html helpers and partial views, etc we get a lot of flexibility on the client side to add more interactivity in a neat and clean way.

Final Words

If you have a simple collection editing scenario and you are heavily reliant on your ASP.NET MVC views, partial views, editors and displays the approach documented in Part 1 should be sufficient. And if pulling in new entries/rows via AJAX is not an option (e.g. for speed, performance or any other reasons) you can pull in Part 2. However IMHO the better solution most of the time is to use Knockout JS and what I have described in this part as it opens the doors for more complex client-side interactions in a neat and clean way.

Thank you for reading the series. I will appreciate your feedback in the comments!

Custom Knockout JS binding for jQuery UI Sortable

Mon, 27 Jun 2011 00:00:00 +0000

For the work in progress Part 3 of my Editing Variable Length Reorderable Collections in ASP.NET MVC blog series I have created a custom Knockout JS binding that keeps a Knockout JS observable array in sync with a jQuery UI sortable.

It’s available here:

Basic usage is to use a sortableList binding on the ul which you want to make a jQuery Sortable and then a sortableItem binding for each sortable item (li) in the list like that:

<ul data-bind="sortableList: yourObservableArray" > 
     
        <li data-bind="sortableItem: arrayItem"></li> 
     
</ul>

Live example (if you are reading this in a feed reader you will need to open the blog post properly to see this):

Editing Variable Length Reorderable Collections in ASP.NET MVC – Part 2: jQuery Templates

Mon, 20 Jun 2011 00:00:00 +0000

In Part 1 of this series I discussed the problems that we face when implementing an editor for a variable length, reorderable collection and reuse our server-side ASP.NET MVC views, model binding and validation. And while the solution provided in Part 1 is nice and clean (and I personally use it in a few projects) one field for improvement in true Agile Blogging fashion is to find a way to remove the AJAX request we use for fetching new editor rows.

One way to bring this completely to the client side is by the use of jQuery Template (or any other JavaScript templating engine/library).

A reminder of what our editor looks like before I begin and a second remind that the source code is available on GitHub:

To start with I have added a second link to our sample’s home page titled “Edit with jQuery templates”:

Corresponding controller actions:

public ActionResult EditJQueryTemplate()
{
    return View(CurrentUser);
}

[HttpPost]
public ActionResult EditJQueryTemplate(User user)
{
    if (!this.ModelState.IsValid)
        return View(user);

    CurrentUser = user;
    return RedirectToAction("Display");
}

And a new editor view (EditJQueryTemplate.cshtml) which is exactly the same as the one from Part 1 apart from the core editor bit:

<legend>My Favourite Movies</legend>

@if (Model.FavouriteMovies == null || Model.FavouriteMovies.Count == 0) {
    <p>None.</p>
}
<ul id="moviesEditor" style="list-style-type: none">
    @if (Model.FavouriteMovies != null) {
        foreach (Movie movie in Model.FavouriteMovies) {
            Html.RenderPartial("MovieEntryEditor", movie);
        }
    }
</ul>
<script src="@Url.Content("~/Scripts/jQuery.tmpl.min.js")" type="text/javascript"></script>

<script type="text/x-jquery-tmpl" id="movieTemplate">
    @Html.CollectionItemJQueryTemplate("MovieEntryEditor", new Movie())
</script>

<script type="text/javascript">
    $(function () {
        $("#moviesEditor").sortable();
    });

    var viewModel = {
        addNew: function () {
            $("#moviesEditor").append($("#movieTemplate").tmpl({ index: viewModel._generateGuid() }));
        },

        _generateGuid: function () {
            // Source: http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript/105074#105074
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }
    };
</script>
            
<a id="addAnother" href="#" onclick="viewModel.addNew();">Add another</a>

Note the new @Html.CollectionItemJQueryTemplate helper, which takes a collection item instance with default values and the unchanged partial view MovieEntryEditor from Part 1:

@model CollectionEditing.Models.Movie
           
<li style="padding-bottom:15px">
    @using (Html.BeginCollectionItem("FavouriteMovies")) {
        <img src="@Url.Content("~/Content/images/draggable-icon.png")" style="cursor: move" alt=""/>

        @Html.LabelFor(model => model.Title)
        @Html.EditorFor(model => model.Title)
        @Html.ValidationMessageFor(model => model.Title)

        @Html.LabelFor(model => model.Rating)
        @Html.EditorFor(model => model.Rating)
        @Html.ValidationMessageFor(model => model.Rating)

        <a href="#" onclick="$(this).parent().remove();">Delete</a>
    }
</li>

Basically the helper renders the partial with an ${$index} jQuery template placeholder for which we supply a GUID at run-time on the client-side when we render the template. The output of the helper looks like this:

<script type="text/x-jquery-tmpl" id="movieTemplate">
<li style="padding-bottom:15px">

    <input autocomplete="off" name="FavouriteMovies.Index" type="hidden" value="${index}" />

    <img src="/Content/images/draggable-icon.png" style="cursor: move" alt=""/>

    <label>Title</label>
    <input name="FavouriteMovies[${index}].Title" type="text" value="" />

    <label>Rating</label>
    <input name="FavouriteMovies[${index}].Rating" type="text" value="0" />

    <a href="#" onclick="$(this).parent().remove();">Delete</a>
</li>
</script>

Everytime the “Add another” button is pressed this template is rendered using a new GUID index value supplied by the viewModel class.

Here is the code of the @Html.CollectionItemJQueryTemplate helper:

public static MvcHtmlString CollectionItemJQueryTemplate<TModel, TCollectionItem>(this HtmlHelper<TModel> html, 
                                                                                    string partialViewName, 
                                                                                    TCollectionItem modelDefaultValues)
{
    ViewDataDictionary<TCollectionItem> viewData = new ViewDataDictionary<TCollectionItem>(modelDefaultValues);
    viewData.Add(JQueryTemplatingEnabledKey, true);
    return html.Partial(partialViewName, modelDefaultValues, viewData);
}

It renders the supplied partial view, but before that it sets a flag on the ViewContext’s ViewData dictionary to indicate that the view is to be rendered as jQuery collection item template. This is then handled by the @Html.BeginCollectionItem by generating an index template placeholder based .Index hidden field for model binding instead of one with an actual GUID value:

public static IDisposable BeginCollectionItem<TModel>(this HtmlHelper<TModel> html, string collectionName)
{
    string collectionIndexFieldName = String.Format("{0}.Index", collectionName);

    string itemIndex = null;
    if (html.ViewData.ContainsKey(JQueryTemplatingEnabledKey)) {
        itemIndex = "${index}";
    } else {
        itemIndex = GetCollectionItemIndex(collectionIndexFieldName);
    }

    string collectionItemName = String.Format("{0}[{1}]", collectionName, itemIndex);

    TagBuilder indexField = new TagBuilder("input");
    indexField.MergeAttributes(new Dictionary<string, string>() {
        { "name", collectionIndexFieldName },
        { "value", itemIndex },
        { "type", "hidden" },
        { "autocomplete", "off" }
    });
// snip---

That’s it! We are still reusing our ASP.NET views, model binding and validation, but no longer require an AJAX request to fetch a new editor row!.

In Part 3 I will look at Knockout JS templating, data binding and moving variable length reorderable collection editing completely on the client side with the MVVM pattern and using JavaScript form serialization and JSON data submission and model binding.

Next: Part 3 and Knockout JS client-side collection editing, JSON model binding and client-side validation.

Editing Variable Length Reorderable Collections in ASP.NET MVC – Part 1: ASP.NET MVC Views

Thu, 16 Jun 2011 00:00:00 +0000

Introduction

I have decided to write a short series of blog posts on editing collections and more specifically variable length collections in ASP.NET MVC. I will take two different implementation approaches:

In Part 1 I look at implementing collection editing by sticking to facilities provided to us by ASP.NET MVC such as views, partial views, editor templates, model binding, model validation, etc.
In Part 2 I further enhance the sample by using jQuery Templates, but still utilize the same ASP.NET MVC views from Part 1.
In Part 3 I will look at Knockout JS templating, data binding and moving variable length reorderable collection editing completely on the client side with the MVVM pattern and JSON data submission and model binding.

The aspects I will consider are:

Dynamically adding, removing and reordering items to/from the collection
Validation implications
Code Reusability and Refactoring implications

I will assume that you are already familiar with ASP.NET MVC and basic JavaScript concepts.

Source Code

All source code is available on GitHub

The Sample

What I am going to build is a little sample where we have a user who has a list of favourite movies. It will look roughly like on the image below and will allow for adding new favourite movies, removing favourite movies and also reordering them up and down using the drag handler.

Domain Model

The domain model is basically:

public class User
{
    public int? Id { get; set; }
    [Required]
    public string Name { get; set; }
    public IList<Movie> FavouriteMovies { get; set; }
}

and

public class Movie
{
    [Required]
    public string Title { get; set; }
    public int Rating { get; set; }
}

Let’s get cracking!

An Edit View

Let’s start by creating a first-pass edit view for our Person to look like the one on the image above:

@model CollectionEditing.Models.User
@{ ViewBag.Title = "Edit My Account"; }

<h2>Edit</h2>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>My Details</legend>

        @Html.HiddenFor(model => model.Id)

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
    </fieldset>
    
    <fieldset>
        <legend>My Favourite Movies</legend>

        @if (Model.FavouriteMovies == null || Model.FavouriteMovies.Count == 0) {
            <p>None.</p>
        } else {
            <ul id="movieEditor" style="list-style-type: none">
                @for (int i=0; i < Model.FavouriteMovies.Count; i++) {
                    <li style="padding-bottom:15px">
                        <img src="@Url.Content("~/Content/images/draggable-icon.png")" style="cursor: move" alt=""/>

                        @Html.LabelFor(model => model.FavouriteMovies[i].Title)
                        @Html.EditorFor(model => model.FavouriteMovies[i].Title)
                        @Html.ValidationMessageFor(model => model.FavouriteMovies[i].Title)

                        @Html.LabelFor(model => model.FavouriteMovies[i].Rating)
                        @Html.EditorFor(model => model.FavouriteMovies[i].Rating)
                        @Html.ValidationMessageFor(model => model.FavouriteMovies[i].Rating)

                        <a href="#" onclick="$(this).parent().remove();">Delete</a>
                    </li>
                }
            </ul>
            <a href="#">Add another</a>
        }

        <script type="text/javascript">
            $(function () {
                $("#movieEditor").sortable();
            });
        </script>
    </fieldset>
    
    <p>
        <input type="submit" value="Save" />
        <a href="/">Cancel</a>
    </p>
}

The view is creating a list of editing controls for each of the movies in Person.FavouriteMovies. I am using a jQuery selector and dom function to remove a movie when the user clicks “Delete” and also a jQuery UI Sortable to make the items from the HTML list drag and droppable up and down.

With this done we immediately face the first problem: We haven’t implemented the “Add another”. Before we do that let’s consider how ASP.NET MVC model binding of collections works.

ASP.NET MVC Collection Model Binding Patterns

There are two patterns for model binding collections in ASP.NET MVC. The first one you have just seen:

@for (int i=0; i < Model.FavouriteMovies.Count; i++) {
    @Html.LabelFor(model => model.FavouriteMovies[i].Title)
    @Html.EditorFor(model => model.FavouriteMovies[i].Title)
    @Html.ValidationMessageFor(model => model.FavouriteMovies[i].Title)
…
}

which generates similar HTML:

<label for="FavouriteMovies_0__Title">Title</label>
<input id="FavouriteMovies_0__Title" name="FavouriteMovies[0].Title" type="text" value="" />
<span class="field-validation-error">The Title field is required.</span>

This is really great for displaying collections and editing static length collections, but problematic when we want to edit variable length collections, because:

Indices have to be sequential (0, 1, 2, 3, …). If they aren’t ASP.NET MVC stops at the first gap. E.g. if you have item 0, 1, 3, 4 after the model binding has finished you will end up with a collection of two items only – 1 and 2 instead of four items.
If you were to reorder the list in the HTML ASP.NET MVC will apply the indices order not the fields order when doing model binding.

This basically means that add/remove/reorder scenarios are no go with this. It’s not impossible but it will be big big mess tracking add/remove/reorder actions and re-indexing all field attributes.

Now, someone might say – “Hey, why don’t you just implement a non-sequential collection model binder?” .

Yes, you can write the code for a non-sequential collection model binder. You will however face two major issues with that however. The first being that the IValueProvider doesn’t expose a way to iterate through all values in the BindingContext which you can workaround* by hardcoding the model binder to access the current HttpRequest Form values collection (meaning that if someone decides to submit the form via Json or query parameters your model binder won’t work) or I’ve seen one more insane workaround which checks the *BindingContext one by one from CollectionName[0] to CollectionName[Int32.MaxValue] (that’s 2 billion iterations!).

Second major issue is that once you create a sequential collection from the non-sequential indices and items and you have a validation error and you re-render the form view your ModelState will no longer match the data. An item that used to be at index X is now at index X-1 after another item before it was deleted, however the ModelState validation message and state still point to X, because this is what you submitted.

So, even a custom model binder won’t help.

Thankfully there is a second pattern, which mostly helps for what we want to achieve (even though I don’t think it was designed to solve exactly this):

<input type="hidden" name="FavouriteMovies.Index" value="indexA"/>
<input name="FavouriteMovies[indexA].Title" type="text" value="" />
<input name="FavouriteMovies[indexA].Rating" type="text" value="" />
<input type="hidden" name="FavouriteMovies.Index" value="indexB"/>
<input name="FavouriteMovies[indexB].Title" type="text" value="" />
<input name="FavouriteMovies[indexB].Rating" type="text" value="" />

Notice how we have introduced an “.Index” hidden field for each collection item. By doing that we tell ASP.NET MVC’s model binding “Hey, don’t look for a standard numeric collection index, but instead look for the custom Index value we have specified and just get me the list of items in a collection when you are done”. How does this help?

We can specify any index value we want
The index doesn’t have to be sequential and items will be put in the collection in the order they are in the HTML when submitted.

Bam! That’s solves most, but not all of our problems.

The Solution

Firstly, ASP.NET MVC doesn’t have HTML helpers to generate the “[something].Index” pattern which is major problem since it means we can’t use validation and custom editors. We can fix that by utilizing some ASP.NET templating fu. What we are going to do is move the Movie editor to a its own partial view (MovieEntryEditor.cshtml):

@model CollectionEditing.Models.Movie
           
<li style="padding-bottom:15px">
    @using (Html.BeginCollectionItem("FavouriteMovies")) {
        <img src="@Url.Content("~/Content/images/draggable-icon.png")" style="cursor: move" alt=""/>

        @Html.LabelFor(model => model.Title)
        @Html.EditorFor(model => model.Title)
        @Html.ValidationMessageFor(model => model.Title)

        @Html.LabelFor(model => model.Rating)
        @Html.EditorFor(model => model.Rating)
        @Html.ValidationMessageFor(model => model.Rating)

        <a href="#" onclick="$(this).parent().remove();">Delete</a>
    }
</li>

And update our Edit view to use it:

<ul id="movieEditor" style="list-style-type: none">
    @foreach (Movie movie in Model.FavouriteMovies) {
        Html.RenderPartial("MovieEntryEditor", movie);
    }
</ul>
<p><a id="addAnother" href="#">Add another</a>

Notice two things – firstly the Movie partial edit view uses standard Html helpers and secondly there is a call to something custom called Html.BeginCollectionItem. *You might even ask yourself: Wait a second. This won’t work, because the partial view will produce names such as “Title” instead of “FavouriteMovies[xxx].Title”, so let me show you the source code of *Html.BeginCollectionItem:

public static IDisposable BeginCollectionItem<TModel>(this HtmlHelper<TModel> html,                                                       string collectionName)
{
    string itemIndex = Guid.NewGuid().ToString();
    string collectionItemName = String.Format("{0}[{1}]", collectionName, itemIndex);

    TagBuilder indexField = new TagBuilder("input");
    indexField.MergeAttributes(new Dictionary<string, string>() {
        { "name", String.Format("{0}.Index", collectionName) },
        { "value", itemIndex },
        { "type", "hidden" },
        { "autocomplete", "off" }
    });

    html.ViewContext.Writer.WriteLine(indexField.ToString(TagRenderMode.SelfClosing));
    return new CollectionItemNamePrefixScope(html.ViewData.TemplateInfo, collectionItemName);
}

private class CollectionItemNamePrefixScope : IDisposable
{
    private readonly TemplateInfo _templateInfo;
    private readonly string _previousPrefix;

    public CollectionItemNamePrefixScope(TemplateInfo templateInfo, string collectionItemName)
    {
        this._templateInfo = templateInfo;

        _previousPrefix = templateInfo.HtmlFieldPrefix;
        templateInfo.HtmlFieldPrefix = collectionItemName;
    }

    public void Dispose()
    {
        _templateInfo.HtmlFieldPrefix = _previousPrefix;
    }
}

This helper does two things:

Appends a hidden Index field to the output with a random GUID value (remember that using the .Index pattern an index can be any string)
Scopes the execution of the helper via an IDisposable and sets the template rendering context (html helperes and display/editor templates) to be “FavouriteMovies[GUID].”, so we end up with HTML like this:

<input autocomplete="off" name="FavouriteMovies.Index" type="hidden" value="6d85a95b-1dee-4175-bfae-73fad6a3763b" />
<label>Title</label>
<input class="text-box single-line" name="FavouriteMovies[6d85a95b-1dee-4175-bfae-73fad6a3763b].Title" type="text" value="Movie 1" />
<span class="field-validation-valid"></span>

This solves the problem of using Html field templates and basically reusing ASP.NET facilities instead of having to write html by hand, but it leads me to the second quirk that we need to address.

Let me show you the second and final problem. Disable client side validation and delete the title of e.g. “Movie 2” and click submit. Validation will fail, because Title of a movie is a required field, but while we are shown the edit form again** there are no validation messages**:

Why is that? It’s the same problem I mentioned earlier in this post. Each time we render the view we assign different names to the fields, which do not match the ones submitted and leads to a *ModelState *inconsistency. We have to figure out how to persist the name and more specifically the Index across requests. We have two options:

Add a hidden CollectionIndex field and CollectionIndex property on the Movie object to persist the FavouriteMovies.Index. This however is intrusive and suboptimal.
Instead of polluting the Movie object with an extra property be smart and in our helper Html.BeginCollectionItem reapply/reuse the submitted FavouriteMovies.Index form values.

Let’s replace in Html.BeginCollectionItem this line:

string itemIndex = Guid.New().ToString();

with:

string itemIndex = GetCollectionItemIndex(collectionIndexFieldName);

And here’ is the code for GetCollectionItemIndex:

private static string GetCollectionItemIndex(string collectionIndexFieldName)
{
    Queue<string> previousIndices = (Queue<string>) HttpContext.Current.Items[collectionIndexFieldName];
    if (previousIndices == null) {
        HttpContext.Current.Items[collectionIndexFieldName] = previousIndices = new Queue<string>();

        string previousIndicesValues = HttpContext.Current.Request[collectionIndexFieldName];
        if (!String.IsNullOrWhiteSpace(previousIndicesValues)) {
            foreach (string index in previousIndicesValues.Split(','))
                previousIndices.Enqueue(index);
        }
    }

    return previousIndices.Count > 0 ? previousIndices.Dequeue() : Guid.NewGuid().ToString();
}

We get all submitted values for e.g. “FavouriteMovie.Index” put them in a queue, which we store for the duration of the request. Each time we render a collection item we dequeue its old index value and if none is available we generate a new one. That way we preserve the Index across requests and can have a consistent ModelState and see validation errors and messages:

All that is left is to implement the “Add another” button functionality and we can do that easily by appending a new row to the movie editor, which we can fetch using Ajax and use our existing MovieEntryEditor.cshtml partial view like that:

public ActionResult MovieEntryRow()
{
    return PartialView("MovieEntryEditor");
}

And then add the follwing “Add Another” click handler:

$("#addAnother").click(function () {
    $.get('/User/MovieEntryRow', function (template) {
        $("#movieEditor").append(template);
    });
});

Done.

Conclusion

While not immediately obvious editing variable length reorderable collections with standard ASP.NET MVC is possible and what I like about this approach is that:

We can keep using traditional ASP.NET html helpers, editor and display templates (Html.EditorFor, etc.) with in our collection editing
We can make use of the ASP.NET MVC model validation client and server side

What I don’t like that much however is:

That we have to use an AJAX request to append a new row to the editor.
That we need to use the name of the collection in the movie editor partial view, but otherwise when doing the standalone AJAX get request the name context won’t be properly set for the partial template fields.

I would love to hear your thoughts. The sample source code is available on my GitHub

Next: Part 2 and how to avoid having an AJAX request with the use of jQuery Templates

Java BDD with JBehave and Watij in Eclipse with JUnit

Wed, 25 May 2011 00:00:00 +0000

The purpose of this post is to explain how to write BDD acceptance tests in Java using the gherkin syntax, run those with JUnit and implement them using Web Browser automation.

Before I begin let me assure you that I haven’t left the .NET church for the Java one and while I really don’t enjoy writing in Java and using Eclipse sometimes a man has to do what a man has to do.

So yeah I spend an afternoon trying to figure out the state of BDD (Behavior Driven Development) tools for Java and it’s pretty poor so far. If you want to write gherkin syntax based behavioral specifications, which are executable inside Eclipse as JUnit tests you are stuck only with JBehave. JBehave however is a monster with poor documentation, not so easily discoverable fluent API and little to none third party documentation content on forums and sites. BTW don’t get fooled like me – insetad of getting the core package you want to get the Web package because the latter has all the .jar dependencies bundled unlike the first one. Enough bashing, lets get down to business.

Let’s say we have the following “Search” story and a more specific scenario – “display an error dialog if I don’t fill in the search form”:

Narrative: I should be able to search

Scenario: I should see an error if I try to search without filling in the search form fields.

When I open 'http://mysite.com'
When I click on the 'Search' button
Then I should see an error

First thing you will notice is that JBehave doesn’t support the “And” keyword so we can’t wring “When I open … AND I click on the Seach button”.

Similar to other gherkin/cucumber based frameworks JBehave allows us to implement each step of the scenario as a method in a class, which optionally takes parameters mapped to words from the scenario. The above one can be stubbed like bellow. Also not that if properly configured you can make JBehave junit runner spit out the stubs for you to copy paste in your code (more about that later):

public class Search
{
	@When("I open '$page'")
	public void whenIOpen(String page)
	{
		// TODO
	}

	@When("I click on the '$buttonText' button")
	public void whenIClickOnTheButton(String buttonText)
	{
		// TODO
	}

	@Then("I should see an error")
	public void thenIShouldSeeAnError(){
		// TODO
	}
}

To implement the browser automation in Java there exist a Java variant of the Ruby watir library (and the .NET Watin library) called … surprise… watiJ. It’s available here. Major pitfall with it though is that it actually embeds the IE COM component and mozilla’s ghecko engine instead launching the real IE/Firefox (like the above mentioned framework do) and it only supports IE6 and I saw some C++ runtime problems with the ghecko engine. Nevertheless to give you a feel of how the above tests can be implemented:

public class Search extends StoryBase {

	@When("I open '$page'")
	public void whenIOpen(String page)
	{
		WebBrowser.open(page).pauseUntilReady();
	}

	@When("I click on the '$buttonText' button")
	public void whenIClickOnTheButton(String buttonText)
	{
		Tag button = WebBrowser.find.button().with.name("search");
		assertNotNull(button);
		button.click().pauseUntilReady();
	}

	@Then("I should see an error")
	public void thenIShouldSeeAnError(){
		Tag errorDialogTitleDiv = WebBrowser.find.span().with.className("dijitDialogTitle");
		assertNotNull(errorDialogTitleDiv);
		assertEquals("Error", errorDialogTitleDiv.get.innerHTML());
	}
}

Now, how about running them? A few things before that:

JBehave expects you to save stories as .story files in your source code tree
JBehave expects you to implement and configure problematically a *JUnitStory *for each story, so that it’s runnable through JUnit.
It will take your JUnitStory subclass implementation – for example “HelloWorldStory extends JUnitStory” *and look for the plain text file hello_world_story.story*

To save myself from having to configure each story I present you my *StoryBase *base class, which:

Initializes WatiJ and exposes it to subclasses
Configures JBehave to look for the .story files in the same directory as the class.
Configures JBehave/JUnit to look for the steps test methods of a story scenario in the subclass.
Configures JBehave to print out detailed information in the Console whilst running (such as the method stubs if any are missing)
Configures JBehave to spit out HTML report in myproject/target/jbehave-report/

Here it is:

public abstract class StoryBase extends JUnitStory {
    protected final static WebSpec WebBrowser = new WebSpec().ie();

    @Override
    public Configuration configuration() {
        return new MostUsefulConfiguration()
            .useStoryLoader(new LoadFromClasspath(this.getClass().getClassLoader()))
    	    .useStoryReporterBuilder(
    	    		new StoryReporterBuilder()
    	    			.withDefaultFormats()
    	    			.withFormats(Format.HTML, Format.CONSOLE)
    	    			.withRelativeDirectory("jbehave-report")
			);
    }

    @Override
    public List candidateSteps() {
        return new InstanceStepsFactory(configuration(), this).createCandidateSteps();
    }
}

Then all that’s left is to make the Search class extend the StoryBase class and it is now runnable in JUnit inside and outside Eclipse.

public class Search extends StoryBase {
}

Triply: Day 11 Summary

Thu, 12 May 2011 00:00:00 +0000

11 days ago I posted the launch notice for Triply. The only other place where I publicized it was on the Foursquare Apps list here. It was very surprising for me that given no “advertisement”, no web design and very little features it managed for 11 days to score:

103 user accounts – 83 Foursquare and 22 Facebook
2226 actions performed around the site
651 visits
432 visitors
10 Twitter followers
14 Facebook page fans
2 Feature requests in UserVoice (completed)

I used real time analytics (Woopra) to monitor the users navigation flow (not that there are many pages to navigate around) and that helped me to optimize the experience, especially in terms of login flow. For example instead of asking the user to sign in with Foursquare or Facebook to share a trip I redesigned it to show the actual page and only prompt for login when the user needs to import Checkins. As they say a picture is worth a thousand words, but the actual thing is priceless.

Other new features since launch are:

Facebook Places Checkins support
Browse trips interface where a user can browser trips, days out and experiences by City, Country and latest
Allow trips to be downloaded as a .GPX file which users can open with Google Earth and Garmin sat navs. Adding support for other geo formats for other satnavs won’t be hard either.
A lot of polish and fixes in the backend. Thanks god for ELMAH, which helped me log all problems around the site.

What’s next?

I am on a cross road at the moment as I need:

A web design (well overdue)
Someone to bounce ideas off and vice-versa (co-founder?) in which direction to take Triply as I think there are many directions Triply can go. For example I can make it the bit.ly for sharing trips/days out, etc or I can make it a trip diary type of thing by pulling and displaying photos of the trip from Flickr (using EXIF location data and search), etc. All fun ideas.

But how do both of those fit together? Doesn’t the design depend on the future features and vice-versa?

Client-Side XSLT Transformations with JavaScript

Thu, 12 May 2011 00:00:00 +0000

I bet you haven’t ever thought of doing XSLT transformations inside the Web Browser on the client-side, but anyway it’s absolutely possible (cross-browser) and it performs pretty well as well, which shouldn’t be a big surprise since the browser is optimized to work with markup.

Real-life practical applications of this however I haven’t thought of yet, but possibly:

Use XSLT to consume old XML-based web services and convert the XML into JSON on the client side on the fly. Come on, I know you want to! Why do it properly when you can do it in JavaScript?
Create a JavaScript-only CMS that loads Word documents directly and uses XSLT to display HTML (.docx is zipped xml). Again, why do it properly when you can do it in JavaScript?
For fun and zero profit!

Here is the XSLT transformer JavaScript class and sample. The class uses the Dojo JavaScript framework, but only for the browser checks and AJAX requests, so you can easily replace those with JQuery if you wish. Take it under the MIT/X11 license. There is also a useless demo here.

Sample:

// to transform
var xslTransform = new XslTransform("/path/to/sample.xsl");
var outputText = xslTransform.transform("/path/to/sample.xml");

XslTransform.js:

dojo.provide("XslTransform");

dojo.declare("XslTransform", [],
{
	_xslDoc : null,
	_xslPath : null,

	constructor : function(xslPath) {
		this._xslPath = xslPath;
	},

	transform : function(xmlPath) {
		if (this._xslDoc === null)
			this._xslDoc = this._loadXML(this._xslPath);

		var result = null;
		var xmlDoc = this._loadXML(xmlPath);

		if (dojo.isIE) {
			result = xmlDoc.transformNode(this._xslDoc);
		} else if(typeof XSLTProcessor !== undefined) {
			xsltProcessor = new XSLTProcessor();
	  		xsltProcessor.importStylesheet(this._xslDoc);

	  		var ownerDocument = document.implementation.createDocument("", "", null);
	  		result = xsltProcessor.transformToFragment(xmlDoc, ownerDocument);
		} else {
			alert("Your browser doesn't support XSLT!");
		}

		return result;

	},

	createXMLDocument : function(xmlText) {
		var xmlDoc = null;

		if (dojo.isIE) {
			xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
			xmlDoc.async = false;
			xmlDoc.loadXML(xmlText);
		} else if (window.DOMParser) {
			parser = new DOMParser();
			xmlDoc = parser.parseFromString(xmlText, "text/xml");
		} else {
			alert("Your browser doesn't suppoprt XML parsing!");
		}

		return xmlDoc;
	},

	// Synchronously loads a remote xml file
	_loadXML : function(xmlPath) {
		var getResult = dojo.xhrGet({
			url : xmlPath,
			handleAs : "xml",
			sync: true
		});

		var xml = null;
		// Returns immediately, because the GET is synchronous.
		var xmlData = getResult.then(function (response) {
			xml = response;
		});

		return xml;
	}
});

Logging JavaScript Errors with ELMAH in ASP.NET MVC

Sun, 08 May 2011 00:00:00 +0000

One final piece of information I wanted to add to my last blog post about setting up ELMAH for ASP.NET MVC is how to log Client Side/JavaScript errors with ELMAH.

To do that we need to:

Because ELMAH works with exceptions we will need to define a *JavaScriptErrorException *to represent our client side errors in the logs:

using System;

namespace Triply.Extensions
{
	[Serializable]
	public class JavaScriptErrorException : Exception
	{
		public JavaScriptErrorException (string message) : base(message)
		{
		}
	}
}

Define a Controller Action to be invoked by the client side that takes in an error message:

using System;
using System.Web.Mvc;
using Elmah;
using Triply.Extensions;

namespace Triply.Controllers
{
	public class HomeController : Controller
	{
		[HttpPost]
		public void LogJavaScriptError(string message)
		{
			ErrorSignal.FromCurrentContext().Raise(new JavaScriptErrorException(message));
		}
	}
}

Use an AJAX post with a message to log the error

function logError(details) {
    $.post("/Home/LogJavaScriptError", { message: details });
}

Done!

ASP.NET MVC Magical Error Logging with ELMAH

Sun, 08 May 2011 00:00:00 +0000

If you aren’t using ELMAH (Error Logging Modules and Handlers) you should be – http://code.google.com/p/elmah/ It’s the best thing since sliced bread for logging ASP.NET errors with practically zero effort. It basically plugs into the ASP.NET pipeline and logs all unhandled exceptions thrown and HTTP error codes together with all sorts of other useful information such as request url, stacktrace, current user username, cookies and more. You can say it makes a snapshot of the Yellow Screen of Death with extra information. It then gives you a simple web access to the recent errors logged (by default at http//mysite.com/elmah.axd), exposing a RSS feed as well. It’s fully configurable (error filters, multiple backend log storage systems support, etc) and also can be set up to send emails on error.

Some screenshots:

List of Errors using the Web Interface

Error Details in the web interface

You can pull ELMAH through nuget via the “Elmah” package., which will download it and add a reference. The steps to get it all set up for ASP.NET MVC are as follows.

<sectionGroup name="elmah">
      <section name="security" requirePermission="false" type="Elmah.SecuritySectionHandler, Elmah" />
      <section name="errorLog" requirePermission="false" type="Elmah.ErrorLogSectionHandler, Elmah" />
      <section name="errorMail" requirePermission="false" type="Elmah.ErrorMailSectionHandler, Elmah" />
      <section name="errorFilter" requirePermission="false" type="Elmah.ErrorFilterSectionHandler, Elmah" />
    </sectionGroup>

Add the root level ELMAH section in Web.config to tell it where to store the logs and how. Easiest to set up is to have a directory where it stores xml file for each error, but make sure the IIS process/AppPool has write access to that directory! Also I have added a filter to ignore all HTTP 404 errors. Note that this filter won’t work for ASP.NET MVC and I will come back to that later.

<elmah>
    <security allowRemoteAccess="1" />
    <errorLog type="Elmah.XmlFileErrorLog, Elmah" logPath="~/App_Data/ElmahLogs" />
    <errorFilter>
      <test>
        <equal binding="HttpStatusCode" value="404" type="Int32" />
      </test>
    </errorFilter>
  </elmah>

Register ELMAH with the ASP.NET pipeline both in the system.web **section (when running locally) and the system.webServer** section when deployed to IIS. Just copy paste the below snippet in both sections. Notice how the default configuration says that ELMAH will be available at mysite.com/elmah.axd . You can change that if you want (in both places!)

<httpModules>
      <add name="ErrorLog" type="Elmah.ErrorLogModule, Elmah" />
    </httpModules>
    <httpHandlers>
      <add verb="POST,GET,HEAD" path="elmah.axd" type="Elmah.ErrorLogPageFactory, Elmah" />
    </httpHandlers>

You are done and elmah will be available at http://mysite.com/elmah.axd , but it won’t work quite right with ASP.NET MVC, because of the way errors are handled there, so there are those additional things that need to be set up:

Log exceptions before ASP.NET MVC swallows them if using customErrors or some other code handles and swallows the error. To do this I’ve implemented the below exception filter that logs all handled exceptions. It’s a good example also of how to programatically log errors with ELMAH:

using System;
using System.Web.Mvc;
using Elmah;

namespace Triply.Extensions
{
	public class ElmahHandledErrorLoggerFilter : IExceptionFilter
	{
		public void OnException (ExceptionContext context)
		{
			// Long only handled exceptions, because all other will be caught by ELMAH anyway.
			if (context.ExceptionHandled)
				ErrorSignal.FromCurrentContext().Raise(context.Exception);
		}
	}
}

To register it add it in Global.asax.cs. The ordering is important – add it before the HandleErrorAttribute is registered.

public static void RegisterGlobalFilters (GlobalFilterCollection filters)
{
	filters.Add(new ElmahHandledErrorLoggerFilter());
	filters.Add(new HandleErrorAttribute());
}

One final note regarding filtering out HTTP 404 errors. In ASP.NET MVC they are raised as exceptions so if you want to ignore them unfortunately you can’t do that declaratively in the Web.config. Instead you have to add the following elmah hooks to your Global.asax.cs to do it programatically:

// ELMAH Filtering
		protected void ErrorLog_Filtering (object sender, ExceptionFilterEventArgs e)
		{
			FilterError404(e);
		}

		protected void ErrorMail_Filtering (object sender, ExceptionFilterEventArgs e)
		{
			FilterError404(e);
		}

		// Dismiss 404 errors for ELMAH
		private void FilterError404 (ExceptionFilterEventArgs e)
		{
			if (e.Exception.GetBaseException() is HttpException) {
				HttpException ex = (HttpException)e.Exception.GetBaseException();
				if (ex.GetHttpCode() == 404)
					e.Dismiss();
			}
		}

That’s it. Now you get super cool logging (and remember – RSS feed!)

Triply now supports Facebook Places Checkins

Wed, 04 May 2011 00:00:00 +0000

I’ve just published online the support for Facebook Places Checkins in Triply . This means that now you can log in and work with checkins either from Foursquare or Facebook Places.

What Triply really needs now is a good first pass web design, but I am not a web designer and don’t have cash to spend on web design right now, so I wonder what to do . After that I hope I can engage some people for feedback and bounce ideas off to see where we can go from here.

Introducing Triply for Foursquare

Mon, 02 May 2011 00:00:00 +0000

During my trip to Dubrovnik last week whilst checking in on Foursquare an idea struck me – can’t I use the Foursquare checkin history and checkin comments to document the places I visit and also my route. This is how Triply was born after a two day hackathon.

In a single sentence Triply lets you quickly create and share your trips, experiences and days out in three simple steps using your existing Foursquare checkins.

You pick a name and description for the trip/day out/experience:

You then pick start/end dates to load the Foursquare Checkins

You then organize (reorder and remove) the checkins and that’s it!

Notice the funky AJAX drag and drop goodness:

Once saved you get a trip page like the one below, where others can see the route, places and your comments and ask questions, etc.

Triply is ASP.NET MVC 3 and Entity Framework with an SQL Express server at the backend right now. It’s basically version 0.1 “Get it out there” release without even a proper web design, because I am intrigued to hear what people think about the idea.

I have personally have many things in mind that can be added in the future such as:

A Web design, yo know.
Have an indicator of the type of place was visited (museum, gallery, beach, etc)
Allow to get info about a place quickly such as wikipedia entry for historical places and hotel rating/reviews for hotels.
Facebook Places/Checkins support
Maybe go down the “trip diary” route as well with auto-mapped/auto-linked photos to places and mobile apps.
Maybe go down the “share a fun experience to do” route (e.g. go to this pub, then to this museum, then to that other fun place to spend a great day).
and more – basically I feel like this has potential.

… but it’s just me, so if someone is enthusiastic about the idea and is familiar with the Microsoft technology stack I would be more than happy to team up. You never know some day we might be able to afford to buy the .com or even .ly domain

Storing Date and Time in UTC and the definition “Today”

Mon, 04 Apr 2011 00:00:00 +0000

Storing date and times in UTC on the server side is all nice and dandy, however there are a few gotchas, one of which the definition of “Today” when you a dealing with time zones.

Say we are dealing with a system where a user can keep a history/log of all the food that he eats along with the date and time of when that happened. Current system times are:

Current User Time (UTC+2): 4 April 01:45
Current Server time (UTC): 3 April 23:45

and we have two log entries:

Log Entry User local time (UTC+2): 3 April 19:30
Log Entry Server UTC time: 3 April 17:30

Log Entry User local time (UTC+2): 4 April 01:30
Log Entry Server UTC time: 3 April 23:30

If a user wants to see all the log entries for “Today” his perspective for today is 4 April, but if we use the current UTC date on the server (3 April) to do the query we are going to end up with two results, but only one of them (the second) is for the 4 April. This makes perfect sense on the server side, because from the server end perspective both of those log entries were logged on the 3rd, but that’s not the case with the user.

To solve this we need to calculate the start of user today day and end of user today day and use it as a range to query the log history.

The steps are more or less:

Get the current server time and convert it to user time.
“Rewind” that user time back to midnight (00:00)
Convert that to back UTC and you get the start of day for the user in server terms.
Add 23 hours, 59 minutes, 59 seconds to the above and you have the end of user day in server terms
Query for user_start_of_day <= logentry.Date <= user_end_of_day

A worked example for the above dates and times:

Current Server time (UTC): 3 April 23:45

Server time UtcNow is 3 April 23:45 and the user is in UTC+2, so the user local time is 4 April 01:45
This gives start of day for the user local time at 4 April 00:00
Which is 3 April 22:00 in server UTC time – the user_start_of_day
- 23:59:59 gives us 4 April 21:59:59 as the end of day
We query for log entries where the log UTC timestamp is between 3 April 22:00 and 4 April 21:59:59 , which will return only one result in the above case, which is correct.

Here is also a C# TimeZone class I have for each of my users in one of my toy projects:

public class TimeZone : Entity
{
    protected TimeZone ()
    {
    }

    public TimeZone (string name, TimeZoneInfo timeZone)
    {
        if (timeZone == null)
            throw new ArgumentNullException ("timeZone", "timeZone is null.");
        if (String.IsNullOrEmpty (name))
            throw new ArgumentException ("name is null or empty.", "name");

        Name = name;
        this.TimeZoneInfo = timeZone;
    }

    public virtual string Name { get; set; }
    public virtual TimeZoneInfo TimeZoneInfo { get; set; }

    public virtual DateTime StartOfToday {
        get {
            DateTime serverNow = DateTime.UtcNow;
            DateTime userNow = ToLocalTime(serverNow);
            return ToUniversalTime (userNow.Date);
        }
    }

    public virtual DateTime EndOfToday {
        get { return StartOfToday.Add (new TimeSpan (23, 59, 59)); }
    }

    public virtual DateTime ToLocalTime (DateTime utcTime)
    {
        return TimeZoneInfo.ConvertTimeFromUtc (utcTime, this.TimeZoneInfo);
    }

    public virtual DateTime ToUniversalTime (DateTime localTime)
    {
        if (localTime.Kind == DateTimeKind.Utc)
            return localTime;

        return TimeZoneInfo.ConvertTimeToUtc (localTime, this.TimeZoneInfo);
    }
}

P.S: Some of you will spot a further implication of this and that is that we must always store the time as well as the date.

PicasaUploader 0.5.4 released

Mon, 07 Feb 2011 00:00:00 +0000

I have just released a new version of my PicasaWeb Uploader tool. This is a maintenance release to fix issues with large video uploads and to port to the new GData API.

Eclipse Colour Theme Extractor Tool

Sun, 23 Jan 2011 00:00:00 +0000

I have published my little tool that extracts just the Eclipse colour theme preferences out of the Eclipse exported preferences here. Usage is pretty simple – point it to an Eclipse preferences file and it will spit out the theme, which you can the import into your workspace without importing any other settings.

Custom model binding using IModelBinder in ASP.NET MVC – two gotchas

Wed, 03 Nov 2010 00:00:00 +0000

There are a few blog posts around the web regarding ASP.NET MVC custom model binding, but there are two key pieces of information missing.

Just a quick intro – to implement custom model binding in ASP.NET MVC we need to implement the IModelBinder interface:

public interface IModelBinder
{
    object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext);
}

For the sake of the example let’s say we have a class (below) that doesn’t have a public constructor and for one or another reason we don’t want to have a view model.

public class Quantity
{
    public Quantity (float value, MeasurementUnits units)
    {
          this.Value = value;
          this.Units = units;
    }

    public float Value { get; set; }
    public MeasurementUnits Units { get; set; }
}

public enum MeasurementUnits  { mg, g, kg, l, kcal }

With this class in ASP.NET MVC the model binding won’t work, because it doesn’t expose a public constructor. We have three options:

“Mirror” the Quantity class in a View Model class, but that also requires mirroring each class that has a property of type *Quantity * as well
Manually build an instance by retrieving the units and value from the Request parameters. However this will have to be done in each controller action (code duplication is bad).
Use custom model binding.

Here is the model binder:

public class QuantityModelBinder : IModelBinder
{
    public object BindModel (ControllerContext controllerContext, ModelBindingContext bindingContext)
    {
        if (controllerContext == null)
            throw new ArgumentNullException ("controllerContext", "controllerContext is null.");
        if (bindingContext == null)
            throw new ArgumentNullException ("bindingContext", "bindingContext is null.");

        MeasurementUnits? units = TryGet<MeasurementUnits> (bindingContext, "Units");
        float? value = TryGet<float> (bindingContext, "Value");

        if (units.HasValue && value.HasValue)
            return new Quantity (value.Value, units.Value);

        return null;
    }

    private Nullable<T> TryGet<T> (ModelBindingContext bindingContext, string key) where T : struct
    {
        if (String.IsNullOrEmpty (key))
            return null;

        ValueProviderResult valueResult = bindingContext.ValueProvider.GetValue(bindingContext.ModelName + "." + key);
        if (valueResult == null && bindingContext.FallbackToEmptyPrefix == true)
            valueResult = bindingContext.ValueProvider.GetValue (key);

        bindingContext.ModelState.SetModelValue (bindingContext.ModelName, valueResult);

        if (valueResult == null)
            return null;

        try {
            return (Nullable<T>)valueResult.ConvertTo (typeof (T));
        } catch (Exception ex) {
            bindingContext.ModelState.AddModelError (bindingContext.ModelName, ex);
            return null;
        }
    }
}

The two important gotchas are:

If your binding validation fails you should log an appropriate validation error via *ModelState.AddModelError . *It is useful to know that if you add exceptions of type FormatException to the model errors, ASP.NET MVC is smart enough to automatically convert them to string errors post-binding but before it returns control to your controller action.
If you log an error you *must **call *ModelState.SetModelValue or otherwise if you return null it will cause a NullReferenceException in the default ASP.NET MVC binder. This is so because unless you call that method the rest of the ASP.NET MVC code (as well as your own code) won’t be able to access ModelState[propertyName] and because it doesn’t handle that it blows up.

P.S: If I have to be pedantic and the code path is not critical I won’t use strings in the model binder to refer to the Quantity properties. Instead I would use something like what I’ve written about in will use the method described in How to avoid passing property names as strings using C# 3.0 Expression Trees .

How to import a database schema into SQL Server Express with Visual Studio

Wed, 22 Sep 2010 00:00:00 +0000

Today I needed to import my SQL Server schema into a SQL Server Express instance on a different machine. I only have Visual Studio on this machine and no SQL Server Management Studio installed, so it took me a bit to figure out how to import the schema, so here it goes.

Add the SQL Server Express instance to the Server Explorer. It’s located at “.\SQLEXPRESS”.
Open the T-SQL database schema. It will say “not connected” at the end of the tab caption.
In the “Data” menu you will have to “Connect” and then Validate and Execute SQL.
Done.

I bet the same can be done with SQL Server Management Studio Express but I have yet to install it.

PicasaUploader 0.5: Upload videos

Sat, 05 Jun 2010 00:00:00 +0000

I have released version 0.5 of PicasaUploader – the simple PicasaWeb uploader tool. Changes:

Add support for uploading videos.
- Supported files are: .avi, .mpeg, .mpg, .wmv, .3gp, .asf, .mp4, .mov. However PicasaWeb can still reject any of those if it doesn’t like it. Note also that videos won’t be playable in the album immediately because they have to be postprocessed by PicasaWeb.
File size limits: 20MB for photo files and 100MB for video files.

Get it here.

Video Upload

IBM

Tue, 02 Mar 2010 00:00:00 +0000

I started at IBM UK (Hursley Labs) on Monday but it is only today that I got my permanent badge with all the security clearance added for the ultra confidential work I will be doing. 😀 One of the goodies when working in the restricted area is that only the chosen ones get access to the proper coffee machine which makes excellent espresso coffee only 10p each.

IBM

Three new featurelets for Fluent NHibernate

Sun, 13 Dec 2009 00:00:00 +0000

Lately I have been using Fluent NHibernate and NHibernate respectively for my ORM (Object-Relational Mapping) when working on my top secret pet project. Simply put – it’s great. Mapping is done using a fluent C# interface which makes use of lambda expressions for referencing properties instead of strings (check my previous post for more info) so the domain model is safe to refactor because the mapping will be kept up-to-date too.

I spend some time hacking on Fluent NHibernate to add three little features I needed for my integration unit testing via Fluent NHibernate’s PersistenceSpecification. They all currently live in my GitHub(also used by Fluent NHibernate) fork here and have all been submitted upstream. UPDATE: The changes are as of now (21.12.2009) officially part of Fluent NHibernate. I can only hope you will find them useful as well.

PersistenceSpecification: More Informational Error Reporting

Particularly useful to troubleshoot failing mapping integration unit tests when a property check fails it will print both expected and actual types of the values. Also notice that chained properties (object.PropA.PropB) are now supported as well:

For property ‘Nutrition.Calories’ expected ‘400’ of type ‘System.Int32′ but got ‘400’ of type ‘System.Single’.

instead of:

Expected ‘400’ but got ‘400’ for Property ‘NutritionCalories’

PersistenceSpecification: Entity Components Property Testing

It is now possible to test entity component properties. For example given this domain model:

public class Food
{
    public Food ()
    {
        Nutrition = new NutritionInfo ();
    }

    public virtual NutritionInfo Nutrition { get; protected set }
    public virtual int Id { get; set; }

}

public class NutritionInfo
{
    public virtual float? Fat { get; set; }
}

and this mapping:

public class FoodMap : ClassMap<Food>
{
    public FoodMap ()
    {
        Id (food => food.Id)
            .GeneratedBy.Native ();

        Component<NutritionInfo> (food => food.Nutrition,
            mapping => {
                mapping.Map (nutrition => nutrition.Fat)
                    .Nullable ();
            }
        ).Access.BackingField ();
    }
}

One can now use this in unit tests:

[TestMethod]
public void Food_Mapping ()
{
    new PersistenceSpecification<Food> (Session)
    .CheckProperty (food => food.Id, 1)
    .CheckProperty (food => food.Nutrition.Fat, 40f) // <-- This one
    .VerifyTheMappings ();

}

Prior to my patch this wasn’t possible because Fluent Nhibernate PersistenceSpecification did not support chained properties and was trying to set a Fat property on the food object. Note that this is useful only for components and not references. For the latter *.CheckReference (…) *should be used which will also commit the reference to the Database before doing anything else.

PersistenceSpecification: IEqualityComparer for Individual Properties

Given the setup from above it is now possible to set an IEqualityComparer per property, e.g.:

[TestMethod]
public void Serving_Mapping ()
{

    new PersistenceSpecification<Food> (Session, new EqualityComparerForAllProperties ())
    .CheckProperty (food => food.Id, 1)
    .CheckProperty (food => food.Nutrition.Fat, 40f, FloatEqualityComparer.Instance)
    .VerifyTheMappings ();
}

If there is no comparer set for the property it will fall back to using the EqualityComparerForAllProperties and if that is not specified it will just use Object.Equals.

How to avoid passing property names as strings using C# 3.0 Expression Trees

Fri, 04 Dec 2009 00:00:00 +0000

Referencing property names via strings is evil. Consider this simplistic example:

private int _myProperty;

public int MyProperty
{
    get { return _myProperty; }
    set {
        _myProperty = value;
        NotifyPropertyChanged (this, "MyProperty")
    }
}

// Somewhere in a different project or file...
private void NotifyPropertyChanged (object sender, string propertyName)
{
    if (propertyName == "MyProperty")
        Console.WriteLine ("Property Changed");
}

If at some point the property gets renamed the code will compile fine but a bug will be introduced as all those strings that contain the property name will remain unchanged. Evil.

So I have been toying with NHibernate lately and yesterday I was writing some repositories. Let’s assume that theoretically they look like this:

public class Repository <TEntity>
{
    public virtual TEntity FindById (object id)
    {
        ...
    }
}

public class UserRepository : Repository<User>
{
    public IList<User> FindByName (string name)
    {
        // query code
    }

    public IList<User> FindByEmail (string email)
    {
        // query code
    }
}

Both *FindByName *and *FindByEmail *in *UserRepository *will in theory contain the same queries but with different parameters. However I don’t really want to have to write individual queries so I considered a utility method:

public class Repository <TEntity>
{
    public virtual TEntity FindById (object id)
    {
        ...
    }

    protected virtual IList<TEntity> FindByProperty (string propertyName, object value)
    {
        string columnName = NHibernateUtil.GetPropertyColumnName<TEntity> (propertyName);

        // Query here, e.g: "SELECT .... WHERE .... columnName = value" , etc.
    }
}

public class UserRepository : Repository<User>
{
    public IList<User> FindByName (string name)
    {
        return base.FindByProperty ("Name", name);
    }

    public IList<User> FindByEmail (string email)
    {
        return base.FindByProperty ("Email", email);
    }
}

Again this is very bad code and I hated the idea of it, so I sat down and started thinking. I remembered reading somewhere about C# 3.0 Expression Trees so I did some research. When using the special *Expression *type this seems to tell the compiler to create and expose an AST to us of e.g. a lambda function’s body, so if we pass a property reference expression we can parse the AST and extract the property name from there.

The theory in practice:

public class UserRepository : Repository<User>
{
    public IList<User> FindByName (string name)
    {
        return base.FindByProperty (user => user.Name, name);
    }

    public IList<User> FindByEmail (string email)
    {
        return base.FindByProperty (user => user.Email, email);
    }
}

public class Repository <TEntity>
{
    public virtual TEntity FindById (object id)
    {
        ...
    }

    protected virtual IList<TEntity> FindByProperty (Expression<Func<TEntity, object>> propertyRefExpr,
                                                     object value)
    {
        string propertyName = GetPropertyName (propertyRefExpr);

        // Query code
    }

    private string GetPropertyName (Expression propertyRefExpr)
    {
        if (propertyRefExpr == null)
            throw new ArgumentNullException ("propertyRefExpr", "propertyRefExpr is null.");

        MemberExpression memberExpr = propertyRefExpr.Body as MemberExpression;
        if (memberExpr == null) {
            UnaryExpression unaryExpr = propertyRefExpr.Body as UnaryExpression;
            if (unaryExpr != null && unaryExpr.NodeType == ExpressionType.Convert)
                memberExpr = unaryExpr.Operand as MemberExpression;
        }

        if (memberExpr != null && memberExpr.Member.MemberType == MemberTypes.Property)
            return memberExpr.Member.Name;

        throw new ArgumentException ("No property reference expression was found.",
                         "propertyRefExpr");
    }
}

Also as a helper class:

public static class PropertyUtil
{
    public static string GetPropertyName<TObject> (this TObject type,
                                                   Expression<Func<TObject, object>> propertyRefExpr)
    {
        return GetPropertyNameCore (propertyRefExpr.Body);
    }

    public static string GetName<TObject> (Expression<Func<TObject, object>> propertyRefExpr)
    {
        return GetPropertyNameCore (propertyRefExpr.Body);
    }

    private static string GetPropertyNameCore (Expression propertyRefExpr)
    {
        if (propertyRefExpr == null)
            throw new ArgumentNullException ("propertyRefExpr", "propertyRefExpr is null.");

        MemberExpression memberExpr = propertyRefExpr as MemberExpression;
        if (memberExpr == null) {
            UnaryExpression unaryExpr = propertyRefExpr as UnaryExpression;
            if (unaryExpr != null && unaryExpr.NodeType == ExpressionType.Convert)
                memberExpr = unaryExpr.Operand as MemberExpression;
        }

        if (memberExpr != null && memberExpr.Member.MemberType == MemberTypes.Property)
            return memberExpr.Member.Name;

        throw new ArgumentException ("No property reference expression was found.",
                         "propertyRefExpr");
    }
}

As you can see it contains two generic methods that operate either on types:

string propertyName = PropertyUtil.GetName<User> (u => u.Email);

or instances:

User user = GetUser();
string propertyName = user.GetPropertyName (u => u.Email);

Great, isn’t it? And safe to refactor.

Of course there is no such thing as a free lunch and the use of expression trees comes at the expense of some performance.

BTW is the font size of the code snippets sufficiently readable or is it too tiny?

UPDATE: Added support for Convert expressions (implicit/explicit casting)

HowTo Disable the Unsigned Security Warnings on Windows Mobile

Sat, 15 Aug 2009 00:00:00 +0000

The security warnings when deploying unsigned applications from Visual Studio to a real Windows Mobile device can get very annoying. Thankfully they can be disabled with a hack and here is how.

Using the Remote Registry Editor supplied with Visual Studio and with the Windows Mobile SDK installed change the following key value from 0 to 1 (and vise-versa to reset the change)

HKEY_LOCAL_MACHINE\Security\Policies\Policies\0000101a = 1

That’s it.

msysGit Tip: Files Constantly Reported as Modified Fix

Sat, 18 Jul 2009 00:00:00 +0000

I copied my Mono mcs Git working copy from Linux to Windows for use with MSysGit only to find out that even after git reset –hard almost all files were being reported as modified by git status. It turns out it has to do with the file permissions (executable bit I think) and the inability of msysgit to apply them on Windows.

$ git diff class/Accessibility/makefile.build
diff --git a/class/Accessibility/makefile.build b/class/Accessibility/makefile
old mode 100755
new mode 100644

The fix is to make git ignore some file mode stuff via:

git config core.fileMode false

Another useful setting on Windows is:

git config core.autocrlf true

Multiple Network Connections at the Same Time on Windows

Wed, 08 Jul 2009 00:00:00 +0000

In my scenario I have one Wireless connection for my Internet and one LAN connection to a small private network of my own with my NAS, PS3 and TV and I want to have them both at the same time. It was a major pain to get this setup working on Windows. When I had both connections enabled my Internet wasn’t working because Windows was routing through the LAN connection even though the Wireless connection had a higher priority set in Network Connections –> Advanced menu –> Advanced settings.

The solution is to go into the *Properties *of each connection (right click on it) –> select *Internet Protocol (TCP/IP) *–> click *Properties *-> click *Advanced *–> uncheck *Automatic metric *in the bottom and set a number between 1 and 9999 where the smaller the number the higher the connection priority. I have set my Wireless Internet connection to 1 and my LAN connection to 9999 and that works.

I hope this post will save someone else’s precious time in the future.

Visual Studio 2008 jQuery IntelliSense Fix

Wed, 01 Jul 2009 00:00:00 +0000

I am tinkering with ASP.NET MVC and jQuery and making my first baby steps in a whole new horrible world of web development. I found out that the JavaScript IntelliSense in Visual Studio 2008 is broken out of the box. The error is:

Warning    2    Error updating JScript IntelliSense: jquery-1.3.2.js:
   Object doesn't support this property or method @ 2173:1

The fix for Visual Studio 2008 SP1 by Microsoft can be found here:

KB958502 – JScript Editor support for “-vsdoc.js” IntelliSense doc. files

PicasaUploader 0.3: Batch Image Scaling/Resizing

Mon, 01 Jun 2009 00:00:00 +0000

I have just released version 0.3 of my PicasaWeb Uploader tool. The new things are:

High quality batch image resizing/scaling on the fly prior to upload.
Memory usage performance improvements.

Get it from (and also for more information): http://i-nz.net/projects/picasauploader

</a>

Photo Resize

PicasaUploader 0.2: A simple upload tool for PicasaWeb

Fri, 15 May 2009 00:00:00 +0000

I have just released version 0.2 of my PicasaWeb Uploader tool. The new things are “Send To” right-click integration on Windows and username/password saving. Get it from (and also for more information): http://ivanz.com/projects/picasauploader.

Ivan Zlatev

How to disable the Sign in with Google pop-up across web sites

Steps for Web

Steps for Android apps

13 Emotional Resilience Challenges in Engineering Leadership and Management + Tips

1. Feedback loops become slower and it takes longer to see the impact of your decisions and actions, which can create self-doubt and insecurity creep

2. Context switching increases by factor of N in terms of volume, frequency and types, which can be disorienting and overwhelming

3. You may feel less part of a team, which will affect your sense of belonging and can leave you feeling lonelier than before

4. The volume of information that you have exposure to may increases dramatically in both depth and breadth, which will feel overwhelming at times

5. The general level of uncertainty and ambiguity will rapidly increase which may leave your feeling anxious, scared and out of control

6. The mistakes that you make will have more impact than before, which can increase the level of fear, anxiety and internal pressure to get things “right”

7. Your sense of achievement and impact may take a hit, which can create dissatisfaction creep and can affect your confidence.

8. Your sense of expertise will erode and morph over time, which can challenge your sense of competency and result imposter syndrome

9. Having an increased scope of accountability can put more internal and external pressure, increasing your stress levels

10. Supporting (and working with) an increased number of people (direct reports, skip-level reports, etc) will have a toll on you emotionally

11. It can be hard to say no and/or disappoint people

12. When people you manage leave, it can create self-doubt and insecurity

13. You will be swimming in new and unfamiliar territory a lot of the time and this can make you feel vulnerable

MSpec (Machine Specifications) support for .csproj-based .NET Core projects now available

New features and improvements coming to C# in Visual Studio Code

New: Navigate and view code of symbols for which source code is unavailable

New: C# 6 Expression bodied members syntax highlighting

Before

After

Improved: Namespace and usings syntax highlighting

Before

After

Improved: Method parameters highlighting

Before

After

Fixed: Reserved word highlighting (@class, etc)

Announcing Machine.Specifications (MSpec) 0.11 for .NET Core, .NET CLI and .NET Standard

Getting started on .Net Core and .NET CLI

Known Issues with the dotnet cli (dotnet test) runner

What is MSpec?

How does TypeScript discover type declarations and definitions for JavaScript code?

Our JavaScript module code

Tripple slash comments

tsconfig.json

Local JavaScript module type declaration

NPM package “typings:”

Note the meaning of “ambient”

Farewell project.json - hello MSBuild and .csproj (.NET Core)

Farewell project.json

Hello MSBuild and .csproj

Announcement video

Machine.Specifications.Runner.VisualStudio 2.0.0-rc1 is out with many improvements

MSpec (Machine.Specifications) Visual Studio Adapter 1.7.0 released

What’s new

Related Documentation

CorrelatorSharp: Your one stop shop for context-aware logging and diagnostics

What is CorrelatorSharp?

Using CorrelatorSharp in 5 minutes

1. Enable in Web API in Service “B”

2. Log the current correlation id

3. Pass the correlation id from Service “A” to Service “B”

4. Manage activity scopes

Get it now

MarketInvoice Roslyn Pack 0.1 released

Innovation Mondays at MarketInvoice

Download and Install

What’s included

1. Break parameters and arguments apart

2. Line-up parameters and arguments

What about Refactoring Essentials?

FluentMigrator Part 2/3: Continuous Integration and Testing with database migrations

In this series

The Plan

Automating the creation and deletaion of the database for the test fixture

Migrating the newly created database

Downloading and running the sample code

Speeding up test runs

FluentMigrator Part 1/3: Creating and running our first database migration

In this series

What is FluentMigrator

Before we start

Our Visual Studio solution

Domain model and initial database schema

Creating our first database migration

Anatomy of a database migration