A .NET Developer's Blog

Turning URLs into Hyperlinks (with Truncating Long URLs) in ASP.NET

2011-07-12T04:33:00.000-07:00

Turning URLs into hypyerlinks is fairly easy and straightforward, and actually has been discussed many times before (for example, see here and here). But some times, you also need to truncate the URL in the link text if it's too long. For example, if you have some text with a very long URL like this:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco http://www.example.com/thisisaveeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerylongurl.html laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

You'll probably want to not only turn the URL into a hyperlink, but also truncate the URL in the hyperlink's text to look something like this:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco http://www.example.com/thisisaveeeeeeeeee... laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Finding and Truncating the URLs

Finding the URLs is straightforward and is easily done using Regular expressions, but to truncate the long URLs, we'll need to to check whether the URL is too long, and if so, truncate it before using it in the hyperlink's text.

In this post, I'm going to discuss the details of how to find the URLs. For truncating long URLs, I'm going to use code from my previous post about truncating long text in ASP.NET. Please refer to that post for the details of how the text is truncated.

The Code

public static class UIHelper
{
    private static string ConvertURLs(string text, int textMaxWidth, string fontName, int fontSizeInPixels, bool isFontBold)
    {
        if (string.IsNullOrEmpty(text))
            return text;

        return Regex.Replace(
            text, 
            @"(http(s)*://([\w.]+/?)\S*)",
            LinkTextTruncator.GetLinkTextTruncator(textMaxWidth, fontName, fontSizeInPixels, isFontBold).MatchEvaluator,
            RegexOptions.IgnoreCase | RegexOptions.Compiled);
    }
}

class LinkTextTruncator
{
    public LinkTextTruncator(
        int textMaxWidth, 
        string fontName, 
        int fontSizeInPixels, 
        bool isFontBold)
    {
        _textMaxWidth = textMaxWidth;
        _fontName = fontName;
        _fontSizeInPixels = fontSizeInPixels;
        _isFontBold = isFontBold;
        _matchEvaluator = new MatchEvaluator(TruncateText);
    }

    private int _textMaxWidth;
    private string _fontName;
    private int _fontSizeInPixels;
    private bool _isFontBold;
    private MatchEvaluator _matchEvaluator;

    public string TruncateText(Match m)
    {
        string url = m.ToString();
        return string.Format(
            "{1}",
            url,
            TextTruncator.TruncateText( // For the implementation of TextTruncator.TruncateText(), please refer to my post about truncating long text in ASP.NET
                url,
                _textMaxWidth,
                _fontName,
                _fontSizeInPixels,
                _isFontBold));
    }

    public MatchEvaluator MatchEvaluator
    {
        get
        {
            return _matchEvaluator;
        }
    }

    //
    // Static Members
    //

    private static Dictionary _linkTextTruncatorDic;
    private static Dictionary LinkTextTruncatorDic
    {
        get
        {
            if (_linkTextTruncatorDic == null)
            {
                _linkTextTruncatorDic = new Dictionary();
            }
            return _linkTextTruncatorDic;
        }
    }

    private static object _linkTextTruncatorLocker = new object();
    public static LinkTextTruncator GetLinkTextTruncator(int textMaxWidth, string fontName, int fontSizeInPixels, bool isFontBold)
    {
        string specs = textMaxWidth.ToString() + "px_" + fontName.ToLower() + "_" + fontSizeInPixels.ToString() + "px" + (isFontBold ? "_bold" : "");
        if (!LinkTextTruncatorDic.ContainsKey(specs))
        {
            lock (_linkTextTruncatorLocker)
            {
                LinkTextTruncatorDic.Add(specs, new LinkTextTruncator(textMaxWidth, fontName, fontSizeInPixels, isFontBold));
            }
        }

        return LinkTextTruncatorDic[specs];
    }
}

Usage Example

<%= UIHelper.ConvertURLs("Some text that contains URLs", 200, "Verdana", 12, false) %>

Notes About the Code

For the implementation of TextTruncator.TruncateText(), please check my previous post about truncating long text in ASP.NET

If you check the code in UIHelper.ConvertURLs(), you'll find that I use one of the overloaded versions of Regex.Replace() that takes a MatchEvaluator delegate. Every time a match is found (a URL in this case), LinkTextTruncator.TruncateText() is called, which converts the URL into an anchor tag and calls TextTruncator.TruncateText(), which truncates the URL if it's longer than the specified width, otherwise it returns the same URL untruncated.

I chose to cache the LinkTextTruncator objects (by font family, size and weight) in order to avoid creating a new object every time URLs are truncated and so slightly alleviate the overhead on the garbage collector. But, it should be easy to remove the caching if you find it unneeded.

