Wednesday, September 3, 2014
New Pluralsight Course: Building Mobile Apps With the Ionic Framework and AngularJS

I’m pleased to announce that my latest Pluralsight course has been released: Building Mobile Apps With the Ionic Framework and AngularJS.

I’ve been building cross-platform mobile apps for a while now and the Ionic Framework is the most exciting mobile framework I’ve ever worked with. It’s built on top of AngularJS so all of your pre-existing Angular knowledge will transfer. Many of the concepts are similar to Bootstrap so you can almost think of Ionic as “Bootstrap for Mobile.”

This is a code-focused, demo-heavy course with a focus on building apps. Throughout the course, I build an app used to organize the schedule for basketball leagues/tournaments – so you’ll see an app built from start to finish.

Course Modules

  1. Introduction – In this module, I’ll introduce Ionic and show a preview of the app we’ll be building.
  2. Getting Started with Ionic – I’ll start by showing the Ionic command line features and show how you can run an app in the browser, emulator, and on the mobile device itself. We’ll also cover setting up your development environment.
  3. Navigation and Routing – Here I introduce Ionic components for navigation including headers, footers, and menus. I also show the Angular UI Router.
  4. Ionic Components – In this module I’ll show some of the core Ionic components including Lists, Grids, Cards, Form controls, Popups, and more.
  5. Data and Caching – Here we incorporate HTTP calls, promises, and caching for offline scenarios.
  6. Mapping – In this module, I incorporate mapping into the app including the ability to get driving directions.
  7. Customizing Ionic – Here I show how to customize Ionic with custom directives and custom SASS.
  8. ngCordova – ngCordova is a great extension to your Ionic development with puts an AngularJS-friendly wrapper around the base Cordova library. This enables easy access to device capabilities like the Camera, Barcode Scanner, GeoLocation, and more.

The following is the official description of the course:

The Ionic Framework is a tremendous step forward for quickly building Cordova-based mobile apps. Built on top of AngularJS, developers are able to leverage all of their pre-existing AngularJS skills when working with the Ionic Framework, considered by many to be the "Bootstrap for mobile." In this course, we will see how to quickly get up and running with an Ionic app in seconds. We will then cover navigation and routing, followed by demonstrations of all the primary Ionic components. We will also cover data and caching for offline functionality, as well as mapping and providing driving directions. We will finish with a review of ngCordova to easily access native device features such as the camera, barcode scanner, and more. By the end of the course, you'll be able to start building your own mobile apps using the Ionic Framework and AngularJS!

If you’re a fan of AngularJS and you are looking for a fun way to quickly build robust mobile apps, then I encourage you to check out my latest course on the Ionic Framework with AngularJS!

Posted On Wednesday, September 3, 2014 1:03 AM | Comments (0)
Tuesday, June 17, 2014
Microsoft Maniacs User Group – JS Patterns Code Samples

Thanks to everyone for attending my presentation last week on JavaScript Patterns at the new Microsoft Maniacs user group. The PowerPoint (which contains links to the code samples) can be found here.

Posted On Tuesday, June 17, 2014 3:22 PM | Comments (0)
Tuesday, May 20, 2014
Teach Your Kid to Code Coming to Philly.NET

Tomorrow night (Wednesday, May 21) my son and I will be at Philly.NET presenting Teach Your Kid to Code. Bring your kid out to Philly.NET with you for a fun evening! After our first talk, I’ll then be giving an introduction to TypeScript. Of any presentation I’ve ever given, this is my favorite:

Have you ever wanted a way to teach your kid to code? For that matter, have you ever wanted to simply be able to explain to your kid what you do for a living? Putting things in a context that a kid can understand is not as easy as it sounds. If you are someone curious about these concepts, this is a “can’t miss” presentation that will be co-presented by Justin Michelotti (6th grader) and his father. Bring your kid with you to Philly.NET for this fun and educational session. We will show tools you may not have been aware of like SmallBasic and Kodu – we’ll even throw in a little Visual Studio and JavaScript. Concepts such as variables, conditionals, loops, and functions will be covered while we introduce object oriented concepts without any of the confusing words. Kids are not required for entry!

Posted On Tuesday, May 20, 2014 9:41 PM | Comments (2)
Friday, March 14, 2014
New Pluralsight Course: Building Cross-Platform Mobile Apps with Telerik AppBuilder



