TechBuyingGuide.com is a new website that is changing the way that consumers purchase computers online.

Long story short: TechBuyingGuide (TBG) combines processor and graphics card benchmark data and mashing it up with a computer catalog.  The result allows consumers to visually see (on a scale of 0 to 10) how “powerful” each computer is.

There’s a few huge advantages to this system:

1. Buyers don’t have to translate complex hardware specifications. Instead of comparing clock speed, bus speed, L2/L3 cache, and other processor metrics, the raw performance of each machine is presented in an easy-to-understand number.
2. Benchmark data is incredibly accurate. After reading the “About” page, you’ll find that TBG collects a library of benchmark data from multiple sources.  Multiple sources means there’s less chance for bias.  Also, benchmark data gives you real-life, measurable performance data.  This real-life data is much more accurate than “expected” or theoretical performance (e.g. hardware specifications).
3. Variety of hardware brands. The website compiles its catalog from a variety of sellers and manufacturers.  It’s currently lacking Apple products, but it does contain a wide array of other products.
4. Free. The website has done a ton of legwork and research by combining benchmark data with specific computers.  The pre-research is incredibly valuable and really helps in finding the best computer for your needs.

The website has a great promotional video describing the “how to” in greater detail.  TechBuyingGuide is still in its infancy, but it’s an awesome step in the direction of simplifying the process of buying a computer online.

I’ve developed a very simple, fast method of benchmarking two different functions and determining which method is faster. If you’d like to download the entire code (and skip the article’s text), there is a ZIP file at the end of this page.

As with any benchmarking test, but especially with tests that can execute quickly, you need to select a high-performance timing method that can detect small differences in execution time — enter QueryPerformanceCounter().

QueryPerformanceCounter is an API function that returns by-reference the value of a high-performance counter in “counts” (which can be converted to milliseconds):

Declare Function QueryPerformanceCounter Lib "Kernel32" (ByRef X As Long) As Short

To convert from “counts” to milliseconds, you’ll need to use the QueryPerformanceFrequency API function:

Declare Function QueryPerformanceFrequency Lib "Kernel32" (ByRef X As Long) As Short

By using the QueryPerformanceCounter() function, you can calculate the amount of time elapsed between beginning and ending a function:

Dim Speed1 As Long
Console.WriteLine("Starting benchmark test for function 1...")
QueryPerformanceCounter(lngStart)
Function1()
QueryPerformanceCounter(lngEnd)
Speed1 = lngEnd - lngStart

Finally, you can use this concept by comparing Function1() vs. Function2(). In this example, I’ve compared two different string concatenation method. Again, you can download the source code below.

Module Module1

    'Read more at: http://support.microsoft.com/kb/306978
    Declare Function QueryPerformanceCounter Lib "Kernel32" (ByRef X As Long) As Short
    Declare Function QueryPerformanceFrequency Lib "Kernel32" (ByRef X As Long) As Short

    Sub Main()

        Dim lngStart As Long, lngEnd As Long

        If QueryPerformanceCounter(lngStart) = False Then
            Console.WriteLine("High-resolution performance counter not supported - ending.")
            Console.ReadKey()
            Exit Sub
        End If

        Dim Speed1 As Long
        Console.WriteLine("Starting benchmark test for function 1...")
        QueryPerformanceCounter(lngStart)
        Function1()
        QueryPerformanceCounter(lngEnd)
        Speed1 = lngEnd - lngStart

        Dim Speed2 As Long
        Console.WriteLine("Starting benchmark test for function 2...")
        QueryPerformanceCounter(lngStart)
        Function2()
        QueryPerformanceCounter(lngEnd)
        Speed2 = lngEnd - lngStart

        Console.WriteLine(vbCrLf & "Speed of function 1: " & ConvertCountsToMSec(Speed1) & " ms")
        Console.WriteLine("Speed of function 2: " & ConvertCountsToMSec(Speed2) & " ms")
        Console.WriteLine("Absolute difference: " & ConvertCountsToMSec(Math.Abs(Speed2 - Speed1)) & " ms")

        If Speed2 > Speed1 Then
            Console.WriteLine(vbCrLf & "Function 2 was " & Math.Round(Speed2 / Speed1, 4) & "x faster")
        ElseIf Speed1 > Speed2 Then
            Console.WriteLine(vbCrLf & "Function 1 was " & Math.Round(Speed1 / Speed2, 4) & "x faster")
        Else ' Speed1 = Speed2
            Console.WriteLine(vbCrLf & "No difference in speed")
        End If

        Console.WriteLine(vbCrLf & "Press any key to end ...")
        Console.ReadKey()

    End Sub

    Public Sub Function1()
        'Do stuff (method #1)

        Dim s As String = "", i As Integer
        For i = 0 To 1000
            s &= Strings.StrDup(i, "A")
        Next
    End Sub

    Public Sub Function2()
        'Do stuff (method #2)

        Dim s As New Text.StringBuilder(""), i As Integer
        For i = 0 To 1000
            s.Append(Strings.StrDup(i, "A"))
        Next
    End Sub

    Public Function ConvertCountsToMSec(ByVal Counts As Long) As Double
        Dim Freq As Long
        QueryPerformanceFrequency(Freq)

        Return Math.Round(Counts / Freq * 1000, 4)
    End Function

