# Monday, 30 December 2013
Monday, 30 December 2013 17:31:02 (GMT Standard Time, UTC+00:00)

12/29
Today I am grateful for a day in East Lansing with my son Tim.

12/28
Today I am grateful that I've been able this month to get rid of so much of the junk I've acquired these past 10 years.

12/27
Today I am grateful that 4 of my apps were approved by the Windows Store this morning.

12/26
Today I am grateful for Christmas dinner at my sister's house, surrounded by my family.

12/25
Today I am grateful that God loved us enough to send us his only son. Blessed Christmas, my friends.

12/24
Today I am grateful that my friend John, from whom I hadn't heard in years, called me out of the blue yesterday for no reason. We talked for over an hour.

12/23
Today I am grateful that the ice storm that paralyzed much of the state missed my neighborhood.

12/22
"Why were you late tonight, son?" "On my way here, I saw a woman begging on the side of the road. She was standing in the freezing rain with no jacket. So I went home and picked up my old jacket and drove it back to give it to her." "OK, I guess that's a pretty good excuse." That is what I am grateful for today.

12/21
Today I am grateful to have both my sons home for the holiday season.

12/20
Today I am grateful for the opportunity last night to speak at my first Demo Camp Lansing.

12/19
Today I am grateful for pizza, drinks, and fellowship at the #MIGANG Holiday Party last night.

12/18
Today I am grateful to have my son Tim home for a few weeks. It was totally worth driving 13 hours through a snowstorm yesterday to pick him up.

12/17
Today I am grateful my latest app was accepted in the Windows store.

12/16
Today I am grateful for all the stuff I sold on eBay last week, removing clutter and providing me with Christmas cash.

12/15
Today I am grateful to all those who braved the snowstorm yesterday to build apps with us at the DevUnleashed Hackathon.

12/13
Today I am grateful that: 1. I was invited to 2 holiday parties hosted by 2 great organizations in Toledo - Seed Co-Working and TechToledo 2. I ran into some old colleagues I did not expect to see again. 3. Lunch with my old team at Heidtman - one of the best teams I've ever been on.

12/12
Today I am grateful for the blanket of snow surrounding my house on this sunny day.

12/11
Today I am grateful for a break in my 500-mile round-trip commute until next year.

12/10
Today I am grateful for dinner last night with old friends and for the chance to meet a few new, very interesting people.

12/9
Today I am grateful that I had the chance this weekend to apologize personally for a mistake I made years ago.

12/8
Today I am grateful for: 1. A Spartan victory, a BIG10 Championship, and a trip to the Rose Bowl 2. Being able to attend the championship game last night - one of the most exciting games I've ever seen. 3. Watching the game with my son Tim and my friends Bryan, Patrick, and John. 4. Running into old friends Debora, David, and Sue and sharing a post-game drink with them. 5. John finding us a reasonably-priced hotel room for the weekend. 6. Being able to make it back to the hotel safely after driving hundreds of miles throughout the night.

12/7
Today I am grateful that I missed the storms in southern Indiana while driving last night.

12/6
Today I am grateful I was able to find a reasonably-priced hotel in downtown Chicago.

12/5
Today I am grateful for the kindness and hospitality of Pat Patrick Affholter and their wife who opened his home to me, saving me a lot of late-night/early-morning driving.

12/3
Today I am grateful for the warm reception the um Design + Business group gave to this Spartan last night as I taught them about Data Visualization.

12/2
Today I am grateful to the team that created Doctor Who and to those who recommended this excellent show to me.

12/1
Today I am grateful for 1. A chance to spend so much time this week with my son Timmy, who was home from college on Thanksgiving break. 2. Dinner last night with my friend Bryan. 3. Another Spartan victory.

11/30
Today I am grateful for a day in East Lansing, meeting many old friends and dinner with Darlene and her family.

11/29
Today I am grateful for 1. Thanksgiving dinner with my family. 2. My cousin Kevin Gill deciding to spend Thanksgiving with my mother in Florida.

Monday, 30 December 2013 01:55:18 (GMT Standard Time, UTC+00:00)
# Wednesday, 25 December 2013

