Introducing Visual Studio Code

Given the buzz in the air around this year’s Build conference, you may have missed their announcement on releasing a brand new code editor called Visual Studio Code or VS Code for short.

Why should you care? Simply put, this is an editor designed and optimized specifically for working with code.

I am a bit of an editor junkie and have used many (an actual screenshot of my task bar below): my-editors

From left to right, that’s Brackets (from Adobe), Visual Studio, VS Code, Atom (from GitHub), Sublime Text and Notepad2.

I tend to switch between them choosing the right tool for the job. Lately, that has been VS Code. I really like what Microsoft has delivered. Not only is it cross platform (Winnows, Mac and Linux), but it’s finely tuned specifically for working with code.

This is only a beta release, but I would not let that stop you from installing it and taking a look at it. In the last 3 weeks, they’ve delivered two major updates as the team works towards their 1.0 release.

To find out more or download a copy (it’s completely free and open source), visit https://code.visualstudio.com/.

A Few Thoughts on Social Responsibility: Beware When You Share

My cousin Kim asked a great question yesterday regarding a post she shared on Facebook. She asked why people would make things up share them when they could be eventually caught. This is something I have thought about in a larger context. So, Kim, here are some of my thoughts.
Why would someone share something that they’ve made up and can be pretty easily found caught for being a fraud?

This has been a big issue of mine for quite some time and I wanted to delve a little deeper into this.

First, let’s look at why. Everything we do in life has a reason behind it. I go to work to make money to support my family. My kids go to school in hopes they’ll have more career options. My grandson watches Thomas the Tank Engine because he likes trains. People watch infomercials because they can’t believe how some products can really be.

So, for someone that makes stuff up online like this, they must have a reason. I suspect it’s to see how many likes or shares they can get, but I am sure there can be other incentives as well beyond that.

Now, let’s look at HOW they do it.

They typically post something that’s false but tugs at the heart strings. This could be about outrageous animal cruelty, a sick or dying child, an abused or abducted child or a missing person perhaps.

We see our friends sharing this and a lot of people click the Share button without really considering it. Why do we share it? Again, there must be a reason we do. I think it boils down to two things:

  1. we feel like we are helping; and
  2. we feel what harm can it do?

The problem is, if we share something that is false, both of these incentives are wrong. We are not helping anyone and we may actually be causing harm.

For example, of the hundreds of viral hoaxes that make their way around Facebook you have probably seen the Amber Alert issued on a grey truck with a certain Quebec license plate. Sometimes the color changes, but the license plate from Quebec is usually the same. Though this seems legit, it’s completely false. Every-so-often it starts making the rounds on Facebook and every time it does I feel sorry for anyone in Quebec that happens to be driving a vehicle like that… I imagine the calls the police get of reports of a vehicle matching the description tying up their time.

Another example are the photos of the parents with sick or dying children. Usually it will go something like, “poor child is dying, for every like, share or comment, Google/Microsoft/Apple/Facebook will donate $1 to the family”. First, no company would EVER tie help for a sick or dying child to a marketing campaign. It would be corporate suicide. Could you imagine the headlines? “Microsoft let little girl die because they didn’t get enough LIKES on Facebook”… any story that ties likes, comments or shares to donations is almost positively 100% false. So, if these are false, what’s the harm? Well, suppose that child in fact does die. The parents will see their child’s image circulating on Facebook for years, think about the mental anguish they will face. That’s just sad.

Lastly, what about posts about a missing person? Two weeks ago, I saw a share from a friend about a young man that went missing. It took 2 minutes to Google his name to find out that he was indeed missing, 2 years ago and was found the next day. That means this poor kid’s face has been going around Facebook for the last two years. Even though he was safe and is living a normal life, he has to deal with this shadow hanging over him of the strangers that know his face and think that he’s missing.

How do you know if something is real or not?

First, look for tells… those little signs that should trigger an alarm in your head. These include:

  1. A post that uses guilt to get you to share something. Example: “Most
    of your won’t care enough to share this but…”
  2. A post that claims volume of shares, likes or comments will help a
    situation beyond social awareness. Example: “Help this dying child
    by sharing this…”
  3. A post about a missing person, especially if they are from far away.

If you get past these 3 and you’re not sure, just Google it. Use details that could be unique about a situation such as a child’s name for an Amber Alert, a driver’s license number, the name of a family or child. There are a few really good web sites out there that debunk a lot of these hoaxes and frauds and give you the actual story.

