Dot Net Yuppie http://dotnetyuppie.com Web design, SQL, and .NET for the young, up-and-coming developer Thu, 28 Jan 2010 17:00:11 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Ten Commandments of Exceptional Web Design http://dotnetyuppie.com/2010/01/28/ten-commandments-of-exceptional-web-design/ http://dotnetyuppie.com/2010/01/28/ten-commandments-of-exceptional-web-design/#comments Thu, 28 Jan 2010 17:00:11 +0000 DotNetYuppie http://dotnetyuppie.com/?p=46 In an effort to garner web design inspiration, I frequently visit CSS galleries to increase my design vocabulary and see new, cutting-edge design trends. Often times, however, these websites are consistently making the same amateur design mistakes that shouldn’t ever be done by gallery-worthy web designs.

  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.
    11. ]]> http://dotnetyuppie.com/2010/01/28/ten-commandments-of-exceptional-web-design/feed/ 0 Permalinks and mod_rewrite Headaches in Wordpress with IIS 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:

    &lt;?php

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

//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 =&gt; $val ) {
	if ( substr($var, 0, 3) == '404') {
		if ( strstr($var, &quot;?&quot;) ) {
			$newvar = substr($var, strpos($var, '?') + 1);
			$_GET[$newvar] = $val;
		}
		unset($_GET[$var]);
	}
	break;
}
include('index.php');
?&gt;

    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     Website Review of DoshDosh.com 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     Enabling SSL (HTTPS) for IIS in Windows XP 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     Handling and Recording Exceptions in .NET 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     Please Preload Your CSS Images 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     Serializable MailMessage Class 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     Maximizing Your Firefox Screen Real Estate 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.

    Optimized screen

    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.

    Hide Menubar

    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.

    Customize…

    Small Icons

    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     Custom Binary Serialization in .NET http://dotnetyuppie.com/2008/02/17/custom-binary-serialization-in-net/ http://dotnetyuppie.com/2008/02/17/custom-binary-serialization-in-net/#comments Mon, 18 Feb 2008 04:11:26 +0000 DotNetYuppie http://dotnetyuppie.com/2008/02/17/custom-binary-serialization-in-net/ In .NET, serialization is the process of converting a complex object into a bit stream or XML string, which can be saved into a file or sent over a network connection. Serialization is extensively used in web services to transfer information from client to server, and for saving .NET objects into an SQL database.

    In this tutorial, I will show you how to implement binary serialization in .NET; you’ll quickly find that many objects in .NET are not natively serializable, so I’ll also show you how to customize an object to manually make it serializable.

    Serializable Objects
    If an object is natively serializable, it is an extremely simple process to turn a complex object into a byte array. The following class can be used in just about any situation to serialize or deserialize an object:

    Imports System.Runtime.Serialization.Formatters.Binary
Imports System.IO

Public Class Serialization

Public Shared Function Serialize(ByVal Obj As Object) As Byte()
	Dim MS As New MemoryStream
	Dim BF As New BinaryFormatter
	BF.Serialize(MS, Obj)
	Return MS.ToArray
End Function

Public Shared Function Deserialize(ByVal SerializedData() As Byte) As Object
	Dim MS As New MemoryStream(SerializedData)
	Dim BF As New BinaryFormatter
	Return BF.Deserialize(MS)
End Function

End Class

    The following example, utilizing the ‘Serialization’ class from above, will convert ‘SomeObject’ into a byte array and back into a generic object. Note that the ‘Object’ can be casted into whatever you want:

    Dim SerializedData() as Byte = Serialization.Serialize(SomeObject)
Dim DeserializedObject as Object = Serialization.Deserialize(SerializedData)

    Once an object is converted into a byte array, you can save it into an SQL database, write it to the disk, or even Response.BinaryWrite() it out to the user.

    Serialization of Unserializable Objects
    There are quite a few objects in .NET (my most recent bout was with MailMessage and MailAddress) that cannot be serialized using the above method. If you need to serialize these objects, you must tell .NET how an object should be serialized. This often means that you’ll need to make a custom class that inherits an unserializable class, and then specify the class’s serialization map.

    To manually specify how an object is serialized/deserialized, you need to include two functions. I learn much better with examples rather than explanation, so I’ll give you the example first:

    Imports System.Runtime.Serialization

<Serializable()> _
Public Class SomeClass
Implements ISerializable

Public SomeProperty As String

