Mark Chouanard

Access IIS on Windows7 VM from the Mac OS

Tue, 01 Jan 2013 16:47:00 PST

Challenge

Developing both native and web application components targeted to different platforms can prove to be challenging for developers running the Mac OS and Windows VM on the same physical machine.

When developing a native iOS client application using Xcode on the Mac and an ASP.NET MVC web application using Visual Studio 2012 running on Windows Internet Information Services (IIS), I needed the ability to make a Web API call from Xcode’s iOS Simulator on the Mac to the IIS web application running on the Win7 VM.

With a few simple steps you can setup your Mac to allow http access between the Mac OS and the Windows VM to make development and testing much easier.

Solution

Windows7 VM (Parallels)

From the Windows Control Panel, open up the Windows Firewall client.
From the Firewall client, click on Advanced Settings and select Inbound Rules.
Scroll down to the rule titled: World Wide Web Services (HTTP Traffic-In), right-click and select Properties.
Set to Enabled.
Open a Windows Command Prompt and type: ipconfig to get your current IP address.

Mac OS

Use the current IP address when calling the web application URL within your iOS code on the Mac.
Now you can access the IIS web server on the Win7 VM from any browser or web tool residing on the Mac.

Amazing Hickory-Smoked Grilled Turkey

Thu, 22 Nov 2012 14:32:10 PST

Over the years, I’ve tried many different ways of preparing our Thanksgiving turkey but none have produced a bird as succulent and delicious as charcoal grilling with hickory smoking chips.

Here’s my can’t miss, do-it-yourself guide to grilling the perfect bird.

Food Preparation

We always prefer naturally grown, organic foods. Today’s turkey is vegetatian fed and contains no antibiotics preservatives or added hormones.

Brining the turkey is the process of soaking the bird in a salt-water ‘brine’ for 12-24 hours prior to cooking. There’s many different opinions on whether the brining process actually contributes to cooking a moister, more tender turkey. After years of trying it both ways, I’m convinced that brining is always the best way to go.

The night before grilling, I mix up a simple brine concoction of mostly salt water, seasonings and vegetables. Use any brine recipe you’d like, I happen to be partial to Matha Stewart’s recipe.

Put the turkey inside doubled plastic cooking bags, inside a large cooking pot. Pour the brine mixture over the turkey, inside the cooking bags. Seal up the bags and place in the refrigerator overnight.

Grill Preparation

I use a Weber, kettle-style, charcoal grill which works great for turkeys up to about 22 pounds. Today’s turkey weighs in at a bit over 13 pounds which is a perfect size for a smaller gathering.

Before starting, get yourself a bag of decent quality charcoal briquettes and a bag of hickory smoking chips.

Starting with a clean grill, fire up about 60-80 charcoal briquettes. I prefer to use a stovepipe charcoal starter which holds about 80 regular sized briquets (yes, I counted).

When coals are mostly white hot (20-30 minutes), spread out evenly in a 12-16 inch diameter. Place clean grill grate directly over hot coals.

Prepare the smoking bags by filling two pieces of heavy duty aluminum foil (approximately 12” x 24”) with hickory chips.

Fold the foil into 6” x 6” packets and make sever holes in the top of the foil.

Fully open the top and bottom vents on the gril.

The Grilling Process

The general rule of thumb for grilling a turkey is approximately one hour per 5 pounds of bird. Using this formula, our 13 pound turkey should take a little over 2.5 hours to grill but depending on grill size, charcoal and even outdoor temperature, your actual cooking time will vary. I recommend using a meat thermometer to be sure you don’t under or over cook your bird.

Remove the turkey from the brine mixture and pat dry.

Brush the turkey liberally with olive or grapeseed oil to prevent bird skin from sticking to grill.

Place bird directly onto grill, rolling slightly every 2 minutes until all sides of the turkey have kissed the grill grate and have a niced browned tone.

Remove turkey and grate from the grill.

Add a few handfuls of briquets and throw on the foil smoking bags containing the hickory chips.

After 5-10 minutes, spread the charcoals around the outside edges of the grill, leaving the center of the grill open.

Place the smoking bags directly onto the hot coals on either side of the grill, leaving the center open.

Place the grill grate onto the grill.

Put the turkey in a disposable foil pan or some rolled up heavy duty aluminum oil big enough to catch and contain the drippings.

Pour 1 cup of water into the body cavity, place turkey onto grill and cover.

Check every 30 minutes. Baste the turkey and add additional coals as needed (depending on bird size and cooking time).

Begin checking meat temperature well in advance of the predetermined cooking time. The grill should have a steady stream of sweet smelling hickory smoke for most of the cooking cycle.

When the temperature deep within the breast reaches 160º F, remove the bird from the grill. Remove the turkey from cooking pan, cover with aluminum foil and let stand for 30-40 minutes before carving.

The Finale

Our 13 pound turkey hit 160º F at exactly the 2 hour mark. After setting for 45 minutes, here’s what we have to carve:

