timjames.me

Management Hacks

2023-03-02T00:00:00+00:00

You’re NOT an elevated individual contributor
Adaptation is your Magic Bullet (not a sponsor)
People LIKE Structure & Guidance
But not too much Structure & Guidance
Let your people lead in their area
Listen actively & default to trust
Ask “What do you mean by that?”
Focus on behaviour
Be unapologetically optimistic
Your job is to make your people successful

1. You’re NOT an elevated individual contributor

You likely made it into a manager position because you proved you could be successful at the job you were doing as an individual contributor, but not because you proved your ability to manage a group of individual contributors.

Those are two very different things! Just like you can’t wake up one day and play a concerto on the piano if you’ve never played before, you probably won’t wake up and automatically know what to do to be the world’s best manager. It’s a skill that must develop, just like any other skill.

So, consider yourself an apprentice. This is a time to learn how to step into the leadership role your team needs you to take, how to delegate effectively, and how to inspire your team to put in their best every day. If you make a mistake or two along the way, own it and then promise to do better.

2. Adaptation is your magic bullet

Want your people to be highly productive? Motivated? Creative? Innovative? Then you need to learn how to adapt your work style to theirs. Everyone you’re managing will bring a different natural work style to the office, which means they all have different things that are going to inspire and motivate them or hold them back from doing their best work.

Sometimes you get lucky, have employees who have a very similar working style as you and you gel immediately without much fuss. More often, the opposite is true, and you end up with employees who just approach work differently. You must keep in mind that “different” is not necessarily bad or wrong. Each work style has it’s own set of strengths and challenges, and no work style is fundamentally better or worse than any other.

In an ideala world, we would all understand the work styles of our colleagues, and proactively adapt to meet somewhere in the middle. However, most of the time someone needs to take the step first. As a manager, that’s your job. You are the one in the power position, and if your goal is to support your team in performating at their highest level, you must work to understand their needs and adapt your work style to them. Remember, when they are successful, that means you’ve been successful.

3. People like structure and guidance

Zappos made headlines several years ago when they restructured to a holacracy and effectively eliminated manager positions. The result? 18% of their workforce left the company, a huge turnover rate by any standard.

The idea of getting rid of managers and allowing lower-level employees to be more entrepreneurial sounds great, but rarely works in practice because from a psychological perspective, most people seek out structure and guidance. We’ve been trained to do this from the time we’re small children - we look to our parents, our teachers, our extended family, and our friends to know what to do and what not to do. When you enter the workforce, you can’t turn off 20+ years of programming - people want ongoing feedback.

Someone has to be in charge of providing that guidance and saying it’s everyone’s responsibility isn’t good enough. When something is everyone’s responsibility, it’s really no one’s responsibility. So it rests on managers to do it. In fact, 65% of people say they want more feedback from their boss that they are currently getting, even in traditional structures. As a manager, your job is to provide the structure and guidance your team members need to do their best work on an ongoing basis.

4. But people will sink under too much structure and guidance

All that said from the last point, it’s important to know that managers need to walk the tightripe between providing guidance and micromanagement. Here are some critical differences between effective managers and micromanagers:

Effective managers lead through influence. Micromanagers lead through control.
Effective managers know that experience (and the occasional failure) is the only way to learn, grow, and push beyond business as usual. Micromanagers fear failure of any kind, no matter how small or insignificant.
Effective managers ask questions that guide their team members to a solution. Micromanagers dictate a solution without exploring different options or opportunities.
Effective managers empower their team members to do their work on their own, provide updates and ask for help when needed. Micromanagers need to be involved in every meeting and CC’d on every email.
Effective managers keep their cards always face up. They share information openly and transparently. Micromanagers keep their cards very close to their chest as if they are in competition with everyone they work with.
Effective managers remain open to new ideas, willing to explorer them if they seem reasonable. Micromanagers default to doing the things the way they’ve always done them before.

Managers get bad reputation because of all the micromanagers out there who refuse to let go of the control and empower their employees to succeed on their own. But remember that it is your job to delegate because that is the only way for your team members to learn and grow.

5. Let your people lead in their area, even if you don’t always agree with where they are going

If you want your employees to be empowered to do their best work, that requires taking a step back. Remember, your role is to provide guidance, you cna do this by asking questions to make sure your team member has fully considered their approach.

But if their ideas are different that the way you would have done it, most of the time the best way to go is to let them go try what they want to do and see what happens. There’s always more than one way to meet a goal, and very few of us work in jobs that are truly life and death. If they fail, it’s a teaching moment, and if they succeed using a strategy that you wouldn’t have picked, that’s still a win for you!

6. Schedule regular one-to-one meetings

Very few people want more meetings in their lives, but for managers, a monthly one-to-one meeting with every direct report is an absolute must. Think about it: If you can’t give each of your direct reports 30 minutes of your time every month, then you either have too many people reporting to you, or you haven’t fully embraced your role as a manager rather than an individual contributor.

Their update of the things they’ve been working on, and what they need from you to help them succeed.
Your update for them of all the information they need to know to do their job well.
A quick brainstorm of future goals, ideas they have and development they might need. This is also a great place to integrate coaching.

Frequently, one-to-one meetings are the first meeting to be canceled with the excuse of “I have nothing to talk about.” Unless you have a valid reason, you should not cancel your one-to-one meetings. This face time is a critical component of building a relationship with each of your employees that is grounded in trust. It’s one of the most important things you can do to drive their success.

7. Listen actively, and default to trust

When you have your monthly one-to-one meetings, the most critical component is not what you have to say - it’s what your team members are contributing to it.

You’re going to head the good and the bad because that’s what happens when you have open communication. It’s essential that you hear your employees out and always assume they are coming to you with positive intent - they are complaining about the problems because they want your help in solving them. If your boss approaches you from the vein of distrust when you’re making a good faith effort to do the right thing, that can be incredibly demotivating.

Your goal should always be to have them leave that one-to-one meeting in a better, more empowered place than when they arrive. Listen carefully to what they’re asking for, read between the lines to get to the core of what’s going on, and then do your best to provide the support they are looking for.

A good rule of thumb to follow is this: Behavior + Impact + Expectation. You state the problematic behaviour, explain why it’s a problem, and set the expectation for future behaviour. For example:

When you come late to a standup (behaviour), you throw off our agenda andit takes 10 minutes longer than it needs to (impact). Please make it on time in the future (expectation)

