.NET slave

Use Google's Closure Compiler in C#

Mads Kristensen — Sun, 08 Nov 2009 09:26:00 -0500

A few days ago, Google released their Closure Compiler project for optimizing JavaScript. Here’s what they write about the Closure Compiler:

The Closure Compiler is a tool for making JavaScript download and run faster. It is a true compiler for JavaScript. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what's left.

The interesting part of the Closure Compiler is that it not only removes whitespace, it also rewrites your JavaScript code to make it smaller and optimizes the code for better performance. My tests show that it can reduce JavaScript files by about 60% - and that’s before HTTP compression! Considering how much JavaScript a modern website uses, this is no less than amazing and highly useful.

The Closure Compiler comes in two flavors – a Java based command line tool and a RESTful API. I’ve been playing around with the API and it works great and very fast.

The code

The C# class I’ve written takes a JavaScript file and passes it through the API and then returns the compressed JavaScript as a string. The class contains one public and one private method and is only 47 lines of code including 16 lines of comments.

public string Compress(string file)
{
  string source = File.ReadAllText(file);
  XmlDocument xml = CallApi(source);
  return xml.SelectSingleNode("//compiledCode").InnerText;
}
 
private static XmlDocument CallApi(string source)
{
  using (WebClient client = new WebClient())
  {
    client.Headers.Add("content-type", "application/x-www-form-urlencoded");
    string data = string.Format(PostData, HttpUtility.UrlEncode(source));
    string result = client.UploadString(ApiEndpoint, data);
 
    XmlDocument doc = new XmlDocument();
    doc.LoadXml(result);
    return doc;
  }
}

How to use it

You can use the class to do various cool things. You can write a MSBuild or NAnt script that automatically compresses your JavaScript files as part of a continuous integration process or, as I prefer, write a HTTP handler to do the same but at runtime. Remember to output cache the compressed result. Here's an example of using the class from ASP.NET:

GoogleClosure gc = new GoogleClosure();

string script = gc.Compress(Server.MapPath("~/script.js"));

Remember that the class doesn't do any exception handling, so you might want to stick that in yourself.

Download

GoogleClosure.zip (905,00 bytes)

Use iframes with XHTML 1.0 Strict

Mads Kristensen — Wed, 04 Nov 2009 06:26:00 -0500

Recently I had to use iframes on a website conforming to XHTML 1.0 Strict. As you might know, the XHTML 1.0 Strict doctype doesn’t allow the use of iframes. The XHTML 1.0 Transitional doctype on the other hand, does allow you to use iframes, but I don’t like to use that doctype. The reason is, as the name implies, that it’s a doctype meant for make the transition from HTML into XHTML – a sort of a temporary solution.

When building new websites I like to use a strict doctype because it doesn’t allow for many of the style and behavioral tags that is much better placed in stylesheets and JavaScript.

What’s needed is a doctype that conforms to XHTML 1.0 Strict which also allows for iframes.

A solution

What I came up with was very simple, but may be considered a hack by some. Basically, I took the doctype declaration (DTD) of XHTML 1.0 Strict and added support for iframes. I found how iframes was supported in the transitional DTD and copied it to the Strict DTD. It allows for some attributes like width and height that the Strict DTD doesn’t, so I removed those and then added support for the allowtransparency attribute.

So to make iframes work on your own invalid XHTML 1.0 Strict page, just replace the doctype at the top of your pages with this new one:

<!DOCTYPE html SYSTEM "http://madskristensen.net/custom/xhtml1-iframe.dtd">

I suggest you download and host the DTD on your own server instead of using mine in case I forget to pay my hosting fee.

Check out the demo of XHTML 1.0 Strict with Iframe

A hack?

Some might say it’s a hack because by using this DTD the page is no longer XHTML 1.0 Strict. That is correct. It is now something new and different, but completely identical to XHTML 1.0 Strict with support for iframes. So it’s XHTML 1.0 Strict with Iframe.

XHTML have build in support for custom DTDs and thus this is completely supported and valid XHTML. If you don’t like using other doctypes than the few main ones created by the W3C then I have to ask why? What does it give you, your users or the quality of the page that this new one doesn’t?

In my book, it comes down to using a doctype that is based on known standards (XHTML 1.0 Strict in this case) so it still make sense to other devs when they read the markup. It’s also important that the DTD is strict (yep, this DTD is still strict), but most of all it’s important that the markup conforms correctly to the DTD so the entire page is valid. Remember, when using custom DTDs your page is still valid XHTML.

