EricAppel's shared items in Google Reader

MIX10 Surprise Room Upgrades

2010-03-09T22:53:00Z

When we host a big event, the destination city usually rolls out the proverbial red carpet because of the additional business we bring to the area. This red carpet treatment often extends to the visitors bureau, the convention center, and the nearby hotels. The deal almost always involves committing to a certain number of hotel rooms that we expect to fill. This is called our “room block,” and for MIX10, we sold out our room block awhile ago. As a thank you for our business, the hotel provides us with some nice room upgrades.

In past years, we’ve given the upgrades to members of the team who put in countless hours to ensure that we deliver the best event possible. We never told them in advance, and they were always surprised when they checked-in to their room. It was a fun way to show appreciation for a job well done.

As someone who’s been upgraded (to rooms that have more square footage than my house…and no, I’m not kidding), it’s absolutely exciting to open the door to discover such a palatial spread. The problem is, most of us are so busy running the actual event that we never spend any time in the hotel room. And other than sleeping, I don’t spend much time in the room at all.

What a waste.

So, starting last year, we decided to randomly give the room upgrades to our attendees. Many attendees travel to Las Vegas with their significant others, and what better surprise than to land after a long flight and check-in to a huge and luxurious room. Plus, it’s just plain fun!

For MIX10, we’ve randomly selected 22 attendees who will each receive a complimentary upgrade. That means that their room rate won’t change, and these lucky people will get to enjoy the spoils of an amazing space!

Here are some specifications and photos of the upgraded rooms:

1 x Media Suite – this suite is 2,170 square feet (bigger than some houses), includes 1 1/2 baths, a separate parlor, a 65” plasma HDTV (+ a few others), imported stone floors, and more. If you’re the lucky person who gets this upgrade, it’s almost mandatory that you throw a party. :-)
1 x Vista Suite – this suite is 1,705 square feet, has a 180-degree view of the strip and mountains, includes a separate parlor, living room, dining room, and bar area, has 1 1/2 baths, a 50” LCD High Definition TV, imported stone floors, and more. Be sure to right-click on the door and select “Run as Administrator” for UAC-free living during your stay.
5 x X2 Suite – still huge at 1,450 square feet, with 2 bedrooms, separate parlor and living areas, a view of the strip/beach/pool/mountains, 2 bathrooms, a 42” High Definition Plasma TV, a separate parlor, and more.
5 x Spa Suite - 610 square feet, with views of the beach/pool/mountains, a 42” High Definition Plasma TV, and more.
10 x Great Room Suite - 765 square feet, with views of strip/mountains, a “unique playpen couch” (sounds very Vegas to me), and more.

We’ve already selected the lucky attendees, and they’ll be informed via e-mail within the next few days. If you end up in one of these suites, please take some photos and share them on Flickr or Twitter. We’ll all be jealous.

Good luck, and I’ll see you in Vegas!

WPF and Text Blurriness, now with complete Clarity

2010-03-09T06:23:09Z

The #1 complaint I hear about WPF (Windows Presentation Foundation) is that many fonts end up looking "blurry." It's a darned shame because really great applications like Evernote get criticized because of this one issue*.

The blurriness happens on .NET 3.5 and below because WPF's graphics system is "device independent" so rendering happens independent of resolution. It makes apps DPI-aware for free and scales them nicely. Unfortunately MOST people are running on 96dpi screens and that's where you'd expect clarity. You can get around this 90% of the time today using SnapsToDevicePixels when appropriate, but it wasn't automatic and it's subtle.

The good news is that with .NET 4 this is totally fixed. You can see with with the .NET 4 RC (Release Candidate) and VS2010, which uses WPF for much of its own rendering. Additionally, a check-in in a recent milestone makes things even clearer with light text on a dark background.

From the WPF Text Blog:

"With this fixed, WPF is not technically pixel perfect with GDI text rendering, but the difference is indiscernible to the naked eye."

So how indiscernible?

UPDATE: A little confusion about this in the comments. Folks feel very strongly about this stuff, understandably. Just like color blindness, some people are sensitive to this stuff and others "can't see it." One person in the blogs didn't like go for "indiscernible" and showed a screenshot. Here's the deal. If you are running VS2010 RC, you don't have this fix. This will be in the RTM. Here's a 100% screenshot, followed by the zoomed in version. The takeaway is this. If you didn't like the rendering before, you will now. This is/was some subtle stuff, but it's indiscernible in the RTM, so be happy! I took the screenshot from a daily build, not the actual RTM, which hasn't happened yet.

Blown up:

Click on these side-by-side images from the WPF Text Blog to enlarge and compare. VS2008 with GDI rendering is on the left and VS2010 (a post RC-build) with this fix is on the right. Of course, the release of .NET 4 will have this fix.

In the comments on the WPF Text Blog, Rick Brewster, the author of Paint.NET suggests that we can really analyze these images using an XOR in Paint.NET.

I've done just that here, taking the dark text on a white background and XORing it. Then, for visibility, I've inverted the result. This shows just the differences in pixels between the two rendering paths. Can't see much? That's the point.

To quote from the WPF Blog comments: "If you can’t tell a difference between the screenshots of VS2008 and VS2010, then you should not be able to tell the difference between GDI and another WPF app."

Also, note that this applies to all WPF apps on .NET 4. It's a general fix that's not VS2010 specific. Enjoy. I'll be happy when this is out and everyone's using it, including my favorite WPF app, Evernote.

* I don't know anyone at Evernote, I'm just a fan and I read the comments on their blog. I speak only for me on this issue.

Uncovering jQuery’s Hidden Features

2010-03-08T16:15:53Z

jQuery is not always as it appears. There's a lot of cool stuff going on under the surface, and there are many methods just waiting to be discovered, and many potential usages of jQuery's API that you may not have considered before. In this article I'll be taking you through a few of the not-so-obvious things I've discovered about jQuery.

1. Understand jQuery!

When you call 'jQuery' what happens?

The jQuery function itself is very simple:

jQuery = function (selector, context) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init(selector, context);
};

Under its skin, the jQuery function (commonly referred to as the "wrapper" function) simply returns an instantiated jQuery object — i.e. an instance of the 'jQuery.fn.init' constructor.

This is useful to know; with this information we know that each time we call 'jQuery' we're actually creating a totally unique object with a set of properties. jQuery is clever in that it gives you an object that can be treated as an array. Each of your elements (all together, commonly known as the "collection") is referenced within the object under a numerical index, just like within an array. And jQuery also gives this object a 'length' property, just as you would expect from an array. This opens up a world of possibilities. For one, it means that we can borrow some functionality from 'Array.prototype'. jQuery's 'slice' method is a good example of this — modified from the source:

/* ... jQuery.fn.extend({ ... */
slice: function() {
    return this.pushStack(
        Array.prototype.slice.apply( this, arguments ),
        "slice",
        Array.prototype.slice.call(arguments).join(",")
    );
},
/* ... */

The native 'slice' method doesn't care that 'this' is not a real array– it'll be fine with anything that's got a 'length' property and [0], [1], [2] etc.

There are some other interesting properties within this jQuery object — '.selector' and '.context' will, most of the time, reflect the arguments that you pass into 'jQuery(…)'.

var jqObject = jQuery('a');
jqObject.selector; // => "a"

One thing that's important to note is that jQuery will sometimes give you new jQuery objects to work with. If you run a method that changes the collection in some way, such as '.parents()', then jQuery won't modify the current object; it'll simply pass you a brand new one:

var originalObject = jQuery('a');
var anotherObject = originalObject.parents();

originalObject === anotherObject; // => false

All methods that appear to mutate the collection in some way return a brand new jQuery object — you can still access the old object though, via '.end()', or more verbosely, via '.prevObject'.

2. Bread-and-butter Element Creation

Central to jQuery's DOM capabilities, is its element creation syntax. 1.4 brought with it an entirely new way to create your elements quickly and succinctly. E.g.

var myDiv = jQuery('<div/>', {
    id: 'my-new-element',
    class: 'foo',
    css: {
        color: 'red',
        backgrondColor: '#FFF',
        border: '1px solid #CCC'
    },
    click: function() {
        alert('Clicked!');
    },
    html: jQuery('<a/>', {
        href: '#',
        click: function() {
            // do something
            return false;
        }
    })
});