This grilled turkey was simple to make and may be the very best we’ve ever eaten. Give it a try yourself and let me know what you think. I can guarantee you won’t be disappointed.

Bon appétit

Executing Cross Domain POST Using jQuery and ASP.NET Web API

Mon, 05 Nov 2012 04:30:16 PST

Challenge

Many of us find ourselves developing and supporting basic HTML websites without the ability to do much, if any, server side programming on the hosting domain. One reoccurring requirement I see is to provide the user the ability to submit form information to a web service which could be used for simple contact, email or event sign-up processing.

The problem with executing this seemingly trivial task is the inability to POST data from a form on one domain to a web service residing on another domain. This is for good reason. Web browsers by default, do not allow XMLHttpRequest (Ajax) requests to be made from one domain to another. This is to prevent cross-site request forgery which can occur when a malicious website causes a user’s browser to perform an unwanted action on a trusted site for which the user is currently authenticated.

There are however, valid reasons to allow the use of this cross domain functionality which has led to the development of the Cross-Origin Resource Sharing (CORS) specification from the World Wide Web Consortium (W3C). This specification allows the server to process POST requests from the client based on the use of custom HTTP headers, as well as the browsers native ability to support the CORS standard. As of this writing, CORS is fully supported in the most current versions of Chrome, Firefox and Opera. CORS is partially supported in IE8 and above via the XDomainRequest object.

Objective

My goal here was to build a simple web service using the new ASP.NET Web API that would receive and process contact information submitted from multiple websites. Each website would have a simple form containing Name, Email Address and a general comment type field. The user would fill out and submit the form which will POST to an ASP.NET Web API. The service would determine which domain the request came from and process it accordingly (logging to database, email response or forward, etc.).

Solution

To accomplish this task, we’ll need to employ the Cross-Origin Resource Sharing Specification. I found a great article by Carlos Figueira describing in detail how you can overcome this cross domain challenge by using a custom MessageHandler in our WebAPI to add the CORS required HTTP Headers to the request. I’ve also added my own twists on his solution and created a CrossDomainDemo application to demonstrate this functionality. This demo application is a solution containing two projects:

WebAPIApp is the application containing the Web API Controller which is called to process the form data posted from the client html site.
SimpleWebApp is the html web client from which the POST is executed.

Here are the basic steps involved in creating this solution.

SERVER SIDE

Build the CORS MessageHandler

I’ve used Carlos Figueira’s example to create the CorsHandler class. Each HTTP request is passed through a series of message handlers. The handler will then use the routing table to route the request to a Web API controller. Our CorsHandler will add the required headers which will enable the controller to process the cross-domain request successfully.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Net.Http;
using System.Threading.Tasks;
using System.Threading;
using System.Net;

namespace WebAPIApp.Handlers
{
    public class CorsHandler : DelegatingHandler
    {
        const string Origin = "Origin";
        const string AccessControlRequestMethod = "Access-Control-Request-Method";
        const string AccessControlRequestHeaders = "Access-Control-Request-Headers";
        const string AccessControlAllowOrigin = "Access-Control-Allow-Origin";
        const string AccessControlAllowMethods = "Access-Control-Allow-Methods";
        const string AccessControlAllowHeaders = "Access-Control-Allow-Headers";

        protected override Task SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
        {
            bool isCorsRequest = request.Headers.Contains(Origin);
            bool isPreflightRequest = request.Method == HttpMethod.Options;
            if (isCorsRequest)
            {
                if (isPreflightRequest)
                {
                    HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
                    response.Headers.Add(AccessControlAllowOrigin, request.Headers.GetValues(Origin).First());

                    string accessControlRequestMethod = request.Headers.GetValues(AccessControlRequestMethod).FirstOrDefault();
                    if (accessControlRequestMethod != null)
                    {
                        response.Headers.Add(AccessControlAllowMethods, accessControlRequestMethod);
                    }

                    string requestedHeaders = string.Join(", ", request.Headers.GetValues(AccessControlRequestHeaders));
                    if (!string.IsNullOrEmpty(requestedHeaders))
                    {
                        response.Headers.Add(AccessControlAllowHeaders, requestedHeaders);
                    }

                    TaskCompletionSource tcs = new TaskCompletionSource();
                    tcs.SetResult(response);
                    return tcs.Task;
                }
                else
                {
                    return base.SendAsync(request, cancellationToken).ContinueWith(t =>
                    {
                        HttpResponseMessage resp = t.Result;
                        resp.Headers.Add(AccessControlAllowOrigin, request.Headers.GetValues(Origin).First());
                        return resp;
                    });
                }
            }
            else
            {
                return base.SendAsync(request, cancellationToken);
            }
        }
    }
}

Register the new MessageHandler