Note

I tried using XHTML 1.1 modules to build the DTD, but it never worked out for me. I got to the point where the iframe tag was valid, but not allowed in any other tags including body. I couldn’t seem to find a way to get full support for it. If you know how, please let me know.

Verify JavaScript syntax using C#

Mads Kristensen — Wed, 28 Oct 2009 17:10:00 -0500

In the past few days, I’ve worked on finding a way to do static code analysis on JavaScript files.The resaon is that I want to apply some sort of binary and source code checking like FxCop and StyleCop provides for C#.

There exist some tools for linting JavaScript like JavaScript Lint, but linting only checks syntax and not implementation. To do that I found the Jscript compiler build into the .NET Framework to be just what I wanted. It compiles JavaScript and reports if it finds any errors.

To test it out, I wrote a simple C# class that takes an array of JavaScript files to compile. I then called the class from a unit test, so I could make the test fail if the compiler finds any errors with the script files. The class contains a single public method called Compile and here is a simplified example on how to use it from any unit testing framework. You can download the class at the bottom of this post.

[Test]
public void JavascriptTest()
{
  string[] javascriptFiles = Directory.GetFiles(@"D:\Website", "*.js", 
    SearchOption.AllDirectories);
 
  using (JavaScriptCompiler compiler = new JavaScriptCompiler())
  {
    compiler.Compile(javascriptFiles);
    Assert.IsFalse(compiler.HasErrors, compiler.ErrorMessage);
  }
}

What’s nice is that by doing compile time checking of JavaScripts, I get that extra little security that’s so hard to get when developing JavaScript heavy websites. The Microsoft JScript compiler isn’t perfect, so I still recommend using a linting tool as well. The two approaches cover different scenarios. I hope to have a very simple implementation on using a linting tool soon.

Download

Remember to add a reference to Microsoft.JScript in your Visual Studio project before using this class.

JavaScriptCompiler.cs (2,48 kb)

Meta-tag bypasses IE8 checks

Mads Kristensen — Mon, 28 Sep 2009 13:22:00 -0500

Internet Explorer 8 introduced a new mechanism for ensuring backwards compatibility with websites built for IE7, so "the web" didn't break with IE8's more standards compliant rendering. You could tell IE8 to render your website as IE7 and therefore avoid having to fix potential problems with markup or stylesheets. You can do that in two different ways:

Using a meta-tag:
<meta http-equiv="X-UA-Compatible" content="IE=7" />

or this HTTP header:
X-UA-Compatible: IE=7

This puts IE8 into IE7 rendering mode. You can read more about how and why this was done and made into a standard at A List Apart.

The bonus feature

When IE8 renders a page, it looks for the meta tag or HTTP header in order to determine whether or not to render in regular standards mode or IE7 standards mode. So you would think that if you don't add the meta-tag or HTTP header, IE8 will just automatically render in IE8 standards mode, right?

According to this flow diagram on IE8 rendering, this isn't the case. If you don't specify any meta-tag or HTTP-header, IE8 will go through a lot of checks in order to determine how to render your webpage. You can very easily avoid the overhead and uncertainty by specifying to always use IE8 rendering mode. The diagram tells us to use the meta-tag to specify this directly:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

This meta-tag tells IE8 to skip directly to the DOCTYPE check by bypassing all other checks. If you can't add the meta-tag but can add an HTTP header, use this:

X-UA-Compatible: IE=8

The diagram tells us that the meta-tag is preferable over the HTTP header.

Always target the latest IE browser

Setting the X-UA-Compatible meta-tag/header to IE=8 only targets IE8 and no other browser. But what happens when IE9 ships? Microsoft has been clever enough to support the latest IE browser no matter what version might be. You can set X-UA-Compatible to IE=Edge and it will have effect on IE8 and all future IE versions. Keep in mind that upcoming beta releases and internal builds might not renders correctly, so use the IE=Edge at your own risk.

Button disappears

Another nice thing about directly specifying IE8 rendering mode is that the Compatibility View button disappears from the toolbar. Removing that choice might tell some visitors that what they are seeing is actually how you meant for your webpage to look.

This is one of those little features that gives you a little extra control without compromising anything. I see no reason not to use this on any IE8 standards compliant website today.

Scale in the browser

Mads Kristensen — Mon, 21 Sep 2009 14:17:00 -0500