Needless to say, you need to encode the text passed to ConvertURLs() (using HttpUtility.HtmlEncode(), or Html.Encode() if you're using ASP.NET MVC). You should notice that any ampersands in the URL will be converted to & when the text is encoded, but this is not only valid in HTML, it's actually required but often ignored. If for some reason you don't want the ampersands in the URLs to be converted, you can use Replace("&", "&") on the URL in LinkTextTruncator.TruncateText().

Truncating a text string in ASP.NET to fit within a given pixel width

2010-09-08T00:39:00.001-07:00

Sometimes when developing a web application, you have strings that must fit within a certain pixel width (usually the width of a container, like a div, p, td .. etc). This is esp. more common with links, as you sometimes need every link to fit within one single line and doesn't wrap to the next line (which will happen if the text of the link is too wide to fit within the width of the container). Or to express it visually, you might have a link that looks like this:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis.

And want to make it look like this:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ...

While this should eventually be possible with CSS (using the text-overflow style), it's still not implemented in all browsers. There are some javascript solutions for now that can do the same thing across all browsers, still, I personally prefer a server-side solution as it:

Saves bandwidth (which can also be good for the user experience if the text is too long and takes more time to download, esp. if the user has a slow connection).
Is guaranteed to work in all browsers (including the older ones) regardless of whether they have javascript enabled, or even support it.

OK, now that you're (hopefully!) convinced, let's see how this can be done in ASP.NET. Obviously, first thing we need to do is measure the text width so that if it's longer than the specified width, we truncate it. For this, we'll need to use TextRenderer.MeasureText(), which is actually intended for Windows Forms Applications, but still can be used with ASP.NET.

I wrapped the code required for the truncation into a class, TextTruncator, which you can see its code here (also see the download link at the end of the post):

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

namespace aspnet_TextTruncator
{
    public static class TextTruncator
    {
        // Private Properties
        //

        private static Dictionary<string, int[]> _fontWidthDic;
        private static Dictionary<string, int[]> FontWidthDic
        {
            get
            {
                if (_fontWidthDic == null)
                {
                    _fontWidthDic = new Dictionary<string, int[]>();
                }
                return _fontWidthDic;
            }
        }

        //
        // Public Methods
        //

        public static string TruncateText(string text, int textMaxWidth, string fontName, int fontSizeInPixels)
        {
            return TruncateText(text, textMaxWidth, fontName, fontSizeInPixels, false);
        }

        public static string TruncateText(string text, int textMaxWidth, string fontName, int fontSizeInPixels, bool isFontBold)
        {
            if (string.IsNullOrEmpty(text))
                return text;

            // Check
            //
            if (textMaxWidth < 1 ||
                string.IsNullOrEmpty(fontName) ||
                fontSizeInPixels < 1)
            {
                throw new ArgumentException();
            }

            int[] fontWidthArray = GetFontWidthArray(fontName, fontSizeInPixels, isFontBold);
            int ellipsisWidth = fontWidthArray['.'] * 3;
            int totalCharCount = text.Length;
            int textWidth = 0;
            int charIndex = 0;
            for (int i = 0; i < totalCharCount; i++)
            {
                textWidth += fontWidthArray[text[i]];
                if (textWidth > textMaxWidth)
                {
                    return text.Substring(0, charIndex) + "...";
                }
                else if (textWidth + ellipsisWidth <= textMaxWidth)
                {
                    charIndex = i;
                }
            }
            return text;
        }

        //
        // Private Methods
        //

        private static int[] GetFontWidthArray(string fontName, int fontSizeInPixels, bool isFontBold)
        {
            string fontEntryName = fontName.ToLower() + "_" + fontSizeInPixels.ToString() + "px" + (isFontBold ? "_bold" : "");
            int[] fontWidthArray;
            if (!FontWidthDic.TryGetValue(fontEntryName, out fontWidthArray))
            {
                fontWidthArray = CreateFontWidthArray(new Font(fontName, fontSizeInPixels, isFontBold ? FontStyle.Bold : FontStyle.Regular, GraphicsUnit.Pixel));
                FontWidthDic[fontEntryName] = fontWidthArray;
            }

            return fontWidthArray;
        }

        private static int[] CreateFontWidthArray(Font font)
        {
            int[] fontWidthArray = new int[256];
            for (int i = 32; i < 256; i++)
            {
                char c = (char)i;
                fontWidthArray[i] = IsIllegalCharacter(c, false) ? 0 : GetCharWidth(c, font);
            }
            return fontWidthArray;
        }

        private static int GetCharWidth(char c, Font font)
        {
            // Note1: For typography related reasons, TextRenderer.MeasureText() doesn't return the correct
            // width of the character in pixels, hence the need to use this hack (with the '<' & '>'
            // characters and the subtraction). Note that <' and '>' were chosen randomly, other characters 
            // can be used.
            //

            // Note2: As the TextRenderer class is intended to be used with Windows Forms Applications, it has a 
            // special use for the ampersand character (used for Mnemonics). Therefore, we need to check for the 
            // ampersand character and replace it with '&&' to escape it (TextRenderer.MeasureText() will treat 
            // it as one ampersand character)
            //

            return
                TextRenderer.MeasureText("<" + (c == '&' ? "&&" : c.ToString()) + ">", font).Width -
                TextRenderer.MeasureText("<>", font).Width;
        }

        private static bool ContainsIllegalCharacters(string text, bool excludeLineBreaks)
        {
            if (!string.IsNullOrEmpty(text))
            {
                foreach (char c in text)
                {
                    if (IsIllegalCharacter(c, excludeLineBreaks))
                        return true;
                }
            }

            return false;
        }

        private static bool IsIllegalCharacter(char c, bool excludeLineBreaks)
        {
            // See the Windows-1252 encoding (we use ISO-8859-1, but all browsers, or at least
            // IE, FF, Opera, Chrome and Safari, interpret ISO-8859-1 as Windows-1252).
            // For more information, see http://en.wikipedia.org/wiki/ISO/IEC_8859-1#ISO-8859-1_and_Windows-1252_confusion
            //

            return
                (c < 32 && (!excludeLineBreaks || c != '\n')) ||
                c > 255 ||
                c == 127 ||
                c == 129 ||
                c == 141 ||
                c == 143 ||
                c == 144 ||
                c == 157;
        }
    }
}

Code Description:

The class has only one public method, TruncateText(), which you should call to truncate the text. For performance reasons, I cache the width of the letters so that I don't need to call TextRenderer.MeasureText() again. This was done for good reasons as TextRenderer.MeasureText() can be really slow (in my testing, this change cut the truncation time for a million strings from 8 minutes to 2 seconds!).

Because I chose to cache the width of the letters, I had to limit the character set to ISO-8859-1 (for Latin based languages) which works well for my own purposes. If you need this code to work with Unicode, you'll need to remove the letter width caching mechanism and call TextRenderer.MeasureText() every time you want to measure the text width (which will slow things down a bit, but shouldn't be noticeable unless you plan to use this on a very high traffic website and on not-fast-enough machines, you'll have to do your own testing to be sure). You could also change the letter width caching mechanism to use a dictionary instead of an array and only add the letters to the dictionary when they are actually used.

You may notice that in TruncateText(), instead of passing a font object, I pass the font name, size in pixels and whether it's bold. I do this for convenience reasons, but this should be fairly easy to change if you want to pass a Font object (probably, to also use other font styles like italic, but you'll also need to change the caching mechanism of the letter width).