End Module

Download the entire code: SimpleFunctionBenchmarking.zip [79kb]

1. Thou shalt preload all CSS:hover images If you’re willing to put the time into changing an image on :hover, isn’t it worth your time to do it right? Often, users won’t even notice your :hover efforts because it’ll take too long to load a new image on-demand. To read more about preloading background images, check out Please preload your CSS images
2. Thou shalt build content-oriented designs If your design contains a greater percent of advertisement real estate than content area, you need to go back to the drawing board. I understand the need to monetize your site, but sometimes less is more.
3. Thou shall not animate favicon.ico Animations on the web are difficult to deal with as it is — a fancy, dancing web icon at the top of my browser does nothing more than distract my attention away from your content. Instead, create a tastefully done, static icon.
4. Thou shalt not design an all-Flash website Flash may have some place in web design, but its utility is diminishing very quickly with the growing popularity of javascript frameworks like jQuery and with HTML5 on the horizon. All-Flash websites are a nightmare for maintenance, SEO, and accessibility. Leave Flash for games, media, non-critical navigation, and eye candy visual effects only.
5. Thou shalt not play sounds It seems like modern websites, particularly those being accepted to CSS Gallery websites, would have phased out this practice many years ago. This practice is especially common in Flash-oriented websites. See commandment #4.
6. Thou shalt not create a dark (#000000) design While there are some very few exceptions to this rule, black backgrounds are usually extremely difficult to pull off. At the very least, a tasteful, artistic collection of gray and black can sometimes save a design, but you’re usually better off with something lighter. And please, just say “no” to black backgrounds with dark gray text.
7. Thou shalt not use background-attachment: fixed; Again, there may be some very rare artistic exceptions, but for the most part, very few web designs can pull off a fixed background image. Fixed backgrounds remove the sense of motion while scrolling a page and hardly ever add to the creativity of a design.
8. Thou shalt beware the removal of text-decorations Years ago, it was quite popular to remove the underline text decoration from links. While this can still be tastefully done, it can become problematic when your links are hard to differentiate from your text content. Links, when placed within a paragraph, should pop out so the user can find them easily while scanning. Although less common, some sites rely on link color alone to differentiate links from text. This practice can become problematic for colorblind readers who may rely on bolding or underlining for links.
9. Thou shalt create a meaningful <TITLE> ‘Untitled Page’ and ‘[Your Website Name]‘ are simply unacceptable. <TITLE> tags are free SEO fodder, so take advantage by using your <TITLE> to describe the content, not the title of your website.
10. Thou shalt avoid CSS hacks at all costs In almost all situations, CSS hacks will eventually come back to haunt you. Not only do many hacks invalidate your CSS, but they also require a design update when a new browser is released. Unless in very rare cases, you’re much better off sticking to CSS cannon and learning clever IE/Firefox workarounds, not hacks.
]]> http://dotnetyuppie.com/2010/01/28/ten-commandments-of-exceptional-web-design/feed/ 0 http://dotnetyuppie.com/2009/09/21/permalinks-and-mod_rewrite-headaches-in-wordpress-with-iis/ http://dotnetyuppie.com/2009/09/21/permalinks-and-mod_rewrite-headaches-in-wordpress-with-iis/#comments Mon, 21 Sep 2009 15:15:56 +0000 DotNetYuppie http://dotnetyuppie.com/?p=63 I recently switched from Apache/Linux to IIS/Windows in order to develop ASP.NET applications on my shared web host (ixwebhosting.com). Unfortunately, IIS6 doesn’t support WordPress permalinks because it doesn’t have the ability to use mod_rewrite unless you install a third-party ISAPI filter. Because I’m on a shared hosting plan, I don’t have access to install ISAPI filters and my web host won’t install them for me.

