Devhammer Blog

Dave Ward's Advice to Programmers

Fri, 10 Feb 2012 14:56:35 GMT

In a nutshell…"write about programming."

Longer version (the quote comes from an interview Dave did with The Code Project):

"What advice would you offer to an up-and-coming programmer?

Write about programming. Start a blog, answer questions on The Code Project or Stack Overflow, or whatever else suits you, but find some way to write about programming.
I can’t count how many times I began writing about something I thought I knew thoroughly, only to find that I had to fill in several important gaps in my knowledge to write about it competently. Just as important, you have to learn topics more comprehensively to distill and teach them in simple terms. The combination of writing about programming and making that writing as clear and simple as you can is a powerful exercise."

I couldn't agree more with Dave's advice, though I would expand it to "teach about programming." Some folks enjoy writing, some enjoy making videos, some talking at user groups. All of these are fantastic ways to share what you know with others, and can also be a great forcing factor to make you fill those gaps in your knowledge.

I even recommend to folks that they present or write on topics that they know little about. Knowing that you have to get up in front of an audience and talk about a subject can be a very powerful motivator for learning that subject more deeply than you might if you were learning it for your sake only.

The full interview is worth a read, and don't miss the comments on Dave's blog post, particularly Dave's observations on distractions. I identify all too well with the ability to get easily distracted, and I think being aware of that tendency and putting in place strategies for short-circuiting it is critical if you want to get anything accomplished in this…SQUIRREL!

(h/t Thomas L. McGrath)

Curious about Windows 8 on ARM?

Thu, 09 Feb 2012 21:28:08 GMT

Then you'll definitely want to check out the in-depth post by Steven Sinofsky today on the Building Windows 8 blog.

A new Gadgeteer blog - VB Magic

Wed, 08 Feb 2012 13:54:51 GMT

Well, so the blog isn't only about Gadgeteer, but I love the title, and the fact that his most recent post shows the beginnings of an RPG (open source, no less) running on the FEZ Spider Gadgeteer board, is Awesome in my book. A definite Critical Hit.

I love Gadgeteer, and I love RPGs, so it's a great combo in my book. He's also got some good posts on Windows Azure as well, so don't just stop at the Gadgeteer posts…lots to learn here.

Gadgeteer Hello World

Tue, 07 Feb 2012 23:55:21 GMT

Introduction

Some time ago, I posted an unboxing video for something new, my FEZ Spider .NET Gadgeteer starter kit. Since then, I've been busy with both my day job, and spending a lot of my "free" time playing with my Gadgeteer stuff, learning about breadboarding, and generally diving head-first into the world of electronics hardware and microcontrollers.

At first, working in this world was quite indimidating, and I felt almost completely lost. I plugged my first board into my computer with the LCD screen hooked up, and all it showed was some debug information. OK. Where do I go from here, I asked myself?

