# Monday, 30 May 2016
Monday, 30 May 2016 13:57:55 (GMT Daylight Time, UTC+01:00)
# Sunday, 29 May 2016

Mihai Tataran stood next before a group of technologist at the Jidvei winery and castle in Cetatea de Balta, Transylvania. IT Camp had ended the day before and the conference organizers took the speakers to the winery for a tour, a lunch, and a wine tasting. Mihai laughed and translated into English the tour guides jokes comparing wine with a beautiful woman. The group was tired from the activities surrounding the conference, but energized by the fresh air and the sunshine.

The speakers (including me) had come to Transylvania to speak at the 6th annual IT Camp in Cluj-Napoca. Cluj-Napoca is arguably the tech center of Transylvania - the region of northern Romania which has established itself in recent years as a growing technology hub.

IT Camp has grown from a small Microsoft-focused developer event into a 2-day, 6-track, multi-platform event with many presentations covering topics outside of software development, such as business skills and DevOps. This was my third visit to IT Camp in as many years.

The conference featured 3 keynote presentations - all on Day 1:

Cluj Mayor Emil Boc opened the conference by talking about the emergence of the tech industry and the advantage of the universities in his city.

Jayson Street described some things he has done wrong in his career as a security analyst and the lessons he learned from those incidents.

Laurent Ellerbach showed off his IoT-enabled garden that does everything from analyze the soil to automatically turn on sprinklers to take photos on demand.

IT Camp features an impressive list of speakers from at least 9 different countries - mostly from Europe.

I had a chance to see a few sessions presented by others, including Raffaele Rialdi's "Introduction to .NET Core", Mihai Coroș's "Building Your First SPA with Aurelia and ASP.NET MVC 6", and Radu Vunvulea's "Azure microservices in practice".

I delivered 2 sessions at IT Camp: "Open Source Technologies in Microsoft Azure" and "Adding Image and Voice Intelligence to your apps with Microsoft Cognitive Services".

The Open Source Azure session was well-received by the 30 or so attendees. This was a variation on a talk I've done in the past titled "Microsoft Azure Without Microsoft". In it, I highlight many of the open source technologies that are available in Microsoft Azure (e.g., Linux Virtual Machines and PHP web applications) and with which Microsoft Azure can work (e.g., REST services consumed by Java or Ruby).

I was much more happy with the Cognitive Services presentation. The audience filled a room with a capacity of over 100 persons and were impressed by this technology that exposes models built with machine learning to any application that can call a web service.  A line of attendees came to the stage afterward to ask questions.

I also had an opportunity to meet with the Technical Evangelists on the DX Romania team - both in Bucharest before the conference and during IT Camp.

Few conferences treat their speakers as well as IT Camp. Perks of speaking here, included:

  • A room at the Beautiful Grand Hotel Italia, overlooking the city of Cluj-Napoca
  • A buffet breakfast every morning and gourmet dinners every night
  • Evenings spent talking and drinking with other speakers and the conference organizers
  • A field trip the day after the conference. This year, a bus took us to the winery and castle in Jidvei.

I'm writing this recap from an airport lounge in Munich, waiting for a flight to take me home to Chicago. I'm exhausted from a lack of sleep this past week, but I'm happy I had the opportunity to take part in IT Camp and to reconnect with so many people that I only see once a year.

Sunday, 29 May 2016 10:08:34 (GMT Daylight Time, UTC+01:00)
# Thursday, 26 May 2016

Walking through the Old City in Bucharest in a pouring rain looking for a restaurant among the winding streets, it was hard to remember that I came here for a vacation. But I did.

For the third year in a row, I was invited to speak at IT Camp in Cluj-Napoca, Romania. When speaking in Europe, I always make an effort to take a little extra time and see something new; so I  arrived  Monday evening, although the conference did not start until Thursday.After my ticket to Cluj was booked, I looked around for a place to visit for 2 days and I settled on Bucharest. This was my third trip to Romania, but the first time I set foot in its capital city or the region of Wallachia.

As with all overseas trips, this one began with a flight - or rather with 3 flights. I counted 23 hours between the time I left my apartment to the time I arrived - exhausted - at the Bucharest hotel. Despite the long travel time, it was not a bad trip.

It was late Monday night when I arrived in Bucharest, but the JW Marriott upgraded my room and gave me access to the members' lounge, so I relaxed a bit before bed and slept through my alarm the following morning. It was noon by the time, I ventured out on the streets.

I stopped for about an hour at the Microsoft office in Bucharest and met Radu Stefan - a local Technical Evangelist with whom I had been corresponding. He recommended the City Tour Bus, which takes one past many of the city's cultural and historic landmarks, providing recorded narration as it passes each landmark.

A recommendation from Twitter encouraged me to eat at Caru cu Bere in the Old Town section of Bucharest. The waiter recommended the "House Beer", which was so good I drank 2 (a rare thing for me). I didn't realize until after the waiter brought it, that I had ordered dinner "for 2". It was a good thing I skipped lunch.