There are a few different 404 page-based hacks that allow you to retain your permalinks, even with IIS. The most popular fix, which worked fine for me, was Keyboard Face’s IIS Permalink Fix. I used his fix, and a GET variable fix from Ikailo to make a PHP-based 404 page that redirects all 404 pages back into WordPress, thereby bypassing the need for mod_redirect.

The two fixes above are great, except for the fact that they don’t allow for a real 404 page. In other words, if a visitor types in an invalid URL, they won’t be redirected to a friendly 404 page — they’ll get a blank, white page. This is a common complaint, and to date I haven’t seen a fix for it.

Although I’m not proud of it, I have found a temporary fix until my web host upgrades to IIS7 and/or adopts an ISAPI filter solution for permalink redirections:

<?php

function customError($errno, $errstr, $errfile, $errline)
  {
	echo chr(0);
  }
set_error_handler("customError");

//http://www.keyboardface.com/archives/category/installing-wordpress/
$qs = $_SERVER['QUERY_STRING'];
$_SERVER['REQUEST_URI'] = substr($qs, strpos($qs, ':80')+3);
$_SERVER['PATH_INFO'] = $_SERVER['REQUEST_URI'];

//http://www.ikailo.com/94/url-modrewrite-workaround-iis-60/
foreach ( $_GET as $var => $val ) {
	if ( substr($var, 0, 3) == '404') {
		if ( strstr($var, "?") ) {
			$newvar = substr($var, strpos($var, '?') + 1);
			$_GET[$newvar] = $val;
		}
		unset($_GET[$var]);
	}
	break;
}
include('index.php');
?>

As you can see, I added a custom error handler into the script. When the error handler is called, it’ll send a chr(0) code (which for all intents and purposes is a blank, length-less character). Once this code is sent, no header()’s or location-redirects can be sent, meaning that the code won’t die and present a blank page. Instead, it will redirect to your wordpress 404 template page you have installed.

Again, this is not a pretty fix, but it gets the job done.

Update 9/22/2009 – Be advised that this hack will force all your 404 pages to be sent as 200 OK headers, which can hurt your SEO standing with websites. It’s a buggy fix, so hopefully someone more experienced with PHP/WordPress will come up with a better solution soon.

]]> http://dotnetyuppie.com/2009/09/21/permalinks-and-mod_rewrite-headaches-in-wordpress-with-iis/feed/ 4 http://dotnetyuppie.com/2008/04/30/website-review-of-doshdoshcom/ http://dotnetyuppie.com/2008/04/30/website-review-of-doshdoshcom/#comments Thu, 01 May 2008 04:38:43 +0000 DotNetYuppie http://dotnetyuppie.com/?p=55 Maki, the author of an internet marketing and social media blog called Dosh Dosh, recently revamped his website with a completely new design, which received both positive and negative feedback on his blog post announcing the new theme. Being a long-term subscriber of his website, I would like to provide a review of his new theme. As a developer, I’ve found that one of the best ways to improve my own skills is to evaluate the skills of others.

If you haven’t heard of DoshDosh.com, I highly encourage you to visit — he has phenomenal content related to blogging, freelancing, marketing, etc. that would be extremely useful for any web developer.

Overview
DoshDosh’s theme was designed to give “precedence to the content” — the design is minimalistic, with a two-column fixed-width (948px) centered layout. The content takes up almost 2/3rds of the width of the page, and the sidebar allows for two 125×125 ads to be placed side-by-side.



Color Scheme
The color scheme is very minimalistic — it is essentially black, white, and gray with a hint of #993333 (scarlet red). Because of the simple color scheme, the sidebar’s advertisements bring extra attention to themselves due to their color variety. The links are all colored in the same #993333 red color, which brings a good consistency to the layout.