As of 1.4 you can pass a second argument to the jQuery function when you're creating an element — the object you pass will, for the most part, act as if you were passing it to '.attr(…)'. However, jQuery will map some of the properties to its own methods, for example, the 'click' property maps to jQuery's 'click' method (which binds an event handler for the 'click' event) and 'css' maps to jQuery's 'css' method etc.

To check out what properties map to jQuery's methods, open your console and type 'jQuery.attrFn'.

3. Serialize your Inputs

jQuery provides a method that you can use to serialize all of the inputs within one or more forms. This is useful when submitting data via XHR ("Ajax"). It's been in jQuery for a long time but it's not often talked about and so many developers don't realise it's there. Submitting an entire form via Ajax, using jQuery, couldn't be simpler:

var myForm = $('#my-form');
jQuery.post('submit.php', myForm.serialize(), function(){
    alert('Data has been sent!');
});

jQuery also provides the 'serializeArray' method, which is designed to be used with multiple forms, and the 'param' helper function (under the jQuery namespace) which takes a regular object and returns a query string, e.g.

var data = {
    name: 'Joe',
    age: 44,
    profession: 'Web Developer'
};

jQuery.param(data); // => "name=Joe&age=44&profession=Web+Developer"

4. Animate Anything

jQuery's 'animate' method is probably the most flexible of jQuery's methods. It can be used to animate pretty much anything, not just CSS properties, and not just DOM elements. This is how you would normally use 'animate':

jQuery('#box').animate({
    left: 300,
    top: 300
});

When you specify a property to animate (e.g. 'top') jQuery checks to see if you're animating something with a style property ('element.style'), and it checks if the specified property ('top') is defined under 'style' — if it's not then jQuery simply updates 'top' on the element itself. Here's an example:

jQuery('#box').animate({
    top: 123,
    foo: 456
});

'top' is a valid CSS property, so jQuery will update 'element.style.top', but 'foo' is not a valid CSS property, so jQuery will simply update 'element.foo'.

We can use this to our advantage. Let's say, for example, that you want to animate a square on a canvas. First let's define a simple constructor and a 'draw' method that'll be called on every step of the animation:

function Square(cnvs, width, height, color) {

    this.x = 0;
    this.y = 0;
    this.width = width;
    this.height = height;
    this.color = color;

    this.cHeight = cnvs.height;
    this.cWidth = cnvs.width;
    this.cntxt = cnvs.getContext('2d');

}

Square.prototype.draw = function() {

    this.cntxt.clearRect(0, 0, this.cWidth, this.cHeight);
    this.cntxt.fillStyle = this.color;
    this.cntxt.fillRect(this.x, this.y, this.width, this.height);

};

We've created our 'Square' constructor, and one of its methods. Creating a canvas and then animating it couldn't be simpler:

// Create a <canvas/> element
var canvas = $('<canvas/>').appendTo('body')[0];
canvas.height = 400;
canvas.width = 600;

// Instantiate Square
var square = new Square(canvas, 70, 70, 'rgb(255,0,0)');

jQuery(square).animate({
    x: 300,
    y: 200
}, {
    // 'draw' should be called on every step
    // of the animation:
    step: jQuery.proxy(square, 'draw'),
    duration: 1000
});

This is a very simple effect, but it does clearly demonstrate the possibilities. You can see it in action here: http://jsbin.com/ocida (this will only work in browsers that support the HTML5 canvas)

5. jQuery.ajax Returns the XHR Object

jQuery's Ajax utility functions ('jQuery.ajax', 'jQuery.get', 'jQuery.post') all return an 'XMLHttpRequest' object which you can use to perform subsequent operations on any request. For example:

var curRequest;

jQuery('button.makeRequest').click(function(){
    curRequest = jQuery.get('foo.php', function(response){
        alert('Data: ' + response.responseText);
    });
});

jQuery('button.cancelRequest').click(function(){
    if (curRequest) {
        curRequest.abort(); // abort() is a method of XMLHttpRequest
    }
});

Here we're making a request whenever the 'makeRequest' button is clicked — and we're cancelling the active request if the user clicks the 'cancelRequest' button.

Another potential usage is for synchronous requests:

var myRequest = jQuery.ajax({
    url: 'foo.txt',
    async: false
});

console.log(myRequest.responseText);

Read more about the 'XMLHttpRequest' object and also be sure to check out jQuery's Ajax utilities.

6. Custom Queues

jQuery has a built-in queuing mechanism that's used by all of its animation methods (all of which use 'animate()' really). This queuing can be illustrated easily with a simple animation:

jQuery('a').hover(function(){
    jQuery(this).animate({paddingLeft:'+=15px'});
}, function(){
    jQuery(this).animate({paddingLeft:'-=15px'});
});

Quickly hovering over a bunch of anchors and then hovering over them again will cause the animations to queue up and occur one at a time — I'm sure many of you have witnessed this queuing effect before. If not, check it out here: http://jsbin.com/aqaku

The 'queue' method is similar to the well-known 'each' method in how it's called. You pass a function, which will eventually be called for each of the elements in the collection:

jQuery('a').queue(function(){
    jQuery(this).addClass('all-done').dequeue();
});

Passing just a function to 'queue' will cause that function to be added to the default 'fx' queue, i.e. the queue used by all animations done by jQuery. Therefore, this function will not be called until all current animations occurring on each element in the collection (in this case, all anchors) have completed.

Notice that we're adding a class of 'all-done' in the function above. As outlined, this class will only be added when all current animations are complete. We're also calling the 'dequeue' method. This is very important, as it will allow jQuery to continue with the queue (i.e. it lets jQuery know that you're finished with whatever you're doing). jQuery 1.4 provides another way of continuing the queue; instead of calling 'dequeue', simply call the first argument passed to your function:

jQuery('a').queue(function(nextItemInQueue){
    // Continue queue:
    nextItemInQueue();
});

This does exactly the same, although it's slightly more useful in that it can be called anywhere within your function, even within a mess of closures (that typically destroy the 'this' keyword). Of course, pre-jQuery-1.4 you could just save a reference to 'this', but that would get a bit tiresome.

To add a function to a custom queue, simply pass your custom queue's name as the first argument and the function as the second:

jQuery('a').queue('customQueueName', function(){
    // Do stuff
    jQuery(this).dequeue('customQueueName');
});

Notice that, since we're not using the default 'fx' queue, we also have to pass our queue's name to the 'dequeue' method, in order to allow jQuery to continue with our custom queue.

Read more about 'queue', 'dequeue' and 'jQuery.queue'.

7. Event Namespacing

jQuery provides a way for you to namespace events, which can be very useful when authoring plugins and third-party components. If needed, the user of your plugin can effectively disable your plugin by unbinding all event handlers that it's registered.

To add a namespace when registering an event handler, simply suffix the event name with a period and then your unique namespace (e.g. '.fooPlugin'):

jQuery.fn.foo = function() {

    this.bind('click.fooPlugin', function() {
        // do stuff
    });

    this.bind('mouseover.fooPlugin', function() {
        // do stuff
    });

    return this;
};

// Use the plugin:
jQuery('a').foo();

// Destroy its event handlers:
jQuery('a').unbind('.fooPlugin');

Passing just the namespace to 'unbind' will unbind all event handlers with that namespace.

Conclusion

So which ones did I miss? Any helpful features that you feel jQuery doesn’t document well enough? Let’s discuss in the comments!

Beta of VS Team Explorer with Cross Platform Support

2010-03-05T05:35:00Z

Last November, I posted about our acquisition of the assets of Teamprise, a partner who provides access to Team Foundation Server from Eclipse and non-Windows platforms.

The Teamprise products have been very popular with TFS customers who were developing applications across Microsoft and non-Microsoft platforms. Often customers want to standardize on a single enterprise-wide solution for Application Lifecycle Management because of the cost savings and increased transparency this provides. The Teamprise technology is key in enabling cross platform TFS access.

Since welcoming the Teamprise technology and the development team into Microsoft, we’ve been hard at work introducing the essential features of TFS 2010 and working towards a high quality release.

