# Sunday, 03 April 2016

4/3
Today I am grateful that I now have cable TV in my apartment for the first time since moving to Chicago.

4/2
Today I am grateful for breakfast with Tim yesterday.

4/1
Today I am grateful to co-present with my son Tim at Indiana University last night.

3/31
Today I am grateful to attend The McDonald's High School All-American basketball games for the first time.

3/30
Today I am grateful for my first visit to the historic Harold Washington Library.

3/29
Today I am grateful that my son was offered a summer internship yesterday.

3/28
Today I am grateful for Easter dinner with family.

3/27
Today I am grateful for:
-An evening seeing Trevor Noah at the Chicago Theatre
-New clothes and Christina for helping me choose them.

3/26
Today I am grateful for: -Dinner with Dave and Bobbi. -Drinks with Gary and Patty

3/25
Today I am grateful for my new (to me) espresso machine and for the 2 cappuccinos I've had so far this morning.

3/24
Today I am grateful that my TSA Pre-Check status was approved.

3/23
Today I am grateful I was finally able to restore my personal email account yesterday.

3/20
Today I am grateful to see "Love and Information" at the Patinkin Theatre yesterday - my first time seeing live theater in years.

3/19
Today I am grateful for a day in St. Louis, with Nick, Darlene, Kevin, and Henry.

3/18
Today I am grateful for: -a chance to speak at Indy Software Artisans for the first time in almost 2 years. -a visit to my so Nick's home.

3/17
Today I am grateful I was able to unpack a bunch of boxes yesterday and remove some clutter from my life.

3/16
Today I am grateful for an amazing view of last night's lightning storm.

3/15
Today I am grateful for a good afternoon at the gym yesterday.

3/14
Today I am grateful for another Big10 Championship! #GoGreen

3/13
Today I am grateful to attend the St. Patrick's Day parade yesterday in downtown Chicago.

3/12
Today I am grateful for coffee with Tom yesterday.

3/10
Today I am grateful for a sushi dinner, and a walk around the South Loop on a balmy evening.

3/9
Today I am grateful for a surprise gift from my sons.

3/8
Today I am grateful for good dental insurance.

3/7
Today I am grateful for: -A long walk through the city yesterday -Relaxing in this apartment's Jacuzzi last night for the first time.

Sunday, 03 April 2016 14:00:37 (GMT Daylight Time, UTC+01:00)
# Saturday, 02 April 2016

At the beginning of this semester, Microsoft hired a new Student Partner at Indiana University. A Microsoft Student Partner (MSP) is a college student responsible for helping promote the Microsoft platform on campus. Part of that responsibility involves hosting technical events.

This new MSP invited me to campus to co-present with him. He reserved a room, ordered pizza, invited students, and brought some giveaways. We decided to present on Project Oxford - a set of web services that use machine learning to analyze images, videos, and voice. A day before the presentation, Project Oxford was renamed to Microsoft Cognitive Services, so I had to rush to update my slides and re-test all my demos.

The event was a success. Students studying computer science and related fields attended, students who were curious about the technology attended, and one Informatics professor attended.

For me, it was a rewarding experience - in part because it was a chance to connect with students and to share a cool technology that Microsoft is offering;

But more importantly, I was excited to work with the new Indiana University MSP - Tim Giard.

Tim is my son and a junior majoring in Informatics at IU. This was our first chance to work together professionally and it was one of the highlights of my year.

V__7763

Saturday, 02 April 2016 14:59:41 (GMT Daylight Time, UTC+01:00)
# Wednesday, 30 March 2016

The Microsoft Build conference opened this morning. Some of the announcements were technologies that had been previously announced, but are now more generally available (such as Hololens); Some were brand new technologies, such as Bash on Windows.

I was most excited about the Microsoft Bot Framework that allows you to build intelligent bots that interact with Cortana to act as a personal assistant within your app; and Cognitive Services, which includes many of the APIs included in Project Oxford.

Below are the raw notes I took during the keynote. Please let me know (politely) if you discover any typos.

Edge: Biometric authentication for supporting web sites

Fingerprint login (USAA web site)

Ink

Sticky notes: Cortana recognizes words like "tomorrow" as date in appointments or reminder

Draw lines on a map: Distance automatically calculated.

Add labels to map: Labels stay in place when map is rotated in 3D space

Low latency: Ink from pen

Virtual ruler on screen to draw straight line

Developer