I’m pleased to announce that my latest Pluralsight course has been released: Building Cross-Platform Mobile Apps with Telerik AppBuilder.

Telerik AppBuilder enables developers to easily build native-like Cordova-based (aka PhoneGap) apps with HTML/JavaScript. Mobile app development does not have to be as painstaking as it has been in previous years. Building hybrid mobile applications with JavaScript, HTML, and CSS enables you to deploy your app on multiple platforms without having to learn a new programming language for each platform. Hybrid apps enable you to re-use your existing JavaScript and HTML skills to quickly build compelling apps. Telerik AppBuilder is one of the best tools available today for building cross-platform applications. AppBuilder represents a giant leap forward for development tools for mobile apps. In this course, we will look at all of the major features of AppBuilder including the three IDEs, the robust AppBuilder simulator, debugging with AppBuilder, built-in project templates, working with plugins, Everlive services, source control, deployment, and more!

Telerik AppBuilder was formerly called Icenium and, in fact, when the Pluralsight course was first published (a few weeks ago) it was still called Icenium. Therefore, there are many references to “Icenium” during the course but the main titles have been changed. Anywhere where you see/hear a reference to “Icenium”, just substitute “Telerik AppBuilder” for the new name and know that it’s referring to the same thing. One other aspect is that in this course I focused more on the AppBuilder tool itself – and less on the underlying code. In potential future courses, I will focus more on the underlying code for mobile apps.

If you’ve been frustrated by the painstaking process of building mobile apps in the past and you are looking for a fun way to build iOS and Android App Store applications with HTML/JS then I encourage you to check out my course on Telerik AppBuilder!

Posted On Friday, March 14, 2014 1:57 PM | Comments (1)
Monday, March 3, 2014
CapArea – Durandal vs. Angular Code Samples

Thanks to everyone for attending my presentation last week on DurandalJS vs. AngularJS at CapArea. The code samples and PowerPoint from my presentation can be found here.

Posted On Monday, March 3, 2014 5:17 PM | Comments (0)
Friday, January 10, 2014
CMAP – DurandalJS Code Samples

Thanks to everyone for attending my presentation on DurandalJS. The code samples and PowerPoint from my presentation can be found here.

Posted On Friday, January 10, 2014 10:59 AM | Comments (0)
Monday, September 16, 2013
TriNug – Web API Code Samples

Thanks to everyone who attended my ASP.NET Web API presentation last week at the TriNug user group. Over 100 people at the presentation with standing room only, TriNug has truly built an amazing user group with enthusiastic members who asked engaging questions during the entire presentation. I really enjoyed my time there and look forward to returning in the future.

Code samples and PowerPoint can be found here.

Posted On Monday, September 16, 2013 10:31 AM | Comments (1)
Monday, September 2, 2013
New Pluralsight Course: .NET Micro ORMs



I’m pleased to announce that my latest Pluralsight course has been released: .NET Micro ORMs.

If you’re looking for an ORM that is simple, lightweight, and still lightening fast, then this course if for you. I start the course with a discussion of what a Micro ORM is and why you might want to use one. I also layout some of the common counter-arguments you hear against using a Micro ORM and examine the validity of each one.

There are many great open source Micro ORMs available today and it was not easy deciding which ones to include in the course. Ultimately, I included the following (each with its own module) based on their features and popularity:

Several of the Micro ORMs have similar functionality in terms of fully supporting all CRUD scenarios and working with SQL or Stored Procedures. However, diving deeper into the course, you’ll see many features you may not have known were supported by Micro ORMs. These types of features include working with complex objects, working with dynamic data, bulk inserts, automatic database table creation, supporting aggregates, metadata, automatic paging, joins, completely dynamic API, and more!

If you’re deciding on a Micro ORM to use for your next project, then I recommend watching all the modules in order to see the types of features that are supported by each one so you can determine the best fit for your project in terms of functionality and your personal preference. However, if you’ve already selected a Micro ORM, then you can watch the first Introduction module (it’s only 22 minutes) and then skip directly to the module for the Micro ORM that you’re using.

If you’ve been frustrated by your existing ORM, bring back some of the fun (and speed!) to your data access with .NET Micro ORMs!

Posted On Monday, September 2, 2013 9:41 PM | Comments (1)
Wednesday, July 24, 2013
Fun With the Chrome JavaScript Console and the Pluralsight Website