Today we are announcing a broadly available beta of Microsoft Visual Studio Team Explorer 2010. This release includes the Team Foundation Server Plugin for Eclipse as well as the Team Foundation Server Cross Platform Command Line Client. It works on Windows, Mac, Linux, and multiple flavors of UNIX, providing access to the same source control, work item tracking, build automation, and reporting features that Visual Studio customers have benefitted from.

Below, you can see a TFS user story work item in Eclipse. The story’s implementation is described by a set of child tasks that are linked to that story. It also shows the Pending Changes view with two source files checked out, the Team Explorer view with a set of work item queries organized into folders and the Eclipse import wizard connecting to TFS to import Java source into the Package Explorer.

You can download the beta of Microsoft Visual Studio Team Explorer 2010 here, and as always you can provide feedback through the Microsoft Connect site.

Namaste!

Different Means Better with the new Windows Phone Developer Experience

2010-03-05T01:30:00Z

In just over a week we (finally!) get to pull the cover off of the Windows Phone application & game developer experience at MIX10. There, through keynotes and more than 12 technical sessions over 3 days, we will “tell all” about the what and how of the new developer platform for Windows Phones.

Today, I get to talk about the why. My previous post on focus hinted at this, but today I get to be even more explicit. In fact, I’m literally down in San Francisco and talking with a few industry watchers about our platform strategy and thought I’d invite you all to the conversation as well.