Note: You'll need to add references to the System.Windows.Forms and System.Drawing assemblies in your project in order for this code to work.

Example:

In your .aspx page

<%= TextTruncator.TruncateText("Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut", 300, "Verdana", 12) %>

Of course in real use, the text will most likely come from your database, an xml file or another source.

A Note About Web Browsers

In many discussions on the web, you'll read that you shouldn't depend on the text width in pixels as there's no guarantee that different browsers will display the text in the same way (i.e. the width of the text may differ from one browser to another). While it's true that there's no guarantee, in my real life testing in all popular browsers (and less popular ones), I found that in all browsers the width of the text as displayed in the browser never exceeded the maximum width I specified for the text in TruncateText(), sometimes it was slightly smaller (by only a few pixels - that was in the older versions of Safari on Windows), but again it was never larger. If you are paranoid, like me, always use a 'safety margin'. For example, if the width of the container of the text (div, p, td or whatever element) is 500px, make the maximum width (that's passed to TruncateText()) less by 10px or 20px, that's 490 or 480.

Download code and demo project

Using Visual Studio Macros for Code Generation

2010-08-30T20:16:00.000-07:00

Visual Studio Macros are great for automating repetitive tasks and can be real time savers. One thing I esp. like to use them for is code generation.

For example, this macro generates the code for C# class properties (I actually prefer this to using automatic properties as I don't have to change the code later):

Sub CreateProperties()

    Dim textSelection As EnvDTE.TextSelection
    textSelection = CType(DTE.ActiveDocument.Selection(), EnvDTE.TextSelection)

    Dim outputText As String
    Dim regExpression As New Regex("\s*(static)*\s*(\S+)\s*([a-zA-Z0-9_]+)", RegexOptions.Compiled)
    For Each line As String In textSelection.Text.Split(New Char() {vbNewLine})
    Dim m As Match = regExpression.Match(line)
        If m.Success Then
            Dim staticModifier As String = m.Groups(1).Value
            Dim propertyDataType As String = m.Groups(2).Value
            Dim propertyName As String = m.Groups(3).Value.Substring(0, 1).ToLower() & m.Groups(3).Value.Remove(0, 1)
            outputText &= String.Format("private {4}{0} _{1};{3}public {4}{0} {2}{3}{{{3}get{3}{{{3}return _{1};{3}}}{3}}}{3}{3}", _
            propertyDataType, _
            propertyName, _
            propertyName.Substring(0, 1).ToUpper() & propertyName.Remove(0, 1), _
            Environment.NewLine, _
            IIf(staticModifier = "", "", staticModifier & " "))
        Else
            If Not Regex.IsMatch(line, "^\s*$") Then
                MsgBox("Input mismatch")
                Exit Sub
            End If
        End If
    Next

    textSelection.Insert(outputText, 0)
    textSelection.SmartFormat()

End Sub

To use this macro, you type the data type of the property and its name (you can also use the static modifier), like this:

int count
string name
string description
static int globalCount

Then, you select the code and run the macro (most conveniently, using a keyboard shortcut), to get this code:

private int _count;
public int Count
{
    get
    {
        return _count;
    }
}

private string _name;
public string Name
{
    get
    {
        return _name;
    }
}

private string _description;
public string Description
{
    get
    {
        return _description;
    }
}

private static int _globalCount;
public static int GlobalCount
{
    get
    {
        return _globalCount;
    }
}

This is only a very simple use of VS Macros to demonstrate how they can be used for code generation. They are very powerful and can do much more complex things. If you do a lot of coding, it's certainly worth the time to learn more about this very powerful, yet underused, feature of Visual Studio.

Happy coding!

How to change the background color of web pages in your browser

2009-08-08T07:45:00.001-07:00

If you spend too much time browsing the web on your computer, you may start to notice that you're getting too much darkness around your eyes. It's because of this white background color on most web pages, it's slowly turning you into a raccoon. Luckily, this can be changed.

Most web browsers allow you to control the colors of web pages. Here's how to change the background and text colors in all the popular browsers:

Internet Explorer

On the menu, go to Tools > Internet Options
On the Internet Options dialog box, click the Colors button (at the bottom left corner).
Uncheck the Use Windows colors check box, then change the text and background colors to the colors you want (I use black for the background and grey for the text), then click OK.
Next, click the Accessibility button (this time at the bottom right corner).
Check the Ignore colors specified on Web pages check box and click OK.
Click OK on the Internet Options dialog box to close it and apply the new settings.

FireFox

On the menu, go to Tools > Options
On the Options dialog box, click the Content tab (at the top)
Now, click the Colors button.
Uncheck the Use system colors check box and select the colors you want for the background and text (black and grey for example)
Uncheck the Allow pages to choose their own colors, instead of my selections above check box
Click OK to close the Colors dialog box.
Click OK to close the Options dialog box and apply the new settings