Last week a colleague and I gave a talk about scalable architecture and where my colleague talked about databases and application layer scaling, I talked about scaling websites. More precisely, we talked about the upcoming ZYB/Vodafone project.

Since there’s still a lot of secrecy about the project, we managed to keep the concepts general. General or not, I’d like to share some thoughts on a different way of scaling websites.

Load balancing

Larger websites are often hosted on multiple web servers under a load balancer that distributes the requests evenly among the servers. This is an old technique for scaling out websites and has been widely used as the de facto scaling mechanism for years. It’s good, it works and it’s cheap. It’s cheap because web servers often don’t have to be the biggest machines in contrast to e.g. database servers.

So, a load balanced web server setup provides good and cheap scaling possibilities.

Reversed load balancing

Any website, load balanced or not, can also use the vast untapped resources in the visitor’s browsers. Think about it. Quad core CPU’s and 4GB memory is almost standard today – even on laptops. Why not utilize the machine power behind the browsers to do some of the scaling for us?

Traditionally, this is done using browser plug-ins like applets, Flash and Silverlight, but many more sites use JavaScript. Modern browsers process JavaScript very fast and efficient which makes it possible to use JavaScript for scaling purposes.

To utilize the browsers memory we can cache data in JavaScript so we can eliminate chatty communication with the web server. An example would be to load all the data needed behind the scenes after the page is loaded and store it in JavaScript variables. To utilize the CPU we can make calculations, dynamic rendering and other logic in JavaScript as well.

By pushing some of the load to the browser we are able to scale even more than just using regular load balancing.

It’s not for everyone

There are some problems with this approach that makes it a bad choice for some websites. If enough of the visitors are using old browsers like IE6 then they will get a worse experience because JavaScript runs too slow. There’s also the case where a website just doesn’t have any data to cache like a personal website.

For other types of websites it makes perfect sense. If your visitors have modern browsers and your website is heavily data driven, then it’s a possible candidate. The tests we have done at ZYB shows huge benefits by loading data behind the scenes - both the performance and scalability improves significantly. The load on the web servers dropped drastically with this technique. I hope to be able to show you some real numbers later.

Iframe cross domain JavaScript calls

Mads Kristensen — Tue, 25 Aug 2009 15:26:00 -0500

At ZYB we have been doing cross domain JavaScript calls for quite some time now. Whenever we tell that to people, many don’t believe it is possible with standard security settings in any modern browser. This surprised me a bit since it has always been possible with a simple little trick.

The problem

Say you have a website (site A) with an iframe wherein you host another website (site B). In old and unsecure browsers it was possible to do a JavaScript call from site B to site A like this:

window.parent.doSomething();

Here the doSomething function is living on site A and is called by site B through its parent window. For security reasons, this simple way of cross iframe communication was disabled years ago by all browser vendors.

The solution

There are different scenarios with possible solutions:

1: Site B is a sub domain under/beside Site A

Let’s say that:

Site A is located at example.com or sitea.example.com
Site B is located at siteb.example.com

All you need to do is to add this line of JavaScript to both site A and B:

document.domain = 'example.com'

That tells the browser that both site A and B belongs to the app located at example.com and are therefore allowed to communicate using JavaScript. It could be by calling window.parent.doSomething(); Now Same Origin Policy principle has been enabled on both sites.

2: Site B is on a different top domain than site A

This is more tricky, because we need to let the browser think both site A and B are under the same top domain. When it does, we can implement the trick from solution 1 above.

Let’s say that:

Site A is located at example.com or sitea.example.com
Site B is located at foobar.com

To make this work, you need to create a sub domain called e.g. siteb.example.com. Then point the new sub domain to the IP address of foobar.com. Now both site A and B is located under example.com and you can start to implement solution 1.

There is no security risk going on here because you can only implement solution 1 if both site A and B participate in the trick.

Off topic: The grand plan for 2009 follow up

Mads Kristensen — Mon, 27 Jul 2009 17:29:00 -0500

Back in March, I wrote about my grand plan for 2009 – my new year’s resolution. The plan was simple. I had to visit 12 different countries in 2009, preferably 12 countries I’d never visited before. Now, half way through the year it’s time to do status on the progress.

January

A business trip to Düsseldorf, Germany kicked off the plan. Beautiful city with very nice restaurants, bars and more Porche’s, Mercedes’ and BMW’s I’ve ever seen in one place.

February

