Random Musings of Jeremy Jameson : Web Development

Microsoft Translator Widget

Jeremy Jameson — Sat, 07 Nov 2009 13:05:00 GMT

This week I stumbled upon the new (and very cool) Microsoft Translator Widget.

Actually, this isn't really new (apparently it has been available for over six months now) but it was certainly new to me.

A colleague of mine on a previous project pointed out the Microsoft Translator site back in March, but somehow I was oblivious to the Translator Widget until just this week. Wow...so many things to keep abreast of these days.

I've added the Translator Widget to my MSDN blog this morning. Interesting tidbit - it required more time to tweak the Community Server CSS rules in order to make room for the 200px minimum width required by the Translator Widget than it did to actually integrate the feature onto my blog.

All you have to do to integrate this feature on your site is:

Enter the URL of your site
Read and agree to the terms of use
Click the Generate Code button
Copy/paste a small amount of HTML into your site

You can read more about the Microsoft Translator Widget on the Translation team's blog if you want more details.

Constraining Tables with CSS

Jeremy Jameson — Sun, 01 Nov 2009 14:15:00 GMT

Have you ever wanted to display data in a table but limit the size of the rows and columns within the table?

For example, consider the classic master/detail view that we often find in software applications, in which items are shown in a summary table and each row provides a link to allow users to see more detail about the item.

However, unlike the typical master/detail scenario, you need to limit the amount of real estate consumed on the page by the summary table. In addition, if text within a column is too long to fit within the constrained area, you want to show the full text when the mouse cursor hovers over the cell.

The following figure illustrates the desired end result:

Figure 1: Constrained table

See full-sized image.

Here is the sample ASP.NET page that I created this morning to demonstrate this:

<%@ Page Language="C#" AutoEventWireup="true"
    CodeBehind="ConstrainedTable.aspx.cs"
    Inherits="Fabrikam.Demo.Web.UI.ConstrainedTable" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Demo - Constrained Tabular Data</title>
    <link rel="Stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
    <style>
        /* Basic formatting
        ----------------------------------------------------------------------*/
        body {
            color:#000000;
            font-family: Verdana, Arial, Helvetica;
            font-size: small;
            margin: 10px;
        }
        h1, h2, h3, h4, h5, h6, strong {
            font-weight: bold;
        }
        h1 {
            font-size: 1.5em;
            margin: .67em 0;
        }
        table caption {
            font-weight: bold;
            margin: 10px 0;
        }
        table.displayTable {
            border-left: 1px solid #36295E;
            border-right: 1px solid #36295E;
            margin: 1em 0;
        }
        table.displayTable th {
            text-align: left;
        }
        table.displayTable th, table.displayTable td {
            border-bottom: 1px solid #36295E;
            padding: 5px 10px;
            vertical-align: top;
        }
        table.displayTable thead th {
            background: #36295E;
            color: #FFF;
            padding: 8px 10px;
            border-bottom-width: 0;
        }        
        table.displayTable tr.altRow {
            background: #F4F4F4;
        }
        /* =constrainedTable
        ----------------------------------------------------------------------*/
        table.constrainedTable {
            table-layout: fixed;
            width: 540px;
        }
        table.constrainedTable th.nameColumn {
            width: 140px;
        }        
        table.constrainedTable td {
            overflow: hidden;
            -o-text-overflow: ellipsis; /* Opera */
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <h1>Demo - Constrained Tabular Data</h1>
        <asp:GridView ID="ConstrainedGrid" runat="server"
            AutoGenerateColumns="false"
            Caption="Constrained Table"
            CssClass="displayTable constrainedTable"
            OnRowDataBound="ConstrainedGrid_RowDataBound"
            EnableViewState="false"
            UseAccessibleHeader="true">
            <AlternatingRowStyle CssClass="altRow" />
            <RowStyle CssClass="row" />
            <Columns>
                <asp:HyperLinkField
                    DataTextField="Site"
                    DataNavigateUrlFields="URL"
                    HeaderText="Site"
                    HeaderStyle-CssClass="nameColumn" />
                <asp:BoundField
                    DataField="Notes"
                    HeaderText="Notes"
                    HeaderStyle-CssClass="notesColumn" />
            </Columns>
        </asp:GridView>
    </form>
</body>
</html>

The most interesting parts of the ASP.NET page are the CSS rules for the constrainedTable class:

table.constrainedTable {
    table-layout: fixed;
    width: 540px;
}
table.constrainedTable th.nameColumn {
    width: 140px;
}        
table.constrainedTable td {
    overflow: hidden;
    -o-text-overflow: ellipsis; /* Opera */
    text-overflow: ellipsis;
    white-space: nowrap;
}

Changing the table-layout to fixed constrains the table to the specified width. Since I don't specify a width for the notesColumn it consumes the remaining width of the table.

Next, I specify that all cells in the constrained table should truncate the text within each cell if it is too wide to fit within the width of the column. This is achieved using the combination of overflow: hidden and white-space: nowrap. Finally, I use the text-overflow CSS property to show ellipsis when text within a cell is clipped (as well as a slight variation for the Opera browser).

Note

Support for the text-overflow CSS property is somewhat limited. In particular, you will find that a clipped table cell renders without the ellipsis in Firefox (at least in version 3.5.3). Oddly enough, this appears to have been supported in Internet Explorer since version 6. In addition to Internet Explorer and Opera, this also appears as expected in Safari.

Also note that constraining table cells using CSS does not automatically display the tooltip with the complete text. For that, you are on your own.

When using an ASP.NET GridView control, I recommend using the RowDataBound event in order to set the ToolTip property of the table cell. Just be sure to decode the contents of the cell to avoid having it encoded twice:

        protected void ConstrainedGrid_RowDataBound(
            object sender,
            GridViewRowEventArgs e)
        {
            foreach (TableCell cell in e.Row.Cells)
            {
                // Note: We need to decode the cell text in order to avoid
                // having it encoded twice (e.g. "&amp;gt;")
                cell.ToolTip = HttpUtility.HtmlDecode(cell.Text);
            }
        }

This is somewhat of a "brute force" approach since it makes no attempt to determine if the text will be truncated, but rather sets the ToolTip (in other words, the title attribute on the HTML element) for every cell. However, the simplicity of this approach -- and the resulting user experience -- far outweighs any extraneous markup (at least in my opinion).

Be aware that this simple approach for setting the ToolTip property doesn't support columns generated from a HyperLinkField, in which case cell.Text is empty (because the cell contains child controls, not simple text). In other words, it's a good thing my demo doesn't specify very long site names that don't fit within the 140 pixel width column constraint ;-)

