# Monday, 30 April 2018
Monday, 30 April 2018 15:13:00 (GMT Daylight Time, UTC+01:00)
# Tuesday, 26 December 2017

Microsoft Cognitive Services is a set of APIs that take advantage of Machine Learning to provide developers with an easy way to analyze images, speech, language, and others.

If you have worked with or studied Machine Learning, you know that you can accomplish a lot, but that it requires a lot of computing power, a lot of time, and a lot of data. Since most of us have a limited amount of each of these, we can take advantage of the fact that Microsoft has data, time, and the computing power of Azure. They have used this power to analyze large data sets and expose the results via a set of web services, collectively known as Cognitive Services.

The APIs of Cognitive Services are divided into 5 broad categories: Vision, Speech, Language, Knowledge, and Search.

Vision APIs

The Vision APIs provide information about a given photograph or video. For example, several Vision APIs are capable of recognizing  faces in an image. One analyzes each face and deduces that person's emotion; another can compare 2 pictures and decide whether or not 2 photographs are the same person; a third guesses the age of each person in a photo.

Speech APIs

The Speech APIs can convert speech to text or text to speech. It can also recognize the voice of a given speaker (You might use this to authenticate users, for example) and infer the intent of the speaker from his words and tone. The Translator Speech API supports translations between 10 different spoken languages.


The Language APIs include a variety of services. A spell checker is smart enough to recognize common proper names and homonyms. And the Translator Text API can detect the language in which a text is written and translate that text into another language. The Text Analytics API analyzes a document for the sentiment expressed, returning a score based on how positive or negative is the wording and tone of the document. The most interesting API in this group is the Language Understanding Intelligence Service (LUIS) that allows you to build custom language models so that your application can understand questions and statements from your users in a variety of formats.


Knowledge includes a variety of APIs - from customer recommendations to smart querying and information about the context of text. Many of these services take advantage of natural language processing. As of this writing, all of these services are in preview.


The Search APIs allow you to retrieve Bing search results with a single web service call.

You can use these APIs. To get started, you need an Azure account. You can get a free Azure trial at https://azure.microsoft.com/.

Each API offers a free option that restricts the number and/or frequency of calls, but you can break through that boundary for a charge.  Because they are hosted in Azure, the paid services can scale out to meet increased demand.

You call most of these APIs by passing and receiving JSON to a RESTful web service. Some of the more complex services offer configuration and setup beforehand.

These APIs are capable of analyzing pictures, text, and speech because each service draws on the knowledge learned from parsing countless photos, documents, etc. beforehand.
You can find documentation, sample code, and even a place to try out each API live in your browser at https://azure.microsoft.com/en-us/services/cognitive-services/

A couple of fun applications of Cognitive Services are how-old.net (which guesses the ages of people in photographs) and what-dog.net (which identifies the breed of dog in a photo).

Below is a screenshot from the Azure documentation page, listing the sets of services. But keep checking back, because this list grows and each set contains one or more services.

List of Cognitive Services
Sign up today and start building apps. It’s fun, it's useful, and it’s free!

Tuesday, 26 December 2017 10:25:00 (GMT Standard Time, UTC+00:00)
# Monday, 13 November 2017
Monday, 13 November 2017 16:40:00 (GMT Standard Time, UTC+00:00)
# Monday, 16 October 2017
Monday, 16 October 2017 09:44:00 (GMT Daylight Time, UTC+01:00)
# Friday, 06 October 2017

The following articles walk the user through creating an ASP.NET application; storing source control history in a Visual Studio Team Services project Git repository; and automatically deploying to an Azure web app whenever code changes are pushed to the repository.

Creating a Team Project in Azure

Creating an ASP.NET Web Project and Storing code in a VSTS Git Repository

Configuring Automatic Deployment from VSTS to an Azure Web App

ALM | Visual Studio | VSTS | Web
Friday, 06 October 2017 10:23:00 (GMT Daylight Time, UTC+01:00)
# Thursday, 05 October 2017

This is Part 3 in a series of articles about integrating VSTS, Azure Web Apps, ASP.NET applications, and Visual Studio.

In previous articles, I showed you how to create a VSTS Team Account and Team Project linked to Azure  and how to create an ASP.NET Web application and link this to your VSTS team project in order to store the project code in the Team Version Control Repository.

In this article, I will show you how to automatically deploy code from your VSTS Team Project repository to an Azure Web App every time you push code changes to that repository.

This configuration is done in the Azure portal.

Log into your Azure account and navigate to the portal by clicking the PORTAL link at the top right, as shown in Fig. 1.

Fig. 1

From the Azure portal, select

New | Web + Mobile | Web App

as shown in Fig. 2.

Fig. 2

The Create Web App blade displays, as shown in Fig. 3.

Fig. 3

At the App Name field, enter a name for your app. This must be unique among Azure App Services. Although you can assign a custom domain to this later, the default URL will be


where xxxx is the name you assigned to this Web App.

If you navigate to this URL (or click the hyperlink in the Overview tab), you will see a default Azure We App page.

At the Resource Group field, select "Create New" and enter a name for your resource group.

At the "OS" field, select the operating system on which you want to deploy your Web App.

Click the [Create] button to create your Web App. This usually takes less than a minute. A message displays when the App is created with a [Go to Resource] button to quickly open your Web App. (Note: You can also find your Web App by selecting "All Resources" in the left sidebar.)

