Bookmarklet: IJR

I have this bookmarklet on my links toolbar in Firefox and Chrome along with other bookmarklets I have created. Feel free to drag this bookmarklet to your bookmarks bar and start sharing your IJR posts on Twitter.

The biggest problem area I work to avoid when working with JavaScript is the scoping issue. It has been very common to simply create a series of functions and call them however you see fit from event handlers in your HTML. This was all fine when you had 300 lines of JavaScript for your entire site because it was just used for a slight site enhancement. Now if you are building a much more complex site with lots of interaction, you will have several thousand lines of code. Every one of these functions and variables that you define are all placed in the global scope, which is the window object. Consider the following code.

var AnyVariableName = 1;
alert(AnyVariableName);

This code is equivalent to the following code, assuming this code is in the global scope and not within a function block.

window['AnyVariableName'] = 1;
alert(AnyVariableName);

Why is this useful? Well, if you are within a function block and declare a variable the scope of that variable is limited to that function block. If you want to declare a variable and put it into the global scope you can use the window object in this way to do so. (Hint: window is the container for the global scope.)

But you do not want to dirty up the global scope which will lead to naming conflicts and code that is very difficult to maintain. What you may want is namespacing so that you can isolate blocks of code in an organized structure. There is no language feature in JavaScript for namespaces like you find in C# or VB.NET but you can put references into objects. The following code declares a variable which is an object that holds onto properties.

var MyStuff = { };
MyStuff.CurrentIndex = 0;
MyStuff.Increment = function() { return ++MyStuff.CurrentIndex; };

This is one way that you can manage scope, but when you start to have a fuller hierarchy you can imagine that this would become difficult to manage. So you can leverage the Module Pattern where you declare everything without regard for scope and then wrap it in what is now being called a module.

(function(){
var $currentIndex = 0;
var $increment = function() { return ++MyStuff.CurrentIndex; };
}());

The first and last lines are a little hard to understand when you see it for the first time. Think of it like algebra. When you want to manage scope in an expression you use parentheses. This way you can make an expression like (4 + 2) * 3 to ensure that the 4 and 2 are added before the result is multiplied by 3. The same premise works here with the Module Pattern. What happens outside the parentheses does not affect what is inside. Then the first thing in the container is an anonymous function, but notice when the function block is closed there is a set of parentheses which causes the function to be executed immediately. The code in the function block is executed immediately and then contained with the scope of that function block. In the case of this code snippet nothing is happening because the code is not doing anything. How is this useful?

In the code below we will reference a little jQuery code to attach an event handler function. This code will find all anchor tags on the page which have Close as a class value and attach a click event. This click event will hide the parent container of the anchor element.

(function(){
  $('a.Close').click(function(e) {
    e.preventDefault();
    $(this).parent().hide();
  });
}());

This code is isolated and executed, leaving nothing in the global scope while the function that is attached to any matching anchor tags is still accessible because the element is now bound to the function as a click event handler.

Now you may want to start organizing this nicely scoped code into namespaces and you can do so by declaring your variables and functions within the module and export them to through a global variable, as shown in the code below.

(function(){
var $closeAllModals = function() {
  $('div.Modal').hide();
};
window['SST'] = {};
SST.CloseAllModals = $closeAllModals;
}());

Now you can do whatever you like within your module and export the public portions you choose. In this case I added the reference for the function to a container named SST. I can now access it anywhere in my code. The key difference here is that now all my code for this site will be held within the SST container and I will not have to be concerned with using third party libraries which may place variables into the global scope. Most libraries, like jQuery, will declare the minimal amount of variables in the global scope. The jQuery library uses $ and jQuery for the global scope and then functions, variables and plugins used by jQuery are held under that scope. The same is true for libraries like the Yahoo UI library which uses YUI in the global scope.

As you write more code and need to organize it further you will want to have multiple levels in your namespace hierarchy. You can easily chain containers together, such as the following code.

(function(){
window['SST'] = {};
SST.Data = {};
SST.Services = {};
SST.Methods = {};
}());