To help other folks who might be in the same boat (whether you're a software geek just jumping into Gadgeteer, or someone experienced with other electronics work, but not familiar with Gadgeteer), I'm going to start posting some blog/video posts walking you through the basics of working with .NET Gadgeteer. Some of this information (such as breadboarding, for example, which I'll cover in a future post) may be applicable to other microcontroller environments, while some will be Gadgeteer-specific.

In this post, I'm going to take you from receiving a .NET Gadgeteer mainboard to the "Hello, World" of embedded electronics, which is flashing an LED.

Video Experiment

A side note on the videos…I'm trying an experiment here and recording and posting these videos quickly, with little or no processing or editing, in hopes that keeping the process lightweight will help me get more videos out more quickly. Set your expectations on the video quality appropriately.

I Just Got My FEZ Spider Starter Kit (or similar Gadgeteer-compatible mainboard)…Now What?

If, like me, you go the starter kit route, you've spent a little more money, but you now have a mainboard, and a bunch of modules, most of which you probably have no idea what they do, or what to do with them. DON'T PANIC! We'll start slow with the first video.

Prerequisites

Since I already have the necessary software (Visual Studio, .NET Micro Framework, Drivers, etc.) on my machine, I'm not going to show installing those as part of the video. If you're working with GHI gear, you want to head over to:

http://www.tinyclr.com/support

and download and install the items under "System Preparation" before going further. This will give you the tools and SDKs you need to get started. It may even open the local version of the Getting Started guide, but don't leap into that project just yet…watch this first:

Gadgeteer Hello World from G. Andrew Duthie on Vimeo.

That was pretty simple, and required very few lines of code. Adding a display is easy, too. We can modify the original project to also write a message out to a Seeed Studio OLED Display module with just a single line of code, thanks to the SimpleGraphics API (Mike Dodaro has a neat demo of SimpleGraphics with the GHI LCD Display module here). Here's a video of this in action:

Hello Gadgeteer - OLED edition from G. Andrew Duthie on Vimeo.

Here's my design view for the final project:

Here's the code from the final version of Program.cs:

   1:  using System;

   2:  using System.Threading;

   3:  using Microsoft.SPOT;

   4:  using Microsoft.SPOT.Presentation;

   5:  using Microsoft.SPOT.Presentation.Controls;

   6:  using Microsoft.SPOT.Presentation.Media;

   7:  using Microsoft.SPOT.Touch;

8:

   9:  using Gadgeteer.Networking;

  10:  using GT = Gadgeteer;

  11:  using GTM = Gadgeteer.Modules;

  12:  using Gadgeteer.Modules.GHIElectronics;

  13:  using Gadgeteer.Modules.Seeed;

14:

  15:  namespace HelloGadgeteer

  16:  {

  17:      public partial class Program

  18:      {

  19:          bool IsLedOn = false;

20:

  21:          // This method is run when the mainboard is powered up or reset.

  22:          void ProgramStarted()

  23:          {

  24:              // Use Debug.Print to show messages in Visual Studio's "Output" window during debugging.

  25:              Debug.Print("Program Started");

26:

  27:              GT.Timer timer = new GT.Timer(1000); // every second (1000ms)

  28:              timer.Tick += new GT.Timer.TickEventHandler(timer_Tick);

  29:              timer.Start();

30:

  31:              oledDisplay.SimpleGraphics.DisplayTextInRectangle("Hello, Gadgeteer!", 2, 2, 100, 30,

  32:                  GT.Color.Red, Resources.GetFont(Resources.FontResources.NinaB));

33:

  34:              Debug.Print("Timer Started");

  35:          }

36:

  37:          void timer_Tick(GT.Timer timer)

  38:          {

  39:              Mainboard.SetDebugLED(!IsLedOn);

  40:              IsLedOn = !IsLedOn;

  41:          }

  42:      }

  43:  }

Hope you enjoyed this quick stroll through Hello World for Gadgeteer. In my next post, I'll explore some of the many neat things you can do with .NET Gadgeteer, and the many modules that are already available (with more on the way!).

Another nice thing about Gadgeteer is that there's a thriving community of Gadgeteer enthusiasts (myself included) that hang out over on the TinyCLR.com Gadgeteer forum. If you have questions, stop by and ask, or just say hello!

If you enjoyed this post, why not share it with your friends? You can also subscribe to my RSS feed, and follow me on twitter for more frequent updates.

Upcoming Events - February 6th, 2012

Mon, 06 Feb 2012 15:41:54 GMT

Here are the events listed in Community Megaphone for the next week (or so) for the Mid-Atlantic area, as well as webcasts of interest…this list includes events imported from the UGSS event calendar, and user group events entered in Community Megaphone are also automatically synced to the UGSS event calendar:

MD

CMAP Main Meeting - Getting Started with SignalR - Kevin Griffin
Tuesday, February 07, 2012 6:30 PM, Columbia, MD
Topic: Getting Started with SignalR
SignalR is an asynchronous signaling library for ASP.NET. It's designed to help you build real-time web applications without a lot of hassle. In the past, developers would have to wire up "real-time" applications as a series of polls to a webserver, waiting for it to receive data back that was useful. This approach usually cost more in bandwidth than we wanted it to. SignalR simplifies this process, and makes it more useful for the ASP.NET developer. In this presentation, Kevin Griffin will guide you through implementing SignalR into your applications, and how you can take advantage of everything it has to offer.
Presenter: Kevin Griffin
Kevin Griffin has been working as a professional developer since 2006, where his first job was working on components for the Symantec security suites. Now Kevin works as a Technical Evangelist for ComponentOne. As an Microsoft ASP.NET MVP and ASPInsider, Kevin spends a lot of time teaching and mentoring developers to learn new technologies and to be better developers. Over three years ago, Kevin started the Hampton Roads .NET Users Group and now serves as a Senior Mentor for INETA. You can find Kevin speaking at conferences, code camps, and user groups across the country.

[ Event Details | Map & Directions | Add To Calendar ]

An Introduction to Expression Blend
Wednesday, February 08, 2012 6:30 PM, Rockville, MD
Abstract:
Microsoft Expression Blend is the premier GUI editor for WPF and Silverlight applications.In this presentation you will receive an introduction to the Blend UI and how to use it to quickly and easily build an application interface. Topics will include Configuration, Layout Controls, how to leverage Blend with Visual Studio, and more.
Bio:
Joel Cochran is an Expression Blend MVP, an INETA Community Champion, and a Microsoft Certified Technology Specialist (MCTS) in Windows Forms and WPF. He is the founder of BlendSIG, a virtual Special Interest Group focused on Expression Blend and author of "Expression Blend in Action" by Manning Publications. He is also the author of "The Practical MVVM Manifesto" (http://practicalmvvm.com). He has been developing for Windows since 2003 and is a self-proclaimed "Blend Evangelist". A frequent speaker at User Groups and Code Camps, he enjoys teaching and writing about .NET and other topics. You can find him online at http://www.developingfor.net or on Twitter at http://twitter.com/joelcochran. Joel has served as the Director of Operations for Stonewall Technologies, Inc., an ISV, in Staunton, VA, since 2000.

[ Event Details | Map & Directions | Add To Calendar ]

Online

Automated Unit Testing - Testing Dependencies and Legacy Code
Wednesday, February 08, 2012 10:00 AM, Online
You may have already started unit testing or at least understand the basics. But there’s one large obstacle that stands in your way: dependencies. Most code was not written to be easy to test. How can you test dependencies? Join this webinar and learn different methods and tools that help create unit tests to test dependencies and legacy code.
Learn:
• Why you are writing legacy code
• Hand rolled mocks
• Mocking frameworks
• What makes a good unit test
This webinar is intended for .NET developers interested in automated unit testing who want to learn how to develop better code.

[ Event Details | Add To Calendar ]

Developing Applications Using Data from Microsoft Windows Azure Marketplace
Tuesday, February 14, 2012 2:00 PM, Online
The Windows Azure Marketplace is an online market buying and selling finished Software as a Service (SaaS) applications and premium datasets. There is a wide variety of data including demographic, environment, financial, retail and sports. In this webcast, we will take a look at the application development features of the Windows Azure Marketplace and discuss how you can develop web and Windows Phone applications that consume data from the Marketplace.

[ Event Details | Add To Calendar ]

SSWUG Free Expo: Understanding Database Security Threats and Countermeasures
Friday, February 17, 2012 9:00 AM, Online
SSWUG.ORG’s free virtual expo will review ways for information technology (IT) professionals who work with enterprise environments to design and monitor security for database systems.
Through our in-depth sessions with some of the leading functional specialists in the IT field, you will see many examples and case studies on understanding database forensics, encrypting data, preventing SQL injection hacks and more.
By the end of our free event, you should have the tools and understanding needed to develop database security solutions for protecting business-critical databases.

[ Event Details | Add To Calendar ]

VA

Managing Privileged Account Passwords, Windows Azure, Virtualization/Hyper-V with Windows Server 2008 R2 SP1, and System Center Virtual Machine Manager 2012
Thursday, February 16, 2012 6:30 PM, Arlington, VA
Windows Azure is an open cloud platform that enables developers to quickly build, deploy and manage applications across a global network of Microsoft-managed datacenters. Our guest speaker, Zhiming Xue, Microsoft architect evangelist, will provide an update on the new release of Microsoft Windows Azure, including its support for Node.js, java and PHP.

[ Event Details | Map & Directions | Add To Calendar ]

Want your events listed? You can add them here.

You can also add your events via the Community Megaphone web service API. You can get more information on the API, and how to sign up, at http://www.communitymegaphone.com/API.aspx. You can also email me for more information.

MADExpo 2012 Call for Speakers is Open!

Fri, 03 Feb 2012 03:18:02 GMT

Last year, it was my privilege to be a part of the team that brought a new conference to the Mid-Atlantic, the Mid-Atlantic Developer Expo (or MADExpo for short). The conference was born of many conversations and discussions in the community from folks wanting to do something a little bigger and bolder than some of the usual events we were used to. So I, Steve Bodnar, Steve Presley, Kevin Griffin, Sara Faatz. Kevin Hazzard, Pete Brown, Rich Dudley, and a team of volunteers planned and executed the first event last summer.

Why We Did It

Our goal was to create a fun and informative conference with some unique aspects. We included a full-day kids conference called MadKidz, run by Kevin Hazzard (with help from his family), which was a big hit. We included a dedicated room for hardware and NUI demonstrations, featuring a local FIRST robotics team, Chiptunes demo, Kinect and Surface demonstrations, the founder of Secret Labs, maker of Netduino, and all the geeky toys Pete Brown could pack into one table.

We had a keynote by Jeff Prosise, a Wintellect co-founder, on his passion for radio controlled flying, including a 1/6th-scale F-16 onstage. We brought folks to one of the finest facilities on the east coast, the Hampton Roads Convention Center, in the heart of Virginia's Tidewater, a short drive from the beach, theme parks, and all the history you could want for a summer vacation. And with the assistance of great sponsors, we kept it affordable enough that just about anyone could come.

And now, it's time to do it all over again.

Announcing MADExpo 2012

I'm pleased to announce that the 2012 Mid-Atlantic Developer Expo will be held from June 27th-29th, 2012 at the Hampton Roads Convention Center in Hampton Roads, VA. That's right…we're adding a third day to make sure we can pack in more content, including repeated sessions so that attendees won't have to miss out when there's more than one session they want to see in the same time slot.

Call for Speakers

Speaking of sessions…now's the time to get yours in. The Call for Speakers for MADExpo 2012 is officially open. Simply visit http://madexpo.us/speakers, and click the link at the top of the page to submit your session (you'll need to create an account if you didn't already do so last year). As was the case last year, the conference is open to all technologies that software developers, hardware hackers, and geeks in general would be interested in. The list below is provided to give you some guidance, but if you have an idea that's not on the list, please submit it anyway. You never know, yours might be the next great keynote idea (our day 2 keynote last year, by James Ashley, was originally submitted as a breakout talk).

Web Development
Database Development
Client Development
Mobile Development
Cloud Development
Hardware Hacking and Microcontroller Programming
Natural User Interface (NUI) Development
Agile Methodologies
Best Practices
Open Source Development
Beginner Topics
Robotics
Portal and Content Management System administration and development
Infrastructure management and development
UX/UI and Design
Soft Skills

The Call for Speakers will remain open until mid-March, but don't wait to submit your sessions, as you'll want to be first in line to get your sessions selected!

We are asking potential speakers to submit several sessions, with the goal being that each selected speaker will do at least 2 talks over the 3-day conference (with each talk potentially being repeated to allow attendees two chances to see the session). Both beginners and experienced speakers are welcome. If you've got something cool to talk about, we want to hear from you. And if you only have one session to submit, that's fine, too. 2 talks per speaker is a goal, not a hard and fast rule. This is all about having great content, and making it worth your time and travel as a speaker. Speakers will receive a free pass to the conference, and an opportunity to share their knowledge with their peers from the Mid-Atlantic and beyond.

If you have questions, feel free to drop an email to info@madexpo.us.

I'm excited to see things moving forward for this year's MADExpo, and can't wait to see all the great session ideas!

Exploring HTML5 Canvas: Part 3 - Paths and Text

Tue, 31 Jan 2012 16:39:15 GMT

[This is part 3 of an ongoing series of posts examining the HTML5 Canvas element. In Part 1 of this series, I introduced Canvas and prepared a template to make further explorations a bit simpler, and also introduced JsFiddle, a neat tool for experimenting with and sharing web code. In Part 2, I demonstrated the ability of Canvas to allow your page background to shine through, and showed you how to render simple shapes on the drawing surface.]

For part 3 of our exploration of HTML5 Canvas, I'm going to introduce you to a couple of additional ways to draw…the path APIs and the text APIs. Actually, if you've read part 2, you already met one of the important path APIs, namely context.arc, which provides the ability to draw circles (or portions of circles). But circles aren't the only thing we can draw with paths…not by a long shot…

Starting a Path and Drawing a Line

There are a couple of things you'll need to do before you actually start drawing with the path APIs. The first is to move the starting point for your path to where you want it using context.moveTo():

    context.moveTo(50, 50);

Here, I move the drawing context to 50 pixels right, and 50 pixels down from the upper left corner of the canvas element. Now, I can start drawing. The simplest drawing API is for drawing straight lines, context.lineTo():

    context.lineTo(150, 150);

Here, I'm drawing a straight line from the origin set by moveTo to a point at 150 pixels right and 150 pixels down from the upper left corner of the element. But I'm not quite done. In order to actually render the line, I need to call context.stroke():

    context.stroke();

The result is a serviceable, if unspectacular, diagonal straight line:

Now, that line is a little on the thin size, so let's beef it up, shall we? A simple call to context.lineWidth prior to drawing the line will work swimmingly, and while we're at it, we can use the context.lineCap API to make the ends of the line rounded rather than the default square (butt) end:

   1:  context.lineWidth = 5;

   2:  context.lineCap = "round";

Zoom in to 400%, and you can clearly see how the lineCap API has rounded the end of our line:

Next, we'll add a couple more lines to make a triangle:

   1:  context.moveTo(50, 50);

   2:  context.lineTo(150, 150);

   3:  context.lineTo(150, 50);

   4:  context.lineTo(50, 50);

   5:  context.stroke();

And we'll also add a call to context.lineJoin to ensure our joins match our caps, and for fun we'll fill the triangle with red…here's the full rendering code so far:

   1:  context.lineWidth = 5;

   2:  context.lineCap = "round";

   3:  context.lineJoin = "round";

   4:  context.moveTo(50, 50);

   5:  context.lineTo(150, 150);

   6:  context.lineTo(150, 50);

   7:  context.lineTo(50, 50);

   8:  context.stroke();

   9:  context.fillStyle = "#F00";

  10:  context.fill();

which gives us the following result:

So far, so good. But what if you want to draw something other than a straight line?

Drawing Arcs and Bezier Curves

We already saw in part 2 how to use the arc API to draw circle shapes, but sometimes you need more than just a circle (or part of one). Suppose instead of all straight lines for our triangle above, we want to make one side curved? We could use the context.quadraticCurveTo or context.bezierCurveTo APIs to draw a curve instead of one of the straight lines, like so:

   1:  context.lineWidth = 5;

   2:  context.lineCap = "round";

   3:  context.lineJoin = "round";

   4:  context.moveTo(50, 50);

   5:  context.bezierCurveTo(50,50, 150,50, 150,150);

   6:  //context.lineTo(150, 150);

   7:  context.lineTo(150, 50);

   8:  context.lineTo(50, 50);

   9:  context.stroke();

  10:  context.fillStyle = "#F00";

  11:  context.fill();

Above, we've replaced the code that previously drew the diagonal line with a call to bezierCurveTo. This API starts drawing at the location specified by the previous line's call to moveTo, and ends at 150, 150, the value of the last 2 parameters. The first two parameters are the X and Y coordinates of the 2 bezier curve control points, in this case, 50, 50 and 150, 50, which gives us the following output:

The only difference between bezierCurveTo and quadraticCurveTo is that the latter only has one control point, rather than two.

Additional Path APIs

I'm not going to show full examples of each and every API for drawing paths and shapes, but here are a few more you may want to be aware of (there's a pretty good reference for the Canvas APIs available over at W3Schools, where you can get more info):

context.beginPath() – begins a new path or clears the current path.
context.closePath() – closes the current path.
context.clip() – creates a clipping area using the current path or shape information. Only pixels within the clipping area will be visible after calling this function.
context.clearRect(x, y, width, height) – clears a rectangular space matching the provided x and y origin and width and height, removing all pixels. Useful for clearing only a portion of the canvas.
arcTo(x1, y1, x2, y2, radius) – draws an arc between two specified points of the specified radius.

Drawing Text

One very positive thing about drawing text with the canvas APIs is that it's very simple, and can take as little as one line of code:

context.strokeText("Hello, Canvas!", 50, 150);

In fact, the only other API specifically for drawing text is context.fillText. The remaining APIs are all relating to the font, location, and alignment of the text. Adding the above line of code to our existing page (with a quick call to context.lineWidth to set it back to 1 pixel), gives the following result:

This simplicity is great if all you want to do is drop a quick annotation onto a chart, or something similar, but there are some significant downsides to using the text APIs in canvas to be aware of.

Reasons not to use Canvas for Text

Once you draw text in canvas, it's simply a part of the bitmap data, and no longer distinct in any way from shapes, lines, fills, etc. So the only way to manipulate text once drawn is to redraw it. By comparison, text created using plain HTML or SVG becomes a distinct part of the DOM, and can be individually selected and manipulated without having to redraw it.
While you can change the orientation of canvas-based text using transformations (more on this feature in a future post), this doesn't give you as much flexibility as the text APIs in SVG. For example, SVG makes it possible to flow text along a path, which is difficult if not impossible to do using any other available text technique. One downside of this technique is that it can be pretty involved, so you may want to use a vector graphics editor such as the free InkScape to create your SVG. You can see an example of flowing text on a path below.
Text rendered using canvas is not accessible. Screen readers won't see it, so those who are visually impaired will not know what the text says. So if your text is critical to the semantic meaning of your page, it should probably be in the markup, not in canvas, or even SVG.

One nice thing about text in an HTML5 world is that you don't have to choose one or the other, you can easily use HTML markup, SVG, and Canvas, all in the same application. Here's one example from the Internet Explorer team (warning…plays audio, may want to turn your speakers down).

As in Part 2, I'll leave you with a jsFiddle of the code from today's exploration:

I hope you enjoyed this foray into the wonderful world of the HTML5 Canvas path and text APIs!

If you found this useful, why not tell your friends? You can also subscribe to my RSS feed, and follow me on twitter for more frequent updates.

More parts in the series:

Up next, I'll tackle Transformations…don't miss it!

Exploring HTML5 Canvas: Part 2 - Basic Shapes

Tue, 31 Jan 2012 16:38:05 GMT

[This is part 2 of an ongoing series of posts examining the HTML5 Canvas element. In Part 1 of this series, I introduced Canvas and prepared a template to make further explorations a bit simpler, and also introduced JsFiddle, a neat tool for experimenting with and sharing web code.]

The HTML5 Canvas element holds much promise in terms of making it easier for web developers and designers to create rich animated elements for their sites, without the need for additional browser plug-ins. In this post, we'll look at the basics of drawing shapes in Canvas, and a little bit about CSS and Canvas.

Canvas and Backgrounds

One thing I wanted to explore in this post, prompted by a comment by Ian Lee on the previous part, is how Canvas interacts with the rest of your page. Ian asked in his comment whether or not it was possible to make a Canvas element transparent. Another commenter, "dhimanvikas," helpfully offered that this is the default. We can see this by adding a background color to our page using CSS, like so:

   1:  <style>

   2:     body {

   3:        background-color: #f00;

   4:     }

   5:  </style>

(note that I'm using inline styles for now to keep everything in a single file for simplicity…in a production site, it's a best practice to separate styles into one or more external style sheets, to help keep your pages smaller, and make your styles reusable)

Now, if we browse our page without actually drawing anything using the Canvas drawing context, all we'll see is a red background on our page. Not terribly interesting. But if we add the script from the end of part 1 (leaving out the first line, which draws a black box the size of the canvas), we get the result below:

Looks a little strange, because the fill color and the background color are the same. Let's change the background color of the page to black:

   1:  <style>

   2:     body {

   3:        background-color: #000;

   4:     }

   5:  </style>

This gives us a little better-looking result:

But background colors aren't all you can do. You can also use canvas over a background image as well:

   1:  <style>

   2:     body {

   3:        background-image: url(images/Andrew_Borg_Santa.jpg);

   4:        background-size: 100%;

   5:        background-repeat: no-repeat;

   6:     }

   7:  </style>

This gives us a nice festive background to work against, and further demonstrates the default transparency of the Canvas element:

While the default for the canvas is transparency, we can draw a background that's the full size of the canvas, and still show some of our background color or image by using alpha values for the fillStyle, like so:

   1:  function renderContent()

   2:  {

   3:     context.fillStyle = "rgba(255, 255, 255, 0.5)";

   4:     context.fillRect(0, 0, canvas.width, canvas.height);

5:

   6:     var text = "Hello, Canvas!";

   7:     context.fillStyle = "#FF0000";

   8:     context.strokeStyle = "#0000FF";

   9:     context.font = "36px sans-serif";

  10:     context.strokeText(text, 10, 50);

  11:     context.fillText(text, 10, 50);

  12:  }

This results in a semi-transparent background of white for our Canvas element, which allows our background image to show through:

Styling, Filling, and Stroking

To do any drawing in HTML5 Canvas, you'll generally want to set the style of the drawing context API that you plan to use, either fill (the inside of a shape) or stroke (the outline of the shape). By default, the style for each is simply the color black expressed in hash notation ("#000000"). To set a different fill color, you simply call context.fillStyle = color value, where color value is a color in any valid CSS format. Similarly, to set the stroke for the context prior to outlining a shape, you call context.strokeStyle = color value. You can see examples of both of these in the preceding code snippet. Note that there are additional properties that define the style for a shape's outline, but we'll cover these in a future post.

Once you have the fill and stroke set to the desired colors, you can start drawing.

Drawing Shapes

It may seem odd, but there's really only one type of shape that you can draw directly with a canvas API, and that's a rectangle. The canvas API has two methods specifically for drawing rectangles, context.fillRect and context.strokeRect. Of course, what fun would it be if we only draw boxes? So we'll also take a look at how we can draw circles using context.arc, and a few other methods.

To spare your eyes, we'll go back to drawing on a black background, using CSS as in the earlier example. And we'll start out by simply drawing a red rectangle:

   1:  function renderContent()

   2:  {

   3:     context.fillStyle = "#ff0000";

   4:     context.fillRect(5, 5, 200, 100);

   5:  }

The fillRect function takes 4 arguments, the first two of which are the x, y, coordinates of the top left corner of the rectangle, and the second two of which are the width and height of the rectangle. This results in the following output:

You can also draw a border around the rectangle using context.strokeStyle and context.strokeRect, like so:

   1:  function renderContent()

   2:  {

   3:     context.fillStyle = "#ff0000";

   4:     context.fillRect(5, 5, 200, 100);

   5:     context.strokeStyle = "#00ff00";

   6:     context.strokeRect(5, 5, 200, 100);

   7:  }

which gives us a nice 1px green border:

Drawing circles is actually just a specialized case of drawing paths, using the context.arc function. Here's the code required to draw a red circle with a 3 pixel blue border:

   1:  function renderContent()

   2:  {

   3:     context.lineWidth = 3;

   4:     context.fillStyle = "#0000FF";

   5:     context.strokeStyle = "#FF0000";

   6:     context.beginPath();

   7:     context.arc(55, 55, 50, 0, Math.PI * 2, false);

   8:     context.closePath();

   9:     context.fill();

  10:     context.stroke();

  11:  }

there's a fair amount that's new here, so we'll go through it line by line. In line two, we introduce context.lineWidth, which as you might guess, allows us to specify the thickness of the border we're going to draw. fillStyle and strokeStyle work just as they do for rectangles, so we'll skip over them. Next we call context.beginPath(). This tells the canvas element that we want to start drawing a path, but beginPath itself does not do any actual drawing.

The meat of our circle code comes from context.arc(). This function allows us to draw any portion of a circle. The first two arguments are the x and y coordinates of the center of the circle. Note that this differs from fillRect, so you will need to offset your xy position by the radius of the circle (plus any padding you want). We're using the values 55 and 55, so that the circle which uses a radius of 50 (that's the next argument), will be slightly to the bottom and right of the top left corner of the canvas element. The 3rd argument, as already mentioned, is the radius for our arc/circle, and we've set that to 50. The 4th and 5th arguments, respectively, are the beginning and ending angle for our circle, expressed in radians. We start from 0, and go to Math.PI * 2, which is equivalent to 360 degrees, giving us a full circle. The 6th and final argument determines whether or not we're drawing the circle counterclockwise…by passing the value false, we're saying to draw clockwise. Obviously, this matters a lot more when you're only drawing part of a circle.

Tip: Converting Degrees to Radians

If you're not a fan of doing conversion math to work with the context.arc function, here's a tip…the Calculator app in Windows 7 has built-in conversion features, including the ability to convert from degrees to radians and vice-versa. Just select View > Unit conversion, and you get a view like the following (you may have to manually change the unit to Angle):

The result of our circle code is shown below:

The output is simple, but we've only just gotten started exploring what you can do with the HTML5 Canvas. Stick around, because in Part 3 of this series, I'll delve deeper into drawing with paths, and text.

To wrap things up, here's a JsFiddle with the code for our final example, which you can use as a starting point for experimentation:

If you found this useful, why not tell your friends? You can also subscribe to my RSS feed, and follow me on twitter for more frequent updates.

More parts in the series:

Exploring HTML5 Canvas: Part 1 - Introduction

Tue, 31 Jan 2012 16:37:08 GMT

In this post, I'm going to begin an examination of one of the hottest new features of HTML5, namely the Canvas element.

What is Canvas, anyway?

The best place to start is at the beginning, and that's with an explanation of what Canvas actually is. Canvas is a new element that is part of the HTML5 specification, and can be added to your markup as simply as this:

   1: <canvas id="myCanvas" width="500" height="500"></canvas>

OK, we're done. Let's go home.

Of course, it's not that easy. By adding the canvas element to the markup, if we browse the page containing the element in a modern browser that supports canvas (you can find out which browsers support canvas using caniuse.com), you'll see a great big nothing. Why? Because all that the <canvas> tag gives you is a blank slate, and unless you've changed the background color of your page, both the page background and the canvas will be white. Not terribly interesting to look at, so I'll spare you the screen shot of the blank canvas. Just take my word that the above markup gives you a drawing surface that is 500 pixels wide by 500 pixels tall, and (assuming it's the only element in the body of your page) will appear at the top left of your page.

Building a Template

To make life easier as we explore the HTML5 Canvas, I'm going to start with a basic set of markup and script, and in future posts in this series, I'll add to that basic template. Since this will consist solely of HTML markup, CSS, and Javascript, you can use any text editor you like to follow along. I'll be working with the Microsoft WebMatrix 2 beta, which you can download here (you can choose either the current v1 release, or the v2 beta, using the big green buttons in the upper right).

Here's the basic template I'm going to use:

   1:  <!DOCTYPE html>

2:

   3:  <html lang="en">

   4:      <head>

   5:          <meta charset="utf-8" />

   6:          <title>HTML5 Canvas Template</title>

   7:          <style>

   8:              /* styles here */

   9:          </style>

  10:      </head>

  11:      <body>

  12:          <canvas id="myCanvas" width="500" height="500">

  13:              <p>Canvas not supported.</p>

  14:          </canvas>

15:

  16:          <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js" type="text/javascript"></script>

  17:          <script type="text/javascript">

  18:              $(document).ready(function() {

  19:                  var canvas = $("#myCanvas").get(0);

  20:                  var context = canvas.getContext("2d");

21:

  22:                  function renderContent()

  23:                  {

  24:                      // we'll do our drawing here...

  25:                  }

26:

  27:                  renderContent();

  28:              });

  29:          </script>

  30:      </body>

  31:  </html>

Some things to note:

On line 7, I'm setting up a <style> block where we'll put CSS rules.
On line 13, I've added some content in between the <canvas> and </canvas> tags. Any browser that does not support Canvas will ignore the canvas tags, and will instead render the content within them. In this case, I'm simply displaying a message, but I could also provide a fallback solution using Silverlight or Flash, if I chose.
On line 16, I'm importing the jQuery script library, which can help simplify and speed my Javascript development. I am placing my script references at the end of the page, just prior to the closing </body> element, to ensure that my page content loads without being blocked by script loading.
On line 18, I am telling jQuery to execute an anonymous function when the page is ready for scripting, using jQuery's built-in ready event. This is where I kick off processing, first getting a reference to the canvas element and its 2d drawing context (more on this in a bit), and calling the renderContent function, which is currently empty.
A final note…in a production site, I would separate out the CSS and JavaScript into separate files, to keep my markup nice and clean. For the sake of this blog series, I will largely keep the CSS and JavaScript in the same file, so you'll be able to see it all at once.

All of the parts of this template will be useful moving forward, so you may want to copy the above code and save it to a file. I'm calling mine CanvasTemplate.html:

A Brief Digression – JsFiddle

Another useful tool I want to introduce, since I'll probably use it from time to time to post example code, is JsFiddle. JsFiddle is, as the JsFiddle docs state,"a playground for web developers, a tool which may be used in many ways." It supports multiple JavaScript libraries, such as jQuery, MooTools, Prototype, and many more, and makes it easy to experiment with, and share, your web code. You can see an example in the code snippet I posted for making a grid in canvas as an aid to visualizing layout:

It's important to note that JsFiddle is an alpha release as of this writing, and I've found a few issues when editing scripts, particularly when using tabs. But overall, it's very functional, and quite convenient for brief forays into web monkeying. For deeper development, I definitely prefer an environment like WebMatrix or Visual Studio that provide a more robust editing experience.

A Blank Slate

Back to the code…as noted above, even with the addition of our JavaScript in the template, our canvas still isn't doing anything useful. In order to start drawing, we need the canvas equivalent of a pencil (or pen, or paintbrush, depending on which metaphor you prefer). And that's where the Context comes in. The HTML5 Canvas element exposes a function called getContext, which you can call like so:

var context = myCanvasElement.getContext("2d");

Note that in the snippet above, I've already gotten a reference to the canvas element (you'll see how momentarily), and I'm passing in the string argument "2d" to the function. This is required, although in the current specification, there is only one drawing context, which is 2d (there may be a 3d context in future versions of the specification, which is why you have to specify 2d, even though it's the only context). It is this context that exposes all of the functions you'll call to draw on your canvas.