Here is the complete code-behind for my sample ASP.NET page so you can run it yourself:

using System;
using System.Data;
using System.Globalization;
using System.Web;
using System.Web.UI.WebControls;

namespace Fabrikam.Demo.Web.UI
{
    public partial class ConstrainedTable : System.Web.UI.Page
    {
        protected void Page_PreRender(
            object sender,
            EventArgs e)
        {
            BindSampleData(this.ConstrainedGrid);

            this.ConstrainedGrid.HeaderRow.TableSection =
                TableRowSection.TableHeader;
        }

        #region BindSampleData

        private static void BindSampleData(
            GridView grid)
        {
            DataTable sampleData = new DataTable();
            sampleData.Locale = CultureInfo.InvariantCulture;

            sampleData.Columns.Add("Site");
            sampleData.Columns.Add("URL");
            sampleData.Columns.Add("Notes");

            sampleData.Rows.Add(
                new object[]
                {
                    "Microsoft",
                    "http://www.microsoft.com",
                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                        + "Morbi at sem lorem, ac blandit leo. Phasellus at"
                        + "ligula vitae enim dignissim tincidunt ornare nisl."
                });

            sampleData.Rows.Add(
                new object[]
                {
                    "MSDN",
                    "http://msdn.microsoft.com",
                    "Sed posuere mattis egestas. Aliquam commodo dolor"
                        + " vulputate odio lacinia bibendum. Nullam bibendum,"
                        + " neque vitae ullamcorper elementum, ligula dolor"
                        + " mollis erat, ut ultricies mauris tortor ut eros."
                });

            sampleData.Rows.Add(
                new object[]
                {
                    "TechNet",
                    "http://technet.microsoft.com",
                    "Vestibulum a leo nisl, sit amet porta eros. Proin vitae"
                        + " semper nunc. In facilisis nunc sit amet lacus"
                        + " accumsan mattis. Nulla facilisi. Pellentesque nisl"
                        + " sapien, dignissim ultrices semper et, mollis"
                        + " interdum sem. "
                });
            
            grid.DataSource = sampleData;
            grid.DataBind();
        }

        #endregion

        protected void ConstrainedGrid_RowDataBound(
            object sender,
            GridViewRowEventArgs e)
        {
            foreach (TableCell cell in e.Row.Cells)
            {
                // Note: We need to decode the cell text in order to avoid
                // having it encoded twice (e.g. "&amp;gt;")
                cell.ToolTip = HttpUtility.HtmlDecode(cell.Text);
            }
        }
    }
}

Latest Version of Opera Ignores Hosts File

Jeremy Jameson — Thu, 29 Oct 2009 13:17:00 GMT

As I mentioned in my previous post, I discovered a rather nasty UI bug last week with the new portal we are building for a customer. Unfortunately, the layout issue only occurred in the Safari browser.

Since I couldn't repro the issue in Internet Explorer or Firefox, I decided to see if Opera exhibited the same problem as Safari. Consequently, I downloaded and installed the latest version of Opera (note that I've rebuilt both my desktop and development VM since the last time I used Opera).

Unfortunately. I discovered there's a known bug with Opera version 10 that causes it to ignore your local hosts file (e.g. %SystemRoot%\drivers\etc\hosts).

Oh c'mon, Opera Team, you've got to be kidding!

How can you expect a developer to even try your browser if he can't browse to a site in his local development environment using a fully qualified domain name (e.g. http://www-local.fabrikam.com)?

Needless to say, I didn't spend much time trying to workaround the issue. My prediction: Opera is all but extinct in another year or two.

That's too bad. From what I remember, Opera used to be a pretty good browser -- and maybe it still is, aside from the bug with the hosts file. It was certainly years ahead of IE6 in terms of Web standards compliance.

Does anyone know the current browser stats? It wouldn't surprise me if Opera was surpassed by Safari some time ago.

Troubleshooting Layout Problems with Safari

Jeremy Jameson — Thu, 29 Oct 2009 12:57:00 GMT

I discovered a rather nasty UI bug last week with the new portal we are building for a customer. Unfortunately, the layout issue only occurred in the Safari browser. Even worse, I discovered it only a day before the CEO of customer discovered it himself on his Mac! Ouch.

Note that I typically test Web sites using Internet Explorer and Firefox. In fact, that's what our statement of work contractually obligates for this project (and not IE6, thankfully, but rather IE7 and IE8).

I've occasionally tested with Opera and Safari in the past, but in general I've found this to be unnecessary because most of these browsers have strong support for modern Web standards.

However, this week I discovered that a page that looks good in Internet Explorer and Firefox doesn't necessarily look good in Safari.

Since I didn't have access to my faithful Firebug or Internet Explorer Developer Tools, I was initially stumped on troubleshooting the problem. However, a little bit of searching uncovered the following gem:

Firebug For Safari

http://vision-media.ca/resources/misc/firefox-for-safari

Unlike many of the other search results that I looked at, this one doesn't actually discuss using Firebug in Safari (which I was reluctant to try because, from what I read, all of the CSS rules are read-only when you use Firebug with Safari). Rather, this page shows the similar set of tools that Apple provides with their browser. It also shows how to easily enable the Safari developer tools without hacking a preferences file (which I initially tried locating on my Windows VM using instructions based on a Mac, but I quickly gave up on that effort).

After spending about 45 minutes with the Safari developer tools, I was finally able to track down the float CSS rule that was causing my Login Form Web Part to be displayed behind the <h1> heading for the main content of the page in Safari.

A few minutes later and I had my fix checked-in to TFS. Whew!

DataNavigateUrlFormatString Does Not Allow "javascript:"

Jeremy Jameson — Mon, 26 Oct 2009 14:49:00 GMT

I encountered an interesting bug last Friday with the ASP.NET HyperLinkField control. To understand the scenario, think of the typical "view detail" feature when showing summary data in a table. In other words, you want to provide users the ability to click a cell in a table (e.g. a GridView control) in order to see more information.