Caru cu Bere is located in the Old City - a pedestrian area with cobblestone streets and many old building. I spent a lot of time walking through this section of town - in part because of a desire to explore and in part because it was difficult to find the restaurant. A steady rain fell on me while I walked, attempting unsuccessfully to dampen my spirits.

On Wednesday, I hired a tour guide and driver for the day, who took me around Bucharest. The city has a rich, multicultural history. In the early part of the 20th century, after Romania gained independence, Bucharest was known as the Paris of the East for its beautiful architecture and rich cultural attractions. But the Communists who gained control following World War II had little interest in the Bucharest of the past. Dictator Nicolae Ceaușescu destroyed hundreds of blocks of historic neighborhood to create the enormous and lavish Parliament Building.   Ceaușescu was deposed and executed before this building (the second largest administrative building in the world) was completed.

Highlights of my guided tour were:
-A walk through part of the Parliament Building
-The Village Museum - an outdoor area consisting of old homes from many parts of Romania
-The Romanian Patriarchal Cathedral on Dealul Mitropoliei

Wednesday evening, I boarded a plane for Cluj-Napoca for the IT Camp. I only spent 2 days in Bucharest, but I saw a lot of the city and I learned a lot of its history. It was definitely a worthwhile excursion. No amount of rain could dampen that.

Thursday, 26 May 2016 11:13:00 (GMT Daylight Time, UTC+01:00)
# Wednesday, 25 May 2016

Here is an interview I conducted recently with Victor Cintron of DimDrop – a startup that uses location-based services to improve communication. They are deploying a number of open source technologies to Microsoft Azure.

Startup Stories: An Interview with Victor Cintron, CEO of DimDrop

Azure | DevRadio | Interviews | OSS | Startups | Video
Wednesday, 25 May 2016 06:47:04 (GMT Daylight Time, UTC+01:00)
# Monday, 23 May 2016
Monday, 23 May 2016 10:09:00 (GMT Daylight Time, UTC+01:00)
# Saturday, 21 May 2016

Last month, I had the privilege of attending the AWS Summit in Chicago. It was a great experience for me because, although I do a lot of work with cloud computing, I have very little experience with the Amazon Web Services (AWS) platform.

The most interesting session I attended was about a service called "Aurora" (Amazon tends to give all their services catchy names). This is a relational database that looks and acts almost exactly like MySQL but runs much faster. The official product page brags that Aurora is a "MySQL-compatible relational database with 5X performance", however the session I attended claimed that they found cases in which Aurora was 63 times faster than MySQL. The presenters didn't share details of those cases, but even if results are only a fraction of that speed, it's still an impressive performance improvement.

Because Aurora is MySQL-compliant, you should be able to plug it into any application and use it just like MySQL. The SQL syntax is identical and the management tools will be familiar to anyone used to managing MySQL.

Of course, the fact that Aurora is hosted on a cloud platform like AWS gives it the advantage of high availability and flexible scaling that cloud computing offers.

Since most of my cloud computing experience is with Microsoft Azure, I tend to use Azure as a reference point for the services I saw at this summit. I was drawn to Aurora in part because I'm not aware of the same offering in Microsoft Azure.

MySQL as a service is available on Azure, but it's offered and supported by ClearDb - a third party.  If you want better performance or scalability on Azure than that offered by ClearDb, you will need to either switch to a different database or create a Virtual Machine and install MySQL on that, in which case you would be using Infrastructure as a Service, instead of Software as a Service.

In many cases, this is a non-issue. If you are building a new application, you have the flexibility to choose your preferred database technology. MySQL and SQL server have very similar languages; and, although I won't get into a debate here as to which is "better", it would be difficult to argue that SQL server is significantly less reliable or enterprise-ready than MySQL.

But there are times when you don't have a choice of database technologies. For example, if you have a large legacy application that you want to migrate to Azure, it may be a daunting task to migrate every stored procedure and SQL statement to use T-SQL.  Or if you are using a framework that is specifically built on top of MySQL, it makes sense to use that database, rather than re-writing the entire data access layer. Luckily, some frameworks have alternative data access layers. For example, Project Nami is a data access layer for WordPress that uses SQL Server as a data store, rather than MySQL.

Although the various cloud computing companies follow one another and are likely to build a service when they see traction on their competitor's platform, I find it interesting to see these gaps in offerings.

Saturday, 21 May 2016 11:28:00 (GMT Daylight Time, UTC+01:00)
# Friday, 20 May 2016

Here is a recent conversation I had with Sean Goltz and Addison Cameron-Huff of Global-Regulation, a company that assists researchers who are searching for international law documents. They are deploying a variety of open source technologies on Microsoft Azure.

Watch this interview below or follow this link to the interview.

Friday, 20 May 2016 14:39:33 (GMT Daylight Time, UTC+01:00)
# Wednesday, 18 May 2016

The Newtonsoft.Json library contains a number of tools for working with JSON from within your .NET application.