GPU Effects, e.g., Blur background synchronized with touch movement

<InkCanvas> control

<InkToolbar> control: Allow users to mark up your screen

Over 1000 new APIs and features

Released today: VS 2015, Update 2

Announced: Bash shell is coming to Windows (native Linux binaries)

Gaming

UWP: Achieve 4k at 60 frames/second

Xbox games running on desktop

  • Take advantage of Windows features
  • Consistent input experience

Xbox developer mode

  • Run, test, debug game on Xbox
  • Preview available today

Cortana on Xbox One

Direct X 12

Hololens

First & only Untethered holographic computer

Hololens shipping today

Releasing app and source code

Apps

  • Holographic anatomy: View internal organs &nerves; collaborate with remote partners
  • Destination Mars by NASA: Virtual tour of another planet

Cortana

Works on lockscreen

Add Cortana to your app.

Insights: When Cortana surfaced in app

Users must give permission for Cortana to their data

Windows, Android, Web Sites, and (soon) iOs

Skype

Interaction with Cortana

Bots: Remembers context from conversation

  • Location of events, friends in locations
  • Bots available today

Skype for Hololens

Microservices

Microsoft Bot Framework

https://dev.botframework.com/

Build conversational bots for your application

Rule-based natural language processing

UI to teach bot to understand your jargon/ terms/ slang

Cognitive Services

22 APIs

https://www.microsoft.com/cognitive-services/

Many of them used to in Project Oxford

Custom Recognition Intelligent Service (CRIS):

  • Understand speech and language
  • Customize speech-to-text

Demo

Smart Phone / Smart glasses app for blind people

Facial recognition and analysis

Read menu, including headings

Wednesday, 30 March 2016 19:07:15 (GMT Daylight Time, UTC+01:00)
# Monday, 28 March 2016
Monday, 28 March 2016 10:27:00 (GMT Daylight Time, UTC+01:00)
# Saturday, 26 March 2016

In the last article, we described the 2-way data binding with the ng-binding directive. In this article, I will introduce the ng-repeat directive.

Recall that a directive is a well-known attribute defined by AngularJS or your AngularJS application that is applied to an HTML element to provide some functionality.

The ng-repeat directive acts in a similar way to foreach loops or other constructs in a programming language. We point ng-repeat to an array of objects and Angular will loop through this array, repeating the HTML contained in the attributed element once for each element in the array.

In the following example, our controller creates an array of "customers" and adds it to the $scope directive, making the customers stateful and available to the HTML. Each customer has a firstName, lastName, and salary property.

var app = angular.module("myApp", []);
app.controller("mainController", function($scope) {
    $scope.customers = [{
      id: 1,
      firstName: "Bill",
      lastName: "Gates",
      salary: 200000
    }, {
      id: 2,
      firstName: "Satya",
      lastName: "Nadella",
      salary: 100000
    }, {
      id: 3,
      firstName: "Steve",
      lastName: "Balmer",
      salary: 300000
    }, {
      id: 4,
      firstName: "David",
      lastName: "Giard",
      salary: 1000000
    }];
}); 

In our HTML, we can loop through every customer in the array by applying the ng-repeat directive to a <tr> element, such as:

<tr ng-repeat="customer in customers"> 

Because the array contains 3 customers, the <tr> tag and all markup within this tag (including any bound data) will be repeated 3 times. As a result, the user will see 3 rows.

Here is the markup for the entire table.

<table>
  <thead>
    <tr>
      <th>First</th>
      <th>Last</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="customer in customers">
      <td>{{customer.firstName}}</td>
      <td>{{customer.lastName}}</td>
      <td style="text-align:right">{{customer.salary | currency:$USD}}</td>
    </tr>
  </tbody>
</table> 

The beauty of this is that we don't need to know in advance how many customers we have or how many rows we need. Angular figures it out for us.

The ng-repeat directive allows us the flexibility of repeating HTML markup for every element in an array.

Saturday, 26 March 2016 23:35:00 (GMT Standard Time, UTC+00:00)
# Friday, 25 March 2016

In the last article, we discussed Angular controllers. In this article, we will add code to a controller to do 2-way data binding.

The $scope object exists to hold stateful data. To use it, we add this object to the arguments of our controller, as shown in Listing 1.