Logo
David Airey, the designer of the logo, has an excellent post regarding the logo’s design from conception to implementation. David mentions that the final selection of a logo was between the current logo (“H”), and logo “B”, as seen below. I would have much rather had the more complex “B” logo instead of the current logo. Additionally, the gray/white/black color scheme for the logo is dreary. A splash of color would have made the logo much more effective. On the upside, the current simplistic logo degrades very nicely into favicon.ico.



Header
The header takes up 55px, which is quite short for a header, but the intention of the new design was to bring focus to the content. I don’t mind the header/logo, but I don’t think it’s optimal for the design — it’s almost too simplistic and too monochrome.



The worst design faux pas committed by the new design is the fact that there is no tagline, description, or explanation of what doshdosh.com is within the header. The first sentence of the website’s “about” page describes doshdosh.com as, “Dosh Dosh is a blog offering internet marketing and blogging tips, alongside social media strategies”. The downside to his minimalist header is that it doesn’t describe his website at all — a simple sentence in the header could improve his new visitor retention.

Header Navigation
I’m very happy to see the use of color with the navigation menu, but I’ve never been a fan of keeping the navigation highlighted respective to the current page. For example, if you go to the “About” page, the “About” navigation icon will appear red by default. While it adds some needed color, it isn’t entirely accurate. If you navigate to any specific article, the “Home” navigation item still appears red, despite the fact that you are not at the “Home” page.



SEO
To the writer’s credit, all the <TITLE> tags are optimized for search engines. Even on his home page, which is rare for blogs to do, he puts a description of his blog ahead of the title of his blog (“Internet Marketing and Social Media: Dosh Dosh”). Because of his domain name, he will easily score well on search engines for the words “dosh dosh”, so it isn’t necessary to have a title tag that only displays the name of the blog. By putting a description of his site first, he has attained a #2 rank for the term “internet marking social media”.

Based on the HTML comments hidden within the design, it appears that the All in One SEO Pack is installed, but it isn’t being used to its fullest extent. By not manually specifying a description and series of keywords for each post, he is getting stuck with poor-SEO terms. For example, in his post announcing the new theme, his keywords are “general stuff” and the description is made up of the first thirty words of his post. I realize that there is some debate regarding the lack of beneficial effect to well-formed <META> SEO tags, but it can’t hurt to spend an extra minute to hammer out a few keywords about your post.

Sidebar
I’m very impressed with the sidebar design. Its width is enough to allow for two ads per row, but it’s not so wide that it receives more attention than the content. All too often, web designers get greedy and overtake their websites with gaudy, animated ads that distract from the beauty of their design.

I fully understand the need to make money through advertisements, and the more money the better, but eight ads at the top of the sidebar promotes ad blindness and doesn’t make any one of the advertisements unique. A design of four advertisements (at twice the advertising cost) would both decrease ad blindness and allow for each individual ad to stand out more.

I don’t like the placement of the rest of the items within the sidebar. Below the advertisements include: “Recent Posts”, “Categories”, “Top 10 Most Viewed Articles Today”, “Google Custom Search”, “My Twitter Updates”, “My Digg Submissions”, and “My StumbleUpon Profile”. I’ll address the google custom search below, but I feel like “Recent Posts” and “Top 10 Most Viewed Articles Today” would be better placed within the footer, rather than in the sidebar. I could be wrong, but it seems like a reader is more likely to notice both sections if they were placed in the footer because they get lost in the clutter of the sidebar. Conversely, the three social networking website feeds could be placed in the footer instead to reduce the sidebar clutter.

Google Custom Search
I can’t imagine the search box gets used very often because it’s knee-deep in sidebar clutter. I understand that you can make Adsense money by using Google’s search feature, but WordPress has excellent search functionality that trumps Google’s ability to display blog posts. Again, I understand that some sacrifices can and should be made in the name of website revenue, but you could place your own, small Adsense advertisements at the top of a search page if you wanted while still retaining a WordPress-driven search page.



Aside from the fact that the search functionality uses Google, I can’t understand the reason for its placement. For the most part, a visitor, who wants to search for a term on your website, is probably going to hope to find the search box somewhere in the header or at the top of the sidebar. Again, it seems that revenue has trumped good design practices — while the search box should probably go at the very top of the sidebar, it has been pushed down by the RSS/e-mail subscription sign-up (which increases traffic and subsequent revenue) and by the advertisements.