New ASP.NET applications created in Visual Studio already contain a reference to the Newtonsoft.Json library. But if you want to add the library to a different project type or if you want to update the version installed by default with an ASP.NET application, you can right-click your project in the Visual Studio Solution Explorer and select "Manage NuGet Package..." and search for Newtonsoft.Json. Select the "Newtonsoft.Json" package (Fig 1) and click either "Install" or "Update".

Newtonsoft is very good at serializing .NET objects into JSON objects.

One feature that I find useful is its ability to rename attributes in my classes. For example, if I have a class named "SocialSecurityNumber" in my C# class and the client consuming my JSON object expects that same property to be named "ssn", I can make this transformation declaratively by adding the JsonProperty attribute to the class property, as shown in Listing 1.

[JsonProperty("ssn")]
public string SocialSecurityNumber { get; set; } 

By convention, C# developers tend to name public properties with mixed case (capitalize the first letter of each word); while JavaScript and JSON developers tend to name properties using Camel casing (capitalize the first letter of each word, except the first word). In the past, I used the JsonProperty attribute to accomplish this, renaming every variable that would be serialized to JSON, as in the following example:

[JsonProperty("firstName")]
public string FirstName { get; set; }
 
[JsonProperty("lastName")]
public string LastName { get; set; }

For projects with many objects and many properties, this can be a tedious task. Fortunately, I recently learned a shortcut.

ASP.NET contains a Formatters class that controls how items are formatted and Newtonsoft.Json can tap into this. The following code, when run at the start of your application, converts all properties to Camel-Case as you transform them to JSON.

var formatters = GlobalConfiguration.Configuration.Formatters;
var jsonFormatter = formatters.JsonFormatter;
var settings = jsonFormatter.SerializerSettings;
settings.ContractResolver = new CamelCasePropertyNamesContractResolver(); 

I added this code to the Register method of the WebApiConfig class in my ASP.NET MVC project, so that it is run when the application starts up, before any serialization is done.

Another useful setting is to add carriage returns and line feeds to the JSON that is created. This has the disadvantage of making your JSON slightly larger; but it makes it much easier for human beings to read, which can be very useful during debugging. This is accomplished with the following line:

settings.Formatting = Formatting.Indented; 

The full listing in the Register() method is shown below:

var formatters = GlobalConfiguration.Configuration.Formatters;
var jsonFormatter = formatters.JsonFormatter;
var settings = jsonFormatter.SerializerSettings;
settings.Formatting = Formatting.Indented;
settings.ContractResolver = new CamelCasePropertyNamesContractResolver(); 

Using the tools in the Newtonsoft.Json library, we can easily adhere to the conventional naming conventions of whatever platform in which our data is used.

C# | JavaScript | Web
Wednesday, 18 May 2016 20:18:48 (GMT Daylight Time, UTC+01:00)
# Tuesday, 17 May 2016

Gary Numan was everything I did not expect.

GaryNuman (5) He came to Chicago for 3 nights  at Metro night club in Wrigleyville. Each night he promised to perform a different album from early in his career -  "Replicas" on Sunday; "The Pleasure Principle" Monday and "Telekon" on Tuesday. I chose to attend Sunday because his 1979 album "Replicas" has always been my favourite of his. This was an album I embraced in high school a year before the rest of America learned of Gary Numan with the release of "The Pleasure Principle" and its wildly popular "Cars".

For me, Replicas was always the definitive Gary Numan album. Its layers of electronic melodies and its lyrics about a dystopian future spoke to the adolescent me and the album still holds up decades later.

GaryNuman (2) Numan performed every song from the "Replicas" album and I was impressed by his enthusiasm for songs that he released 3 decades ago.

I don't recall ever attending a concert in which I knew in advance the songs the artist would play. But he surprised us - first by mixing the order of the original album and (more significantly) updating the arrangements.

The electronic music that made him famous is still impressive. "Down in the Park" and "I Nearly Married a Human" featured impressive keyboards and unusual sounds. But, he transformed "Me! I Disconnect From You" from a hypnotic synth-pop tune into a rock song that any post-punk garage band would be proud of. The guitar bass drums came to the fore on a number of his songs, making them more rocking and less ethereal.

Replicas I expected a stiff, robotic, stoic Gary Numan - similar to the mannequin pose on the Replicas album cover. Instead, the audience was treated to an energetic performer dancing to his songs and bringing a renewed passion to his old music.

The only downside was the venue. The fact that Metro only accepts cash was a disappointing surprise, but its General Admission format made it difficult for most attendees to see the stage. There are a limited number of tables one can reserve at more than double the GA price and I'm debating doing this when Echo & the Bunnymen play there in the Fall.

GaryNuman (3) But I found a bit of floor space to enjoy the show and enjoy it I did - from the music to the strobe lights. Thanks to Numan's energy this concert exceeded my expectations.

Tuesday, 17 May 2016 15:56:18 (GMT Daylight Time, UTC+01:00)
# Monday, 16 May 2016
Monday, 16 May 2016 13:20:43 (GMT Daylight Time, UTC+01:00)
# Sunday, 15 May 2016