When you have a lot of code you will want to split it across multiple files, so declaring your namespace hierarchy from a central point may not be ideal, so you will want to use a function that will build your structure in a simple way.

(function(){
SST.CreateNamespace('SST.Data.Products');
SST.CreateNamespace('SST.Data.Customers');
SST.CreateNamespace('SST.Services.Validation');
SST.CreateNamespace('SST.Services.Checkout');
}());

Not every page will use every script and if you have 500kb of script you want to use the minimal amount of code on each page, so I find it best to ensure the namespace that I am defining in this module is defined within the module.

(function(){
var basketItems = [];
var shippingZip = 55555;
var $getShippingTotal = function() {
  // do stuff
};

var $submitOrder = function() {
  // do stuff
};

SST.CreateNamespace('SST.Services.Checkout');
SST.Services.Checkout.GetShippingTotal = $getShippingTotal;
SST.Services.Checkout.SubmitOrder = $submitOrder;
}());

Now I have my functions and variables defined in an isolated scope where the functions can access these variables, which are now effectively private variables, and the public functions are exposed through the namespace structure.

Since I use these techniques often I have created a core library that I have been using for many projects this past year. I call it core.js and it includes the CreateNamespace function that I referenced in the code snippets above. And if you are using Visual Studio, you can use core-vsdoc.js to get Intellisense support in any of your code that is using core.js.

In addition to namespace support, you will also find a lightweight StringBuilder object in core.js which is useful if you are assembling HTML with your code so you can avoid the overhead that comes with string concatenation.

There is a lot more that I will be covering going forward, such as common jQuery techniques, currying and callbacks. Please check back for that content.

Find me on Twitter: @smallsharptools.

Recommended Reading

• Embracing jQuery and Learning JavaScript All Over Again
• Recommended Books on JavaScript

With JavaScript becoming a central piece of a modern web application, I decided that I had to start taking it seriously. For years I only used JavaScript to enhance a page and ensured that if the user had JavaScript disabled the page would still work as required. It was time consuming to add a lot of JavaScript and it was often not worthwhile. Starting in 2004 I started seeing more and more sites start building sites which simply would not work without JavaScript. I decided that since I plan to do web development for many more years to come that I had to learn how this was all done, and I found that these modern sites were leveraging JavaScript libraries that would abstract away browser differences and reduce the effort necessary to implement a rich experience.

I tried out several libraries and after working with libraries like Prototype and MooTools I settled on jQuery. The compelling features of jQuery were the small download size along with the powerful plugin model with a rich collection of available plugins. The other libraries are still useful, but jQuery is what I reach for first and it typically does not let me down.

An important point that I have to get across to developers and designers who are getting into jQuery is that it is not a replacement for JavaScript. It is simply a compatibility layer that has an elegant interface which is far easier to use than the standard DOM API. It is still necessary to understand JavaScript to build modern web applications well. I also stress the fact that you must have a strong grasp on HTML and CSS because jQuery manipulates HTML and CSS to achieve the interactive features that you are building with jQuery.

Web page layout is known as the Box Model. It is a simple concept but working with it can be difficult with many browsers which do not behave in the same way. CSS alone can be intimidating, but if you break it down and keep it simple for a while you can pick it all up gradually. I have found books by Eric Meyer and Jeffrey Zeldman to be the best resources to master the Box Model.

I have been doing web development for a very long time and back in 1999 the JavaScript that I wrote then is very different than what I am writing now. I have had to unlearn a lot of bad coding practices. The most difficult lesson that I have learned is that every book back then had it all wrong. When I read Pro JavaScript Techniques by John Resig I finally started to see the language as it was meant to be. A year later I found JavaScript: The Good Parts by Douglas Crockford which is a book that you must read. It is packed full of important details you wish you had known before, and it is a very short book which makes it much easier to finish reading. Both of these books are the foundation for all of the modern techniques I am using every day. And a new book coming soon by John Resig called Secrets of the JavaScript Ninja will cover additional topics that he did not get deep into in with his first book.