The Web App Management blade displays, as shown in Fig. 4.

Fig. 4

Select "Deployment Option" on the left menu of this blade to display the Deployment Option blade, as shown in Fig. 5.

Fig. 5

Click "Choose Source" to display a list of Source repository types, as shown in Fig. 6.

Fig. 6

Select "Visual Studio Team Services".

You will return to the "Deployment Option" blade, but options specific to VSTS will now display, as shown in Fig. 7.

Fig. 7

Select your VSTS Account and Project from the dropdown. (Note: Your account and project will only appear if you have linked your VSTS project to Azure, as described here.)

Click the [OK] button to configure this automation.

It should take less than a minute to complete.

Any code currently in the project's repository will be deployed to Azure. You can see this by once again navigating to the Web App's URL (http://xxxx.azurewebsites.net).

Future code code pushed to the Team repository will also be deployed automatically to Azure.

In this article, you learned how to set up automatic deployment to an Azure Web App each time code is pushed to a VSTS project code repository.

ALM | Visual Studio | VSTS | Web
Thursday, 05 October 2017 10:48:00 (GMT Daylight Time, UTC+01:00)
# Monday, 29 May 2017
Monday, 29 May 2017 12:26:00 (GMT Daylight Time, UTC+01:00)
# Monday, 06 February 2017
# Monday, 30 January 2017
Monday, 30 January 2017 15:35:09 (GMT Standard Time, UTC+00: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.

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:

public string FirstName { get; set; }
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)
# 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";
    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 + "\""
        + "}"; 
        var httpResponse = (HttpWebResponse)Request.GetResponse(); 
        string result = "";
        using (var streamReader = new StreamReader(httpResponse.GetResponseStream()))
            result = streamReader.ReadToEnd();
        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";
    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.


  • 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)
# Monday, 07 March 2016
Monday, 07 March 2016 12:52:00 (GMT Standard Time, UTC+00:00)
# Tuesday, 16 February 2016

I spent years as a software consultant and I wrote a lot of web applications during that time.

I remember when I first discovered Active Server Pages  (which we now call "Classic ASP") and I remember how excited I was by this technology. It empowered me to write dynamic applications that the whole world could see.

When Microsoft introduced ASP.NET, I quickly embraced it and when ASP.NET evolved to MVC, I was excited to move to this new paradigm.

I even wrote a bit of JavaScript, enhancing my web applications with client-side validation and interactivity. I wrote even more JavaScript after discovering how jQuery made the DOM manipulation easier to write, debug, and maintain.

But, about 5 years ago, I stopped writing web applications. It wasn't because I disliked anything about them; it was only because my customers were looking for different solutions. So, for a few years, I wrote middleware services and web services and rich client applications and I built databases and I set up continuous integrations systems and I barely looked at web development.

But Web Development technologies did not stand still; if anything, they changed faster than almost any other area of software.

Web Development has moved largely from the server to the client. Interactions that were once handled by a form post and full page refresh are now done using Ajax calls to a web service and client-side DOM manipulation. An asynchronous callback from the server to client triggers a JavaScript function to update elements on the page, eliminating the need for a disruptive repainting of an entire page.

The user experience of a Single Page Application tends to be far superior to the older multi-page applications, so users are demanding more and developers are now writing large, complex applications that run almost entirely inside a browser.

JavaScript wasn't designed with this complexity in mind, so a number of JavaScript frameworks emerged to help developers manage this complexity. These frameworks take care of things like data binding, DOM manipulation, input validation, and separation of concerns, freeing developers to focus their efforts on business logic and other features unique to their own applications.

These frameworks help, but they come at a cost. It takes time to learn a new framework and each framework has its own set of rules and idiosyncrasies.

Even more challenging is the speed at which these frameworks are released. A year after the popularity of ember.js and backbone.js peaked, developers began flocking to Angular.js. Last year, Angular seemed to lose ground to React.js. It's hard to tell what will be the next hot JavaScript framework (Angular 2.0? Aurelia? Something else?), but the rate at which new frameworks appear is accelerating.

Of course, it is not practical to re-write every application every year, simply because you discover a new framework - even one with advantages over your existing framework of choice. And most of us don't have the time to become familiar with a new framework every few months. We have to balance the increased productivity of a new framework against the time spent learning (as opposed to building).

This is the world in which I now find myself as I return to Web Development after a half decade absence. Everything has changed and continues to change at a startling rate.

In many ways this constant innovation is exciting and energizing. But it can also be overwhelming as I try to select the appropriate tools from a plethora of options and as I spend the time and effort learning how to use these tools.

meerkats I feel like I'm in a science fiction movie where the hero departs the Earth at light speed; then returns to discover the planet is ruled by talking meerkats: All the rules have changed while I was gone and I need to adapt. Quickly.

The approach I've taken is to pick a JavaScript framework, learn it, and build an application with it. I chose Angular to start - partly because I had heard good things about it and partly because its popularity ensured I would be able to find samples, tutorials, videos, and other reference materials to assist me. Next, I'll rebuild this functionality in ReactJs, followed by some other framework, until I have a feel for the paradigms involved in JavaScript development and for the relative strengths of each framework.

You can track my progress at https://github.com/DavidGiard/tvdg and on this blog.

So far, I'm enjoying the ride.