Opera

It's a little trickier with Opera but fortunately it's still possible.

Create a new text file (using Notepad or your favorite text editor) and copy and paste the code below into it, save the file anywhere you want but remember where you saved it (you may name the file opera.css, but this is optional, you can give it any other name you like)

*
{
    background: transparent !important;
    color: #C0C0C0 !important;
    border-color: #C0C0C0 !important;
}
html, body
{
    background: #000 !important;
}
a:link, a:hover, a:active
{
    color: #00E !important;
}
a:visited
{
    color: #551A8B !important;
}

Now in Opera, on the menu, go to Tools > Preferences
Click the Advanced tab
On the left side, click Content
Click the Style Options button
On the Style Options dialog box, under My style sheet, select the file you created in step #1 (you'll replace the value already in there but this is ok)
Now click the Presentation Modes tab (also on the Style Options dialog box).
By default, you should only have The Page style sheet and Page fonts and colors check boxes checked under both the Author mode and User mode (left and right), you should also have Default mode set to Author mode (the drop down list at the bottom right). Now, under the Author mode on the left, check the My style sheet check box and click OK.
Click OK to close the Preferences dialog box and apply the new settings

Google Chrome

Unfortunately for Google Chrome, you can't control the page background or text colors (this is true as to the latest version at the time of writing this post, the version I have here is 2.0.172.39 which is the latest version). The only solution I found was to use a bookmarklet, this is a short piece of code that you add to your bookmarks, you click it everytime you want to change the colors of the page (actually you can also paste it into your browser's address bar then press Enter to make it work). This is not really practical but it's all what you've got for now, hope google will fix this soon. I created this little bookmarklet for you which will change the background color to black and the text color to light grey (copy the code and paste it into the address bar in Google Chrome then press Enter, you should add it to your bookmarks to make it easier to change the color of the page by only clicking it):

javascript:(function(){var allElements=document.getElementsByTagName("*");for(var i=0;i<allElements.length;i++){var element=allElements[i];element.style.background="#000 !important";element.style.color="#C0C0C0 !important";element.style.borderColor="#C0C0C0 !important";if(element.tagName.toLowerCase()=="a"){element.style.color="#00E !important";}}})()

Update

Google Chrome now supports user stylesheets. This means you don't need to use any bookmarklets. Assuming you use Windows, change the page colors by going to "C:\Documents and Settings\{your windows user}\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets" (change the drive letter if you have Windows installed on a drive other than C). Now, open the Custom.css file then copy and paste the same code above used with Opera and save the file.

You may also now use one of many Google Chrome extensions that allow you to control the page colors. For example, see the Change Colors extension.

How to make a textbox and a textarea same width across browsers

2009-02-13T04:05:00.000-08:00

Thanks to the *brilliant* CSS box model, very simple tasks have become a nightmare.

I've been struggling lately to do a very simple thing, which is to make a textbox (ie. <input type="text">) and a textarea same width so that they align nicely.

The problem with making a textbox and textarea same width is that all browsers add 1px padding to textboxes that can't be removed. In other words, setting the padding to 0px won't remove that 1px padding. A common trick to get rid of padding is to float the element but unluckily this doesn't work with textboxes. Well, this means we have extra 2px in the width of the textbox that we simply can't get rid of. Now, this wouldn't be a problem if the same thing applied to textreas as well but unfortunately this is not the case. In most browsers (IE, Safari and Chrome), setting the padding of a textrea to 0px *unfortunately* works. One exception to this is FireFox which applies the 1px non-removable padding to textareas as well. This is why the problem doesn't exist with FireFox. But, should we ignore IE, Safari and Chrome and assume everyone is using FireFox? I guess not, it definitely makes more sense to make it work in those browsers and find a hack for FireFox and actually this is what I did.

Having had a look on mozilla's website, I came across those two extensions to CSS:
-moz-padding-start and -moz-padding-end.

So, to make a textbox and a textrea same width across browsers you can use this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
*
{
    padding: 0px;
    margin: 0px;
}
#textbox
{
    width: 500px;
    -moz-padding-start: 1px;
    -moz-padding-end: 1px;
}
#textarea
{
    width: 500px;
    padding: 1px;
}
</style>
</head>
<body>
<input type="text" id="textbox" /><br />
<textarea id="textarea"></textarea>
</body>
</html>

Adding 1px to the textrea makes the text look nicer than with no padding at all (with 0px padding, the text sticks to the border which is not visually appealing). In FireFox, we will have 2px padding for the textarea and 2px left and right padding for the textbox, but, visually speaking, it almost looks the same (try to view the code in FireFox).

This code was tested in IE, Safari, Chrome, FireFox and SeaMonkey (which uses the same rendering engine as FF) and worked perfectly. Note that this hack is not perfect. For example, Opera will display the textarea 2px wider than the textbox. For me I don't care about Opera very much (not so many people use it), besides it's only 2px, so, it's not something that will make your site unusable. There could probably be a hack for Opera too but again I'm not interested in Opera, so for me it's not worth the time. It probably won't work with other less popular browsers too. I tested it in the ones I care most about (2 extra pixels in a not popular browser is not a big deal. I can live with that).

In terms of rendering engines (aka layout engines), this will work with Trident based browsers (Internet Explorer), WebKit based browsers (Safari, Google Chrome and other browsers) and Gecko based browsers (FireFox, SeaMonkey and other browsers).

Please note that this won't work if the visual styles are not enabled in Windows XP or Vista (with the exception of FireFox and the other browsers that are based on the same engine), but as very few people (almost none) disable the visual styles so I'm not so worried about that one too.