Add the new CorsHandler to our list of message handlers from the Application_Start method in Global.asax

        
       protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();

            // Use LocalDB for Entity Framework by default
            Database.DefaultConnectionFactory = new SqlConnectionFactory("Data Source=(localdb)\v11.0; Integrated Security=True; MultipleActiveResultSets=True");

            RegisterGlobalFilters(GlobalFilters.Filters);
            RegisterRoutes(RouteTable.Routes);

            BundleTable.Bundles.RegisterTemplateBundles();
            GlobalConfiguration.Configuration.MessageHandlers.Add(new CorsHandler());
        }

Build the Model

Create a Contact class containing the 3 basic data elements passed in from the form.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebAPIApp.Models
{
    public class Contact
    {
        public string Name { get; set; }
        public string Email { get; set; }
        public string Message { get; set; }
    }
}

Build an API Controller with Post Method

[HttpPost]
public HttpResponseMessage Post(Contact contact)
{
    // Process the Form data
    // contact.Name, contact.Email and contact.Message

    // Send the client an HTML message indicating the status of processing the Form
    string responseMessageHTML = ('"Thank You! Thanks for contacting XYZ Company. Someone from our marketing team will be contacting '" + contact.Name + '", at '" + contact.Email);

    // Build an HTTPResponseMessage and return to client
    HttpResponseMessage responseMessage = new HttpResponseMessage();
    responseMessage.Content = new StringContent(responseMessageHTML);
    responseMessage.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");
    return responseMessage;
}

CLIENT SIDE

Add the web form to your html page

Add the jQuery AJAX call

$("#submit").click(function () {

    if ($("#contact-form").valid()) {
        var formData = $('#contact-form').serialize();
        $.support.cors = true;
        $.ajax({
            url: "http://apidomain/api/Contactform/Post",
            type: "POST",
            crossDomain: true,
            data: formData,
            dataType: "html",
            success: function (result) {
                $('#contactForm').html(result);
            },
            error: function (jqXHR, tranStatus, errorThrown) {
                $('#contactForm').html('"POST Error! Browser may not support Cross Origin Resource Sharing ');
        });
    }
});

Summary

Using these basic steps outlined above, I’ve now successfully built and deployed a single web service which processes form data posted from multiple html sites.

It’s a simple way to provide extended functionality when you don’t have access to server side programming on the hosting site’s domain or when you want to use a single web service to process and manage this common form data posted from multiple sites.

For more information I would highly recommend Carlos Figueira’s article and checkout the simple CrossDomainDemo project I’ve built and published over on Github.

Solving SQL Server Management Studio Connection Errors: 64 and 10054

Tue, 23 Oct 2012 16:29:00 PDT

I recently encountered an interesting problem when connecting SQL Server Management Studio client to a remote Windows Server 2008 R2 database server. When connecting using Windows Authentication, I received the following error message:

After some investigation, I discovered several potential causes but honed in on one in particular relating to kerberos. I found that there can be connection issues using Windows Authentication when the user belongs to ‘too many’ Active Directory groups.

Turns out the kerberos token (ticket to communicate) can actually become too big as a result of membership in a large number of AD groups. The solution to this problem is to increase the token size (default is 12000 bytes). Due to HTTP’s base64 encoding of authentication tokens limit, it’s recommended that the token size also not exceed 48000 bytes.

A simple fix for this issue is to set, or add, a MaxTokenSize Registry Key on the server offending database server.

Locate or create the following key in the registry:
System\CurrentControlSet\Control\Lsa\Kerberos\Parameters
Add the following registry value:
Name: MaxTokenSize
Data type: REG_DWORD
Radix: Decimal
Value: 48000
Reboot server

I discovered this error on multiple database servers throwing both Error 64 and Error 10054. The above solution fixed all issues on all servers.

Changing Menu Case in Visual Studio 2012

Thu, 16 Aug 2012 14:54:00 PDT

EMBRACE THE CASE?

Much has been made of the menu styling for the Visual Studio 2012 IDE being in ALL CAPS. Although I am not a big fan of the all caps menu, I do think some tend to go a bit overboard with the intense level of criticism of this UI design decision.

Nevertheless, if you’re not one who likes your IDE menu SHOUTING at you all day, there is a simple resolution to all of this. Install the VSCommands for Visual Studio 2012 extension from Squared Infinity.

Procedure

1) From the VS2012 menu, select TOOLS —> Extensions and Updates…

2) Go the the Visual Studio Gallery and search for ‘vscommands’.

3) Download and install the extension, then restart VS2012.

4) From the VS2012 menu, select TOOLS —> Options

5) The VSCommands options should now appear in your list

6) Click the Open Configuration button

7) Under IDE Enhancements, select Main Menu.

8) Change Main Menu letter case to Sentence Case and Save.

Result

And there you have it:

The menu should now appear in sentence case, as normal.

There are several other interesting configuration options you may want to check out as well, so download the VSCommands for Visual Studio 2012 extensions today.

Feasible Multitasking: Technology Podcasts

Fri, 06 Jul 2012 11:46:06 PDT

As demands on our time increase from all areas of our lives and the technologies we work with on a daily basis continue to change at a dizzying pace, it becomes more and more of a challenge for us to stay on top of the technology industry landscape. The sheer number of new JavaScript libraries alone is enough to give you heartburn by the thought of not using the right framework on your next project or not being in-the-know with your hipster colleagues and uber-geek friends.