Tuesday, 16 February 2016 14:41:04 (GMT Standard Time, UTC+00:00)
# Monday, 28 December 2015
Testing | Web
Monday, 28 December 2015 23:16:22 (GMT Standard Time, UTC+00:00)
# Monday, 16 November 2015
Monday, 16 November 2015 09:39:00 (GMT Standard Time, UTC+00:00)
# Thursday, 29 October 2015

In this screencast, you will learn 3 different ways to create an Azure Web App using the Azure Management Portal.

Azure | GCast | Video | Web
Thursday, 29 October 2015 22:42:58 (GMT Standard Time, UTC+00:00)
# Thursday, 20 August 2015

In this screencast, I show off some of the features of Microsoft Edge - the new browser included in Windows 10 - that help end users be more productive.

GCast | Video | Web
Thursday, 20 August 2015 16:14:00 (GMT Daylight Time, UTC+01:00)
# Thursday, 30 July 2015

A couple weeks ago, I was in Knoxville, TN talking with Microsoft Senior Program Manager Jeff Fritz. He agreed to record an interview with me about the awesome new features of this upcoming framework. My plan was to release it as an episode of Technology and Friends. Unfortunately, technical issues left me with excellent audio but no useable video.

Jeff did a great job and the topic is very interesting. So, given the release of Visual Studio 2015 last week and Windows 10 today, I decided to make the audio interview available here.

Enjoy: Jeff Fritz talks about ASP.NET 5


Thursday, 30 July 2015 01:39:45 (GMT Daylight Time, UTC+01:00)
# Monday, 20 July 2015
Monday, 20 July 2015 13:52:15 (GMT Daylight Time, UTC+01:00)
# Monday, 13 April 2015

Episode 361

Dave Voyles on WebGL

Monday, 13 April 2015 15:24:00 (GMT Daylight Time, UTC+01:00)
# Monday, 02 March 2015
Monday, 02 March 2015 19:44:28 (GMT Standard Time, UTC+00:00)
# Monday, 15 December 2014
Monday, 15 December 2014 14:14:00 (GMT Standard Time, UTC+00:00)
# Monday, 13 October 2014
Monday, 13 October 2014 17:36:00 (GMT Daylight Time, UTC+01:00)
# Monday, 07 April 2014
Monday, 07 April 2014 18:38:24 (GMT Daylight Time, UTC+01:00)
# Tuesday, 25 March 2014
Tuesday, 25 March 2014 01:16:00 (GMT Standard Time, UTC+00:00)
# Monday, 10 February 2014
Monday, 10 February 2014 23:24:00 (GMT Standard Time, UTC+00:00)
# Monday, 16 December 2013

Episode 296

Ward Bell on Breeze

Monday, 16 December 2013 22:58:00 (GMT Standard Time, UTC+00:00)
# Thursday, 12 December 2013

HTML5 provides a number of new APIs that developers can call from client-side JavaScript. We will review a few of them here.


Not every browser supports every new API. If you attempt to call an API not supported by the current, browser, the browser is likely to throw an exception, which could be a bad experience for your users. For Internet apps, it’s best to test if a feature is supported before calling it. Ideally, you should find an alternate way to provide similar functionality for unsupported browsers. At a minimum, though, your application should not crash.

In any event, the first step is figuring out whether the current browser supports the feature you are interested in. For HTML5 API features, the Modernizr library is a good tool to do this. You can download the latest Modernizr script from http://modernizr.com/ and you can use it in your web page by adding a script tag, pointing to the location on your server where you save the modernizer JavaScript file,  as in the example below

<script src="/scripts/modernizr-2.5.1.js"></script> 

The script tag above must appear before any script you write that uses modernizr. The script above creates an object named “Modernizr” and that object contains a lot of Boolean properties, each corresponding to an HTML5 feature and each returning true only if that feature is supported in the current browser.

For example, Modernizr.canvas returns true if the current browser supports the <Canvas> tag and its associated APIs. In practice, you can write code like the following to avoid JavaScript errors