Once you have started to come up to speed with HTML, CSS and JavaScript you will want to make sure you are making use of the best tools that are now available. I compiled a list of Web Developer Tools for the Power Developer. If you are not familiar with these tools yet you will discover the work you have been doing can be much easier. Since I created this list there have been updates to these tools and new browsers like Google Chrome and Internet Explorer 8 have started to implement useful tools in the browser which are similar to the extremely popular Firebug extension to Firefox.

I have built some tools to assist with web development. Packer for .NET is one which I have started using on every web site I build lately. This utility can compact your JavaScript and CSS by stripping whitespace and comments which are not necessary in your production environment but are very useful in making your work maintainable. Recently I have implemented functionality making it easier to combine multiple files into one. I find that instead of one large file that is over 1000 lines long it is better to break that file into pieces which are used during development and then when it is moved to production, where the debug attribute in the Web.config is set to false, the files are combined, compacted and sent in the response. The Packer project also includes an MSBuild task to update your Web.config during deployment. I use this feature often to automate my deployments with a single click. You may find this utility will save you a great deal of time.

Going forward with jQuery and ASP.NET MVC is going to be a very different experience from the PostBack model. I will have greater control over the HTML which will allow me to define the semantic structure and style it the way I see fit with CSS. Adding behavior with JavaScript is going to be a lot easier. It won't all be rainbows and I am sure new problems will come up, but it does feel like a fresh start.

If you would like to read more on jQuery and Javascript, please subscribe to this blog and also browse my past blog entries. In the next few months I will continue writing about jQuery and ASP.NET MVC, so more content is coming. And be sure to post comments. I always like to know what others are doing.

• Packer for .NET
• Download

Note: Version 4.1.1 has been released with a fix to the targets file.

Breaking Change

With this release the Utility class has been renamed FileProcessor. If you are coding against the assembly you will need to change Utility to FileProcessor.

Combine Mode

Sometimes you may want to simply combine multiple files together without running the JSMin or CSSMin modes. You may like to spread our CSS across multiple files so they are easier to organize and allow multiple developers to access concurrently. The Combine mode will allow you to combine these files into one either during the build and deployment process or even at runtime if you choose. In the 4.0.3 release I added features to make it possible to push out your files in this way.

UpdateWebConfig

I automate as much as I can on a project. One of the most critical changes during deployment is updating the configuration file. To do this I make use of web site projects along with the web deployment project. This process creates a pre-compiled web site which is ready for deployment and while it does have a feature to replace sections of the configuration file, it needs to be more targeted.

A setting that we all have to change is the debug mode which is true during development but should always be false in production. To change this setting with the web deployment projects you must replace the compilation element for that one attribute which means replacing the list of assemblies which are often updated without notice by Visual Studio during development. I find it is dangerous to blindly replace this whole section, so I have been using the XmlUpdate task included with the MSBuild Community Tasks. That task allows you to use an XPath value to target updates to attributes or any node an XPath can reference.

The problem with using XmlUpdate is that it adds a lot to your MSBuild script which is hard to read and maintain. The UpdateWebConfig task allows you to set the values that you would commonly change like the appSettings, debug mode, compilation errors mode, mail host and the configSource value on the connectionStrings element. With a very easy to read MSBuild script I can now set the right values so that when the files are copied to the staging server I can simply click a button in Visual Studio and within minutes (or seconds) the site will be built, configured and copied to the staging server, ready for testing. With the latest site that I am developing this happens in under 20 seconds.

Below is a sample of the new UpdateWebConfig task.