Feasible Multitasking

In an excellent video presentation of his Personal Productivity Tips, Scott Hanselman discusses the use of multitasking to improve productivity. Scott uses the term ‘Feasible Multitasking’ to describe this intentional activity and gives other examples and tips on being a successful mutitasker. If you haven’t seen Scott’s video, I promise you that it is more than worth the 40 minutes is takes to watch.

Feasible multitasking is simply the art of increasing your productivity by doing simple, doable, ordinary things simultaneously. For example: reading the news on your iPad while commuting on public transportation, watching your favorite DVR’d television show while running on the treadmill, or one of my favorites; listening to podcasts while commuting to work, working out in the gym or even cutting the lawn.

Technology Podcasts

I start most weekdays with a 2 mile walk/run, after which I spend some time in the gym. I’ve learned that this is an ideal time to listen to podcasts. On alternating days, I have a lengthy commute to offices located in one of two cities. This drive time provides another great opportunity for me to pull out the iPod and catch up on the latest technology news and web development chatter.

There’s a lot of good podcasts available today, with great content on most any subject matter you can imagine, but I thought I’d share with you my current list of favorite technology podcasts:

The Big Web Show
Hosted by Jeffrey Zeldman, the godfather of web standards and all things web, The Big Web Show features interesting, high profile guests from the web industry with a heavy emphasis on web design, typography and content strategy.

This Developer’s Life
This is an interesting and well done podcast geared toward software developers. Hosted by Rob Conery and Scott Hanselman, This Developer’s Life is a quirky but relavent discussion on issues important to developers. Single word episodes titles such as; Revolt, Obsession, Typo and Dinosaurs give you some idea of the range and flavor of this show. Only drawback with TDL is that new episodes seem to be few and far between.

Amplified
I’ve recently discovered this podcast and have really grown to love it. Hosted by Dan Benjamin and Jim Dalrymple, Amplified focuses primarily on Apple technologies (Mac, iOS, iPhone, iPad, etc…) but also has a fair amount of guitar, music and recording talk. What a fabulous combination! This is a great podcast for long commutes. The last few episodes have clocked in at more than 90 minutes each.

Build and Analyze
Another 5by5 production hosted by Dan Benjamin and Marco Arment (founder of Instapaper) , Build and Analyze focuses largely on native and mobile mobile development and leans heavily toward the iOS platform.

Hanselminutes
This weekly podcast is probably my favorite in the technology genre. Geared primarily toward (but not limited to) the Microsoft development stack, Scott Hanselman’s weekly show covers a wide range of relevant topics of interest to anyone in the technology industry. Also most likely the longest running of the bunch, Hanselminutes is at show #325 of this writing. If there’s only one podcast on this list you’re able to work into your rotation, this is definitely the one.

Herding Code
Focused on Microsoft development technologies, Herding code covers a wide range of software development topics and is group hosted by K. Scott Allen, Kevin Dente, Scott Koon and Jon Galloway.

The Web Ahead
This is another 5by5 weekly podcast, hosted by Jen Simmons along with many high profile industry guests. The Web Ahead focuses on web development tools and technologies along with the most current trends in web design.

Wrap Up

Feasible multitasking can be a great way to improve your personal productivity and is most likely something you already do in some form or fashion. Multitasking while listening to podcasts is an easy way to efficiently and effectively utilize our time to expand our knowledge and remain current with our ever changing industry.

I believe the challenge for us is to become more intentional about this activity and to use it as an opportunity to gain knowledge and grow as technical professionals and realize improvement in other areas of our lives.

Do you utilize feasible multitasking? What are the activities and best times for you to multitask? Have a favorite technology podcast you’d like to share?

Using Web Fonts In Your ASP.NET MVC Application

Wed, 20 Jun 2012 18:00:00 PDT

Typography in Web Design

For many hardcore developers, the design of a web application may be no more than an afterthought. Unless they have the luxury of working with a designer, or they themselves have a keen sense for design, the developer can easily overlook the need or importance of typography and focus on only the basic visual or graphical design elements that go into building a web application.

This may be why HTML/CSS Frameworks like Twitter Bootstrap, HTML5 Boilerplate and 52 Framework are becoming more and more popular today. These frameworks can provide a quick and easy way to build nice looking web applications without spending much time on the design process. But even beyond making a website or application visually appealing, typography is most likely the last thing many developers think about.

Typography can be a great way to enhance the visual appearance of your application and improve the overall user experience. Selecting the appropriate font types, weights and stylings can help convey ideas, importance and emotion to the user. It can also improve the readability and comprehension of your content and greatly enhance usability and the overall quality of your design.

Choosing and Using Fonts

The challenge with selecting fonts for the web is knowing how they’ll actually render for the user. For the fonts to render as intended by the designer, the browser must have access to the dependent font files which may or may not be available depending on the operating system in which the browser is running.