And then, to the next point, thank them and provide positive feedback when they meet the expectation!

8. Be unapologetically optimistic

The previous example explains how to give ciritical feedback well, but the reality is that you should give out much more positive feedback than negative feedback for one simple reason: Positive feedback is significantly more motivating that critical feedback. In fact, every single business outcome that can be tested for rises when your brain is in a state of positivity.

And the fact is that most employees are doing most things right on any day, but they only get feedback when they are doing wrong. The way you give feedback will set the tone for your management style. If you’re consistently looking for reasons to offer praise, even with the little things, that will keep your team in the right headspace to give it their best.

9. Your job is to make your people successful

At the end of the day, you will be judged based on the success of your team. That means that they are your priority. The minute you start deviating from that path is the minute you wander into “bad boss” territory. It might be helpful to do a quick exercise at the end of every day and make a list of the ways you set your employees up for success that day. It will help you to take stock, hold yourself accountable, and make sure you are focusing on the things that matter most.

Resizing Images with Azure Functions

2017-06-13T00:00:00+00:00

A new Azure Functions project template is available, in Visual Studio Preview (currently on June 13 2017), for working with Azure Functions. In order to be able to select the project and file types, you will eed to also install VS2017 Tools for Aszure Functions extension. This blog has the steps required to install https://blogs.msdn.microsoft.com/webdev/2017/05/10/azure-function-tools-for-visual-studio-2017/

After installing, follow the instructions on creating a new Azure Functions project, and then add a “BlobTrigger” function. This will then create a basic blob trigger with the following code:

[FunctionName("BlobTriggerCSharp")]
public static void Run([BlobTrigger("samples-workitems/{name}", Connection = "")]Stream myBlob, string name, TraceWriter log)
{
    log.Info($"C# Blob trigger function Processed blob\n Name:{name} \n Size: {myBlob.Length} Bytes");
}

The BlobTrigger takes in the name of your blob container, and the Connection is the name of your storage account. If you then follow the instructions on publishing this to your Azure instance, you can then watch this run. For managing files within my blob container, I downloaded http://storageexplorer.com/ which then allows me to upload a file and then watch, via the Azure portal, the function trigger.

Now for setting up a trigger that will resize an image and then write it to another blob folder

I initially had looked on github at a resize example template https://github.com/Azure/azure-webjobs-sdk-templates/blob/dev/Functions.Templates/Templates/ImageResizer-CSharp/run.csx. This works well, however, the output file has the contentType as application/octet-stream and ideally I was wanting this to be image/jpeg.

For resizing of the image, I am going to install ImageResizer via nuget install-package ImageResizer. I am then going to make use of the input blob and an output of type CloudBlockBlob. Now with the output type, you also need to provide both the blob container and the name of the storage account. It is also important to provide file access for the CloudBlockBlob. Without the file access, you will see an error about write access.

So make sure to give it FileAccess.ReadWrite. With this, you are effectively changing the “direction” to “inout”.

using ImageResizer;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Host;
using Microsoft.WindowsAzure.Storage.Blob;
using System.IO;

namespace MyProject
{
    public static class Function1
    {

        [FunctionName("resize-func")]
        public static void Run(
        [BlobTrigger("images/{name}", Connection = "fakeconnection_STORAGE")] Stream myBlob, string name,
        [Blob("resized-images/{name}", FileAccess.ReadWrite, Connection = "fakeconnection_STORAGE")] CloudBlockBlob outputBlob, TraceWriter log)
        {
            log.Info($"C# Blob trigger function Processed blob\n Name:{name} \n Size: {myBlob.Length} Bytes");

            var instructions = new Instructions
            {
                Width = 570,
                Mode = FitMode.Crop,
                Scale = ScaleMode.Both
            };

            Stream stream = new MemoryStream();
            ImageBuilder.Current.Build(new ImageJob(myBlob, stream, instructions));
            stream.Seek(0, SeekOrigin.Begin);

            outputBlob.Properties.ContentType = "image/jpeg";
            outputBlob.UploadFromStream(stream);
        }
    }
}

When publised to Azure, and then clicking on the function from within your Function Apps, you will see that it creates a function.json file with the following code:

{
  "bindings": [
    {
      "type": "blobTrigger",
      "connection": "fakeconnection_STORAGE",
      "path": "images/{name}",
      "direction": "in",
      "name": "myBlob"
    },
    {
      "type": "blob",
      "path": "resized-images/{name}",
      "connection": "fakeconncetion_STORAGE",
      "direction": "inout",
      "name": "outputBlob"
    }
  ],
  "disabled": false,
  "scriptFile": "..\\bin\\MyProject.dll",
  "entryPoint": "MyProject.Function1.Run"
}

This code will take in the image, resize it and then save to the output blob container. With using the CloudBlockBlob, you then have access to it’s properties and can set the content type before then saving. This is something that was missing from the official github code.

Something to note is that a lot of the examples that I read online seems to be setting the output blob container the same as the input trigger. When I did this, the blob trigger would react to the new saved file, so basically just sit in a loop of input and output. I initially looked into ignoring file names, e.g. anything starting with r-, however my attempts failed, so I found it easier to save the output to another folder. The next step I have is that I will delete the original file so that I am not taking up storage that will not be used.

Another note I found that when creating my function within Visual Studio and then publishing to Azure, it would only work when the class was named Function1? I tried changing it, but was then seeing an error in the Azure portal.

Webpack final loader didn't return a buffer or string

2017-04-03T00:00:00+00:00

Is the world of web development in a state of being permanently broken? Have you ever been able to follow one tutorial these days without then having to find why you are getting a errors?

I have been looking at the best/fastest module builder/bundler for our ReactJS project which is written in TypeScript. Currently we are using Gulp, however we feel the bundler is not really where we want it to be. So I am looking at using either Webpack or Brunch.io.