Accessibility
Because of the minimalist design, the page degrades very nicely when CSS is not enabled. The sidebar’s text is placed after the content, which makes it easier for visitors with screen readers to get directly to the content. Normally I would suggest an invisible “Jump to Content” link, but because he has four navigation links before the content, I don’t think it’s necessary.

Conclusion
Dosh Dosh’s new design is clean and minimalistic, specifically focusing on content over fancy web design. The design is almost too simplistic, particularly the logo and color scheme, but the biggest fault is the cluttered sidebar. I appreciate the desire to have a minimalistic design, and the designer accomplished this goal, but as a frequent reader, I would have liked to see a fancier CSS or artwork built into the design.

]]> http://dotnetyuppie.com/2008/04/30/website-review-of-doshdoshcom/feed/ 0 http://dotnetyuppie.com/2008/04/26/enabling-ssl-https-for-iis-in-windows-xp/ http://dotnetyuppie.com/2008/04/26/enabling-ssl-https-for-iis-in-windows-xp/#comments Sun, 27 Apr 2008 04:26:19 +0000 DotNetYuppie http://dotnetyuppie.com/?p=53 A reader recently asked about enabling SSL for a web application, but without the hassle of applying for a verified certificate. This article will outline the process to enable HTTPS on a Windows XP machine, but the process of creating a self-signed certificate is applicable to just about any version of Windows.

What is a certificate?
A certificate is a file that contains a set of instructions, which are read by a client computer, outlining the process of properly encrypting and decrypting data. The certificate is unique to a website, and ensures the security of the client’s data to and from a server.

To increase security, these certificates are often signed by a third party, called a certificate authority, who verifies that the server is who they say they are. Unfortunately, the process of obtaining a third-party verification costs money and takes time.

Why self-sign?
If you don’t want to pay money to have an official SSL certificate, but you still want the security of an encrypted HTTP session, then you can self-sign the certificate. Self-signing simply means that instead of having a third-party verify the integrity of the server/certificate, you’re doing it yourself. A client computer won’t recognize your self-signature as being reliable, but at least you’ll have encrypted data.

Obviously if you’re running a full-scale, professional website you’ll want to get a third-party verification, but if you’re running small-scale web applications off a personal computer for your own use, then there’s no reason to spend money for verification. Unfortunately, Windows XP doesn’t make it easy to self-sign your certificate to enable SSL on your local machine.

How to create your own SSL certificate

1. Download and install OpenSSL. The OpenSSL project doesn’t distribute compiled binary files, but Shining Light Productions offers a Windows installation (currently “Win32 OpenSSL v0.9.8g Light”), which you can download here (1MB). Its default installation is to c:\OpenSSL.
2. Open the Web Server Certificate Wizard. Open up IIS 5.1 (your results may vary in other versions), right click ‘Default Web Site’ and select ‘Properties. Click on the ‘Directory Security’ tab, and then the ‘Server Certificate…’ button. The wizard should appear.

   

3. Create a new certificate request. Once in the wizard, select “Create a new certificate”, and “Prepare the request now, but send it later”. You can fill out the remainder of the certificate request as you see fit — for the most part, leave things as their default values, but change the name of the website/organization/organizational unit/common name/country/region/etc. to whatever you prefer. When you get to the end of the wizard, it will ask you where you want to save the certificate request (default c:\certreq.txt). Save it to wherever you want, but keep the certreq.txt filename so the rest of the instructions work.
4. Create the security certificate. Open up a command-line window, and type out the following commands. Note that this assumes that your OpenSSL directory is c:\OpenSSL and your certificate request is c:\certreq.txt

   cd c:\OpenSSL\bin

   openssl genrsa -des3 -out CA.key 1024
   (Note that you will be asked for a pass phrase — you’ll have to make one up that is 4-511 character is length)

   openssl req -new -key CA.key -x509 -days 1095 -out CA.cer
   (Note that you will have to enter the pass phrase from the previous step. In addition, it will ask you the same questions that were asked from IIS — fill in the same answers or hit enter for default responses)

   openssl x509 -req -days 730 -in c:\certreq.txt -CA CA.cer -CAkey CA.key -CAcreateserial -out SelfSignedCert.cer
   (Note that you will have to enter the pass phrase from the previous two steps again)

