Quick and Easy Analysis of Website AJAX calls using Chrome Net Events

There are times when you need to find out what background "ajax/web endpoint calls" a webpage is making under the covers.

As it happens, the other day was one of those times! - I needed to find out which Web Endpoints an internal website was calling over an HTTPS connection.

Now, we all know we could use Fiddler or the fantastic Wireshark for analysing network traffic but I didn't have either of these installed on the box I was using.

I was just about to install Fiddler when I remembered chrome's internal net events page.

Simply open chrome.exe and navigate to: chrome://net-internals/#events. It's like having Fiddler built into the browser. Now, go pack to your web page and perform your action (in my case it was clicking a button).

The great thing about this is that it works over SSL/TLS connections which means you don't need to install a SSL certificate to decrypt your traffic.

Okay, it's not as powerful as Fiddler or Wireshark, but, if all you need, is to know the names of the endpoints, this will do.

There you have it. Quick, Fast & Easy: chrome://net-internals/#events

Read More

Modern JavaScript Development

Welcome to Client-Side tales from a Server-Side Developer.

If your background is server-side development like me, then visiting the land of JavaScript can be quite daunting. Don't get me wrong, I'm not talking about the JavaScript language itself. Whilst the language has recently been updated to ES6, I'm talking about everything else that comes along with it.

Honestly, as an outsider looking in it's like the Cambrian Explosion out there. A soup of different language extensions, frameworks, plug-ins, package managers, task runners, et cetera, et cetera.

Where do you start?

So Many Questions

As I dip my toe into today's JavaScript ecosystem, I want to make sure I'm as forward-leaning as possible. I don't want to be writing JavaScript from 1995! But after spending time reading the interwebs you come away with lots of questions. Questions such as:

• Do I really need to install Node.js, just to write JavaScript?
• What's the difference between the Node Package Manager (NPM) and Bower? Why are there two separate package managers?
• Browserify. Whatify?
• Do I choose Gulp or Grunt? - Do I even need either?
• What the hell is YeoMan?

Seriously, who's coming up with these names?

• Should I be using SASS or SCSS? What about LESS?
• Is Jquery still a thing? I've heard that people depend less and less on it?
• Do I choose Babel or Traceur?
• What about throwing TypeScript into the mix? And what about FlowType? Where does that fit in?
• I've heard that React likes FlowType.. But why didn't Facebook just use TypeScript instead of reinventing the wheel?

Then there is the code editors. If you are on Windows surely you'll be installing the free community edition of Visual Studio 2015. But what if you want to master a code-editor and be able to transfer those skills to Linux and the Mac?

Do you choose:

• Brackets
• Sublime Text
• VSCode
• Atom
• WebStorm

Then there's the frameworks and libraries...

• Ember
• Angular
• Backbone
• JQuery
• React
• Underscore
• Yadda, Yadda. Yadda...

The list truly goes on and on. Fortunately, at this stage I'm not as interested in JS Frameworks and so I haven't explored any of these at this point.

Phew... I'm exhausted!

But choice is Good, right?

I guess choice is good, but if your not in the ecosystem day-to-day then there's a lot to catch up on.

Oh, and by the way... Sorry to break this news to you but if you are reading this post 5 minutes after it was published, then I'm sorry but the above list is probably way out-of-date by now. In fact as you're reading these words 8 more frameworks have just popped into existence and already have a strong following. 😊

My Installation Setup

So, back to my setup. Currently, as it stands, this is the mis-informed JavaScript setup that I have started with:

• Git
• Node.js
• Bower
• VSCode
• Visual Studio 2015 Community Edition (Its free!)
• Babel

And these are the things I will probably be taking a look at later down the line:

• Browserify
• Gulp
• YeoMan
• TypeScript

Let's go over these installs..

Git for Windows

What is it? Git is the popular version control system to host code. A lot of open source JavaScript libraries are hosted on Git.

Why am I installing it? The command line git.exe is needed for you to pull down code and build packages from. Also the Node Package Manager (NPM) uses it.

Node.js and the Node Package Manager (NPM)