if (!Modernizr.canvas){
    // Code that uses the CANVAS APISs
else {
    // Alternate code for older browsers


HTML5 now provides more ways to select elements than the traditional document.getElementById()

Now, you can pass the name of a class to document.getElementsByClassName () to return a set of all elements to which the class is applied.

Also, document.querySelector and document.querySelectorAll allow accept a CSS selector, such as “#Div1” as an argument and return matching elements. The difference between the two methods is that querySelector returns the first match, while querySelectorAll returns the set of all matching elements.

You can even chain together these For example, you can do the following to select all spans with the class “MyClass”:

var x1 = document.querySelectorAll (".MyClass");  

var x2 = x1.querySelectorAll ("span");  


The <canvas> tag allows you to create and manipulate images on a drawing surface. The advantage of the canvas is that you get control of these images down to the pixel level. The disadvantage is that you get control of the images down to the pixel level, which can be a lot of work.

To begin using this tool, add a <canvas> tag to your markup and set appropriate properties, such as width, height, style, and id.  A canvas is simply a container for drawing objects. You will need to use JavaScript to draw objects onto its surface.

The key to working with a canvas object in JavaScript is to get a reference to the canvas’s Context. The code below gets this reference. Similar code appears in every canvas-manipulating script I write:

 var canvas = document.getElementById("MyCanvas");
 var ctx = canvas.getContext("2d");

Once you have a reference to the canvas’s context (the ctx variable, in the example above), you can use this cccccontext to draw shapes on the canvas.

  • beginPath(): Resets the current path. Necessary if you have been using the context object to draw something and now want to begin drawing something new.
    moveTo(): Move the current postion to a given x,y position in order to begin drawing from there
    lineTo(): Draw a line from the current position to a new position
    fill(): Complete a 2-dimensional shape (if not already complete) and fill it in with the current fill color and style
    fillRect(): Draw a rectangle and fill it with color
    arc()    Draw a curve

Below are several examples of using JavaScript drawing and filling simple shapes on a canvas with the id of “MyCanvas”.

JavaScript to draw a triangle on a canvas

var canvas = document.getElementById("MyCanvas");
ctx = canvas.getContext("2d");
ctx.moveTo(25, 25);
ctx.lineTo(75, 100);
ctx.lineTo(25, 100);

JavaScript to Draw and fill a rectangle on a canvas

var canvas = document.getElementById("MyCanvas");
ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(500,0,0)"; 
ctx.fillRect(25, 150, 150, 100); 

JavaScript to Draw a circle on a canvas

var canvas = document.getElementById("MyCanvas");
ctx = canvas.getContext("2d");
ctx.arc(125,375,100,0,2*Math.PI, false);
ctx.fillStyle = "Blue";

Here are the results of the JavaScript above:



In the past, HTML defined a finite list of tags and attributes that it considered valid markup. This changes with HTML5. Now, any attribute that begins with “data-” (pronounced “datadash”) is considered valid markup. In fact, such attributes have a super power, in that you can access them in JavaScript, via the object’s data collection.

For example, if I have the following markup in my page:

<div data-firstname="David" data-lastname="Giard" id="fName"> 

, I can access the data stored with the datadash attributes via the following JavaScript:

var div = getElementById("fName");
var fn = div.data("firstname");
var ln = div.data("lastname"); 


Web storage is a feature of HTML5 that allows you to write JavaScript to store data on the client. This is useful if you want to maintain state as the user navigates from page to page or if they close the browser and return to your site at a later time.

There are two types of web storage – Local Storage and Session Storage. The difference between these two is that session storage is reset after the user closes the browser, while local storage persists between sessions.

The syntax of the two web storage types is very similar. The window object contains 2 properties – localStorage and sessionStorage to access local storage and session storage respectively. You can store data in these by assigning creating a property and assigning a value to it, as in the following JavaScript example:

var lStorage = window.localStorage;
lStorage.lastProductViewed = “Widget”;
var sStorage = window.sessionStorage;
sStorage.currentProduct = “Widget2”;
var product = lStorage.lastProductViewed; 


Geolocation is a feature that allows the browser to determine the physical location of the user. Before describing the API, it is important to understand some limitations of Geolocation.

In order to use the geolocation API, the user must turn on location tracking in their browser. When a script first make a call to the geolocation API, the browser may prompt the user for permission to turn on this feature. 

Location is determined by one or more of the following methods: IP address tracking; GPS; Wi-Fi; Cell Phone Tower triangulation; and user-defined settings. Not all these features may be available and the accuracy and precision may vary from one feature to the next, or even from one day to the next.

The API is relatively straightforward: The navigator.geolocation exposes the getCurrentPosition method, which returns a position object. The only trick is that this method runs asynchronously, so you must pass to getCurrentPosition the name of a function to call when the method returns successfully. This function will accept the return value (a position object) as a parameter. The position object contains properties, such as

You may also pass to getcurrentPosition the name of a function to call if an error occurs.

A sample JavaScript syntax is below:

navigator.geolocation.getCurrentPosition(showPosition, showError);
var coords = position.coords;
var lat = coords.latitude;
var lng = coords.longitude;
position.coords contains a number of useful properties, including latitude, longitude, accuracy, altitude, altitudeAccuracy, heading (direction of movement), and speed. 


In this article, I described some of the new JavaScript APIs introduced with HTML5.

In this series, I introduced some of the concepts and features of HTML5 and CSS3.

HTML5 | Web
Thursday, 12 December 2013 20:40:00 (GMT Standard Time, UTC+00:00)
# Wednesday, 11 December 2013

In my last article in this series, I covered a few of the new features introduced with CSS3. This article introduces some more new CSS features.


Most browser vendors began working on CSS3 features before they became full recommendations by the W3C. As a result, some implementations are specific to certain browsers. To accommodate these, it is sometimes necessary to precede a style name with a vendor prefix, as in the following example:

#title {


Below is a list of prefixes and the browser(s) for which they are intended.

Style feature Browser(s)
feature W3C Standard
-ms-feature Internet Explorer
-moz-feature Firefox
-webkit-feature Safari and Chrome
-o-feature Opera


The new “transform” style can be used to rotate skew, or scale an object. Let’s go over each of these.


The “transform:rotate” style rotates an object around its center point. It accepts an argument indicating the amount by which to rotate – positive values rotate clockwise and negative numbers rotate counter-clockwise. The example below rotates an object 15 degrees counter-clockwise from the horizontal.

#Div1 {

This is one of the styles that requires vendor-specific prefixes in order to work in all browsers. With the prefixes in place, you will need to add the following styles

#Div1 {
   -ms-transform:rotate(-15deg); /* IE  */
   -moz-transform:rotate(-15deg); /* Firefox */
   -webkit-transform:rotate(-15deg); /* Safari, Chrome */
   -o-transform:rotate(-15deg); /* Opera */

The results would look something like this:



The “transform:skew” style tilts an objects tilt an object. There are three variations of this style: “transform:skewX” (which tilts an object along the x-axis); “transform:skewY” (which tilts an object along the y-axis); and “transform:skew” (which tilts an object along both axes). The first two styles accept a single parameter, indicating how many degrees to tilt the object in the appropriate direction.  The third style accepts 2 parameters: one for the x-tilt and one for the y-tilt. Positive arguments skew an object up or to the right; negative arguments tilt it down or to the left.

This style still requires the vendor-specific prefixes to make it work on all browsers.

An example is below

    transform: skewX(150deg);
    -ms-transform: skewX(150deg);
    -moz-transform: skewX(150deg);
    -webkit-transform: skewX(150deg);
    -o-transform: skewX(150deg);

This will skew Div1 similar to the following



The “transform:scale” style and its variations resize an object. There are three variations of this style: “transform:scaleX” (which resizes an object horizontally); “transform:scaleY” (which resizes an object vertically); and “transform:scale” (which resizes an object along both axes). These styles all accept a parameter to indicate the factor by which to resize the target selected object or objects. A factor greater than 1 will make an object larger, while a factor below 1 will shrink the object.

This style is ideal for event filter selections, such as “:hover”, which is applied when the user move his or her mouse over an object.

The “transform:scale” style still requires the vendor-specific prefixes to make it work on all browsers.

An example is below

#Div1: hover
    transform: scale(factor);
    -ms-transform: scale(factor);
    -moz-transform: scale(factor);
    -webkit-transform: scale(factor);
    -o-transform: scale(factor);


The “animation” style allows you to transition from one style to another and to control how and how long that transition takes place. This is done by referencing a keyframes declaration that lists the styles and how the transition should occur. In the following example, the “blackgraywhite” keyframe defines the background color of an object changing from black through various shades of gray to white.

@keyframes blackgraywhite
    0%   {background: #000000;}
    25%  {background: #777777;}
    50%  {background: #aaaaaa;}
    75%  {background: #dddddd;}
    100% {background: #ffffff;}
 animation:  blackgraywhite 8s;

Applying the “animation: blackgraywhite” style to Div1 causes it to start out black and slowly transform to white. The entire transition lasts 8 seconds, thanks to the parameter at the end.

We can reverse the transition (from white, back to black) by adding the optional “alternate” argument and we can keep this transition going forever by adding the optional “infinite” argument.

 animation:  blackgraywhite 8s infinite alternate;


Transitions are similar to animations in that you can define how long it takes to apply a style; however, they apply to other applied styles and they are typically in response to user event filters, such as “:hover”. By default, when such a style is applied (when the user moves the mouse over an object), the new style is applied instantly. To apply a transition, define two style sets and add the “transition” style to the first one. The transition allows arguments to specify how long a transition will take and what to which styles the transition applies.  The sample below tells the browser to change green text on a white background to white text on a green background and to take 2 seconds to make this transition.

#Div1 {
    background: white;
    transition: all 2s;
#Div1:hover {
    background: green;


In this and in the previous article of this series, we covered many of the new features of CSS3.

HTML5 | Web
Wednesday, 11 December 2013 20:28:00 (GMT Standard Time, UTC+00:00)
# Sunday, 08 December 2013

NOTE: If you are unfamiliar with Cascading Style Sheets, please check out my earlier article on the basics of CSS.

Cascading Style Sheets (CSS) have been around for years. They contain styling information to apply to a web page and they are a recommended way to separate content from layout. The Worldwide Web Consortium (W3C) released a new set of CSS recommendations – known as “CSS3” – at about the same time they released the HTML3 recommendations, so these two specification sets are often spoken of together. CSS3 adds a number of new and useful selectors, selector filters, and styles to provide more flexibility in styling web pages.


CSS3 adds a number of filters to refine selector criteria. Some of these support valid and invalid input.

For example, if a web page contains an input textbox with the “required” attribute, that textbox is invalid until the user types something into it. We can specify a different style for valid versus invalid input, using the “:valid” and “:invalid” selection filters, as shown below

input:invalid {
    border:3px solid red;
 input:valid {
    border:3px solid gray;
<input type=“textid=“FirstNamename=“FirstNamerequired> 

In the example above, the “FirstName” textbox displays with a red border until the user types text into it.


Font types are controlled by the “font-family” style. This style accepts a list of preferred fonts for the selection.  In earlier CSS versions, a list was necessary because browsers were unable to display a font unless it was physically installed on the user’s machine. If you wanted to display text using an unusual font, you had to either convince each user to install this font locally, or convert the stylized font text to a picture.

With CSS3, you can use the “@font-face” declaration to define a server-side font; then, point the font-family style to that font. This gives far more flexibility and control when applying fonts to text.

The syntax is

@font-face {
 font-family: FriendlyFontName;
 src: url('fontname.woff') format('woff');
selector {
 font-family: FriendlyFontName;

WOFF is a common file format that contains font information. An example (using the desyrel font, found at fontsquirrel.com), is listed below:

    font-family: desyrel;
    src: url('desyrel-webfont.woff') format('woff');
    font-family: desyrel, Arial;
    font-size: 30pt;

The style above assumes that the desyrel-webfont.woff file is in the same folder as the web page being accessed. The results would look something like this:



Text shadows were nearly impossible to achieve with earlier version of CSS. Again, developers had to resort to pictures of text. But with CSS3, the “text-shadow” style accomplishes this. This style accepts 4 arguments: for the horizontal offset (positive values to the right), vertical offset (positive values down), blur (higher numbers cause blurrier shadows), and color of the shadow. The following example causes a gray dropshadow below and to the right of the text in Div1:

    text-shadow: 30pt 25pt 15px gray;

Here is sample text with that style applied:



With the CSS3 “resize” style, you can declaratively allow users to resize an object by dragging its edges. The style takes the following parameters

resize: The direction to allow resizing (none, horizontal, vertical, or both)

overflow: Always “auto”

max-width: (optional) The maximum width to which a user may resize the object

max-height: (optional) The maximum height to which a user may resize the object

The following example allows users to resize Div1 horizontally to a maximum width of 600 pixels and vertically as much as they want.

    resize: both;
    overflow: auto; 
    max-width: 600px; 


A few years ago, everyone rushed to add rounded corners to their web layouts. The problem was that this was difficult to do with the CSS of the time. With CSS3, it is straightforward to round the corners of an object using the new “border-radius” style and its derivatives.

Border-radius style rounds all 4 corners of an object; while “border-top-left-radius”, “border-bottom-left-radius”, “border-top-right-radius”, and “border-bottom-right-radius” styles each rounds only a single corner of an object. Increase the parameter value to provide more curvature to the object corners.

The following example, rounds the two left corners of Div1.

#Div1 {

The results are something like the object below



In this article, we covered a few of the new styles introduced in CSS3. In the next article, we will demonstrate a few more CSS3 features.

HTML5 | Web
Sunday, 08 December 2013 21:18:00 (GMT Standard Time, UTC+00:00)
# Saturday, 07 December 2013

The <input> tag has been around a long time and supports a number of values for the “type” attribute (“text”, “checkbox”, “hidden”, etc.) HTML5 adds a number of new allowed values to the input type attribute. These are designed to capture specific types of input data. Allowed values are

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

For example, if you want the user to enter a color value, use the following markup:

<input type="color" name="MyColor">

In Chrome, this markup renders a button that, when clicked, displays the following popup, allowing users to select the color of their choice.


Some browsers render different controls for these input types. For example, Chrome renders a popup calendar for the date type and a color picker for the color type. Browsers that don’t support custom controls simply render a textbox.

Even if no special control is rendered, the behavior of these objects is affected by the type value. Two properties – valid and invalid – were added to input tags in HTML5 and these property values change depending on the input type value and the data entered by the user. For example, if a user attempts to enter text into a <input type=“number”> control, the valid property will be set to false and the invalid property will be set to true. You can access this property either through JavaScript or through CSS, which is a good way to provide visual cues that a user has not correctly completed a form.

The new Input types are a great way to make it easier for users to input data into your forms; to restrict user input based on the expected data use; and to validate form input.

HTML5 | Web
Saturday, 07 December 2013 21:06:00 (GMT Standard Time, UTC+00:00)
# Friday, 06 December 2013

Two of my favourite new attributes to input tags are “autofocus” and “placeholder”.


The “autofocus” attribute causes the cursor to advance to a control when the page loads. This serves as a great convenience to the user, who can begin entering data into a form immediately. Previously, I would write JavaScript to accomplish this. Obviously, you should have only one “autofocus” attribute on a page. Below is an example:

<input type="text" 
    autofocus  />


The “placeholder” attribute displays text within a control without modifying the value of that control. Placeholder text disappears when a user starts typing in an input control. This is useful for offering helpful advice about what to enter in a textbox. Below is an example of an INPUT tag with the PLACEHOLDER attribute set.

<input type="text" 
    placeholder="Enter First Name"  />

In Internet Explorer 11, the markup above renders like the image below:


In some browsers (such as IE 11), the placeholder text disappears as soon as the user selects the input element; in other browsers, the text remains until the user begins typing.

In all cases, the placeholder text is never submitted with the form values. It is only for display.


In this article, we reviewed how to use two new attributes introduced in HTML 5.

HTML5 | Web
Friday, 06 December 2013 20:55:00 (GMT Standard Time, UTC+00:00)
# Thursday, 05 December 2013

HTML5 introduced a few new tags to the markup language. Below is a partial list of these tags:

  • article
  • aside
  • audio
  • canvas
  • command
  • datalist
  • details
  • embed
  • figure
  • figcaption
  • footer
  • header
  • hgroup
  • keygen
  • mark
  • meter
  • nav
  • output
  • progress
  • rp
  • rt
  • section
  • source
  • summary
  • time
  • video
  • wbr

Let’s look at a few of these new tags.


The Footer, Header, Article, and Aside tags do not affect the page rendering. Instead, they are used to organize the content of a page, making it clear which parts belong together.

The Header and Footer tags should contain summary information about the page and the site. These typically belong at the top and bottom of a page, but you will need to add styling to make this happen.

The Article tag is for a blog or newspaper-style site that contains multiple, distinct stories or articles. Enclose each story with the Article tag to distinguish it from other stories on the page. Within each article, you can specify a quote from that article or HTML that relates to that article. Do so by surrounding this HTML with the Aside tag. An example is shown below.

    <h1>Breaking News</h1>
    <p>The quick brown fox jumps over the lazy dog</p>
        <h1>Side Note</h1>
        <p>Oh, by the way</p>

These tags are examples of semantic markup, which was discussed in Part 1 of this series.


The <figure> tag is designed to enclose a picture, diagram, code-listing, or other content that stands apart from the body of a document.

The <figcaption> tag is contained within a <figure> tag and contains a caption to describe that figure. There should be at most one figcaption for each figure.

The sample below:

    <img src="babelfish.png"> 
        The mysterious babelfish

would render something like below:



When a browser is resized or when a web page is viewed at different resolutions, by default, the text on the page wraps to accommodate the new boundaries. Sometimes, this wrapping can make the text look awkward, particular when a long word is involved. The <wbr> tag can help this by splitting a word at the appropriate point.

The <wbr> tag should be inserted in the middle of a long word to indicate where it should be broken, in case it needs to move to a new line.


In the past, the only way to render multimedia in a browser was to use a plug-in, such as Flash or Silverlight. With HTML5, we now have the <audio> and <video> tags to play multimedia files natively, without the need for an external plug-in.

We can identify the media source using the src attribute in the following example:

<video src=”MyVideo.avi> 

or we can identify multiple video sources by enclosing <source> tags within an <audio> or <video> tag, as in this example:

    <source src="yyy.mp4" />
    <source src="yyy.ogv" />
    <source src="yyy.webm" />

Supplying multiple media formats is advised if you want your media file to play on multiple platforms. Since there is no universal audio or video format for all platforms, it’s a good idea to encode your multimedia files into different formats for different clients. The browser will try each format in order until it finds a supported one.

Some other useful attributes of the audio and video tags are

  • controls - When present, this attribute adds a set of controls on the page, allowing the user to start, pause, and change volume. This attribute needs no value.
  • loop - When present, this attribute causes the media file to replay after it finishes. This attribute needs no value.
HTML5 | Web
Thursday, 05 December 2013 21:40:00 (GMT Standard Time, UTC+00:00)
# Wednesday, 04 December 2013


When I think of HTML5, I’m reminded of a quote about space by one of my favourite authors –Douglas Adams. “Space,” says Adams, “is big. Really big. I mean, you may think it’s a long way down to the chemist’s but that’s just peanuts to space.” And the reason this quote reminds me of HTML5 is because HTML 5 is big. Really big. I mean you may think it’s a long way… Well, you get the idea.

The point is that HTML5 is not just one thing. HTML5 is new tags and new attribute to existing tags and new allowed values for existing attributes and new rules about tags and attributes; It’s also a rich set of new JavaScript APIs to enhance your applications; In addition, a new version of Cascading Style Sheets (CSS3) , while not technically part of HTML5, was released at the same time also by the W3C, so we often discuss CSS3 along with HTML5 and I will do so in this paper.

HTML5 is a set of guidelines released by the World Wide Web Consortium (the “W3C” for short) with input from the most popular browser manufacturers, such as Microsoft, Google, the Mozilla Foundation, and Apple.

The browser manufacturers are implementing the HTML5 guidelines at their own pace and in their own order. Due to the enormous scope of HTML5 and the rate at which users tend to upgrade to new browsers, it is unlikely that HTML5 will be on all computers for another decade. Does this mean that HTML5 is irrelevant today? Of course not! Each browser manufacturer is working furiously to implement new features into their browser and encouraging users to upgrade to the latest browser.

You as a developer can start taking advantages of these features today. The challenge, of course, is to build a web application that will use features of new browsers, but still be useable if a user connects with an older browser that does not support the new features. This backwards compatibility is known as “graceful degradation”, meaning that your application downgrades itself gracefully rather than crashing when it encounters a degraded browser. We will talk about ways of making your pages and applications degrade gracefully throughout this paper.


The W3C had several goals when defining HTML5, including Simplicity, Semantic Markup, and ???


HTML5 is simpler than earlier versions of HTML. For example, the mysterious document declaration at the top of each HTML document has been simplified from

    "-//W3C//DTD XHTML 1.0 Transitional//EN" 


<!DOCTYPE html>

This new version is simple enough that we actually have a prayer of memorizing it.

The <LINK> and <SCRIPT> tag have been simplified. When was the last time you linked to a stylesheet that was not a CSS stylesheet or added client-side script in a language other than JavaScript? I suspect  attributes and assume every LINK tag points to a CSS stylesheet and every SCRIPT refers to JavaScript? That is what the new HTML5 standard does.

Old New
<link type="text-css" rel="stylesheet" href="MyStyle.css"> <link rel="stylesheet" href="MyStyle.css">
<script type="text/javascript" src="Myscript.js"> <script src="Myscript.js">


Semantic markup refers to markup that provides meaning to the text it surrounds – meaning beyond simply show to display that text in a browser. This is an important concept as the web evolves from its original goal of a way to store, link, and share documents and pictures of cats.

Semantic markup existed to a lesser extent in earlier versions of HTML. For example, the tags <i> and <em> do the same thing visually when surrounding text: They tilt the top of each letter to the right. However, the <em> tag has some semantic meaning beyond simply telling the browser how to display text. The <em> tag indicates that the reason to italicize the text – With the <em> tag, the marked-up text is italicized to indicate that this text should be emphasized. When one reads the text aloud, one’s voice should rise a little louder or higher to indicate this emphasis. A similar case can be made for the tags <b> and <strong>.

HTML5 | Web
Wednesday, 04 December 2013 21:02:00 (GMT Standard Time, UTC+00:00)
# Friday, 29 November 2013
Back To Basics

A cascading style sheet (CSS) is used to apply styling to an HTML web page. Separating styling from markup provides cleaner markup, easier reuse of styles, and greater flexibility when maintaining a web page.

This article describes the basics of using CSS to applying styles to a web page.

Cascading style sheets are applied to a web page by either enclosing CSS syntax between a beginning and ending STYLE tag or by creating a separate file (typically with a “.CSS” extension) containing CSS syntax and linking that file to the web page, via the LINK tag. The two syntaxes are shown below:

Inline CSS:

selector {
     style-name: style-value;
tag {
     style-name: style-value;
#id {
     style-name: style-value;
.classname {
     style-name: style-value;

Link to stylesheet

<LINK REL=StyleSheet  HREF="style.css" TYPE="text/css">

The CSS syntax consists of a set of selectors, followed by curly brackets (“{” and “}”), containing a set of stylename:stylevalue pairs. For example, in the example below:

div {
     background-color: yellow;

The selector is the word “div”. It tells the style sheet to select all div tags on the page and apply the corresponding style (in this case, yellow background color) to each div.

Historically, the most common type of selectors are

  • Text, to identify a tag name and select all tags of that type (e.g., “div”)
  • Text, preceded by “#”, to identify any element on the page with a given ID (e.g., “#Div1”, which selects any element with the attribute id=“Div1”.)
  • Text, preceded by “.”, to identify any elements on the page with a given class applied to them (e.g., “.Class1”, which selects any element with the attribute class= “Class1”).

Examples of each are below:

Select by Tag


<style> div
background-color: yellow;
} </style>

HTML Markup:

<div>Life, the Universe</div>
<div>and Everything!</div>



Select by ID


<style> #MyDiv
background-color: green;
} </style>

HTML Markup:

<div id="MyDiv">Life, the Universe</div>
<div id="YourDiv">and Everything!</div>



Select by Class name


    background-color: purple;

HTML Markup:

<div>Life, the Universe</div>
<div class="CoolDiv">and Everything!</div>



Friday, 29 November 2013 20:28:00 (GMT Standard Time, UTC+00:00)
# Tuesday, 19 November 2013
Tuesday, 19 November 2013 03:06:00 (GMT Standard Time, UTC+00:00)
# Monday, 04 November 2013
Monday, 04 November 2013 18:00:00 (GMT Standard Time, UTC+00:00)
# Monday, 01 October 2012
Monday, 01 October 2012 15:32:00 (GMT Daylight Time, UTC+01:00)
# Saturday, 28 April 2012

Here is the video of Glenn Block’s presentation at the November 2011 Great Lakes Area .NET User Group (GANG) meeting. Glenn described his 2 latest projects: Web API and node.js.

Community | Video | Web
Saturday, 28 April 2012 15:59:00 (GMT Daylight Time, UTC+01:00)
# Tuesday, 03 January 2012
Tuesday, 03 January 2012 02:54:00 (GMT Standard Time, UTC+00:00)
# Monday, 09 May 2011
Monday, 09 May 2011 15:45:00 (GMT Daylight Time, UTC+01:00)
# Thursday, 07 April 2011

Mike Amundsen spoke on REST and RESTful Hypermedia at the March meeting of the Great Lakes Area .Net User Group. Here is that presentation

Thursday, 07 April 2011 16:02:00 (GMT Daylight Time, UTC+01:00)
# Tuesday, 30 November 2010

Restful Web Services Cookbook by Subbu Allamaraju

The format of Restful Web Services Cookbook is different than I’m used to. The book presents ideas in the form of a problem, a solution, and a discussion of the solution. It starts with simple concepts like HTTP verbs (GET, POST, PUT, etc.), and moves onto more complex topics, such as content negotiation and sending queries via HTTP.

Most eye-opening for me is the concept of providing in the data sent to the client links to perform related actions on the data, such as updating the record or rolling back changes to a previous version.

In my career, I typically focus on the tools of software development. This book ignored the tools to create and consume web services and focused on the format of the messages passed. It got me thinking at a lower level – about message headers and HTTP verbs – than I am used to thinking.

One hast to get past the fact that Allamaraju does not provide code for generating the requests and responses he describes. He does so in order to keep it technology-neutral and language-neutral. The reader has to apply the concepts to their own development skills in order to implement these recipes.

Restful Web Services Cookbook gave me new insight into the workings of HTTP. It took me out of my comfort zone and taught me a lot.

books | Web
Tuesday, 30 November 2010 10:07:00 (GMT Standard Time, UTC+00:00)
# Wednesday, 16 June 2010

Episode 94

In this show, Joe Wirtley discusses how he addressed the challenges in building an e-commerce site.

Wednesday, 16 June 2010 15:52:49 (GMT Daylight Time, UTC+01:00)
# Monday, 26 April 2010

Episode 83

In this interview, Eric Greene describes the advantages of using a Content Management System to rapidly build a flexible web site

Monday, 26 April 2010 16:02:50 (GMT Daylight Time, UTC+01:00)
# Monday, 05 April 2010

Episode 80

Monday, 05 April 2010 17:20:24 (GMT Daylight Time, UTC+01:00)
# Monday, 15 March 2010

Episode 77

In this interview, Mike Amundsen explains the concept of REST and how a developer can use this pattern to build web applications.

Monday, 15 March 2010 15:21:38 (GMT Standard Time, UTC+00:00)