Public Sub New(ByVal info as SerializationInfo, ByVal c as StreamingContext)
	Me.SomeProperty = info.GetValue("SomeProperty", GetType(String))
End Sub

Public Sub GetObjectData(ByVal info SerializationInfo, ByVal context as StreamingContext) _
	Implements ISerializable.GetObjectData

	info.AddValue("SomeProperty", Me.SomeProperty, GetType(String))
End Sub

    Explanation
    By including a New() and GetObjectData() method, .NET will know exactly how to serialize an object. Without these methods, .NET would have no way of knowing how to convert your class into a bit stream, and it would throw an error. I would like to point out a few small things of note in the above example:

    • Include <Serializable()> _ before you declare your class — this tells .NET that your class is serializable. You need to include a (space)(underscore) because, unlike in C#, VB.NET pays attention to white space and it won’t associate your XML tag with the class. If you’re weirded out with the underscore, you can just put everything on the same line, like <Serializable()> Public Class SomeClass.
    • Your class has to implement ISerializable — this allows you to use the GetObjectData() method later on.
    • The New() method is actually handling deserialization — it’s setting the Me.SomeProperty property based on the info object that is passed as an argument.
    • The GetObjectData() method must implement ISerializable.GetObjectData. This method is responsible for serialization — it will store the Me.SomeProperty variable, which is a GetType(String).

    Custom Serialization
    Once you’ve declared the GetType() and New() methods for your custom class, you can use the ‘Serialization’ custom class at the beginning of this document to serialize your class just as if it was normally a serializable object.

    ]]>     http://dotnetyuppie.com/2008/02/17/custom-binary-serialization-in-net/feed/ 2     How to Write BAT Files to Customize Your Development Environment http://dotnetyuppie.com/2008/02/04/how-to-write-bat-files-to-customize-your-development-environment/ http://dotnetyuppie.com/2008/02/04/how-to-write-bat-files-to-customize-your-development-environment/#comments Mon, 04 Feb 2008 13:38:19 +0000 DotNetYuppie http://dotnetyuppie.com/2008/02/04/how-to-write-bat-files-to-customize-your-development-environment/ I use the same machine to do development and to do all of my web surfing/school work/e-mails. Often times I don’t want MSSQL server and IIS running when I’m not working because it wastes resources and slows down my computer.

    Customize your environment
    Windows makes it simple to customize your environment so services like IIS, MSSQL, WebClient, etc. can be started and stopped just by running a small BAT file. To create your own development environment BAT file:

    1. Open Notepad
    2. Copy and paste the following text into notepad: 
      	@echo off

	:start
	set /p _input="Server? [y/n]"

	if %_input% equ y (
		echo Starting server services...
		sc start HTTPFilter 	REM HTTP SSL
		sc start IISADMIN		REM IIS Admin
		sc start lanmanserver	REM Server
		sc start MSSQLSERVER	REM SQL Server
		sc start SQLBrowser		REM SQL Server Browser
		sc start SQLWriter		REM SQL Server VSS Writer
		sc start W3SVC			REM World Wide Web Publishing
		sc start WebClient		REM WebClient

		set /p ="Hit any key to continue..."
	) else (
		echo STOPPING server services...
		sc stop HTTPFilter
		sc stop IISADMIN
		sc stop lanmanserver
		sc stop MSSQLSERVER
		sc stop SQLBrowser
		sc stop SQLWriter
		sc stop W3SVC
		sc stop WebClient

		set /p ="Hit any key to continue..."
	)

	:end
    3. Save the file as Server.bat onto your desktop — you can name it whatever you like, as long as you have the file extension ‘.bat’
    4. Double click the BAT file on your desktop — a command window will open, and prompt you with “Server? [y/n]“. If you want to enable your development environment, hit ‘y’ — if you want to disable your development environment, hit ‘n’

    This script is utilizing “sc stop” and “sc start”, which are both commands to start and stop different services. Depending on your machine, your services may be different than mine. I encourage you to customize the BAT file to start/stop whichever services you find pertinent to your development environment. Unfortunately, some services (like MDM) don’t respond to ’sc stop’ — but this script is able to toggle some of the more important, resource-loving services.

    You’ll find that by using this script, you can toggle between a development environment and a ‘fun’ environment within seconds. If you’re on a desktop machine that you also play games on, a script like this is invaluable to speed up your machine when you’re gaming, but still allow you to easily switch back to a development mode.

    ]]>     http://dotnetyuppie.com/2008/02/04/how-to-write-bat-files-to-customize-your-development-environment/feed/ 2