What is it? Node allows you to run JavaScript outside of the browser. Simple as that.

Why am I installing it? Node.js allows you to run JavaScript outside the browser which means task-runners like Gulp can run on your system but it also includes the Node Package Manager (NPM). This is the JavaScript equivalent of .NET’s Nuget. It’s easy to see why Package Managers are so popular. If your solution depends on X, Y or Z you can reference them via NPM or Nuget.

Bower

What is it? It's another package manager! Like NPM above

Why am I installing it? But hang on! I've just installed a package manager above (NPM). Why do I need another one? I've found that many JavaScript libraries out there support both NPM and Bower. As an example, take a look at the Moment.js JavaScript library. On its webpage it supports Bower, NPM and NuGet amongst others.

Why is there two? Whats the difference? Is one better than the other? The internet, as always as opinions

https://www.quora.com/Why-use-Bower-when-there-is-npm
http://stackoverflow.com/questions/18641899/what-is-the-difference-between-bower-and-npm

Babel

What is it? Compiles ES6 code down to ES5

Why am I installing it? It's great that ES6 has been released but if you look at this compatibility chart here you will see that a lot of mobile browsers still don't support a lot of ES6 features. That's where Babel comes in. It allows you to write ES6 code today and back-transpile it down to ES5 code so that it still runs on all browsers. It's awesome!

Gulp

What is it? A Task Runner. Something that automates our workflow.

Why am I installing it? Remember that writing the actual code is only half the story. If your using a CSS pre-processor or a language abstraction like CoffeeScript or TypeScript then you need a task runner to compile the SASS to standard CSS and the CoffeeScript to standard JavaScript.

In Visual Studio this is provided inside the box. You can setup pre-build and post-build steps, so that when you press F5 to compile your code it will perform these extra steps. (or use an MSBuild script on the command line)

The equivalent in the JavaScript world is Gulp and it allows you to automate your workflow. For example, as part of deploying your code you might want to:

1. Run Babel to Transpile from ES6 to ES5
2. Run HandleBars to bundle up all your HTML templates
3. Setup your distribution folder (Create folder structure, etc)
4. Convert your SASS or LESS files to actual CSS that the browser understands
5. Lint your code for errors
6. Merge all your JS/CSS into 1 file
7. Minify the code
8. Yadda, Yadda...

Gulp allows you to write JavaScript to chain all these events together. Remember Node.js allows you to write JavaScript code outside the browser, which makes this possible.

Okay, if all you are doing is writing simple JavaScript then perhaps you don't need Gulp at this time. As it happens, I haven't installed it as I am just using a simple Batch File for my build steps.

VSCode

What is it? Its a lightweight code editor

Why am I installing it? I spend the majority of my time in the full fat version of Visual Studio and for personal development I use the Community Edition of Visual Studio 2015 (Its free!). But VS Code is fast, supports a whole host of languages and is cross-platform. As of today, it's still in beta but I intend to use it for all my client-side JavaScript development and see how I get on.

Command-Line Install Script

Here is the command-line install script to install the above:

# Step 01: Install Chooloatey (a windows version of apt-get) https://chocolatey.org/ 

c:\> @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex (( new-object net.webclient).DownloadString( 'https://chocolatey.org/install.ps1' ))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

# Step 02: Install Git (https://chocolatey.org/packages/git.install)

c:\> choco install git.install

# Step 03: Next Install Node.js (https://chocolatey.org/packages/nodejs.install)

c:\> choco install nodejs.install

# you should now be able to run "git" and "node" from the command line (might need to re-open cmd prompt for them to be in the path)

# Step 04: Next Install Bower globally (http://bower.io/)

c:\> npm install -g bower

# Step 05: Next Install Babel globally (https://babeljs.io/)

npm install -g babel-cli

# Step 06: Other Installs

c:\> npm install -g typescript
c:\> npm install -g eslint
c:\> npm install -g yo
c:\> npm install -g qunitjs

That's about the long and short of it!

So, that's my setup and what i'm using for my personal projects. Now its time to write some code...