Getting the drawing context takes just 2 lines, one to get a reference to the canvas element you want to draw on, and another to get the context itself. We'll use jQuery to grab the element, using its ID selector syntax:

var canvas = $("#myCanvas").get(0);
var context = canvas.getContext("2d");

In the first line, I ask jQuery for the element with the id of "myCanvas" and call .get(0) to get the underlying element (by default, jQuery returns a set of elements wrapped with some of its useful functionality…but we just need the element itself), then in the second line I grab the canvas drawing context and stick it into a variable called, appropriately enough, "context". In our template above, I define and populate these variables at the beginning of the anonymous function called by jQuery's ready event handler. Since the renderContent function is also defined within the anonymous function, it will have access to the canvas and context variables, while keeping both the variables and function from polluting the global namespace (that is, unintentionally exposing variables and/or functions as global to the page).

We'll get into the ins and outs of the canvas drawing API in the next installment, but I'll leave you with a simple example of what you can do with Canvas, by adding the following code to the renderContent function:

   1:  function renderContent()

   2:  {

   3:      context.fillRect(0, 0, canvas.width, canvas.height);

4:

   5:      var text = "Hello, Canvas!";

   6:      context.fillStyle = "#FF0000";

   7:      context.strokeStyle = "#0000FF";

   8:      context.font = "36px sans-serif";

   9:      context.strokeText(text, 10, 50);

  10:      context.fillText(text, 10, 50);

  11:  }

