0

SoCal Code Camp San Diego 2013

Are you a developer looking to learn new skills? Are you interested in , Best Practices, JavaScript, Web Development, ASP.NET or Ruby? Then come to SoCal Code Camp in San Diego on July 27 & July 28th! We have sessions covering these topics and more!  It’s also 100% free, you can’t beat that deal.

Code has sessions for all levels including many beginner, intermediate, and advanced presentations. 

I will presenting the following 5 sessions :

Here is a complete list of topics. I’ve gone through all the sessions and grouped them together by technology and specialization. I hope this helps you find sessions you would like to attend!


Topics:
Web Dev      Best Practices     JavaScript     ASP.NET
Databases     Agile & Project Management     Misc     Career
Ruby & Python     C# / .NET     Hardware     Testing
Windows8    |Android      Git     NuGet


Web Development
Responsive Web Design, an Introduction Part 1
Responsive Web Design, an Introduction Part 2
Bootstrap your web site with Twitter Bootstrap
Build a WordPress Blog and Photo Gallery Site in 60 Minutes
WordPress Workshop 101
Creating HTML5 Pages Using Visual Studio LightSwitch
Debugging, Troubleshooting & Monitoring Distributed Web & Cloud Applications
Introduction to Amazon Web Services
NancyFX – A lightweight web framework you didn’t know you should be using.
Simplify your services with OData
Voice Enable Mobile and Web Applications
What is Parrot?
Put your website in the cloud
Windows Azure in real life
Windows Azure Mobile Services Introduction


Best Practices
Architecting for Multiple User Interfaces
Clean Code I – Design Patterns and Best Practices
Clean Code II – Cut your Dependencies with Dependency Injection
Clean Code III – Software Craftsmanship
Clean Code with SOLID principles
Clean Code: Homicidal Maniacs Read Code, Too
Creating Collections of Entity Classes
Data Flow Architectures in Software Development Life-Cycle
Dependency Injection: A Practical Introduction
Learn the Lingo: Design Patterns
Power of Patterns: Refactoring to (or away from) Patterns
10 things Every Developer Must Know
Rock Your .NET Coding Standards (Part 1)
Rock Your .NET Coding Standards (Part 2)
Super-Charged Debugging for the New Developer


JavaScript
An Introduction to MVVM featuring Knockout JS
Angular JS with ASP.NET MVC and WebAPI
Beginning HTML5 Mobile Game Programming
Building a simple Glass app with Node.js and the Mirror API
Building for the real-time web with Node.js
Getting started with TypeScript
HTML5 Media APIs : Let’s build a camera web app in ASP.NET MVC!
Node, Mongo, Backbone, and Kendo UI – Oh My!
Node.js: A gentle introduction
PhoneGap in 60 Minutes or Less
Ten Groovy Little JavaScript Tips
Writing Maintainable JavaScript


ASP.NET
25 Tips and Tricks for the ASP.NET Developer
ASP.NET MVC – What a View!
Async your IIS app like a champ!
Building a Business Application in ASP.NET MVC
Creating an Orchard website on Azure in 60 minutes
Customizing Orchard websites without limit
Hack Proofing Your ASP.NET Web Forms and MVC Applications
IIS for Developers: Choose Your Own Adventure
Introduction to WCF Routing Service
What’s new in ASP.NET 4.5


Databases
10 things Every Developer Must Know
Continuous Integration for the Database
Discover SQL# (SQL CLR library)
Introduction to Big Data & Cassandra
Computing with Network/Graph Data
Introduction to Graph Databases with Neo4j
MongoDB first steps – Getting started by example
New T-SQL Features in SQL 2012
Tour of Big Data


Agile & Project Management
Agile Games: Games with Cards and Dice
Agile Success Metrics!
Best Practices for Agile Work Management
Best Practices for Estimating Projects
Best Practices for Requirements Gathering
Managing Self-Organizing Teams – An Old School Management Dilemma
Moving Your Organization into the Fast Lane – Delighting Your Customers
Moving Your Organization into the Fast Lane – Making Scrum Stick
Project Manager’s Survival Guide


Misc
BizTalk Server Best Practices
Building an IT support team people like!
Building xRM solutions with Microsoft Dynamics CRM
Intro To Not Sucking At Presentations
Machine learning made simple
Search Engine-Building with Lucene and Solr
Team Build In TFS 2012
Video Streaming on iOS: The Gory Details


