Here's a screenshot of the UI that shows up when you hover over a user on Channel 9:

This new UI surfaces more than just their MSDN reputation though; it also brings up the user's Channel 9 stats and Visual Studio Achievements, perfect for the active community member who wants to show off his points.

We've already linked all users who have a corresponding profile on MSDN and we do this lookup for all new users, but if anyone wants to opt-out that is as easy as a quick click in their own 'hover box' or on their profile page.

Check it out for yourself in any Channel 9 forum thread, or in the comments on any videos.

So you are racking up points in Visual Studio Achievements. You should tell the world about it! Enter the Visual Studio Achievement Widget!

This widget is a small(<6k), simple and customizable javascript file that you can drop on your own page to give up-to-date status on your current state with Visual Studio Achievements.

Adding this widget to a blog is trivial. Most blog platforms (WordPress, BlogEngine.NET) have a free form HTML widget. Simply use that and add one of the script examples below to it. You can see an example of the widget live on Karsten's blog at http://rhizohm.net/irhetoric.

Here is an example of the default state of this widget and the code to get this on your page.

Default:

<script src="http://video.ch9.ms/widgets/VSachievements.min.js?user=geoffreyk" id="ch9VSachievements" defer="defer"></script>
 

(scroll down for more examples)

This script will execute onLoad of the containing HTML page, make a JSONP call to the Visual Studio Achievements API to retrieve the current status of the user, and then generate and insert HTML into the parent document.

The only requirement is to give the widget a valid Channel 9 username that is registered with Visual Studio Achievements in the query string argument "user". The widget will by default draw it's results immediately after the script tag used to insert it into your page. Everything else is optional.

How to Customize

All of the customization for this script is done through the query string in the script embed tag or through CSS that you include on your page. Take a look at the examples to see this in action.

There are a number of options to control the information that is displayed by the widget. A complete list of these parameters is below. Most are pretty self-explanatory and can be figured out just by playing with them.  But here are a few key ones to pay attention to.

"defaultCSS"

The widget has a few CSS styles that will include by default. (Listed below). If you want, set this parameter to false and you can have complete control over the CSS. Note that all of the styles included by default are sand-boxed under the .ch9Achievements class. This is the class of the parent container that holds all of the generated HTML. This is to keep the default widget styles from wreaking havoc on the rest of your page. You can also use this class to add your own styles if you find you need a bit more tweaking to get the widget to look right on your page. Use the sample HTML as a guide.

"displayId"

If you don't want the script to place it's results immediately after the script tag, you can specify the ID of an element where you would like the widget to place it's results. This is handy if you like to have all of your script tags in the HEAD of your page.

"mainTitleHeadline"

The main headline is wrapped in an H3 tag. If this doesn't work for your page, you can change the tag to H1-H7, DIV or SPAN. Use whatever fits best with your page.

"showTimezoneOffest"

It can get a bit confusing talking about times on the internet. The time displayed is the time in the timezone of the user who earned the achievement, not the timezone of the person viewing the page. If this type of detail is important to you, you can toggle this on to prevent any confusion. 

"showCompleted", "showStarted", "showNotStarted"

Use these to toggle which group of achievements to show. By default, only completed achievements are displayed. You can control how many in each group with "maxAchievements"

Here is a complete reference of all available parameters with a rough image of where the parameters are applied, followed by some more examples of how the widget can be configured, the widget's default CSS and a generic example of the HTML it generates.

Query String Parameters

• "user"
  This is the only *required* parameter. Must be a valid Channel 9 username that is registered in Visual Studio Achievements.

• "defaultCSS"
  Defaults to true. If true, the default styles are added to the page.

• "displayId"
  Defaults to null. Give the ID of a DOM element where the widget is to be displayed. If null, the widget is displayed immediately after the widget script in the DOM.

• "showMainTitle"
  Defaults to true. If true, "Visual Studio Achievements" is displayed as a link to http://channel9.msdn.com/achievements/visualstudio. The link has the class "ch9AchievementsTitleLink". Username is not be displayed if "showMainTitle" is false. The text is wrapped in the tag specified by "mainTitleHeadline".

• "mainTitleHeadline"
  Defaults to "h3". This is the type of tag that contains the main title, "Visual Studio Achievements". This can be "h1"-"h7", "span" or "div". The tag has the class "ch9AchievementsTitle".