Finally, if you're a control freak and want it to work in every browser then your last resort is javascript (I was working on that but gave up on it after I came up with this simple hack), but even this won't work if javascript is disabled in the browser.

How to align checkboxes and their labels consistently across browsers

2008-12-27T21:25:00.000-08:00

I was trying today to get a checkbox and its label to look consistent across browsers and finally came up with this solution. I tested it in IE6, FF2 and Chrome and it rendered same pixel by pixel in all the three browsers (also browsershots.org confirmed the result for other browsers). Hopefully this will save time for someone else.

<style type="text/css">
*
{
    padding: 0px;
    margin: 0px;
}
#wb
{
    width: 15px;
    height: 15px;
    float: left;
}
#somelabel
{
    float: left;
    padding-left: 3px;
}
</style>

<div>
<input id="wb" type="checkbox" /><label for="wb" id="somelabel">Web Browser</label>
</div>

* If you don't want to set the padding and margin to zero for all elements as I did here, you could only set them for the label and checkbox.

A problem when setting the page title dynamically in ASP.NET

2008-10-15T23:48:00.001-07:00

Today I encountered a weird problem with ASP.NET. What I wanted to do was really simple. I wanted to change the page title dynamically in code, that's all. In my scenario I had a page that inherits from a basepage class. In that base page class I append the site name to the page title, e.g. if the page title is 'page title' (without the quotes) and the site name is 'mysite.com', I add the site name to the page title so that it becomes 'page title - mysite.com'

In my page, I overrode OnLoad and set the page title in there, but for an unknown reason I always got an empty string for the page title in the basepage class. So, I created a test page, overrode OnLoad() and set the page title in there, surprisingly that worked. I couldn't see any difference between the two pages, I commented all my code and still got a blank title in the basepage class. Finally, I noticed that the only difference between the two pages is that in my page, the title is set to an empty string in the page directive (ie. Title=""). While in the test page, the title is set to the default value (which is "Untitled Page"). By not keeping the title set to an empty string (just put anything in there) it finally worked.