In an earlier article, I described how to call the Cognitive Services API from JavaScript. The key parts of the code (using the jQuery library) is shown below:

var subscriptionKey = "cd529ca0a97f48b8a1f3bc36ecd73600";
var imageUrl = $("#imageUrlTextbox").val();
var webSvcUrl = "https://api.projectoxford.ai/face/v1.0/detect?returnFaceId=true&returnFaceLandmarks=true&returnFaceAttributes=age,gender,smile,facialHair,headPose,glasses";
$.ajax({
    type: "POST",
    url: webSvcUrl,
    headers: { "Ocp-Apim-Subscription-Key": subscriptionKey },
    contentType: "application/json",
    data: '{ "Url": "' + imageUrl + '" }'
}).done(function (data) {
        // ... 
        // Code to run when web service returns data...
        // ...
        }); 

Do you spot the problem with this code?

Although it works very well from a functional point of view, it has a security flaw” As with all Cognitive Services APIs, the Face API requires you to pass a key in the header of your HTTP request. Because there is no easy way to hide this key, it is easy for a hacker to steal your key. Using your key, they can make calls and charge them to your account - either using up your quota of free calls or (worse) charging your credit card for their calls.

One way to hide the key is to make the call to Cognitive Services from a custom web service. This web service can be a simple pass-through, but it allows you to hide the key on the server, where it is much more difficult for a hacker to find it.

We can use Web API to create this custom web service. With Web API, is a simple matter to store the Subscription Key in a secure configuration file and retrieve it at run time. The relevant code goes in an ApiController class as shown below.

// POST: api/Face
public IEnumerable<Face> Post([FromBody]string imageUrl)
{
    return GetFaceData(imageUrl);
} 
 
public static IEnumerable<Face> GetFaceData(string imageUrl)
{
    var webSvcUrl = "https://api.projectoxford.ai/face/v1.0/detect?returnFaceId=true&returnFaceLandmarks=true&returnFaceAttributes=age,gender,smile,facialHair,headPose,glasses";
    string subscriptionKey = ConfigurationManager.AppSettings["SubscriptionKey"];
    if (subscriptionKey == null)
    {
        throw new ConfigurationErrorsException("Web Service is missing Subscription Key");
    }
    WebRequest Request = WebRequest.Create(webSvcUrl);
    Request.Method = "POST";
    Request.ContentType = "application / json";
    Request.Headers.Add("Ocp-Apim-Subscription-Key", subscriptionKey);
    using (var streamWriter = new StreamWriter(Request.GetRequestStream()))
    {
        string json = "{"
        + "\"url\": \"" + imageUrl + "\""
        + "}"; 
 
        streamWriter.Write(json);
        streamWriter.Flush();
        streamWriter.Close(); 
 
        var httpResponse = (HttpWebResponse)Request.GetResponse(); 
 
        string result = "";
        using (var streamReader = new StreamReader(httpResponse.GetResponseStream()))
        {
            result = streamReader.ReadToEnd();
        }
        httpResponse.Close(); 
 
        List<Face> faces = JsonConvert.DeserializeObject<List<Face>>(result);
        return faces;
    }
} 

Of course, we could also use the .NET library to abstract the call to the Face API, but I wanted to keep this code as close to the original JavaScript code as possible.  This method returns a List of Face objects. The Face object maps to the JSON data returned by the Face API. You can see this class below.

public class Face
{
    public string FaceId { get; set; }
    public FaceRectangle FaceRectangle { get; set; }
    public FaceLandmarks FaceLandmarks { get; set; }
    public FaceAttributes FaceAttributes { get; set; }
}

Now, we can modify our JavaScript code to call our custom API, instead of calling Face API directly, and we can eliminate the need to pass the key from the client-side JavaScript, as shown below:

var imageUrl = $("#imageUrlTextbox").val();
webSvcUrl = "api/face";
$.ajax({
    type: "POST",
    url: webSvcUrl,
    data: JSON.stringify(imageUrl),
    contentType: "application/json;charset=utf-8"
}).done(function (data) { 
// ... 
// Code to run when web service returns data...
// ...
}); 

In this listing, we have removed the Subscription-Key from the Header and we have changed the Web Service URL. This is JavaScript is calling a web service in its own domain, so it is trusted. The default Cross-Site scripting settings of most web servers will keep JavaScript outside this domain from accessing our custom web service.

This pattern works with any of the Cognitive Services APIs. In fact, it works with any API that requires the client to pass a secure key. We can abstract away the direct call to that API and hide the key on the server, making our code more secure.

Code

  • You can find the full code of the sample described above here.
  • You can find the code for the “unprotected” sample here.
Sunday, 15 May 2016 00:50:49 (GMT Daylight Time, UTC+01:00)
# Friday, 13 May 2016

Microsoft Cognitive Services (MCS) allows you to tap into the power of Machine Learning and perform sophisticated analysis of photographs, simply by calling a web service.