• "showUserName"
  Defaults to true. If true, the Channel 9 "Display Name" is displayed as a link to the user's Visual Studio Achievements page. If the "Display Name" does not exist, the username is used. The link has the class "ch9AchievementsTitleUser". Username is not displayed if "showMainTitle" is false.

• "showScore"
  Defaults to true. If true, the user's score is displayed with the class "ch9AchievementsScore".

• "showMainDescription"
  Defaults to false. If true, a description of the Visual Studio Achievements is displayed with the class "ch9AchievementsMainDescription".

• "maxAchievements"
  Defaults to "all". This is the number of achievements to display in each completion group. This can be any integer, or "all",

• "showMore"
  Defaults to true. If true, a 'More' link to the user's Visual Studio Achievements page is displayed inside a container with the class "ch9AchievementMore" if not all achievements in a completion group have been displayed.

• "showDescription"
  Defaults to true. If true, the achievement description is displayed with the class "ch9AchievementDescription".

• "showPoints"
  Default to true. If true, the achievement point value is displayed with the class "ch9AchievementPoints".

• "showIcon"
  Defaults to true. If true, the achievement icon is displayed. Icon size (large/small) is specified by "iconSize".

• "iconSize"
  Defaults to "small". If "large", a large icon (100x100) is displayed, otherwise a small icon (40x40) is displayed. This can be "small" or "large". "iconSize" has no effect unless "showIcon" is true.

• "showDateEarned"
  Defaults to true. If true, the date an achievement is earned is displayed with the class "ch9AchievementDateEarned" in the format Dec 15, 2011 There is a date earned only for completed achievements.

• "showTimeEarned"
  Defaults to true. If true, the time an achievement is earned is displayed in a span tag inside the "ch9AchievementDateEarned" p tag. Time earned is not displayed if "showDateEarned" is false.

• "showTimezoneOffest"
  Defaults to false. If true, the timezone an achievement is earned is displayed in the time earned span tag inside the "ch9AchievementDateEarned" p tag. Timezone earned is not displayed if "showDateEarned" or "showTimeEarned" are false.

• "showCompleted"
  Defaults to true. If true, achievements that have been earned will be displayed. The container will have the classes "ch9UserAchievements" and "ch9AchievementsEarned"

• "showStarted"
  Defaults to false. If true, achievements that have been started will be displayed. The container will have the classes "ch9UserAchievements" and "ch9AchievementsStarted"

• "showNotStarted"
  Defaults to false. If true, achievements that have been not been started will be displayed. The container will have the classes "ch9UserAchievements" and "ch9AchievementsNotStarted

More Examples

Full:

<script src="http://video.ch9.ms/widgets/VSachievements.min.js?user=geoffreyk&showMainDescription=true&maxAchievements=2&showStarted=true&showNotStarted=true&showTimezoneOffest=true" id="ch9VSachievements" defer="defer"></script>
 

Large Icons:

<script src="http://video.ch9.ms/widgets/VSachievements.min.js?user=geoffreyk&maxAchievements=5&iconSize=large" id="ch9VSachievements" defer="defer"></script>
 

Small:

<script src="http://video.ch9.ms/widgets/VSachievements.min.js?user=geoffreyk&showPoints=false&showDescription=false&showTimeEarned=false&showMore=false" id="ch9VSachievements" defer="defer"></script>
 

Mini:

<script src="http://video.ch9.ms/widgets/VSachievements.min.js?user=geoffreyk&showPoints=false&showDescription=false&showTimeEarned=false&showUserName=false&showScore=false&showIcon=false&showDateEarned=false&showMore=false" id="ch9VSachievements" defer="defer"></script>
 

Default CSS

.ch9Achievements p {
    margin: 0px;
}

.ch9Achievements ul,
.ch9Achievements .ch9AchievementNone {
    list-style: none outside none;
    margin: 0px 5px;
    padding: 0px;
}

.ch9Achievements li {
    clear: both;
    margin-bottom: 15px;
    overflow: hidden;
    zoom: 1;
}

.ch9Achievements .ch9smallIcon img {
    float: left;
    max-width: 40px;
}

.ch9Achievements .ch9smallIcon p {
    padding-left: 45px;
}

.ch9Achievements .ch9largeIcon img {
    float: left;
    max-width: 100px;
}

.ch9Achievements .ch9largeIcon p {
    padding-left: 105px;
}

.ch9Achievements .ch9UserAchievementsHeading {
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 15px;
}