Which results in the following being rendered:

Hope you enjoyed the first installment of Exploring HTML5 Canvas.

If you found this useful, why not tell your friends? You can also subscribe to my RSS feed, and follow me on twitter for more frequent updates.

More parts in the series:

Exploring HTML5 Canvas: Part 4 - Transformations

Tue, 31 Jan 2012 16:14:31 GMT

[This is part 4 of an ongoing series of posts examining the HTML5 Canvas element. In Part 1 of this series, I introduced Canvas and prepared a template to make further explorations a bit simpler, and also introduced JsFiddle, a neat tool for experimenting with and sharing web code. In Part 2, I demonstrated the ability of Canvas to allow your page background to shine through, and showed you how to render simple shapes on the drawing surface. In Part 3, I showed how to draw paths and text in Canvas.]

Transformations in HTML5 Canvas are surprisingly straightforward, but come with a twist if you're used to other platforms. For example, in both SVG and Silverlight, transforms are applied by applying additional markup elements or attributes to specific elements or groups of elements. This means that you have pretty fine-grained control of transformations, and can apply them even after a given element has been rendered, by using code to add the necessary attributes.

In Canvas, transformations are applied before you start drawing the path, shape, or text that you want transformed. That's because what you're transforming isn't an element at all…remember that Canvas doesn't render elements, it renders pixels, and once the pixels are drawn, they're just part of the canvas.

So what does this mean in practice? Well, probably best to show an example. Here's some JavaScript that draws a simple shape on our canvas (if you are new to this series, check out Part 1 to see the basic template I use to render all the examples…the code below is just dropped into the renderContent function, which is executed automatically when the page is loaded):

   1:  context.beginPath();

   2:  context.fillStyle = "Yellow";

   3:  context.strokeStyle = "Yellow";

   4:  context.arc(100,75,50,0.25*Math.PI,1.75*Math.PI);

   5:  context.lineTo(100, 75);

   6:  context.stroke();

   7:  context.fill();

(note that while we used hex color codes in earlier examples, you can also use named colors for the fillStyle and strokeStyle properties)

The above code, used with our template, results in the following output:

Now let's say we want to rotate what we've drawn by 45 degrees. Canvas exposes a rotate function for just this purpose, and it accepts one argument, which is the angle, in radians, for the rotation. We can get the radians by multiplying degrees by PI/180, so 45*PI/180 = 0.79 (rounded). If we want an exact number, we can simply send the entire equation as the argument, like so:

    context.rotate(45*Math.PI/180);

You might assume that adding this before the previous code would give the desired result. You'd be wrong. Here's what we end up with if we insert the call to rotate before calling beginPath:

Woah! Clearly that wasn't quite what we had in mind. We seem to have both rotated and translated (i.e. moved) our shape. Well, not really. In fact, this highlights one of the challenges of Canvas transformations, namely that we're not transforming our shape, we're transforming the entire canvas. In calling the rotate function, we've rotated the entire coordinate system for our canvas with the center of rotation being the 0, 0 point of the canvas (top left) which results in the shape being drawn at the angle desired, but in a different location. D'oh!

To better illustrate what's happening, we can draw some gridlines before we draw our shape:

   1:  function renderGrid(gridPixelSize, color)

   2:  {

   3:     context.save();

   4:     context.lineWidth = 0.5;

   5:     context.strokeStyle = color;

6:

   7:     // horizontal grid lines

   8:     for(var i = 0; i <= canvas.height; i = i + gridPixelSize)

   9:     {

  10:        context.beginPath();

  11:        context.moveTo(0, i);

  12:        context.lineTo(canvas.width, i);

  13:        context.closePath();

  14:        context.stroke();

  15:     }

16:

  17:     // vertical grid lines

  18:     for(var j = 0; j <= canvas.width; j = j + gridPixelSize)

  19:     {

  20:        context.beginPath();

  21:        context.moveTo(j, 0);

  22:        context.lineTo(j, canvas.height);

  23:        context.closePath();

  24:        context.stroke();

  25:     }

26:

  27:     context.restore();

  28:  }

The code above simply renders a grid of the specified size and color to the canvas. We can call it from our rendering code like so:

   1:  context.rotate(45*Math.PI/180);

   2:  renderGrid(20, "red")

   3:  context.beginPath();

   4:  context.fillStyle = "Yellow";

   5:  context.strokeStyle = "Yellow";

   6:  context.arc(100,75,50,0.25*Math.PI,1.75*Math.PI);

   7:  context.lineTo(100, 75);

   8:  context.stroke();

   9:  context.fill();

The result should make it a little clearer what's going on with our Canvas transformations:

Saving and Restoring the Current Context

You might have noticed in the renderGrid function calls to the save and restore functions on the context object. These functions do pretty much exactly what they sound like, save the current context and restore it, so that you can apply style and transformation changes to the context and still be able to get back to where you started. Without saving and restoring the context, any transformations applied are cumulative, and you could quickly reach a point at where it would literally be impossible to figure out which way is up. One point to keep in mind is that the Canvas save state is stack-based. So if you call context.save() twice, you now have two 2d context states saved on the stack. When you call context.restore(), the most recently saved state will be applied to the context object. Calling context.restore() again would apply the first saved state to the context object, and the stack would be empty.

Now that it's hopefully clearer why we ended up with the result we did, we might want to figure out how to compensate for this before moving on to other transformations. Probably the simplest way to go about compensating for a pending rotation transformation is to change the origin by using another available transformation, the translation. Calling context.translate(x, y) moves the origin of your Canvas by the specified amount. So to compensate for the translation inherent in a rotate transformation, we simply need to figure out the center of the shape we are rotating, and translate the Canvas origin by that amount, then translate it back once we've done the rotation. Here's what the code looks like (note that I've added a call to context.save at the beginning and to context.restore at the end, so that when we're done drawing this shape, the context is back to its original state):

   1:  context.save();

   2:  context.translate(100, 75);

   3:  context.rotate(45*Math.PI/180);

   4:  context.translate(-100, -75);

   5:  renderGrid(20, "red")

   6:  context.beginPath();

   7:  context.fillStyle = "Yellow";

   8:  context.strokeStyle = "Yellow";

   9:  context.arc(100,75,50,0.25*Math.PI,1.75*Math.PI);

  10:  context.lineTo(100, 75);

  11:  context.stroke();

  12:  context.fill();

  13:  context.restore();

The result is almost, but not quite, right:

Now our shape is rotated 45 degrees as desired, but obviously it wasn't our desire to rotate our reference grid. Moving the call to renderGrid earlier in the code will do the trick:

   1:  context.save();

   2:  renderGrid(20, "red")

   3:  context.translate(100, 75);

   4:  context.rotate(45*Math.PI/180);

   5:  context.translate(-100, -75);

   6:  context.beginPath();

   7:  // remaining code omitted for brevity

   8:  context.restore();

Much better:

So now that we've seen the rotate and translate transforms in action, what's left?