The Face API in MCS returns an array of all the faces found in a photo, along with information about each face, such as the location of the eyes, nose, and mouth; the age and gender of the person, and information about eyeglasses and facial hair.

You can sign up to use MCS for free at https://www.microsoft.com/cognitive-services/. Information specific to the Face API can be found at https://www.microsoft.com/cognitive-services/en-us/face-api. (fig 1)

FaceAPI02-SubscriptionKey 
Fig. 1

To use the Face API, click the [Get Started for Free] button. You will see a list of subscription keys. Scroll down to "Face" section and click "Copy" next to one of the Face Subscription keys to save it to your clipboard or click "Show" to reveal the key.

FaceAPI01-APIpage 
Fig. 2

To call the Face API, send an HTTP POST request to https://api.projectoxford.ai/face/v1.0/detect

You may add optional querystring parameters to the above URL:

returnFaceID: If set to "true", the web service will return a GUID representing the face, so that you can make repeated inquiries about this face.

returnFaceLandmarks: If set to "true", the web service will return a "faceLandmarks" object containing a list of points identifying where location of the edges of the eyes, eyebrows, nose, and mouth.

returnFaceAttributes: A comma-delimited list of face attributes the web service should return. Allowable attributes are
age: an age number in years.
gender, smile, facialHair, headPose, and glasses.

The service will always return a rectangle identifying the outline of the face. Adding more properties to return will, of course, slow down both the computation and the download of the data.

You must pass the subscription key (described above) in the header of your HTTP request as in the following example:

Ocp-Apim-Subscription-Key:52b24a988a179f13a25aac4713aec800 

The photo itself will be in the body of the POST request. In the content-type header parameter, you can specify how you plan to send the photo to the server. If you plan to send a link to the URL of a photo, set the content-type to "application/json"; if you plan to send the photo as binary data, set the content-type to "application/octet-stream".

The body of the request contains the image. If you selected "application/json" as the content type, send the URL in the following JSON format:

{ "Url": "http://davidgiard.com/themes/Giard/images/logo.png"}

If successful, the web service will return (formatted as JSON) an array of "face" objects - one for each face detected in the photo. Each object will contain the top, left, height, and width values to define a rectangle outlining that face. If you declared that you want more data (e.g., FaceID, Face Landmanrks, and Face Attributes), that data will also be returned in each face object.

Below is an example of JavaScript / jQuery code to call this API.

var subscriptionKey = "Copy your Subscription key here"; 
 
var imageUrl = "http://davidgiard.com/themes/Giard/images/logo.png";
 
var webSvcUrl = "https://api.projectoxford.ai/face/v1.0/detect?returnFaceId=true&returnFaceLandmarks=true&returnFaceAttributes=age,gender,smile,facialHair,headPose,glasses";
 
var outputDiv = $("#OutputDiv");
outputDiv.text("Thinking..."); 
 
$.ajax({
    type: "POST",
    url: webSvcUrl,
    headers: { "Ocp-Apim-Subscription-Key": subscriptionKey },
    contentType: "application/json",
    data: '{ "Url": "' + imageUrl + '" }'
}).done(function (data) { 
 
    if (data.length > 0) {
        var firstFace = data[0];
        var faceId = firstFace.faceId;
        var faceRectange = firstFace.faceRectangle;
        var faceWidth = faceRectange.width;
        var faceHeight = faceRectange.height;
        var faceLeft = faceRectange.left;
        var faceTop = faceRectange.top; 
 
        var faceLandmarks = firstFace.faceLandmarks;
        var faceAttributes = firstFace.faceAttributes; 
 
        var leftPupil = faceLandmarks.pupilLeft;
        var rightPupil = faceLandmarks.pupilRight;
        var mouth = faceLandmarks.mouthLeft;
        var nose = faceLandmarks.noseLeftAlarOutTip;
        var mouthTop = faceLandmarks.upperLipTop;
        var mouthBottom = faceLandmarks.underLipBottom;
        leftEyeWidth = faceLandmarks.eyebrowLeftInner.x - faceLandmarks.eyebrowLeftOuter.x;
        rightEyeWidth = faceLandmarks.eyebrowRightOuter.x - faceLandmarks.eyebrowRightInner.x;
        mouthWidth = faceLandmarks.mouthRight.x - faceLandmarks.mouthLeft.x; 
 
        var mouthLeft = faceLandmarks.mouthLeft;
        var mouthRight = faceLandmarks.mouthRight;
        var mouthTop = faceLandmarks.upperLipTop;
        var mouthBottom = faceLandmarks.underLipBottom; 
 
        var outputText = "";
        outputText += "Face ID: " + faceId + "<br>";
        outputText += "Top: " + faceTop + "<br>";
        outputText += "Left: " + faceLeft + "<br>";
        outputText += "Width: " + faceWidth + "<br>";
        outputText += "Height: " + faceHeight + "<br>";
        outputText += "Right Pupil: " + rightPupil.x + ", " + rightPupil.y + "<br>";
        outputText += "Left Pupil: " + leftPupil.x + ", " + leftPupil.y + "<br>";
        outputText += "Mouth: <br>";
        outputText += " -Left: " + mouthLeft.x + ", " + mouthLeft.y + "<br>";
        outputText += " -Right: " + mouthRight.x + ", " + mouthRight.y + "<br>";
        outputText += " -Top: " + mouthTop.x + ", " + mouthTop.y + "<br>";
        outputText += " -Bottom: " + mouthBottom.x + ", " + mouthBottom.y + "<br>";
        outputText += "Attributes:" + "<br>";
        outputText += "age: " + faceAttributes.age + "<br>";
        outputText += "gender: " + faceAttributes.gender + "<br>";
        outputText += "smile: " + (faceAttributes.smile || "n/a") + "<br>";
        outputText += "glasses: " + faceAttributes.glasses + "<br>";
        outputDiv.html(outputText); 
 
    }
    else {
        outputDiv.text("No faces detected."); 
 
    } 
 
}).fail(function (err) {
    $("#OutputDiv").text("ERROR!" + err.responseText);
}); 
 