Career
Raising your first $1M from angel investors and VCs for your startup
Screen casting 101 – Become a millionaire!
From CodeMonkey to CEO: Breaking out of the cubicle farm
Rock Your Technical Interview (Part 1)
Rock Your Technical Interview (Part 2)


Ruby & Python
A Hands-On Introduction to Ruby
Getting started with Python
Getting Started with Ruby on Rails
Introduction to Flask


C# / .NET
Serialization and Formatting in .NET
F# for the C# developer
T, Earl Grey, Hot: Generics in .NET
Aspect Oriented Programming and You


Hardware
Getting Started with Raspberry Pi
OPEN SOURCE HARDWARE HACKING


Git
Git & GitHub for Distributed Development
Intro to Git Concepts (for SVN users, and DVCS noobs)


Testing
For those about to Mock
Transformation Priority Premise: TDD Test Order Matters


Windows8
10 Things I learned from building a Windows 8 App
Windows 8 (Windows Store) HTML/JavaScript Apps for the ASP.NET Developer


Android
Android talks to .Net via ksoap2
Build a cross-platform app for iOS, Android, and Windows by leveraging useful frameworks


NuGet
Getting Groovy With Nuget

0

Loading Client Side Templates in Angular JS

One of the features of Angular JS is client routing. This enables us to create single page applications (SPA) by which our site loads an initial html page and every subsequent page is brought in dynamically without triggering a full page refresh.

I was giving a presentation on Angular recently and someone in the audience asked if the templates where downloaded when the web app started, or dynamically as the user navigates to a specific page. This is a great question because on a complex multi-page site, you don’t want to load the templates upfront.

So I decided to investigate. Fortunately, this was an easy thing to do using the Chrome Dev Tools. As part of my talk I built a small sample app called Tweet Save. This web app allows you to search twitter and then bookmark tweets you like. You can see it’s source on github.

The saved tweets page relies on a template called “SavedTweets.html.” Inspecting the network tab on initial load doesn’t show any reference to SavedTweets.html. After clicking the link to the saved tweets page I see the following in my dev tools:

Dev tools

The template is only loaded when the user requests that route from my route provider. If navigate back to the initial search page, then again to saved tweets the two files above will not be downloaded again. That’s because at this point, angular already has the template it needs for that route.

so there we have it. Angular only loads html templates on demand when a user requests that specific route.

0

Nested Directive Virtual Groups in Angular JS

In my last post I went over a new unreleased feature of Angular JS, Directive Virtual Groups. This allows you to append -start to a directive allowing it to span multiple DOM elements. You can terminate the multi-DOM element by applying -end to the same directive. For example:

<tr ng-repeat-start="order in orders">
  <td>{{order.description}}</td>
</tr>
<tr ng-repeat-end>
  <td>{{order.number}}</td>
  <td>{{order.price}}</td>
</tr>

This would iterate over a series of orders and render two TR tags for each order. The ng-repeat-start indicates the ng-repeat condition as well as a starting flag for angular. Everything following that (including it’s TR tag) is part of the template, until it reaches a ng-repeat-end. That element is then included and is considered the terminating element.

Well what about multiple -start and -end tags nested? I decided to try to play around with ng-click in addition to ng-repeat. Imagine if we wanted to make only the number and price table cells clickable. We want those cells to call a function named ‘calculate’. I could easily modify the above example to be:

<tr ng-repeat-start="order in orders">
  <td>{{order.description}}</td>
</tr>
<tr ng-repeat-end>
  <td ng-click-start="calculate(order)">{{order.number}}</td>
  <td ng-click-end>{{order.price}}</td>
</tr>

While this may seem complicated, the syntax basically says

  1. start the repeat process at the first TR tag
  2. terminate the template at the second tag (where ng-repeat-end) comes in
  3. In the second TR tag, start defining a clickable region ng-click-start
  4. Apply click region to first and second TD until ng-click-end is found

Notice how I only defined the target of the ng-click once, but both elements are now clickable and will call the calculate method. Pretty cool and DRY!

As a reminder, this feature is in the code base but has NOT made it to the stable release of Angular. So it might not work for you unless you have the latest build form their Github repository.
works on my machine

8

Angular JS Directives – Repeating over multiple elements

I was watching a video from NDC featuring a cage match between Ember JS and Angular JS. Tom Dale and Rob Connery both did a good job of representing Ember and Angular respectively. At one point, Tom showed a feature of handlebars (which Ember uses for templating) that allowed him to iterate over a javascript array and for each element render out two html TR (table row) tags. This is easy to do in Ember because handlerbars uses a #each template and you can basically put anything you want between #each and /each like so (tom’s code from the talk follows):