Another useful member of the transformation crew is context.scale(). This function, as you might expect, scales the drawing context. It takes two parameters, the x and y scale factors. If you call context.scale(2, 2) you effectively double the scale of the drawing context in both directions, as shown in the code below:

   1:  context.save();

   2:  renderGrid(20, "red")

   3:  context.scale(2, 2);

   4:  context.beginPath();

   5:  context.fillStyle = "Yellow";

   6:  context.strokeStyle = "Yellow";

   7:  context.arc(100,75,50,0.25*Math.PI,1.75*Math.PI);

   8:  context.lineTo(100, 75);

   9:  context.stroke();

  10:  context.fill();

  11:  context.restore();

which results in the following output:

Note that since the call to renderGrid() is made prior to the call to context.scale(), the size of our grid has not changed, while the size of our shape has doubled (note, too, that the distance of the drawn shape from the top left corner of the canvas has also doubled).

I've saved the most interesting transformations for last, context.transform(a,b,c,d,e,f), and context.setTransform(a,b,c,d,e,f). Each of these functions accept 6 parameters, which represent a matrix by which the drawing context is transformed (more on this in a moment), and each allows you to scale, rotate, translate, and skew the drawing context with a single API call. That's a lot of power packed into one function call! The major difference between transform and setTransform is that the latter clears any existing transformations prior to applying the parameters passed to it.

The transformation matrix can be visualized like this:

a = ScaleX	b = SkewX	c = SkewY
d = ScaleY	e = TranslateX	f = TranslateY

Looking at the parameters that make up the transformation matrix you might ask yourself, "how can I rotate the drawing context using this function when there aren't any rotate parameters?" Well, it turns out that if you skew the X and Y values the same amount, but skew one in the negative direction, the result is effectively a rotation. So let's take our shape after the rotate example above, and skew it with the transform function:

   1:  context.save();

   2:  renderGrid(20, "red")

   3:  context.translate(100, 75);

   4:  context.rotate(45*Math.PI/180);

   5:  context.translate(-100, -75);

   6:  context.transform(1, 0, 1, 1, 0, 0);

   7:  context.beginPath();

   8:  // Drawing code omitted for brevity

   9:  context.restore();

this gives us the following output:

Notice that although we applied a skew of 1 in the +Y direction, that's not the way our skew appears to be being applied. The reason for this is that the transform function simply applies our transformation matrix to any existing transforms previously applied to the drawing context. Because our rotate transform is still in effect, "Y" is effectively 45 degrees turned from what we'd normally expect to see. If instead we call setTransform with the exact same parameters, the output will look like the following:

Because setTransform removes any existing transforms, the skew now does what you might have originally expected. So while the simpler APIs of translate, rotate, and scale are great when you need a simple API for transformations, some time spent playing with the transform and setTransform functions will be of great benefit in maximizing your drawing flexibility.

Here's a JsFiddle with the code from this post, if you want to play with the APIs:

Summary

The HTML5 Canvas element provides some very powerful APIs for transforming the drawing context. Those coming to HTML5 from other technologies like SVG and Silverlight may need to get used to the way that transformations are applied, since they're a bit different than in those technologies, but with a little practice, you'll be applying transformations like a pro.

If you found this useful, why not tell your friends? You can also subscribe to my RSS feed, and follow me on twitter for more frequent updates.

More parts in the series:

Up next, I'll get moving with simple animations…don't miss it!

Upcoming Events for January 30th, 2012

Mon, 30 Jan 2012 20:20:47 GMT

MD

[ Event Details | Map & Directions | Add To Calendar ]

Online

SSWUG Online Course: Introduction to Windows Azure
Tuesday, January 31, 2012 12:00 AM, Online
SSWUG.ORG's virtual class will provide you with the knowledge of Window Azure's components and aspects to run applications without the expense needed to maintain the hardware and save money on licensing costs.
Scott Klein, who is a Microsoft SQL Azure MVP and the co-founder of Blue Syntax Consulting, will showcase the different types of services that can be hosted in Windows Azure such as web and worker roles, and then move on to the basics of Azure's durable storage solution, which include Azure queues, blobs and tables.
He will also provide a introduction on SQL Azure - Microsoft's cloud-based relational database, and how you can use SQL Azure to store your relational data on the cloud. This will be followed up by sessions dealing with Azure AppFabric, cloud computing patterns and practices, as well as diagnostics and service management.

[ Event Details | Add To Calendar ]

Introduction to Unit Testing
Wednesday, February 01, 2012 10:00 AM, Online
Software testing isn’t just a task for QA. In order to prevent bugs and release quality code to market, you also need developer testing, including unit testing.
Learn the difference between unit tests, integration tests, manual tests and acceptance tests.
Learn:
• QA vs. Developer Testing
• Benefits of unit testing
• xUnit Frameworks
• The difference between unit testing and test driven development (TDD).
Join this webinar to learn what you need to know in order to start testing today.

[ Event Details | Add To Calendar ]

SSWUG Webcast: SSRS Data-driven Subscription using SSIS
Wednesday, February 01, 2012 11:00 AM, Online
SQL Server Reporting Services provides a powerful tool to render report based on information in a database table. However, you are required to purchase an Enterprise license of SQL Server in order to use this feature.
In this session, Russel Loski, who is a Microsoft Certified Trainer and an independent software developer, will create an SQL Server Integration Services (SSIS) package that renders reports to the file system based on values stored in the database.

[ Event Details | Add To Calendar ]

VA

In-Person Training: Advanced SharePoint BI Security and Configuration (Metro Washington D.C.)
Monday, January 30, 2012 8:30 AM, Reston, VA
In a partnership agreement between SSWUG.ORG and SolidQ, a fast-paced, in-person seminar on configuring and securing SharePoint 2010 and business intelligence services will be offered on Jan. 30-31 from 8:30 a.m. to 4:30 p.m. in Reston, Virginia.
Carl Rabeler, course instructor and director of SolidQ's BI Center of Excellence, will review the SharePoint 2010 security architecture for authentication and authorization, particularly as it relates to connectivity to external data sources. He will also provide information on configuring administrative access to SharePoint 2010, configuring service application accounts, and user permissions.
Additionally, you will learn about the nuances of configuring and security each of the core business intelligence components of SharePoint 2010: Excel Services, PerformancePoint Services, Reporting Services and PowerPivot Services. Finally, you will also learn about changes to Reporting Services security and configuration with SQL Server 2012.

[ Event Details | Map & Directions | Add To Calendar ]

February Meeting - What You Need to Know about Parallelism
Thursday, February 02, 2012 6:00 PM, Roanoke, VA
The Free Lunch is Over: What You Need to Know about Parallelism
Presented by Stuart Leitch:
Single thread CPU performance improvements have largely stalled out. The sequential performance “free lunch” most developers enjoyed from hardware advances is over. With the industry shift to multiple core systems, performance has to be realized through concurrency and many developers will find themselves building applications designed to scale as the number of cores increases. This session will provide a broad review of the trends in parallelism and an overview of major patterns for parallelizing your applications.

[ Event Details | Map & Directions | Add To Calendar ]

Want your events listed? You can add them here.

CapArea.NET Follow-up: HTML5 Metro apps resources

Wed, 25 Jan 2012 14:22:09 GMT

My thanks to everyone who came out tonight for the Capital Area .NET User Group for my presentation on developing Windows 8 Metro style applications using HTML5 and JavaScript. Great questions and lots of great discussion. Thanks for keeping me on my toes!

As promised, I wanted to share pointers to some additional recorded sessions from BUILD that you may find useful, as well as a link to the sample Canvas Paint app that I used for my demos. If you're interested in getting the additional tweaks I added to the sample to support persisting the brush color and size, etc. please drop me a note via my contact page, and I will be happy to share it.

Additional Related BUILD Sessions:

and the presentation on which my talk tonight was based:

APP-740T Metro style apps using HTML5 from start to finish

UPDATE: Nevin House, who attended last night's talk, got in touch with me via email, and recommended the following two talks on JavaScript, and I heartily agree…both are great talks and are highly recommended for anyone wishing to better understand JavaScript in the context of Metro style apps in Windows 8:

Both presentations feature some of the best presenters from BUILD. Enjoy!

Canvas Paint Sample App

The Canvas Paint sample app, along with many other samples and demos, may be downloaded from the Samples area for Windows 8. The direct link to the Canvas Paint sample is:

http://code.msdn.microsoft.com/windowsapps/CanvasPaint-878fa5d5

Note that you can browse the code directly online, or download the sample and run it locally (if you have installed the Windows 8 developer preview).

Upcoming Events for January 23rd, 2012

Mon, 23 Jan 2012 14:36:05 GMT

Online

Microsoft-ComponentOne Hands-On-Workshops for Windows Phone:Session 1-Fast Track Your First App
Tuesday, January 24, 2012 11:00 AM, Online
Government and citizen-oriented apps represent a huge emerging market for mobile developers. These “Let’s Build Something Mobile” Workshops will walk you through the basics of creating, testing and deploying a Public Sector app, so that No Developer is Left Behind taking advantage of this new market. As a participant you will have the opportunity to create your own unique Public Sector Windows Phone app that is ready to be deployed to the Windows Phone Marketplace. During each of the two sessions, experts from Microsoft and ComponentOne will be available to answer questions and offer guidance.
During this workshop, you’ll be exposed to the basics of creating a Windows Phone App and deploying to the Marketplace. As an attendee, you will be given some time during the session to use what you’ve learned to develop your own apps which access freely-available Public Sector data. The presenter along with resources from Microsoft and ComponentOne will be available to support you along the way.
*Attendees will receive a complimentary 1-year subscription for ComponentOne Studio® for Windows Phone
Pre-requisite: Download/Install
* Visual Studio Express & Tools http://aka.ms/getphone
* ComponentOne Studio(r) for Windows Phone (Trial Edition) http://www.componentone.com/SuperProducts/StudioWindowsPhone/

[ Event Details | Add To Calendar ]

Microsoft-ComponentOne Hands-On-Workshops for Windows Phone Series: Session 1 - Fast Track Your First App
Tuesday, January 24, 2012 4:00 PM, Online
During this workshop, you’ll be exposed to the basics of creating a Windows Phone App and deploying to the Marketplace. As an attendee, you will be given some time during the session to use what you’ve learned to develop your own apps which access freely-available Public Sector data. The presenter along with resources from Microsoft and ComponentOne will be available to support you along the way.
*Attendees will receive a complimentary 1-year subscription for ComponentOne Studio(r) for Windows Phone
Pre-requisite: Download/Install
* Visual Studio Express & Tools http://aka.ms/getphone
* ComponentOne Studio(r) for Windows Phone (Trial Edition) http://www.componentone.com/SuperProducts/StudioWindowsPhone/

[ Event Details | Add To Calendar ]