I’m currently working on my third course for Pluralsight. Everyone already knows that Scott Allen is a “dominating force” for Pluralsight but I was curious how many courses other authors have published as well. The Pluralsight Authors page - – shows all 146 authors and you can click on any author’s page to see how many (and which) courses they have authored. The problem is: I don’t want to have to click into 146 pages to get a count for each author.

With this in mind, I figured I could write a little JavaScript using the Chrome JavaScript console to do some “detective work.” My first step was to figure out how the HTML was structured on this page so I could do some screen-scraping. Right-click the first author - “Inspect Element”. I can see there is a primary <div> with a class of “main” which contains all the authors. Each author is in an <h3> with an <a> tag containing their name and link to their page:



This web page already has jQuery loaded so I can use $ directly from the console. This allows me to just use jQuery to inspect items on the current page. Notice this is a multi-line command. In order to use multiple lines in the console you have to press SHIFT-ENTER to go to the next line:



Now I can see I’m extracting data just fine. At this point I want to follow each URL. Then I want to screen-scrape this next page to see how many courses each author has done. Let’s take a look at the author detail page:




I can see we have a table (with a css class of “course”) that contains rows for each course authored. This means I can get the number of courses pretty easily like this:



Now I can put this all together. Back on the authors page, I want to follow each URL, extract the returned HTML, and grab the count. In the code below, I simply use the jQuery $.get() method to get the author detail page and the “data” variable that is in the callback contains the HTML. A nice feature of jQuery is that I can simply put this HTML string inside of $() and I can use jQuery selectors directly on it in conjunction with the find() method:



Now I’m getting somewhere. I have every Pluralsight author and how many courses each one has authored. But that’s not quite what I’m after – what I want to see are the authors that have the MOST courses in the library. What I’d like to do is to put all of the data in an array and then sort that array descending by number of courses. I can add an item to the array after each author detail page is returned but the catch here is that I can’t perform the sort operation until ALL of the author detail pages have executed. The jQuery $.get() method is naturally an async method so I essentially have 146 async calls and I don’t want to perform my sort action until ALL have completed (side note: don’t run this script too many times or the Pluralsight servers might think your an evil hacker attempting a DoS attack and deny you). My C# brain wants to use a WaitHandle WaitAll() method here but this is JavaScript.

I was able to do this by using the jQuery Deferred() object. I create a new deferred object for each request and push it onto a deferred array. After each request is complete, I signal completion by calling the resolve() method. Finally, I use a $.when.apply() method to execute my descending sort operation once all requests are complete. Here is my complete console command:

   1:  var authorList = [],
   2:      defList = [];
   3:  $(".main h3 a").each(function() { 
   4:      var def = $.Deferred();
   5:      defList.push(def);
   6:      var authorName = $(this).text();
   7:      var authorUrl = $(this).attr('href');
   8:      $.get(authorUrl, function(data) {
   9:          var courseCount = $(data).find("table.course tbody tr").length;
  10:          authorList.push({ name: authorName, numberOfCourses: courseCount });
  11:          def.resolve();
  12:      });
  13:  });
  14:  $.when.apply($, defList).then(function() {
  15:      console.log("*Everything* is complete");
  16:      var sortedList = authorList.sort(function(obj1, obj2) {
  17:          return obj2.numberOfCourses - obj1.numberOfCourses;
  18:      });
  19:      for (var i = 0; i < sortedList.length; i++) {
  20:          console.log(authorList[i]);
  21:      }
  22:  });


And here are the results:



WOW! John Sonmez has 44 courses!! And Matt Milner has 29! I guess Scott Allen isn’t the only “dominating force”. I would have assumed Scott Allen was #1 but he comes in as #3 in total course count (of course Scott has 11 courses in the Top 50, and 14 in the Top 100 which is incredible!). Given that I’m in the middle of producing only my third course, I better get to work!

Posted On Wednesday, July 24, 2013 4:11 PM | Comments (1)
Friday, June 7, 2013
CMAP Code Camp – TypeScript Code Samples

Thanks to everyone who attended my presentation at last week’s CMAP code camp. All code samples and slides can be found here.

Posted On Friday, June 7, 2013 3:50 PM | Comments (1)
Monday, May 6, 2013
An Editor Pattern for Knockout.js Using TypeScript Inheritance