.ch9Achievements .ch9AchievementTitle {
    font-weight: bold;
}

.ch9Achievements .ch9AchievementDateEarned span {
    white-space: nowrap;
}

Generated HTML

<div class="ch9Achievements">
    <h3 class="ch9AchievementsTitle">
        <a class="ch9AchievementsTitleLink" href="http://channel9.msdn.com/achievements/visualstudio">Visual Studio Achievements </a> 
        for&nbsp;<a class="ch9AchievementsTitleUser" href="http://channel9.msdn.com/niners/Username/achievements/visualstudio">Username</a>
    </h3>
    <p class="ch9AchievementsScore">Current Score: XX</p>
    <p class="ch9AchievementsMainDescription">Description</p>
    <div class="ch9UserAchievements ch9AchievementsEarned">
        <p class="ch9UserAchievementsHeading">Completed</p>
        <ul class="ch9smallIcon (or ch9largeIcon)">
            <li>
                <img src="http://files.ch9.ms/vsachievements/xxx.png">
                <p class="ch9AchievementTitle"><a href="http://channel9.msdn.com/niners/Username/achievements/visualstudio/xxx">Achievement Title</a></p>
                <p class="ch9AchievementPoints">(XX points)</p>
                <p class="ch9AchievementDescription">Achievement Description</p>
                <p class="ch9AchievementDateEarned">MMM&nbsp;DD,&nbsp;YYY <span>at H:MM&nbsp;AM UTC-HH:MM</span></p>
            </li>
            ...
            <li>
                <p class="ch9AchievementMore"><a href="http://channel9.msdn.com/niners/Username/achievements/visualstudio">More...</a></p>
            </li>
        </ul>
    </div>
    <div class="ch9UserAchievements ch9AchievementsStarted">
        <p class="ch9UserAchievementsHeading">Started</p>
        <ul class="ch9smallIcon (or ch9largeIcon)">
            <li>
                <img src="http://files.ch9.ms/vsachievements/xxx.png">
                <p class="ch9AchievementTitle"><a href="http://channel9.msdn.com/niners/Username/achievements/visualstudio/xxx">Achievement Title</a></p>
                <p class="ch9AchievementPoints">(XX points)</p>
                <p class="ch9AchievementDescription">Achievement Description</p>
            </li>
            ...
            <li>
                <p class="ch9AchievementMore"><a href="http://channel9.msdn.com/niners/Username/achievements/visualstudio">More...</a></p>
            </li>
        </ul>
    </div>
    <div class="ch9UserAchievements ch9AchievementsNotStarted">
        <p class="ch9UserAchievementsHeading">Not Started</p>
        <ul class="ch9smallIcon (or ch9largeIcon)">
            <li>
                <img src="http://files.ch9.ms/vsachievements/xxx.png">
                <p class="ch9AchievementTitle"><a href="http://channel9.msdn.com/niners/Username/achievements/visualstudio/xxx">Achievement Title</a></p>
                <p class="ch9AchievementPoints">(XX points)</p>
                <p class="ch9AchievementDescription">Achievement Description</p>
            </li>
            ...
            <li>
                <p class="ch9AchievementMore"><a href="http://channel9.msdn.com/niners/Username/achievements/visualstudio">More...</a></p>
            </li>
        </ul>
    </div>
</div>

First, we have moved to a new video player, which has enabled us to start publishing our content using Silverlight Smooth Streaming.

You’ll see more and more video encoded using this format as new content is run through the site, but for now you can check out the latest Hot Apps post for an example. Smooth Streaming not your cup of tea? You can jump into your profile and set your ‘Video Playback Preference’ to be either

• Auto (the default, we fall back through Smooth Streaming to Progressive and finally to HTML 5, all depending on the content we have and the browser you are running),
• Smooth Streaming (which is essentially the same as the default at this time),
• Progressive (same new player, but the buffer-and-play style of video that we’ve been using on Channel 9 for the past few years) or
• HTML 5 (which forces a HTML 5 player even if you have Silverlight installed)

Second, we revamped the home page featured content area. The old style had some discoverability issues, it was hard to know what to click to go to the full view of a specific video and unless you hovered you didn’t get any of the description of the video (which can be really important to determine if you’d like to watch the video or not). Our new rotator is the result of working to solve both those issues and we hope you like it!

Thanks for reading, and feel free to post feedback about these changes right here in the comments.