Feeling overwhelmed and like a phony? Chill out!

Do you ever feel overwhelmed by the amount of new technology which is coming out all the time? The new framework to do this, and the new improved way of doing that. The new blog posts about this and that, the never ending Pluralsight courses by John Sonmez? It can be too much!

Recently I’ve been feeling this way as well as losing the motivation I use to have to code. I’ve not lost the joy of coding or problem solving but the combination of being overwhelmed by all the bleeding edge technology and information coming out of the developer community and in contrast the recurring day to day coding on brownfield code bases running VS2010 (and every so often VS2005) can get you down.

Recently I’ve got to a point in my life/career where I feel like a bit of a phoney. I’ve worked very hard to get where I am today and at only 30 years old I potentially still get seen by some as the opinionated upstart when I’m not. I know I have a lot more to learn but I think everyone does whether that’s new processes in your day to day life, understanding ways of doing tasks in new positions etc. You should always be learning and adapting.

The realisation of trying to learn everything is just not practical. Reading code is a great way to learn new techniques which you can apply to your day to day developer life but learning the ins and outs of every framework is just not possible. The other aspect of learning is you can run through a Pluralsight course on this or that but if you’re not using it every day all day at work or at least a couple of hours in the evenings each week on a personal project you’ll very quickly forget it. This, I think, is my main frustration.

So as I see it there are a couple of ways to solve this issue which range from minor to life changing. You can ignore all new technology, carry on with your day to day life, not do anything outside of work; essentially put your head in the sand. This will however leave your skills becoming slowly stagnant and make future career progression hard. On the complete other end of the scale you can move jobs, go and work for a company where they are using the latest and greatest, always starting new greenfield projects, this will help improve your skill set and keep it up to date but that will impact your life completely which isn’t always the answer either. Changing jobs, whether forced through redundancy or by choice, is a big change!

So what can you do? Learn every 3rd new technology which appears on the Pluralsight new course listing? This isn’t practical. Maybe try and influence technology at work? Spend time during the day (lunch time, 30mins before heading home) reviewing new technology? Both of these are possible but will depend on personal situation.

I’ve been thinking over this conundrum recently, and the near future birth of my first child has helped my thinking on this subject, the biggest issue is I’ve been putting too much pressure on myself. Too much pressure to learn new technologies, too much pressure to read every blog post about every technology. Also when I do look at a technology and write pet/personal projects such thoughts as “it needs to be production ready code straight away”, “you need to get it done now”, “it needs to be perfect first time” aren’t the thoughts which will aid motivation but in fact demotivate.

So if you find yourself in a similar situation as I have recently and don’t know what the answer is then use the realisation that has only hit home to me recently; chill out! Don’t put yourself under unrequired pressure. Yes, continue to read blog posts. Yes, continue to play with new technologies as/when you can … just don’t pressure yourself into having to do it all the time as it can be harmful as well as beneficial.

Hello World with KnockoutJs–Code Restructure

Recently I have been reading a number of articles and watching training videos from Pluralsight about Javascript and KnockoutJs. After reading the “Hello world, with Knockout JS and ASP.NET MVC 4!” by Amar Nityananda I wanted to see if I could apply the techniques of what I’d learnt to a relatively simple example. After reading the original article I couldn’t help but think “this Js could be better structured, I think I could do this” … so this is what I came up with.

To get an understanding of the problem please read the original article first.

I’ve only concentrated on the client side JavaScript as this was the challenge …

// setup the namespace
var my = my || {};

$(function () {

    my.Customer = function () {
        var self = this;
        self.id = ko.observable();
        self.displayName = ko.observable();
        self.age = ko.observable();
        self.comments = ko.observable();
    };

    my.vm = function () {
        var 
            // the storing array
            customers = ko.observableArray([]),
            // the current editing customer
            customer = ko.observable(new my.Customer()),
            // visible flag
            hasCustomers = ko.observable(false),
           
            // get the customers from the server
            getCustomers = function() {
                // clear out the client side and reset the visibility
                this.customers([]);
                hasCustomers(false);
               
                // get the customers from the server
                $.getJSON("/api/customer/", function(data) {
                    $.each(data, function(key, val) {
                        var item = new my.Customer()
                            .id(val.id)
                            .displayName(val.displayName)
                            .age(val.age)
                            .comments(val.comments);
                        customers.push(item);
                    });
                    hasCustomers(customers().length > 0);
                });
            },
            // add the customer from the entry boxes
            addCustomer = function() {
                $.ajax({
                    url: "/api/customer/",
                    type: 'post',
                    data: ko.toJSON(customer()),
                    contentType: 'application/json',
                    success: function (result) {
     // add it to the client side listing, this will add the id to the record;
     // not great for multi user systems as one client may miss an updated record
     // from another user
                        customers.push(result);
                        customer(new my.Customer());
                    }
                });
            };

        return {
            customers: customers,
            customer: customer,
            getCustomers: getCustomers,
            addCustomer: addCustomer,
            hasCustomers: hasCustomers
        };
    } ();

    ko.applyBindings(my.vm);
});