We are in a precarious time in our history. The internet has connected us all, for good and for bad. We need to be especially careful of what we share of our own lives (personal information for example), but what we also share from our friends.

One aspect of this is the idea of social justice. We have come to the point that if we see something on line we tend to believe it. Imagine if Anonymous, the internet group of hackers that promote social justice, had released the names of the four boys related to the Rehtaeh Parson’s case. They may or may not be guilty of the crimes that some have accused them of, I am not a judge or jury. But if Anonymous had released their names, they would be considered guilty by the social masses without even having had a trial. This is super dangerous. If it’s in a newspaper, a community gets angry, if it’s online, the reach is much further. I would be concerned for the safety of these boys. We are supposed to be found guilty by a judge or jury, not by the court of public opinion.

Sharing on the internet can have some pretty serious consequences. I think we have a social responsibility online, especially on Facebook, to be careful of what we share. Before I share anything on Facebook, I ask myself, is this legit and is it fair?

Testing CoffeeScript with Jasmine

We all know how important it is to test our code, but how should we approach that when we’re writing our code in CoffeeScript?

Well I’ve been using the Jasmine JavaScript testing library from Pivotal Labs to handle this. Here’s how.

Scenario

For this scenario, we’ll be writing tests for a simple Calculator object. The Calculator should be able to add, subtract, multiply, and divide two numbers.

Setup

To begin, let’s make sure our environment is set up.

I’ve set up my sample project as follows:

Our sample project structure.

In our initial project we have:

SpecRunner.html
Our HTML file that will execute our tests.
js
Folder containing our compiled JavaScript code.
js/src
Folder containing our CoffeeScript source.
spec
Folder containing our compiled JavaScript specifications.
spec/jasmine
Folder containing the Jasmine library files.
spec/src
Folder container the CoffeeScript specifications.

You can grab the initial project files from my GitHub repo.

The SpecRunner.html will be pretty similar from project to project. Looking at the HTML (gist), you can see lines 10 – 14.

<code>&lt;!-- include source files here... --&gt;
&lt;script src="js/calculator.js"&gt;&lt;/script&gt;

&lt;!-- include spec files here... --&gt;
&lt;script src="spec/calculatorSpec.js"&gt;&lt;/script&gt;
</code>

At the start of this block we load the source files. In our scenario, this will be our compiled calculator JavaScript file.

The second block is where we load our compiled specification files.

Once the Spec Runner has been updated, simply load it in your browser. Without defining any specifications or our calculator files, it’s good to see the tests pass.

Our first test passes

First Specification

Now that we have Jasmine wired up, let’s start writing our specification.

Let’s make sure our simple calculator can add:

<code># calculatorSpec.coffee

describe 'Calculator', -&gt;

    it 'can add two positive numbers', -&gt;
        calculator = new Calculator()
        result = calculator.add 2, 3
        expect(result).toBe 5
</code>

I love that CoffeeScript reads like English. Even if you have never seen CoffeeScript before, you can see that this specification describes a calculator and that it should be able to add two positive numbers.

The test itself creates a new calculator instance, gets the result of adding 2 and 3 then asserts an expectation that 2 + 3 should be 5.

Let’s get CoffeeScript watching our spec/src folder to get it to compile the CoffeeScript specifications.

  > coffee -c -w -o spec spec/src & coffee -c -w -o js js/src 

Once our spec is built, refresh the browser. BOOM! It blows up.

Our test fails.

Hmm, the error says something about not being able to find a variable called Calculator. Well of course it can’t find it, we haven’t created it yet!

Let’s do that now.

<code># calculator.coffee

class @Calculator
</code>

We refresh our browser and it still fails.

Our test fails again.

This failure is complaining about an undefined function, add. Let’s write that now.

<code># calculator.coffee

class @Calculator
    add: (x, y) -&gt;
        x + y
</code>

Save it, refresh the browser and voila! It passes.

Lovely green tests.

Finish This Up

Ok, we’ve been through an entire red-green cycle. I don’t see anything to be refactored at this time. Let’s flesh out the rest of our spec file.

calculatorSpec.coffee