Testing the Untestable: Unit Testing Legacy Code
Wednesday, January 25, 2012 9:00 AM, Online
Webinar Registration
Everybody has legacy code. How do you apply unit testing to existing code? Code that wasn’t meant to testing.
This is a hardcore session, where we take an open source application and add tests to it. In the process, we’ll refactor the code, discuss readability, and where to even begin.
This is an intensive demonstration of automated testing hard-core legacy code. If you are a legacy ninja, check it out.
Sign up and you will get a sneak preview of the latest that's brewing in Typemock's labs

[ Event Details | Add To Calendar ]

Online - Azure Florida Association: Demystifying SQL Azure with SQL Azure MVP Vikas Sahni
Wednesday, January 25, 2012 6:30 PM, , Online
01/25/2012 - 4:00 PM - Online Meeting - What is SQL Azure, Value Proposition, Usage scenarios, Concepts and Architecture, What is there and what is not, Tips and Tricks

[ Event Details | Add To Calendar ]

Microsoft-ComponentOne Hands-On-Workshops for Windows Phone Series: Session 2 - Give Your App Some POP
Thursday, January 26, 2012 11:00 AM, Online
Enhance the look and functionality of your existing Windows Phone app (or one created in the Fast Track Your First App session) by leveraging capabilities specific to the Windows Phone API and by using advanced UI controls. You’ll get a feel for Microsoft’s Expression Blend design tools too. As an attendee, you will be given some time during the session to use what you’ve learned in order to make improvements to your apps. The presenter along with resources from Microsoft and ComponentOne will be available to support you along the way.
*Attendees will receive a complimentary 1-year subscription for ComponentOne Studio(r) for Windows Phone
Pre-requisite: Download/Install
* Visual Studio Express & Tools http://aka.ms/getphone
* ComponentOne Studio(r) for Windows Phone (Trial Edition) http://www.componentone.com/SuperProducts/StudioWindowsPhone/

[ Event Details | Add To Calendar ]

SharePoint ShopTalk
Thursday, January 26, 2012 12:30 PM, Online

REGISTER FOR A SPECIAL EDITION OF SHAREPOINT SHOPTALK: PANELIST SPOTLIGHT - TIPS & TRICKS WITH K2!
Sharepoint ShopTalk is a live, dynamic discussion held weekly amongst SharePoint Professionals. It is an excellent source for users who need to discuss challenges or are looking for answers to pressing contemporary SharePoint questions. All are welcome to take advantage of this forum that features leading experts in the field.
K2: No Code Solutions for Building Workflow Applications in SharePoint
See how K2 offers an easier way to build and automate process-driven solutions in SharePoint, plus provides the tools necessary to support the entire life cycle of your business processes, including workflow design and modeling, business data and enterprise system integration, reporting and analysis, and process administration. All without code!
Benefits:
· Learn about key concepts and best practices of Business Process Management
· See how the K2 platform can be used to reduce time and costs through rapid workflow creation and deployment
· Learn how K2 can leverage and enhance your existing Microsoft investments
Speaker Bio
Greg Sanderson has 15 years of experience in application design, architecture, analysis, training, and project management. He is currently a technical sales engineer for K2 in the Eastern US and Canada regions. Prior to K2, Greg was responsible for managing application development projects for News America Marketing's internal and external online presence. He oversaw multiple development teams and areas of responsibility, including SharePoint and related .NET applications.

[ Event Details | Add To Calendar ]

Microsoft-ComponentOne Hands-On-Workshops for Windows Phone Series: Session 2-Give Your App Some POP
Thursday, January 26, 2012 4:00 PM, Online
Enhance the look and functionality of your existing Windows Phone app (or one created in the Fast Track Your First App session) by leveraging capabilities specific to the Windows Phone API and by using advanced UI controls. You’ll get a feel for Microsoft’s Expression Blend design tools too. As an attendee, you will be given some time during the session to use what you’ve learned in order to make improvements to your apps. The presenter along with resources from Microsoft and ComponentOne will be available to support you along the way.
*Attendees will receive a complimentary 1-year subscription for ComponentOne Studio(r) for Windows Phone
Pre-requisite: Download/Install
* Visual Studio Express & Tools http://aka.ms/getphone
* ComponentOne Studio(r) for Windows Phone (Trial Edition) http://www.componentone.com/SuperProducts/StudioWindowsPhone/

[ Event Details | Add To Calendar ]

VA

High Availability and Disaster Recovery for SQL 2012
Monday, January 23, 2012 7:00 PM, Vienna, VA
NOVA SQL User Group Meeting
SQL 2012 introduces a multitude of changes in the HA and DR stacks. We will review the options we currently have available in SQL 2008 R2, and discuss what changes both in clustering and the big new feature of SQL 2012 AlwaysOn Availability Groups. Joe will give a demo of the Availability Groups feature, and show how you can have a multi-site DR scenario without even talking to your SAN admin.
Joey D'Antoni is a DBA with over a decade of experience working in both Fortune 500 and smaller firms. He is currently working at Comcast. He holds a BS in Computer Information Systems from Louisiana Tech University, and a MBA from North Carolina State University. He is the Vice President of the Philadelphia SQL Server Users Group, and a member of the board of the SQL/Oracle and Health Care PASS VCs. Joe is a frequent speaker a local user groups, Code Camps, and SQL Saturdays.

[ Event Details | Map & Directions | Add To Calendar ]

Windows 8 Metro Apps using HTML 5 From Start to Finish - G. Andrew Duthie (Microsoft)
Tuesday, January 24, 2012 6:30 PM, Vienna, VA
Get started writing Metro style apps using your HTML5, JavaScript, and CSS skills today! Come dive into the specifics of this exciting platform and see how you can use your Web skills to build deeply-integrated Windows apps. You’ll discover how this mirrors or differs from traditional Web programming and how to harness the rich capabilities of Windows 8 through JavaScript and the Windows Runtime.

G. Andrew Duthie, aka devhammer, is the Developer Evangelist for Microsoft’s Mid-Atlantic States district, where he provides support and education for developers working with the .NET development platform. In addition to his work with Microsoft, Andrew is the author of several books on ASP.NET and web development, and has spoken at numerous industry conferences from VSLive! and ASP.NET Connections, to Microsoft’s Professional Developer Conference (PDC) and Tech-Ed. Andrew has been participating in the user group community since way back in 1997, when one of his co-workers dragged him out to the Internet Developers User Group in Tyson's Corner, VA, and he's been hooked ever since.
Andrew is also the creator and developer of Community Megaphone, a site designed for promoting and finding developer community events.
In addition to his work in software development, Andrew has enjoyed some recent forays into the world of hardware experimentation, including developing for Kinect and .NET Gadgeteer, using his newly-formed hardware chops to do everything from blinking LEDs and making strange noises, to flying a helicopter with his bare hands.
Andrew can be reached through his blog at http://devhammer.net/. You can also follow Andrew on twitter @devhammer.

[ Event Details | Map & Directions | Add To Calendar ]

Want your events listed? You can add them here.

Introducing Devhammer's Garage

Sat, 21 Jan 2012 15:27:50 GMT

Over the last few months, I've spent a good bit of my free time (and some of my not-so-free time) learning about hardware and microcontrollers. One product of this will be a series of blog posts I'm working on detailing one of the projects I've built using Kinect, .NET Gadgeteer, and a few other odds and ends. I also just started working on my first from-scratch robot with my kids yesterday. So I figured there might be a need for a specific landing point on my site for my hardware-related adventures, and I've decided to call it Devhammer's Garage.

In the garage, you'll find information about my current hardware projects, including photos, links to other interesting sites, and more. If you're a geek who's into making stuff, I hope that you'll find Devhammer's Garage a useful addition, and I welcome comments, questions, and suggestions. And to whet your appetite, here's a picture of my next build-in-progress, which I call the Hydrabot (so named for the fact that it's powered by GHI's FEZ Hydra .NET Gadgeteer mainboard):

The gearbox is a Tamiya double gearbox geared at 114.7:1, and powered by two separate motors. The wheels are from a LEGO Mindstorms NXT set, attached using adapters that Tamiya offers for their hex shafts. The Hydra mainboard and Seeed Studios OLED Display module are mounted to a Tamiya Universal Plate kit, and not visible in the photo above is a ball caster which will allow the robot to turn easily based on difference in speed between the two front wheels.

I'm early in the build process, and I'm kind of designing this first robot as I go along, so I'm still deciding on what kind of sensors to use to help it navigate, etc. The Tamiya parts are very easy to work with. Assembling the gearbox took about 40 minutes or so, in part because I was showing my kids what I was doing as I was doing it, and in part because I took my time to ensure that both sides were geared identically. One advantage of using a gearbox like this is that you can get pretty good torque from even the small DC motors that come with the gearbox, which should help power over any obstacles in the way.

I'll post more pics and videos as the project progresses, and will have more detailed build information over at the Garage.

Upcoming Events for January 16th, 2012

Mon, 16 Jan 2012 16:59:52 GMT

DC

Break the If Habit
Tuesday, January 17, 2012 6:30 PM, Washington, DC
Branching logic is one of the foundations of computer programming. But like vodka, the If statement is best consumed in moderation. While the first If is harmless, and maybe even a little thrilling, soon there's a second, a third, a fourth and before you know it -- you wake up under your desk with a method you don't even recognize much less understand.
In this session we'll explore some of the common If abuses and learn how to refactor them into more readable and adaptable code. We'll use design patterns to put the demon If back in its bottle and keep it there. Saner code is within reach, and this is the first step to break the the If habit.

[ Event Details | Map & Directions | Add To Calendar ]

Online

Testing the Untestable: Unit Testing Legacy Code
Wednesday, January 18, 2012 10:00 AM, Online
Everybody has legacy code. How do you apply unit testing to existing code? Code that wasn’t meant to testing.
This is a hardcore session, where we take an open source application and add tests to it. In the process, we’ll refactor the code, discuss readability, and where to even begin.
This is an intensive demonstration of automated testing hard-core legacy code. If you are a legacy ninja, check it out.
Everyone is welcome but it is most appropriate for people with a background in unit testing and medium to advanced skills. If you’re a unit testing ninja, this webinar is for you!

[ Event Details | Add To Calendar ]

PA

Philly .NET Monthly Meeting: ALM
Wednesday, January 18, 2012 5:30 PM, Malvern, PA
This month we will be discussing Application Lifecycle Management

[ Event Details | Map & Directions | Add To Calendar ]

VA

The Blackboard Advanced Platform Environment (A performance based private cloud solution)
Thursday, January 19, 2012 6:30 PM, Arlington, VA
A discussion on the private cloud hosting platform deployed to support Blackboard Managed Hosting. The Blackboard Advanced Platform Environment (APE) is a performance based cloud platform supporting more than 1000 clients and 10’s of millions of educational clients around the globe.

[ Event Details | Map & Directions | Add To Calendar ]