Read More

Coarse Grained CPU-Profiling for Applications using Process Explorer

Today I wanted to quickly graph an applications CPU performance and compare how different start-up flags affected the CPU performance of the application. I didn't want to open perfmon.exe and go through the rigmarole of selecting the correct perf counters yadda-yadda.. I just wanted something quick and dirty..

As we all know, Process Explorer is the swiss-army knife for all things process based. If you need to do any diagnostics on a process then chances are Process Explorer will be able to help in some way.

Enter Process Explorer with its "Performance Graph" tab and this quick little tip!

With Process Explorer running, go to the process in question and select the "Performance Graph" tab. You will see something like this:

This tab displays the "CPU usage" for the process, the "memory usage" and the "disk I/O". All useful information. As an aside, watching to see if the memory usage increases is a basic way to see if your app has a memory leak.

I was interested in the CPU usage for this process which is the top graph. With the mouse you can hover over the graph to get a time and a CPU usage number but the 3 guidelines show you the 25%, 50% and 75% marks for rough approximation.

As you can see in the image above, the application is behaving quite nicely. For the majority of time it is idling under the 25% mark. Now, let’s alter some of the start-up flags, restart the application and compare the results from the graph below with the graph above.

You can clearly see that these settings increase the CPU usage for this process as the CPU now consistently hovers around 25% mark for the duration of the run.

One thing to be weary of is that these graphs don’t update if Process Explorer is minimized to the tray..

But hey... Like I said, its quick and dirty but that’s good enough for me today!

Read More

To-do or Not-to-do?.. That is the question.

"Note to Self: Remember to write a to-do list"

As a full-stack, dev-ops software developer we have to juggle a lot of moving parts. We work on multiple projects with multiple time-frames in addition to looking after servers, performing system-administration and keeping up with the constant changes in the tech landscape.

In short, we can have a lot going on at any one time.

Who doesn’t love a good to-do list?

Over the years I have used everything from pen-and-paper to test driving the latest tools of the moment to try and keep up-to-date and on top of what I need to do. Everyone out there might have their own system, but if there is one thing we can all agree on, its the importance of keeping some kind of to-do list.

Choosing what to-do from your to-do list

But writing the to-do list is only half the battle.

We’ve all been there. You finish collating everything you need to do, and then, inevitably you sit back and think "Gee. Which one of these should I be doing first?"

Usually it’s the task you leave until last. The big one. The gnarly one. That’s usually the task you should be starting first.

It’s as simple as this. If you have a good to-do list and are able to prioritise your work then you will be more effective in your job as you will be working on the "right" things.

I can’t count the number of times I have been "busy" working on the wrong things. I’m sure we’ve all done it at some point. Spend ages on a small cosmetic bug while there is a humongous bug just sitting there waiting for us to start it.

Identifying Priority's: The Eisenhower Priority Matrix

The biggest problem I have is identifying "what I should do next". Out of everything I have to do, what is my next highest priority task? That’s where the Eisenhower Priority Matrix comes into play. It identifies tasks based on their importance and their urgency.

If you do a Google search for "Eisenhower principle" you will most probably stumble upon this famous quote of his:

"What is important is seldom urgent and what is urgent is seldom important"

His matrix is simple and it goes like this:

• If it’s important and urgent you need to do it now.
• If it’s important but not urgent you should plan in time to do it

As an example, if you have identified that your car tax is due (a very important task) but your house is on fire (a very urgent and important task to resolve), I don’t think many people would have trouble identifying what they need to do first. Quick!!!! Phone the fire brigade immediately and run back into the house to save the old Amiga 500, Nintendo and original Xbox! (Actually, the original Xbox could probably survive a nuclear blast but that’s another story)…

Unfortunately, when we scan through our day-to-day to-do list, our items usually don't jump off the page like a burning house.

I like the definition for the Eisenhower Priority Matrix and how to use it provided on the MindTools website. Go here and have a read [here]

Like I say, there are countless to-do apps out there but if you wanted to incorporate the Eisenhower principal in your own to-do list then below is a simple example.