I've implemented this scenario before, so I was a stumped when I couldn't get it to work right away. However, this time the scenario was a little different because we want to display a popup window to an external site. Also note that several visual properties of the popup window need to be specified for our application -- such as the width and height of the window, as well as hiding the menu bar, status bar, etc.

In other words, we need the links in the table to actually call a JavaScript function instead of specifying a simple URL.

My initial attempt was to specify something like :

<asp:GridView ID="summaryGrid" runat="server"
    AutoGenerateColumns="False"
    ...>
    ...
    <Columns>        
        <asp:HyperLinkField DataNavigateUrlFields="Id"
           DataNavigateUrlFormatString="javascript:ShowItemDetail({0})"
           DataTextField="CreateTime"
           DataTextFormatString="{0:ddd MMM dd HH:mm}"
           HeaderStyle-CssClass="dateColumn"
           HeaderText="Date" />  
       ...
    </Columns>
</asp:GridView>

Note that ShowItemDetail is a JavaScript function that simply calls window.open (specifying the URL as well as additional "feature" parameters such as the window width and height).

Unfortunately, if you specify something like "javascript:ShowItemDetail({0});" in DataNavigateUrlFormatString, you will find that ASP.NET renders an anchor element with no href attribute (e.g. <a>Mon Oct 26 08:23</a>) -- which obviously doesn't work. This appears to be "by design" -- in order to "mitigate against cross-site scripting attacks."

Refer to the following for more detail:

asp:GridView does not render HyperLinkField when a colon (:) is included in the DataNavigateUrlFormatString. 2007-06-05.

https://connect.microsoft.com/VisualStudio/feedback/ViewFeedback.aspx?FeedbackID=102300

To workaround this, use a TemplateField instead:

<asp:GridView ID="summaryGrid" runat="server"
    AutoGenerateColumns="False"
    ...>
    ...
    <Columns>
        <%-- HACK: Ideally, we would just use an asp:HyperLinkField,
        but there's a bug when specifying "javascript:" in the
        DataNavigateUrlFormatString:

        https://connect.microsoft.com/VisualStudio/feedback/ViewFeedback.aspx?FeedbackID=102300

        As a workaround, use a TemplateField instead. --%>
        <asp:TemplateField>
           <HeaderTemplate>Date</HeaderTemplate>
           <HeaderStyle CssClass="dateColumn" />
           <ItemTemplate>
               <a href='javascript:ShowItemDetail(<%# Eval("Id")%>)'>
                   <%# Eval("CreateTime", "{0:ddd MMM dd HH:mm}") %>
               </a>
           </ItemTemplate>
        </asp:TemplateField>
        ...
    </Columns>
</asp:GridView>

Or, if you are really paranoid about the performance impact of using reflection in the DataBinder.Eval method, you can use strongly typed objects instead:

<asp:GridView ID="summaryGrid" runat="server"
   AutoGenerateColumns="False"
   ...>
   ...
   <Columns>
      <%-- HACK: Ideally, we would just use an asp:HyperLinkField,
      but there's a bug when specifying "javascript:" in the
      DataNavigateUrlFormatString:
        
      https://connect.microsoft.com/VisualStudio/feedback/ViewFeedback.aspx?FeedbackID=102300
        
      As a workaround, use a TemplateField instead.
      --%>
      <asp:TemplateField>
         <HeaderTemplate>Date</HeaderTemplate>
         <HeaderStyle CssClass="dateColumn" />
         <ItemTemplate>
             <a href='javascript:ShowItemDetail(<%# ((Fabrikam.Demo.Integration.Incident)Container.DataItem).Id %>)'>
                 <%# ((Fabrikam.Demo.Integration.Incident)Container.DataItem).CreateTime.ToString("ddd MMM dd HH:mm") %>
             </a>
         </ItemTemplate>
      </asp:TemplateField>
      ...
   </Columns>
</asp:GridView>

Of course, if you choose to go the strongly-typed route, you will need to reference the assembly containing your custom business objects. For example:

<%@ Assembly Name="Fabrikam.Demo.Integration, Version=1.0.0.0, Culture=neutral, PublicKeyToken=786f58ca4a6e3f60" %>

Add Rooler to Your Web Development Toolbox

Jeremy Jameson — Wed, 21 Oct 2009 10:19:00 GMT

This past May, one of my colleagues notified me of a new tool called "Rooler" that allows you to easily measure anything displayed on your screen.

I definitely consider this tool a "must have" for anyone out there doing Web development. While tools like Firebug and the new developer tools in Internet Explorer 8 are great for analyzing the layout of Web pages, I often find myself using Rooler when tweaking CSS rules in order to achieve that "pixel perfect" design. For example, yesterday I was working on styling the new customer service portal that I'm working on and I wanted to match the customer's current .com site. Rooler enabled me to identify the dimensions of the header and margins of various elements with almost no effort whatsoever.

If you haven't already discovered Rooler, I strongly recommend you download it today.

KB 896861 and "Microsoft Fix it"

Jeremy Jameson — Wed, 14 Oct 2009 12:25:00 GMT

A couple of days ago, I rebuilt one of my development VMs for Microsoft Office SharePoint Server (MOSS) 2007. As I've noted in a previous post, I've found that I need to apply one of the registry hacks described in the following KnowledgeBase article:

You receive error 401.1 when you browse a Web site that uses Integrated Authentication and is hosted on IIS 5.1 or a later version

http://support.microsoft.com/kb/896861

When I browsed to KB 896861 this week, I noticed that it has been updated since the last time I saw it. Apparently, this has become such a common issue that Microsoft now provides an automated way to fix the issue:

Fix this problem
Microsoft Fix it 50306

This was the first time I've seen a reference to Microsoft Fix it, and I have to say that I like it -- and for more than just the cute moniker and button image, too!

Formatting Code for My Blog

Jeremy Jameson — Fri, 09 Oct 2009 17:46:00 GMT

It occurred to me this morning that while I previously shared some details on how I manage my MSDN blog, I've never shared my method for formatting code for the Web.

Actually, calling it "my method" is definitely a bit of a stretch. I certainly didn't come up with the approach but rather refined someone else's approach (and code) to suit my needs. The original credit goes to David Anson.