In addition to the update I’ll share below, we’ll be taking questions via Twitter at @WP7dev (use #wp7dev as well) starting at 6PM PST tonight.

In our announcement of Windows Phone 7 Series at Mobile World Congress on February 15 you saw just how different Windows Phone 7 Series is. It’s different from what we’ve done in the phone space before and it’s different from other phones.

Different is often good. Especially when it’s different for good reasons. Windows Phone 7 Series is different because we reset everything we were doing to focus on end user experience. This extends directly to the developer platform.

Developers, designers, and producers of applications, games, and content these days are demanding that we be different as well. Over the last year we’ve had face to face conversations with 100s of developers all over the world about what we should do with Windows Phone 7 Series. We heard they want:

to create truly compelling apps and games users will love.
to get more done with better tool productivity and platform capabilities.
greater opportunity; not just on the phone but across the PC, web, and TV/game console.

Microsoft had to change its strategy to accommodate what developers have been asking for. Specifically developers told us to

focus on the end user experience and take more responsibility for delivering integrated end user experiences.
invest more deeply in the developer platform and developer experience.
drive a standardized hardware platform creating a simpler ecosystem and a larger, consistent, opportunity.

The Windows Phone 7 Series developer platform is as different as the new user experience. It’s fresh. It’s pure. And it’s powerful.

We took the feedback we gathered from developers, looked at the full potential of Windows Phone 7 Series and landed on 3 basic goals for the platform we’re delivering;

Enable end users to be able to personalize their phone experience through a large library of innovative, compelling, games and applications.
Enable developers to profit.
Advance the “3 screen plus cloud” vision

The first one is pretty obvious: A key value proposition for Windows Phone is personal. We believe consumers will use games and applications to make their phone experience their own.

(Did you notice we always talk about applications and games? A little factoid I heard today: According eMarketer, the number of people playing games on the phone has more than doubled in recent years;340M people will play games on the phone in 2010 up from 155M in 2007).

But what do we mean by “profit” in the second goal? When we talk with developers we hear them talk about three different “currencies”: making money, learning, and recognition. Some developers are in it for the money. They are either literally being paid to write code or they are writing code with the hope it will generate coin.

Other developers tell us they are interested in advancing their knowledge – love of the game. They love learning about computers, programming, games, social connections, etc… So they build software to learn. They profit by being smarter.

Other developers are clearly motivated by pride. Maybe there’s a bit of money and learning involved, but to these developers being noticed or recognized as doing wickedly epic sh*t is top of the list for how they measure profit.

We think all three “currencies” are valid and important and we are explicitly trying to build the platform and developer experience to support “profit” in each.

The last goal really points to our long term strategy. We hear from people that they want to be able to experience software no matter what screen they are using. The phone, the PC, or the TV. Combine this concept with “Software+Service” and it’s pretty obvious what “3 screens + cloud” means.

I mentioned in my last post that one of our principles was “to build upon the shoulders of giants; where possible integrate instead of create.” It won’t come as a surprise to many to learn that the Windows Phone 7 developer experience builds upon the following GIANTS (among others):

.NET
Silverlight
XNA platform
Microsoft’s developer tools
Web 2.0 standards

Different often means change. A quick glance at Amazon.com shows me there are literally hundreds of current books on how to manage change in organizations. We all know change can be hard. It’s hard even when you know there’s tremendous upside.

For us, the cost of going from good to great is a clean break from the past. To enable the fantastic user experiences you’ve seen in the Windows Phone 7 Series demos so far we’ve had to break from the past. To deliver what developers expect in the developer platform we’ve had to change how phone apps were written. One result of this is previous Windows mobile applications will not run on Windows Phone 7 Series.

To be clear, we will continue to work with our partners to deliver new devices based on Windows Mobile 6.5 and will support those products for many years to come, so it’s not as though one line ends as soon as the other begins.

The expertise and familiarity with our tools is not lost. If you are a .NET developer today your skills and much of your code will move forward. If you are Silverlight or XNA developer today you’re gonna be really happy. New developers to the platform will find a cohesive, well designed API set with super productive tools.

At MIX you will find out that it’s never been easier, more fun, or more rewarding to create beautiful & compelling phone experiences. Windows Phone 7 Series is a different kind of phone and the development platform offers a different kind of opportunity. Our mission is to help developers go after the next generation of mobile customers with an amazing set of tools and technologies. Developers will be able to bring new kinds of content to more screens and markets faster.

See you there.

P.S. If you like blogs, I suggest you follow these guys as well; they are all part of the extended team of people at Microsoft who are helping to deliver the new platform.

Andre Vrignaud: www.ozymandias.com / @ozymandias

Christian Schormann: electricbeach.org / @cschormann

Shawn Hargreaves: blogs.msdn.com/shawnhar / @shawnhargreaves

Todd Brix: windowsteamblog.com/blogs/windowsphone / @toddbrix

Anand Iyer: www.artificialignorance.net/blog / @ai

Michael Klucher: klucher.com / @mklucher

[Edit: 9:16PM PST 3/4/2010 - Fixed Christian's twitter handle]

ASMX and JSON – Common mistakes and misconceptions

2010-03-03T09:02:37Z

While we were recording episode 5 of Mastering jQuery, I found myself running down a lengthy list of misconceptions and potential pitfalls when it comes to using ASMX services for AJAX callbacks. After years of fielding questions revolving around that topic, I suppose I’ve developed a decent handle on the issues most often encountered.

To preemptively surface some of that commonly requested information, I’m going to publish a series of relatively short posts, each describing one mistake or misconception that I’ve seen come up frequently.

To get started, I want to cover one of the most fundamental of these misconceptions: That ASMX services can’t return JSON.

Misconception: ASMX services are limited to XML

One of the most stubbornly persistent misconceptions about ASMX services is the rumor that they are limited to returning XML. With that notion mind, many developers understandably avoid them for client-side AJAX callbacks. When every byte counts, raw JSON is always preferable to the bloat of XML.

However, the introduction of ASP.NET AJAX removed that XML limitation.

In any ASP.NET 2.0+ AJAX enabled site, one of ASP.NET AJAX’s additions is something called the ScriptService. When a ScriptService is called in the correct manner, it automatically returns its result serialized as JSON instead of XML.

In fact, these ASMX ScriptServices even accept their parameters as JSON.

The ASP.NET AJAX “ScriptService”

If you’ve created an ASMX service in the past few years, you’ve probably seen this blurb at the beginning of the default template:

// To allow this Web Service to be called from script, 
//   using ASP.NET AJAX, uncomment the following line. 
// [System.Web.Script.Services.ScriptService] 
public class WebService : System.Web.Services.WebService {

Since it never explicitly mentions JSON and implies a tight coupling with ASP.NET AJAX, it’s easy to understand why the ScriptService’s true power sometimes goes unnoticed. Thankfully, that attribute does much more than simply expose ASP.NET AJAX specific functionality.

In fact, the ScriptService attribute enables all of an ASMX service’s methods to respond with raw JSON if they are requested correctly. For example, these ScriptServices can easily send and receive JSON in conjunction with a third party library, without a ScriptManager or MicrosoftAjax.js anywhere to be seen.

Two simple requirements

As I alluded to earlier, the one stipulation is that these ScriptServices only return JSON serialized results if they are requested properly. Otherwise, even a service marked with the attribute will return XML instead of JSON. I can only assume that’s part of the reason for the misconception that ASMX services cannot respond with JSON.

Scott Guthrie has a great post on the specific requirements for coercing JSON out of ScriptServices. To summarize that, requests to the service methods must meet two requirements:

Content-Type – The HTTP request must declare a content-type of application/json. This informs the ScriptService that it will receive its parameters as JSON and that it should respond in kind.
HTTP Method – By default, the HTTP request must be a POST request. It is possible to circumvent this requirement, but it is advisable to stick with HTTP POST requests when dealing with JSON.

That’s it.

As long as those two requirements are satisfied, anything from low-level XMLHttpRequest code, to third-party libraries like jQuery, to ASP.NET AJAX itself can easily retrieve JSON serialized data from ASMX services.

###

Originally posted at Encosia. If you're reading this elsewhere, come on over and see the original.

ASMX and JSON – Common mistakes and misconceptions

Matt has found THE Portfolio/Photographer’s Site Layout!

2010-03-02T05:57:26Z

My good friend, and D-Town TV co-host Matt Kloskowski has been working on a portfolio site for his photography, and when he came in and showed it to me last week, I was just like, “Dude—that’s the portfolio site everybody wants!”

He had been keeping his eye out for a while for an easily up-datable, flexible, inexpensive solution, but this is actually more than that , and I think he just totally nailed it!. I think it really compliments his photography, and at the same time, it makes you want to look around and see what else is there (and there’s lot of stuff there). Take a moment and check out Matt’s fantastic photography, and his very cool new site.

NOTE: Matt is in Dubai right now, teaching at the Gulf Photo conference, but I’m doing to send him a text to let me know that I ran this post, and hopefully if he gets a chance he can answer some of your questions about his site.

Geosense for Windows: location, location, location

2010-03-01T06:38:18Z

Unless you’ve been living under a rock without any GPS reception, you might have heard of location-based applications. From the fun to the useful, letting software know where you are in the world is a powerful way to make information more relevant, but why should smartphones have all the fun?

Half a year ago, Firefox 3.5 introduced support for geolocation, a feature allowed the browser to pinpoint the location of the computer using WiFi triangulation. After personally witnessing how well it worked (it located my home, in fact, my room in the house where I use the computer), I started bugging my partner in crime, Rafael Rivera, to port this feature to the platform-level, where it belongs.

As a matter of fact, Windows 7, like most other current generation OSes, has a built-in location platform and API that allow third-party developers to build native application that are location-aware. However unlike other OSes, specifically OS X, Microsoft made the fatal flaw of not integrating a default geolocation provider, thus developers could not take advantage of this until Windows 7 PCs started shipping with GPS sensors, which hasn’t happened yet.

Instead of waiting for OEMs to pick up the ball, Rafael and I are offering an alternative.

Over the past several weeks, we (Rafael did most of the work, I shouted at him) built Geosense for Windows, a Windows 7 sensor driver that connects the location platform with geolocation service providers who include but is not limited to Google Location Services. These geolocation providers work by matching and triangulating known cell towers and wireless access points in its database to estimate a latitude and longitude, with remarkable accuracy and scope.

Today we are releasing Geosense for Windows for free. We believe by offering this tool for free will help enable the most possible Windows 7 PCs to be location-aware, and in turn add incentive for third-party developers to take advantage of the Windows 7 location APIs and make their applications stand out.

That’s enough talk from me, now go get the bits.

Getting started with code signing for under $100

2010-02-28T05:33:47Z

I recently jumped in and acquired an Authenticode code signing certificate & key pair. It’s great being able to sign my .NET executables, installers, and even Visual Studio 2010 extensions.

I’m documenting my efforts here in the hope that others would be able to follow the relatively straightforward process – there’s not much magic other than learning to export and work with the certificate mechanisms inside Windows. But I know a lot of devs see it as a black magic art, and really it’s just about time, money, and some quick learning.

Which dialog would you click ‘Yes’ on?

Windows 7 is leaps and bounds ahead of Vista in terms of usability. The improved User Account Control experience is nice. I think that a lot of people are finally becoming more wary of unsigned software, especially installers.

With the net full of stories of mirror servers becoming compromised, or people blinding clicking yes on many dialogs, the assurance of the dialog without the scary orange warning banner is the one I think every software developer would like to offer their customers. It’s the professional thing to do.

So here we are, from start (no cert) to finish (signing a .NET app). It only took about two days to go through the identity verification process, but the time was well worth it – and the rest is easy given the nice signing tools in Windows and Visual Studio.

We’ll be getting a certificate & private key through a trusted root certificate authority (CA) provider, not test signing or self-signing. If you’ve ever purchased an SSL certificate for your web servers, similar process.

For a list of current program members, see this download on the Microsoft site – there are hundreds of businesses and governments in the program.

Some corporate IT departments will have their own internal CA, so although those companies can sign apps for internal use, using them on machines without that CA cert installed will yield the un-trusted publisher dialog.

What is Authenticode?

Authenticode is the name for the code signing system on Windows. There are many tools from Microsoft that are core to code signing and ship in the Windows SDK.

Code signing certificates have an expiration date, but as long as a timestamp server is used when signing, signed apps can still be used and verified. Certificates can also be revoked if ever compromised.

For good measure, here’s a short Wikipedia page on code signing, and the MSDN document “Introduction to Code Signing”.

What code signing is not

Signing is only a way of proving that some person or company is who they say they are. It doesn’t tell you whether there’s a nice person, or in any way validate functionality of an app.

Also, .NET projects have a “Signing” tab, but this is actually a feature called Strong Naming, and is different. Most commercial software products using .NET will be both strong named, plus be code signed.

What all can you use your $99/year key for?

Signing Windows executables
.NET programs, class libraries, ClickOnce apps
.MSI installer files
Adobe AIR apps
Java JARs
Microsoft Office/VBA macros
Mozilla objects and extensions
Signing Visual Studio extension packages (.vsix files), although SignTool doesn’t directly support this (no SIP module)

Note that only Verisign offers code signing certificates for Windows device drivers through a special program for kernel-mode code signing.

How does Microsoft do code signing?

Obviously the Microsoft corporate keys are extremely secure and private. All signing is performed through a set of intricate systems that accept builds, check conditions, scan for viruses, and who knows what else… and eventually provide the signed binaries.

It’s pretty much a black box to us as engineers, but it works for hundreds of thousands of files.

As a dev, I’ve had more than my share of wild Friday nights trying to get code strong named and signed: there’s a big process and it revolves around a lot of people, smart cards, and it eventually works out.

Step-by-step guide to purchasing a certificate

Here’s my experience with getting a certificate. Different certification companies may have different processes, but in general you can be sure that you will need to do a lot to provide proof and authenticity of your name/company.

You can purchase a personal certificate (independent developer, professional geek) quicker than a corporate certificate given the different proof requirements.

Since the name/company name is what will be shown in the publisher field, you obviously wouldn’t want to get a personal certificate for company use. Also, be aware that the address you provide to a signing company will be embedded inside the certificate.

I purchased my code signing cert through K Software, which is an official reseller of Comodo certificates, a popular Level 2 CA whose certificates are part of the root CA program on computers everywhere. The certificate costs $99 per year. I’ve heard of other companies sometimes offering specials as low as $65 a year, and others such as Verisign asking $499 a year.

Since there is some pain in the process (producing copious amounts of evidence) and waiting for that to be validated, you may want to consider purchasing a multi-year certificate and skip having to renew yearly.

You must use Windows and either Internet Explorer or Firefox to make the initial request. After the entire process is complete and the certificate is issued (days later), you will need to use the same computer and browser to complete the process. You will then export the certificate and private key to a file so you can store it safely somewhere.

What proof will be required

This is a partial list, the authentication process may require other documents. Most verification can be done through fax, mail, or even email.

If you’ve ever purchased an SSL certificate, it’s almost the same exact process.

Your own domain name:

The domain’s WHOIS records must match the information you provide in your order.
If you use Private Registration services, you’ll need proof from the private registration company that you own the domain and your address matches. This can be a pain.

Corporate entities:

Articles of Incorporation
Business License
Other documentation such as DUNS details

Individuals:

Driver’s license or passport
Recent utility statements with matching data
Phone statement with matching information, name, and phone number where final phone verification will be performed

This information will be asked for after you order and pay for the service. It is performed by the CA (Comodo in my case), not by the company or reseller you buy the service from.

For the remainder of this section, everything will be specific to Comodo. I found them helpful, quick and responsive, and professional, so I would definitely recommend their service. It is a great value when purchased through a reseller.

Step 1: Register with the CA to track your validation tickets and receive support

You’ll need to do this with an email address at your domain name. You register with the same email you’ll use in the next step.

If you don’t usually receive mail at your domain, you should be able to easily setup mail forwarding to your normal mail address. On a Windows server, SmarterMail Free sets up in minutes and is great for this.

Simply create an account at Comodo Support for this: https://support.comodo.com/index.php?_m=core&_a=register

Step 2: Submit basic data and purchase

Start at the K Software site, which is a reseller of Comodo’s: https://secure.ksoftware.net/code_signing.html

Current prices are $99 US for one year, $198 for 2 years, and so on.

After navigating to the page, click Buy Now. Internet Explorer will pop up a message that the site is attempting to perform a digital certificate operation. Click Yes.

On the order form page, you will submit your details, including address, email, etc. The email address needs to be an email address on your domain name that can be verified, not a Hotmail or Google Mail address. Note that this information will be embedded inside the final issued certificate.

Important values at the end of the page:

CSP should be Microsoft Enhanced Cryptographic Provider v1.0 (the default)
Key size: 2048 is fine for most people
Exportable: definitely – if you don’t check this, you can’t get a PKCS 12 (.pfx on Windows) file to use for signing, and would have to do all signing on that machine
User protected: Leave this unchecked

After clicking Submit Order, you’ll go to a payment page. I used PayPal and was done in seconds.

Step Three: You’ll be contacted

At this point you’re done with the K Software order. You will be contacted via e-mail from Comodo, and they’ll step you through what verification they need at that time, and how to submit it.

In my case I had to go through several rounds of verification, including sending a recent phone bill.

I ran into some hiccups because the domain name I used for the e-mail address, though owned by me, is hard to prove: my WHOIS data all says ‘Domains By Proxy’, which is the provider of private registration services for GoDaddy. I had to find a way to provide proof that I own the domain.

The final verification step is when they eventually call your phone number. After that call, they’ll issue the certificate approval, and you’ll receive a final e-mail about 20 minutes later to go pick up the certs.

This step took me 1.5 business days including waiting time.

Step Four: Pick up your key

On the same computer you started the operation on, and same browser, click on the link provided in the e-mail Comodo sent when the key was ready.

On this page, you’ll again receive a notification about a certificate operation. That’s fine. At this point you now have the key stored in your browser certificate system.

Step Five: Export your key

This step is for Internet Explorer users. If you’re using Mozilla Firefox, here’s some other instructions.

In IE now, click Tools | Internet Options. Click on the Content tab, and then the Certificates button:

Within the Personal (first) tab of the Certificates dialog, click on the new certificate issued by UTN-USERFirst-Object (this is one of the many Comodo level 2 CAs in the Windows root CA program):

Then click ‘Export…’. In the Certificate Export Wizard, read the useless text and click Next.

Select the option ‘Yes’ for exporting the private key along with the certificate.

Next, you pick the file format. Only PFX/PKCS #12 should be available. I checked both ‘Include all certificates in the certification path if possible’ and ‘Export all extended properties’, though to be honest I haven’t a clue whether this is needed.

I wouldn’t recommend clicking the delete private key option, I like knowing that on this particular machine I can still re-export the cert as needed in the future.

Now, come up with a password to protect the file. You will need to use this password when using tools such as SignTool.exe, or setting up an automated code signing process of your own.

Finally, pick where you want your .PFX file stored.

Step Six: Protect your key

Although code signing certificates have a mechanism through the CA to revoke keys, you do not ever want to have to do this.

Take precautions. It is your duty to protect your key. Many people find ways to store this information through smart card or other physical security mechanisms.

As an individual, it’s pretty easy for me: Only I know the password, I have the file securely stored, and I don’t need to worry about sharing it with others.

Business entities and groups will have more trouble coming up with the appropriate processes and systems for this. Ideally some sort of automated system should be used to perform the code signing, with alternative authentication; providing the key file and a password is not the best method.

Import Wizard Note

To manually sign on another machine, you’ll want to double-click on the .pfx file. An import wizard will open up that will allow you to install the cert and private key on your machine.

For manual signing you typically select from your private certificate store on the machine, instead of using the .pfx file directly. For automated signing, you probably will use the .pfx.

How to sign your apps and libraries

Now the fun part. Armed with your new code signing certificate and private key, you’re ready to go SignTool.exe’ing.

SignTool is included with the Windows 6.0 and 7.0A SDKs, and you’ll have it in your path if you have Visual Studio 2008 or 2010 installed and are using the associated Visual Studio Command Prompt.

You can create scripts to sign quickly using command line parameters, or even write .NET apps using types in the System.Security.Cryptography.X509Certificates namespace.

It’s easiest to get started by manually signing, using the Digital Signature Wizard. From a Visual Studio 2008 Command Prompt, for instance, run:

signtool.exe signwizard

This will popup the wizard that will walk you through.

Select the file you want to sign:

The ‘Typical’ option will let you pick from the certificate store on your machine. You don’t actually select the previously-exported .PFX file when manually signing.

Here I click ‘Select from Store…’:

Which pops up a Windows dialog listing available code signing certificates.

Here I can verify the goods:

On the next wizard page, you can optionally offer more information here as appropriate.

The last optional, but highly recommended step, is to use the timestamp server provided by the CA. This is a service that authenticates when the data (your app) was signed.

This means that your app will continue to be valid, even after the certificate expires, as long as the cert is not revoked.

For Comodo, their timestamping server is: http://timestamp.comodoca.com/authenticode

Click Next and you’ll see the summary of what signing is to take place.

After clicking Finish, the dialog will go away, and pretty soon you should receive a success/failure message.

CodeSign.exe Parameters

You can also code sign in scripts and the command line using arguments. For instance, here’s a sample made-up signing argument list. You can specify any number of files to sign as the final arguments.

signtool.exe sign /f PathToKeysAndCert.Pfx /p “MySuperSecretPasswordToUseThePfxFile” /v /t http://timestamp.comodoca.com/authenticode “C:\MyFileToSign.exe”

For all the parameters, type ‘signtool sign /?’

That’s it!

You can use a variety of tools to check that the signing works fine, including just examining the file in the Windows explorer.

Authenticode-signed executables, MSIs and libraries will have a ‘Digital Signatures’ tab in the properties window (though not irregular file types, such as Adobe AIR files).

Here’s the .exe I signed:

And that’s it! Ship it!

Your customers will have that extra level of confidence when using your application. At some point, the more more professional software developers and software companies code sign, the more likely customers will be able to make proper security decisions about their computers… and the real benefit of the crisp user account control user interface comes to light.

Hope this helps. Let me know how your experiences with code signing go.

Share and Enjoy:

Preset – Warm and Fuzzy Effect

2010-02-23T12:56:25Z

Hey folks. I’ll be heading out to teach at Gulf Photo Plus in Dubai later this week (by the way, if you have any “must shoot” places out there please let me know).

Anyway, I wanted to make sure I got another preset in before I left. I called this one “Warm and Fuzzy” because that’s what it kinda looks like. Its got a warming quality to it as well as a fuzzy/soft look (from negative clarity). I’ve tweaked the Exposure setting up a bit as a default, because a glowing feel is part of the effect. If you don’t like it (or want more of it depending on your photo) then remember to go in and change the Exposure settings to your liking. Let me know what you think.

To install:
1) Unzip the preset zip file on to your desktop
2) Go to the Develop module. NOTE: YOU MUST BE THE DEVELOP MODULE
3) Go to the Presets panel on the left. Right click anywhere in it and choose Import.
4) Select the .lrtemplate files you unzipped in Step 1 and click Import NOTE: DO NOT IMPORT THE ZIP FILE