I found this tutorial online as a starter for 10 (https://www.typescriptlang.org/docs/handbook/react-&-webpack.html)[https://www.typescriptlang.org/docs/handbook/react-&-webpack.html]. Fairly simple tutorial and written well.

Follow all the instructions to the letter, copy the configs into my configs, and then run webpack to get this error;

Module build failed: Error: Final loader didn't return a Buffer or String

O FFS! Come on man! Does nothing work these days?! I know it is not the tutorial is wrong, so there must be a dependency within a dependency within a depenency that is faulty. The bundle.js is being created, however it only includes bundle code and not your files bundled in. So after a quick search online, I believe the issue lies with the awesome-typescript-loader and specific versions of this, and there is a quick fix.

Update your tsconfig.json file to include the following code;

"awesomeTypescriptLoaderOptions": {
    "useWebpackText": true,
    "useTranspileModule": true,
    "doTypeCheck": true,
    "forkChecker": true
}

Thankfully now you can run webpack and see the bundle being created.

dotnet aspnet codegenerator

2017-03-31T00:00:00+00:00

I am starting to get a bit annoyed with web development using Visual Studio these days. A lot of the work I have been doing is on the frontend using TypeScript and React, and trying to debug and compile currently involves the use of 3 tools.

On top of this, I have been looking at moving our existing .net core project from Visual Studio 2015 to 2017. So while playing around with a Web Application in VS17, I just want to add a simple MVC Controller. Simples eh? Well not with VS17 it would seem!

There was an error running the selected code generator: No executable found matching command "dotnet-aspnet-codegenetor"

I have read that you need to “hack” the csproj file to get it to work;

<ItemGroup>
    <DotNetCliToolReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Tools" Version="1.0.0-msbuild3-final" />
</ItemGroup>

Does this work? Heck no. I am going home.

Update

Ok so this only seems to be a problem when you right click on the Controllers folder and select Add > Controller. If you just select Add > New Item, then select MVC Controller Class, it lets you add one. Annoying.

Typescript Interfaces and Optional Properties

2017-02-22T00:00:00+00:00

I love TypeScript after working with it (on an enterprise system) for well over a year now. Using it with ReactJS makes things easier and very type safe. No more issues with case sensitivity Javascript errors, or accidentally assigning a string to a number. Or so I thought!

Recently, we came across an issue with the type safety on some of our interfaces. These were interfaces that included only optional properties within them.

e.g.

interface IInvoiceFilter {
    invoiceDate?: Date;
    invoiceNo?: number;
}

We would then use this interface for what ever we were doing, and using intellisense to see what the properties were on it. Then use it something like this;

const invoiceFilter: IInvoiceFilter = { invoiceNo: 1 };
let otherFilter: IInvoiceFilter = {};
otherFilter.invoiceNo = 1;

There would then be a method that would take the filter;

const filterInvoices = (invoiceFilter: IInvoiceFilter) => {
    // do something here with it
};

You would then call this with;

filterInvoices(invoiceFilter);

During some coding, one of the developers wasn’t thinking and did this;

filterInvoices('some string value');

Neither Visual Studio intelisense, Gulp Build or Resharper complained about this! We then discovered you could also do this;

let invoiceFilter: IInvoiceFilter = {};
invoiceFilter = 'Random string';

Again there was no issue with this? Why is there no issue?

This was quick to spot, so we were able to fix it, but I then noticed the same thing again in an interface that we do not have control over. We are using React Router to control our routes in a SPA. Within React Router, there is a component called Link.

<Link to={ internalUrls.Invoice.List }>View Invoices</Link>

The component would render an anchor tag with the correct href which works fine. However, I had to change internalUrls.Invoice.List from a string property, to a function that returned a string. Once I updated the property, I build the project and ran it. Everything looked fine until I noticed an error in the console. Warning: Failed propType: Invalid prop 'to' supplied to 'Link'. Check the render method of.... After a quick inspection, I noticed that the to property is:

So it can either be a string value OR it is an interface with all optional properties.

Is this a bug in TypeScript? Or is it a valid feature? I can see that there will be many issues from this when developers make changes like I have. If you know, then please comment below.

UmbracoApplicationBase Application shutdown. Details ConfigurationChange

2017-01-13T00:00:00+00:00

Wow! Has it been so long since my last blog post?! Seems to be! Well why not stick one up on Friday 13th! I have been exceptionally busy for the past year, with a really large project in work which has eaten up all development my time, then family life has taken up the rest.

One of the projects I have been working on recently in work involved using the latest version of Umbraco hosted on an Azure VM (Windows Server 2012 R2). The Umbraco installation is just a standard one, and there is nothing fancy within it. Just some datatypes, templates, views and some macros. The dynamic data of the site is loaded via a separate API on the same Azure VM.

My client was complaining that the site was slow to load, which I had just put down to it being a test site and the application pool recycling due to inactivity. However I then started to notice that it was exceptionally slow after creating/editing pages in the CMS. I had mentioned this to another developer in the office, and he had said he had a similar issue with another client’s installation, but when the site went live, it all sorted itself out.

Today though, I was speaking to another developer who manages another client using Umbraco on another Azure VM, and he was having a similar problem to me on a live site. So we decided to look deeper into this issue and found this nice little error in the Umbraco log file.

2017-01-13 09:52:11,148 [P5216/D2/T4] INFO  Umbraco.Core.UmbracoApplicationBase - Application shutdown. Details: ConfigurationChange

_shutDownMessage=IIS configuration change
HostingEnvironment initiated shutdown
HostingEnvironment caused shutdown

_shutDownStack=   at System.Environment.GetStackTrace(Exception e, Boolean needFileInfo)
   at System.Environment.get_StackTrace()
   at System.Web.Hosting.HostingEnvironment.InitiateShutdownInternal()
   at System.Web.Hosting.HostingEnvironment.InitiateShutdownWithoutDemand()
   at System.Web.Hosting.PipelineRuntime.StopProcessing()

Now that we had noticed the error and talking about it in the office, one of our contractors mentioned that it might be a known issue in that Umbraco updates files in the App_Data folder, which then causes IIS to freak out and restart the Application Pool. The issue is being tracked on umbraco.org High IO operations on Windows 2012 R2/Windows 8, application shuts down with the ConfigurationChange reason

Right at the top of this issue, there is a link to a Microsoft hotfix support.microsoft.com/en-us/kb/3052480. I installed this to my Azure VM, restarted, and straight away you could see the difference in the site.

Why am I writing this blog post about something that is already readily available on the umbraco website? Well, mainly to get out of under the rock and start blogging again, also to make a point. Developers, make sure you are talking amoungst yourselves in your office/community. If you are having issues, talk about them with everyone, as the chances are someone else has experienced the problem and has a solution, or others are seeing the same thing.

Project.deps.json could not be found

2017-01-13T00:00:00+00:00

So you are creating a new ASP.NET Core Web Application (.Net Framework) through visual studio, so select “New Project > Select Template > Name > Ok”, then select the Template you want to use. Then run your shiny new website.

BOOM! Build Error

There are no errors in the Error List, no warnings and no messages? So you check the build ouput to find

C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\DotNet\Microsoft.DotNet.Common.Targets(262,5): error : C:\Projects\My Project\error CS2001: Source file ‘C:\Projects\My Project\Project.deps.json’ could not be found.

So what is this? Well in my instance, I created the project with the name “My Project” and it turns out that currently you can’t have spaces in the folder name! So you will need to recreate your project without spaces in the name.

AspNet VNext TSX Debugging

2015-12-08T00:00:00+00:00

Following on from my recent post ReactJs with TypeScript in AspNet VNext, I have been playing about with .TSX + ReactJS more, and one of the first things I noticed was that I was unable to debug the JavaScript files in the browser.

This is down to the way in which Visual Studio + the tsconfig.json are generating the .js files which are linked to .js.map files.

From my previous post, we created a simple App.tsx file that simple output <h1>Hello World</h1>. Now if you investigate the generated .js file, you will see the following in the last two lines;

ReactDOM.render(React.createElement(MyApp, null), document.getElementById('appMountNode'));
//# sourceMappingURL=app.js.map

The sourceMappingURL is a way to map a combined/minified file back to a “debuggable” file. In this case, the .js file is being mapped back to app.js.map which then holds information about the original file. Looking into the app.js.map file, you will then see the following;

{"version":3,"file":"app.js","sourceRoot":"","sources":["../../../scripts/React/app.tsx"],"names":["MyApp","MyApp.constructor","MyApp.render"],"mappings":"....."}

This is informing the browser that the file app.js should be mapped back to the source app.tsx with the relative path information. This is great! However, in our folder structure, our .tsx files are all out with the running website. So if you are to try and debug the JavaScript, you will not be able to as the source file will not be found.

One Solution

I had a quick search of the internet, and discovered a solution which involved writing a MVC controller which would match the path, check the existence of the file, and then serve this file. However, I didn’t think this was the best solution. So in the end I decided to make use of Gulp.

Gulp is already included in the asp.net 5 MVC project templates, and is generating minified js and css for me, so why not use it to allow me to debug my .tsx files. So I have added this new Task to the gulpfile.js

gulp.task("copy", function () {    
    return gulp.src('./scripts/**/*.tsx').pipe(gulp.dest('./wwwroot/scripts/'));
});

This is now copying out my .tsx files into the wwwroot folder which can then be seen by the browser. Well, they should be seen! However this is a MVC site which has set routes by default. So if you were to run the project now, your .tsx files would still not be seen. So the next step is to add a static file provider to your default static files. Some good information on this can be found here Working with Static Files.

Open up your Startup.cs file, then go down to the line app.UseStaticFiles(); and replace this with;

// add .tsx files as static files       
var provider = new FileExtensionContentTypeProvider();
provider.Mappings.Add(".tsx", "application/javascript");
app.UseStaticFiles(new StaticFileOptions { ContentTypeProvider = provider });

Save this, and then run the project now. Your .tsx file will now be served by your app and allow you to debug!

This is no way the best way to do this, so if you know of a better/alternative way, then please comment below and let me know.

ReactJs with TypeScript in Asp.Net VNext

2015-12-02T00:00:00+00:00

Now that the ASP.NET 5 Release Candidate 1 has been announced and released, now is a great time to start playing around with it. So why not start playing around with ReactJs using TypeScript at the same time!

Background

For those that are not in the know:

React

A library for building user interfaces.

It was developed by the facebook guys as they started to run into problems, with other JS frameworks, when building their Apps section. So they invented their own!

TypeScript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

It was developed by Microsoft, more specifically I think it was Mads Kristensen and his team? I might be wrong!

Getting Started

To begin with, we want to create a new Project in Visual Studio 2015. I am using .Net Framework 4.6.1 and then selecting the ASP.Net Web Application. Then from the ASP.NET 5 Templates, I am going to select the Web Application. This will then create the new Asp.net 5 solution structure for you.

If you are not yet familiar with the folder structure, then I suggest you read Year First ASP.NET 5 Web App Using Visual Studio. This is a great post for creating the app and understanding the new structure.

What I noticed, and something which might catch you out, is that there is a new file called bower.json (controls your JavaScript dependencies), however this file was hidden by default, so I had to select “Show All Files”.

Now that you have your Asp.Net 5 Web Application solution, the next step is to add a dependency to react js using the bowser.json file. This file works pretty much the same as the project.json file for adding dependencies, in that as you start typing, you get intellisense. So start typing react, select it from the list, and then tab out. This will then display the version, so select the version you want and tab out again. You will end up with;

This will then download the react dependencies and add to your Bower dependencies list along with all the required files into the wwwroot > lib folder

So we don’t forget later, lets add a reference to the core reactjs scripts to our _Layout page just now. So open up Views > Shared > _Layout.cshtml and add script references to both react.js and react-dom.js.

Adding TypeScript

Now that we have our react dependencies and scripts sorted, we want to move onto adding TypeScript to our project. Now I already had TypeScript installed into Visual Studio 2015 and I am not sure if TypeScript is automatically included in the VS2015 Update 1, so you might need to go and download and install. Lets assume you already have TypeScript installed, and are ready to add to the project. I followed the instructions here Using TypeScript with Asp.Net 5 So just follow the instructions on setting up and configuring to generate on save.

Once you have created your first little app.tsx file, you are then going to want to add the typed definitions for react. I am adding them to a folder within the Scripts folder named Typings. You can find them all at github.com/DefinitelyTyped

At this point, add typed definitions for jQuery also. My folder structure now looks like this:

Creating our App

You are now ready to start writing some code! yey! By this point, if you have been following the instructions, you should have an app.ts file. You will now want to delete this file and create a new `app.tsx’ file. TSX is the TypeScript version of JSX. If you are familiar with react, then you will have heard of JSX.

Once you have your app.tsx file, add the following code.

// References to our typings file to get intellisense

/// <reference path="typings/jquery/jquery.d.ts" />
/// <reference path="typings/react/react-global.d.ts" />

// A '.tsx' file enables JSX support in the TypeScript compiler, 
// for more information see the following page on the TypeScript wiki:
// https://github.com/Microsoft/TypeScript/wiki/JSX

/** Properties to be used within our MyApp class */
interface IAppProps {

}

/** State to be used within our MyApp class */
interface IAppState {

}

/** MyApp class that is extending the React Component passing in the properties and state */
class MyApp extends React.Component<IAppProps, IAppState> {

    /**
     * Default contructor.
     * @param props
     */
    constructor(props: any) {
        super(props);
    }

    /**
     * React Render function
     */
    render() {
        return (<h1>Hello World</h1>);
    }

}

// jQuery on ready
//$(() => {
    // get our mount node where we want our component to be rendered
    //var $mountNode = $('#appMountNode');     

    // render the component to our mound node
    //ReactDOM.render(<MyApp />, $mountNode[0]);
//});

// based on feedback from davepermen, ignore the jQuery ready code and just have;    
ReactDOM.render(<myapp/>, document.getElementByID('appMountNode'));

As soon as you click save on the file, you should then see an app.js file be created within your wwwroot > js > mylibs filder (or what ever path you had in your “outDir” within the tsconfig.json file)

Build the app, and you should see some errors appear Build: Cannont use JSX unless the '--jsx' flag is provided. If you have used .tsx files in Visual Studio prior to Asp.Net 5, then you will know that there was a TypeScript Build section within the project properties. This is no longer there, but it is as easy as adding this to your tsconfig.json file. So update your tsconfig.json to include this new line;

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "../wwwroot/js/mylibs",
    "jsx": "react"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

The new `“jsx”: “react” line tells the app to use change the TSX files into JSX files so that they will work with react.

Build the app again, and everything should now be fine! So you are ready to run the app. Before you run the app, you will want to add a reference to your app.js file in the _Layout file below your references to the react scripts. Then add your mount html element to somewhere in your views. I added it to the layout page just for testing.

<div class="container body-content">
    @RenderBody()

    <div id="appMountNode"></div>

    <hr />
    <footer>
        <p>&copy; 2015 - VNextStacks</p>
    </footer>
</div>

Run the app and you should now see your “Hello World” header tag!

Feedback

I always try to put together working demos! So if you find anything that isn’t working, or suggestions, then please comment below. :)