service call is performed by the following line: 
 
$.ajax({
    type: "POST",
    url: webSvcUrl,
    headers: { "Ocp-Apim-Subscription-Key": subscriptionKey },
    contentType: "application/json",
    data: '{ "Url": "' + imageUrl + '" }' 
 

This request is Asynchronous, so the "done" function is called when it returns successfully.

}).done(function (data) { 

The function tied to the "done" event parses through the returned JSON and displays it on the screen.

If an error occurs, we output a simple error message to the user in the "fail" function.

}).fail(function (err) {
          $("#OutputDiv").text("ERROR!" + err.responseText);
  }); 

The rest of the code above simply grabs the first face in the JSON array and drills down into properties of that face, displaying those properties in a DIV on the page.

For example, in the attached site.css stylesheet, I’ve defined 2 classes - .Rectangle and .FaceLabel - that initially hide objects on the page via the display: none style. These classes also set the position to “absolute” allowing us to position them exactly where we want within a container. The z-order is incresed, so that these items will appear on top of the face in the picture.  The relevant CSS is shown below:

#Rectangle
{
    opacity: 0.3;
    z-index: 10;
    position: absolute;
    display: none;
  }
 
.FaceLabel{
    position: absolute;
    z-index: 20;
    display: none;
    font-size: 8px;
    padding: 0px;
    margin: 0px;
    background-color: white;
    color: black;
    padding: 1px;
  }

Our page contains object with these classes to identify parts of the face identified. Initially, they will be invisible until we determine where to place them via the information returned by the Face API.

<div id="PhotoDiv">
    <img id="ImageToAnalyze" src="images/CartoonFace.png">
    <div class="FaceLabel" id="LeftEyeDiv">LEFT</div>
    <div class="FaceLabel" id="RightEyeDiv">RIGHT</div>
    <div class="FaceLabel" id="NoseDiv">NOSE</div>
    <div class="FaceLabel" id="MouthDiv">MOUTH</div>
    <img src="images/Rectangle.png" id="Rectangle">
</div>

When the call to the Face API web service returns successfully, we drill down into the returned JSON to find out the outline of the face and the location of the eyes, nose, and mouth. Then, we make these objects visible (set the display style to “block”)  and place them above the corresponding facial feature (set the “top” and “left” styles). In the case of the Rectangle image, we also resize it to cover the face detected. The rectangle’s “opacity” style is 0.3, making it translucent enough to see the face behind it. Here is the JavaScript to accomplish this:

$("#Rectangle").css("top", faceTop);
$("#Rectangle").css("left", faceLeft);
$("#Rectangle").css("height", faceHeight);
$("#Rectangle").css("width", faceHeight);
$("#Rectangle").css("display", "block");
$("#LeftEyeDiv").css("top", leftPupil.y);
$("#LeftEyeDiv").css("left", leftPupil.x);
$("#LeftEyeDiv").css("display", "block");
$("#RightEyeDiv").css("top", rightPupil.y);
$("#RightEyeDiv").css("left", rightPupil.x);
$("#RightEyeDiv").css("display", "block");
$("#NoseDiv").css("top", nose.y);
$("#NoseDiv").css("left", noseHorizontalCenter);
$("#NoseDiv").css("display", "block");
$("#MouthDiv").css("top", mouthVerticalCenter);
$("#MouthDiv").css("left", mouthTop.x);
$("#MouthDiv").css("display", "block");

Below is the output of the web page analyzing a photo of my face:

FaceApi03-WebPage

As you can see, calling the Cognitive Services Face API, is a simple matter of making a call to a web service and reading the JSON data returned by that service.

You can find this code in my GitHub repository.

Friday, 13 May 2016 10:11:00 (GMT Daylight Time, UTC+01:00)
# Thursday, 12 May 2016