A few months back, Ryan Niemeyer posted about a simple editor pattern for Knockout.js (anyone doing any significant Knockout development should be subscribing to his blog). Historically, I have used the “protected observable” which Ryan outlined in a post in 2011. In short, there are times when you are typing in a value and you need to ability to be able to “accept” or “cancel” user changes. The idea is that in addition the the observables for your object, you have 3 methods: 1) update() – which stores the latest values in a “local cache”, 2) revert() – which reverts the entire object back to the previous state, and 3) commit() which updates the “local cache” to the latest state.

The resulting code from Ryan’s post looks like this:

   1:  var Item = function(data) {
   2: = ko.observable();
   3:      this.price = ko.observable();
   4:      this.cache = function() {};
   6:      this.update(data);
   7:  };
   9:  ko.utils.extend(Item.prototype, {
  10:    update: function(data) {
  11: || "new item");
  12:      this.price(data.price || 0);
  14:      //save off the latest data for later use
  15:      this.cache.latestData = data;
  16:    },
  17:    revert: function() {
  18:      this.update(this.cache.latestData);
  19:    },
  20:    commit: function() {
  21:      this.cache.latestData = ko.toJS(this);
  22:    }
  23:  });

This is an extremely useful pattern that is used frequently in Knockout development. However, I wanted a way to quickly and easily apply this to any object I was working with.

Lately I’ve been working with TypeScript so my thought was to create a base class in TypeScript that any class could inherit from to give the commit/revert functionality. This actually turned out to be quite easy with TypeScript. The first step is the create a base class called “EditableItem”:

   1:  /// <reference path="knockout.d.ts" />
   3:  module EditableExample {
   4:      export class EditableItem {
   5:          private cache: any;
   7:          constructor() {
   8:              this.cache = function () { };
   9:          }
  11:          revert() {
  12:              this.updateValues(this.cache.latestData);
  13:          }
  15:          commit() {
  16:              this.cache.latestData = ko.toJS(this);
  17:          }
  19:          updateValues(data) {
  20:              this.cache.latestData = data;
  22:              for (var property in data) {
  23:                  if (data.hasOwnProperty(property) && this.hasOwnProperty(property)) {
  24:                      this[property](data[property]);
  25:                  }
  26:              }
  27:          }
  28:      }
  29:  }

The code is not much different from Ryan’s example but TypeScript let’s me work with class syntax. Notice I’m importing the TypeScript type definition file for Knockout – this can be found in the Definitely Typed repository. The revert and commit methods are practically identical. However, I wanted something more re-usable for assigning the values of the observables so I loop through each property of the data objects to do the assignment automatically. On line #24 above, the assignments happen by sending values into a function rather than assigning with the equals – this is because Knockout observables are all functions so we need to use function syntax. The JavaScript that TypeScript generates is not much different from the original example:

   1:  var EditableExample;
   2:  (function (EditableExample) {
   3:      var EditableItem = (function () {
   4:          function EditableItem() {
   5:              this.cache = function () {
   6:              };
   7:          }
   8:          EditableItem.prototype.revert = function () {
   9:              this.updateValues(this.cache.latestData);
  10:          };
  11:          EditableItem.prototype.commit = function () {
  12:              this.cache.latestData = ko.toJS(this);
  13:          };
  14:          EditableItem.prototype.updateValues = function (data) {
  15:              this.cache.latestData = data;
  16:              for(var property in data) {
  17:                  if(data.hasOwnProperty(property) && this.hasOwnProperty(property)) {
  18:                      this[property](data[property]);
  19:                  }
  20:              }
  21:          };
  22:          return EditableItem;
  23:      })();
  24:      EditableExample.EditableItem = EditableItem;    
  25:  })(EditableExample || (EditableExample = {}));


With this base class in place, it becomes a VERY easy matter to create sub-classes with this automatic functionality:

   1:  class Person extends EditableItem{
   2:      constructor(data: any) {
   3:          super();
   4:          this.updateValues(data);
   5:      }
   7:      firstName: KnockoutObservableString = ko.observable();
   8:      lastName: KnockoutObservableString = ko.observable();
   9:      age: KnockoutObservableNumber = ko.observable();
  10:  }