Changing the Password length in Asp.Net 5 Identity

2015-08-21T00:00:00+00:00

A while ago I wrote a blog post regarding MVC 3 Password Length DataAnnotation in order to easily change the length of the password required to register for an account within your website.

This blog post is about how you can easily manage your password password strength in an Asp.Net vNext project (Asp.Net 5) when using the Microsoft.AspNet.Identity framework.

If you create a new Asp.Net 5 Web Application in Visual Studio 15 you will see that it is set up to use Microsoft.AspNet.Identity for handling user Authentication.

By default it will come with a RegisterViewModel that has the Password property and various DataAttributes

[Required]
[StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
[DataType(DataType.Password)]
[Display(Name = "Password")]
public string Password { get; set; }

Similar to my MVC 3 Password Length DataAnnotation post, the length of the password is controlled from within the Model, so if you want to change this length then you will have to edit code.

So lets get started with how you go about changing the length (and strength) of the password required to register within your website.

Configuring Identity

In order to change the settings for your password, you can configure the Identity service from within the startup.cs file. This is pretty simlple, and is just a matter of adding in a new section of code within the ConfigureServices(IServiceCollection services) section.

services.ConfigureIdentity(options =>
{
    options.Password.RequireDigit = true;
    options.Password.RequiredLength = 10;
    options.Password.RequireLowercase = true;
    options.Password.RequireNonLetterOrDigit = true;
    options.Password.RequireUppercase = true;
});

Now if you try to register, you will be forced to use these tight password rules.

This works, but if you want to put these settings into a configuration file, then you can use the config.json file.

Using Asp.Net 5 config.json

In Asp.Net 5, projects now use a config.json file which replaces the web.config file that we are so used to using. The config.json file separates out all the configuration from the project.json file which controls dependencies and various other important project setup configuration.

By defaut, your config.json should look like:

{
  "AppSettings": {
    "SiteTitle": "MyProject"
  },
  "Data": {
    "DefaultConnection": {
      "ConnectionString": "Server=(localdb)\\mssqllocaldb;Database=aspnet5-MyProject-c2f24376-91a1-48b9-a3ae-5b045044ccfc;Trusted_Connection=True;MultipleActiveResultSets=true"
    }
  }
}

It is here that we will want to add a new section which you can then use to control the password options within the Identity service. So add the following to your config.json file:

"Identity": {
    "Password": {
      "RequireDigit": "false",
      "RequireLowercase": "false",
      "RequiredLength": "10",
      "RequireUppercase": "true",
      "RequireNonLetterOrDigit": "false"
    }
}

Now back to your Startup.cs file, and update your configuration options to 1 of two ways. 1st way is to bind each property individually:

services.ConfigureIdentity(options =>
{
    options.Password.RequireDigit = bool.Parse(Configuration["Identity:Password:RequireDigit"].ToString());
    options.Password.RequiredLength = int.Parse(Configuration["Identity:Password:RequiredLength"].ToString()); 
    options.Password.RequireLowercase = bool.Parse(Configuration["Identity:Password:RequireLowercase"].ToString()); 
    options.Password.RequireNonLetterOrDigit = bool.Parse(Configuration["Identity:Password:RequireNonLetterOrDigit"].ToString()); 
    options.Password.RequireUppercase = bool.Parse(Configuration["Identity:Password:RequireUppercase"].ToString()); 
});

However there is a much simpler way to actually set your password properties from the config.json file without having to specify each property in code. Simply change your code to:

services.ConfigureIdentity(Configuration.GetConfigurationSection("Identity"));

This will automagically load in the config section and bind it to your Password options.

Still to do

If you now run your project, as long as the password is more than 6 characters long (set in the RegisterViewModel) you will then be validated against the Identity Password settings, however if you enter a password less than 6 chars, you will get the error message set in your model. So the next step is to do what we did back in MVC3 and create a custom data attribute for the password which will read in the configuration section.

Coming soon - the next step!

My Top 10 Dad Jokes

2015-08-21T00:00:00+00:00

I have a bit of a reputation for sharing bad dad jokes. So I thought I would compile a list of my top 10 for you to enjoy!

In reverse order

10.

A lot of people cry when they cut onions. The trick is to not form an emotional bond.

Sometimes I use words I don’t understand so I can sound more Photosynthesis.

I cut my finger chopping cheese, but I think that I may have grater problems.

What would you catch if you had sex with Harry Potter? Genital Hogwarts.

My pet mouse Elvis died last night. He was caught in a trap.

I told my wife she was drawing her eyebrows too high. She looked surprised.

Donald trump better not be president or there will be hell toupee

We have a genetic predisposition for diarrhoea. Runs in our jeans

I had a horrible dream last night that I was being chased by Eddie Stobart. It was a logistical nightmare.

How come Barbie never got pregnant? Because Ken always came in another box

Just outside the top 10

Dream Jokes

I had a dream that I was a muffler last night. I woke up exhausted!

Doctor Jokes

Me: “Doctor, I can’t stop singing the Green Green Grass of Home” Dr: “Sounds like you have Tom Jones syndrome” Me: “Is it common?” Dr: “It’s not unusual”

If you have some good dad jokes then please comment below and let me know!

Handy Git command reference

2015-08-14T00:00:00+00:00

Sooooo like a lot of developers out there, you probably have moments where you completely forget what git command you need to use for the correct job. There are hundreds even thousands of websites out there all with the same information, so I thought I would write another!

This is primarily just for my own reference though, so I have everything in one place that I can easily find without hunting through my many document locations.

Git command reference

Status

git status - BOOM current status of your repository branch.

Add

git add --all - Adds tracked and untracked files that have been updated since last commit.

Commit

git commit -m 'commit message' - Commits what you have just added

git commit -am 'add and commit in one go' - Adds tracked files and commits in one quick line.

Push

git push origin master - Pushes changes on branch “master” to your remote “origin”.

Pull

git pull origin master - Pulls latest version on branch “master” to your local repository from your remote “origin”.

Branching

git branch - Lists all the current branch’s within the repository.

git branch newbranch - Creates a new branch named “newbranch”.

git checkout newbranch - Switches to the “newbranch” branch. All changes and commits will now be to this branch.

git checkout master - Switches to the “master” branch. All changes and commits will now be to this branch.

git branch -d newbranch - Deletes the branch “newbranch” from your local repository.

git push origin :newbranch - Deletes the branch “newbranch” from your remote “origin”.

Merging

git merge newbranch - Merges the changes in “newbranch” into the current branch you have checked out.

Deleting

git rm file.txt - Deletes the file from your local repository AND deletes the file from your file system.

git rm --cached file.txt - Deletes the file from your local repository but not the file system.

Undoing file changes

git checkout file.txt - Reverts back to the file from the latest commit on the current branch.

For a full and indepth reference see gitref.org

Learn Git Branching with a fun interactive tutorial.

Me right now bug fixing

2015-08-10T00:00:00+00:00

You fix one bug, another bug appears!

*I don’t know who originally created this, so if you know comment below and let me know. I would like to give credit. :)