This seems like a bug, I doubt this behavior is by design. Anyway, to sum up. If you want to set the page title dynamically in your code, make sure you have a "non empty string" for the page title, i.e., if you have Title="" in your page directive, replace it with any other value, e.g. Title="some value" (even though you're going to change this value), otherwise, it will not work.

Are Web Designers Getting too Lazy?!!

2008-09-04T22:08:00.000-07:00

Recently, I changed the color scheme on my computer because I was literally starting to look like a raccoon (with incredibly dark circles under my eyes). Anyway, I changed the background color of all windows to black and the text color to light gray. After I made the changes, I started to surf the net to realize that so many websites don't specify the colors for the page background and/or the text. They leave them to the browser's default colors!! I had strange (and ugly) looking websites on my computer (sadly, so many of them for well-known and popular websites). I got some pages with white background (they specified the background color correctly) but with light gray for the text! which is almost unreadable. Some other websites had black for the text color and also black for the background! which is completely unreadable! (they specified the text color but not the background color), and many websites didn't specify both, so you have black background and light gray text with the images having white background which is really ugly!

What the heck is going on?! Are web designers getting so lazy that they decided to depend on the browser's default color settings as if they were hard-coded?!! Didn't it come to their minds that anybody can change the color scheme? It's only two lines in CSS for God's sake!!!!

The Myth of for being faster than foreach

2008-05-27T00:22:00.000-07:00

You probably, like me, heard this so many times that for is faster than foreach and you should use it whenever you can. Well, today I wanted to know how much this is true so I did a little test (find below the test and results). As you can see in the results of the test they are both identical but as I find using foreach is much more convenient for many reasons (including thread safety in some scenarios) so it makes more sense to use foreach whenever possible.

More details:

The release build was used in the test
Software used in the test:

Windows XP Pro SP2
.NET Framework 2.0

The specs of my computer (where the test was done) are:

CPU Intel 1.6GHz Dual Core
1024 MB RAM

Used Code

using System;
using System.Collections.Generic;
using System.Text;

namespace for_vs_foreach
{
    class Program
    {
        static void Main(string[] args)
        {
            const int LOOP_COUNT = 10000000;
            int myVar;
            MyCustomObject[] customObjects = new MyCustomObject[LOOP_COUNT];
            for (int i = 0; i < LOOP_COUNT; i++)
            {
                customObjects[i] = new MyCustomObject(i);
            }

            System.Threading.Thread.Sleep(1000);

            // foreach
            //
            DateTime beforeForeach = DateTime.Now;
            foreach (MyCustomObject customObject in customObjects)
            {
                myVar = customObject.Var;
            }
            DateTime afterForeach = DateTime.Now;

            // for
            //
            DateTime beforeFor = DateTime.Now;
            for (int i = 0; i < LOOP_COUNT; i++)
            {
                myVar = customObjects[i].Var;
            }
            DateTime afterFor = DateTime.Now;

            Console.WriteLine("{0} (foreach test results)", afterForeach.Subtract(beforeForeach));
            Console.WriteLine("{0} (for test results)", afterFor.Subtract(beforeFor));
            Console.Read();
        }
    }

    public class MyCustomObject
    {
        public MyCustomObject(int var)
        {
            _var = var;
        }

        private int _var;
        public int Var
        {
            get
            {
                return _var;
            }
            set
            {
                _var = value;
            }
        }
    }
}

Results:00:00:00.0625000 (foreach test results)
00:00:00.0625000 (for test results)

Efficiently Copying Items from One Array to Another in C# (Also generally in .NET)

2008-05-10T22:49:00.000-07:00

I've been searching recently for an efficient way in C# to copy items from an array to another. At first it seemed that efficient way simply didn't exist. In C++ you can do this very easily by copying the memory block using memcpy() or memmove() but in C# you can't do this in a safe way (sure you can write some unsafe code but this is not really what I wanted, I just wanted to do it the 'clean and safe way'). Anyway, my options were to use Array.Copy() or a for loop (iterate through the source array and copy the items to the destination array). Unfortunately the documentation for Array.Copy() clearly states that it's an O(n) operation where n is length, so, it seemed that the for loop and Array.Copy() were almost equivalent so I decided I could use any of them as it wouldn't make any real difference (my decision was based on what's written in the documentation about Array.Copy() being an O(n) operation)

Anyway, today I was using .NET Refelctor to view the code for List<T>.ToArray(), I found that the Array.Copy() was used in the code, see below the code for List<T>.ToArray() copied from .NET Reflector:

public T[] ToArray()
{
    T[] destinationArray = new T[this._size];
    Array.Copy(this._items, 0, destinationArray, 0, this._size);
    return destinationArray;
}

So, I wanted to have a look on Array.Copy(), this is how it shows in .NET Refelctor:

[ReliabilityContract(Consistency.MayCorruptInstance, Cer.MayFail)]
public static void Copy(Array sourceArray, int sourceIndex, Array destinationArray, int destinationIndex, int length)
{
    Copy(sourceArray, sourceIndex, destinationArray, destinationIndex, length, false);
}

The code for Copy(sourceArray, sourceIndex, destinationArray, destinationIndex, length, false); can't be viewed using .NET Reflector, here's what you get:

[MethodImpl(MethodImplOptions.InternalCall), ReliabilityContract(Consistency.MayCorruptInstance, Cer.MayFail)]
internal static extern void Copy(Array sourceArray, int sourceIndex, Array destinationArray, int destinationIndex, int length, bool reliable);

To make a long story short I just was curious to see whether using Array.Copy() is really equivalent to using a simple for loop, so, motivated by my inability to view the code for Array.Copy(),I decided to do my own testing (see the code and results below). Well, despite what's written in the documentation about Array.Copy() being an O(n) operation, Array.Copy() was 10 times faster on my computer! So my guess is that it internally uses some memory copying so it's not really an O(n) operation.

Update:

Just to be clear, when I said the operation is not O(n), I was referring to the implementation not using a for loop to copy the items (ie. from the performance point of view). I realize it's technically incorrect to say it's not O(n). My apology for the confusion.

More details:

The release build was used in the test
Software used in the test:

Windows XP Pro SP2
.NET Framework 2.0

The specs of my computer (where the test was done) are:

CPU Intel 1.6GHz Dual Core
1024 MB RAM

Used Code

using System;
using System.Collections.Generic;
using System.Text;

namespace array_copy
{
    class Program
    {
        static void Main(string[] args)
        {
            const int ArraySize = 5000;
            const int LoopCount = 100000;

            MyCustomObject[] customObjects1 = new MyCustomObject[ArraySize];
            MyCustomObject[] customObjects2 = new MyCustomObject[ArraySize];
            for (int i = 0; i < ArraySize; i++)
            {
                customObjects1[i] = new MyCustomObject(i);
                customObjects2[i] = new MyCustomObject(i);
            }

            // Array.Copy()
            //
            DateTime beforeArrayCopy = DateTime.Now;
            for (int j = 0; j < LoopCount; j++)
            {
                Array.Copy(customObjects1, 0, customObjects2, 1, customObjects1.Length - 1);
            }
            DateTime afterArrayCopy = DateTime.Now;

            // For Loop Copy
            //
            DateTime beforeForLoopCopy = DateTime.Now;
            for (int j = 0; j < LoopCount; j++)
            {
                int length = customObjects1.Length - 1;
                for (int i = 0; i < length; i++)
                {
                    customObjects2[i + 1] = customObjects1[i];
                }
            }
            DateTime afterForLoopCopy = DateTime.Now;

            Console.WriteLine("{0} Array.Copy()", afterArrayCopy.Subtract(beforeArrayCopy));
            Console.WriteLine("{0} For Loop Copy", afterForLoopCopy.Subtract(beforeForLoopCopy));

            Console.Read();
        }
    }

    public class MyCustomObject
    {
        public MyCustomObject(int var)
        {
            _var = var;
        }

        private int _var;
        public int Var
        {
            get
            {
                return _var;
            }
        }
    }
}

Results:00:00:00.5937500 Array.Copy()
00:00:04.9062500 For Loop Copy

Redirecting The Ouput of a Command to the Clipboard

2008-04-25T03:26:00.000-07:00

I very often use the command line to list file names using the dir command (for web design and other purposes). I usually need to have those file names in notepad. One way to do that is to redirect the command ouput to a file (copy the text from the file then delete it) or mark the text in the command line window and press Enter to copy it to the clipboard. A nicer and cleaner way though is to redirect the output of the command to the clipboard. Unfortunately there's no built-in way for doing this in Windows XP, however, it can be added very easily. In Windows 2003 we have a file called clip.exe (under the Windows or system32 directory, not sure, so search for it), which we can use to redirect the output of any command to the clipboard, but first if you're using Windows XP, copy this file to the Windows or System32 directory on your computer (obviously you'll need a computer with Windows 2003 to get this file, you might as well try seraching the internet, it's most probably there).

Now to redirect the output of your command to the clipboad, just use a pipe with clip, for example:

dir /b | clip

* If you're wondering what the /b switch does, it displays the bare file names (only the file names with no headers or any other information)

My Favorite Windows Keyboard Shortcuts

2008-04-24T22:33:00.000-07:00

I'm pretty much a keyboard freak, I don't really use the mouse unless I'm forced to :) or in other words, unless I want to do something that cannot be done using the keyboard. In case you didn't know that, you can actually move the mouse cursor using the keyboard, this a feature called MouseKeys which I use when I have a problem with the mouse. To activate MouseKeys, press and hold the left Shift and left Alt keys then press the Num Lock key (you may search google for MouseKeys to get more details about that and to know what keys you should use to move the mouse, they are the Numpad keys by the way)

I use keyboard shortcuts in most applications (IE, FireFox, HTML Help .. etc), but I'm going to list here only the Windows Keyboard shortcuts (by the way, I use Windows XP but most of these keyboard shortcuts are from earlier versions starting from Windows 95, note though that a few of these keyboard shortcuts don't work in Vista but the majority do). So, here's a list of the keyboard shortcuts that I use quite frequently in Windows (or more accurately what I remember now):