For many years, web designers focused on using only the fonts which were likely to be present on a wide range of computers. Those considered ‘web-safe’ were:

Arial
Courier New
Helvetica
Times New Roman
Trebuchet
Georgia
Verdana

This short list offered little variety to the designer. Work arounds for this limitation included using images of text or embedded replacement techniques which required a browser plug-in (can you say Flash?). The problem with both of these methods was that the text in this form was not semantic, selectable or searchable.

Enter Web Fonts

One solution to this limitation was the development of web fonts, which could be available on any platform and served from an http request. In addition to having accessibility to a much wider range of typefaces, web fonts are also semantic, selectable, searchable and translatable into other languages. And because most all of today’s browsers support the use of web fonts, they can be reliably rendered on most any platform.

Integrating Web Fonts in Your ASP.NET MVC Web Application

So, how can you use web fonts in your ASP.NET MVC application? Here’s a simple, step-by-step procedure for adding web fonts to a generic ASP.NET MVC Internet application.

1) Choose a font service. There’s a growing list of web font services and providers which offer a wide array of free and paid for services. A few of the more popular services, in no particular order, would be:

I have a subscription to Typekit which I use for all of my web projects. For the purposes of this demonstration I’ll be using Typekit, but know that most all other font services work basically the same way.

2) Select the desired font. Typekit has a large library of available fonts and a rich user interface which allows you to see how the font will render. You can easily browse the font families by properties, classification or recommended use. For this demonstration, I’ve selected Bistro Script Web.

3) Generate your JavaScipt code provided by your font service:

4) Copy the JavaScript snippet into the <head> tag of your view engine’s _Layout.cshtml (Razor) or Site.Master (ASPX) file.

5) Generate your css selectors for the desired font families:

6) Add the css code into the Site.css file. For this example, I’ll change the font-family for the entire application by adding my “bistro-script-web” font to the css selector for the body tag:

NOTE: The generic ‘cursive’ font is set as a fallback font in the unlikelihood the primary font is unable to render correctly.

And that’s all there is to it. Now, instead of the default font-family: ”Segoe UI” which renders the page like this:

You can see the web application now uses the Typekit “Bistro Script Web” font which renders like this:

Now of course in the real world, I’d never recommend using a script font like this for an entire application. The point of this exercise is to easily show the difference between how the default font and web font render in a browser and to demonstrate how easy it is to implement web fonts into your projects.

Conclusion

The availability of web fonts opens up a wide range of possibilities for web designers and developers to use typography to enhance their web designs and to clearly deliver content and improve usability. As I hope you can see from this simple demonstration, implementing web fonts in an ASP.NET MVC web application is quick and easy.

Update: This article has been translated toSerbo-Croatian by Anja Skrba from Webhostinggeeks.com

Thoughts on CodeStock 2012

Sun, 17 Jun 2012 18:45:00 PDT

Attending technical conferences and events can be a great way to remain current with the software development industry’s continually changing technologies and expanding list of latest-and-greatest, must-haves, and gotta-be-using tools, libraries and frameworks. Billed as a two day event for technology and information exchange, created by the community, for the community, CodeStock 2012 didn’t disappoint.

Software developers, IT professionals, and entrepreneurs from a wide variety of technical industries gathered at the University of Tennessee’s Conference Center in Knoxville to listen, learn and share their knowledge and experiences through both formal talks and presentations as well as impromptu conversations before and after sessions, over lunch or in the hallways between the sessions.

Content is King

This was my first year attending CodeStock and I wasn’t really sure what to expect going in. In all honesty, my expectations weren’t very high, in part, due to the very low registration fee of $85, only $60 if you registered before mid-April. During the course of my career, I’ve attended many large scale events such as JavaOne and MIX where the costs were much higher as were the attendance, venue profiles and production values alike. After all, how much value could you really get from a $60 technical conference?

So with the low cost to attend this two-day event, I was happy to see the variety of relevant, high quality sessions and broad spectrum of subject matter being presented. The speakers at the sessions I attended, had a noticeably wide range of skills and experiences presenting to technical audiences. Some were very polished and for a few it was obvious it was their first time presenting at an event of this kind. All did a good job of communicating their material, engaging the audience and answering questions. A conference like CodeStock would a great venue for someone that has the interest and desire to get started speaking at technical events.

Highlights and Takeaways

Some of the session highlights and takeaways for me from this year’s CodeStock were:

Thinking in Patterns with Matt Ruma (@mattruma)
An interesting presentation on recognizing patterns in our everyday lives and how patterns are discovered and not created. I thought Matt did a nice job of describing several pattern families, reviewing the pro’s and perceived con’s of using patterns, and laying out a solid case for using patterns in software development and developing your own pattern library.

What’s New in .NET 4.5 with Layla Driscoll (@layladriscoll)
A nice presentation from Layla Driscoll on some of the newest features of the .NET 4.5 Framework along with with a live demonstration using the Web API, Entity Framework migration and asynchronous methods to assemble into a useable, Metro style UI application. This session provided a good overview of these new features including a demonstration of what it takes to put them all together.