{{#each orders}}
  <tr>
    <td>{{description}}</td>
  </tr>
 
  <tr>
    <td>{{number}}</td>
    <td>{{currency price}}</td>
  </tr>
{{/each}}

The result is something that looks like this (screenshot from the video):

Ember JS each example

So for each item, show the description on one line and the number and price (formatted as currency) on the next line. Pretty standard stuff for simple tabular data.

When it came time for Rob to offer rebuttal and duplicate this with Angular, he struggled and I don’t blame him. Even though I’ve done a bit of Angular and given presentations on the topic, while watching this I was stumped. You see Angular has an ng-repeat directive that allows you to iterate over a collection, much like #each. However, ng-repeat is applied to a DOM element and that element itself is used as the template for every item. To illustrate, check out this simple ng-repeat example:

<tr ng-repeat="order in orders">
  <td>{{order.description}}</td>
  <td>{{order.number}}</td>
  <td>{{order.price}}</td>
</tr>

Here we ask angular to iterate over all “orders” and for each iteration place the current item in a variable called “order”. The TR tag itself will be used as a template and anything inside of it will be part of that template also. The problem now is how do you extend this to multiple TR tags like Tom did in the Ember example? It’s not something I had seen before. So I decided to do some research and see if there was in fact a way to do this in Angular.

I came across a few posts that talked about adding the ability to use ng-repeat in an html comment (similar to how Knockout JS bindings can be used in comments), but the Angular lead turned that proposal down. I then found this page on Angular’s Git hub Page. It talks about a new feature of Angular, Directive Virtual Groups. This exactly what I needed ! :)

So how does it work? In a nutshell it’s a way to have a directive span over multiple elements by indicating a start and end. This is done by simply appending -start and -end to the directive itself. It’s actually a very nice way of doing this as it extends existing directives.

Unfortunately this isn’t the stable release of Angular, but it’s good to know that this feature is in the code base and is coming. So to play around with it I had to download the  Angular source code and build it on my machine. After that I used the newly built angular.min.js file in a sample application and I was able to write code like this:

 <tr ng-repeat-start="order in orders">
    <td>{{order.description}}</td>
  </tr>
  <tr ng-repeat-end>
    <td>{{order.number}}</td>
    <td>{{order.price}}</td>
  </tr>

This new sytax allows us to take the repeat binding and extend it over two html elements, or any number of elements between -start and -end. If I included a 3rd row in between those TR’s, it would rendered as well.

I think this is a great addition to the framework and I love how it’s implemented as an extension to directives and really highlights the good architecture and separation of concerns you can get. Directives are complicated, but what they do offer is a clean way to isolate functionality and to build reusable components that can be composed on a page, giving the application developer greater power and flexibility

0

Windows 8 Unleashed Irvine : Recap and Contest Results

Yesterday I had the pleasure of hosting a Windows 8 Unleashed event in Irvine.  It was a fun filled day where the attendees got to learn how to build apps for Windows 8, work on labs and participate in a contest.  I had an amazing group of volunteers help out including Tim Strimple (Microsoft Startup Evangelist) , Dustin Davis (C# MVP) and Daniel Lewis (Technical speaker). Dustin even brought some swag from Pluralsight to give out! I know the audience appreciated that.

DSC_0700.JPG (494×328)

We had some folks that were new to Windows 8 and by the end of the day they had a good understanding of the platform. We also had some Windows 8 Unleashed veterans, including Dan Dickerson who showed off his Windows 8 app that controls a telescope and allows users to easily find objects in the night sky. It was a really neat app!

Photo

Six teams participated in the competition and in the end we had 3 winners. Chris Daden came in 1st place for his app Selective News. Angella Allen and Michael Luna came in 2nd for their app Bill Monitor and Jamin Messenger came in 3rd for his app Speed Plus. Congrats to the winners and to all who participated, I look forward to seeing all their completed apps.

Here’s an Album featuring photos from the event!

Thanks to everyone that attended and was a part of the event. Thanks to our volunteers who helped make this a truly memorable experience and last but not least, a big thank you to our sponsors Microsoft and Crescent Solutions for making this event possible.

0

Windows 8 Unleashed

 

The Microsoft Windows 8 Unleashed program is back and I’ve volunteered to help out again. On Saturday 5/11/2013 the good folks at Crescent Solutions will be hosting a FREE all day Windows 8 event. This is a full day of great content, hands-on labs and a contest. It’s sponsored by Microsoft and Crescent Solutions.

I’ll be presenting and covering app development on the Windows 8 platform. It’s a great introduction to app development on Windows8. You’ll get a chance to learn about the platform, work on some guided labs and ask questions to experienced app developers. We’ll have a few volunteers on hand who can answer your questions. There’s going to be food, prizes, a free ebook and an app development contest! This should be a really fun event and a great place to network and hang out with other developers. Every attendee will also get a free ebook from O’Reilly and every attendee who build an app could be eligible for a monthly sweepstakes.

Here’s the agenda for the day:

Session I – Overview

  • Modern Style Apps Overview
  • Developing Modern Style Apps
  • Working with Controls
  • Implementing Navigation

Session II – Location and Data

  • Working with Location
  • Data Binding
  • Roaming
  • App Bar

Session III – Metro Principals

  • Live Tiles & Toast
  • Contracts
  • Full, Fill Snap and Portrait Views

After the sessions, you’ll get a few hours to work on an app for the contest. You can either go it alone or form a team, it’s your choice. The following prizes will be awarded:

  • 1st Place:  $300 Gift Card
  • 2nd Place: $200 Gift Card
  • 3rd Place:  $50 Gift Card

I hope to see you there!

Registration: http://win8unleashedoc.eventbrite.com/

 

 

 

5

2013 Microsoft MVP Award

Today I received an email informing me that I have been awarded a Microsoft MVP award in the category of ASP.NET/IIS. This is a very proud moment for me and I am ecstatic to have my community contributions recognized.

For those unfamiliar with the program, it’s an award given by Microsoft to community leaders and contributors. There are only about 4000 MVP’s world wide so it’s an honor for me to be a member of this group of talented individuals.

You can read more about it here:

http://mvp.microsoft.com/en-US/about-mvp/Pages/default.aspx

Over the past year I spoken at many user groups, helped run the Los Angeles .NET user group, organized and spoke at a JavaScript conference, joined the SoCal Camp leadership team and much more.

I truly enjoy contributing to the technical community. In 2013, I plan to continue speaking at user groups and code camps. I am also planning to blog more, learn more, contribute to conferences and developer events and ultimately helping as many developers as I can.

I’m going to be adding a few blog posts soon on ASP.NET MVC, Windows 8, Windows Phone 8 and more. I’m looking forward to contributing and doing as much I can to help my fellow developers.

mvp

0

Introducing KendoUI for Web & Mobile Development @ SoCal .NET Architecture Group

Today I will be speaking at the SoCal .NET Architecture users group on Kendo UI.

Here is a description for the talk:
In this presentation we’ll look at KendoUI, a javascript framework for building web and mobile applications. We’ll cover all the three major components of the framework, Web, Data Viz and mobile. I’ll show you how to build compelling UI’s using KendoUI’s many web and mobile widgets. We’ll build a sample website using many of the webcontrols, then we’ll convert it to a mobile application using kendoui’s mobile controls. In addition we’ll look at how you can use KendoUI in an ASP.NET MVC application.

Slide deck:
https://speakerdeck.com/u/hattan/p/kendoui-for-web-and-mobile-developent

Code sample for Web & DataViz:
https://github.com/hattan/KendoUIDemo

Mobile code sample:
https://github.com/hattan/kendouimobiledemo

KendoUI Resources:
https://docs.google.com/document/d/1fwND8d9rIlG4eKjyQ5SaFWjstKV63vEFL4ht_90UPVw/edit?pli=1

I hope to see you there!

2

Knockout JS @ The San Francisco .NET Developers User Group

Last night I presented at the San Francisco .NET Developers User Group on Knockout JS with ASP.NET MVC4 and Web API. I had a great time there and I wanted to thank everyone for inviting me to speak to the group.

Here are my slides from the presentation.

Here is the Contact List application we built.(Please note that the demo expects SQL Server express to be running. If you want to use another version of SQL Server, then you just have to add a connection string in Web.Config that matches the name of the data context.)

You can find Knockout JS demos and examples here:
http://knockoutjsdemo.apphb.com/

The official Knockout JS website is here:
http://knockoutjs.com/

Additional Resources:
Knock Me Out – This is a great blog by one of the contributors to Knockout JS. Lots of material is covered.

Web API Serialization
Web API Paging and Filtering

sf-net

6

ASP.NET MVC– Display the contents of a CSV file in a Telerik Grid

In this article I’m going to show you how to build an ASP.NET MVC web application that will allow you to upload a CSV file and display the results in a Telerik Grid. We’re going to be using two libraries to help us with this task.

Let’s start by downloading and installing the Telerik Extensions, you can either download a free trial or use the open source version of the extensions. Be sure to read the license on the open source version before using it in your applications.

The library add a Visual Studio extension  as well as new project types. This makes it very easy to use the Telerik extensions in a new project.

After downloading and installing the extensions, let’ go ahead and create a new Visual Studio ASP.NET MVC3 Web Application called “CsvToGrid”.

image

Because we installed the Telerik Extensions for ASP.NET MVC we should see a new Project Template for Telerik MVC Web Application. Let’s select that.

image

Go through the Telerik Project Configuration Wizard and select all the default options. This will create the project and preconfigure all the necessary settings needed by the extensions. This includes configuration options in the web.config file and referencing JavaScript and css files.

After this let’s go ahead and install LinqToCsv. Right click on the references folder and select “Manage NuGet Packages” then search for “LinqToCsv” and install it.

image

    We need to define a sample csv file. Let’s add a new file called people.csv to our desktop with the following data:

FirstName,LastName,Age,State
John, Smith, 35, CA
Mike, Jones, 29, AZ
Susan, Baldwin, 45, CA
Alex, Johnson, 32, WA

As you can see, it’s a simple comma delimited file that represents people and includes their first name, last name , age and state.

We also need a class to represent this data. Let’s add a Person class to our models folder. Add a new class and name file Person.cs The contents of the file should look like this

public class Person{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public int Age { get; set; }
    public string State { get; set; }
}

Now let’s modify the home controllers Index view to include a form an a file upload html control. Replace the contents of the file “Index.cshtml” in the Views/Home folder with the following:

@{

ViewBag.Title = “Home Page”;

}

@using (Html.BeginForm(“Index”, “Home”, FormMethod.Post, new { enctype = “multipart/form-data” }))

{

<input type=”file” name=”file” />

<input type=”submit” name=”btnSubmit” value=”Upload!”/>

}

Now let’s add some code to the controller so that we can save this file to disk. Let’s replace the action methods in HomeController.cs with the following two action methods:

public ActionResult Index(){

return View();

}

[HttpPost]

public ActionResult Index(HttpPostedFileBase file){
if (file.ContentLength > 0){

var fileName = Path.GetFileName(file.FileName);

var path = Path.Combine(Server.MapPath(“~/App_Data/”), fileName);

file.SaveAs(path);

TempData[“file”] = path;

}

return RedirectToAction(“Grid”);

}

Here we’ve added a second Index action method that takes in an HttpPostFileBase, this object will hold the reference to the uploaded file. Now it’s important to note that the name of the input parameter (“file” in our case) has to match up with the name of the html control. If the names don’t match up, the input parameter will come through as null.

In the action method we copy the file to the App_Data folder then we save the file path in TempData and redirect to a new Action called Grid.

The Grid action method will be responsible for reading data from the csv file and passing it to the view so that it can be rendered in telerik grid.

Add the following using statements to the top of your HomeController class

using CsvToGrid.Models;
using LINQtoCSV;

Now add the Grid action method to the home controller.

public ActionResult Grid()
 {
     string file = TempData["file"] as string;
     if (file == null)
     {
         return RedirectToAction("Index");
     }

     CsvContext cc = new CsvContext();
     List<Person> people = cc.Read<Person>(file).ToList();

     return View(people);

 }

This action method reads the file path from tempdata, then uses LinqToCSV to convert the data in the file to a collection of “Person”. This data I then returned to the view.

In the view we need to show this data as a Telerik Grid. Let’s define the view as a strongly typed view of type List<Person>. Let’s also add the code for the Telerik Grid. The complete view code should be

@model IEnumerable<CsvToGrid.Models.Person>

@{
    ViewBag.Title = "Grid";
}

<h2>Grid</h2>

@(Html.Telerik().Grid(Model).Name("PeopleGrid"))

Run the application by pressing alt-F5. On the home screen select the csv file we created earlier and click the upload button. The data within the csv file should now appear as data in your telerik mvc grid.

image

In part two of this post I’m going to show you how to customize the application so that you deal with csv data that doesn’t include a header row. You can download the complete source code for this demo site here.