Sharing an Asp.Net Machine Key for Authentication

2015-08-06T00:00:00+00:00

In a recent project that I have been working on, one of the requirements was that we use our client’s Machine Key so that we can authenticate user’s passwords if their users had to login directly into our system. This was mainly to handle a situation where the main website would go down then users could open up our system directly and login.

So the client would send us the user details, username/password/passwordsalt and then they supplied us with the Machine Key that they are using in their various environments. The encryption which was being used was the standard out of the box asp.net Membership encryption, so in order to encrypt the typed in password against what is in the database, i used the following code:

public string EncryptPassword(string password, string passwordSalt)
{

    byte[] bytePass = Encoding.Unicode.GetBytes(password);
    byte[] byteSalt = Convert.FromBase64String(passwordSalt);
    byte[] byteResult = new byte[byteSalt.Length + bytePass.Length];

    Buffer.BlockCopy(byteSalt, 0, byteResult, 0, byteSalt.Length);
    Buffer.BlockCopy(bytePass, 0, byteResult, byteSalt.Length, bytePass.Length);

    HashAlgorithm ha = HashAlgorithm.Create("SHA1");
    return Convert.ToBase64String(ha.ComputeHash(byteResult));

}

While testing in a c# app this worked great, however when I then ported the code over to vb.net (yes our system is partially in vb.net), the generated encrypted password no longer matched.