app.controller("mainController", function($scope) {
...
} 

Because JavaScript is a dynamic language, we can create new properties on an object simply by assigning values to those properties. We can maintain state by adding properties to to the $scope object. For example, in Listing 2, we add the FirstName and LastName properties and assign the values "David" and "Giard", respectively.

app.controller("mainController", function($scope) {
  $scope.firstName = "David";
  $scope.lastName = "Giard"; 
}

Now that we have these values assigned, we can bind HTML elements to these properties in our web page, using the ng-bind attribute, as shown in Listing 3.

First: <input type="text" ng-model="firstName" />
<br /> 
 
Last: <input type="text" ng-model="lastName" /> 

We don't need to add the "$scope." prefix because it is implied. In this example, we bind these properties to 2 text boxes and the browser will display the property values.  But unlike the {{}} data binding syntax, this binding is 2-way. In other words, changing the values in the textbox will also change the value of the properties themselves. We can demonstrate this by adding a <div> element to the page to output the current value of these properties, as shown in Listing 3.

<div>Hello, {{$scope.FirstName}} {{$scope.LastName}}!</div> 

When the user modifies the text in the 2 textboxes, the text within the div immediately changes because both are bound to the same properties.

We can do the same with objects and their properties, as in the following example:

JavaScript:

$scope.customer = {
  firstName: "David",
  lastName: "Giard"
}; 

HTML:

First: <input type="text" ng-model="customer.firstName" />
<br /> 

        Last: <input type="text" ng-model="customer.lastName" />
By adding and manipulating properties of the $scope object and using the ng-model directive, we can implement 2-way data binding in our Angular applications.

Friday, 25 March 2016 10:26:00 (GMT Standard Time, UTC+00:00)
# Thursday, 24 March 2016

In the last article, I showed you how to set up your page to use Angular and do simple, one-way data binding.

In this article, I will describe modules and controllers.

A module is a container for the parts of an Angular application, including its controllers. This helps provide a separation of concerns, which helps us organize large, complex applications.

We create a controller in JavaScript with the following syntax:

app.controller("mainController", function() {
  ...
});

In the example above, we named the controller "mainController", but we can give it any name we want. The function argument contains the controller's code and we can pass into this function any Angular objects that we want the function to use.

One common parameter to pass to a controller function is $scope. $scope is a built-in object designed to hold stateful data. We can attach properties to $scope and they will be available in both the view (the web page) and the controller.

The ng-controller directive is an attribute that identifies which controller is available to a page or a section of a page. We can add this attribute to any element, but the controller is only available to that element and the objects contained inside it. If we add it to the body tag, it is available to anything within the body, as in the following example:

<body ng-controller="MyController"> 

which points to the MyController controller and makes it available to everything in the page body.

Once I do this, I can write JavaScript in this controller to add and update properties of the $scope object and those properties become available to the affected part of my page, as in the following example:

JavaScript:

var app = angular.module("myApp", []); 
 
app.controller("mainController", function($scope) {
  $scope.message = "Hello";
  $scope.customer = {
    firstName: "David",
    lastName: "Giard"
  }; 

HTML:

<body ng-controller="mainController">
  <h3>
    {{message}}, {{customer.firstName}} {{customer.lastName}}!
  </h3>
</body> 

In the above example, we use the one-way data binding to display the properties of $scope set within the controller. The output of this is:

Hello, David Giard

This is a simple example, but you can do what you want in a controller and anything created or manipulated in that function is availabe to your web page.

In this article, we introduced Angular controllers and showed how to use them in an Angular application.

Thursday, 24 March 2016 16:51:50 (GMT Standard Time, UTC+00:00)
# Wednesday, 23 March 2016
AngularJS is a popular framework that takes care of many common tasks, such as data binding, routing, and making Ajax calls, allowing developers to focus on the unique aspects of their application. Angular makes it much easier to maintain a large, complex single page application.

Angular is an open source project that you can use for free and contribute to (if you are skilled and ambitious).

As of this writing, AngularJS is on version 1.x. The Angular team is still actively working on the 1.x version; but they have already begun work on AngularJS 2.x, which is a complete rewrite of the Angular framework. AngularJS 2 is currently in beta and features some different paradigms than AngularJS 1. This series will initially focus on AngularJS 1, which has been out of beta for many months. In the future, after AngularJS is out of beta, I hope to write more about that version.

To get started with Angular 1, you need to add a reference to the Angular libraries.

You can either download the Angular files from http://angularjs.org or you can point your browser directly to the files on the Angular site. In either case, you need to add a reference to the Angular library, as in the examples shown below.

<script 
src="https://code.angularjs.org/1.5.0-rc.0/angular.js"></script> 

or

<script src="angular.js"></script> 

Angular uses directives to declaratively add functionality to a web page. A directive is an attribute defined by or within Angular that you add to the elements within your HTML page.

Each Angular page requires the ng-app directive, as in the examples below.

<html ng-app>

or

 
<html ng-app="MyApp"> 

The second example specifies a Controller, which is a JavaScript function that contains some code available to the entire page. We'll talk more about Controllers in a later article.

You can add this attribute to any element on your page, but Angular will only work for elements contained within the attributed element, so it generally makes sense to apply it near the top of the DOM (e.g., at the HTML or BODY tag). If I add ng-app to the HTML element, I will have Angular available throughout my page; however, if I add ng-app to a DIV element, Angular is only available to that DIV and to any elements contained within that DIV. Only one ng-app attribute is allowed per page and Angular will use the first one it finds, ignoring all others.

Once you have the SCRIPT reference and the ng-app attribute, you can begin using Angular. A simple use of Angular is one-way data binding. There are several ways to perform data binding in Angular. The simplest is with the {{}} markup. In an AngularJS application, anything within these double curly braces is interpreted as data binding. So, something like

The time is {{datetime.now()}} 

will output the current date and time. Below are a few other examples.

<h3>{{"Hello" + " world"}}</h3>
<div>{{5+2+3}}</div> 

which will output the following:

Hello World
10

If your controller contains variables, you can use those as well, such as:

<div>{x} + {y} = {x+y}! </div>

Although working with AngularJS can be complex, it only takes a small amount of code to get started.

You can see a live example of the concepts above at this link.

In this article, we introduced the Angular JavaScript framework; then, showed how to add it to your web application and perform simple, one-way data binding.

Wednesday, 23 March 2016 11:54:00 (GMT Standard Time, UTC+00:00)
# Tuesday, 22 March 2016

User expectations for web applications have increased exponentially the past few years. Users now expect applications to respond quickly to their interactions and to render appropriately for different size devices. In addition, users have pushed back against using browser plug-ins, such as Flash and Silverlight.

Developers can meet these expectations by writing an application that performs much of its activity on the client, rather than on the server. The default browser client languages are HTML, JavaScript, and CSS. But these are relatively small languages and they were not originally developed with the idea of building large, complex applications.

Enter: Frameworks. A framework is a combination of pre-built components and utilities that sit on top of HTML, JavaScript, and CSS to manage some of the complexity of large applications.

Some frameworks are very specific, such as jQuery which eases the process of selecting and acting on the DOM elements of a browser; and MustacheJS, which provides automatic data binding. And some are very general frameworks, such as Knockout, Ember, Angular, and React, that provide complex functionality for most aspects of your application and allow you to build custom modules of your own.

Of course, the frameworks themselves add overhead - both in terms of learning time for the developer and download time for the user.  For very simple pages, this overhead might not be worthwhile; but for even moderately complex applications, a framework can manage said complexity, making your code easier to maintain, deploy, debug, and test; and freeing you up to focus less on the application plumbing and more on the code that is unique to your application.

Choosing a framework can be overwhelming. You can find a list of hundreds of JavaScript frameworks and Plug-Ins at http://www.javascripting.com/. Some factors to consider when choosing a framework are:

Does it meet the needs of my application

Do you need a do-everything framework or just data binding. Is the User Interface the most important thing or is synchronizing with backend data more important. Each framework has its strengths. Determine what you need; then find the framework that suits you.

How difficult is it to learning

Look for a framework with good documentation and tutorials. Often, ease of learning is a function of your current knowledge. If you are already familiar with the Model-View-Controller pattern, it may make sense to use a framework that implements this pattern.

How popular is it?

This may strike you as a frivolous criterion, but a popular framework will have more people blogging about it; more people answering forum questions; and bugs will get found and fixed more quickly.

Will it be popular next year?

Future popularity is difficult to predict; but it may be more important than current technology. You are likely to keep this framework for a long time - possibly the life of your application and you want your technologies to remain relevant and supported.

Whichever framework you choose, you will learn it best by diving in and beginning your project.

Tuesday, 22 March 2016 11:18:00 (GMT Standard Time, UTC+00:00)
# Monday, 21 March 2016
Monday, 21 March 2016 14:36:08 (GMT Standard Time, UTC+00:00)