<?xml version="1.0" encoding="utf-8"?>
<Project DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">

  <Import Project="$(MSBuildExtensionsPath)\SmallSharpTools.Packer\MSBuild.Packer.Targets" />

  <PropertyGroup>
    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
    <Environment Condition=" '$(Environment)' == '' ">Production</Environment>

    <WebConfigPath>Website_deploy\Web.config</WebConfigPath>

    <!-- Development -->
    <AppSettings Condition=" '$(Environment)' == 'Development' ">
      Environment = Development;
    </AppSettings>

    <!-- Staging -->
    <AppSettings Condition=" '$(Environment)' == 'Staging' ">
      Environment = Staging;
      SSL.Enabled = false;
    </AppSettings>

    <!-- Production -->
    <AppSettings Condition=" '$(Environment)' == 'Production' ">
      Environment = Production;
      SSL.Enabled = true;
      SSL.Host = https://www.acme.com
    </AppSettings>

  </PropertyGroup>
  <ItemGroup>
  </ItemGroup>
  <Target Name="Build">

    <!-- Development -->
    <UpdateWebConfig Condition=" '$(Environment)' == 'Development' "
        WebConfigPath="$(WebConfigPath)"
        ConnectionStringConfigSource="Configurations\\connectionStrings-dev.config"
        AppSettings="$(AppSettings)"
        Debug="true"
        CustomErrorsMode="Off"
        MailHost="localhost"/>

    <!-- Staging -->
    <UpdateWebConfig Condition=" '$(Environment)' == 'Staging' "
        WebConfigPath="$(WebConfigPath)"
        ConnectionStringConfigSource="Configurations\\connectionStrings-staging.config"
        AppSettings="$(AppSettings)"
        Debug="false"
        CustomErrorsMode="Remote"
        MailHost="staging.acme.com"/>

    <!-- Production -->
    <UpdateWebConfig Condition=" '$(Environment)' == 'Production' "
        WebConfigPath="$(WebConfigPath)"
        ConnectionStringConfigSource="Configurations\\connectionStrings-production.config"
        AppSettings="$(AppSettings)"
        Debug="false"
        CustomErrorsMode="On"
        MailHost="mail.acme.com"/>

  </Target>
</Project>

Consider if I were to loan you my laptop that I bought in 2001. It is very slow and cannot run many of the applications that you use today and has a 10GB hard drive. Most iPods have more storage space. You would not want to use that laptop. You may refuse to use it because it is just not worth your time to deal with the headaches of finding old ways to do what takes so much less effort with a computer purchased in the last 3 years.

Back in 2004 ESPN implemented some new features on their web site that they wanted to get to their users. In order to do so they were going to have to require users to use a current browser. To do this they did a check in JavaScript to see if their browser supported certain functions and if they did not they would send them to the Browser Upgrade Page which is still there. The browser check did not look for a certain version of a browser, but browser capabilities. Fortunately that was easy enough to do and they were successful in rolling out new features that their users appreciated. ESPN is one of the most innovative sites around.

Still there are a significant number of IE6 users roaming the public Internet. What can we do?

I think the attitude has to change. It is not acceptable that IE6 has not supported PNG images properly since it was released in 2001. Microsoft could have released an update to fully implement proper support, but they did not for several years. Now we have IE7 which fixed the PNG problem along with several other major bugs in IE6, but still problems remain. The expectation is that the browser should properly support modern HTML, CSS and JavaScript standards within a reasonable time frame. And in Internet terms a reasonable lag time to support new standards has been 2 to 3 years roughly. Lately with modern browsers, which completely excludes the Internet Explorer family of browsers, the lag time has been 6 months to a year. Safari 4 is now out as a beta with support for HTML 5 and CSS 3 and the new JavaScript engine is 30 times faster than IE7.

In contrast IE7 barely supports CSS 2.1 and has significant shortcomings with CSS. And support for HTML 5 is not even on the horizon much less a faster JavaScript engine. Apparently the architecture for this browser is extremely costly to maintain and upgrade so much that even Microsoft cannot maintain a reasonable upgrade time line.