Awesome Web Apps With Knockout.js and SignalR with Josh Carroll (@jwcarroll)
In perhaps the most entertaining and informative session I attended, Josh Carroll demonstrated the use of the Knockout.js JavaScript framework and the SignalR asynchronous library for .NET. Josh put together a great demo example using these technologies in a real world way. His code is available on GitHub and you can see the application at http://kanbandemo.apphb.com. I came to this session knowing very little about either technology but knowing that they were (as Josh did a great job of humorously playing up) all the rage which all the ‘hipsters’ will be using. I left this session wanting to learn more and thinking about opportunities to implement these technologies on future projects.

Single Page Applications With ASP.NET MVC4 with Roberto Hernandez (@hernandezrobert)
There’s a lot of attention today being focused on building highly responsive web applications that have a native mobile or desktop user experience. Roberto presented a step-by-step demonstration of building an SPA using ASP.NET MVC4 along with several of the newer features Visual Studio 12 provides and even included the Knockout.js framework. I thought he did a great job of demonstrating how to wire up all the pieces and utilizing the features of the Visual Studio IDE to build a single page application.

Microsoft Hosted Pre-Conference Events
In addition to the two days of CodeStock sessions, there were two, full day, pre-conference events hosted by Microsoft; Windows Azure Kick Start Developer Training and the Windows 8 Developer Camp presented by Jennifer Marsman (@jennifermarsman). I had the opportunity to attend the Windows 8 event and previously posted some of my notes from this session.

Final Thoughts

I thought that the event organizers and sponsors did a great job of putting things together and coordinating the venue with all the sessions and panel discussions as well as snacks, drinks and lunches. The logistics of the daily sessions at the conference center, the after hours events and the hotel accommodations were also nicely done.

The one and only drawback or negative comment I could think of was that the room size for some of the sessions was a bit too small for the size of the audience. This forced people to sit on the floor or not get into the room at all. I’m sure this is a common issue for events like this where you can’t always accurately gauge the interest of a particular subject or session. Aside from that, the event seemed to go off without a noticeable hitch.

So was CodeStock 2012 worth the $60, two days and 3.5 hour drive from Nashville? Absolutely! This two-day event, along with the one-day pre-conference session was well worth the cost, time spent and effort to get there. The organizers did a great job of putting together an agenda which covered a wide range on technologies and topics that are of great interest to our technical community today.

Watch the CodeStock site for the announcement of next year’s event dates and to get in on the early registration. You’ll be glad you did.

See you next year at CodeStock 2013!

Windows 8 Developer Camp

Thu, 14 Jun 2012 17:34:00 PDT

Today, I had the opportunity to attend the Windows 8 Developer Camp in preparation for tomorrow’s CodeStock 2012 kickoff in Knoxville, TN. The event was sponsored by Microsoft and presented by Jennifer Marsman, Principal Developer Evangelist with Microsoft. The all-day session was packed full of both lecture and hands-on lab work and was a great introduction to developing applications on the Windows 8 platform.

Introducing Metro

The most interesting and informative aspect of the session for me was the heavy emphasis on the ‘Touch First’ approach used by Windows 8 to better optimize applications across a wide variety of form factors such as slates, tablets, laptops and desktops. The ‘Metro’ design language is at the core of this approach.

Metro is intended to provide an instinctive and natural user experience. It employs touch, navigation, branding and commanding design patterns. A great resource for for designing Metro applications with detailed design and UX guidelines, including Photoshop templates can be found at http://design.windows.com

Metro Design Principals

Content should always comes first (content before chrome)
Immerse your users in the content
Keep the most relevant elements on screen and minimize distractions

Layout

Give content breathing room
Create intentional white space
Remove lines and boxes for organizing groups of content
Use typography to create sense of structure and hierarchy
Fixed font sizes and weights will convey feeling and importance
Let content flow from edge to edge
Pan only on single axis to create stability
Don’t forget ergonomics using portrait or horizontal appropriately

Interaction

Integrate commands into the content
Leverage the edge (left, right, top and bottom)
Provide commands contextually using the App bar and Charms bar

Navigation

Views should be about where you are, not where you could be
Integrate navigational elements into the content
Hierarchical or Flat navigational patterns
Make heavy but appropriate use of semantic zoom

Fast and Fluid

Continuity through motion
Use motion and animation to tell the story
Built in controls exist in Visual Studio templates

Design for Touch First

Keep hands and fingers in mind
Controls should be where users can easily use them
Provide visual feedback
Take advantage of sliding interactions
Pan 1-axis only

Snap and Scale Beautifully

Design for multiple views or layouts (a snap view is required)
Snapping is built into Windows 8 scenario
A great snapped view keeps your app on the screen
Design a purposeful snapped state which maintains state
Design for wide range of screen sizes and resolutions
Use fluid layouts to optimize real estate
Scale to fit fixed layouts
Use SVG or provide 3 asset sizes (100%, 140% and 180%)

