Rickard Nilsson is a software architect, developer, craftsman, agile enthusiast, and father of three... More
Rickard blogs about crafting software using .NET tooling and solid, development practices.
In a previous post I described the importance of optimizing your web site resources and how you can do it using the open source tool Ajax Minifier. I’ve received a few questions about how to automate this process and now I want to share a ASP.NET MVC 3 template with the combining and minification built in as a post compile step.
Since my last post Ajax Minifier is now available as a NuGet package and is easily installed in your solution either via NuGet Package Manager or using the NuGet Package Manager Console command:
PM> Install-Package AjaxMin
However, to get the AjaxMin.exe you’ll have to download it manually from Codeplex. My MVC 3 template is build on a simple Internet Application MVC 3 template with Razor and HTML5 semantic markup. My additions to automate resource optimizations consists of the following:
After the web project is built a custom target is called:
<Import Project="$(MSBuildProjectDirectory)\AfterBuild.tasks" />
<Target Name="AfterBuild">
<CallTarget Targets="Minify"></CallTarget>
</Target>
The after build target executes the AjaxMin executable:
<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<PropertyGroup>
<BuildLibPath>$(MSBuildProjectDirectory)\..\packages</BuildLibPath>
<Ajaxmin>$(BuildLibPath)\AjaxMin.4.62.4618.15628\bin\Ajaxmin.exe</Ajaxmin>
</PropertyGroup>
<Target Name="Minify">
<Exec Command='"$(Ajaxmin)" -js -xml minify.js.xml -clobber' Condition="'$(Configuration)' == 'Release'" />
<Exec Command='"$(Ajaxmin) -css -xml minify.css.xml -clobber' Condition="'$(Configuration)' == 'Release'" />
</Project>
The xml files minify.js.xml and minify.css.xml are used to define which resources should be merged together, minified and where to output the result.
<root>
<output path="Scripts/Mvc3Application.min.js">
<input path="Scripts/myplugin.js"/>
<input path="Scripts/viewModel.js"/>
<input path="Scripts/foobar.js"/>
</output>
</root>
Download ASP.NET MVC 3 Template
Target: .NET 4.0
It has been almost three years since I wrote my top ranking post on this blog: Applying stylesheets dynamically with jQuery. It was a quick and dirty example of a testing scenario pulled together for a colleague but it has become my number one linked post. It is still the post that gets the most hits every month because it is the first hit on Google for jquery add stylesheet which seems to be a lot of people has trouble with.
So, I felt it was time to do another post on the subject considering I’ve been using jQuery more or less every day these last three years.
I’ve created a simple jQuery plugin for adding or switching out stylesheets dynamically and interactively and it can be used like this:
<ul>
<li><a href="#" rel="1.css">Apply Stylesheet 1</a></li>
<li><a href="#" rel="2.css">Apply Stylesheet 2</a></li>
<li><a href="#" rel="3.css">Apply Stylesheet 3</a></li>
</ul>
$('a').click(function () {
$.stylesheets.clear().add($(this).attr('rel'));
return false;
});
$.stylesheets = (function () {
var stylesheets,
add,
clear;
add = function (cssfile) {
$('head').append('<link href="' + cssfile + '" rel="stylesheet" />');
return stylesheets;
};
clear = function () {
$('head link[rel=stylesheet]').remove();
return stylesheets = {
add: add,
clear: clear
} ());
Download source / demo
Update! Download ASP.NET MVC 3 Template with built in JavaScript and CSS merging and minification
Why should you bother with combing and minifying JavaScript and CSS files? If you are a web developer working with sites with any significant traffic, you simply should because of the impact it will have on the load time of your site and how your visitors will perceive the page loading faster.
In the field of web site optimization, pioneered by Yahoo, there are many rules or guidelines which you should try to follow in hunt for milliseconds on the client side. In fact, it’s on the client that you will get the most value for your optimization work rather than on the server side [SOUDERS]. This is a subset of the rules regarding JavaScript and CSS.
I have searched for a tool that could help me implement many of the optimization guidelines and found a few worth taking a closer look at, one of these is the Google Closure Compiler. It has loads of features including file combining, minification, “compiling” your JavaScript into better JavaScript, as well as an API for loading your scripts asynchronously.
However, being a pragmatic .NET developer, I chose the most easily accessible tool available for me, which is Microsoft’s Ajax Minifier. It’s a free tool available on Codeplex and documentation is provided on the www.asp.net site.
Ajax Minifier comes as a command-line application and after you have installed it you can use it through it’s own command prompt.
Minifying a single JavaScript file is pretty straight forward. Simply type in the command prompt:
then add –clobber if you wish to override the outputfile.js if it exists, as in:
Minifying a single CSS file is equally simplistic as follows:
As before, add –clobber to override any existing output file.
Unfortunately there are no documentation on the asp.net site about how to combine multiple files into one, however, the ajaxmin command itself provides a hint given the /? parameter:
As an alternative to the input file parameter you can use the –xml parameter and supplying it with the path to an xml file of the following format:
<?xml version="1.0" encoding="utf-8"?>
<output path="outputfile.js">
<input path="inputfile1.js"/>
<input path="inputfile2.js"/>
<!-… ->
The Ajax Minifier will combine all of your input files into one, minify it, and produce the result in the output file. Using this approach you can also control in what order the files are loaded into the page and sort out any dependency issues, just as you would, had you listed includes in the regular html file (or .master or whatever).
The Ajax Minifier does not seem to have the smarts to deduce that this is JavaScript files so you need to supply it with a –js parameter like so:
I haven’t found a way to combine JavaScript and CSS in the same xml file so you need to make a separate file for you CSS files with the same format as above and instead of the –js parameter, use the –css dito:
BlogEngine.NET has a widget framework from version 1.4 which are web part like components that can be added and removed, configured and dragged around directly in the page. Simple widgets are very easy to create and plug in to your blog and there are several blog posts explaining how to do that. In this post I'm gonna go through a more advanced example featuring Web services and Ajax.
The Photo Album Widget
Download: PhotoAlbumWidget-0.1.zip (7,96 kb) Unzip to ~/widget/ folder. Requires jQuery library.
First we start with some requirements for the widget we're creating.
The list above is a prioritized backlog and the first version should include items 1 - 4.
We start off with number one, a BlogEngine Widget. To create a widget we add a new folder to the /widget/ folder and we call it PhotoAlbum. Then we create two user controls, one for widget presentation and one for configuration UI. They must be named, by convention, widget.ascx and edit.ascx respectively and should derive from WidgetBase and WidgetEditBase respectively. See more on basic widgetry here by Rtur and here by Mads as well as this, that and whatnot.
That was the easy part.
With the next requirement we first need to get the pictures from somewhere so we skip to the next requirement. Picasa is Google's web album and it has its own REST API as well as a .NET client library. Conveniently there is also a public feed which contains all public photos uploaded to Picasa. (You can of course use your own Picasa album, see the Data API docs for more information). All we need to do is provide a query tag/tags to limit the search or we'll get an error message. The following code retrieves a couple of photos picturing cats:
PicasaService service = new PicasaService("exampleCo-exampleApp-1"); PhotoQuery query = new PhotoQuery("http://picasaweb.google.com/data/feed/api/all"); query.Query = "cat"; query.NumberToRetrieve = 5; PicasaFeed feed = service.Query(query);
foreach (PicasaEntry entry in feed.Entries) { string firstThumbUrl = entry.Media.Thumbnails[0].Attributes["url"] as string; writer.Write("<img src=\"{0}\" alt=\"{1}\" />", firstThumbUrl, entry.Title.Text); }
If we drop the code above into the widget.ascx.cs we affectivally fullfills both requirements 2 and 3 so lets get on with number 4.
Requirement number four implies the Incremental Page Display pattern where the main part of the page is shown quickly and portions of the page that takes longer to load are fetched and displayed asynchronously. To give the user feedback of the loading we place an animated gif image in the widget which is later swapped out when the real pictures arrive. To accomplish this we're using the jQuery JavaScript library which let us get away with very little code for pretty advanced stuff.
First we need to do a little refactoring since the widget needs to do an asynchronous call somewhere to get its content, i.e. the pictures to display. We're gonna go with the simplest possible solution here, just enough to satisfy the requirement. The simplest thing from the widget's point of view is to have the html containing a number of <img> elements returned from the call. Then it's very simple to insert the html into the widget using jQuery. Given that the widget contains a div with the id "photoalbum" this is all it takes:
$("#photoalbum").html(the_html_to_insert);
As it is now, the widget codebehind is rendering the requested html and this is not god. We need to move the code to some place which we can make a http request to and get the html in response. This can be done with a regular aspx page. All we need to do is to put a simple Repeater control on a page and bind it to a list of image URLs which we get from Picasa web album. So, we add a new aspx page to the /widgets/Photo Album/ folder and call it PhotoService.aspx. All we want in response is the <img> tags which should be inserted into the widget so we clear the page from html and put a single Repeater on it like this:
<asp:Repeater ID="pictureRepeater" runat="server"> <ItemTemplate> <asp:Image ID="image" runat="server" ImageUrl="<%# Container.DataItem.ToString() %>" /> </ItemTemplate> </asp:Repeater>
In the codebehind we insert something like before and makes sure we bind to the Repeater control.
// Error checking is omitted for clarity List<string> pictures = new List<string>(); PicasaService service = new PicasaService("exampleCo-testApp-1");
string picasaUri = "http://picasaweb.google.com/data/feed/api/all"; PhotoQuery query = new PhotoQuery(picasaUri); query.Query = "cat"; query.NumberToRetrieve = 6; PicasaFeed feed = service.Query(query);
foreach (PicasaEntry entry in feed.Entries) { string firstThumbUrl = entry.Media.Thumbnails[0] .Attributes["url"] as string; pictures.Add(firstThumbUrl); }
pictureRepeater.DataSource = pictures; pictureRepeater.DataBind();
To test the service we point a web browser to /widgets/Photo Album/PhotoService.aspx which should show a bunch of cats! Everything looks good and all we need to do to get the pictures into the widget are two things. First we need to register the jQuery JavaScript file, either localy or a referer to the jQuery official site. Last we need to add some custom JavaScript that makes the Ajax call and puts the html at the right place.
JavaScript blocks should allways, if possible, be placed as close to the </body> tag as possible. The reason is that the browser won't continue to load the remainder of the page when it hits a JavaScript block but rather wait until it is fully loaded. This is not a problem if we're dealing with short scripts but the jQuery library is relatively large in this context so we need to put it as far down the page as possible. Our own script that does the actual work depends on jQuery, thus it must be loaded last. The problem is that we need to do this in a User control in the middle of the page. To our help to solve this we have the ClientScriptManager that every aspx page has. With the method RegisterStartupScript we get to insert arbitrary scripts just before the </form> tag (which is close enough) of the surrounding page. We make the registrations when the widget is loaded, i.e. in the LoadWidget() method.
With this final step done we have our first version of the Photo Album Widget which is ready for demo.
Before the second iteration I'd like to summarize a couple of things with version one that are not of production quality.
Update follow up: jQuery plugin for switching stylesheets
A colleague of mine asked me how to apply a stylesheet to a web page dynamically using jQuery and I had never done such a thing but my first thought was that is must be pretty simple. I've spent a lot of time thinking of so many things other than web et. al. so it was nice to delve into some of that stuff again. Check out the live demo
As we know stylesheets are defined in the head section of an html file like this
<html>
<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
...
</html>
Now, say that we want to apply another stylesheet dynamically after the fact, so to speak, triggered by some event. This could be a button click or some other arbitrary event that is triggered. So, what we want to do is simply insert a new <link/> element into the head section of the page DOM. This can be done in a couple of lines of jQuery:
$(document).ready(function () {
$("a").click(function () {
$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
The key is at what time we add the link to the style sheet. The first line in the code above repeated here asserts that the DOM is ready for manipulation.
//...
The second part repeated here adds a click event to all hyperlinks in the page.
$("a").click(function() { //...
And the very task is performed by the last piece of code where the head element is appended with a new link element.
I thought that I should do a post about the JavaScript resources I've found most useful. There are an endless amount of JavaScript resources out there and and there is only so much time you can spend going through them to find what you need. This is my attempt at gathering some of the best I know. So here goes.
This list became long enough so I will do another post on Ajax resources later on.
What have I missed?