This enables me to primarily just concentrate on my Person class without worrying about all of the plumbing details in the base class to make commit/revert work. Now we can use the Person object as follows:

   1:  var person = new Person({ firstName: "Steve", lastName: "Michelotti", age: 21 });
   2:  person.commit(); // commit current state
   3:  person.revert(); // reverts to previous state


You can customize this example even further for your application. For example, the constructor takes a data object typed as “any” but you could constrain this further – the underlying updateValues() function can still take any value. Additionally, you could consider passing the initial data object directly to the constructor of the base class – that is, pass it to the super() function. However, there is a major caveat you need to be aware of if you are thinking of going this route. Take a look at the generated JavaScript code for the Person class:

   1:  var Person = (function (_super) {
   2:      __extends(Person, _super);
   3:      function Person(data) {
   4:    ;
   5:          this.firstName = ko.observable();
   6:          this.lastName = ko.observable();
   7:          this.age = ko.observable();
   8:          this.updateValues(data);
   9:      }
  10:      return Person;
  11:  })(EditableItem); 

Notice the call to the super() function is the first thing that is called. Then after that is the assignments to the observable fields. After that is the call to the updateValues() function. Therefore, if you want to pass the data directly to the super() function, you’ll need to explicitly assign each field as an observable before calling the super() function to avoid the fields being null when the EditableItem’s updateValues() function is trying to assign the observable values. The class would look like this:

   1:  class Person extends EditableItem {
   2:      constructor(data: any) {
   3:          this.firstName = ko.observable();
   4:          this.lastName = ko.observable();
   5:          this.age = ko.observable();
   6:          super(data);
   7:      }
   9:      firstName: KnockoutObservableString;
  10:      lastName: KnockoutObservableString;
  11:      age: KnockoutObservableNumber;
  12:  }

Ultimately, I didn’t favor this approach because it requires me to put extra lines of code in my constructor as compared to just initializing the observables inline. Either way, TypeScript enables rich scenarios for code re-use and helping better organize your JavaScript into object-oriented code.

Posted On Monday, May 6, 2013 5:32 PM | Comments (4)
Monday, April 29, 2013
dotnetConf Code Samples

Thanks to everyone to attended my presentation on Web API at dotnetConf. It was a great virtual conference and I hope to participate in more of them in the future. Code samples and PowerPoint for my presentation can all be found here.

Posted On Monday, April 29, 2013 10:03 AM | Comments (2)
Monday, February 25, 2013
Teach Your Kid to Code – BaltoMSDN

This Wednesday my son and I will be presenting “Teach Your Kid to Code” at BaltoMSDN. We did this presentation in November at CMAP and had a great turnout! We hope to see you (and your child!) on Wednesday night! This is the presentation abstract:

Have you ever wanted a way to teach your kid to code? For that matter, have you ever wanted to simply be able to explain to your kid what you do for a living? Putting things in a context that a kid can understand is not as easy as it sounds. If you are someone curious about these concepts, this is a “can’t miss” presentation that will be co-presented by Justin Michelotti (5th grader) and his father. Bring your kid with you to BaltoMSDN for this fun and educational session. We will show tools you may not have been aware of like SmallBasic and Kodu – we’ll even throw in a little Visual Studio. Concepts such as variables, conditionals, loops, and functions will be covered while we introduce object oriented concepts without any of the confusing words. Kids are not required for entry!

Posted On Monday, February 25, 2013 5:56 PM | Comments (0)
Wednesday, February 20, 2013
Sharing Code Between Windows 8 and Windows Phone 8

I just posted an article on my company’s blog on Sharing Code Between Windows 8 and Windows Phone 8. It covers portable class libraries, view model patterns, linking source files, and more. Check it out here:

Posted On Wednesday, February 20, 2013 2:25 PM | Comments (0)
Wednesday, November 14, 2012
Teach Your Kid to Code–Code Samples

Thanks to everyone who came out to our CMAP presentation last week! Despite being Election Day, we had a packed house with almost 70 people including a large number of kids. My son loved having the clip-on microphone Smile and it was great having such an enthusiastic audience.

All code samples and PowerPoint can be found here.

Posted On Wednesday, November 14, 2012 1:40 PM | Comments (1)

View Steve Michelotti's profile on LinkedIn

profile for Steve Michelotti at Stack Overflow, Q&A for professional and enthusiast programmers

Google My Blog

Tag Cloud