• Click here to download the preset.
• Click here to see a sample of the preset.

Cultivate Teams, Not Ideas

2010-01-25T20:00:00Z

How much is a good idea worth? According to Derek Sivers, not much:

It's so funny when I hear people being so protective of ideas. (People who want me to sign an NDA to tell me the simplest idea.) To me, ideas are worth nothing unless executed. They are just a multiplier. Execution is worth millions.
To make a business, you need to multiply the two. The most brilliant idea, with no execution, is worth $20. The most brilliant idea takes great execution to be worth $20,000,000. That's why I don't want to hear people's ideas. I'm not interested until I see their execution.

I was reminded of Mr. Sivers article when this email made the rounds earlier this month:

I feel that this story is important to tell you because Kickstarter.com copied us. I tried for 4 years to get people to take Fundable seriously, traveling across the country, even giving a presentation to FBFund, Facebook's fund to stimulate development of new apps. It was a series of rejections for 4 years. I really felt that I presented myself professionally in every business situation and I dressed appropriately and practiced my presentations. That was not enough. The idiots wanted us to show them charts with massive profits and widespread public acceptance so that they didn't have to take any risks.
All it took was 5 super-connected people at Kickstarter (especially Andy Baio) to take a concept we worked hard to refine, tweak it with Amazon Payments, and then take credit. You could say that that's capitalism, but I still think you should acknowledge people that you take inspiration from. I do. I owe the concept of Fundable to many things, including living in cooperative student housing and studying Political Science at Michigan. Rational choice theory, tragedy of the commons, and collective action are a few political science concepts that are relevant to Fundable.
Yes, Fundable had some technical and customer service problems. That's because we had no money to revise it. I had plans to scrap the entire CMS and start from scratch with a new design. We were just so burned out that motivation was hard to come by. What was the point if we weren't making enough money to live on after 4 years?