Use the Right Contracts

Leverage other apps to complete scenarios
Charms provide consistent invocation model
Share as source and/or target
Leverage search to your content from anywhere in Windows
Place all application settings under one roof
Keep it simple, minimize number of settings

Invest in a Great Tile

Tiles are the front door to your application
Use secondary tiles to promote interesting content
Provide Pin command when content is pinnable

Connected and Alive

Live tiles draw users to your app
Cycle through last 5 updates
Toast notifications deliver transient messages outside app context
Use for time sensitive information
Use only where needed

Roam to The Cloud

Maintains state and preferences across machines
Preferences maintained in users account
Users can continue tasks across devices by roaming app data
Roaming is best for user preferences, links and small data files

Overall, a great session and great presenter. I learned a lot about developing for the Windows 8 platform and am now excited to jump in with both feet. The Windows 8 Developer Camp was well worth the extra day spent in Knoxville and a great warm-up for CodeStock 2012.

Test Your Responsive Web Design With The Responsinator

Wed, 06 Jun 2012 18:40:17 PDT

Web analytics and usage statistics continue to show the meteoric rise in the use of mobile devices on the web, creating the need to develop websites that dynamically respond and adapt to a widening number of display sizes across an array of mobile devices.

One of the biggest challenges when coding the responsive design is knowing how it will look across multiple devices and viewports. A few months back, I came across a handy tool which can help both the designer and developer effectively create a responsive website.

The Responsinator is a simple, easy to use web tool which can help you optimize your responsive design and visualize how your site responds on a variety of today’s most popular mobile devices. This tool works great for testing the breakpoints of your media queries and seeing how font and image resizing or fluid grid and layout changes will look on devices displayed in both portrait and landscape modes. You can also evaluate your fixed width sites by simply adding &fixed_width=x to the end of the URL where x is the fixed width of your site.

I’ve used this on a few projects now and it’s proven to be incredibly helpful for evaluating my design and testing my code. And even though it’s proved to be a valuable tool to have in your toolbox, nothing can compare to the real thing. The Responsinator will closely approximate how your site will look on a mobile device, but of course the most accurate testing will always be on the device itself.

Are you working on a responsive web project? Try it out for yourself at: responsinator.com.

Shattered Glass: Repairing My iPhone 4S Rear Cover

Fri, 01 Jun 2012 20:42:24 PDT

The Problem

After returning home from a long day at the office, I clumsily dropped my iPhone 4S out of my top shirt pocket and onto the concrete garage floor, completely shattering the rear glass cover. Being a techno-tinkerer as well as a bit frugal and always looking to save a buck or two, I set out to see if this was something I might be able to repair myself.

The Approach

Before beginning, I checked around to get an idea of the cost of having it repaired by an ‘Apple Authorized Professional’. Interestingly enough, the prices varied widely from a low of around $49.00 to upwards of $199.00. This was more than enough to convince me to give it a go and see if I could do it myself.

First, I needed to locate a replacement glass cover. I found many sources for the iPhone rear glass on the web and decided to go with the iPhone 4s Back Cover Housing from Amazon. The cost when making the purchase was a mere $3.49 plus an additional $4.99 for shipping and handling bringing the total cost of the project to $8.48. Also included with the glass cover are two pentalobe screwdrivers which are required for removing the screws holding the rear cover.

The Procedure

Power off the iPhone.
Using the appropriate sized pentalobe screwdriver, carefully remove the two small screws located at the bottom of your iPhone case.
Holding your iPhone upright with both hands, holding it between your thumbs and forefingers, use your thumbs to slowly slide the rear glass upward about 1/8” and lift off the glass back from the iPhone case.
Reversing the previous step, position the new rear glass cover over the body and gently slide it downward into position. Press down from the top of the iPhone to seat the rear cover tightly to the bottom of the case.
Carefully reinsert and tighten the two bottom screws. This may actually prove to be the most difficult step in the entire process due to the extremely small size of the screw heads. The screwdriver is magnetized which is very helpful when you have ham-hocks for hands as I do.

The Outcome

So there you have it. The shattered rear glass cover of my iPhone 4S was successfully replaced in less than 5 minutes for a total cost of $8.48. This also proved to be an easy do-it-yourself repair most anyone can do.

In the course of my research for this project, I also discovered that there’s a wide variety of styles, materials and colors available if you just want to change up the look of your phone. So if you have an interest in personalizing your mobile device with some fine hardwood, classy leather or brushed metal, or going for that jungle look with some cheetah or leopard skin print, there are a wide variety of replacement cases available to choose from.

DISCLAIMER: Please remember that removing the rear cover of your iPhone may void your warranty and/or any service agreements with your wireless provider. Proceed at your own risk.

DevExpress MVC Extensions: Initializing Edit Templates

Wed, 23 May 2012 09:51:00 PDT

Creating new records in a grid view often requires the need to initialize default values in the edit template. This can be easily accomplished using the InitNewRow property on the MVC GridViewSettings class.