<code>describe 'Calculator', -&gt;

    it 'can add two numbers', -&gt;
        calculator = new Calculator()
        result = calculator.add 2, 3
        expect(result).toBe 5

    it 'can subtract two numbers', -&gt;
        calculator = new Calculator()
        result = calculator.subtract 5, 3
        expect(result).toBe 2

    it 'can multiply two numbers', -&gt;
        calculator = new Calculator()
        result = calculator.multiply 3, 4
        expect(result).toBe 12

    it 'can divide two numbrs', -&gt;
        calculator = new Calculator()
        result = calculator.divide 12, 4
        expect(result).toBe 3
</code>

Save it and refresh the browser. We see that we have failures for our subtract, multiply and divide just as we should have expected.

Our test fails again.

Let’s get it to pass by updating our Calculator class.

<code># calculator.coffee

class @Calculator
    add: (x, y) -&gt;
        x + y

    subtract: (x, y) -&gt;
        x - y

    multiply: (x, y) -&gt;
        x * y

    divide: (x, y) -&gt;
        x / y
</code>

Save it and refresh once more. Ah, there they are, passing tests.

Passing tests again.

Refactoring?

So, looking at our specification we can see some duplication. Each test is creating a new instance of our calculator. Let’s refactor that out into a beforeEach block. This will ensure that our calculator object is instantiated anew before each test runs.

<code># calculatorSpec.coffee

describe 'Calculator', -&gt;
    calculator = null

    beforeEach -&gt;
        calculator = new Calculator()

    it 'can add two numbers', -&gt;
        result = calculator.add 2, 3
        expect(result).toBe 5

    it 'can subtract two numbers', -&gt;
        result = calculator.subtract 5, 3
        expect(result).toBe 2

    it 'can multiply two numbers', -&gt;
        result = calculator.multiply 3, 4
        expect(result).toBe 12

    it 'can divide two numbrs', -&gt;
        result = calculator.divide 12, 4
        expect(result).toBe 3
</code>

Let’s save and refresh to make sure our refactoring did not cause problems.

Still green.

You can view the completed sample on GitHub in my repo.

Windows 8 – First Impressions of a Non-Techie

So, Windows 8 was released to manufacturing at the start of August 2012 and made available for download to MSDN and TechNet subscribers a couple of weeks later.

That weekend, I upgraded my wife’s little Dell Duo from Windows 7 to Windows 8 and thought I would share her first impressions and how they’ve changed after using Windows 8 for two weeks.

My wife is someone I’d consider to be a casual user. She uses her computer to check her mail, Facebook, and look things up on the Internet. Of course she does other things as well, but it’s about mostly reading content to a large extent.

Installation

The install went super smoothly. I downloaded the Windows 8 ISO and used the free Windows 7 USB/DVD download tool. I then used the tool to create a bootable Windows 8 installation image on a USB stick I had laying around. I used a 16GB, but an 8GB would have sufficed.

Once the image was on the USB stick, I inserted into my Dell Duo and the auto-run menu appeared. Running the install was as easy as clicking the run option.

Note: I decided to run the install from Windows 7 so I could copy and paste the product license key. I always make a mistake entering those.

The installation itself was essentially a Next → Next → Next type of installation, super easy and quick. I had the option to install Windows 8 keeping all user files, but I chose to do a clean install as I already had a backup of all my wife’s important files.

First Boot

Once the installation was finished we were prompted for a Windows Live account. I like that Microsoft is tying the personalization to your account. Microsoft uses your account to preconfigure your services making so much available to you right out of the box.

You can also use a local account, but then you’re on the hook for adding your accounts.

Once logged in, voila! The start screen comes alive. Your people hub begins to display contact photos making it obvious that this is were you go when you want to deal with people. Current weather displays, email inboxes are checked, in short, your system is usable right out of the gate using pretty sensible defaults.

First Impressions

I gave the Dell Duo back to my wife, telling her the upgrade was complete. To be honest, I was a little apprehensive. It’s new, and quite different. I did not know how my wife would react, and I figured that I would be putting Windows 7 back on the device before too long.

To my great delight, she found the new design to be quite refreshing, snappy and , most importantly, easy to use.

She spent a few hours exploring the system that evening and the following day as I was at work. When I came home I asked her what she thought about it. She only had positive things to say, such as “I like that it seems faster, things are right in front of you.” and “It can be used with or without the touch screen just as easily.”

After Two Weeks

In the last two weeks, she’s discovered through using the system, how to snap applications to their 1/3 and 2/3 screen sizes, how to pin websites and other things of interest to her start screen and how to navigate with the new IE 10 for WinRT.