Prior to adopting David's approach, I previously copied code from Visual Studio, pasted it into Microsoft Word, then copied it again in Microsoft Word, and finally pasted into Expression Web. While this achieved the desired end result -- meaning, formatted code with color syntax highlighting -- it definitely was a little kludgey. First, the four-step process -- while not excessively tedious -- was definitely less than desirable, because it often meant I had to fire up Word for the sole purpose of formatting code (note that copy/paste from Visual Studio into Expression Web does not preserve the formatting). Second -- and more importantly -- the resulting HTML markup was just "crap" (sorry, I can't think of a more eloquent way to put that right now).

When I started looking at approaches for improving the formatting of code for my blog, I found that there were numerous "solutions" out there. However, I knew what I really wanted was something that would produce a minimal amount of HTML markup (or at least a lot less HTML than Microsoft Word) and, preferably, something that generated semantic markup as well -- or at least reasonably semantic markup.

What I mean by semantic markup is that code should be wrapped in a <code> tag -- as well as a <pre> tag (in order to correctly display line breaks, indenting, etc.). To understand what I mean by semantic markup for code, consider the following example:

using System;

public class Class1
{
    public Class1()
    {
        string foo = "foo";
    }
}

In HTML markup, this is expressed as:

<div class='codeBlock'><pre><code><span style='color:#0000ff'>using</span> System;

<span style='color:#0000ff'>public</span> <span style='color:#0000ff'>class</span> <span style='color:#2b91af'>Class1
</span>{
    <span style='color:#0000ff'>public</span> Class1()
    {
        <span style='color:#0000ff'>string</span> foo = <span style='color:#a31515'>"foo"</span>;
    }
}</code></pre></div>

The <div class='codeBlock'> element is used to constrain lengthy code blocks (i.e. show a vertical scrollbar when necessary) and also format code with a background color and border.

Note that in the stricted sense, this isn't 100% semantic markup because the <span> tags are used to apply presentational styles, namely the various font colors. Truly semantic markup for code would specify something more like this:

<div class='codeBlock'><pre><code><span class='keyword'>using</span> System;

<span class='keyword'>public</span> <span class='keyword'>class</span> <span class="userType">Class1
</span>{
    <span class='keyword'>public</span> Class1()
    {
        <span class='keyword'>string</span> foo = <span class='string'>"foo"</span>;
    }
}
</code></pre></div>

CSS rules could then be used to achieve the color syntax highlighting:

code .keyword
{
    color: #0000ff;
}
code .string
{
    color: #a31515;
}
code .userType
{
    color: #2b91af;
}

Anyway, getting back to the real topic for this post...

I really liked David's approach since a) it was simple (meaning I didn't need to spend much time understanding his code sample), and b) it leveraged Visual Studio to handle the bulk of the formatting work.

However, there were a couple of "fixes" that I found I needed:

David's original code sample produced errors when I used it from SQL Server Management Studio 2005 (note that SQL Server Management Studio uses the Visual Studio "shell", so one should expect this to work)
David's code sample only inserted a <pre> tag (and not the corresponding <code> and <div class="codeBlock"> tags that I also wanted)

I also wanted to eliminate extraneous <span> tags for the default color (i.e. black).

Note that -- at least to this point -- I haven't made any attempt to generate 100% semantic markup (by converting the style attributes to corresponding CSS class names), because I think it would be somewhat brittle (i.e. dependent on the default color options in Visual Studio) and, honestly, not worth the effort.

Here's the updated code that I now use for my Rtf2Html.exe utility:

// Original source:
// http://blogs.msdn.com/delay/archive/2008/03/13/
// blogging-code-samples-should-be-easy-free-convertclipboardrtftohtmltext-tool-and-source-code.aspx

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

// Convert Visual Studio 2008 RTF clipboard format into HTML by replacing the
// clipboard contents with its HTML representation in text format suitable for
// pasting into a web page or blog.
// USE: Copy to clipboard in VS, run this app (no UI), paste converted text
// NOTE: This is NOT a general-purpose RTF-to-HTML converter! It works well
// enough on the simple input I've tried, but may break for other input.
// TODO: Convert into a real application with a notify icon and hotkey.
namespace ConvertClipboardRtfToHtmlText
{
    static class ConvertClipboardRtfToHtmlText
    {
        private const string colorTbl = "\\colortbl;";
        private const string colorFieldTag = "cf";
        private const string tabExpansion = "    ";