Another business trip, this time to rainy London. Also, later the same month I went to Chişinău, the capital of Moldova. This is by far the most interesting place I’ve ever visited and I have a feeling that I might be the first tourist in that country. I can highly recommend visiting Moldova and I will definitely go back in maybe 5 years time.

March

Went to the MVP Summit in Seattle. It was my first time in the state of Washington, but my 5th trip to USA and my 14th state. It rained, but it didn’t change the fact that Seattle is a very nice city with very nice and outgoing people.

April

Malaga, Spain was the starting point of my Easter holiday. From there we drove to Gibraltar to see the wild monkeys and beautiful views and of course the new casino. You can actually see Morocco from there across the Mediterranean Sea. Then drove to Sevilla before returning home.

May

Visiting a friend in Stirling, Scotland, the home of William Wallace aka Mel Gibson in Braveheart. Drove around Loch Lomond and tried some excellent whisky along the way – I wasn’t driving. I then took a flight from Scotland to Düsseldorf to revisit the Vodafone mother ship before returning home.

June

Back in March I asked around the office if anyone wanted to join me on a trip to Amsterdam, Holland. 9 colleagues said “yes, please”, so off we went to one of the more fun places I’ve ever visited for reasons I will not share with you or anyone else. If you’ve been there you know why. If you haven’t been there, go before it’s too late.

June/July

I’ve been very busy at work and by travelling, so for the summer holiday I just wanted to relax by a pool somewhere warm. I did that on Corfu – a Greek island off of the Albanian coast. The only energy spent on that trip was getting into a cap to the ferry leaving for Sarande, Albania.

That concludes the first half of my grand plan. Next up is:

August: Fringe Festival in Edinburgh, Scotland and a trip to Boston
September: Weekend in Monaco to win big on the casinos
October: 11 days roundtrip to Iran

After that it’s either India with the family in November or Malta for Christmas. If the rest of the year turns out as stated here, then the grand plan succeeds. This grand plan also carries some of the blame for me not blogging much anymore.

Get last-modified header from response in ASP.NET

Mads Kristensen — Thu, 21 May 2009 12:30:00 -0500

I’ve been working lately with some ASP.NET performance optimization automation HTTP modules. In one of them I needed to know if the last-modified header had been set through the Response.Cache.SetLastModified(DateTime) method. For some reason, there is no API available anywhere within the BCL to retrieve the last modified date of a response – you can only set it.

Since the module wouldn’t work without a way to read the last modified date of the response, I had to use Reflector to figure out how to pull the information out using reflection. The result became a simple little method to retrieve the date. It looks like this:

private static DateTime ReadLastModifiedFromResponse(HttpCachePolicy cache)
{
  BindingFlags flags = BindingFlags.NonPublic | BindingFlags.GetField | BindingFlags.Instance;
  return (DateTime)cache.GetType().GetField("_utcLastModified", flags).GetValue(cache);
}

And you can use it like this:

DateTime responseModified = ReadLastModifiedFromResponse(Response.Cache);
 
if (responseModified > DateTime.MinValue)
{
  // Last-modified is set. Do something...
}

If you know of another way to retrieving the last-modified date, please let me know.

ASP.NET developer categories

Mads Kristensen — Sun, 19 Apr 2009 15:51:43 -0500

In the past 6 months I’ve been involved in hiring a lot of ASP.NET developers. It was very interesting to learn just how different skill sets ASP.NET developers have. It also made it more and more clear that every developer we talked to would fit into one of three categories:

The web developer
The developer who build websites
The ASP.NET super hero

Before looking deeper into the different categories I recommend you too check out how I define the ASP.NET framework

The developer categories

With the ASP.NET definition in place it is now easier to look at the different categories of ASP.NET developers we have interviewed.

The web developer

Not many ASP.NET developers fall into this category. It’s usually the ones that come from classic ASP or PHP and made the switch to ASP.NET later on. They know everything about browser compatibility, JavaScript, CSS and the request life cycle. Also, they are usually not that hardcore in C# because they have mostly worked with client technologies. They are also more agnostic to the server-side platform and can work on PHP and RoR projects just as efficiently.

The web developer is also the kind of guy who thinks about new web technologies such as microformats and OpenID. This guy lives and breathes web.

The developer who builds websites

This is by far the biggest category. We’ve interviewed many developers who have worked with ASP.NET since it was first released. They have worked with everything from the database, data- and business logic, web services and ASP.NET. Most of them don’t care much for browser capabilities or JavaScript but they are hardcore C# developers. They have built many ASP.NET sites, but they are far from experts on the framework and stuff like modules and handlers are not where they have spent most of their time to say the least.