Browsers like Firefox, Safari and Chrome all have an upgrade feature that makes it easy to stay current and updates are published regularly for big and small changes which move the browser towards improved standards compliance as well as greater stability and performance. You do not have to wait years for these updates, instead they come out every few weeks. If a bug is found it is corrected as soon as a fix can be pushed out in the next update. Users of version 3.0.5 are quickly updated to version 3.0.6 through the automatic update program that transparently downloads the update for you and installs it for you the next time you start the browser. Critical bugs do not last long with such an update system in place. The same does not exist for IE7 beyond Windows updates which are not nearly as effective as the Firefox update system. Users are unwilling and sometimes afraid to run Windows updates. Perhaps some users have a pirated version of Windows and cannot run the updates. Sometimes an improperly configured anti-virus program will also prevent Windows updates from running properly. Whatever the reason, they would be better off with using a browser that has an update system that keeps them current.

After my last post a friend sent me a link to this site, Stop Living in the Past. It is yet another site that is pushing for the end of IE6.

Starting with Google Mail everything changed. Suddenly you could build rich applications than run on web sites. And thanks to the rising popularity of AJAX many more sites jumped forward into what became known at Web 2.0. Now it is common for a site like Facebook to act more like an application than a collection of pages. You have a task bar at the bottom to show notifications and keep active chats going with friends even as you browse to different areas to look at photos and post comments on your friend's walls. In order to run as an application a web site requires more resources, and Internet Explorer 6 is just not capable of providing the experience that people want.

The Mozilla organization has made gradual strides in coming back as a viable competitor to Internet Explorer and Apple's Safari has had a different impact. The Firefox browser is popular, especially among more technically savvy users, because of the rich add-on library. It is easy to make the argument that without the Firebug add-on the refined modern interfaces that are more common today would not be as common.

Safari has taken a different route. Instead of eating into Internet Explorer market share it has mostly taken away Firefox users. Safari is based on Apple's WebKit engine which is easily re-purposed for other uses like the mobile web interfaces on the iPhone and Google's phone. The WebKit engine is also what runs Adobe AIR, a rich internet application platform. Apple's impact on web technologies, due to the wide use of the WebKit engine, has helped increase the value of web standards and move the web forward as a platform.

Another major browser, which happens to be based on WebKit, is Google Chrome. While this browser makes use of the WebKit engine, it is quite different than Safari. A major difference is the JavaScript runtime engine which is capable of much faster performance than conventional JavaScript runtime engines. The coming Firefox and Safari releases promise to outpace the initial release of Chrome, which brings us back to Internet Explorer. There is no projected release of a modern JavaScript engine for Internet Explorer that will provide the experience that user's want and web site developers really, really want to deliver.

A major effort is currently underway to get users off of Internet Explorer 6. Version 7 has been available since October of 2006 yet by some statistics up to 20% of Internet users are still using version 6. In Norway there is currently a war on IE6 which is spreading well beyond Norway via Twitter and other social networks like a group on Facebook called IE6 Warning Campaign.

The largest group of users that are dragging their feet, even though IE7 has been out so long, is corporate users where applications were built for IE6. Since IE6 has so many nuances and bugs the applications built specifically for it years ago for it just do not work on Firefox or Chrome, much less IE7. To make matters worse, you cannot install IE7 alongside IE6 which would at least give these corporate users the option to use their internal applications (like time entry and accounting) with IE6 while they can use IE7 for the public Internet.

For over a year the IE6 Death March web site has highlighted products which are younger than IE6. The first iPod was released AFTER IE6. It is hard to believe that users are still using a pre-iPod browser. What kind of world is this?

The IE6 Death March site also promotes the March 2009 deadline for IE6 where web site designers and developers will simply stop testing their work in IE6 from that point forward and put all of that effort instead into getting their clients and users to use modern browsers.

I built my own warning mechanism for IE6 users. Another warning mechanism called Pushup covers several older browsers, not just IE6, and provides a much nicer design than what I put together. I strongly suggest putting one of these warning mechanisms on your public sites starting in March to help users stay current.

And staying current could not be easier in the modern browsers. Firefox, Safari and Chrome all have a feature that helps users stay current by automatically checking for new versions and upgrading with little effort. I have seen that Firefox users are often upgraded to the very last minor release within weeks, not months or years like we have typically seen with browsers. Annoying problems, like incomplete support for PNG graphics in IE6, could be fixed within weeks if IE8 introduces an update system similar to Firefox, Safari and Chrome. Instead we have to comprise the user experience for 80% of the users because 20% are lingering behind with IE6.