        [System.Diagnostics.CodeAnalysis.SuppressMessage(
            "Microsoft.Maintainability",
            "CA1502:AvoidExcessiveComplexity")]
        [STAThread]
        static void Main()
        {
            if (Clipboard.ContainsText(TextDataFormat.Rtf))
            {
                // Create color table, populate with default color
                List<Color> colors = new List<Color>();
                Color defaultColor = Color.FromArgb(0, 0, 0);
                colors.Add(defaultColor);

                bool insideSpan = false;

                // Get RTF
                string rtf = Clipboard.GetText(TextDataFormat.Rtf);

                // Parse color table
                int i = rtf.IndexOf(
                    colorTbl,
                    StringComparison.OrdinalIgnoreCase);

                if (-1 != i)
                {
                    i += colorTbl.Length;

                    // When copying from Visual Studio, we expect
                    // "\\colortbl;\r\n". However when copying from SQL Server
                    // Management Studio, we expect just "\\colortbl;".
                    SkipOptionalText(rtf, ref i, "\r\n");

                    while ((i < rtf.Length) && ('}' != rtf[i]))
                    {
                        // Add color to color table
                        SkipOptionalText(rtf, ref i, "\r\n");
                        SkipExpectedText(rtf, ref i, "\\red");
                        byte red = (byte)ParseNumericField(rtf, ref i);
                        SkipExpectedText(rtf, ref i, "\\green");
                        byte green = (byte)ParseNumericField(rtf, ref i);
                        SkipExpectedText(rtf, ref i, "\\blue");
                        byte blue = (byte)ParseNumericField(rtf, ref i);
                        colors.Add(Color.FromArgb(red, green, blue));
                        SkipOptionalText(rtf, ref i, "\r\n");
                        SkipExpectedText(rtf, ref i, ";");
                    }
                }
                else
                {
                    throw new NotSupportedException(
                        "Missing/unknown colorTbl.");
                }

                // Find start of text and parse
                i = rtf.IndexOf("\\fs", StringComparison.OrdinalIgnoreCase);
                if (-1 != i)
                {
                    // Skip font size tag
                    while ((i < rtf.Length) && (' ' != rtf[i]))
                    {
                        i++;
                    }
                    i++;

                    // Begin building HTML text
                    StringBuilder sb = new StringBuilder();
                    sb.Append("<div class='codeBlock'><pre><code>");
                    while (i < rtf.Length)
                    {
                        if ('\\' == rtf[i])
                        {
                            // Parse escape code
                            i++;
                            if ((i < rtf.Length) &&
                                (('{' == rtf[i])
                                    || ('}' == rtf[i])
                                    || ('\\' == rtf[i])))
                            {
                                // Escaped '{' or '}' or '\'
                                sb.Append(rtf[i]);
                            }
                            else
                            {
                                // Parse tag
                                int tagEnd = rtf.IndexOf(' ', i);
                                if (-1 != tagEnd)
                                {
                                    if (rtf.Substring(
                                        i,
                                        tagEnd - i).StartsWith(
                                            colorFieldTag,
                                            StringComparison.OrdinalIgnoreCase))
                                    {
                                        // Parse color field tag
                                        i += colorFieldTag.Length;
                                        int colorIndex = ParseNumericField(rtf, ref i);
                                        if ((colorIndex < 0)
                                            || (colors.Count <= colorIndex))
                                        {
                                            throw new NotSupportedException(
                                                "Bad color index.");
                                        }

                                        if (insideSpan == true)
                                        {
                                            sb.Append("</span>");
                                            insideSpan = false;
                                        }

                                        // Change to new color
                                        if (colors[colorIndex] != defaultColor)
                                        {
                                            sb.AppendFormat(
                                                "<span style='color:#{0:x2}{1:x2}{2:x2}'>",
                                                colors[colorIndex].R, colors[colorIndex].G,
                                                colors[colorIndex].B);

                                            insideSpan = true;
                                        }
                                    }
                                    else if ("tab" ==
                                        rtf.Substring(i, tagEnd - i))
                                    {
                                        sb.Append(tabExpansion);
                                    }

                                    // Skip tag
                                    i = tagEnd;
                                }
                                else
                                {
                                    throw new NotSupportedException(
                                        "Malformed tag.");
                                }
                            }
                        }
                        else if ('}' == rtf[i])
                        {
                            // Terminal curly; done
                            break;
                        }
                        else
                        {
                            // Normal character; HTML-escape '<', '>', and '&'
                            switch (rtf[i])
                            {
                                case '<':
                                    sb.Append("&lt;");
                                    break;
                                case '>':
                                    sb.Append("&gt;");
                                    break;
                                case '&':
                                    sb.Append("&amp;");
                                    break;
                                default:
                                    sb.Append(rtf[i]);
                                    break;
                            }
                        }
                        i++;
                    }

                    // Finish building HTML text
                    if (insideSpan == true)
                    {
                        sb.Append("</span>");
                        insideSpan = false;
                    }

                    sb.Append("</code></pre></div>");

                    // Update the clipboard text
                    Clipboard.SetText(sb.ToString());
                }
                else
                {
                    throw new NotSupportedException(
                        "Missing text section.");
                }
            }
        }

        // Skip the specified text
        private static void SkipExpectedText(string s, ref int i, string text)
        {
            foreach (char c in text)
            {
                if ((s.Length <= i) || (c != s[i]))
                {
                    throw new NotSupportedException("Expected text missing.");
                }
                i++;
            }
        }

        private static void SkipOptionalText(
            string s,
            ref int i,
            string text)
        {
            string substring = s.Substring(i, text.Length);

            if (substring == text)
            {
                i += text.Length;
            }
        }

        // Parse a numeric field
        private static int ParseNumericField(string s, ref int i)
        {
            int value = 0;
            while ((i < s.Length) && char.IsDigit(s[i]))
            {
                value *= 10;
                value += s[i] - '0';
                i++;
            }
            return value;
        }
    }
}

I suppose I could have kept the ConvertClipboardRtfToHtmlText moniker that David originally had, but for some reason I decided to abbreviate it. In hindsight, I'm really not sure why I didn't keep the name, but oh well...

Whenever I need a code sample in a blog post, I simply copy the code in Visual Studio, double-click Rtf2Html.exe in my Toolbox, and then paste into Expression Web. It's still a three-step process, but not one that takes more than three or four seconds, and more importantly, it now produces much better HTML markup than the hack I used to use with Microsoft Word.

Expression Web, My MSDN Blog, and (Now) Team Foundation Server

Jeremy Jameson — Sat, 12 Sep 2009 17:17:00 GMT

In case you haven't picked it up from some of my previous posts, I became somewhat of a "Web standards zealot" back in 2006 while creating a "community site" for a local organization of mental health professionals and attorneys that help children and their parents through divorce. After reading books like The Zen of CSS Design, Web Standards Solutions, and Bulletproof Web Design, I realized the fundamental concept of Web standards design closely aligns with my preference of keeping things as simple as possible. Last year, I got a copy of Transcending CSS and I highly recommend this book as well for anyone responsible for creating Web sites.

Although it may strike people as somewhat odd, I've been using Microsoft Expression Web for the last couple of years to manage the content for my MSDN blog. While the underlying platform for MSDN blogs (i.e. Community Server) certainly provides rich editing functionality, I personally prefer to have very tight control over the HTML whenever I am creating content for the Web. There are also a few things that really bother me about the editing functionality in Community Server (or at least the version of Community Server that Microsoft is currently using).

Before finally choosing Expression Web, I looked at various other tools for authoring blog posts, including Windows Live Writer and even Microsoft Word 2007. However, I found that by using Expression Web and a simple "template" that I created, I could quickly and easily create blog posts with just the kind of "minimal markup" that I was looking for.

My template simply contains a variety of markup that I commonly use when creating blog posts, such as:

<blockquote class="directQuote errorMessage">
    [Direct quote, error message]</blockquote>

Whenever I need to create a new blog post, I simply copy my template (i.e. default.htm) into the corresponding Archive\{year}\{month}\{day} folder, rename the file to something like sharepoint-2010-sneak-peek.aspx, and then start replacing the placeholder text with the corresponding content. Note that I have defined a few custom CSS rules in Community Server to change the style of my blog content, such as:

.directQuote {
    font-style: italic;
}
.errorMessage {
    color: red;
}

I define these styles in a CSS file (i.e. Themes\MSDN\MSDN.css) that is referenced by each page, thus giving me a WYSIWYG (What You See Is What You Get) experience when authoring blog content. This is one of the biggest things lacking from the editing functionality provided by Community Server, meaning that it doesn't apply your custom CSS rules when previewing a blog post before publishing.

Once I have finished writing a blog post in Expression Web, I simply copy the HTML within the <body> element, browse to my MSDN blog, click the Write a Blog Post link, click the Edit HTML Source toolbar button in the Community Server Control Panel, and then paste my content into the HTML source view.

I freely admit this approach takes a little longer than simply authoring posts directly on the site, but I believe it is well worth it. Even more so, now that my blog is stored in Team Foundation Server (TFS)...

Back in August while I was in Redmond for SharePoint 2010 Training, I took the opportunity of being on the Microsoft campus to rebuild my laptop with Windows 7. Prior to that rebuild, I had been running Windows Server 2008 on my laptop so that I could utilize Hyper-V regardless of whether I was working at a customer site or from home (with access to the "Jameson Datacenter" and all of my various VMs).

As part of this latest rebuild, I installed the latest version of the Microsoft Expression suite. One of the new features I discovered in Expression Web 3 is the ability to integrate with Team Foundation Server for source control. Note that this integration isn't completely out-of-the-box (i.e. you have to download a QFE to enable it).

This morning, I finally found some time to move the "offline copy" of my MSDN content from my Documents folder into Team Foundation Server. I simply needed to create a new team project in TFS and then configure my workspace for source control. Once this was done, the TFS integration features of Expression Web 3 simply just worked, as shown below:

Figure 1: Expression Web - my MSDN blog

See full-sized image.

Notice how items that are checked into source control have a lock icon and new items that are pending have a "plus" icon next to them. In other words, the Folder List in Expression Web (which essentially shows your Web site "solution") now behaves a lot like the Solution Explorer window in Visual Studio (at least from the perspective of source control).

Even though the offline content of my MSDN blog content was previously backed up on one of the servers in the Jameson Datacenter, now that it is stored in TFS, it is much easier for me to author blog posts from multiple computers (by simply doing a Get Latest from TFS). I also like the fact that my posts now have versioning -- so in the rare case where I actually go back and annotate a blog post, I can now easily "diff" my changes whenever I want.