public double CalculatePriortyValue()
{
    CalculatedPriority = 0;
    if ( this.IsComplete == 1)
        return CalculatedPriority;

    // Minus 1 day so that you finish this task a day before its due
    double daysDueIn = ((DueDate - DateTime.Now).TotalDays - 1);

    if (daysDueIn < 1)
    {
        // This date is in the past. flip the value to a positive.  
        // The further in the past it is the more urgent it is.
        daysDueIn = Math.Abs(daysDueIn);

        if ( Math.Abs(daysDueIn) < 0.1)
            daysDueIn = 1;

        // Multiply importance by Urgency then multiply it by the number of days in the past it is!
        // The further in the past it is the later the task is and bigger the priority.
        CalculatedPriority = (Importance * Urgency) * daysDueIn;
    }
    else
    {
        // Multiply the importance and urgency then 
        // divide it over the number of days
        // we have got to do it in.
        CalculatedPriority = (Importance * Urgency) / daysDueIn;
    }

    return CalculatedPriority;
}

Revising your to-do list

The hardest part of any to-do list is keeping it up-to-date. A to-do list is no good if it’s not updated. I know this from experience. I’ve gone through cycles of using them then forgetting about them. However, for your to-do list to be effective you need to live inside it. You need to update it constantly so you know "what’s next". If that’s ticking boxes on a piece of paper or using the latest fandangled mobile app, if you’re not updating it “you’re not doing it right”.

The "Not" to-do List

This brings me nicely onto the not-to-do list.

You see, the great thing about the software dev landscape is that there is always "something new to learn". However, the bad thing about the software dev landscape is that there is always "something new to learn"!

If you’re like me, you probably have lots of new software dev areas that you want to learn and explore. It’s quite common for me to constantly feel like I am playing “catch up” because the amount of “stuff” to learn out there has exploded.

Let’s face it. It’s simply impossible for you to learn everything. There aren't enough hours in the day!

So you end up carrying around a lot of mental "to-do" cards. Things in the back of your mind that you think you should be doing but in reality haven't got the time for. Truth is, you’re probably never going to get the time to do everything. Time is against all of us.

This is where the not-to-do list comes into play and in my mind is just as important as the to-do list.

Think of the not-to-do list as a way of clearing your mental cache.

Before, you would stick X, Y or Z on your to-do list and it would forever expand. You would feel as if you are drowning under the stuff you need to do. But the truth is your never going to get around to doing everything on that list. The tasks that are “ideas”, “stuff to learn”, “nice-to-have features” all should be added to the “not-to-do list”. If it doesn’t have a due date, stick it on the not-to-do list. It can’t be that important.

Before, you ended up carrying around a lot of mental cards in your head, but by adding these items to your not-to-do list your mental cache is cleared. The fog dissipates and you can focus on the important things. At the same time you haven’t forgotten about these tasks. Because the not-to-do list will keep a record of them for you.

Now.... Note to Self: Remember to write my to-do list"

Read More

C# Dynamic Types & Expando Object

Let me get this straight!! You want to declare an Object but you don't know what member variables you need ahead of time. Have you gone mad?

JavaScript Land

You've got to love the dynamic nature of JavaScript and how the language allows you to mutate objects at run-time. You don't need to define class definitions of an object upfront. That's so old-skool!

You can just create them... on the fly!

var movie      = new Object();
movie.name     = "Interstellar";
movie.genre    = "Sci-Fi";
movie.director = "Christopher Nolan";

Later, if you want to add a new member variable or a function at run-time.. Just add it!

movie.Rating = 8;

And of course you could do the same thing using the object literal notation:

var movie2 = {
  name: "Aliens",
  genre:"Action",
  director:"James Cameron"
};

and later:

movie2.Rating = 9;

C# Land

In C# land, things are a little different. A bit more traditional. Our objects need to be declared up front with a class definition. And the blueprint we provide for our classes are very hard to change. I guess they don't call them concrete classes for nothing!.

However, there are times when you would like to have the flexibility of JavaScript in C# and be able to "mutate objects on the fly".