The main points I was trying to cover are:

• Code organisation through namespaces – I don’t want any potential naming conflicts. This isn’t a big issue in a small application but once they start growing it’s good to try and avoid putting definitions into the global namespace.
• Expose the details of the view model through the Revealing Module pattern – this keeps details clean as well as improved data binding clarity.

I haven’t gone into too much detail as the rest of the project infrastructure is very similar to the original article and can be found there. I wanted to post this as an example of how to make the Js structured.

Happy to discuss further; contactable in the comments or via twitter.

Updated Edit

After a comment from ranga I have read the link posted and update the code (see below). I have moved the view model and the Customer declaration outside of the on document ready event. I have also change hasCustomers to be a computed value. The interesting read about the performance hit about the events firing on array manipulation was really interesting – worth a read.

// setup the namespace
var my = my || {};

my.Customer = function () {
    var self = this;
    self.id = ko.observable();
    self.displayName = ko.observable();
    self.age = ko.observable();
    self.comments = ko.observable();
};

my.vm = function () {
    var
    // the storing array
    customers = ko.observableArray([]),
    // the current editing customer
    customer = ko.observable(new my.Customer()),
    // visible flag
    hasCustomers = ko.computed(function () {
        return customers().length > 0;
    }),

    // get the customers from the server
    getCustomers = function () {
        // clear out the client side
        this.customers([]);

        // get the customers from the server
        $.getJSON("/api/customer/", function (data) {
            var items = new Array();
            $.each(data, function (key, val) {
                var item = new my.Customer()
                    .id(val.id)
                    .displayName(val.displayName)
                    .age(val.age)
                    .comments(val.comments);
                items.push(item);
            });
            customers(items);
        });
    },

    // add the customer from the entry boxes
    addCustomer = function () {
        $.ajax({
            url: "/api/customer/",
            type: 'post',
            data: ko.toJSON(customer()),
            contentType: 'application/json',
            success: function (result) {
                // add it to the client side listing, this will add the id to the record;
                // not great for multi user systems as one client may miss an updated record
                // from another user
                customers.push(result);
                customer(new my.Customer());
            }
        });
    };

    return {
        customers: customers,
        customer: customer,
        getCustomers: getCustomers,
        addCustomer: addCustomer,
        hasCustomers: hasCustomers
    };
} ();

$(function () {
    ko.applyBindings(my.vm);
});

Keep the feedback coming, I’m always up for learning and improving.

Opening Pluralsight Single Page Application course code in VS2010

John Papa published a very good course on Pluralsight the other day about how to create a Single Page Application (SPA) and due to the popularity of the course Pluralsight opened it up for a short time only for free (thanks!). This allowed me to see exactly the type of quality I would receive when my training budget at work comes through soon (fingers crossed for October).

After watching some of the videos it was really interesting but I wasn’t quite getting how it all fitted together in the solution so was very pleased to find that the free sign up included being able to download the course material including the final solution. After downloading the zip file, expanding the contents and locating the .sln file I double clicked it and waited for Visual Studio 2010 to fire it up.

On Visual Studio 2010 opening the solution I was presented with a very sad looking solution explorer.

This is due to the fact that the course was written in Visual Studio 2012 and hence .net 4.5 was used for the projects. This got me thinking that it shouldn’t cause a problem as all the technologies which were being used are also available for .net 4 so I got about trying to get it to work.

Step 1; getting the projects to load

This in itself wasn’t that tricky. Firing up the .csproj files in notepad and locating the TargetFrameworkVersion I changed it to “v4.0”, saved and repeated it for all of the projects in the solution.

<TargetFrameworkVersion>v4.5</TargetFrameworkVersion>

To

<TargetFrameworkVersion>v4.0</TargetFrameworkVersion>