I had ported over the c# code into this snippet of vb.net

Public Shared Function MachineKeyEncodePassword(format As Integer, password As String, passwordSalt As String)

    Dim bytePass As Byte() = Encoding.Unicode.GetBytes(password)
    Dim byteSalt As Byte() = Convert.FromBase64String(passwordSalt)
    Dim byteResult As Byte() = New Byte(byteSalt.Length + bytePass.Length) {}

    System.Buffer.BlockCopy(byteSalt, 0, byteResult, 0, byteSalt.Length)
    System.Buffer.BlockCopy(bytePass, 0, byteResult, byteSalt.Length, bytePass.Length)

    Dim ha As HashAlgorithm = HashAlgorithm.Create("SHA1")
    Return Convert.ToBase64String(ha.ComputeHash(byteResult))

End Function

To me this looked correct and was working, however the Base64String that was being generated was not the same as when running the c# app? What was I doing wrong?

Well it turns out that when you are creating a byte array in vb.net, e.g. New Byte(10) {} you indicate that it’s upper bound will be 10 this it contains 11 elements. In c# if you create a new byte array e.g. new byte[10]; it will create an array of 10 elements from 0-9. So my byte array length was 1 off in the vb.net code.

###Solution

The very very simple solution to this was to take away this extra element in the array, so I changed one line:

Dim byteResult As Byte() = New Byte((byteSalt.Length + bytePass.Length) - 1) {}

This will create the same length byte array as the c# code and result in the same encrypted password which validates correctly against that in the database!

###Side note

While working on this little project update, the machine key that had been sent over was in the format

<machineKey 
    decryptionKey="{hex-key value},IsolateApps" 
    validationKey="{hex-key value},IsolateApps" />;

Now this was working well on the encryption part, but had now broken my code when trying to set the FormsAuthentication cookie FormsAuthentication.SetAuthCookie(username, False) and was giving me the error:

System.Configuration.ConfigurationErrorsException: Decryption key specified has invalid hex characters.

The problem here is that when you include IsolateApps within the Machine Key config, this cuases ASP.Net to generate a unique key for each application on your server. After reading this blog post Cryptographic Improvements in ASP.NET 4.5, pt. 2 I read that if you add compatibilityMode="Framework20SP1" to the Machine Key config, then this would work. It did, I was not able to set the authencation cookie, however this then opened up a can of worms with Microsoft.AspNet.SignalR! So I discovered that just removing IsolateApps from the config seemed to work.