The problem with legacy internet web applications is very real. When you have 3 months to build an internal web application and then your budget is gone you cannot simply go back and update it each time a new browser comes out, so corporations decided that IE6 was all they ever needed. And upgrading the browser is not just a matter of a 5 minute installation, it requires budgeting work to upgrade all of those internal applications. And those budgets can be prohibitive.

But it is possible to build web applications that are what I like to call "future proof." Last year I wrote Internet Explorer 8 and Future Proofing your Website. I explain how you can write standards compliant HTML and CSS that you can validate with W3C tools so that you are protected from unknowns problems that creep into your work. You may have some syntax errors in your HTML or CSS which are not causing trouble today but will cause strange behavior in a future version of your favorite browser.

You can also future proof your work by leveraging one of the popular JavaScript libraries available today. The DOM API which is a part of JavaScript is used to manipulate the web page, which gives us all of those great Web 2.0 features that we love. But the DOM API is pretty hard to use and it does not work consistently across all of the browsers. I have been using jQuery which does all of the page manipulation that the DOM API does, but it has a much more intuitive interface and the library is heavily tested across all of the major browsers, including IE6. And once IE8 comes out, and Firefox 4, and Chrome 2 we can try out our applications to see if anything is broken in these new browsers. If they are, we may just have to get the latest versions of our chosen JavaScript library which adapts to these new browsers for us and leaves us to go back to our normal daily routine without having to redo all of our work to get that application to work in the newest browsers.

Starting in March I will be joining the March. Every one of my personal web sites will be making use of either my IE6 warning mechanism or Pushup. I will try to get my clients on board with Pushup as well. Once these IE6 users are warned enough they may finally decide to upgrade. I am confident the majority of them will. And then once IE6 usage drops below 5% you will start to see sites with features you never thought were possible. I am sure the next Google Mail is just around the corner, and it will be possible because the web took a huge step forward.

• Packer for .NET
• Download

The task of creating the compacted content can easily be forgotten during a deployment. And when the source control system locks the output files which are updated with the build script there can be trouble in both writing out the files as well as keeping the files current in source control. So instead of referencing the generate file it would be useful to reference the source files dynamically. Read on for an example.

First SiteUtility.cs defines a property that is a collection of the all of the scripts that a web page would reference. The RegisterJavaScript method will register script references with a ScriptManager control. Then ScriptsHandler.ashx uses the same list of scripts to dynamically generate the compacted content. Anytime the list of scripts is updated the change will take affect for both the RegisterJavaScript method as well as the handler.

Another feature of the SiteUtility class is the debug mode switching. If you are working in debug mode the scripts will be referenced directly. When the web site is deployed the debug mode can be disabled which will use the ScriptHandler.ashx to output the scripts as a single compacted reference.

App_Code/SiteUtility.cs

using System;
using System.Collections.Generic;
using System.Text;
using System.Web;
using System.Web.Caching;
using System.Web.UI;
using SmallSharpTools.Packer.Utilities;

/// <summary>
/// </summary>
public static class SiteUtility
{

    private static List<string> _scripts;

    public static List<string> Scripts
    {
        get
        {
            if (_scripts == null)
            {
                _scripts = new List<string>();
                _scripts.Add("~/core.js");
                _scripts.Add("~/script1.js");
                _scripts.Add("~/script2.js");
                _scripts.Add("~/script3.js");
            }
            return _scripts;
        }
    }

    public static void RegisterJavaScript(Page page)
    {
        ScriptManager scriptManager = ScriptManager.GetCurrent(page);

        if (HttpContext.Current.IsDebuggingEnabled)
        {
            // reference each script without shrinking
            foreach (string script in Scripts)
            {
                scriptManager.Scripts.Add(new ScriptReference(script));
            }
        }
        else
        {
            // reference the scripts handler which shrinks all scripts into one
            scriptManager.Scripts.Add(new ScriptReference("~/ScriptsHandler.ashx"));
        }
    }