CapArea Silverlight SIG - The XNA Framework and Windows Phone 7 - Franklin Balaguer
Thursday, January 19, 2012 7:00 PM, Arlington, VA
Abstract:
XNA Game Studio and the XNA Framework are designed for cross-platform gaming scenarios with support for Windows Phone 7, Xbox 360, and Windows-based PCs. This allows you to target more platforms from the same code base. XNA Game Studio includes the XNA Framework, a set of managed libraries designed for game development based on the Microsoft .NET Framework.
In this workshop, I will go over some free resources available to help you create your own Windows Phone 7 game and then sell it on the WindowsPhone MarketPlace. I will also touch on the basics of XNA (drawing a sprite, handling of input touch, playing sounds, and game state management). Lastly, I will discuss the certification process for getting your game approved and placed on the MarketPlace.
Bio:
Franklin Balaguer is U.S. Air Force veteran. He spent 8 years in the Air Force managing vehicle fleets at various bases in the United States and while deployed overseas. Frank got his start with computers writing programs to automate tasks and processes everywhere he encountered them. While in the Air Force, he also acquired several certifications including the Microsoft Certified System Engineer, which help him land a job at Accenture. Frank has been with Accenture for the past 11 years helping to write and deliver software to thier clients.

[ Event Details | Map & Directions | Add To Calendar ]

Want your events listed? You can add them here.

Upcoming Events for January 9th, 2012

Mon, 09 Jan 2012 23:38:26 GMT

DC

Break the If Habit
Tuesday, January 17, 2012 6:30 PM, Washington, DC
Branching logic is one of the foundations of computer programming. But like vodka, the If statement is best consumed in moderation. While the first If is harmless, and maybe even a little thrilling, soon there's a second, a third, a fourth and before you know it -- you wake up under your desk with a method you don't even recognize much less understand.
In this session we'll explore some of the common If abuses and learn how to refactor them into more readable and adaptable code. We'll use design patterns to put the demon If back in its bottle and keep it there. Saner code is within reach, and this is the first step to break the the If habit.

[ Event Details | Map & Directions | Add To Calendar ]

MD

RockNUG Release 5.7
Wednesday, January 11, 2012 6:30 PM, Rockville, MD
Montgomery College, Rockville
ROOM TC 232
Mobile Development in MVC4
by Kevin Jones
The next version of MVC4 will include new functionality making it easy to display different content for different devices. We'll learn about this functionality and extending it even further, allowing you to create rich MVC4 applications that look great no matter what you use to look at them on any device.
Kevin Jones is an Team Lead and Senior Consultant for LogicBoost, a leading software development company based in Washington DC.
6:30 - 7:00 n00b Presentation TBA
7:00 - 7:30 Pizza/Announcements
7:30 - 9:00 Featured Presentations Mobile Development in MVC4 - Kevin Jones

[ Event Details | Map & Directions | Add To Calendar ]

Online

How to Test Dependencies and Legacy Code
Wednesday, January 11, 2012 10:00 AM, Online
You may have already started unit testing or at least understand the basics. But there’s one large obstacle that stands in your way: dependencies. Most code was not written to be easy to test. How can you test dependencies? Join this webinar and learn different methods and tools that help create real unit tests.
Learn:
• Why you are writing legacy code
• Hand rolled mocks
• Mocking frameworks
• What makes a good unit test

[ Event Details | Add To Calendar ]

SSWUG Webcast: Creating Dynamic Reports in Excel 2010 using PowerPivot
Wednesday, January 11, 2012 11:00 AM, Online
This introductory session explores PowerPivot's ability to create dynamic reports in Excel 2010.
Javier Guillén, who is a Business Intelligence consultant for Mariner, will explore PowerPivot technology through concrete examples that explain how to create dynamic reports by importing data from multiple sources, re-shaping the inherent data model and creating powerful calculations using Data Analysis Expressions (DAX).

[ Event Details | Add To Calendar ]

KnoxSQL Virtual Meeting:Patrick Leblanc-Build Your First SSAS Tabular Model
Wednesday, January 11, 2012 12:00 PM, Knoxville, Online
In this session I will demonstrate how to use the new features in SQL Server 2012 to develop a BI Semantic Tabular Model in Analysis Services. In addition, I will demonstrate how to visualize the model using SSRS, Power View, Excel and Performance Point.

[ Event Details | Add To Calendar ]

Testing the Untestable: Unit Testing Legacy Code
Wednesday, January 18, 2012 10:00 AM, Online
Everybody has legacy code. How do you apply unit testing to existing code? Code that wasn’t meant to testing.
This is a hardcore session, where we take an open source application and add tests to it. In the process, we’ll refactor the code, discuss readability, and where to even begin.
This is an intensive demonstration of automated testing hard-core legacy code. If you are a legacy ninja, check it out.
Everyone is welcome but it is most appropriate for people with a background in unit testing and medium to advanced skills. If you’re a unit testing ninja, this webinar is for you!

[ Event Details | Add To Calendar ]

PA

Philly .NET Hands on
Monday, January 09, 2012 5:30 PM, Fort Washington, PA
Monthly hands-on meeting at DeVry Univ. We will be continuing our discussion on Windows 8 and Metro style development with HTML5, JavaScript and Expression Blend.

[ Event Details | Map & Directions | Add To Calendar ]

Philadelphia VFP User Group
Tuesday, January 10, 2012 7:00 PM, Fort Washington, PA
The next meeting of the Philadelphia VFP User Group will be Tuesday, January 10. As usual, feel free to bring some dinner and come as early at 6:30 PM.
Our speaker this month will be Bob Pierce. He will demonstrate building a small VFP project that can be used to display status info and data that is simple to build yet has a modern App/Gadget feel using just basic VFP controls and classes. If there is time he will discuss his recent adventures in bar-coding and lot control and some of the issues he ran into as well as the advantages it has delivered already and future planned enhancements.
We’re looking for speakers for upcoming meetings. If you have something to share with the group (whether it’s 10 minutes or the whole session), please get in touch with Bob, rpierce@smooth-on.com.

[ Event Details | Map & Directions | Add To Calendar ]

VA

DC Alt.Net: "Overcoming the Obstacles, Pitfalls, and Dangers of Automated Testing"
Wednesday, January 11, 2012 6:30 PM, Arlington, VA
Overview: Have you ever bumped into a wall with your automated tests? Many developers bump into various roadblocks and hurdles when writing test code. Are your test methods starting to fail because the code-under-test uses DateTime.Now? Are your automated integration tests failing because the database they integrate with keeps changing? Do you have an explosion of test methods, with the ratio of test code to code-under-test way too high? Is your effort to refactor and improve code overwhelmed by the time it takes to rewrite all those failing unit tests?
This presentation is about clearing away automated testing obstacles, avoiding common pitfalls, and staying away from dangerous practices.
About the Author: Stephen Ritchie brings over 20 years of development experience and is the author of the soon-to-be-released Pro .NET Best Practices.

[ Event Details | Map & Directions | Add To Calendar ]

The Blackboard Advanced Platform Environment (A performance based private cloud solution)
Thursday, January 19, 2012 6:30 PM, Arlington, VA
A discussion on the private cloud hosting platform deployed to support Blackboard Managed Hosting. The Blackboard Advanced Platform Environment (APE) is a performance based cloud platform supporting more than 1000 clients and 10’s of millions of educational clients around the globe.

[ Event Details | Map & Directions | Add To Calendar ]

CapArea Silverlight SIG - The XNA Framework and Windows Phone 7 - Franklin Balaguer
Thursday, January 19, 2012 7:00 PM, Arlington, VA
Abstract:
XNA Game Studio and the XNA Framework are designed for cross-platform gaming scenarios with support for Windows Phone 7, Xbox 360, and Windows-based PCs. This allows you to target more platforms from the same code base. XNA Game Studio includes the XNA Framework, a set of managed libraries designed for game development based on the Microsoft .NET Framework.
In this workshop, I will go over some free resources available to help you create your own Windows Phone 7 game and then sell it on the WindowsPhone MarketPlace. I will also touch on the basics of XNA (drawing a sprite, handling of input touch, playing sounds, and game state management). Lastly, I will discuss the certification process for getting your game approved and placed on the MarketPlace.
Bio:
Franklin Balaguer is U.S. Air Force veteran. He spent 8 years in the Air Force managing vehicle fleets at various bases in the United States and while deployed overseas. Frank got his start with computers writing programs to automate tasks and processes everywhere he encountered them. While in the Air Force, he also acquired several certifications including the Microsoft Certified System Engineer, which help him land a job at Accenture. Frank has been with Accenture for the past 11 years helping to write and deliver software to thier clients.

[ Event Details | Map & Directions | Add To Calendar ]

Want your events listed? You can add them here.

GHI (non-beta) .NET Gadgeteer SDK released!

Fri, 06 Jan 2012 20:41:52 GMT

UPDATE: I'm hearing reports that the link to the SDK is broken at the moment. I think GHI may be updating it to link in an installer they're including for the Gadgeteer SDK produced by Seeed Studio, another maker of Gadgeteer Modules. I will update the post again when the SDK is available again.

UPDATE 2: Turns out, the reason the link was down temporarily was that, in typical GHI fashion, the GHI crew was fixing a couple issues, one of which was one I reported late last night when the initial OSH SDK was released. Talk about a quick turnaround! Kudos to Gus and crew for the great customer support they provide. They also integrated an installer for the SDK for Seeed Studio Gadgeteer modules, so you can use one installer to get support for all GHI hardware, plus all the modules currently available from Seeed Studio (which GHI sells on their website). Nice!