Not sure if this will raise an ugly head later on, so if you have any advice, then please comment below and let me know :)

Github Pages with Jekyll and Markdown

2015-07-31T00:00:00+00:00

I had originally planned on adding this post when I first launched my website on Github Pages, but for some strange reason the post sat in a half-written state and unpublished. It could have also been because I had never managed to get Jekyll running on Windows at that time! I have now though, so see below on how to get this up and running. :)

##Github Pages

If you have never heard about Github pages before and are looking for somewhere to host your own personal blog, then I would suggest checking it out now. pages.github.com host static html websites using your own repository to manage the files. You get one site per GitHub account and unlimited project sites. Simply create a new repository named [username].github.io and you are away!

Once you have your repository, you can then start to create static html pages, e.g. index.html that will then display when navigating to [username].github.io

##Blogging with Jekyll

Not only does GitHub Pages support static html pages, but it also has support for Jekyll

Jekyll is a blog-aware, static site generator in Ruby http://jekyllrb.com

Using Jekyll to generate your static html pages makes managing your website layout/headers/footers/menus much easier than manually editing multiple html files. Along with generating html pages from templates, it also makes blogging a lot easier. Jekyll will take your blog post content pages, the layout pages, and various other pages, process them when you push your files up to your repository and then output all the static pages.

##Markdown

Markdown is a lightweight markup language with plain text formatting syntax designed so that it can be converted to HTML and many other formats using a tool by the same name.[5][6] Markdown is often used to format readme files, for writing messages in online discussion forums, and to create rich text using a plain text editor.

Source

##Running Jekyll on Windows

If you are wanting to try this out and run Jekyll on Windows like me, then a SUPER GREAT step by step guide can be found here Run Jekyll on Windows - A step-by-step guide to setting up Jekyll on Windows by @juthilo

Note

I found that after installing the Ruby DevKit and running the command ruby dk.rb init I was unclear as to the next step. In the guide, it simply says:

Install the DevKit, binding into your Ruby installation ruby dk.rb install

However after trying this it was giving me the error Invalid configuration or no Rubies listed. Please fix 'config.yml' and rerun 'ruby dk.rb install'. At this point my config.yml file looked like this:

# This configuration file contains the absolute path locations of all
# installed Rubies to be enhanced to work with the DevKit. This config
# file is generated by the 'ruby dk.rb init' step and may be modified
# before running the 'ruby dk.rb install' step. To include any installed
# Rubies that were not automagically discovered, simply add a line below
# the triple hyphens with the absolute path to the Ruby root directory.
#
# Example:
#
# ---
# - C:/ruby19trunk
# - C:/ruby192dev
#
---

It turned out that I had to add the path to my Ruby installation folder to the end of the config.yml file so it now looked like:

# This configuration file contains the absolute path locations of all
# installed Rubies to be enhanced to work with the DevKit. This config
# file is generated by the 'ruby dk.rb init' step and may be modified
# before running the 'ruby dk.rb install' step. To include any installed
# Rubies that were not automagically discovered, simply add a line below
# the triple hyphens with the absolute path to the Ruby root directory.
#
# Example:
#
# ---
# - C:/ruby19trunk
# - C:/ruby192dev
#
---
- "C:/Ruby22-x64"

NuGet pack fails with exited with code 1

2015-07-29T00:00:00+00:00

We had a very annoying issue in the office recently regarding building a NuGet package with a Post-build event command line. One of our developers had created a Utilities project which would be installed via our local NuGet store, and had added the Post-build event to create the NuGet package.

The Post-build command was pretty simple and worked. It is the command which is referenced on the nuget.org Creating and Publishing a Package website

$(SolutionDir).nuget\nuget.exe pack $(ProjectDir)$(ProjectFileName) -Prop Configuration=$(ConfigurationName)

Everything was working great on the original developer’s machine, also on another guys machine, but not on mine or the 4th developer’s. Both I and the other developer are on Windows 7, the other two guys are on Windows 8. The Windows 7 machines were getting the error:

The command "C:\Projects\SolutionFolder\.nuget\nuget.exe pack C:\Projects\SolucationFolder\ProjectFolder\project.csproj -Prop Configuration=Debug" exited with code 1.

This error didn’t really give much information, so after a bit of searching the web I read that it would be useful to turn on Diagnostic build output verbosity. So I switched this on, built the project and looked through the Build output to see a line:

Task "Exec" (TaskId:83)
  Task Parameter:WorkingDirectory=bin\Debug\ (TaskId:83)
  Task Parameter:Command=C:\Projects\SolutionFolder\.nuget\nuget.exe pack C:\Projects\SolucationFolder\ProjectFolder\project.csproj -Prop Configuration=Debug (TaskId:83)
  C:\Projects\SolutionFolder\.nuget\nuget.exe pack C:\Projects\SolucationFolder\ProjectFolder\project.csproj -Prop Configuration=Debug (TaskId:83)
  Attempting to build package from 'project.csproj'. (TaskId:83)
  Packing files from ''. (TaskId:83)
  Using 'project.nuspec' for metadata. (TaskId:83)
  The path is not of a legal form. (TaskId:83)
C:\Program Files (x86)\MSBuild\14.0\bin\Microsoft.Common.CurrentVersion.targets(4713,5): error MSB3073: The command "C:\Projects\SolutionFolder\.nuget\nuget.exe pack C:\Projects\SolucationFolder\ProjectFolder\project.csproj -Prop Configuration=Debug" exited with code 1.
Done executing task "Exec" -- FAILED. (TaskId:49)

This again didnt’t really give much information either. So we decided to see what would happen if we ran the command straight through a Command Prompt window. This then gave us another error Unable to find 'project.dll'. Make sure the project has been built

WTF! The project was being built, and the dll’s were in the bin/debug folder!

###Solution

After spending a couple of hours on this, what we really needed was a beauty sleep. The next morning within 5 mins the original developer discovered the solution.

All it took was adding an extra -Prop at the end of the command line:

$(SolutionDir).nuget\nuget.exe pack $(ProjectDir)$(ProjectFileName) -Prop Configuration=$(ConfigurationName) -Prop Platform=AnyCPU

We are still not sure what the issue was and why this fixes it. It must be something to do with Win7 vs Win8 mixed with NuGet.exe and the command line (I am not 100% sure what though, so if you know why, comment below and let me know).