The disconnect between idea and execution here is so vast it's hard to understand why the author himself can't see it.

I wouldn't call ideas worthless, per se, but it's clear that ideas alone are a hollow sort of currency. Success is rarely determined by the quality of your ideas. But it is frequently determined by the quality of your execution. So instead of worrying about whether the Next Big Idea you're all working on is sufficiently brilliant, worry about how well you're executing.

The criticism that all you need is "super-connected people" to be successful was also leveled at Stack Overflow. In an email to me last year, Andy Baio -- ironically, the very person being cited in the email -- said:

I very much enjoyed the Hacker News conversation about cloning the site in a weekend. My favorite comments were from the people that believe Stack Overflow is only successful because of the Cult of Atwood & Spolsky. Amazing.

I don't care how internet famous you are; nobody gets a pass on execution. Sure, you may have a few more eyeballs at the beginning, but if you don't build something useful, the world will eventually just shrug its collective shoulders and move along to more useful things.

One of my all time favorite software quotes is from Wil Shipley:

This is all your app is: a collection of tiny details.

In software development, execution is staying on top of all the tiny details that make up your app. If you're not constantly obsessing over every aspect of your application, relentlessly polishing and improving every little part of it -- no matter how trivial -- you're not executing. At least, not well.

And unless you work alone, which is a rarity these days, your ability to stay on top of the collection of tiny details that makes up your app will hinge entirely on whether or not you can build a great team. They are the building block of any successful endeavor. This talk by Ed Catmull is almost exclusively focused on how Pixar learned, through trial and error, to build teams that can execute.

It's a fascinating talk, full of some great insights, and you should watch the whole thing. In it, Mr. Catmull amplifies Mr. Sivers' sentiment:

If you give a good idea to a mediocre group, they'll screw it up. If you give a mediocre idea to a good group, they'll fix it. Or they'll throw it away and come up with something else.

Execution isn't merely a multiplier. It's far more powerful. How your team executes has the power to transform your idea from gold into lead, or from lead into gold. That's why, when building Stack Overflow, I was so fortunate to not only work with Joel Spolsky, but also to cherry-pick two of the best developers I had ever worked with in my previous jobs and drag them along with me. Kicking and screaming if necessary.

If I had to point to the one thing that made our project successful, it was not the idea behind it, our internet fame, the tools we chose, or the funding we had (precious little, for the record).

It was our team.

The value of my advice is debatable. But you would do well to heed the advice of Mr. Sivers and Mr. Catmull. If you want to be successful, stop worrying about the great ideas, and concentrate on cultivating great teams.

[advertisement] JIRA 4 - Simplify issue tracking for everyone involved. Get started from $10 for 10 users.

The Life, Times (and Death?) of Internet Explorer 6 (Comic Strip)

2010-02-11T21:39:04Z

In recent years Internet Explorer 6 has become the browser web designers love to hate. Security issues, JavaScript errors and inexplicable CSS rendering quirks have made it the brunt of many jokes. With IE6 in its twilight and big companies like Google dropping support, it seems like a good time to take a fond look back at our old foe. In this post we’re looking at what Internet Explorer 6 used to be and why its image changed over the years. You can also see the comic in a larger version.

Do we need to review our projects in Internet Explorer 6? Can we stop supporting IE6? If not, how do we handle those users who are still using IE6? And if yes, how can we prompt IE6 users to upgrade? Or how do we convince those who don’t allow their employees to get rid of the legacy browser to upgrade? What do you think? We are looking forward to your opinions in the comments to this post!

Visual Studio 2010 clean application level web.config

2010-02-11T07:19:03Z

This post introduces you to a small improvement that has been made in Visual Studio 2010 & .NET 4 to reduce the size of the ASP.NET application level web.config

3.0 and 3.5 web.config

As ASP.NET technology evolved, the application level Web.config had new things added to it. Since the earlier frameworks were using the same set of machine level configuration files, incremental feature that was added subsequent to the 2.0 release resulted in additional config settings included in the file.

.NET 4 web.config

With .NET 4, the web.config is tremendously reduced in size to improve the simplicity of ASP.NET

The config settings have been moved down to the machine config file. This includes registers all of the ASP.NET tag sections, handlers, modules and settings for the following:

ASP.NET AJAX
ASP.NET Dynamic Data
ASP.NET Routing
ASP.NET Chart Control

You can look at the trimmed down web.config by creating a .Net 4 'ASP.NET Empty Web Application' in Visual Studio 2010.

Following is the web.config file for .NET 4 C# 'ASP.NET Empty Web Application':

The config file above has settings to tell ASP.NET to enable debugging by default for the application and provides the version of .NET framework to use.(Please read the post http://blogs.msdn.com/webdevtools/archive/2009/09/30/visual-studio-2010-property-grid-filtering.aspx to find out why targetFramework version attribute should not be updated manually)

Hope this helps,

Deepak Verma | Visual Web Developer

Helpful Silverlight Snippets

2010-02-10T21:56:33Z

Here are a few of the Visual Studio C# code snippets that we use on the Silverlight team when building controls and apps.

Download a zip (7 KB) of them all and extract them into your Snippets folder, which is in your Documents folder: Documents\Visual Studio 2010\Code Snippets\Visual C#\My Code Snippets\. These also work with Visual Studio 2008.

To use a snippet

Inside the code editor, start typing the name of the snippet (such as dp, for a standard dependency property declaration section with a change handler). You should see it in the Intellisense drop-down.

Press tab to accept the value.

If there are editing helpers for the snippet, use tab to move through the fields as you fill them out.

Press Enter when you are finished. This should drop you right into the triple-slash comment field to fill that out.

Included snippets

Name	Description
dp	A standard dependency property with a property changed handler
dp_attached	An attached property declaration
dp_nohandler	A dependency property without a change handler
dp_value	A value type dependency property with change handler
dp_value_nohandler	A value type dependency property without a change handler
inot	An INotifyPropertyChanged implementation
test	A simple unit test method, descriptive comment, and description attribute
testa	An asynchronous unit test method

Hope this helps.

Share and Enjoy:

Using Silverlight Media Framework for simple playback

2010-02-10T18:09:06Z

If you aren’t aware of the Silverlight Media Framework, you should take a look. This is a media playback framework for Silverlight that is based off of a lot of best practices from such implementations as the NBC Olympics, Sunday Night Football and others.

It has a lot of features built-in to the framework such as:

Logging
DVR-style features
Fast forward
Slow motion
Media Markers
etc

Basic stuff plus some great included features and extensibility points.

Missing Features – Part 1

What I didn’t like in v1 was two things: it was only for Smooth Streaming and it was a framework versus just a XAP I could use in a web application. After some successful complaining :-) and an opportunity to get into a milestone build, the progressive download feature was added which enabled non-Smooth Streaming people to use it.