Note that if you installed the bits from last night, you only need to run the Seeed Studio SDK installer (it's in the Installers folder, IIRC) and update the firmware for the FEZ Hydra, if that's the board you have. Everything else is the same.

Details at http://www.tinyclr.com/forum/12/5368

For folks who've been following my Gadgeteer adventures, if you have a FEZ Spider or FEZ Hydra Gadgeteer board, you'll want to check out the following forum thread:

http://www.tinyclr.com/forum/12/5358/

Or just jump on over to the support page:

http://tinyclr.com/support/

to download the new SDK. You can view the release notes at:

http://www.tinyclr.com/release-notes/

Here's a pic of my Spider running a demo project (you can get the project here), using the updated SDK and firmware:

Upcoming Events for January 3rd, 2012

Tue, 03 Jan 2012 18:12:17 GMT

DC

SharePoint 2010 Event Receivers (Presentation)
Thursday, January 05, 2012 7:00 PM, Washington, DC
Presentation Description: This presentation titled SharePoint 2010 Event Receivers, is a beginning to intermediate look at Event Receivers and Event Handlers in SharePoint 2010. We will discus the different types of event receivers but focus on those related to list item events. Some basic C# code will be shown and explained followed by a demo. Throughout the presentation real world examples and stories will be used in order to show the ease of use and power of list item event receiver features in SharePoint 2010.
Bio: Tim Ferro is an energetic developer/architect/consultant that provides SharePoint 2010 and MOSS 2007 solutions on high impact government projects. He is currently working with SharePoint 2010, WSS 3.0, and MOSS 2007, architecting enterprise solutions and environments. He provides expertise in both out-of-the-box and custom SharePoint solutions as well as user interface enhancements.
www.timferro.com
Twitter: @timferro
Transportation Info: Our new location is one block from the Farragut North Metro station and 3 blocks from the Farragut West Metro station. Address: 1200 18th St., NW Suite #LL-100, Washington, DC
Can't make it in person? Don't worry! We broadcast all of our sessions online too! Details to be sent the day of the this event.

[ Event Details | Map & Directions | Add To Calendar ]

RockNUG Release 5.7
Wednesday, January 11, 2012 6:30 PM, Rockville, MD
Montgomery College, Rockville
ROOM TC 232
Mobile Development in MVC4
by Kevin Jones
The next version of MVC4 will include new functionality making it easy to display different content for different devices. We'll learn about this functionality and extending it even further, allowing you to create rich MVC4 applications that look great no matter what you use to look at them on any device.
Kevin Jones is an Team Lead and Senior Consultant for LogicBoost, a leading software development company based in Washington DC.
6:30 - 7:00 n00b Presentation TBA
7:00 - 7:30 Pizza/Announcements
7:30 - 9:00 Featured Presentations Mobile Development in MVC4 - Kevin Jones

[ Event Details | Map & Directions | Add To Calendar ]

Online

Free 30 minute Webcast: A DBA’s Guide to ORMs
Tuesday, January 03, 2012 12:30 PM, Online
Developers often use tools, like Entity Framework or NHibernate, to make it easier to work with the database. These tools sometimes cause problems for developers and DBAs alike. In this talk, we’ll talk about the terminology and techniques used with an ORM. We’ll also uncover ways to help DBAs work with developers, detect problematic queries, and improve performance in both the database and the application. Register today.
Jeremiah Peschka: http://www.brentozar.com/consultants/jeremiah-peschka

[ Event Details | Add To Calendar ]

Introduction to Unit Testing
Wednesday, January 04, 2012 10:00 AM, Online
Software testing isn’t just a task for QA. In order to prevent bugs and release quality code to market, you also need developer testing, including unit testing. Discover why you should start unit testing, and how you can get started with automated tests quickly.
Learn:
• Benefits of unit testing
• xUnit Frameworks
• The difference between unit testing and test driven development (TDD).
Join this webinar to learn what you need to know in order to start testing today.
You may also win a free Typemock Isolator license

[ Event Details | Add To Calendar ]

How to Test Dependencies and Legacy Code
Wednesday, January 04, 2012 10:00 AM, Online
Software testing isn’t just a task for QA. In order to prevent bugs and release quality code to market, you also need developer testing, including unit testing. Discover why you should start unit testing, and how you can get started with automated tests quickly.
Learn:
• Benefits of unit testing
• xUnit Frameworks
• The difference between unit testing and test driven development (TDD).
Join this webinar to learn what you need to know in order to start testing today.
You may also win a free Typemock Isolator license

[ Event Details | Add To Calendar ]

How to Test Dependencies and Legacy Code
Wednesday, January 11, 2012 10:00 AM, Online
You may have already started unit testing or at least understand the basics. But there’s one large obstacle that stands in your way: dependencies. Most code was not written to be easy to test. How can you test dependencies? Join this webinar and learn different methods and tools that help create real unit tests.
Learn:
• Why you are writing legacy code
• Hand rolled mocks
• Mocking frameworks
• What makes a good unit test

[ Event Details | Add To Calendar ]

SSWUG Webcast: Creating Dynamic Reports in Excel 2010 using PowerPivot
Wednesday, January 11, 2012 11:00 AM, Online
This introductory session explores PowerPivot's ability to create dynamic reports in Excel 2010.
Javier Guillén, who is a Business Intelligence consultant for Mariner, will explore PowerPivot technology through concrete examples that explain how to create dynamic reports by importing data from multiple sources, re-shaping the inherent data model and creating powerful calculations using Data Analysis Expressions (DAX).

[ Event Details | Add To Calendar ]

VA

Unleashing your code-fu with code katas
Thursday, January 05, 2012 6:00 PM, Roanoke, VA
We've all heard that it takes 10,000 hours of practice to "master" a skill. What they neglect to mention is that it takes 10,000 quality, effective hours of practice to master that skill. In software development, we "practice" on the job. And, usually, it's doing the same things, over and over, day in and day out. In this presentation you'll be provided with resources and techniques that will help you "practice" software development more effectively - in only 30 minutes a day!

[ Event Details | Map & Directions | Add To Calendar ]

DC Alt.Net: "Overcoming the Obstacles, Pitfalls, and Dangers of Automated Testing"
Wednesday, January 11, 2012 6:30 PM, Arlington, VA
Overview: Have you ever bumped into a wall with your automated tests? Many developers bump into various roadblocks and hurdles when writing test code. Are your test methods starting to fail because the code-under-test uses DateTime.Now? Are your automated integration tests failing because the database they integrate with keeps changing? Do you have an explosion of test methods, with the ratio of test code to code-under-test way too high? Is your effort to refactor and improve code overwhelmed by the time it takes to rewrite all those failing unit tests?
This presentation is about clearing away automated testing obstacles, avoiding common pitfalls, and staying away from dangerous practices.
About the Author: Stephen Ritchie brings over 20 years of development experience and is the author of the soon-to-be-released Pro .NET Best Practices.

[ Event Details | Map & Directions | Add To Calendar ]

Want your events listed? You can add them here.

Visualizing Layout in HTML5 Canvas with Gridlines

Tue, 20 Dec 2011 03:21:54 GMT

I'm in the process of finalizing my preparations for tomorrow's HTML5 Game Camp in New York City, and figured I'd share one of the functions I put together to help in the process of visualizing some of the different ways you can draw and manipulate objects on an HTML5 Canvas object. It's a simple function called renderGrid, which takes as arguments the ID of the canvas you want to draw on, the pixel interval for the gridlines, and the color of the lines, and draws out a grid just like you'd see on graph paper. Call this function before you start drawing objects on your canvas, and you'll have a nice reference grid to help you more easily visualize the layout. You can customize it to your liking by tweaking the pixel interval, and it's relatively unobtrusive in your code.

Here's what it looks like, with a Bezier curve drawn with the function, context.quadraticCurveTo(250, 100, 450, 250);, with a grid pixel interval of 10:

And here's a fiddle with the code:

Hope you find it useful!

Great Sites and Blogs for Learning about .NET Gadgeteer

Sat, 17 Dec 2011 07:21:59 GMT

As anyone following my blog or twitter feed could probably tell, in between HTML5 Web Camps and Game Camps, I've been doing a fair amount of work (and play) with .NET Gadgeteer. It's a great platform for learning about electronics and microcontrollers, and since the code is in C# and based on the .NET Micro Framework, it's familiar territory, at least on the software side.

As I've been moving from complete newb to a bit more experienced, I've had the pleasure of presenting some talks on .NET Gadgeteer with fellow Mid-Atlantic Microsoftie Pete Brown, including at CMAP Code Camp last month (Pete has a post up on his blog with a series of videos of our talk, recorded by Lewis Berman, from Loyola University, where the code camp was held).

Pete's blog is a great resource for all kinds of geekiness, from Silverlight and WPF tips, to posts about his adventures in synthesizer assembly and programming, with of course a healthy dose of .NET Gadgeteer for spice.

I've also run across a few other sites and blogs that are extremely valuable for any folks looking for more information on .NET Gadgeteer, so I figured I'd post them here.

Manufacturers

First, a list of the folks building Gadgeteer boards and modules:

GHI Electronics – One of the first companies to release a .NET Gadgeteer mainboard, the FEZ Spider, and supplier of many modules as well.
Seeed Studio (note the extra "e") – Maker of numerous sensor modules, from gyro and compass to accelerometer and GPS.
Sytech Designs, Ltd. – Makers of the Nano mainboard and several modules.

Community and Microsoft Sites

Here are some good places to go to ask questions about .NET Gadgeteer hardware or software:

TinyCLR Gadgeteer Forum – Run by GHI, this forum is dedicated to .NET Gadgeteer topics, and is very active, with a number of smart and friendly folks from the community pitching in to help newcomers get started. I'm grateful to the many folks who've patiently answered my questions there.
Seeed Studio Forum – here you can find tech support for Seeed products.
Official .NET Gadgeteer Forums – Several members from the Microsoft Research team responsible for Gadgeteer post here, so this is a good place to get info straight from the source.
Core Gadgeteer API documentation – when you need to know what an API is for, this is a good place to start.
Gadgeteer Source on Codeplex – when documentation alone isn't enough, you can always check out the source code to see what's really happening under the covers.
Skewworks – run by Thomas W. Holtquist, and supplies additional software useful in .NET MF and Gadgeteer projects, including UI libraries and operating environments that allow for running multiple applications without reflashing.

Blogs

Here are some good blogs I've found that you should bookmark:

Official .NET Gadgeteer blog
Pete Brown's Blog – filtered to his Gadgeteer Posts
Valentin Ivanov's Blog – BreakContinue – Valentin has actually built not one, not two, but THREE Gadgeteer modules. impressive stuff!
Michael Dodaro's blog – Integral Design
Michael Ashby's blog – GOTO Loop
http://blog.ianlee.info/ – Ian only has a couple of posts that are specific to Gadgeteer, but there's a ton of great info on .NET Micro Framework that will be helpful to folks ready to move to intermediate topics.

Supplies

Although you can do a great deal with just a mainboard and a few modules, eventually you're going to want to go beyond, and for that you'll probably want some additional supplies, things like a breadboard, jumper wires, etc. While I've gotten a good bit of my supplies from the local Radio Shack (rumor has it that the new leadership at the company is looking to take them back to their roots of actually supplying a useful selection of electronic components rather than just being another consumer electronics and cell phone retailer), one of the best places I've found to get just about anything you might need for your Gadgeteer projects is Sparkfun. While they don't sell Gadgeteer mainboards or modules, they do have all kinds of cool supplies, from LEDs to header pins for your Extender Module, jumper wires, servos, motors, and more. You can even make a wish list, so that those who know what a geek you are can help you with your habit…here's mine:

.NET Gadgeteer is shaping up as a neat and easy way to take the plunge into electronics and microcontrollers. I know for me, the higher-level API that Gadgeteer favors eased the learning curve and kept me interested by making it easy to succeed. Now that I've spent some time with the hardware, I'm digging deeper and getting into breadboarding circuits and learning even more. I'll be sharing some of my adventures in hardware, along with my usual fare of .NET, HTML5 and Javascript.

Have I missed anything…know of additional resources for Gadgeteer? Drop me a note and let me know!