    public static string GetCompactedJavaScript()
    {
        Cache cache = HttpRuntime.Cache;
        string cacheKey = "JavaScript";
        if (cache[cacheKey] != null)
        {
            return cache[cacheKey] as string;
        }

        List<string> scripts = new List<string>();
        foreach (string script in SiteUtility.Scripts)
        {
            scripts.Add(HttpContext.Current.Request.MapPath(script));
        }

        StringBuilder sb = new StringBuilder();
        sb.AppendLine("/*  Generated " + DateTime.Now.ToString() + "  */\n");
        sb.AppendLine(Utility.Run(PackMode.JSMin, scripts.ToArray(), true));

        string output = sb.ToString();

        // set to expire cache when any of the source files changes
        CacheDependency dep = new CacheDependency(scripts.ToArray());

        // hold for 30 minutes
        cache.Insert(cacheKey, output, dep, DateTime.Now.AddMinutes(30),
            Cache.NoSlidingExpiration, CacheItemPriority.Normal, null);

        return output;
    }

}

ScriptsHandler.ashx

<%@ WebHandler Language="C#" Class="ScriptsHandler" %>

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.Caching;
using SmallSharpTools.Packer.Utilities;

public class ScriptsHandler : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/javascript";
        context.Response.Write(SiteUtility.GetCompactedJavaScript());
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}

• Packer for .NET
• Download

Why Minify CSS?

CSS can be very complex and it helps to place inline comments in your stylesheets to assist with maintenance. These comments can explain workarounds which are used to support cross-browser layouts. We all have workarounds or even hacks to support legacy browsers like IE6. Often these techniques do not make much sense when they are viewed months later without any context. Normally comments are left out of CSS files because they increase the size of the documents and reveal internal details to any curious developer digging through your code. Now you can minify your CSS during your deployment process with Packer for .NET to strip your comments and unnecessary whitespace. The minification process also uses other techniques to further reduce the size of the output document.

More information:

• Yahoo Performance Rules
• YUI Compressor
• CSS Validator

Update: Version 4.0.2 is out which includes updates to includes wildcard expansion for the command-line utility. There was also a bug where the output file could not match the input file which has been fixed.

• The Basics of HTML, CSS and JavaScript
• JavaScript Tools
• jQuery Basics
• jQuery Advanced

Last week I gave this presentation in Madison and it was very well received. And this presentation is not .NET specific, so if you have any interest just in jQuery and AJAX please feel free to attend this presentation. I will be going through everything you need to know to start building interactive web interfaces with jQuery.

Below is the information for the Milwaukee and Fox Valley meetings:

Milwaukee

November 11
7:00PM

Direct Supply Inc
6663 N Industrial Road
Milwaukee, WI 53223
Map

Fox Valley

November 12
6:00PM

Fox Valley Technical College
Room A161A
1825 N. Bluemound Road
Appleton, Wisconsin 54912
Map

The appeal that I see with Amazon WS is the fact that the charges are accumulated by the hour. Amazon WS also has an API to allow developers to create control systems to manage their virtual servers. With the API you could fire up the additional seed servers as new content is pushed to the primary seeding server to replicate the content ahead of publishing the new torrent content in the RSS feed used by torrent clients like µTorrent.

And hosting content is not that expensive. I recently saw hosting for 1 terabyte of bandwidth for about $7 a month. That is really quite cheap if someone wanted to produce their own audio or video content and make it available on a minimal budget. It should not be necessary to rely solely on YouTube to host your video content. You could produce quality video and host it yourself on a virtual servers in the cloud and not have to deal with the low quality video that YouTube is still using. Services like hulu.com are pretty impressive. I have been watching full screen movies on my 37" LCD with my attached LCD TV and it is better quality than Time Warner cable.

Connect the dots and you can see that the traditional media distribution mechanisms are already far out of date.