Ctrl + Shift + Esc (to show the task manager)
Alt + Enter (while an icon is selected, e.g. a file, a folder or an icon on the desktop, to open the properties window for that icon)
Windows Key + Pause (to show the System Properties window)
Windows Key + E (to open a Windows explorer window, I follow this by Ctrl + E twice to hide the folders view)
Windows Key + F (to show the serach window)
Ctrl + E or Ctrl + F (while in a folder window to show the search side panel)
Alt + D (while in a folder window to move the focus to the address textbox in the address bar)
Alt + Space (to activate the system menu of an application)
Alt + Space + X (to maximize the current window, press them in the same sequence)
Alt + Space + N (to minimize the current window, press them in the same sequence)

MDI Applications Keyboard Shortcuts

Ctrl + F4 (to close the currently active MDI child window)
Alt + - (to activate the system menu for the currently active MDI child window)
Alt + - + X (to maximize the current MDI child window, press them in the same sequence)
Alt + - + N (to minimize the current MDI child window, press them in the same sequence)
Ctrl + F6 (to move focus between child MDI windows)

Using the Keyboard with the Mouse

Double clicking an icon while holding the Alt key (this will open the properties window for this item instead of opening/running the item itself)
Double clicking a folder icon while holding the Ctrl key (this will open the folder in a new window, note that the folder has to be unselected before you double click it)

If you're Worried About Performance, Avoid Using Type Initializers (aka static constructors)

2008-04-24T21:22:00.000-07:00

I'm currently trying to write a highly scalable web application (using C# and .NET Framework 2.0), so, I simply trying to squeeze every drop of performance of the CPU, the DB .. etc. I'm doing a lot of performance testing to everything I use in my application. In my application, I'm using static constructors heavily as they seem to make things easier, well, this is until I realized that they really affect performance! Actually, I discovered this by accident while doing another test. I wanted to test the performance of using nested static classes vs. using singletons, in the process I used a couple of static constructors in the classes (see the code below), the point was to use the static constructor to initiate the variable used for holding the singleton object reference so that we can remove the lazy loading if condition which I expected it would improve performance, well, this is what I thought but the result was surprising to me, the classes that have static constructors take much more time to be accessed than those that don't have static constructors (see the results at the end of this post). My wild guess is that every time a class with a static constructor is accessed the runtime checks whether the static constructor was called or not which causes the performance hit. Without further ado, here's the code below and the results of running the test on my computer .

More details:

I used the release build in the test (not the debug build as it very often gives very wrong results)
Software used in the test:

Windows XP Pro SP2
.NET Framework 2.0

The specs of my computer (where the test was done) are:

CPU Intel 1.6GHz Dual Core
1024 MB RAM

Used Code

using System;
using System.Collections.Generic;
using System.Text;
using System.Threading;

namespace singleton_vs_nested_classes
{
    class Program
    {
        static void Main(string[] args)
        {
            const int LOOP_COUNT = 1000000000;
            int tempVar = 0;
            Thread.Sleep(3000);

            // TestStatic
            //
            tempVar = TestStatic.TestVar;
            DateTime beforeTestStatic = DateTime.Now;
            for (int i = 0; i < LOOP_COUNT; i++)
            {
                tempVar = TestStatic.TestVar;
            }
            DateTime afterTestStatic = DateTime.Now;

            // TestStaticWithTypeInitializer
            //
            tempVar = TestStaticWithTypeInitializer.TestVar;
            DateTime beforeTestStaticWithTypeInitializer = DateTime.Now;
            for (int i = 0; i < LOOP_COUNT; i++)
            {
                tempVar = TestStaticWithTypeInitializer.TestVar;
            }
            DateTime afterTestStaticWithTypeInitializer = DateTime.Now;

            // TestNested
            //
            tempVar = TestNested.MyNestedClass.TestVar;
            DateTime beforeTestNested = DateTime.Now;
            for (int i = 0; i < LOOP_COUNT; i++)
            {
                tempVar = TestNested.MyNestedClass.TestVar;
            }
            DateTime afterTestNested = DateTime.Now;

            // TestSingltonLazyLoading
            //
            tempVar = TestSingltonLazyLoading.Singlton.TestVar;
            DateTime beforeTestSingltonLazyLoading = DateTime.Now;
            for (int i = 0; i < LOOP_COUNT; i++)
            {
                tempVar = TestSingltonLazyLoading.Singlton.TestVar;
            }
            DateTime afterTestSingltonLazyLoading = DateTime.Now;

            // TestSingltonInitInTypeInitliazer
            //
            tempVar = TestSingltonInitInTypeInitliazer.Singlton.TestVar;
            DateTime beforeTestSingltonInitInTypeInitliazer = DateTime.Now;
            for (int i = 0; i < LOOP_COUNT; i++)
            {
                tempVar = TestSingltonInitInTypeInitliazer.Singlton.TestVar;
            }
            DateTime afterTestSingltonInitInTypeInitliazer = DateTime.Now;

            // Show results
            //
            Console.WriteLine("{0} TestStatic", afterTestStatic.Subtract(beforeTestStatic));
            Console.WriteLine("{0} TestStaticWithTypeInitializer", afterTestStaticWithTypeInitializer.Subtract(beforeTestStaticWithTypeInitializer));
            Console.WriteLine("{0} TestNested", afterTestNested.Subtract(beforeTestNested));
            Console.WriteLine("{0} TestSingltonLazyLoading", afterTestSingltonLazyLoading.Subtract(beforeTestSingltonLazyLoading));
            Console.WriteLine("{0} TestSingltonInitInTypeInitliazer", afterTestSingltonInitInTypeInitliazer.Subtract(beforeTestSingltonInitInTypeInitliazer));
            Console.Read();
        }
    }

