A web.config implementation for AngularJS

It’s said that when learning a new language or framework it is best to approach it fresh, with no preconceived ideas from other languages. So completely ignoring that advice here is my implementation of an ASP.NET web.config file in AngularJS.

I’m used to squirrelling away my config in one external file and I want to do that again in AngularJS. Really it’s the appSettings part of the web.config file that I’m implementing but the point is that all my config for the application is in one file that I can use throughout my application. I like it in .NET and I want to do it again here.

The implementation

App.Config.js

The first step is to implement a config object in an external file like so…

window.appConfig = {
  apiRoot: "http://localhost:3000/api/",
  debug: 0
};

We have just 2 config items at the moment, the root of the API and if it is in debug mode or not. In the normal run of things I wouldn’t want to pollute the global scope with JSON objects. I would wrap them in an IIFE. However this is a special case as it is genuinely global so I’m explicitly placing it in the global scope i.e. using the window object.

As it is an external file I need to remember to reference in the main application page.

 <script src="app/config/app.config.js"></script>

App.Module.js

The next task is to reference the config in the main application file – app.module.js in this case. This is how I’m going to make it available throughout the entire application. Strictly speaking I don’t need to do this. As it is on the global scope I could leave it like that and directly reference it via the window object. I’d rather not do that. It’s going to make unit testing problematic in the future and anyway I don’t like it. Instead, I’m going to use the app.constant property in the main app.module file thus

 (function () {
    app.config(function ($routeProvider, $locationProvider) {
        //.. set up the application – routing etc..
    });
    app.constant("appConfig", window.appConfig);
 })();

My naughty accessing of a global object is here and nowhere else. The config object is placed into app.constant which is then available throughout the application via dependency injection. I could have used app.value and it would work in much the same way. However I’m never going to change these values during the lifetime of the application so the constant property is more appropriate.

Consuming the config