5. If all goes well, you will have a file at C:\OpenSSL\bin\SelfSignedCert.cer that is your self-signed certificate.
6. Open the Web Server Certificate Wizard again (from step 2). You’ll note that you have a new option, called “Process the pending request and install the certificate”. Select this option and target the path/filename to C:\OpenSSL\bin\SelfSignedCert.cer.
7. Now, you can enable SSL for any application on your server by right-clicking it, going to “Properties”, the “Directory Security” tab, and the “Edit…” button at the bottom.
8. To enable SSL, select “Require secure channel (SSL)” and hit OK.

   

A note about the warning to clients
Whenever a browser goes to a self-signed HTTPS site, they will receive a notification that the security of the site cannot be validated. This warning makes sense because you signed the certificate, and you are not one of the few certificate authorities. Regardless, be sure to “accept” the warning and the site’s certificate — the web session will still be securely encrypted.



Conclusion
Once Windows Server 2003 came out, Microsoft realized how essential it was to be able to SSL on the fly, so they made it much, much easier to self-sign certificates. For those still using XP, however, you’re stuck using OpenSSL to self-sign certificates.

Keep in mind that this process is really only meant for personal applications — users don’t like to get unfriendly “unknown certificate” messages when they visit your site.

]]> http://dotnetyuppie.com/2008/04/26/enabling-ssl-https-for-iis-in-windows-xp/feed/ 3 http://dotnetyuppie.com/2008/04/22/handling-and-recording-exceptions-in-net/ http://dotnetyuppie.com/2008/04/22/handling-and-recording-exceptions-in-net/#comments Wed, 23 Apr 2008 03:35:55 +0000 DotNetYuppie http://dotnetyuppie.com/?p=13 There’s nothing more amateur than displaying a big, yellow unhandled exception page for a .NET application. Professionally done ASP.NET websites need adequate error handling and recording. It’s not enough to catch exceptions and display a friendly error page — you need to record any unhandled errors so that they can be fixed.



Proper Error Handling – Step 1
The first step to handling errors is to Try/Catch them before they occur. If you’re performing some action that has a high probability of throwing an error (e.g. anything relating to a call to a database or read/write to a file), you should enclose your logic in a Try/Catch statement.

Keep in mind, however, that throwing exceptions is bad. Generally speaking, exception handling takes up a lot of resources and is a very slow process. If exceptions are being thrown, it’s probable that you didn’t do enough error checking ahead of time to prevent the exception from being thrown. If you record your exceptions (as I’ll show you how to do), you can retrospectively look back and see what type of preemptive error checking you should have done to prevent the exception from being thrown in the first place.

Public Sub ErrorProneCode()

    'Inadequate error checking here

    Try
        'Make call to database or file I/O that
        ' throws a nasty exception
    Catch ex As Exception
        'Catch the exception -- either display a message
        ' to the user that an error occurred, or redirect
        ' the user to a standard "error" page

        'Don't forget to record the exception so that
        ' you can investigate at a later time
    Finally
        'Also, don't forget to clean up (destroy)
        ' any(objects) that might cause a leak
    End Try

End Sub

Proper Error Handling – Step 2
Sometimes, developers don’t have enough foresight to Try/Catch/Finally every single error-prone line of code, and exceptions go unhandled. Unfortunately, if you haven’t set up a standardized error page, users are rudely presented with a big, yellow Microsoft error page that means absolutely nothing to the end-user. To add insult to injury, Microsoft’s error page does not record the exception that occurred, which means you (the developer) won’t hear about it unless the end-user complains.

For the instances when you don’t have an exception wrapped up in a Try/Catch, you need to add a Global.asax. To do so, open your project, “Add New Item”, and then select “Global Application Class”. The default name is Global.asax.

Within Global.asax, you can specify what happens when the Application_Error event fires. Application_Error occurs when an unhandled exception occurs and is not caught by a Try/Catch. When you add Global.asax, it adds several event handlers automatically — add your code to the Application_Error event, similar to this:

Sub Application_Error(ByVal sender As Object, ByVal e As EventArgs)
    ' Code that runs when an unhandled error occurs
    ' The exception was not caught with a Try/Catch

    'Get the last exception that occurred
    ' (which sent us to Application_Error)
    Dim ex As Exception = Server.GetLastError

    'Record the error somewhere so that you can prevent this
    ' from happening in the future.  RecordException() is a method
    ' that you need to write yourself.  I have included psuedocode
    ' for it below
    RecordException(ex, SomeURL)

    'Response.Redirect() the user to a generalized "Error" page