    public static class TestStatic
    {
        private static int _testVar = 5;
        public static int TestVar
        {
            get
            {
                return _testVar;
            }
        }
    }

    public static class TestStaticWithTypeInitializer
    {
        static TestStaticWithTypeInitializer()
        {
            _testVar = 5;
        }

        private static int _testVar;
        public static int TestVar
        {
            get
            {
                return _testVar;
            }
        }
    }

    public static class TestNested
    {
        public static class MyNestedClass
        {
            private static int _testVar = 5;
            public static int TestVar
            {
                get
                {
                    return _testVar;
                }
            }
        }
    }

    public static class TestSingltonLazyLoading
    {
        private static TestSinglton _singltonInstance;
        public static TestSinglton Singlton
        {
            get
            {
                if (_singltonInstance == null)
                {
                    _singltonInstance = new TestSinglton(5);
                }
                return _singltonInstance;
            }
        }
    }

    public static class TestSingltonInitInTypeInitliazer
    {
        static TestSingltonInitInTypeInitliazer()
        {
            _singltonInstance = new TestSinglton(5);
        }

        private static TestSinglton _singltonInstance;
        public static TestSinglton Singlton
        {
            get
            {
                return _singltonInstance;
            }
        }
    }

    public class TestSinglton
    {
        public TestSinglton(int testVar)
        {
            _testVar = testVar;
        }

        private int _testVar;
        public int TestVar
        {
            get
            {
                return _testVar;
            }
        }
    }
}

Results:00:00:01.2656250 TestStatic
00:00:12.8437500 TestStaticWithTypeInitializer
00:00:01.2812500 TestNested
00:00:03.2187500 TestSingltonLazyLoading
00:00:09.3125000 TestSingltonInitInTypeInitliazer

Installing Windows XP in Virtual PC

2008-01-08T08:43:00.000-08:00

When you create a new virtual machine in Virtual PC (2007 and earlier), you choose the operating system you want to install on that virtual machine so that the virtual machine settings are optimized for that operating system. Now when you choose Windows XP from the list of operating systems, you get a default value of 128 MB for the memory, don't use that default value! If you do, Windows XP will take ages to install on your virtual machine, so, change the default value to be at least 256 MB. This will make a huge difference.

Return value of ExecuteNonQuery() in the MySQL .NET Provider

2008-01-04T07:14:00.000-08:00

As support for stored procedures was added in MySQL 5, I thought I'd blog about a difference in behavior I noticed between the SQL Server .NET Provider and the MySQL .NET Provider when executing stored procedures using ExecuteNonQuery().

You know that when you use ExecuteNonQuery() to execute a stored procedure (or any other SQL statements but we're going to talk about stored procedures here) it returns the number of records affected by the stored procedure. Now, what exactly is returned by the SQL Server Provider? I assume most developers who use the SQL Server Provider know that but in case you didn't know, the SQL Server Provider returns the total number of records affected by executing all statements in the stored procedure.

Let's take this example to make things clearer. For example, say that you have a stored procedure in which you first insert some records in a table then in the same procedure you update some records in another table. Let's assume that the procedure was executed and it inserted 5 records in the first table and updated 3 records in the second table, now what the SQL Server Provider returns exactly is the total number of records affected by executing this procedure which is 5 + 3 = 8.

On the other hand, the MySQL .NET Provider only returns the number of records affected by executing the last statement in the procedure, so referring to the preceding example, ExecuteNonQuery() will only return 3.

The point in this post is that if you're using the value returned from ExecuteNonQuery() for anything in your project, you just should be aware of the difference in behavior between the SQL Server Provider and the MySQL .NET Provider.

Happy programming!

Sybase Annoyances

2008-01-03T22:17:00.000-08:00

One of the things that I really hated about Sybase is its lack of support for the use of the top keyword in subquries, for example:

SELECT
    field1,
    (SELECT TOP 1 field1 FROM table2 WHERE id = table1.id) myfield
FROM
    table1

This works in SQL Server but not in Sybase.

This is as of Sybase ASE 12.5, I don't know if this changed in Sybase ASE 15, so, if you have any idea about it please share this with us in the comments section.

How to Open The Current Page in a New Tab in FireFox

2008-01-03T09:18:00.000-08:00

In FireFox when you click Ctrl + T, a new tab is opened showing a blank page. But what if you want to open a new tab that shows the current page, it's simple but you'll have to do it in two steps:
1. Press Alt + D (notice that the current page address will be highlighted in the address bar)
2. Now, Press Alt + Enter (a new tab will be opened showing the current page)