I’m wanting to standardize on what our teams are providing for best practices, so I’ve started using this player.

NOTE: Does SL Video Player still live? Yes, and it has VERY basic features. It is super small and simple, but may not be for everyone’s liking.

So I started to solve the other problem, primarily for my use, of having essentially a stand-alone player using this framework.

Extending the Silverlight Media Framework

You see, the SMF itself is essentially a set of controls…but not an ‘app’ itself that you can just consume the binary. What I did was basically create a new Silverlight application myself with one simple element: Player. This way I could implement what I needed for my use. The first thing I wanted was to have a simple XAP that I’d be able to load parameters in…very much like we did for SL Video Player on codeplex. To make essentially the player have a flexible use model. I could host the player anywhere and just feed it media to play.

I used the InitParams feature of the Silverlight plugin model to enable me to pass in parameters to the application. I wanted a simple parameter ‘media’ that basically was a URI to my media. For most of my needs this would be a progressive download situation. I added the simple feature using InitParams, and passed that URI to the MediaElement of the player framework. All was well.

Missing Features – Part 2

I then realized two features that I love about the Expression Encoder templates: AutoLoad and ThumbnailImage. These two features are pretty much essential for a bandwidth saving playback experience. AutoLoad basically disables the media from starting to be fetched until the user clicks play. The ThumbnailImage enables a static screenshot view to be displayed until a media frame could be captured. These two features work well together.

The AutoLoad (cueing) was critical for me. I didn’t want media to start downloading until the user said so. This saves me bandwidth as well as doesn’t annoy the user if there is a ton of media on one page (which might not be a good UX to begin with, but I digress).

I saw an event PlayControlClicked in the framework that I felt I could tap into. I figured I’d just wire up to that event and set the MediaElement.Source when the user clicked that. FAIL. The problem was that the play control in the current framework isn’t even enabled until the media source is set. This defeated my whole purpose.

After some spelunking in the source – did I mention that SMF is Open Source? – I found the culprit functions. Disabling them made everything work but it just didn’t feel right. Luckily one of the developers of the framework, Kevin from Vertigo, and I start chatting (virtually of course, after all nobody ‘talks’ anymore for real right?). I told him of my findings and hacks and he educated me that I didn’t even need to mess with the source, but could accomplish my needs by subclassing the Player. Kevin sent me some sample code for what he called a DeferredSource, which is what I wanted.

After some quick tests, I realized that I should keep all scenarios enabled:

Deferred loading (AutoLoad=false)
Normal progressive playback (AutoLoad=true)
Windows Streaming
IIS Smooth Streaming

I modified Kevin’s source a bit and got everything working. Now I have 3 parameters:

media – the URI of the stream, IIS Smooth Streaming manifest, or media file for progressive download
autoload – used really only for progressive download, would enable/disable cueing of the video upon load
ss – to specify if the URI indicated in ‘media’ is an IIS Smooth Streaming implementation

With this done I can now do something as simple as:

   1: <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="320" height="240">

   2:   <param name="source" value="/ClientBin/SmfSimplePlayer.xap"/>

   3:   <param name="background" value="white" />

   4:   <param name="minRuntimeVersion" value="3.0.40818.0" />

   5:   <param name="initParams" value="media=URL_TO_YOUR_VIDEO" />

   6:   <param name="autoUpgrade" value="true" />

   7:   <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none">

   8:           <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>

   9:   </a>

  10: </object>

Boom, done. Now I had a player based on SMF that served my needs.

Wishlist

I still didn’t implement the ThumbnailImage in my player. This is a wishlist item for me…it isn’t critical but nice for when AutoLoad=false so it isn’t just a blank screen! Additionally, the one thing I have to admit I’m not wild about is the overall size. The compiled XAP is 230K. In contrast my SL Video Player is 16K. Why the big size? Well, the SMF today is intended for someone who really wants to implement all the features it provides, including Smooth Streaming. If you aren’t using Smooth Streaming, then you still have those dependencies with you…not ideal.

In talking with the dev team and framework team, I know their plans for updated milestones of SMF and am pleased with the roadmap. They have taken a lot of feedback of how mainstream uses might be implemented and will make it continue to be awesome with a bit more flexibility of taking what you need!

Summary

If you need a solid, basic player take a look at SMF. There are other players out there of course, but this one is based on proven best practices in the toughest situations. And it is only getting better. There is a lot of room for improvement for the ‘YouTube’ style simplicity of playback for medium-low quality video playback for your personal sites showing home movies, etc. – and I know that scenario will improve, because I’m pushing for it as well.

If you want to use what I’ve done here, feel free – here are the files:

Compiled XAP
Source code for my modified stand-alone player – note that you will need the SMF and the dependencies for that before this will compile. This source contains only my modifications

There are also a bunch of videos for working with the Silverlight Media Framework beyond the basics. Be sure to check them out!

Hope this helps!

tags: silverlight, ria, xaml, smf, silverlight media framework, vertigo, slvideoplayer, codeplex, open source

This work is licensed under a Creative Commons Attribution By license.

Quick Tip: How to Work with @Font-face

2010-02-09T20:24:44Z

Due to the fact that @font-face can be a bit overly complicated, it hasn’t caught on quite as much as it should. Once you start reading about licensing, different font formats, browser consistencies, it can potentially become more trouble than it’s worth.

But – in five minutes, I’ll try to simplify the process of working with custom fonts as much as I possibly can. Services like Font Squirrel help to make the task a cinch!

Final CSS

@font-face {
font-family: 'blok-regular';
src: url('type/Blokletters-Potlood.eot');
src: local('Blokletters Potlood Potlood'),
 local('Blokletters-Potlood'),
 url('type/Blokletters-Potlood.ttf') format('truetype');
}

@font-face {
font-family: 'blok-italic';
src: url('type/Blokletters-Balpen.eot');
src: local('Blokletters Balpen Balpen'),
 local('Blokletters-Balpen'),
 url('type/Blokletters-Balpen.ttf') format('truetype');
}

@font-face {
font-family: 'blok-heavy';
src: url('type/Blokletters-Viltstift.eot');
src: local('Blokletters Viltstift Viltstift'),
 local('Blokletters-Viltstift'),
 url('type/Blokletters-Viltstift.ttf') format('truetype');
}

h1 { font-family: blok-heavy, helvetica, arial; }

Notice how we’re referencing both an .eot and .ttf font? This is because, of course, Internet Explorer only uses its own format, that has yet to truly catch on. As such, we must first import that .eot file, and then move on to the different formats for Firefox, Safari, etc. It’s essential that you load the .eot version first.

Next, we search for the font on the user’s computer by using the “local” attribute. If it’s unfound, only then do we pass a url that will load the font.

Why Doesn’t IE Try to Load the TTF Fonts?

This was definitely a concern. If Explorer can’t work with the truetype format, we don’t want to waste time trying to download the font. Luckily, because of all those local attributes, and the commas, IE won’t understand any of it. As such, it will simply skip the line all together, thus, only utilizing the .eot version.

jQuery 1.4.1 Intellisense with Visual Studio

2010-02-09T06:30:30Z