I personally love Expression Web, and now that it integrates with TFS, I love it even more! [Although I'm still getting used to the new "dark theme" introduced in v3 -- which was carried over from the previous version of Expression Blend.]

Creating Wireframes for Page Layouts

Jeremy Jameson — Fri, 26 Jun 2009 16:34:00 GMT

When helping customers migrate their Internet sites to Microsoft Office SharePoint Server (MOSS) 2007, I've found it very helpful to create wireframes showing the various fields, Web Parts, and master page content. For the last several years, I've been doing this in Microsoft Office Visio, but you could certainly achieve similar results with other tools, such as Expression Design.

I start by taking a series of screenshots of the existing Web site using Screengrab! (which makes it very easy to capture entire Web pages). For example, here is a screenshot of a "Generic" page on the Agilent Technologies - LSCA site that I captured a couple of years ago.

Figure 1: "Generic" page

See full-sized image.

I then paste the screenshot into Visio.

Next, I deemphasize the portions of the page rendered by the master page. To accomplish this, add a rectangle with the text Header (Master Page) over the top portion of the page. Then fill the rectangle with light gray (Shade 15%) and set the transparency to 30%. Repeat similar steps for the footer and other content provided by the master page.

The next step is to emphasize the various fields that we need to define in the corresponding content type. In Figure 1, it is easy to discern that we have a Title (i.e. "Glycomics Solution"), a Page Image (i.e. the circular image on the right side of the page), and some arbitrary amount of Page Content (i.e. the "stuff" in the middle). I also chose to provide a Subtitle field for the bold text at the top of the page. Isolating the Subtitle allows us to provide "semantic markup" and better control the formatting and layout of this content.

To highlight these various fields, I create rectangles with corresponding text and fill them with a very light red (Tint 35%) and again set the transparency to 30%.

We now have a "wireframe" that shows the various portions of the page with just enough visibility of the underlying content to understand what each portion refers to.

Figure 2: "Generic" page (Page Layout)

See full-sized image.

Here is another example, based on a press release.

Figure 3: Sample Press Release

See full-sized image.

Figure 4 shows the corresponding page layout.

Figure 4: Press Release (Page Layout)

See full-sized image.

Note the importance of choosing good sample pages when mocking up the wireframes for page layouts. I chose the example press release above based on the fact that it had "additional contact" information. In other words, all press releases have primary contact information (which I chose to map to the out-of-the-box Contact Name, Contact Phone, and Contact E-mail Address fields), but only some press releases have additional contacts -- which may consist of one more more individuals. Rather than attempting to create separate fields for each individual's name, phone number, and e-mail address, we chose to simply provide a single field for greater flexibility.

Some pages may be comprised of both fields and Web Parts. For example, consider the following product detail page.

Figure 5: Sample product detail page

See full-sized image.

In this scenario, the "Buy Zone" and "Announcements" features are both implemented as individual Web Parts (due to the dynamic nature of this content). Figure 6 shows the corresponding page layout, highlighting the Web Parts in a different color.

Figure 7: Product Detail (Page Layout)

See full-sized image.

Wireframes like these are valuable when you are trying to define the various content types and page layouts, as well as when it comes time to document your various feature specs. So the next time you start a SharePoint project -- or any Web development project for that matter -- I recommend creating a Screenshots library right from the start and adding artifacts like these. I also keep a copy of the Visio file (typically named Models - Page Layouts.vsd) so I can quickly make changes as the content types and page layouts evolve over time.

Configuring Logging in ASP.NET Applications (and SharePoint)

Jeremy Jameson — Fri, 19 Jun 2009 04:38:00 GMT

This post continues on the original post for my simple, but highly effective approach to logging and the follow-up post which introduced configuring logging for console applications.

Obviously not all solutions are simple console-based applications. With ASP.NET Web services and applications -- including Microsoft Office SharePoint Server (MOSS) and Windows SharePoint Services (WSS) -- you can still view log messages from the Logger class very easily on a per-request basis.

Note that the System.Web.WebPageTraceListener can be specified in Web.config to enable logging to the ASP.NET tracing feature:

  <system.diagnostics>
    <sources>
      <source name="defaultTraceSource" switchName="allTraceLevel">
        <listeners>
          <add name="webPageTraceListener" />
        </listeners>
      </source>
    </sources>
    <sharedListeners>
      <add type="System.Web.WebPageTraceListener, System.Web, Version=2.0.0.0,
Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"
        name="webPageTraceListener" traceOutputOptions="None" />
    </sharedListeners>
    <switches>
      <add name="allTraceLevel" value="All" />
      <add name="verboseTraceLevel" value="Verbose" />
      <add name="infoTraceLevel" value="Info" />
      <add name="warningTraceLevel" value="Warning" />
      <add name="errorTraceLevel" value="Error" />
      <add name="offTraceLevel" value="Off" />
    </switches>
  </system.diagnostics>

Also note that ASP.NET tracing must be enabled using the <trace> element within <system.web>:

  <system.web>
    <trace enabled="true" pageOutput="false" requestLimit="50" localOnly="true" />
  </system.web>

Be sure to set the requestLimit high enough to enable access to the page trace you are interested, but also be aware that you can easily clear the captured traces and then browse to the page of interest again.

Once configured, browse to the page on the site. Then modify the URL to browse to Trace.axd (e.g. http://fabrikam-local/Trace.axd) to display the Trace Viewer.

Figure 1: ASP.NET Trace Viewer

See full-sized image.

Locate the request that you want to view log messages for and click the corresponding View Details link.

Figure 2: ASP.NET Trace Viewer

See full-sized image.

Notice that the WebPageTraceListener even formatted the warning message in red. How cool is that?! [For all you SharePoint developers out there, compare this with "diving" into the ULS logs to find an error or warning for a particular page request!]

Be aware that the Web.config file you use for SharePoint applications varies depending on whether you want to view log messages for a content page or for an application (i.e. _layouts) page. This is covered in my next post.

Internet Explorer 8 Upgrade

Jeremy Jameson — Tue, 24 Mar 2009 16:12:00 GMT

In case you missed the announcement, Internet Explorer 8 was released last week.

I'll be honest, I tried one of the early betas of IE8 on a VM a long time ago, but I didn't spend a lot of time with it because it always seemed like there was some more pressing matter that required my attention. As I'm fond of saying, there are typically three levels of issues that get piled on my plate: hot, hotter, and thermonuclear!

This past weekend, I upgraded 3 of my 10 active "machines" to IE8: my Vista x64 desktop, my Windows Server 2008 x64 laptop, and a Windows Server 2008 x86 VM that I am currently using as my SharePoint development environment. [I say active, because this is the number of physical and virtual machines that I keep running 24x7 in the "Jameson Datacenter" -- a.k.a. my home office. No, I still haven't gotten around to running that CAT5 cable from the second floor down to the basement so I can get these portable space heaters -- er, I mean servers -- out of the way.]

I'll wait for IE8 to be available via Windows Update before upgrading the remaining active machines -- or the countless inactive machines in my inventory (i.e. VMs that haven't been fired up in months or more, but I still keep around for demos and reference material) if and when these are ever fired up again.

The upgrade from IE7 to IE8 on each of these three machines went without the slightest glitch, and while I can't say that I'm heavily leveraging new features like Accelerators and Web Slices (yet), I must admit that I really like the fact that IE8 is much more Web standards compliant than any previous version of Internet Explorer.

As I've hinted in the past, the death of IE6 cannot come soon enough. I'm certainly not the only person to have this opinion. Here are just a few of the dozens of sites dedicated to eradicating IE6:

With IE8, I'm also digging the fact that tabs are grouped by color to indicate which tabs were opened from a particular page. I have a habit of doing an Internet search and then using CTRL+click to quickly open the top 3-5 results so I can scan them for the information I am looking for. By highlighting the tabs with various colors, it gives this scenario an improved user experience (for example, it is very easy to quickly close tabs that I no longer want open).

I've also started using some of the IE8 Developer Tools -- and I must say these are a vast improvement over the previous IE Developer Toolbar. However, it's much too early to say whether you'll be able to pry Firefox and its various add-ons out of my toolbox ;-)

[Update 2009-03-25: Yesterday I forgot to mention another vastly improved feature in IE8.

I tend to use CTRL+F frequently to find a particular string on a page (error messages, method names, etc.). When compared with Firefox, the user experience of the "Find on this page" feature in versions prior to IE8 left a little to be desired -- to put it mildly.

Prior to IE8, your could CTRL+F, start typing your search term, and then press Enter to quickly find the specified string on the page; however, if you decided that you wanted to search for something else, then a subsequent CTRL+F would only cause the Find dialog window to get focus, but you couldn't immediately start typing your new search term (because the focus would be on the Next button).

Fortunately, this has been overhauled in IE8 by eliminating the Find dialog altogether and instead integrating this feature into the main window. You can now quickly use CTRL+F repeatedly to search for different terms on a page. IE8 even has "hit highlighting" similar to Firefox.]

Fessing Up About Firefox

Jeremy Jameson — Mon, 20 Oct 2008 16:27:00 GMT

My name is Jeremy, and I'm a Firefox user.

There, I've said it.

I know, I know...what am I thinking, a Microsoft employee telling the world that Internet Explorer isn't the end all, be all browser for everyone?!

Well, first let me clarify a little. I actually do use Internet Explorer as my primary browser. Internet Explorer 7 is a great browser! Although honestly, I cringe whenever I think about the large market share still held by IE6. In my humble opinion, enterprise IT organizations are doing their users a great disservice by not allowing them -- or, heck, even forcing them -- to upgrade to IE7. The improved security alone should be enough to justify upgrading to IE7 as soon as possible.

Now, I know that there were definitely some compatibility issues with IE7 immediately after its release. For example, all of those "bad" Web applications that were hard-coded to detect version 6, rather than version 6 or later -- but surely all the owners of those Web applications have resolved these issues by now ;-)

I also acknowledge that IE6 is actually fairly poor -- at least by comparison -- in its support for Web standards. Anybody who has done any significant amount of Web development can tell you about their own personal frustrations -- er, I mean experiences -- dealing with box model hacks and quirks mode. [I can't tell you how much I am looking forward to the improved standards support in IE8.]

But alas, the purpose of this post is not to rant about IE6 or IE7, but rather to tell you about why I often use Firefox.

It is true that Firefox currently supports Web standards, um, differently than Internet Explorer -- and as a Web developer, I am responsible for making sure the my pages look great in both Internet Explorer and Firefox (and occasionally other browsers as well). However, that's not the real reason I use Firefox, or at least not the most important reason.

Why I use Firefox can easily be summed up in one word: add-ons. [Okay, technically speaking that may actually be two words, but...whatever.]

In the beginning, my dependency on Firefox started with Screengrab!.

However, over time, and especially after I got serious about Web development (such as dumping table-based layout and eliminating spacer GIFs in favor of pure CSS -- á la, Douglas Bowman), I began to rely heavily on other add-ons as well -- in particular, Web Developer and Firebug.

Most recently, I have also added YSlow to my virtual Toolbox (referring to my standard set of tools that I ensure are installed on every laptop, desktop, and VM that I develop on).

My Essential Firefox Add-ons

Screengrab!

When creating feature specs, or other documentation, I often embed screenshots of Web pages.

Back in the Middle Ages -- or at least before I discovered Screengrab! -- I used to use ALT+PRINT SCREEN to get a an image of the page into Microsoft Paint, where I would then trim it as necessary and subsequently copy/paste into a document.

While this works great for certain pages, it is terrribly inefficient when you want to capture an entire Web page, but the page is too long to fit on screen (in other words, the vertical scrollbar appears in the browser). Believe it or not, I actually used to scroll down, ALT+PRINT SCREEN again, and then delicately "append" the new capture to the bottom of the previous capture in Paint! Needless to say, I didn't do this very often, because it could literally take a couple of minutes to repeat this process several times for single page.

Then I discovered a utility on CodeProject that allowed me to capture the entire Web page all at once. This actually worked fairly well for a while. However, I found that after I upgraded from IE6 to IE7, I frequently encountered the problem where the captured image would be entirely black.

Shortly thereafter, I found Screengrab! and I've never since looked for anything else. It is extremely "lightweight" and, unlike some of the other screen capture utilities for Firefox, it provides just the essential features:

Capture only the visible portion of the page, the entire page, or just a selected portion
Copy the image to the clipboard or save directly to a PNG file

The only quirk that I've noticed is that I can't copy a Web page and paste it directly into Microsoft Office programs. Instead, I still use Paint as an "intermediary" -- which isn't really an issue due to the speed at which this can be accomplished with CTRL+V (to paste from Screengrab! into Paint), CTRL+C (to copy the entire selection in Paint -- thus replacing the clipboard content), followed by CTRL+V (to paste the image into Word or Powerpoint).

Web Developer

Chris Pederick's Web Developer add-on provides a toolbar chock-full of goodies for Web development. Honestly, there are a lot more features in this add-on than I've ever even begun to use. However, I've found it very helpful simply for the following:

Quickly disabling/enabling various browser features, such as caching, JavaScript, cookies, and CSS
Viewing and managing cookies
Resizing the browser window to view a page in standard sizes, such as 1024x768 or (shudder) even 800x600
Outlining specific HTML elements (such as all block level elements) to quickly gain familiarity with the structure of a Web page
Validating HTML, CSS, and JavaScript

A long time ago, I tried out the Internet Explorer Developer Toolbar. However, while it worked well with IE6, I subsequently discovered issues after I attempted to install it in IE7. I believe these issues have since been fixed, but honestly I haven't looked at in a few years.

I am looking forward to the new developer tools in Internet Explorer 8 to see how they stack up to this add-on and Firebug.

Firebug

Compared to anything I had ever seen before or since (including the Web Developer toolbars for Firefox and Internet Explorer), Firebug takes Web development to a whole new level.

If you have used the View Source feature of your browser more than, say, two or three times, then you owe it to yourself to stop what you are doing immediately (that means reading this post), and downloading Firefox and Firebug.

Even if you can do without the previous two add-ons I've covered, if you are a Web developer I don't see how you can possibly justify continued ignorance to this beauty of a tool. It is truly amazing!

Seriously, I'm not even going to attempt to tell you how much Firebug has changed my life -- at least from a Web development perspective.

Get it. Learn it. Use it. Exploit it.

It really is that good! You will quickly start to wonder how you ever managed without it.

YSlow

As I mentioned earlier, I only recently added YSlow to my list of "must have" add-ons.

Honestly, while I think the "performance report card" that it generates for a particular page to be helpful, the real reason why I consider this add-on to be essential is simply the ubiquitous "stopwatch" that it adds to the status bar in Firefox. With this feature, you no longer have to estimate how long it took to download a particular page on your site. Rather you can see that, for example, the current page took 1.032 seconds to download and render.

Personally speaking, I think all browsers should include some kind of "stopwatch" feature out-of-the-box (or at least the option to turn it on). It is a fantastic way for team members to quickly answer the question, how is our site doing in terms of performance? I'm certainly not saying this is a replacement for load testing and perf monitoring. It's just a good "finger in the air" kind of thing.

If a Web page is slow, you can then use the other features of YSlow to quickly investigate the reasons (e.g. large page size, too many external resources that need to be downloaded, etc.).

Kudos to the Yahoo! development team for packaging up a bunch of their internal tools and best practices and making them easily usable by Web developers around the world.

Conclusion

I want to emphasize again that the intent of this post is not to say that I prefer Firefox over Internet Explorer, because, honestly, I don't.

To be completely truthful, it's not the Web browser itself that I get excited about, but rather what gets rendered inside the browser that I occasionally find myself saying "wow!" when I see it.

I do believe in some ways, we were caught flat footed at Microsoft by Firefox and are now playing catch-up with Internet Explorer 8. However, it's very important to keep in mind that competition is a very good thing, especially in technology. It keeps us innovating and fuels our passion of changing the world through software.

Will the new developer tools in Internet Explorer 8 be enough to win back some of the Web developer market share that we have lost? For that, I guess only time will tell.