End Sub

Recording Your Error
Regardless of whether you had a handled or unhandled exception, you still need to record it so that you can take steps to prevent the exception from occurring in the future. Typically, errors can be recorded by inserting them into a database. Of course, if your exception is originating because you can’t connect to the database, then you won’t be able to record any exceptions.

The variables that you record are important so that you can track down problems. I prefer to have any session or user data (e.g. UserID, SessionID, username, etc.), the date/time, the stack trace, the inner stack trace, the exception message, and the URL that originated the exception. Your data preference may vary, but the most important section is the stack trace.

The following pseudocode is an example of how to record an exception. This method would be called by either the Catch section of a Try/Catch or Global.asax’s Application_Error:

Public Sub RecordException(ByVal ex As Exception, ByVal OriginatingURL As String)

    Dim ParamList As New ArrayList

    ParamList.Add(New Data.SqlClient.SqlParameter( _
        "Username", Session("Username")))
    ParamList.Add(New Data.SqlClient.SqlParameter( _
        "DateOfError", Now))
    ParamList.Add(New Data.SqlClient.SqlParameter( _
        "StackTrace", ex.StackTrace))
    ParamList.Add(New Data.SqlClient.SqlParameter( _
        "InnerStackTrace", ex.InnerException.StackTrace))
    ParamList.Add(New Data.SqlClient.SqlParameter( _
        "ExceptionMessage", ex.Message))
    ParamList.Add(New Data.SqlClient.SqlParameter( _
        "ExceptionMessage", OriginatingURL))

    'Open connection to SQL database and insert
    ' the exception data into a table

End Sub

Conclusion
There are many ways to catch and record exceptions, but there are two basic principles. First, you need to present the end-user with some sort of notification that notifies them that something weird is going on, and that you’ve been notified about it. Microsoft’s default error page is not an adequate error page. Second, you need to record any exceptions that were not expected. I prefer to record my exceptions in an SQL database, and then use the database as a ‘to do’ list when I’m tracking down bugs. Regardless of your method for recording exceptions, it needs to be done so that the end-user doesn’t have to manually report bugs to you.

]]> http://dotnetyuppie.com/2008/04/22/handling-and-recording-exceptions-in-net/feed/ 0 http://dotnetyuppie.com/2008/04/20/please-preload-your-css-images/ http://dotnetyuppie.com/2008/04/20/please-preload-your-css-images/#comments Mon, 21 Apr 2008 03:36:42 +0000 DotNetYuppie http://dotnetyuppie.com/?p=41 Please, for your own good, preload your CSS images.

It’s becoming more popular to use the :hover pseudo-class to toggle a background-image in a <div> block to simulate various visual effects, but many developers are making the mistake of not preloading the :hover image. It looks unprofessional when a user hovers over an image and has to wait for a new background-image to download and display.


As you can see above, there is a small, awkward delay, which isn’t always so small, that occurs when a :hover background-image is not properly preloaded.

How To Preload Your Own Images
There are various ways to preload images, but the most efficient and popular way is to use CSS and a sprite, combined image to accomplish the appearance of a preload.

1. Create a single image file with both the normal and the :hover background images. I have included an example, called Example.png, below:
   
2. Specify the image dimensions of the first background-image. The first button’s dimensions start at {0,0} and end at {191,52}, after which the second image button begins. When you specify your image CSS, you need to constrain the background image using the following code — this will only display the top button in the image file:

   #SomeBackgroundImage {
   	background: url('Example.png') 0px 0px no-repeat;
   	width: 191px;
   	height: 52px;
   }
   

3. Specify the image dimensions for the :hover background
   Now that you’ve set up the initial image, you need to set up the dimensions for when the user’s mouse hovers over the image. Once the image hovers, you want the background position to change so that you only see the bottom portion of the image (and exclude the top portion). All we’re really doing is telling CSS that our background image starts 53 pixels below where it normally would. This is achieved by the following code:

   #SomeBackgroundImage:hover {
   	background: url('Example.png') 0px -53px no-repeat;
   	width: 191px;
   	height: 52px;
   }
   