Technical Architecture

ASP.Net MCV3
Razor View Engine
DevExpress v11.2 MVC Grid View Extension
Entity Framework v4.2

Requirements

When the user creates a new record, initialize the ‘Month’ and ‘Year’ values.
Default values to the current month and current year.

Execution

      settings.InitNewRow = (s, e) =>
      {
           e.NewValues["month"] = System.DateTime.Now.Month;
           e.NewValues["year"] = System.DateTime.Now.Year;
      };

Result

You can see that the Month and Year fields are initialized to the current Month and Year whenever a new record is created.

DevExpress MVC Extensions: Changing Cell Appearance Based on Data Values

Sat, 19 May 2012 09:26:00 PDT

Objective

On a recent project, I was asked to create a simple dashboard component that would display the background color of a specific cell within a DevExpress GridView, based on the comparison of values between two columns in the row.

Technical Architecture

ASP.Net MCV3
Razor View Engine
DevExpress v11.2 MVC Grid View Extensions
Entity Framework v4.2

Requirements

The user enters both a ‘Target’ and ‘Actual’ value, by month and by year, into the DevExpress Grid View.
The ‘Actual’ columns grid view cell will change to green if the ‘Actual’ value is greater than, or equal to the ‘Target’ value.
The ‘Actual’ columns grid view cell will change to red if the ‘Actual’ value is less than the ‘Target’ value.

Execution

Utilizing the GridView’s HtmlDataCellPrepared property event handler, I implemented the following code:

settings.HtmlDataCellPrepared = (s, e) =>
{
    if ((e.GetValue("target") != null) && (e.GetValue("actual") != null))
    {
        Int32 iTargetValue = Convert.ToInt32(e.GetValue("target"))  
        Int32 iActualValue = Convert.ToInt32(e.GetValue("actual")); 
        if (e.DataColumn.FieldName.Equals("actual"))
        {
            if (iActualValue >= iTargetValue)
            {
                 e.Cell.BackColor = System.Drawing.ColorTranslator.FromHtml("#BFFFD7");
            }
            else
            {
                e.Cell.BackColor = System.Drawing.ColorTranslator.FromHtml("#FFBFBF");
            }
        }
    }             
};

Result

The resulting output appears as desired with the cells of the ‘Actual’ column displaying a green background when the value is greater than or equal to the ‘Target’ value. A red cell bacground displays when the ‘Actual’ value is less than the ‘Target’ value.

Taking the Leap

Tue, 15 May 2012 18:58:00 PDT

There comes pivotal events and experiences in one’s life in which we’re forced to reassess our current life path and priorities to determine if changes may be needed, or desired, to improve our overall health and well-being. The kind of changes we need and are willing to make to improve our own lives and have a more positive impact on the lives of those we love and of those around us. A time such as this has come for me.

For far too long I’ve been telling myself that it’s time to start writing about my experiences with web design and development technologies but never actually taking the leap to start blogging. I have been somewhat successful in regularly tweeting from my twitter account, which itself is just a form of micro-blogging, but my intention now is to take this to a higher and more productive level.

My motivation in this endeavor is to hopefully give back in some small way to the design and development community from which I have learned so much. Many individuals whom I respect and have greatly benefited from their experience, wisdom and willingness to take the time to document the how’s and why’s of our industry. People like Andy Rutledge, Scott Hanselman, Aaron Irazarry and Scott Guthrie to name only a few. At the end of the day, my goal is to be able to honestly say that I actually create and give back more than I consume.

What I hope to do is focus mostly on the web deign and development technologies that truly interest me and which I use on an almost daily basis. I also intend to provide commentary on the processes used to achieve the melding of great design with superior functionality. The intersection of creativity and technology. My writing perspective should be that of a technology implementer and practitioner, not necessarily an authority or expert. One of my favorite quotes actually sums it up quite nicely:

I am always doing that which I cannot do, in order that I may learn how to do it. - Pablo Picasso

In addition to writing on web technology I hope to sprinkle in additional, interesting and helpful content related two two other passions in my life.

As a long time wood craftsman, I would like to use this medium to chronicle a few of my more challenging and creative woodworking projects. I plan to share with you the design, building process and results of my efforts. Soup to nuts, start to finish, successes and failures alike.

And finally, being blessed to be a stage-4 cancer survivor, I have an interest in health and fitness by way of eating in a more natural and healthy way as well as weight lifting and resistance training. I hope to share a few insights and learnings I’ve had along the road to recovery and possibly provide hope and encouragement for anyone who has, or knows someone who may be battling this disease.

Once again, this a realization I’ve come to as a result of prayerfully stepping back and (hopefully) honestly evaluating the current state of my life and professional career and reevaluating my desired path forward. A large part of this directional life shift for me will be an attempt to carve out some dedicated time, on a regular basis, to writing and reflecting on these specific aspects of my life. Only time will tell how successful and resolute I will be.

Thanks for reading.