Microsoft Cognitive Services is a set of APIs built on Machine Learning and exposed as REST Web Services. The Speech API offers a way to listen to speech and convert it into text.

GCast 16: Cognitive Services - Speech to Text

Thursday, 12 May 2016 13:10:38 (GMT Daylight Time, UTC+01:00)
# Monday, 09 May 2016
Monday, 09 May 2016 16:07:00 (GMT Daylight Time, UTC+01:00)

Yesterday, I posted a code sample of the simplest web server I could create using node.js. After reading my post, Tugberk Ugurlut pointed me to http-server and his blog post on http-server.

Install http-server globally

Installing http-server is simple with the following command:

install http-server -g

The “-g” switch installs this library locally. I tried it without that switch, but it did not work. However, the advantage of installing it globally is that it will work in any new folder you create on your computer.

Create Web Files to Render

You can change to a folder on your local machine and create some web pages, JavaScript files, and CSS files, such as the 2 sample pages below:

index.html

<html>
<body>
    <h1>Index</h1>
    <div>
        Welcome to my site!
    </div>
</body>
</html>

about.html

<html>
<body>
    <h1>About</h1>
    <div>
        This is a site!
    </div>
</body>
</html>

Start Web Server

Then, start a web server with the following command:
http-server
 
The server will notify you on what port it is running (8080 by default)

Test it Out

Now you can open a browser and navigate to a page, as shown below:

http-server-about

Notice that you don’t need to type the “.html” or “.htm” extension. The server is smart enough to know the page you are looking for.

It is also smart enough to assume a page with a name like “index.html”, “home.htm”, or “default.htm” is a a default page and render this page when none is specified, as shown below:

http-server-index

This is a very simple way to quickly install, configure, and start a lightweight web server on your local PC for testing or creating static pages.

Monday, 09 May 2016 03:02:55 (GMT Daylight Time, UTC+01:00)
# Saturday, 07 May 2016

Often I want to set up a simple web server to render pages that consist only of client-side code, such as HTML, CSS, and JavaScript. In the past, I've created such pages using Visual Studio, but VS contains more functionality than I need in this case and that functionality can slow me down.

I found a lightweight web server solution in node.js, which is quick to install, quick to start up, and (relatively) simple to use. As a bonus, it will run on multiple operating systems.

Here are the steps I use to create a web server.

  1. Install node
  2. Create and open a folder for your pages
  3. npm Init to create the package.json file that node requires
  4. Create a "views" folder for your pages and add any pages to it
  5. Install express and ejs
  6. Create a main script
  7. Create HTML pages
  8. Start the web server
  9. Try it out

1. Install node

You can download node from https://nodejs.org/en/download/. Select your operating system and run the installer. It is a small download and a quick install.

2. Create and open a folder for your pages.

In Windows, I use the command prompt for this. I create my projects in either the c:\development folder (if I plan to keep them) or the c:\test folder (if they are scratch projects for learning)

So, for a scratch project, I would use the following commands to create a folder named "nodetest1":
cd c:\test

md nodetest1
cd nodetest1 

3. npm Init to create the package.json file that node requires

Node requires a file named package.json with important information about the project. A quick way to create this is with the command "npm Init". It will prompt you for information required by package.json, even providing default values for some of these settings. Press ENTER at a prompt to accept the default in parentheses or override the default by typing in a new setting. Below is an example of me walking through this command, accepting mostly defaults

npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.  See the session below for reference.

Press ^C at any time to quit.
name: (nodetest1)
version: (1.0.0)
description: best app evar
entry point: (index.js)
test command:
git repository:
keywords:
author: David
license: (ISC)
About to write to C:\test\nodetesting\nodetest1\package.json:
{
  "name": "nodetest1",
  "version": "1.0.0",
  "description": "best app evar",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "David",
  "license": "ISC"
}
Is this ok? (yes) 

As you can see the file you create is echoed to the screen before you confirm its creation.

4. Create a "views" folder for your pages and add any pages to it

The "md" command works for this in the command prompt

md views 

5. Install express and ejs

Express and ejs are packages required for a simple web server. You can use the npm install command to install them. Add the "--save" switch to this command to update the dependencies in your package.json file. The following 2 commands install express and ejs packages, respectively.

npm install --save express
npm install --save ejs 

Check out the package.json and verify that these packages now appear in the dependencies section, as shown in the example below:

"dependencies": {
  "ejs": "^2.4.1",
  "express": "^4.13.4"
} 

6. Create a main script.

Below is the simplest script I could create that serves up any page in the "views" folder and sets a default page. In the example above, I named it "index.js". You can name it whatever you want, but you should set the "main" attribute in package.json to the name of your file. I have commented each line to explain what it does.

// This script uses the express library
var express = require('express');
var app = express(); 
 
// Tell node where to find the view pages
app.set('views', __dirname + '/views'); 
 
// Tell node to use the ejs library to handle the view
app.set('view engine', 'ejs');
app.use(express.static('views'));
app.engine('html', require('ejs').renderFile); 
 