Their knowledge of the .NET framework, BCL and C# is immense, but they don’t qualify as web developers. They don’t live and breathe web, but their skills are just as needed in an ASP.NET project.

Take a web developer and a developer who build websites and put them in a room at the Romance Inn and wait 9 months. Then you get:

The ASP.NET super hero

This breed of developers is very difficult to get your hands on. They are a special race of individuals who know all about the ASP.NET framework and client-side technologies and are just as proficient in the more hardcore C# disciplines as well. ASP.NET is a very broad and diverse area because it is the point where the BCL, C#, XHTML, CSS, JavaScript, dependency injection, unit testing, mocking, AJAX etc. all come together in one project. To master all these disciplines takes an ASP.NET super hero.

The web developer and the developer who builds websites are both very important to a successful execution of a website project, but at least one ASP.NET super hero is essential in my opinion.

ASP.NET is a database framework

Mads Kristensen — Sun, 19 Apr 2009 15:34:29 -0500

I have a very clear view on what ASP.NET is and what it isn’t. I’ve never given it much thought until recently when I learned that my view was different from a lot of other ASP.NET developers’. It started at an ASP.NET session at the MVP summit where a presenter asked whether or not people in the audience used the Entity Framework or Linq2Sql. I thought to myself that data access had absolutely nothing to do with ASP.NET but found to my surprise I was the only one finding it a weird question at an ASP.NET session.

Since that session I started talking to people about this and almost everyone told me that a website without some sort of database is a thing of the past and that being an ASP.NET developer involved mastering databases, data access and business logic. I don’t disagree that mastering these disciplines is a huge part of being a .NET developer, but I still refused that it had anything to do with ASP.NET. Yes, I’m that anal.

The field trip

So, I went to Barnes & Noble to find some ASP.NET books. They had 8 different titles and I started to look at the table of contents in all of them. 7 out of the 8 ASP.NET books had minimum one chapter about databases and data access. I looked at the covers again and was reassured that I was indeed skimming ASP.NET books. Not data access books, but ASP.NET books.

What I have learned in the past few months is that databases and data access is part of ASP.NET. Or in other words, ASP.NET is a database presentation framework and NOT a web application framework. Not acceptable!

Here is my view on what ASP.NET is and what it isn’t.

My clear view of ASP.NET

ASP.NET is a framework for creating dynamic websites. It is not a framework for doing data access, business logic or any other thing besides building websites. If your business logic knows it is being used by an ASP.NET project by relying on an HttpContext for instance, then you are doing something wrong. Business logic is an API for what ever (presentation) logic that sits on top of it whether it being ASP.NET, WinForms, WCF or something completely different. This is a rule of the N-tier application architecture.

Smaller web projects often have the business- and data logic classes in the App_Code folder within the web project itself. Those classes are physically part of the web project but logically they are separate from the ASP.NET logic and as such the same 3-tier architecture applies. But it is still not ASP.NET, it is just C# classes that physically lives inside the web project in Visual Studio.

ASP.NET handles everything related to browser/server interactions and nothing more. Calling the database directly from your code-behind or controller action doesn’t make ADO.NET part of the ASP.NET framework. The presence of the BCL in both ASP.NET and the business logic makes it less transparent, but I hope you see my point.

Even though the data- and business logic aspects are both related and important to ASP.NET developers, they are still not ASP.NET.

This is my clear view on the ~~ASP.NET~~ database presentation framework.

.NET slave

Use Google's Closure Compiler in C#

The code

How to use it

Download

Use iframes with XHTML 1.0 Strict

A solution

A hack?

Note

Verify JavaScript syntax using C#

Download

Meta-tag bypasses IE8 checks

The bonus feature

Always target the latest IE browser

Button disappears

Scale in the browser

Load balancing

Reversed load balancing

It’s not for everyone

Iframe cross domain JavaScript calls

The problem

The solution

1: Site B is a sub domain under/beside Site A

2: Site B is on a different top domain than site A

Other solutions

Off topic: The grand plan for 2009 follow up

January

February

March

April

May

June

June/July

Get last-modified header from response in ASP.NET

ASP.NET developer categories

The developer categories

The web developer

The developer who builds websites

The ASP.NET super hero

ASP.NET is a database framework

The field trip

My clear view of ASP.NET