DNX SDK version 'dnx-clr-win-x86.1.0.0-beta5' failed to install.

2015-07-27T00:00:00+00:00

I have been playing around with Visual Studio 2015 preview for a while now (nothing hard core), so naturally I want to install the final version when it was released. Straight away I came across a couple little issues which made the install/startup not so simple.

Firstly, when trying to install the final version, it will not install side-by-side with the preview version, so you will need to uninstall this. This seemed to take quite a while to do, so ended up just leaving this running overnight.

Secondly, and much more of an issue, was when I decided to create a new asp.net 5 Web Application. I recieved this error:

DNX SDK version 'dnx-clr-win-x86.1.0.0-beta5' failed to install

Now this is a known issue already, but I thought I would just put a little post up on my website for future reference.

Solution

The problem is down to not having Powershell 3.0 installed on your machine, so just head on over to Windows Management Framework 3.0 and download the version for you. I downloaded version Windows6.1-KB2506143-x64.msu. Notice at this point, and I am not sure if it just me, but the download option doesn’t work as the link is blocked due to some files on the page being loaded via http rather than https. I just opened up my Network console and opened the download link directly in the browser. When installing, you will go through the standard installation process, so just follow the instructions on screen. Once installed you might have to reboot your machine, I do…

Once rebooted, open VS2015 and create a new asp.net 5 project. Hopefully everything will now be ok!

Working with MVC Areas in Asp.Net vNext (MVC 6)

2014-12-13T00:00:00+00:00

I have recently started to play around Visual Studio 2015 Preview and Asp.Net vNext. As usual, I jump into new stuff like this with the mindset of building projects the same way that I would have with other versions. So in this case, I was trying to build a MVC 6 website the same way that I would build a MVC 3/4/5 website.

Straight away I wanted to add an Area to the project. In Visual Studio 2013, I would have right clicked on the MVC project, selected “Add” and then “Area”, typed in the name for the Area and then Visual Studio would scaffold this for me.

The output would be a new folder called Area, then within this you would have your standard MVC folders (Controllers, Models, Views) along with some other files that would automagically register the area within the project.

Within Visual Studio 2015 Preview, this Add > Area option is currently not there. I am not sure if it will be added in at some point, but for now the process is more manual but very very simple.

##Adding an Area to your project

Assuming you have created a new Asp.Net 5 Web Application, and can see all the lovely new file types like bower.json, config.json, project.json along with the new folder structure that includes the new wwwroot folder.

###Step 1

Right click on your MVC project and add a new Folder named “Areas”, then right click on this new folder and create a new folder to match the name of your area, e.g. “MyArea”. Right click again on this new folder and add a Controllers and Views folder. You want to end up with this;

###Step 2

Add a new MVC Controller Class to your Controllers folder named HomeController. By default VS will add the basic code for your controller + and Index view. Now once you have this, decorate the HomeController class with a new Attribute called Area. Name this after your area which in this case is “MyArea”.

[Area("MyArea")]
public class HomeController : Controller
{
    // GET: /<controller>/
    public IActionResult Index()
    {
        return View();
    }
}

###Step 3

You will now need to tell your MVC app to use a new Area route similar to AreaRegistration in MVC 4/5 but much simpler. Open up the Startup.cs file and then Map a new route within the existing app.UseMvc(routes => code.

// Add MVC to the request pipeline.
app.UseMvc(routes =>
{

    // add the new route here.
    routes.MapRoute(name: "areaRoute", 
        template: "{area:exists}/{controller}/{action}", 
        defaults: new { controller = "Home", action = "Index" });

    routes.MapRoute(
        name: "default",
        template: "{controller}/{action}/{id?}",
        defaults: new { controller = "Home", action = "Index" });
    
});

Your new route will work exactly the same as the “default” route with the addition of the area. So if you now create an Index view for your HomeController and navigate to /MyArea/Home or /MyArea/Home/Index you will see your index view.

Job Done!

Many thanks to @davidfowl for helping me out over in the AspNetvNext Jabbr room and pointing me in the direction of a sample on GitHub MvcSample.Web

Stopping and Starting your Application Pool with Octopus Deploy

2014-11-06T00:00:00+00:00

Depending on your Web Server set up, you might not be able to overwrite the Bin folder without some manually intervention. Usually it is because there is a process using files within the Bin folder and you will have to stop the application pool first.

Octopus will soon inform you if this is the case when deploying your package to the server, and will give you the error message:

One or more files in the directory may be locked by another process. You could use a PreDeploy.ps1 script to stop any processes that may be locking the file. Error details follow.

There is a pretty easy solution for this. You can run some Custom PowerShell scripts during Pre/Post deployment.

To set up the Pre/Post deployment scripts within the deployment of a NuGet package step, select the step and click on Configure features. This will then give you the option to Enable Custom PowerShell scripts.

This will then give you the option to enter pre-deployment, deployment and post-deployment scripts. You will want to enter the Stop PowerShell script in the pre box.

And then the Start PowerShell script in the post box.

In both scripts, you will notice appPoolName, this is a Variable which you will need to set up with the name of the application pool named AppPoolName.

In your next release you will see two additional steps in the Task Log. If you see these and everything is green then you know everything is ok!

Job Done!

Many thanks to @ahandersson for helping me out over in the Octopus Jabbr room

Entity Connection String within Octopus Deploy

2014-11-06T00:00:00+00:00

I have been using Octopus Deploy more and more recently and it is quickly becoming my deployment tool of choice. If you haven’t heard about it, then I would highly recommend that you go and check it out now! Octopus Deply

One of the projects I have been working on uses the EntityFramework for data access, so there is a System.Data.EntityClient connection string within the web.config. The EntityClient connection string differs from the standard SqlClient string in that it contains metadata along with the connection string. It also contains " within this string.

##Problem

Here lies the problem. If you want to replace the connection string using variables within Octopus deploy, then the connection string (by default) will not be replaced correctly. What ends up happening is that " is replaced with &quot; which results in a broken EntityClient!

Now this is by design within Octopus deploy and there is an argument whether this is actually a bug or a feature.

##Solution

The solution to this is pretty simple actually. If you copy your EntityClient connection string, then paste into an Octopus deploy varaible, replace " with ". When Octopus replaces the connection string in the web.config it automatically translates " back into "!

Job done!