The config is then available via dependency injection in controllers, services, directives e.g.

    angular.module('app')
    .controller('MyController', ['appConfig', function (appConfig) {
            //.. app.config is now available
  });

In a service

The consumption in a service is the same. The use case here is a service can use the config to set the API url which could, should and will change in different environments.

angular.module('app')
.service('MyService', ['$http', 'appConfig', function ($http, appConfig) {
    var serviceRoot = appConfig.apiRoot;

    this.get = function(id) {
        var url = serviceRoot + "myAPIMethod/" + id;
        return $http.get(url);
    };
    //.. more methods
}]);

In a directive

I’ve previous blogged about a debug panel that can be toggled on and off. In that post I used a query string parameter to turn the display of the debug information on and off.  In truth I don’t really like that. This is the debug panel directive implemented with the web.config style config. As before it is injected in and it does a bit of DOM manipulation to remove the panel in the link method if debug is on. I prefer this way rather than my crazy query string implementation from before.

angular
  .module('app')
  .directive('debugDisplay', ['appConfig', function(appConfig){
      return {
          scope:
          {
              display : "=display"
          },
          templateUrl: "/views/directives/debugDisplay.html",
          link: function(scope, elem, attrs) {

              if(appConfig.debug == 0){
                  for(var i = 0; i < elem.length; i++)
                    elem[i].innerText = '';
              }
          }
      };
  }]);

Deployment

One of the reasons that I like external config files is that I can have different settings in different versions of the files. I can then use some sort of task runner or deployment script to swap them out as it moves through different environments. So I could have the different app.configs in my project i.e.

  • app.config (standard development one)
  • app.devtest.config
  • app.qa.config
  • app.preprod.config
  • app.prod.config

I can then delete the app.config file and rename the environment specific file so it is picked up in different environments. So when deploying to QA I would ….

  1. delete app.config
  2. rename app.qa.config to app.config

And as if by deployment magic I get different settings in QA. I currently use a bunch of PowerShell scripts to do this so it’s all automated but it can be done with whatever script or tool is most familiar or fashionable or nearest to hand.

Alternative implementations

As always, I’m not claiming that this is the best implementation for consuming application config. Global scope and config is going to be something that can be done in any number of ways. In fact I can think of several just while sat here typing in my pyjamas.

Global objects

I could just access the config directly wherever I like by using the global windows object like so..

    angular.module('app')
    .service(‘MyService’, ['$http', function ($http) {
        var serviceRoot = window.appConfig.apiRoot;

        this.get = function(id) {
            var url = serviceRoot + "myAPIMethod/" + id;
            return $http.get(url);

        };
        //.. more CRUD methods
    }]);

I personally don’t like having the windows object scattered through my code but it could be done. It’s not going to work well with any kind of unit testing though so unless you’re a no test kind of developer it’s probably best avoided.

Global scope

We could use $rootScope instead of app.constant to stash the external config file there. So accessing it would be a matter of grabbing the config from $rootScope thus

angular.module('app')
.service(‘MyService’, [‘$rootScope’, '$http', function ($rootScope, $http) 
{
   var serviceRoot = $rootScope.appConfig.apiRoot;
   //.. CRUD methods
}]);

I still like the idea of only the config being available in the method. I just get what I need, not the entire rootScope – that said this would work perfectly well.

Log Provider

This isn’t a complete replacement but it’s worth noting that debug config could be implemented through the $logProvider component if we wanted. To toggle on and off we would do this

  $logProvider.debugEnabled(false);

It’s not a complete replacement but in the interests of full disclosure there are other (better??) ways to get debug information in and out of angular that have their own config.

Useful Links

https://ilikekillnerds.com/2014/11/constants-values-global-variables-in-angularjs-the-right-way/
Article on app.constant vs app.value

http://stackoverflow.com/questions/6349232/whats-the-difference-between-a-global-var-and-a-window-variable-in-javascript
Useful stack overflow question comparing the windows object and global scope.

http://odetocode.com/Articles/345.aspx
Ode to Code on appSettings and web.config. That’s the part of the web.config I’m aiming to emulate in this post.

https://thinkster.io/egghead/testing-overview
Testing with angular. Here’s what you might miss if you want to implement this with a global object.

http://stackoverflow.com/questions/18880737/how-do-i-use-rootscope-in-angular-to-store-variables
Using rootscope to store variables

https://thinkster.io/egghead/index-event-log
logProvider examples – about halfway down.

Dealing with invalid js characters in VS Code

Even though mental stability is core personal principle that is rarely violated, here is something that was driving me mad recently.

The Problem

I was using VS Code do write a demo AngularJS application and I kept getting this error in my JavaScript files

[js] invalid character

With funny red squiggles thus

There was no rogue comma or strange character visible and no amount of deleting would resolve it. I’m more used to Visual Studio where odd things happen fairly frequently and this kind of thing can be ignored while the environment catches up with itself. However this floored VS Code and my lovely demo app just stop working. It was happening all the time. Bah!!

The Investigation

Although it isn’t visible in VS Code, the rogue character is visible in Chrome developer toolbar.

Press F12 -> Select Sources -> Navigate to the broken js file

The dodgy character is visible as a red dot and the character can be identified by hovering over it

In this case the character is

\u7f

\u donates Unicode and the 7f is hexadecimal so converting to decimal the character is 127. Looking this up on an ASCII table we find out it is a [DEL] character.

The Solution

Once the culprit is identified it’s an easier matter to use this regex

\u007f

to find and replace the rogue character and replace it with an empty string. Don’t forget to do a regex search in VS code – select the star icon in the search box as show below. This fixes the application and thus repairs my fragile mental state.

Why delete characters keep occurring in my JavaScript code is anyone’s guess. It could be a VS Code quirk but I’ve googled around it and haven’t found anything. It could be me flailing around with my new laptop and somehow inserting odd characters into files. I guess some things we aren’t meant to know.

Useful links

http://www.regular-expressions.info/unicode.html
How to write regex to find Unicode. The important point to remember is that it must contain 4 hexadecimal digits. So \u7f does find my DEL character – the regex needs to be padded out to \u007f

https://code.visualstudio.com/
Download page for VS Code. Recommended.

 

Better Numeric Range Input with ASP.NET MVC, HTML5 and JQuery

The Sin

I recently wrote this horrible code to generate a drop down box to select any number from 1 to 12.

Html.DropDownList("ddlClockHours", new List<SelectListItem>
 {
 new SelectListItem {Text = 1.ToString(), Value = 1.ToString()},
 new SelectListItem {Text = 2.ToString(), Value = 2.ToString()},
 new SelectListItem {Text = 3.ToString(), Value = 3.ToString()},
 new SelectListItem {Text = 4.ToString(), Value = 4.ToString()},
 new SelectListItem {Text = 5.ToString(), Value = 5.ToString()},
 @* And so on till 12 – I’m too embarrassed to continue *@
 })

Ouch! It was only a test harness but after an hour I still got sick of looking at it. It’s a sin that needs to be atoned for.

The Penance

For my penance I’ve said 5 Hail Marys and identified three better ways to generate numeric range dropdowns.

Using Enumerable.Range

If I want to stick with MVC and C# then there is a static method on Enumerable that will generate sequences of numbers i.e.

 Enumerable.Range(1, 12)

Will output 1 through to 12 as a list of ints. Leveraging this, my grotesque piece of Razor becomes

@Html.DropDownList("ddlClockHours", Enumerable.Range(1, 12)
.Select(x => new SelectListItem { Text = x.ToString(), 
Value = x.ToString() }));

Which renders out as a normal dropdown as before

Enumerable.Range

Much better.

Using HTML5

Of course we don’t even need to get into C#. If we’ve got the luxury of a modern browser we can just use HTML5 to give us a slider control.

<input id="clockHours" type="range" min="1" max="12"/>

Which renders as

HTML5

Better again.

Using JQuery

If you don’t have the luxury of a modern browser then you can fall back to JQuery UI which has a larger range of supported browsers. The code isn’t that much more but of course you need to reference JQuery and JQuery UI libraries. It’s another slider type control and the implementation is

<script>
 $(function() {
   $("#clockHoursJQuery").slider({
     min: 1,
     max: 12
   });
  });
 </script>

<h2>JQuery Numeric Range</h2>
<div id="clockHoursJQuery"></div>

Which looks like

JQuery UI

So much nicer.

The Atonement

To atone for my sin I swapped out the horrible code for the Enumerable.Range implementation. I think that’s my preference really. I don’t really want to include a whole bunch of scripts and css to get a decent control (JQuery) and I don’t want to limit myself to the latest and greatest browsers (HTML5). Beside I think Enumerable.Range is little known but pretty smart and let’s face it – who doesn’t want to be little known but pretty smart.

Useful links

https://www.dotnetperls.com/enumerable-range
Nice article on Enumerable.Range

http://www.htmlgoodies.com/html5/tutorials/whats-new-in-html5-forms-handling-numeric-inputs-using-the-number-and-range-input-types.html
More on the HTML slider control

https://jqueryui.com/slider/
Official documentation for the JQueryUI slider control

https://github.com/timbrownls20/Demo/blob/master/ASP.NET%20Core/Demo/Demo/Views/Demo/NumericDropdown.cshtml
As always there are code sample of all implementations on my git hub site.

 

Why Doesn’t My Visual Studio Solution Build? A Troubleshooting Guide

broken building

I’m pretty good at getting Visual Studio projects building correctly – I’m a bit of a Visual Studio whisperer. In one job I could get the ‘flag ship’ application up and running on a new machine in half the time of anyone else – that still meant half a day’s work. Strangely that’s not on my CV.

So here are the steps I go through to get a rogue project building in Visual Studio. These steps range from the basic to the bizarre. They are in the order I would do them and by following them I can pretty much get any Visual Studio project back on track. So put on your tin hat and let’s get that errant Visual Studio solution building.

Sanity Check

Before embarking on a full blown Visual Studio troubleshooting endeavour it’s best just to do a few simple checks.

Have you got latest code?

Everybody has wasted hours trying to get an old version of the code working. I still do it. The developer that sits opposite me still does it. My boss still does it. Don’t do it. Get the latest version of the code from your repository.

Does it build for other people in your team?

Just see if other people are having the same problem. If you have continuous build – check that is still working and running through cleanly. The code might not work for anyone. More illuminating – it might work for some at not others.

Basics

Every few weeks you will probably be faced with a non-building Visual Studio project. Here are some basic steps to help. These will probably be enough.

Clean and rebuild

clean solution

Go to

Solution Explorer -> Right Click -> Select Clean -> Wait -> Select rebuild

Often the bin directories have gone all wonky and are full of junk. Who knows what has happen to them. Clean and rebuild will refresh them and often work when a normal build doesn’t. Standard stuff – but then we are just beginning.

Build each project individually

Often you are faced with mountains of errors which is misleading. It could be one of your low level library projects that is failing to build and causing all other projects to fail. Rebuild each project individually starting with the low level ones that are dependencies for others. Sometimes that’s enough to get the entire solution building. At a minimum, you will better be able to see where the actual issue is and not be swamped by a heap of irrelevant error messages.

Close and reopen Visual Studio

It’s time to restart your Visual Studio. Don’t leave this till the end – it is often the problem. Turn it on and off again – it might help.

As a note – in my experience restarting your computer rarely helps. By all means try it but don’t be surprised when the solution still stubbornly refuses to build.

Manually delete all bin folders

This is really worth a try if you are working with an application with language variants. The language specific resource (e.g. Messages.fr-CH.resx) files compile down into satellite resource files in your bin folder that are contain in their own subfolder e.g.

…\bin\fr-CH\MyApplication.resources.dll

Weirdly Visual Studio Clean can leave these satellite assemblies behind. Your application will still build but it can cause changes in languages variants not to shine through.

This might seem like an edge case but this exact thing kept a colleague of mine baffled for 6 hours. It was a very emotional moment when we finally sorted it out. So this is very much worth a try.

Start Visual Studio in admin mode

run as administrator

I’m master of my own machine (i.e. I’m a local admin) and I’ve got my Visual Studio set to always open as an administrator. You might not. Right click and run as administrator.

If it isn’t possible get someone who is an administrator to open Visual Studio on your behalf. Then complain bitterly about not being a local admin or your own machine – you are a developer; you really should be.

Have you got bad references?

bad references

Just check all projects and make sure that the references are all there. Look out for the little yellow triangle. If you have bad references then jump to section below dealing with that.

Check IIS

This isn’t relevant for all projects but if you are building a web project using IIS then it’s worth doing checks around that. Obviously it’s a completely legitimate setup to use IIS Express. In that case this isn’t relevant.

IIS pointing at the wrong folder

This is often a problem when changing branches. Visual Studio normally makes a good job of switching for you but not always. If you are hooked up to the wrong folder then your project will build but you won’t be able to debug it. Also changes that you are convinced you are made won’t shine through. This has driven me crazy before.

IIS explore folder

To check

  1. Open IIS (run -> inetmgr)
  2. Navigate to website
  3. Press explore and confirm you are where you think you should be. You might not be in Kanas anymore.

Permissions on app pool

This won’t manifest itself as a build failure but the project won’t be running as expected particularly when accessing external resources. It might be worth checking what the app pool is running as.

 

application pool settings

To check

  1. Open IIS (run -> inetmgr)
  2. Application Pool -> select the one for the website
  3. Advanced settings

You can now check the user.

The application pool runs under ApplicationPoolIdentity by default. What I’ve sometimes seen is that it’s been changed to a normal user whose password has expired. This is typically fallout from previous Visual Studio failures echoing through the ages.

Bad references

bad references

If you are noticing a yellow triangle on your project references then Visual Studio can’t find a dependency. Sometimes there is no yellow triangle and all looks fine but it still can’t find the dependencies.

With the advent of nuget this is less of a problem now but it does still happen. There are instances where incorrect use of nuget makes it worse and more baffling.

Check reference properties

Go to the references -> right click -> properties

references properties

There are two things to look for

  1. Is it pointing to where you think it should be? It might not be
  2. Copy Local. Bit of witchcraft but I always set this to copy local. It will copy the dll into the bin folder so at least I can satisfy myself that it has found it and is copying it through OK.

Have you checked in the packages folder – don’t!

Even if you are using nuget your bad reference problem might not be at an end. Checking in the packages folder can cause the references not to be found. This is especially baffling since looking at the reference properties reveals no problems. The path to the required dlls is definitely valid and the dlls are definitely there. But it cannot be found – frustration and finger biting.

To resolve delete the packages folder then remove the folder from source control. Rebuild and all will be well.

Resetting Visual Studio

Resetting Visual Studio can (probably will) cause your environment to lose all your custom defaults – so all your shortcuts, settings perhaps plugins will go. Therefore I’ve left this step towards the end as it is not without consequences. That said it is often the resolution so it’s not a bad idea to do it earlier in the ‘what on earth is going wrong with Visual Studio’ resolution process.

Delete all temporary and cache files

This was a fix that often worked in slightly older versions of Visual Studio. I’m using VS 2015 currently and this often isn’t a problem. Still it is worth clearing out these folders and rebuilding

C:\Users\{user name}\AppData\Local\Microsoft\WebsiteCache

C:\Users\{user name}\AppData\Local\Temp

Delete project setting files

Your user settings for a project are stored in files with the extension *.csproj.user i.e

BookShelf.MVC.csproj.user

It’s worth deleting all those and rebuilding so reset user specific settings. Also if you have these checked into source control then remove them. They are specific to you and shouldn’t be in a shared repository.

Reset Visual Studio on the command line

When Visual Studio appears utterly broken and you are reaching for the uninstall button, this can often help. It takes Visual Studio back to its initial settings you will need to reapply any custom settings that you have.

Close VS then in a command prompt go to the folder that has the Visual Studio.exe (devenv.exe) i.e.

cd C:\Program Files (x86)\Microsoft Visual Studio {Version code}\Common7\IDE

For VS 2015 it is

cd C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE

Then

devenv /setup

Reopen visual studio

A similar approach can be used with devenv.exe /Resettings as detailed here.

Reset Visual Studio through file explorer

If the command line doesn’t work then try resetting Visual Studio via the file system. This often works when the command line doesn’t. Try this when Visual Studio is undergoing a profound collapse particularly when it keeps popping up an alert box detailing errors being written here…

C:\Users\{user name}\AppData\Roaming\Microsoft\VisualStudio\{VS version}\ActivityLog.xml

i.e. for Visual Studio 2013

C:\Users\codebuckets\AppData\Roaming\Microsoft\VisualStudio\12.0\ActivityLog.xml

To resolve for Visual Studio 2013

  1. Close VS
  2. Go to C:\Users\tbrown\AppData\Local\Microsoft\VisualStudio\12.0
  3. Rename the folder to C:\Users\tbrown\AppData\Local\Microsoft\VisualStudio\12.0.backup
  4. Reopen VS. The folder C:\Users\tbrown\AppData\Local\Microsoft\VisualStudio\12.0 will be regenerated.

The process is the same for other versions of Visual Studio except the version number at the end will be different i.e C:\Users\tbrown\AppData\Local\Microsoft\VisualStudio\14.0 for VS 2015.

Disable plugins

Leave this one till last because it’s a pain. Go to Tools -> Extensions and plugins. Then disable each plugin you can one by one.

disable plugin box

It’s a pain because even if it is a plugin that causes it, you have a choice of uninstalling and living without it or contacting the vendor. Clearly if you didn’t buy it then the vendor isn’t going to be interested in helping you. I’ve found PostSharp and Resharper the likely culprits here. The Resharper vendor was very helpful. PostSharp weren’t (because we hadn’t bought it!!).

Bizarre Ones

Be careful what you check in

Checking files into source control that you really shouldn’t can cause difficult to diagnose problems. This often happens to me for continuous builds where the user building has fewer privileges than I’m used to. It does happen locally too. The following files shouldn’t be checked in

  • Bin folders
  • Obj folders
  • Autogenerated xml (i.e. documentation generated during build)
  • Packages folder
  • .csproj.user files

If you have checked them in then delete from your disk, remove from source control and rebuild.

Is your file path too long

Windows limits the file path to 260 characters. It could be that you have exceeded this and Visual Studio has started to complain. The awkward thing is that it complains in a very oblique way. The error that you see will be something on the lines of…

“obj\Debug\LongFileName.cs” has an invalid name. The item metadata “%(FullPath)” cannot be applied to the path “obj\Debug\LongFileName.cs “. obj\Debug\\LongFileName.cs           ContainingProject.proj            C:\Program Files (x86)\MSBuild\14.0\bin\Microsoft.Common.CurrentVersion.targets

So not obvious. Double click the error and it will take you to the Microsoft.Common.CurrentVersions.targets file in the depths of the framework folder. Less than illuminating.

Once you have diagnosed this then the resolution is easy – move your project to a shorter file path. I’ve found this a problem when switching branches which can have longer file paths than the Main branch.

If all else fails

If all else fails uninstall Visual Studio and reinstall. But honestly, I have reached this frustrating point, uninstalled, reinstalled, waited hours and the problem persists. This might not be the cure that you were looking for. Go into a corner and have a good long think before you resort to this one.

So congrats if you have read this far (or commiserations as your Visual Studio install is clearly in a bad way) but hopefully this guide will enable you to have a healthy and happy Visual Studio for years to come.

Useful Links

http://stackoverflow.com/q/1880321/83178
Good stack overflow explanation on why the 260 character filepath limit exists in windows.

https://msdn.microsoft.com/en-us/library/ayds71se.aspx
Official advice from Microsoft about bad references.

http://stackoverflow.com/questions/1247457/difference-between-rebuild-and-clean-build-in-visual-studio
There is a difference between Clean + Build and ReBuild as detailed here.

10 Beautiful Software Development Haikus

mount fuji

In my day job I send a lot of very routine emails announcing new deployments or pleading with people to fix the continuous build. I’ve started to amuse myself by sending them as haikus (3 line poems with 5, 7 then 5 syllabus on each line). I don’t think anyone has noticed. They just think I’m being a bit more terse than usual.

I this spirit I’m going to share with you 10 more beautiful haikus about software development. I’m sure you’ll agree that they capture the exquisite beauty of the software craft, the bittersweet sadness of an application crash and the inevitable fragility of a software patch to live. They are also short, don’t have to rhyme and are easy to write.

Traditional haiku collections are split into seasons. I’ll also split them but into categories that better juxtapose the joys and frustrations of the software development cycle.

Development Operations

Build server is slow
Disk whirs, lights flash but no builds
Request SSD

Test build being deployed
We wait for the build green line
Sadness. It’s amber

TFS build red
Queue the integration build
TFS still red

Build has been deployed
Is available for test
Please handle with care

Coding

SOLID principles
SRP and OCP
Still don’t know Liskov

Flakey code base
Instigate peer code reviews
No one has the time

Application crash
Detailed error report but
Where is the stack trace?

The Workplace

Corporate fruit bowl
Apples, bananas and plums
No-one eats kiwi

Our daily stand up
Managers attend. Involved,
But not committed

Professional Development

Personal dev blog
I watch the web traffic. Why?
I don’t really know

The Worst Thing About Microsoft Exams

Exam Upset I’ve long been a bit of a fan of Microsoft exams – shiny new exams that give the veneer of professionalism to a CV. Lovely. I did a fair number at the start of my career and a few thereafter. I’ve dined out on the knowledge gained for years. However there is a real risk being steered towards obsolete or just strange technology choices. From the last few exams I took here are just some examples of the odd/skewed/’never going to use’ technologies that the MS exam devotee might end up being steered towards.

Health Monitoring

web event hierarchyWith ASP.Net there is an extensive health monitoring architecture for your applications that you are never going to use. It’s got everything you need and much, much more – way too much more. I’ve never seen anyone use it and even the lead developer who implemented it admits it’s over-engineered.

Just 2 seconds looking at the above web event hierarchy makes my retinas ache. Every uses log4net, elmah or just rolls their own. Unfortunately it’s on every ASP.Net exam I’ve ever done (70-315, 70-551, 70-486) and you have to learn about it (sigh).

Lab Management

Lab management is a test environment provisioning architecture in Team Foundation Server. It forms a not insignificant portion of the TFS admin exam (70-496). It looks great and the books and videos are convincing. I was convinced it was a great idea and wanted to implement it and tried to convince others.

It turns out though this is not best practice for deployments at all. You should use the same method of promotion that you use into live. This is becoming more current with the advent of technologies such as Docker. Lab Management though is very particular and the deployment into lab management environments bears no relationship to deployment into production. None! It’s a pain to learn and it’s still on the exam (sigh).

App Fabric

A minor gripe now. In the MVC exam (70-486) the azure caching section steers you towards learning about App Fabric as a service bus for hybrid applications. Fine but turns out this technology is end of life and will be retired in 2017. But it’s still on the exam (sigh).

Windows Azure

 

azure vs aws

There is an entire exam track around Azure cloud computing and it’s a goodly portion of the MVC exam 70-486. Being a Microsoft exam devotee I imagined that Azure was THE cloud computing solution. I was surprised when I saw the above graph and realised that Amazon Web Services has way more implementations out there.

Azure is fine and interesting and good and healthy and I’m sure your mother approves of the use of it at the dinner table. But this is a textbook example of the MS exam narrowing your perspective and encouraging people (me) to ignore other potentially more viable alternatives. But it’s on the exams and you have to learn about it (sigh).

MSTest, Fakes and Shims

Unlike some of my other gripes, I do unit testing on a regular basis so it’s a drag to have to learn an alternative unit test framework for an exam that I’m unlikely to use. Maybe millions of developers use MSTest but I’ve never met them. I wish the exams were a bit more neutral with the choice of unit test technology but they predictably steer you towards Microsoft technologies. But it’s on the MVC exam so put on your big boy pants and learn about it (sigh).

But it’s all good really

Nothing is perfect. I’m not, the software I write isn’t and Microsoft exams aren’t. I still think they are great for developers at the start of a career – it gave me a boost and I still like to see them on developer CVs. It’s a good signal of career dedication. I’d much rather have a Microsoft exam than not. It just helps to be aware of their limitations.

Troubleshooting blank pages and render failures in AngularJS.

An odd thing happened this weekend when I was tinkering with some code while pointedly ignoring my daughter and parenting responsibilities generally.

The Task

Put in a new directive to implement a reusable panel to display error information. Not ground breaking stuff by any means. The html is simple enough

<div class="row alert alert-warning alert-dismissible" role="alert" ng-show="display">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
    <strong>Warning!</strong> {{display}}
</div>

Very bootstrappy as usual. Reference the directive on the view thus

<error-display display="vm.Error" />

Happy days – a lovely reusable error panel.

The Problem

Sadly it isn’t to be. The previously functional page becomes entirely blank after the directive.

Badly formed directive

Unhelpfully there is no errors in the console and viewing the HTML source does nothing for us since it is a single page application.

The Solution

The problem is the use of self closing tags when referencing the directive. Referencing the directive with an explicit closed tag resolves the issue. Example – use this markup

    <error-display display="vm.Error"></error-display>

And the page springs back to life

Well formed directive

Relief all round. Fortunately I found the solution pretty quickly (though I still continued to ignore the daughter). It’s the sort of error that can wasted hours if it hits on a Friday afternoon when you are feeling generally depleted.

Actually the use of self closing tags isn’t that helpful in HTML5. I’ve got into the habit of using them but looking into it more deeply it’s actually a bad habit. They are valid but optional in HTML5 for void elements but invalid for non-void elements. Since they are either optional or invalid its best to avoid them and write out the tag – particularly as it causes obscure issues like this.

Useful Links

http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5
Good discussion of Stack Overflow about HTML5 and self closing tags.

https://docs.angularjs.org/guide/directive
The official documentation for AngularJS directives if more information is required.

 

 

T-SQL Random Data Generator

I’ve often had the need to populate database tables with chunks of random data for testing and so forth and this random data generator stored procedure does the trick for me. I’ve had it knocking round in my sock draw for quite a while so I’ve dusted it off and updated it. It actually does a bit more than I remembered. I’ve used it on SQL Server 2005 and 2008 and the INFORMATION_SCHEMA use should make it forwardly compatible.

Code

usp_RandomInsertGenerator

This procedure actually does the heavy lifting and generates the insert statements.

Create Procedure usp_RandomInsertGenerator
(
 @TableName nvarchar(128)
)
As

-- does foreign keys
-- max character length
-- standard data types
-- identity columns
-- detects nullable columns and leaves as null

-- does not do
-- omitted datatypes - binary, varbinary, image, timestamp

-- Hacks
-- foreign key links where linked to child table via a unique index rather than a primary key. Assumpts FK of 1

-- assumes 
-- foreign keys are of a numeric type i.e. ints, tinyints, floats etc...
-- assumes foreign key constraints exist

Begin

Set NoCount On

Declare @ColumnName nvarchar(128)
 Declare @FK_TableName nvarchar(128)
 Declare @FK_ColumnName nvarchar(128)
 Declare @ConstraintName nvarchar(128)
 Declare @DataType nvarchar(128)
 Declare @CharacterMaximumLength int
 Declare @Sql nvarchar(max)
 Declare @MaxValue int
 Declare @InsertValue nvarchar(400)
 Declare @SqlOutputFields nvarchar(max)
 Declare @SqlOutputValues nvarchar(max)
 Declare @FirstLoop bit
 Declare @IsIdentity bit
 Declare @StringInsert bit
 Declare @DummyText varchar(48)

Set @FirstLoop = 1
 Set @SqlOutputFields = 'INSERT INTO ' + @TableName + ' ('
 Set @SqlOutputValues = ' VALUES ('
 Set @DummyText = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'

-- cursor loops through every column for named table
 Declare procCursor CURSOR FORWARD_ONLY
 For 
 Select 
 COLUMN_NAME, 
 DATA_TYPE, 
 CHARACTER_MAXIMUM_LENGTH 
 From 
 INFORMATION_SCHEMA.COLUMNS col
 Where 
 TABLE_NAME = @TableName
 And IS_NULLABLE = 'NO'
 Order By 
 ORDINAL_POSITION

Open procCursor
 Fetch Next From procCursor Into @ColumnName, @DataType, @CharacterMaximumLength

while @@fetch_status <> -1
 Begin
 
 -- datatypes i have not bothered implementing
 if @DataType = 'cursor' OR @DataType = 'timestamp' 
 Or @DataType = 'binary' Or @DataType = 'varbinary' Or @DataType = 'image'
 Begin
 Raiserror('Unsupported Data Type', 1, 16)
 End

--reset variables
 Set @FK_TableName = ''
 Set @FK_ColumnName = ''
 Set @StringInsert = 0
 Set @ConstraintName = ''
 
 -- Do not add in an insert value if the loop is an identity
 Select @IsIdentity = COLUMNPROPERTY(OBJECT_ID(@TableName),@ColumnName,'IsIdentity')
 if @IsIdentity = 1 
 Begin
 Fetch Next From procCursor Into @ColumnName, @DataType, @CharacterMaximumLength
 continue
 End
 
 -- getting the value to be inserted for this data type
 if @DataType = 'varchar' Or @DataType = 'nvarchar' 
 Or @DataType = 'char' Or @DataType = 'nchar'
 Or @DataType = 'text' Or @DataType = 'ntext'
 Begin
 Set @StringInsert = 1
 Set @InsertValue = SubString(@DummyText, 1, @CharacterMaximumLength)
 End
 Else if @DataType = 'datetime' Or @DataType = 'smalldatetime'
 Begin
 Set @StringInsert = 1
 Set @InsertValue = Cast(GetDate() as varchar(20))
 End
 Else if @DataType = 'uniqueidentifier'
 Begin
 
 Set @StringInsert = 1
 Set @InsertValue = Cast(NewId() as varchar(200))
 End
 Else -- it is some key of numeric type
 Begin
 
 -- getting the child table indexes
 Set @Sql = '
 Select 
 @FK_TableName = pkconst.TABLE_NAME,
 @FK_ColumnName = pkconst.COLUMN_NAME,
 @ConstraintName = coluse.CONSTRAINT_NAME
 From 
 INFORMATION_SCHEMA.KEY_COLUMN_USAGE coluse 
 Join INFORMATION_SCHEMA.REFERENTIAL_CONSTRAINTS fkconst 
 On fkconst.CONSTRAINT_NAME = coluse.CONSTRAINT_NAME
 Left Join INFORMATION_SCHEMA.KEY_COLUMN_USAGE pkconst 
 On pkconst.CONSTRAINT_NAME = fkconst.UNIQUE_CONSTRAINT_NAME
 Where 
 coluse.TABLE_NAME = @TableName 
 And coluse.COLUMN_NAME = @ColumnName'


 Execute sp_executesql @Sql, N'@TableName nvarchar(128), 
 @ColumnName nvarchar(128), 
 @FK_TableName nvarchar(128) OUTPUT, 
 @FK_ColumnName nvarchar(128) OUTPUT,
 @ConstraintName nvarchar(128) OUTPUT', 
 @TableName=@TableName, 
 @ColumnName=@ColumnName, 
 @FK_TableName=@FK_TableName OUTPUT, 
 @FK_ColumnName=@FK_ColumnName OUTPUT,
 @ConstraintName=@ConstraintName OUTPUT
 
 if Len(@FK_TableName) > 0 And Len(@FK_ColumnName) > 0
 Begin

/* have found foreign key and the lookup table 
 so pick a random primary key from the lookup table */
 Set @Sql = 'Select top 1 @InsertValue = Cast(' + @FK_ColumnName + 
 ' as varchar(200)) From ' 
 + @FK_TableName + ' Order By newid()'
 Execute sp_executesql @Sql, N'@InsertValue nvarchar(128) OUTPUT', @InsertValue=@InsertValue OUTPUT

End
 Else if(Len(@ConstraintName) > 0)
 Begin
 
 /* OK we've found the foreign key constraint but have no idea what the
 lookup table is. This is because we are joining on a unique index to the 
 lookup table not a primary key. Make a MASSIVE assumption in this instance
 - that the lookup table has a link value of 1 */
 Set @InsertValue = '1'

End
 Else
 Begin
 -- no foreign key so the max that can be inserted is based on the datatype
 -- do not bother with any thing greater than thirty thousand - big enough
 if @DataType = 'bit'
 Set @MaxValue = 1
 else if @DataType = 'tinyint'
 Set @MaxValue = 255
 else if @DataType = 'smallint'
 Set @MaxValue = 32767
 else
 Set @MaxValue = 32767
 
 -- randomly generate a number to insert up to maximum
 Set @InsertValue = Cast(ROUND(((@MaxValue - 1) * RAND() + 1), 0) as varchar(200)) 
 
 End
 End -- end of numeric processing
 
 -- building up output string
 Declare @Delimiter char(1)
 if @FirstLoop = 1
 Begin
 Set @FirstLoop = 0
 Set @Delimiter = ''
 End
 Else
 Begin
 Set @Delimiter = ','
 End

Set @SqlOutputFields = @SqlOutputFields + @Delimiter + @ColumnName
 
 if @StringInsert = 1
 Begin
 Set @SqlOutputValues = @SqlOutputValues + @Delimiter + '''' + @InsertValue + ''''
 End
 Else
 Begin
 Set @SqlOutputValues = @SqlOutputValues + @Delimiter + @InsertValue 
 End

Fetch Next From procCursor Into @ColumnName, @DataType, @CharacterMaximumLength
 End -- finished this column = go to next

close procCursor
 deallocate procCursor

-- outputting the sql string
 Set @SqlOutputFields = @SqlOutputFields + ')'
 Set @SqlOutputValues = @SqlOutputValues + ')'

select @SqlOutputFields + ' ' + @SqlOutputValues

End 
Go

usp_RandomInsertGeneratorWrapper

It’s very easy to create a wrapper stored procedure to get multiple statements. One row of random data isn’t that much use – 1000 might be.

Create Procedure usp_RandomInsertGeneratorWrapper
(
 @TableName nvarchar(128),
 @NumberOfInserts int
)
As
Begin
 
 Set NoCount On

Declare @StatementCount int
 Set @StatementCount = 0

While @StatementCount < @NumberOfInserts
 Begin
 
 exec usp_RandomInsertGenerator @TableName
 Set @StatementCount = @StatementCount + 1
 End

End

Usage

To get an insert for one line of data

exec usp_RandomInsertGenerator ‘MyTableName’

To get multiple insert statements call the wrapper function

usp_RandomInsertGeneratorWrapper ‘MyTableName’, 1000

Notes and disclaimers

What it does

  • It outputs an insert T-SQL statement for any named table in the database.
  • Detects foreign keys and inserts and makes a random but valid link to the child table (this was the hard part)
  • Detect different data types and does the necessary SQL formatting
  • Accounts for max character length in string type fields
  • Accounts for identity columns
  • Detects nullable columns and leaves them null

What it doesn’t do

  • Doesn’t account for unique indexes
  • There are omitted datatypes (cursor, timestamp, binary, varbinary, image) that I’m not really interested in right now.

Hacks and shortcuts

Where the foreign key links are linked to a child table via a unique index rather than a primary key it assumes a foreign key of 1. The INFORMATION_SCHEMA views don’t include index information. So this would necessitate delving into the sys.index table. Not impossible but the proc was complicated enough as it was. I didn’t need it so I didn’t do it.

Assumptions

  1. Foreign keys are of a numeric type i.e. int, float et. al.
  2. Foreign key constraints exist on the database. It isn’t magic – it can’t work out the relationships if they don’t exist.

Room for improvement

Here’s some extensions that may be useful for individual projects

  1. Implement missing datatypes.
  2. Create custom inserts for known field names to give more realistic data for your application
  3. Randomise the character data properly.

So that’s it. Live it, love it and fiddle about with it a bit.

Useful links

The official documentation for the INFORMATION_SCHEMA used in this procedure is here
https://msdn.microsoft.com/en-us/library/ms186778.aspx

As ever the source code is on GitHub. There is nothing more than what is here but my WordPress code formatting plugin hasn’t made a great job of formatting the SQL code so the GitHub link might give clearer view of the SQL. Also, it seemed cruel not to give it a home on my demo repository with the rest of my code samples.
https://github.com/timbrownls20/Demo/blob/master/T-SQL/usp_RandomInsertGenerator.sql

 

 

Free Book: JavaScript Best Practice

getting MEANA quick one. Most web developers can write JavaScript and I suspect it’s on most developer’s CVs somewhere. But it’s easy to write bad JavaScript and not so easy to write the good stuff. I guess it’s because JavaScript itself is so free and easy. It isn’t opinionated.

So I thought this JavaScript best practice primer was an excellent read and it’s freely available. It’s an online bonus appendix to Simon Holme’s Getting MEAN book. The book itself is really good and worth a read if you are interested in the MEAN stack. The appendix though is like multi vitamins – it’s good for everyone.

Even though I’ve been writing JavaScript on and off for years it still showed me a thing or two. It covers things like

  1. Variable hoisting
  2. Block and global scope
  3. Callbacks
  4. Comparison operators
  5. Object orientated coding including IIFE
  6. And more ….

Only takes half an hour or so to read and I’m a slow reader. One to recommend to family and friends. It’s certainly what my Mum is getting next Christmas.

Simple Debug Panel for AngularJS

I am aware that there are many many other ways to get debug information from an AngularJS application but that’s not stopped me implementing another one. I do actually find a customised output of JSON objects useful particularly when working with deep object graphs. The implementation also is useful as a worked example of a couple of AngularJS principles.

The Demo Application

The demo application is a bookshelf application that searches the google book API and enables the user to add books to their own library. This is my ‘go to’ demo application that I’ve implemented a couple of times in different frameworks. This one is using the MEAN stack and the source code can be found here.

The Problem

When I search the google API I get a very large complex JSON object as the output. I want to know what is in there as I’m saving bits of it in my own database and might be interested in other bits. I want it displayed but easy to toggle on and off. I’m ultimately going to read something from the query string to do this as it is easy to toggle with minimal fuss.

When it’s finished it’s going to look like this…

debug panel
Google Bool API results displayed in debug panel

I’m going to use bootstrap for styling throughout as I’m not hugely concerned about how it looks – it’s just got to be reasonably neat. So its bootstrap classes throughout I’m afraid.

The Solution

The solution is going to demonstrate the following

  1. The use of directives in AngularJS
  2. Using global values and config
  3. Setting globally accessible values from the query string.

    Step 1: Implement a debug panel

    The initial implementation is directly on the search page. When I do a search I want to see the following debug output

    debugpanelonsearch
    Debug panel displayed on book search page

Before I do a search I don’t want to see anything.

The implementation is

<!— book details page -->
 <div class="row" ng-show=" searchResults ">
    <div class="col-md-8">
        <hr />
        <pre>{{searchResults | json}}</pre>
    </div>
</div>
<!— rest of book details page -->

The scope has a property SearchResults with a giant json object direct from the GoogleAPI. I want to show this. I use the json filter to prettify the result and it’s wrapped in pre tags so it displays like code. The ng-show attribute hides it if the searchResults is null or generally falsy which is what I want. That’s pretty good and works for me.

Step 2: Make it a directive so it can be reused

Now I want this on every page and I want it to display anything I want not just the searchResults. I want it to be generally useful. To achieve this I’m going to use directives which allow me to include fragments of HTML across different parts of my site. I now want it on the book details page as well.

The first job is to extract out the debug panel into a separate html file and to remove the dependency on searchResults. The debug panel html is extracted and saved into its own file at

{root}/views/directives/debugPanel.html

And it looks like

<div class="row" ng-show="display">
    <div class="col-md-8">
        <hr />
        <pre>{{display | json}}</pre>
    </div>
</div>

This is the contents of the entire file now. I’ve removed the binding to searchResults and I have now got a property called ‘display’. This is any JSON object I want to display in my results panel.

Next job is to tell my angular application about my new directive. So I create a new JavaScript file and put this in

angular
      .module('app')
      .directive('debugDisplay', function(){
          return {
              scope:
              {
                display : "=display"
              },
              templateUrl: "/views/directives/debugDisplay.html",
          };
      });

This does a few things. It tells angular where to find the html fragment for display via the templateUrl property. More interesting it also uses scope isolation to feed in the JSON object I want to display.

              scope:
              {
                display : "=display"
              },

The scope property is the link between the page and the directive. I can insert my parent page scope into an attribute called display and this becomes available to the directive. It breaks the hardcoded dependency on the parent scope and makes it all more flexible. The ‘=’ in ‘=display’ tells angular it is an attribute.

That’s probably not hugely clear but finishing the example should help us. The last step is to reference the directive on the book details page. I need to remember to include the script

<script src="app/directive.debugDisplay.js"></script>

Then the directive is referenced as markup which looks quite neat

<debug-display display="vm.book"></debug-display>

So the display attribute is bound to the book property which is then fed through to the debug panel and displayed. I can put anything into it not just searchResults as before.

debug panel on book details
Debug panel displayed on book details page

I can now go back to the search page and implement the directive in the same way.

<debug-display display="vm.searchResults"></debug-display>

And that will display my search results in prettified json which I quite like. It’s even better now and I am mentally slapping myself on the back. However I’m not finished. I don’t always want to see the debug panel. Sometimes I just want to see the page as it will be when it goes live with no debug information at all. I want to be able to toggle it on and off with ease.

Step 3: Using a global setting to toggle the debug panel

I have ambitions for my BookShelf demo site to be truly huge; a site which will make eBay look small. To that end I don’t want to have to turn my debug panel on and off manually everywhere it is used. I want one point of control.

I’m going to set up a DebugOn flag when the application initialises. For this I could use a global constant like so

app.constant('DebugOn', 1);

However (spoiler alert) I’m going to want to amend them later on so a global value is more the way to go. I’m setting this when the app initialises so it will be

(function () {
    'use strict';

    var app = angular.module('app', ['ngRoute', 'infinite-scroll']);

    // routing and other set up

    app.value("DebugOn", 1);
})();

I can use the built in dependency injection to access the global variable in any service, filter etc.. so I’m going to use that to grab it in the directive script …

angular
  .module('app')
  .directive('debugDisplay', ['DebugOn', function(DebugOn){
      return {
          scope:
          {
              display : "=display"
          },
          templateUrl: "/views/directives/debugDisplay.html",
          link: function(scope, elem, attrs) {
              if(DebugOn == 0){
                  for(var i = 0; i < elem.length; i++)
                    elem[i].innerText = '';
              }
          }
      };
  }]);

The directive has become a bit more complex but it’s not too terrifying. I’m taking the DebugOn value as a DI injected parameter – very standard Angular stuff. I want to hide the debug panel if it is set to 0. In essence I want to change the DOM if the DebugOn variable is 1 and the link property enables us to do that.

          link: function(scope, elem, attrs) {
              if(DebugOn == 0){
                  for(var i = 0; i < elem.length; i++)
                    elem[i].innerText = '';
              }
          }

The elem parameter is a collection of all the directive element outputs in the app at that time. For the debug panel it will be one but I will be good and iterate through it anyway – we just obliterate the innerText and thus hide them from the user.

Now we have done this turning the debugging panel off becomes a simple matter of amending the value of DebugOn variable in one place and restarting the application.

    app.value("DebugOn", 1);

Just what I wanted.

Step 4: Using the query string to toggle the debug panel

But it’s not enough. It never is. I’m not satisfied with amending the application – I want to just pop something on the query string, have my application pop into debug mode and have my debug panels spring into life like desert flowers in the rain. I want it and I can have it.

http://myapplication#angularstuff?DebugOn=1

Should turn on the debugger but as I’m navigating around my single page application my querystring is going to disappear. I could maintain it but I don’t want to – it seems like hard work. So I’m just going fall back to some good old fashioned JavaScript. The full url is available in

window.location.href;

So I’m going to use a couple of functions to grab the value and put it in the global variable

function getDebugParam(){
    var debugParam = getParameterByName("Debug");
    if(!debugParam) debugParam = 0;
    return debugParam;
}

function getParameterByName(name, url) {
    if (!url) {
      url = window.location.href;
    }

    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);

    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

And the setting of the debug variable becomes

app.value("DebugOn", getDebugParam());

And done. I done even need to change my app to get the debug panels on. A quick fiddle with my querystring and there they are. Lovely.

Further Development

As much as I like the query string idea I wouldn’t want to see it in production. As an immediate project I would want to disable this in prod environments. It’s not hard but needs to be done. I’ve got other ideas around multiple panels, debug levels and improved display but I’ll leave those for another day.

That’s it – end of post other than notes. Happy New Year everyone for 2017.

Full Script

There is a bunch of code here so to aid the discerning coder – this is the all code needed for the debug panels

directive.debugDisplay.js

(function () {
    'use strict';

    angular
      .module('app')
      .directive('debugDisplay', ['DebugOn', function(DebugOn){
          return {
              scope:
              {
                  display : "=display"
              },
              templateUrl: "/views/directives/debugDisplay.html",
              link: function(scope, elem, attrs) {
                  if(DebugOn == 0){
                      for(var i = 0; i < elem.length; i++)
                        elem[i].innerText = '';
                  }
              }
          };
      }]);
})();
debugDisplay.html
<div class="row" ng-show="display">
    <div class="col-md-8">
        <hr />
        <pre>{{display | json}}</pre>
    </div>
</div>
utils.js
function getDebugParam(){
    var debugParam = getParameterByName("Debug");
    if(!debugParam) debugParam = 0;
    return debugParam;
}


function getParameterByName(name, url) {
    if (!url) {
      url = window.location.href;
    }

    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);

    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
app.module.js
(function () {
    'use strict';

    var app = angular.module('app', ['ngRoute']);

    //.. other setup such as routing

    app.value("DebugOn", getDebugParam());
})();

Note about Immediately Invoked Function Expressions

I haven’t wrapped all my examples in an IIFE. This is just to save space and reduce nesting in the examples. Just mentally put them back in if they are absent i.e.

(function () {

      //.. my examples

})();

Useful Links

AngularJS directives
https://docs.angularjs.org/guide/directive

Scope isolation
https://thinkster.io/egghead/understanding-isolate-scope

AngularJS Constants and variables
http://ilikekillnerds.com/2014/11/constants-values-global-variables-in-angularjs-the-right-way/

Quick explanation about IIFE
http://stackoverflow.com/a/8228308/83178

The getParameterByName function is from the incredibly highly upvoted answer on Stack Overflow
http://stackoverflow.com/a/901144/83178

Google Books API as referenced throughout demo code
https://developers.google.com/books/