2015-03-31

Failed to delete web hosting plan Default: Server farm 'Default' cannot be deleted because it has sites assigned to it

So I had this issue where I was moving web apps between hosting plans. As they were all transferred, I wondered why it refused to delete them with this error message.

After a few click left and right and a lot of wasted time, I found this blog post that provides a script to help you debug and the exact explanation as to why it doesn’t work.

To make things quick, it’s all about “Deployment Slots”. Among other things, they have their own serverFarm setting and they will not change when you change their parents in Powershell (haven’t tried by the portal).

Here’s a copy of the script from Harikharan Krishnaraju for future references:

Switch-AzureMode AzureResourceManager
$Resource = Get-AzureResource

foreach ($item in $Resource)
{
	if ($item.ResourceType -Match "Microsoft.Web/sites/slots")
	{
		$plan=(Get-AzureResource -Name $item.Name -ResourceGroupName $item.ResourceGroupName -ResourceType $item.ResourceType -ParentResource $item.ParentResource -ApiVersion 2014-04-01).Properties.webHostingPlan;
		write-host "WebHostingPlan " $plan " under site " $item.ParentResource " for deployment slot " $item.Name ;
	}

	elseif ($item.ResourceType -Match "Microsoft.Web/sites")
	{
		$plan=(Get-AzureResource -Name $item.Name -ResourceGroupName $item.ResourceGroupName -ResourceType $item.ResourceType -ApiVersion 2014-04-01).Properties.webHostingPlan;
		write-host "WebHostingPlan " $plan " under site " $item.Name ;
	}
}

2015-03-30

Switching Azure Web Apps from one App Service Plan to another

So I had to do some change to App Service Plan for one of my client. The first thing I was looking for was to do it under the portal. A few clicks and I’m done!

But before I get into why I need to move one of them, I’ll need to tell you about why I needed to move 20 of them.

Consolidating the farm

First, my client had a lot of WebApps deployed left and right in different "Default" ServicePlan. Most were created automatically by scripts or even Visual Studio. Each had different instance size and difference scaling capabilities.

We needed a way to standardize how we scale and especially the size on which we deployed. So we came down with a list of different hosting plans that we needed, the list of apps that would need to be moved and on which hosting plan they currently were.

That list went to 20 web apps to move. The portal wasn’t going to cut it. It was time to bring in the big guns.

Powershell

Powershell is the Command Line for Windows. It’s powered by awesomeness and cats riding unicorns. It allows you to do thing like remote control Azure, import/export CSV files and so much more.

CSV and Azure is what I needed. Since we built a list of web apps to migrate in Excel, CSV was the way to go.

The Code or rather, The Script

What follows is what is being used. It’s heavily inspired of what was found online.

My CSV file has 3 columns: App, ServicePlanSource and ServicePlanDestination. Only two are used for the actual command. I could have made this command more generic but since I was working with apps in EastUS only, well… I didn’t need more.

This script should be considered as "Works on my machine". Haven’t tested all the edge cases.

Param(
    [Parameter(Mandatory=$True)]
    [string]$filename
)

Switch-AzureMode AzureResourceManager
$rgn = 'Default-Web-EastUS'

$allAppsToMigrate = Import-Csv $filename
foreach($app in $allAppsToMigrate)
{
    if($app.ServicePlanSource -ne $app.ServicePlanDestination)
    {
        $appName = $app.App
            $source = $app.ServicePlanSource
            $dest = $app.ServicePlanDestination
        $res = Get-AzureResource -Name $appName -ResourceGroupName $rgn -ResourceType Microsoft.Web/sites -ApiVersion 2014-04-01
        $prop = @{ 'serverFarm' = $dest}
        $res = Set-AzureResource -Name $appName -ResourceGroupName $rgn -ResourceType Microsoft.Web/sites -ApiVersion 2014-04-01 -PropertyObject $prop
        Write-Host "Moved $appName from $source to $dest"
    }
}

2014-12-19

Microsoft Virtual Academy Links for 2014

So I thought that going through a few Microsoft Virtual Academy links could help some of you.

Here are the links I think deserve at least a click. If you find them interesting, let me know!

2014-11-14

Temporarily ignore SSL certificate problem in Git under Windows

So I’ve encountered the following issue:

fatal: unable to access ‘https://myurl/myproject.git/': SSL certificate problem: unable to get local issuer certificate

Basically, we’re working on a local Git Stash project and the certificates changed. While they were working to fix the issues, we had to keep working.

So I know that the server is not compromised (I talked to IT). How do I say “ignore it please”?

Temporary solution

This is because you know they are going to fix it.

PowerShell code:

1	$env:GIT_SSL_NO_VERIFY = "true"

CMD code:

1	SET GIT_SSL_NO_VERIFY=true

This will get you up and running as long as you don’t close the command window. This variable will be reset to nothing as soon as you close it.

Permanent solution

Fix your certificates. Oh… you mean it’s self signed and you will forever use that one? Install it on all machines.

Seriously. I won’t show you how to permanently ignore certificates. Fix your certificate situation because trusting ALL certificates without caring if they are valid or not is juts plain dangerous.

Fix it.

NOW.

2014-11-12

The Yoda Condition

So this will be a short post. I would like to introduce a word in my vocabulary and yours too if it didn’t already exist.

First I would like to credit Nathan Smith for teaching me that word this morning. First, the tweet:

Chuckling at “disallowYodaConditions” in JSCS… https://t.co/unhgFdMCrh — Awesome way of describing it. pic.twitter.com/KDPxpdB3UE
— Nathan Smith (@nathansmith) November 12, 2014

So… this made me chuckle.

What is the Yoda Condition?

The Yoda Condition can be summarized into “inverting the parameters compared in a conditional”.

Let’s say I have this code:

string sky = "blue";
if(sky == "blue") 
{
    // do something
}

It can be read easily as “If the sky is blue”. Now let’s put some Yoda into it!

Our code becomes :

string sky = "blue";
if("blue" == sky) 
{
    // do something
}

Now our code read as “If blue is the sky”. And that’s why we call it Yoda condition.

Why would I do that?

First, if you’re missing an “=” in your code, it will fail at compile time since you can’t assign a variable to a literal string. It can also avoid certain null reference error.

What’s the cost of doing this then?

Beside getting on the nerves of all the programmers in your team? You reduce the readability of your code by a huge factor.

Each developer on your team will hit a snag on every if since they will have to learn how to speak “Yoda” with your code.

So what should I do?

Avoid it. At all cost. Readability is the most important thing in your code. To be honest, you’re not going to be the only guy/girl maintaining that app for years to come. Make it easy for the maintainer and remove that Yoda talk.

The problem this kind of code solve isn’t worth the readability you are losing.

2014-11-11

Do you have your own Batman Utility Belt?

Just like most of us on any project, you (yes you!) as a developer must have done the same thing over and over again. I’m not talking about coding a controller or accessing the database.

Let’s check out some concrete examples shall we?

Have you ever setup HTTP Caching properly, created a class for your project and call it done?
What about creating a proper Web.config to configure static asset caching?
And what about creating a MediaTypeFormatter for handling CSV or some other custom type?
What about that BaseController that you rebuild from project to project?
And those extension methods that you use ALL the time but rebuild for each projects…

If you answered yes to any of those questions… you are in great risk of having to code those again.

Hell… maybe someone already built them out there. But more often than not, they will be packed with other classes that you are not using. However, most of those projects are open source and will allow you to build your own Batman utility belt!

So once you see that you do something often, start building your utility belt! Grab those open source classes left and right (make sure to follow the licenses!) and start building your own class library.

NuGet

Once you have a good collection that is properly separated in a project and that you seem ready to kick some monkey ass, the only way to go is to use NuGet to pack it together!

Checkout the reference to make sure that you do things properly.

NuGet - Publishing

OK you got a steamy new hot NuGet package that you are ready to use? You can either push it to the main repository if your intention is to share it with the world.

If you are not ready quite yet, there are multiple way to use a NuGet package internally in your company. The easiest? Just create a Share on a server and add it to your package source! As simple as that!

Now just make sure to increment your version number on each release by using the SemVer convention.

Reap the profit

OK, no… not really. You probably won’t be money anytime soon with this library. At least not in real money. Where you will gain however is when you are asked to do one of those boring task yet over again in another project or at another client.

The only thing you’ll do is import your magic package, use it and boom. This task that they planned would take a whole day? Got finished in minutes.

As you build up your toolkit, more and more task will become easier to accomplish.

The only thing left to consider is what NOT to put in your toolkit.

Last minute warning

If you have an employer, make sure that your contract allows you to reuse code. Some contracts allows you to do that but double check with your employer.

If you are a company, make sure not to bill your client for the time spent building your tool or he might have the right to claim them as his own since you billed him for it.

In case of doubt, double check with a lawyer!

2014-10-16

Software Developer Computer Minimum Requirements October 2014

I know that Scott Hanselman and Jeff Atwood have already done something similar.

Today, I’m bringing you the minimum specs that are required to do software development on a Windows Machine.

P.S.: If you are building your own desktop, I recommend PCPartPicker.

Processor

Recommendation

Intel: Intel Core i7-4790K

AMD: AMD FX-9590

Unless you use a lot of software that supports multi-threading, a simple 4 core here will work out for most needs.