[In addition to blogging, I am also now using Twitter for quick updates and to share links. Follow me at: twitter.com/scottgu]

A few people have emailed me recently asking about the availability of a Visual Studio –vsdoc intellisense hint file for jQuery 1.4.1.

I blogged about –vsdoc files in the past – they provide additional intellisense help information for Visual Studio, and enable you to get a richer intellisense experience with dynamic Javascript libraries. If you are using VS 2008 SP1 you’ll want to download and install this patch in order to have VS 2008 automatically use –vsdoc files with intellisense. VS 2010 has support for –vsdoc files built-in.

jQuery 1.4.1 –vsdoc download

The good news is that you can download –vsdoc files for jQuery directly from the jQuery web-site (look for the “Documentation: Visual Studio” link under each major version). Here is a direct pointer to the recently released –vsdoc file for jQuery 1.4.1 that you can use.

Hope this helps,

Scott

Readers: Get your Buzz on

2010-02-09T19:02:00Z

We know that many people like Reader because it makes it so easy to share interesting stuff with a wide group of friends. That's why, over the past year, we've added a number of features to help you share the content you find most interesting: comments, following, people search, liking, and "send to."

However, even with all these great features, sharing has been mostly limited to the subset of your friends who use Google Reader. While many people use Reader, we know that even more use Gmail. That's why today, we're thrilled to announce that with the launch of Google Buzz, the awesome items you share in Reader can also be shared with all your friends who use Gmail with Google Buzz.

A shared item in Reader (background) and Buzz (foreground)

Getting started with Google Buzz is easy. Just head over to Gmail and you'll be able to link up your Google Reader account with just a few clicks. Then, anything you share in Reader will automatically be posted to Buzz. Comments are even shared between both products, so you can view and participate in the conversation wherever you'd prefer.

And don't worry, you don't have another list of friends or followers to manage. The people you follow in Reader are the same people you follow in Buzz – those you've already chosen to follow in Reader, plus the people you email and chat with the most in Gmail.

Check out the video below, explaining everything you can do with Google Buzz!

Head to our help center for more details about the Buzz integration in Reader, or leave us feedback in our forum, on Twitter or even using Buzz itself.

P.S. Keep in mind that Google Buzz is rolling out gradually, it might be a few days before you get it for your account.

Built-in Charting Controls (VS 2010 and .NET 4 Series)

2010-02-08T05:54:52Z

[In addition to blogging, I am also now using Twitter for quick updates and to share links. Follow me at: twitter.com/scottgu]

This is the fifteenth in a series of blog posts I’m doing on the upcoming VS 2010 and .NET 4 release. Today’s post covers a nice addition to ASP.NET and Windows Forms with .NET 4 - built-in charting control support.

ASP.NET and Windows Forms Charting Controls

A little over 14 months ago I blogged about how Microsoft was making available a free download of charting controls for both ASP.NET 3.5 and Windows Forms 3.5.

You can download and use these runtime controls for free within your web and client applications today. You can also download VS 2008 tooling support for them. They provide a rich set of charting capabilities that is easy to use. To get a sense of what all you can do with them, I recommend downloading the ASP.NET and Windows Forms sample projects which provide more than 200 samples within them. Below is a screen-shot of some pie and doughnut chart samples from the ASP.NET sample application:

Charting Controls Now Built-into .NET 4

With .NET 3.5 you had to separately download the chart controls and add them into your application. With .NET 4 these controls are now built-into ASP.NET 4 and Windows Forms 4 – which means you can immediately take advantage of them out of the box (no separate download or registration required).

Within ASP.NET 4 applications you’ll find that there is now a new built-in <asp:chart> control within the “Data” tab of the Toolbox:

You can use this control without having to register or wire-up any configuration file entries. All of the charting control configuration is now pre-registered with ASP.NET 4 (meaning nothing has to be added to an application’s web.config file for them to work). This enables you to maintain very clean and minimal Web.config files.

Learning more about the <asp:chart> control

Scott Mitchell has written a great series of articles on the www.4guysfromrolla.com site on how to take advantage of the <asp:chart> control:

Getting Started - walks through getting started using the Chart Controls, from version requirements to downloading and installing the Chart Controls, to displaying a simple chart in an ASP.NET page.
Plotting Chart Data - examines the multitude of ways by which data can be plotted on a chart, from databinding to manually adding the points one at a time.
Rendering the Chart - the Chart Controls offer a variety of ways to render the chart data into an image. This article explores these options.
Sorting and Filtering Chart Data - this article shows how to programmatically sort and filter the chart's data prior to display.
Programmatically Generating Chart Images - learn how to programmatically create and alter the chart image file.
Creating Drill Down Reports - see how to build drill down reports using the Chart control.
Adding Statistical Formulas - learn how to add statistical formulas, such as mean, median, variance, and forecasts, to your charts.
Enhancing Charts With Ajax - improve the user experience for dynamic and interactive charts using Ajax.
Serializing Chart Data - see how to persist a chart's data and appearance to a persistent store.

His articles are written using .NET 3.5 and the separate ASP.NET charting controls download – but all of the concepts and syntax work out of the box exactly the same with ASP.NET 4.

Michael Ceranski has also written a blog post demonstrating how to use the ASP.NET Chart control within an ASP.NET MVC application. I’m hoping someone will create some nice ASP.NET MVC Html.Chart() helper methods soon that will make this even easier to do in the future.

Hope this helps,

Scott

ASP.NET MVC 2 (Release Candidate 2) Now Available

2010-02-05T08:44:26Z

[In addition to blogging, I am also now using Twitter for quick updates and to share links. Follow me at: twitter.com/scottgu]

Earlier this evening the ASP.NET team shipped ASP.NET MVC (Release Candidate 2) for VS 2008/.NET 3.5. You can download it here.

The RC2 release of ASP.NET MVC 2 is a follow-up to the first ASP.NET MVC 2 RC build that we shipped in December. It includes a bunch of bug fixes, performance work, and some final API and behavior additions/changes. Below are a few of the changes between the RC1 and RC2 release (read the release notes for even more details):

The new ASP.NET MVC 2 validation feature now performs model-validation instead of input-validation (this means that when you use model binding all model properties are validated instead of just validations on changed values of a model). This behavior change was based on extensive feedback from the community.

The new strongly-typed HTML input helpers now support lambda expressions which reference array or collection indexes. This means you can now write code like Html.EditorFor(m=>m.Orders[i]) and have it correctly output an HTML <input> element whose “name” attribute contains the index (e.g. Orders[0] for the first element), and whose “value” contains the appropriate value.

The new templated Html.EditorFor() and Html.DisplayFor() helper methods now auto-scaffold simple properties (and do not render complex sub-properties by default). This makes it easier to generate automatic scaffolded forms. I’ll be covering this support in a future blog post.

The “id” attribute of client-script validation message elements is now cleaner. With RC1 they had a form0_ prefix. Now the id value is simply the input form element name postfixed with a validationMessage string (e.g. unitPrice_validationMessage).

The Html.ValidationSummary() helper method now takes an optional boolean parameter which enables you to control whether only model-level validation messages are rendered by it, or whether property level validation messages are rendered as well. This provides you with more UI customization options for how validation messages are displayed within your UI.

The AccountController class created with the default ASP.NET MVC Web Application project template is cleaner.

Visual Studio now includes scaffolding support for Delete action methods within Controllers, as well as Delete views (I always found it odd that the default T4 templates didn’t support this before).

jQuery 1.4.1 is now included by default with new ASP.NET MVC 2 projects, along with a –vsdoc file that provides Visual Studio documentation intellisense for it.

The RC2 release has some significant performance tuning improvements (for example: the lambda based strongly-typed HTML helpers are now much faster).

Today’s RC2 release only work with VS 2008 and .NET 3.5. We’ll shortly be releasing the VS 2010 RC (which will be available for everyone to download). It will include ASP. NET MVC 2 support built-in (no separate download required).

Hope this helps,

Scott

P.S. The source code for the ASP.NET MVC RC2 release (along with a MVC futures library that goes with it) can be downloaded here. You can learn even more about ASP.NET MVC 2 by reading the ASP.NET MVC 2 blog series I’m working on.