I was curious to see how she’d find the system after using it for a few weeks. She is just as positive today as she was when she first started using it. The only glitch we’ve run into is that the mail application seems to get broken with our ISP’s POP3/SMTP account. I’ve had to remove and re-add it once to get it to synchronize and it looks like it’s acting up again. I think an Outlook install might be in our near future. Besides that, she’s very happy about it.

The Verdict

Overall, I’d say this has been a pleasant experience, even more than I had anticipated.

I asked my wife today if she’d prefer to be using Windows 7. Her response?

“I like Windows 8 much more.”

I see more Windows 8 installs in my future.

Top 5 Killer Features of WireframeSketcher

I’ve been using WireframeSketcher for the last two weeks in mocking up a large web-application. WireframeSketcher certainly has a number of features to help improve your UI-mocking experience but a few of these are what I would consider to be killer features.

Here are my top 5.

1. IDE

WireframeSketcher is based on the Eclipse IDE. Does a sketching tool need such a heavy IDE? In a word, absolutely.

For large projects, you can easily keep related screens grouped together using a series of folders. For example, when mocking out a large web application you could have a folder for each module. Naturally folders can be nested allowing you to group them as high or low level as you like. This is so important to keep screens organized.

2. Reusable Components

This is the feature that completely won me over. So much so that we purchased licenses for our entire team.

WireframeSketcher allows you to create screens and REUSE them as components on other screens. Wow, such a great feature.

For example, we have a project that displays the “Last updated by” and “Last updated on” information when item detail screens. Instead of duplicating these 4 labels on each screen we need it, we created a simple component for it.

Last Updated Component

Now, we can simply drag our Last Updates component onto any screen that needs one.

Any changes you make to the base component are automatically reflected on each of the screens that reference it unless it has been customized for a specific screen. That means that if you decide a component should be formatted a little differently, it’s super simple to update it across the entire system.

3. Interactivity

WireframeSkethcher allows you to develop interactive mockups my linking components to screens.

For example, you could have a button bar and each button can be linked to a different screen. In the example below you can see the little link icon on the Add and Edit buttons. On the left, in the properties area, you can see the screens they link to.

Button Bar with Links

This ability to link components to screens helps to simulate navigation and use-case scenarios making it an excellent tool to demonstrating the mockups to your client.

4. Storyboards

WireframeSkethcher’s storyboard feature allows you to assemble many screens into a collection of related functionality. This is a great to demonstrate a use-case to a client allowing them to see how the UI changes in time.

In our example below we have a simple calculator that demonstrates the “Divide” use-case.

I’ve created 6 screens that demonstrate the UI every step of the way of calculating 52 divided by 2.

I’ve assembled them into a single storyboard in screenflow view (seen below).

Example Storyboard

Once the screens are assembled in a storyboard, you can present the use-case to your client as a screen-linked image (as above) or as an interactive presentation.

5. Sharing

WireframeSketcher allows you to export your screens and storyboards to HTML and PDF. The exported mockups maintain any component-screen links you’ve set up.

Exporting to PDF is a very portable way to share your mockups with your team or client. I’d recommend viewing the PDF in a whole page view as this keeps the navigation smooth.

Perhaps better than exporting to PDF is exporting to HTML. This generates a number of image files, scripts and an HTML page to drive the experience. Simply throw them up on your websever and you’re good to go.

I’d recommend WireframeSketcher to anyone needing to mockup any system with even a moderate complexity. You’ll be glad you gave it a try. I know I was.

Downloads

Sample Storyboard Exported to PDF

Introduction

Mike Hatfield I wanted to take this opportunity to introduce myself.

My name is Mike Hatfield and I am a pretty average person. I’ve been developing software for 26 years since the tender age of 14. Remember the days when 128K was a lot?!? Oh, those were the days. I’d power on my CoCo II computer and the cursor would flash on the television screen as if to mock me.

Developing software has been my main passion in life, outside of my wife and our children of course.

Software development has come a long way from the early days of BASIC, FORTRAN 77, and Pascal. Now, my main area of interest is in the web development space. JavaScript, Single Page Applications (SPA’s), Node.JS, and other exciting technologies are flooding the world of web development and I am enjoying the ride.

Professionally, I am the chief technology officer for Nicom, a large independent IT consulting firm in Halifax, Nova Scotia Canada. I’ve worked my way up the corporate ladder, having begun as a junior developer/analyst back in early 1997.

I expect this blog to be mostly a technology blog more often than not around web development.

I hope you find something interesting. If you do, let me know.