With C# Version 4 that became possible with the dynamic keyword and the ExpandoObject.

Check out this C# code sample below. Its eerily similar to the JavaScript above. The only difference is on the 1st line with the dynamic keyword.

dynamic movie  = new ExpandoObject ();
movie.name     = "Interstellar";
movie.genre    = "Sci-Fi";
movie.director = "Christopher Nolan";

In essence, the dynamic ExpandoObject lets you add (expand) and remove (contract) member properties & functions of an object.

However, if you look at the above code, even though we haven't created a traditional "class definition" for the movie object, the fields are still setup at compile-time. The "name", "genre" and "director" fields are typed into the code at compile-time. Not run-time.

This brings us onto the second cool thing about the ExpandoObject.  It allows you to create an object like above using a dictionary. This means we can dynamically modify an object at run-time, adding or removing properties as required.

For example:

dynamic movie  = new ExpandoObject ();
movie.name     = "Interstellar";
movie.genre    = "Sci-Fi";
movie.director = "Christopher Nolan";

// Later on, lets add some more property via a dictionary
var dictionary = movie as IDictionary ;
dictionary.Add("Rating", "PG-13");
dictionary.Add("ReleaseDate", "2014-11-07");
dictionary.Add("BlahBlah", "SomeValue");

// Opps! Lets remove the field BlahBlah.. 
((IDictionary)movie).Remove("BlahBlah");

Example Usage

So armed with this knowledge, how can we make use of this? Well, a perfect use-case for this is when sending JSON data from a sever to the client. Using this dynamic object the server could tailor the data returned to the client, based on its requirements.

For example, this helper function "ConvertToDynObj" will convert any object to a dynamic ExpandoObject

public static dynamic ConvertToDynObj(object data, List fieldsToCopy = null )
{
    var dynObj = new ExpandoObject() as IDictionary;

    foreach (PropertyDescriptor property in TypeDescriptor.GetProperties(data.GetType()))
    {
        if (fieldsToCopy == null )
        {
            dynObj.Add(property.Name, property.GetValue(data));
        }
        else if (fieldsToCopy.Contains(property.Name) == true)
        {
            // we only want to include this field in the new dynamic type
            dynObj.Add(property.Name, property.GetValue(data));
        }
    }

    return dynObj;
}

With the helper function defined above, we can mutate existing objects in our class library. Lets say we have a business object defined in our system that looks like this:

class BusinessDuberie
{
    public int fieldOne { get; set; }
    public string fieldTwo { get; set; }
    public double fieldThree { get; set; }

    public BusinessDuberie()
    {
        fieldOne = 1; fieldTwo = "2"; fieldThree = 3.3; 
    }
}

We can now convert the object to a dynamic object wholesale like this:

BusinessDuberie obj = new BusinessDuberie();

var dynObj = ConvertToDynObj(obj);

// Now we can add properties on the fly

(dynObj as IDictionary).Add("Qwerty", "Berty");

We could also trim the object and only copy the properties we are interested in.

List fieldsToCopy
fieldsToCopy.add("fieldOne");
fieldsToCopy.add("fieldThree");

var dynObj = ConvertToDynObj( obj, fieldsToCopy );

Now that's what I call sweet.

Read More

Ho-Ho-Ho.... Now I have a Blog!

Come out to the internet... We'll get together, have a few laughs...

Is it me or does anyone else suddenly feel claustrophobic?

Hello World! - I am a software developer with over 15 years of experience, but as we all know, in this industry there is always something new to learn. As software developers, we are constantly learning new skills as the goal posts are forever moving.

Which brings me to this blog!

Its main purpose is to act as an aide-memoire for myself. I hope to chart any personal learning experiences here as well as mention stuff I think is cool.

Later down the line, I will be able to look back and think to myself "huh! Remember when I thought 'doing it that way' was cool!" - Oh, how I will laugh.

It only seems right to christen this blog post with an obligatory piece of code:

namespace OceanAirdrop
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("Hello World!");
        }
    }
}

Read More