Why is this method so much better?
Many developers make the honest mistake of creating two separate image files — like Example.png and ExampleHover.png. CSS does not preload any images — :hover background-images are not loaded until the pseudo-class is called (i.e. when the user initiates a mouse hover). This lack of preloading creates the awkward delay between the mouse hovering over an object and CSS displaying a new background-image.

In the example above, a single image file contains both forms of the toggled object, which actually creates two beneficial effects. First, our :hover image is preloaded because it is part of the original background-image — CSS only has to move the location of the background image position. Second, it’s more efficient to load one larger image than to load two smaller images because there is a performance penalty each time the browser has to make a new HTTP request to a server. The fewer requests, the better.

]]> http://dotnetyuppie.com/2008/04/20/please-preload-your-css-images/feed/ 1 http://dotnetyuppie.com/2008/04/02/serializable-mailmessage-class/ http://dotnetyuppie.com/2008/04/02/serializable-mailmessage-class/#comments Thu, 03 Apr 2008 04:29:38 +0000 DotNetYuppie http://dotnetyuppie.com/2008/04/02/serializable-mailmessage-class/ In response to my article on Custom Binary Serialization in .NET, a visitor asked me for a specific example of a custom serialization class of .NET’s MailMessage class.

As I mentioned in the article, I struggled with the MailMessage and MailAddress class because they cannot be serialized unless you use custom serialization (which can be a big pain because it takes quite a bit of time to create a custom class). I spent days trying to serialize the MailMessage class using conventional methods, only to find that there is no quick workaround for it other than custom serialization.

Download My Custom SerialMailMessage Class
If you’re interested in using my class, you can download the SerialMailMessage code here.

Within the zipped file, you will find the following classes:

1. SerialMailMessageExample - I have included a simple example that utilizes the SerialMailMessage class.
2. SerialMailMessage - A custom serializable class that uses both SerialMailAddress and SerialMailAttachment to create a serializable form of .NET’s MailMessage class.
3. Serialization - A simple class to perform serialization and deserialization of serializable objects
4. SerialMailAddress - A custom serializable class that replaces .NET’s MailAddress class (which is not serializable).
5. SerialMailAttachment - A custom serializable class that replaces .NET’s MailAttachment class (which is not serializable).

Please keep in mind that my SerialMailMessage code was intended for a web service, so there were certain limitations built into the design of the classes. If you aren’t using these classes with a web service, you’ll have quite a bit more flexibility than I did. I highly encourage you to modify and improve on my code — there is a shameful lack of useful custom serializable classes available online, hence the reason for me having to write my own.

If you have any questions, please post them as comments so that everyone can benefit from a discussion.

]]> http://dotnetyuppie.com/2008/04/02/serializable-mailmessage-class/feed/ 6 http://dotnetyuppie.com/2008/03/27/maximizing-your-firefox-screen-real-estate/ http://dotnetyuppie.com/2008/03/27/maximizing-your-firefox-screen-real-estate/#comments Thu, 27 Mar 2008 15:54:33 +0000 DotNetYuppie http://dotnetyuppie.com/2008/03/27/maximizing-your-firefox-screen-real-estate/ If you’re developing on a laptop with a smaller screen, you can use all the screen real estate that you can get. I have recently optimized my Firefox in order to maximize the amount of screen space available for web pages.



Hide the main menubar
As you can see above, I have hidden the “File, Edit, View, …” menu at the top, particularly because I rarely use my mouse to access the menu. I almost always use hotkeys (like CTRL-B to access my bookmarks) to access the menu. There is a Firefox extension, called Hide Menubar, that allows you to hide the menu unless it is in use. As you can see in the image below, you can enable or disable the main menu by right-clicking in the menu bar. Click here to download the Hide Menubar extension.



Use small icons for your theme
By right-clicking the main menu and clicking ‘Customize…’, you can reduce the size of your theme icons so that they are the same height as your URL textbox. Select the ‘Use Small Icons’ checkbox as shown below.





Total Space Saved
On my machine, by both hiding the menu bar and using small icons, I save about 30 pixels of screen space (about 4% of my total screen resolution). A 4% reduction in wasted space doesn’t seem like much, but it makes a significant visual difference while not diminishing the usability of Firefox.

]]> http://dotnetyuppie.com/2008/03/27/maximizing-your-firefox-screen-real-estate/feed/ 0