// Set a default page (Optional, but goood to have)
app.get('/', function (req, res) {
    res.render('index.html')
}); 
 
// Start the web server
var server = app.listen(3000, function () {
    console.log("Express is running on port 3000");
}); 

In package.json, you specified a main JavaScript file. (In the example above, I used the default "index.js". Open package.json to see what you set.) This is the script that will run when you run node.

7. Create HTML pages

In the view folder, create some HTML pages. The script above specified "index.html", so we will need to create this one. Create any other page you like and name them with the ".htm" or ".html" extension. Here are 2 simple examples:

Index.html

<html>
    <body>
        <h1>Welcome!</h1>
        <div>
            This is the INDEX page
        </div>
    </body>
</html> 

about.html

<html>
    <body>
        <h1>About Us</h1>
        <div>
            We think therefore we are!
        </div>
    </body>
</html> 

 

8. Start the web server

To start your web server, simply type "node" followed by the name of your main script.  This will launch node and tell you the server is running on port 3000.

9. Try it out

Open a browser and type "http://localhost:3000/" in the address bar. You should see the default page (index.html) displayed. Here is the sample page rendered:

SimpleNodeWebServer1

Type "http://localhost:3000/about.html" to see the "about" sample page described above. If you used my example, you will see the following:
SimpleNodeWebServer2

At the command prompt, press CTRL+C at any time to stop the server, making these pages unavailable.

You can view this sample code at https://github.com/DavidGiard/simplenodewebserver.

Saturday, 07 May 2016 18:55:29 (GMT Daylight Time, UTC+01:00)
# Thursday, 05 May 2016

Microsoft Cognitive Services is a set of APIs based on Machine Learning and exposed as REST web services. The Emotion API analyzes pictures of faces and determines the emotion shown in each face.

GCast 15: Cognitive Services - Emotion API

Thursday, 05 May 2016 15:35:00 (GMT Daylight Time, UTC+01:00)
# Monday, 02 May 2016
Monday, 02 May 2016 16:21:00 (GMT Daylight Time, UTC+01:00)
# Sunday, 01 May 2016

5/1
Today I am grateful for a chance to be part of the Chicago Code Camp keynote yesterday.

4/30
Today I am grateful for:
-My first experience at a FIRST Robotics competition.
-An upgraded flight home last night.

4/29
Today I am grateful for an upgraded hotel room and my first taste of Peruvian food.

4/28
Today I am grateful:
-for dinner last night with Nick, Kathy, and Rick.
-that I arrived safely in St. Louis, despite a rocky start to my trip.
-to Nick for driving me to and from the airport last night.

4/27
Today I am grateful for a hot sauna at the end of a long day.

4/26
Today I am grateful for post-meetup drinks last night with a bunch of JavaScript developers I just met.

4/25
Today I am grateful for breakfast on my balcony in my pajamas.

4/24
Today I am grateful to spend time with Nick and Adriana in Chicago this weekend.

4/23
Today I am grateful for:
-Lunch in the South Loop with Scott yesterday
-Dinner in ChinaTown with Nick and Adriana last night

4/22
Today I am grateful for the variety of people I meet every day.

4/21
Today I am grateful for this view.
ChicagoSkyline (1)
ChicagoSkyline (2)
ChicagoSkyline (3)
ChicagoSkyline (4)

4/20
Today I am grateful to attend the AWS Summit yesterday with Brian and Kevin.

4/19
Today I am grateful that I got my car back with a repaired fender.

4/18
Today I am grateful to sit out on my balcony last night sipping a cocktail and enjoying a warm breeze.

4/17
Today I am grateful for a drink and some beer cheese soup last night with Katie, Justin, and Shira.

4/16
Today I am grateful for:
-Lunch at Wildberry with a bunch of folks from the dev community
-Dinner at a Columbian steakhouse in Lakeview.

4/15
Today I am grateful to see Johnny Clegg in concert last night, after 30+ years as a fan.

4/14
Today I am grateful for lunch with Nonnie yesterday.

4/13
Today I am grateful to get together with my team yesterday, which doesn't happen often enough.

4/12
Today I am grateful that all these family photos are now hanging on the walls of my new apartment.

4/11
Today I am grateful that my taxes are filed.

4/10
Today I am grateful for:
-The opportunity to deliver the keynote presentation at the Tech In 2016 conference yesterday.
-A front-row ticket to see Marshall Crenshaw last night.

4/9
Today I am grateful I was able to track down all my missing tax forms yesterday.

4/8
Today I am grateful for my new cuff links - the first I've received in years!

4/7
Today I am grateful for the power of ibuprofen.

4/6
Today I am grateful for dinner last night with Shelly and her family.

4/5
Today I am grateful to Brian for helping me prepare my upcoming presentation on Virtualization Containers.

4/4
Today I am grateful that I've been able to make it to the gym almost every day for the past 3 months.

Sunday, 01 May 2016 17:14:12 (GMT Daylight Time, UTC+01:00)