My Time As a Microsoft MVP

In the early 2000’s, I was working for a State agency in Pennsylvania in a .NET development role.  I’ve always been fascinated by programming on many levels: I really liked to learn the nuts and bolts of the framework, as well as the ability to create something – albeit digitally.  I tried to learn as much as I possibly could; I’d read tech books, read web sites, and post on forums.  I was pretty active specifically on the ASP.NET forums.

Sometime in 2007, I received an email from Microsoft in regards to the MVP program!  I was shocked when I got the email.  I spent a lot of time there, posting questions in hoping to gain insight and trying to provide answers to assist the technical community.  When the honor was confirmed, I was really appreciative of it; it was a great honor.

Fast forward 10 years later:

mvptenyears

I’ve been very blessed individual.  I’ve gotten to offer my time and skills to the community.  I’ve gotten to meet individuals at Code Camps or Give Camps.  I’ve gotten to write for DevProConnection Magazine, ASP Alliance, DotNetSlackers, DotNetJohn,  this blog, and other places.   I considered speaking for Pluralsight, but I’m not the greatest speaker.  Additionally, I’ve gotten to be involved in interesting projects over the years, as I shifted from government work to consulting work to product development.  I’ve gotten to help analyze and solve other people’s technical (and sometimes personal) problems.

Life really comes at you fast some times.  It doesn’t seem like long ago that our 3 children entered our world, but the facts remain the same (ages 11, 9, 7).  We adopted our beautiful daughter from China, and we are in the process of adopting our son (also from China).  My kids have been involved in school plays, baseball games, soccer practices and games, basketball games, holiday events, church activities, school events and more.  As my career progressed, my workload got bigger, my involvements became greater, and my stresses increased.  I burned out a few times along the way, my free time dwindled between work, an ever growing family, and general increased demands.

Ten years was my run as a Microsoft MVP.  I was informed that I will not be renewed.  Microsoft was great to me and gave me many opportunities during that ten years; I am forever grateful for that.

Advertisements

Intro to Windows 8 Store Apps Using JavaScript and HTML

Windows 8 is the next great operating system for Microsoft. I detailed the changes that the operating system is bringing to the common consumer. As you can see, it comes with quite a few user interface changes. However, for the developer, the focus on development shifts away from developing traditional windows applications, and moves toward developing a windows store application. This is a big paradigm shift that has an interesting twist. Applications that were previously only for mobile devices are now able to be installed on a laptop or desktop computer too. It brings about a lot of interesting possibilities.

Interestingly enough, Windows 8 or RT development supports both XAML and HTML/JavaScript. Each has it’s pros and cons, which I really don’t want to get into here. I’ve decided to use JavaScript templates for application development for this blog series. I’m choosing HTML and JavaScript for several reasons; it’s easy to layout and style, it’s easy to work with and I can personally develop an application rather quickly. It’s familiar to me as an ASP.NET and web developer, and it resembles building an application with PhoneGap. PhoneGap is another HTML/JavaScript framework that supports Windows 8 and other platforms. Transitioning from an HTML/JavaScript Windows 8 application to a PhoneGap application will be easier.

To create a new application, go into Visual Studio 2012 (within Windows 8) and select add a new project. Navigate to the JavaScript category, then Windows Store. Select one of the 5 existing templates to choose from, depending on the layout you need. Each template comes with a different set of files already defined for you; however, if you want to start from scratch, choose the Blank Template.

When you create your application, there are a few items to note. In the root of the application is default.html, the default page of that application that is the root container page for the single page application (SPA) template. This is the page always loaded into the application. With a single page application template, content can be loaded within the page, similar to an include file or a user control in ASP.NET. Page content consists of the following file types: .html, .js, and .css. The HTML file is the view that presents the content, whereas the JS file is the controller of sorts, similar to an MVC pattern implementation, leaving the CSS file to manage the user presentation. Each of the pages typically resides in the pages folder.

Let’s take a look at a sample application’s page. Below is a Login page that I used for an application. The easiest part to start is the HTML of our login page.  To create a new page, select Add > New Item > Page Control.  This creates the HTML, CSS, and JavaScript for you.  I’ve modified the default to look as the following:

<html>
<head>
<meta charset=“utf-8” />
<title>Login</title>
<link href=“//Microsoft.WinJS.1.0/css/ui-dark.css” rel=“stylesheet” />
<script src=“//Microsoft.WinJS.1.0/js/base.js”></script>
<script src=“//Microsoft.WinJS.1.0/js/ui.js”></script><link href=“Login.css” rel=“stylesheet” />
<script src=“Login.js”></script>
</head>
<body>
  <div class=“Login fragment”>
<header aria-label=“Header content” role=“banner”>    <button class=“win-backbutton” aria-label=“Back” disabled type=“button”></button>
    <h1 class=“titlearea win-type-ellipsis”>
      <span class=“pagetitle”>Login to PrayerLink</span>
    </h1>
  </header>
<section aria-label=“Main content” role=“main”>    <table>
     <thead></thead>
     <tbody>
<tr>
<td>
User Name:
        </td>
<td>
<input type=“text” id=“UserName” name=“UserName” />
</td>
</tr>       <tr>
<td>
Password:
</td>
<td>
<input type=“password” id=“Password” name=“Password” />
</td>
</tr>
<tr>
<td colspan=“2”>
<button id=“LoginSubmit”>Login</button>
</td>
</tr>
</tbody>
</table>

  </section>
</div>
</body>
</html>

A lot of this code sample is provided standard from Microsoft.  The header and core wrapper is automatically provided for you.  Even within the page’s content, you can see it defines all of the styles and CSS content the page uses.  Notice it provides the header of the page using pre-defined styles defined in the ui-dark.css stylesheet, and some other core wrapping content.

All of the login’s custom content is within the section element, with the role of main (for you JQuery enthusiasts, that would be “section[role=’main’]” :-D). Notice I have a form with standard input elements. The Windows 8 framework styles these components to have a much better appearance than the standard textbox.

WinJS.UI.Pages.define(“/pages/Login/Login.html”, {// This function is called whenever a user navigates to this page. It// populates the page elements with the app’s data.ready: function (element, options) {

var btn = element.querySelector(“#LoginSubmit”);

btn.addEventListener(“click”, hnd);

},    unload: function () {

// TODO: Respond to navigations away from this page.

},

updateLayout: function (element, viewState, lastViewState) {

///

// TODO: Respond to changes in viewState.

}

});

The page class defines certain event handlers such as ready, similar to JQuery’s ready event; unload, which runs when the page is unloaded; and updateLayout, a method that runs when the layout needs to be updated as the view changes modes between full screen to snapped to landscape, etc.

As developers, we are used to defining events in markup that point to an event handler. Rather than using this approach, it’s advisable to use the addEventHandler method on the element, which can attach an event handler using a defined method, or with a dynamic function, like the following example:

var btn = element.querySelector(“#LoginSubmit”);btn.addEventListener(“click”, hnd);

Here the “hnd” function fires when the button is clicked. On click of the button

var hnd = function (sender, e) {var user = document.querySelector(“#UserName”).value;var pwd = document.querySelector(“#Password”).value;.

.

}

In this example, the handler of the button grabs the reference to the elements using document.querySelector, using a CSS syntax for finding the elements by it’s ID. Once the element is retrieved from the DOM, we can then access the input element’s value via the value property.

This is a brief intro to windows 8 apps; I plan to go into more detail in future blog posts.