Leap2 is a search tool that allows users to enter a search word or words and submit that search across multiple places simultaneously. Results are returned from Internet search engines as well as a number of social media sites, such as Twitter, Facebook, and LinkedIn. I was surprised how quickly this cross-domain search was able to return results.

One powerful feature of Leap2 is the ability to set “Alerts”, so that Leap2 searches for something and lets you know when it finds it via an updated tile on the Windows 8 home screen.

You can download Leap2 at aka.ms/Ntmt6u

If you have written or know of a Windows 8 app you would like to see featured here, please contact me at dgiard@microsoft.com.

Wednesday, 25 December 2013 06:55:00 (GMT Standard Time, UTC+00:00)
# Tuesday, 24 December 2013

Some apps are only relevant for a short time and this is one of them. Click the radar icon in the bottom right corner and Where Is Santa sweeps the map of the Earth showing Santa Claus’s current location. On nights other than Christmas Eve, the app will notify you what Santa is doing while at the North Pole.

Click the top-right “My Home” icon and the app will zoom to your home and let you know how long you have to wait for St. Nick’s arrival.

You can download this app at Where is Santa? There is also a Windows Phone version available at Where is Santa?.

If you have written or know of a Windows 8 app you would like to see featured here, please contact me at dgiard@microsoft.com.

Tuesday, 24 December 2013 18:43:00 (GMT Standard Time, UTC+00:00)
# Monday, 23 December 2013
Monday, 23 December 2013 17:24:42 (GMT Standard Time, UTC+00:00)
# Tuesday, 17 December 2013

Leap2 is a search tool that allows users to enter a search word or words and submit that search across multiple places simultaneously. Results are returned from Internet search engines as well as a number of social media sites, such as Twitter, Facebook, and LinkedIn. I was surprised how quickly this cross-domain search was able to return results.

One powerful feature of Leap2 is the ability to set “Alerts”, so that Leap2 searches for something and lets you know when it finds it via an updated tile on the Windows 8 home screen.

You can download Leap2 at aka.ms/Ntmt6u

If you have written or know of a Windows 8 app you would like to see featured here, please contact me at dgiard@microsoft.com.

Tuesday, 17 December 2013 16:03: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)
# Friday, 13 December 2013
Friday, 13 December 2013 17:14:29 (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.

DETECTING BROWSER CAPABILITIES

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
} 

SELECTING ELEMENTS

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");  

CANVAS

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:

<script>
 var canvas = document.getElementById("MyCanvas");
 var ctx = canvas.getContext("2d");
</script> 

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.beginPath();
ctx.moveTo(25, 25);
ctx.lineTo(75, 100);
ctx.lineTo(25, 100);
ctx.fill(); 

JavaScript to Draw and fill a rectangle on a canvas

var canvas = document.getElementById("MyCanvas");
ctx = canvas.getContext("2d");
ctx.beginPath();
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.beginPath();
ctx.arc(125,375,100,0,2*Math.PI, false);
ctx.fillStyle = "Blue";
ctx.fill(); 

Here are the results of the JavaScript above:

image

“DATA DASH” ATTRIBUTES

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

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

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. 

CONCLUSION

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.

A WORD ABOUT COMPATIBILITY

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 {
    transform:rotate(-15deg);
    -ms-transform:rotate(-15deg); 
    -moz-transform:rotate(-15deg);
    -webkit-transform:rotate(-15deg);
    -o-transform:rotate(-15deg); 
}

 

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

TRANSFORM

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

ROTATE

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 {
   transform:rotate(-15deg);
} 

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 {
   transform:rotate(-15deg);
   -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:

image

SKEW

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

   #x
   {
    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

image

SCALE

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);
} 

ANIMATIONS

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;}
   }
#Div1
{
 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.

#Div1
{
 animation:  blackgraywhite 8s infinite alternate;
} 

TRANSITIONS

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;
    color:green
    transition: all 2s;
}
#Div1:hover {
    background: green;
    color:white
}

CONCLUSION

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)