Once all the projects had been updated I reopened the solution in Visual Studio 2010 and got a prompt about configuring IISExpress. CodeCamper is configured to use IISExpress however if you don’t have it installed you will need to install it or configure the solution to work on a local IIS instance.

On clicking “Yes” Visual Studio attempted to load up the projects and Resharper did it’s usual solution scan and I was presented with a much happier looking solution explorer.

Step2; Lets try and build

On building the solution I got the following warnings however it did build.

warning CS1684: Reference to type 'System.Data.Spatial.DbGeometry' claims it is defined in 'c:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.0\System.Data.Entity.dll', but it could not be found
warning CS1684: Reference to type 'System.Data.Spatial.DbGeography' claims it is defined in 'c:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework\v4.0\System.Data.Entity.dll', but it could not be found

After a “successful” build I fired up the IISExpress site and went to start browsing the site to start seeing how it fitted together. However this was not the case and I got the following error.

Step3; changing 4.5 to 4

The changing of required framework version had not finished at the csproj level so I went through the web.config of the asp.net mvc project and changed the targetFramework attribute to “4.0”.

I also removed targetframework=4.5 from the httpruntime element below. Removed the machine key below that and hit refresh.

By now I was pretty sure that dependencies and reference errors are likely to be due to the framework version. With this I did a little Google and found that the version number had been bumped up to 4 for System.Net.Http in .net 4.5 however for .net 4.0 this needs to continue to reference version 2. With this in mine I updated the web.config from:

<dependentAssembly>
  <assemblyIdentity name="System.Net.Http" publicKeyToken="b03f5f7f11d50a3a" culture="neutral" />
  <bindingRedirect oldVersion="0.0.0.0-4.0.0.0" newVersion="4.0.0.0" />
</dependentAssembly>

to

<dependentAssembly>
  <assemblyIdentity name="System.Net.Http" publicKeyToken="b03f5f7f11d50a3a" culture="neutral" />
  <bindingRedirect oldVersion="0.0.0.0-4.0.0.0" newVersion="2.0.0.0" />
</dependentAssembly>

and hit refresh.

At this point I decided I would ignore the AntiXss encoder reference for now and come back to it later. I’m not going to publish the site anywhere so not worried about cross site scripting. However if you are going to put a site up into the wild then you will need to stop this kind of attack. Discussion for this is out of scope for this post.

I hit refresh and was presented with the Code Camper blue screen as below.

However no data.

step 4; getting data

At this point I thought I’m pretty close and pretty sure this will have something to do with the connection string. So after checking the connection strings configured in the web.config and noticing which one was currently active I checked to make sure the CodeCamper.sdf was present and ran.

Nothing; so changed the CodeCamperDatabaseInitializer below to always drop and recreate the DB to make sure the DB was fresh with the seeded data (remember to remove this and put it back to one of the other options otherwise it will delete everything all the time).

public class CodeCamperDatabaseInitializer :
    //CreateDatabaseIfNotExists<CodeCamperDbContext> // when model is stable
    //DropCreateDatabaseIfModelChanges<CodeCamperDbContext> // when iterating
    DropCreateDatabaseAlways<CodeCamperDbContext>

Nothing. At this point I decided to remove the sdf file and update the connection string to use to be the SQLExpress one. I knew I had that installed and running so would be perfectly fine for study purposes.

Time to try running it again to see which error would occur next. The next error was inside the NInject Dependency Scope implementation, in the NinjectDependencyScope.GetService(Type serviceType) method …

… with the wonderfully descriptive error message of

“Method not found: ‘System.Delegate System.Reflection.MethodInfo.CreateDelegate(System.Type)”.

This was due to a version miss match of Ninject; uninstalling the Ninject nuget package and reinstalling it to get the correct version down seemed to resolve this.

Another rebuild and run. This time the EntityFramework was not happy with the current build. After the last issue with Ninject I thought I’d try the same routine so I uninstalled the EntityFramework nuget package and reinstalled it. It seemed to be originally wanting .net 4.5 but it’s happy with 4. This needed to be done in both the CodeCamper.Data and CodeCamper.Web projects.

At this point I hit f5 and crossed my fingers. I was greeted with a screen full of green friendly messages about getting data from the asp.net web api and a smiling photo of the mighty ScottGu; finally I’d got it working!

Conclusion

There is one out standing issue which was not resolved and that is around the AntiXss functionality but the rest seems to work as expected.

Thanks again to John Papa and Pluralsight for creating and publishing this course and I can’t wait to get my full subscription to start enjoying the other courses.