Memory

Recommendation

Minimum 8GB. 16GB is better.

My minimum requirement here is 8GB. I run a database engine and Visual Studio. SQL Server can easily take 2Gb with some big queries. If you have extensions installed for Visual Studio, it will quickly raise to 1GB of usage per instance and finally… Chrome. With multiple extensions and multiple pages running… you will quickly reach 4GB.

So get 8GB as the bare minimum. If you are running Virtual Machines, get 16GB. It won’t be too much. There’s no such thing as too much RAM when doing software development.

Hard-drive

Recommendation

512 GB SSD drive

I can’t recommend enough an SSD. Most tools that you use on a development machine will require a lot of I/O. Especially random read. When a compiler starts and retrieve all your source code to compile, it will need to read from all those file. Same thing if you have tooling like ReSharper or CodeRush. I/O speed is crucial. This requirement is even more important on a laptop. Traditionally, PC maker put a 5200RPM HDD on a laptop to reduce power usage. However, 5200 RPM while doing development will be felt everywhere.

Get an SSD.

If you need bigger storage (terabytes), you can always get a second hard-drive of the HDD type instead. Slower but capacities are also higher. On most laptop, you will need external storage for this hard drive so make sure it is USB3 compatible.

Graphic Card

Unless you do graphic rendering or are working with graphic tools that require a beast of a card… this is where you will put the less amount of money.

Make sure to get enough of them for your amount of monitors and that they can provide the right resolution/refresh rate.

Monitors

My minimum requirement nowadays is 22 inches. 4K is nice but is not part of the “minimum” requirement. I enjoy a 1920x1080 resolution. If you are buying them for someone else, make sure they can be rotated. Some developers like to have a vertical screen when reading code.

To Laptop or not to Laptop

Some company go Laptop for everyone. Personally, if the development machine never need to be taken out of the building, you can go desktop. You will save a bit on all the required accessories (docking port, wireless mouse, extra charger, etc.).

My personal scenario takes me to clients all over the city as well as doing presentations left and right. Laptop it is for me.

2014-10-10

SVG are now supported everywhere, or almost

I remember that when I wanted to draw some graphs on a web page, I would normally have 2 solutions

Solution 1 was to have an IMG tag that linked to a server component that would render an image based on some data. Solution 2 was to do Adobe Flash or maybe even some Silverlight.

Problem with Solution 1

The main problem is that it is not interactive. You have an image and there is no way to do drilldown or do anything with it. So unless your content was simple and didn’t need any kind of interaction or simply was headed for printing… this solution just wouldn’t do.

Problem with Solution 2

While you now get all the interactivity and the beauty of a nice Flash animation and plugin… you lost the benefits of the first solution too. Can’t print it if you need it and over that… it required a plugin.

For OSX back in 2009, plugins were the leading cause of browser crash and there is nothing that stops us from believing that similar things aren’t true for other browsers.

The second problem is security. A plugin is just another attack vector on your browser and requiring a plugin to display nice graphs seem a bit extreme.

The Solution

The solution is relatively simple. We need a system that allows us to draw lines, curves and what not based on coordinate that we provide it.

That system should of course support colors, font and all the basic HTML features that we know now (including events).

Then came SVG

SVG has been the main specification to drawing anything vector related in a browser since 1999. Even though the specification started at the same time than IE5, it wasn’t supported in Internet Explorer until IE9 (12 years later).

The support for SVG is now in all major browsers from Internet Explorer to FireFox and even in your phone.

Chances are that every computer you are using today can render SVG inside your browser.

So what?

SVG as a general rule is under used or thought of something only artists do or that it’s too complicated to do.

My recommendation is to start cracking today on using libraries that leverage SVG. By leveraging them, you are setting yourself apart from others and can start offering real business value to your clients right now that others won’t be able to.

SVG has been available on all browsers for a while now. It’s time we start using it.

Browsers that do not support SVG

Internet Explorer 8 and lower
Old Android device (2.3 and less), partial support for 3-4.3

References, libraries and others

2014-10-08

Microsoft, Open Source and The Big Ship

I would like to note that this post takes only public information available and are not based on my status as Microsoft MVP. I did not interview anyone at Microsoft for those answers. I did not receive any privileged information for writing this post. All the information I am using and the insight therefor are based on publicly available information.

When it happened

I’m not sure exactly when this change toward open source happened. Microsoft is a big ship. Once you start steering, it takes a while before you can feel the boat turn. I think it happened around 2008 when they started including jQuery in the default templates. It was the first swing of the wheel. Back then, you could have confused it for just another side project. Today, I think it was a sign of change.

Before this subtle change, we had things like Microsoft Ajax, the Ajax Control Toolkit and so many other reinvention from Microsoft. The same comment came back every time:

Why aren’t you using <INSERT FRAMEWORK HERE> instead of reinventing the wheel?

Open source in the Microsoft world

Over 10 years ago, Microsoft wasn’t doing open source. In fact, nothing I remember was open sourced. Free? Yes. Open source? No. The mindset of those days has changed.

The Changes

Initiatives like NuGet, integrating jQuery into Visual Studio templates, the multiple GitHub accounts and even going as to replace the default JSON serializer byJSON.NET instead of writing its own are all proofs that Microsoft have changed and is continuing to change.

It’s important to take into account that this is not just lip service here. We’re talking real time and money investment to publish tools, languages and frameworks into the open. Projects like Katana and Entity Framework are even open to contribution by anyone.

Without letting slip that Roslyn (the new C#/VB.NET compiler) as well as the F#’s compiler are now open sourced.

This is huge and people should know.

Where is it going today

I’m not sure where it’s going today. Like I said, it’s a big ship. From what I see, Microsoft is going 120% on Azure. Of course, Windows and Office is still there but… we already see that it’s not an Open-Source vs Windows war anymore. The focus has changed.

Open source is being used to enrich Microsoft’s environment now. Tools likeSideWaffle are being created by Microsoft employees like Sayed Hashimi and Mads Kristensen.

When I see a guy like Satya Nadella (CEO) talk about open source, I think it is inspiring. Microsoft is going open source internally then encouraging all employees to participate in open source projects.

Microsoft has gone through a culture change, and it’s still happening today.

Comparing Microsoft circa 2001 to Microsoft 2014.

If you were at least 10 years in the field, you would remember that way back then, Microsoft didn’t do open source. At all.

Compare it to what you’ve read about Microsoft now. It’s been years of change since then and it’s only the beginning. Back then, I wouldn’t have believed anyone telling me that Microsoft would invest in Open Source.

Today? I’m grinning so much that my teeth are dry.

2014-09-03

List of d3.js library for charting, graphs and maps

So I’ve been trying different kind of library that are based on d3.js. Most of them are awesome and … I know I’m going to forget some of them. So I decided to build a list and try to arrange them by categories.

Charts

DimpleJS – Easy API, lots of different type of graphs, easy to use
C3.js – Closer to the data than dimple but also a bit more powerful
NVD3.js – Similar to Dimple, require a CSS for proper usage
Epoch – Seems to be more focused on real-time graphs
Dygraphs – Focus on huge dataset
Rickshaw – Lots of easy chart to choose from. Used by Shutterstock

Graphs

Since I haven’t had the chance to try them out, I won’t be able to provide more detailed comments about them. If you want me to update my post, hit me up on Twitter @MaximRouiller.

Data Visualization Editor

Raw – Focus on bringing data from spreadsheets online by simply copy/pasting it.
Tributary – Not simply focused on graphics, allows you to edit numbers, colors and such with a user friendly interface.

Geographical maps

DataMaps – Not a library per say but a set of examples that you can copy/paste and edit to match what you want.

2014-08-26

How to display a country map with SVG and D3js

I’ve been babbling recently with charts and most of them was with DimpleJS.

However, what is beside DimpleJS is d3.js which is an amazing tools for drawing anything in SVG.

So to babble some more, I’ve decide to do something simple. Draw Canada.

The Data

I’ve taken the data from this repository that contains every line that forms our Maple Syrup Country. Ours is called “CAN.geo.json”. This file is called a Geo-Json file and allows you to easily parse geolocation data without a hitch.

The Code

var svg = d3.select("#chartContainer")
    .append("svg")
    .attr("style", "solid 1px black")
    .attr("width", "100%")
    .attr("height", "350px");

var projection = d3.geo.mercator().center([45, 55]);
var path = d3.geo.path().projection(projection);

var g = svg.append("g");
d3.json("/data/CAN.geo.json", function (error, json) {
    g.selectAll("path")
           .data(json.features)
           .enter()
           .append("path")
           .attr("d", path)
           .style("fill", "red");
});

The Result

2014-08-19

Animating your charts with Storyboard charts from DimpleJS and d3js

Storyboard are charts/graphs that tell a story.

To have a graph, you need a timeline. Whether it’s days, weeks, months or years… you need a timeline of what happens. Then to have a chart, you need two axis. One that tells one version of the story, the other that relates to it. Then you move things forward in time and you move the data point. For each of those point, you also need to be able to label that point.

So let’s make a list of what we need.

Data on a timeline.
One numerical data
Another numerical data that correlate to the other in some way
A label to identify each point on the graph

I’ve taken the time to think about it and there’s one type of data that easy to come up with (I’m just writing a technical blog post after all).

Introducing the DataSet

I’ve taken the GDP, Population per country for the last 30 years from World Economics and merged it into one single file.

Note: World Economics is very keen to share data with you in format that are more readable than what is on their website. Contact them through their twitter account if you need their data!

Sound simple but it took me over 1 hour to actually merge all that data. So contact them to have a proper format that is more developer friendly.

Here’s what is the final result:

So this is the result I have.

The Code

That’s the most bonkers thing ever. Once you have the data properly setup, this doesn’t require that much code. Here’s what the code to generate the same graph on your end:

$.ajax("/GDP.csv", {
    success: function (data) {
        var csv = d3.csv.parse(data);

        var post3 = function () {
            var svg = dimple.newSvg("#storyboardGraph", 800, 600);
            var chart = new dimple.chart(svg, csv);

            csv = dimple.filterData(csv, "Year", ["2000", "2001", "2002", "2003",
                "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011",
                "2012", "2013", ]);

            var frame = 2000;
            chart.addMeasureAxis("x", "GDP");
            chart.addMeasureAxis("y", "Population");
            chart.addSeries(["Country"], dimple.plot.bubble);
            var story = chart.setStoryboard("Year");
            story.frameDuration = frame;
            story.addOrderRule("Date");
            chart.draw();
        };
        post3();
    }
});

Conclusion

Stop using weird graphing library that will cost you an arm and a leg. Your browser (both desktop and mobile) can handle this kind of technology. Start using it now.

See DimpleJS for more examples and fun scenario to work with. Don’t forget to also follow John Kiernander on Twitter.

As usual, the source is available on Github.

Enjoy!

2014-08-11

Slow Cheetah is going in maintenance mode

Just a quick blog post to let you know that it has been announced that Slow Cheetah is going in Maintenance Mode. I don’t have alternatives or scoop.

I’m just trying to get the word out as much as possible.

What is Slow Cheetah?

It’s a tool to transform XML files from App.config and ~~Web.config~~ (this will not be affected).

What does that mean for me?

It means that it won’t be supported in the next release of Visual Studio. No new features are going to be added. No fixes for future regressions are going to be applied.

What does it really mean?

Stop using it. It will still work for your current project but if you are expecting a quick migration when you upgrade Visual Studio, think again.

It might work but nothing is guaranteed.

What if I don’t want to change?

The code is open sourced. You can start maintaining it yourself but Sayed won’t be doing any more work on it.

2014-08-11

NuGet–Upgrading your packages like a boss

How often do you get on a project and just to assess where are things… you open the “Manage NuGet Packages for Solution…” and go to the Updates tab.

Then… you see this.

I mean… there’s everything in there. From Javscript dependencies to ORM. You know that you are in for a world of trouble.

Problem

You see the “Update All” and it’s very tempting. However, you know you are applying all kinds of upgrades. This could be fine when starting a project but when maintaining an existing project… you are literally including new features and bugs fixes for all those libraries.

A lot can go wrong.

Solution A: Update All a.k.a. Hulk Smash

So you said… screw it. My client and me will live with the consequences. You press Update All and… everything still works on compile.

Congratulation! You are in the very few!

Usual case? Compile errors everywhere that you will need to fix ASAP before committing.

Worse case? Something breaks in production and it takes us to this:

Solution B: Update safely a.k.a The Boss Approach

Alright… so you don’t want to go Hulk Smash on your libraries and on your code. And more importantly, you don’t want to be forced to wear the cowboy hat for a week.

So what is a developer to do in this case? You do it like a boss.

First, you open up “View > Other Windows > Package Manager Console”. Yes. It’s hidden but it’s for the pro. The kings. People like you who don’t use a tank to kill a fly.

It will look like this:

What is this? This beauty is Powershell. Yes. It’s awesome. There’s even a song about it.

So now that we have powershell… what can we do? Let me show you to your scalpel boss.

Update-Package is your best friend for this scenario. Here is what you are going to do:

1	Update-Package -Safe

That’s it.

What was done

This little “Safe” switch will only upgrade Revisions and will not touch Major and Minor versions. So to quote the documentation:

The ‘-Safe’ flag constrains upgrades to only versions with the same Major and Minor version component.

That’s it. Now you can recompile your app and most of your app should have all bug fixes for current Major+Minor versions applied.

If you want to read more about Semantic Versioning (which is what NuGet uses), go read Alexandre Brisebois’ post on it. Very informative and straight to the point.

2014-08-08

Adding color to your Javascript charts with Dimple and d3js (Part 2)

So we started by doing some graphs from basic data. But having all the colors the same or maybe even showing bars is not enough.

Here are a few other tricks to make the graph a little bit nicer. Mind you, there is nothing revolutionary here… it’s all in the documentation. The point of this blog post is only to show you how easy it is to customize the look of your charts.

First thing first, here are the sources we are working with.

Showing lines instead of bars

Ahhh that is quite easy.

It’s actually as simple as changing the addSeries function paramter

Here’s what the current code look like now:

var post2 = function() {
    // blog post #2 chart
    var svg = dimple.newSvg("#lineGraph", 800, 600);
    var chart = new dimple.chart(svg, csv);
    chart.addCategoryAxis("x", "Country");
    chart.addMeasureAxis("y", "Total");
    chart.addSeries(null, dimple.plot.line);
    chart.draw();
};
post2();

And the graph looks like this:

Simple enough?

Of course, this isn’t the type of data for lines so let’s go back to our first graph with bars and try to add colors.

Adding a color per country

So adding a color per country is about defining the series properly. In this case… on “Country”.

Changing the code isn’t too hard:

var post1 = function() {
    var svg = dimple.newSvg("#graphDestination", 800, 600);
    var chart = new dimple.chart(svg, csv);
    chart.addCategoryAxis("x", "Country");
    chart.addMeasureAxis("y", "Total", "Gold");
    chart.addSeries("Country", dimple.plot.bar);
    chart.draw();
};
post1();

And here is how it looks like now!

Much prettier!!

Next blog post, what about adding some legends? Special requests?

2014-08-06

Easy Charting in JavaScript with d3js and Dimple from CSV data

Before I go further, let me give you a link to the source for this blog post available on Github

###

When we talk about doing charts, post people will think about Excel.

Excel do provide some very rich charting but the problem is that you need a licence for Excel. Second, you need to share a file that often have over 30Mb of data to display a simple chart about your monthly sales or what not.

While it is a good way to explore your data, once you know what you want… you want to be able to share it easily. Then you use the first tool available to a Microsoft developer… SSRS.

But what if… you don’t need the huge machine that is SSRS but just want to display a simple graph in a web dashboard? It’s where simple charting with Javascript comes in.

So let’s start with d3js.

What is d3.js?

d3js is a JavaScript library for manipulation documents based on data. It will help you create HTML, CSS and SVG that will allow you to better display your data.

However… it’s extremely low level. You will have to create your axis, your popup, your hover, your maps and what not.

But since it’s only a building block, other libraries exist that leverage d3js…

Dimple

Dimple is a super simple charting library built on top of d3js. It’s what we’re going to use for this demo. But we need data…

Let’s start with a simple data set.

Sample problem: Medal per country for the 2010 Winter Olympics

Original data can be found here: http://www.statcrunch.com/app/index.php?dataid=418469

I’m going to just copy this into Excel (Google Spreadsheets) to clean the data a bit. We’ll remove all the “Country of ”, which will only pollute our data, as well as the Bins which could be dynamic but are otherwise useless.

First step will be to start a simple MVC project so that we can leverage basic MVC minimizing, layouts and what not.

In our _Layout.cshtml, we’ll add the following thing to the “head”:

1 2	<script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://dimplejs.org/dist/dimple.v2.1.0.min.js"></script>

This will allow us to start charting almost right away!

Step one: Retrieving the csv data and parsing it

Here’s some code that will take a CSV that is on disk or generated by an API and parse it as an object.

$.ajax("/2010-winter-olympics.csv", {
    success: function(data) {
        var csv = d3.csv.parse(data);
        console.table(csv);
    }
});

This code is super simple and will display something along those lines:

Wow. So we are almost ready to go?

Step two: Using Dimple to create our data.

As mentioned before, Dimple is a super simple tool to create chart. Let’s see how far we can go with the least amount of code.

Let’s add the following to our “success” handler:

var chart = new dimple.chart(svg, csv);
chart.addCategoryAxis("x", "Country");
chart.addMeasureAxis("y", "Total");
chart.addSeries(null, dimple.plot.bar);
chart.draw();

Once we refresh the page, it creates this:

Okay… not super pretty, lots of crappy data but… wow. We already have a minimum viable data source. To help us see it better… let’s clean the CSV file. We’ll remove all countries that didn’t win medals.

For our data set, that means from row 28 (Albania).

Let’s refresh.

And that’s it. We now have a super basic bar graph.

###

Conclusion

It is now super easy to create graphs in JavaScript. If you feel the need to create graphs for your users, you should consider using d3.js with charting library that are readily available like Dimple.

Do not use d3.js as a standalone way of creating graphs. You will find it harder than it needs to be.

If you want to know more about charting, please let me know on Twitter: @MaximRouiller

2014-07-24

Networking is important–or what we are really not good at

Many of us a software developer work with computers to avoid contact with people. To be fair, we all had our fair share of clients that would not understand why we couldn’t draw red lines with green ink. I understand the reason why would rather stay away from people who don’t understand what we do.

However… (there’s always an however) as I recently started my own business recently, I’ve really started to understand the meaning of building your network and staying in contact with people. While being an MVP has always lead me to meet great people all around Montreal, the real value I saw was when it was a very good contact of mine that introduced me to one of my first client. He knew they needed someone with my skills and directly introduced while skipping all the queues.

You can’t really ask for more. My first client was a big company. You can’t get in there without either being a big company that won a bid, be someone that is renowned or have the right contacts.

You can’t be the big company, you might not ever be someone but you can definitely work on contacts and expanding the amount of people you know.

So what can you do to expand your contacts and grow your network?

Go to user groups

This is killing 2 birds with one stone. First, you learn something new. It might be boring if you already now everything but let me give you a nice trick.

Arrive early and chat with people. If you are new, ask them if they are new too, ask them about their favourite presentation (if any), where they work, whether they like it, etc. Boom. First contact is done. You can stop sweating.

If this person has been here more than once, s/he probably knows other people that you can be introduced.

Always have business cards

I’m a business owner now. I need to have cards. You might think of yourself a low importance developer but if you meet people and impress them with your skills… they will want to know where you hang out.

If your business doesn’t have 50$ to put on you, make your own! VistaPrint makes those “Networking cards” where you an just input your name, email, position, social network, whatever on them and you can get 500 for less than 50$.

Everyone in the business should have business cards. Especially those that makes the company money.

Don’t expect anything

I know… giving out your card sounds like you want to sell something to people or that you want them to call you back.

When I give my card, it’s in the hope that when they come back later that night and see my card they will think “Oh yeah it’s that guy I had a great conversation with!”. I don’t want them to think I’m there to sell them something.

My go-to phrase when I give it to them is “If you have any question or need a second advice, call me or email me! I’m always available for people like you!”

And I am.

Follow-up after giving out your card

When you give your card and receive another in exchange (you should!), send them a personal email. Tell them about something you liked from the conversation you had and ask them if you could add them on LinkedIn (always good). Seem simple to salesman but us developers often forget that an email the day after has a very good impact.

People will remember you for writing to them personally with specific details from the conversation.

Yes. That means no “copy/paste” email. Got to make it personal.

If the other person doesn’t have a business card, take the time to note their email and full name (bring a pad!).

Rinse and repeat

If you keep on doing this, you should start to build a very strong network of developers in your city. If you have a good profile, recruiters should also start to notice you. Especially if you added all those people on LinkedIn.

It’s all about incremental growth. You won’t be a superstar tomorrow (and neither am I) but by working at it, you might end-up finding your next job through weird contacts that you only met once but that were impressed by who you are.

Conclusion

So here’s the Too Long Didn’t read version. Go out. Get business cards. Give them to everyone you meet. You intention is to help them, not sell them anything. Repeat often.

But in the long run, it’s all about getting out there. If you want a more detailed read of what real networking is about, you should definitely read Work the Pond by Darcy Rezac. It’s a very good read.

2014-07-04

Massive Community Update 2014-07-04

So here I go again! We have Phil Haack explaining how he handle tasks in his life with GitHub, James Chamber’s series on MVC and Bootstrap, Visual Studio 2014 Update 3, MVC+WebAPI new release and more!

Especially, don’t miss this awesome series by Tomas Jansson about CQRS. He did an awesome job and I think you guys need to read it!

So beyond this, I’m hoping you guys have a great day!

Community Update 2014-06-25

So not everything is brand new since I did my last community update 8 days ago. What I suggest highly is the combination of EventStore and ElasticSearch in a great article by Tomas Jansson.

It’s definitely a must read and I highly recommend it. Of course, don’t miss the series by James Chambers on Bootstrap and MVC.

Enjoy all the reading!

Must Read

Be more effective with your data - ElasticSearch | Raygun Blog (raygun.io)

Your Editor should Encourage You - You’ve Been Haacked (haacked.com)

Exploring cross-browser math equations using MathML or LaTeX with MathJax - Scott Hanselman (www.hanselman.com)

CQRSShop - Tomas Jansson (blog.tomasjansson.com) – Link to a tag that contains 3 blog post that are must read.

James Chambers Series

Day 18: Customizing and Rendering Bootstrap Badges | They Call Me Mister James (jameschambers.com)

Day 19: Long-Running Notifications Using Badges and Entity Framework Code First | They Call Me Mister James (jameschambers.com)

Day 20: An ActionFilter to Inject Notifications | They Call Me Mister James (jameschambers.com)

Web Development

Testing Browserify Modules In A (Headless) Browser (derickbailey.com)

ASP.NET

Fredrik Normén - Using Razor together with ASP.NET Web API (weblogs.asp.net)

A dynamic RequireSsl Attribute for ASP.NET MVC - Rick Strahl’s Web Log (weblog.west-wind.com)

Versioning RESTful Services | Howard Dierking (codebetter.com)

ASP.NET vNext Routing Overview (blogs.msdn.com)

.NET

Exceptions exist for a reason – use them! | John V. Petersen (codebetter.com)

Nuget Dependencies and latest Versions - Rick Strahl’s Web Log (weblog.west-wind.com)

Trying Redis Caching as a Service on Windows Azure - Scott Hanselman (www.hanselman.com)

2014-06-17

Massive Community Update 2014-06-17

So as usual, here’s what’s new since a week ago.

Ever had problem downloading SQL Server Express? Too many links, download manager, version selection, etc. ? Fear not. Hanselman to the rescue. I’m also sharing with you the IE Developer channel that you should definitely take a look at.

We also continue to follow the series by James Chambers.

Enjoy your reading!

Must Read

Download SQL Server Express - Scott Hanselman (www.hanselman.com)

Announcing Internet Explorer Developer Channel (blogs.msdn.com)

Thinktecture.IdentityManager as a replacement for the ASP.NET WebSite Administration tool - Scott Hanselman (www.hanselman.com)

NodeJS

Why Use Node.js? A Comprehensive Introduction and Examples | Toptal (www.toptal.com)

Building With Gulp | Smashing Magazine (www.smashingmagazine.com)

James Chambers Series

Day 12: | They Call Me Mister James (jameschambers.com)

Day 13: Standard Styling and Horizontal Forms | They Call Me Mister James (jameschambers.com)

Day 14: Bootstrap Alerts and MVC Framework TempData | They Call Me Mister James (jameschambers.com)

Day 15: Some Bootstrap Basics | They Call Me Mister James (jameschambers.com)

Day 16: Conceptual Organization of the Bootstrap Library | They Call Me Mister James (jameschambers.com)

###

ASP.NET vNext

Owin middleware (blog.tomasjansson.com)

Imran Baloch’s Blog - K, KVM, KPM, KLR, KRE in ASP.NET vNext (weblogs.asp.net)

Jonathan Channon Blog - Nancy, ASP.Net vNext, VS2014 & Azure (blog.jonathanchannon.com)

Back To the Future: Windows Batch Scripting & ASP.NET vNext | A developer’s blog (blog.tpcware.com)

Dependency Injection in ASP.NET vNext (blogs.msdn.com)

.NET

Here Come the .NET Containers | Wintellect (wintellect.com)

Architecture and Methodology

BoundedContext (martinfowler.com)

UnitTest (martinfowler.com)

Individuals, Not Groups | 8th Light (blog.8thlight.com)

Open Source

Download Emojis With Octokit.NET - You’ve Been Haacked (haacked.com)

ElasticSearch

Elasticsearch migrations with C# and NEST | Thomas Ardal (thomasardal.com)

Consolidating the farm

Powershell

The Code or rather, The Script

Temporary solution

Permanent solution

What is the Yoda Condition?

Why would I do that?

What’s the cost of doing this then?

So what should I do?

NuGet

NuGet - Publishing

Reap the profit

Last minute warning

Processor

Recommendation

Memory

Recommendation

Hard-drive

Recommendation

Graphic Card

Monitors

To Laptop or not to Laptop

Problem with Solution 1

Problem with Solution 2

The Solution

Then came SVG

So what?

Browsers that do not support SVG

References, libraries and others

When it happened

Open source in the Microsoft world

The Changes

Where is it going today

Comparing Microsoft circa 2001 to Microsoft 2014.

Charts

Graphs

Data Visualization Editor

Geographical maps

The Data

The Code

The Result

Introducing the DataSet

The Code

Conclusion

What is Slow Cheetah?

What does it really mean?

What if I don’t want to change?

Problem

Solution A: Update All a.k.a. Hulk Smash

Solution B: Update safely a.k.a The Boss Approach

What was done

Showing lines instead of bars

Adding a color per country

What is d3.js?

Dimple

Sample problem: Medal per country for the 2010 Winter Olympics

Step one: Retrieving the csv data and parsing it

Step two: Using Dimple to create our data.

Conclusion

Go to user groups

Always have business cards

Don’t expect anything

Follow-up after giving out your card

Rinse and repeat

Conclusion

Must Read

James Chamber’s Series

NodeJS

.NET

ASP.NET

CQRS Series (code on GitHub)

Architecture

Windows Azure

NuGet

Search Engines (ElasticSearch, Solr, etc.)

Must Read

James Chambers Series

Web Development

ASP.NET

.NET