rickardnilsson.net is a weblog and the online home of web developer and father of three, Rickard Nilsson... More
Rickard blogs about creating software solutions using ASP.NET and agile practices.
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"?>
<root>
<output path="outputfile.js">
<input path="inputfile1.js"/>
<input path="inputfile2.js"/>
<!-… ->
</output>
</root>
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:
In the following example I will show how easy it is to isolate your client code from ASP.NET code, using the Moles Isolation Framework, in order to test that your code performs as intended.
The example should not be seen as an encouragement to use bad design. On the contrary, I urge you to use Moles to get that ugly, old legacy code you’ve got, and put it under test such that you will have the freedom to rip it apart and improve it.
Now Moles will generate an assembly with mocks and stubs of the target assembly (System.Web) and add it to the test project. Your references should look like this:
Now you are ready to start writing tests. First we take a look at our sample application. It is a simple ASPX-page which calls Server.MapPath() in the Page_Load method:
public partial class ServerUsageExamplePage : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { //... Server.MapPath("...");
//... } }
In our unit test we want to be able to replace the call to Server.MapPath() such that
The following test method will fake the call to Server.MapPath() and assert that it was actually called by the method under test:
[TestMethod] [HostType("Moles")] public void MapPath_WhenCalledWithProperContext_ShouldInvokeServerMethod() { // Arrange var mapPathWasCalled = false; MHttpContext.CurrentGet = () => new MHttpContext { ServerGet = () => new MHttpServerUtility { MapPathString = path => { mapPathWasCalled = true; return string.Empty; } } };
// Act var page= new ServerUsageExamplePage(); page.Page_Load(this, EventArgs.Empty);
// Assert Assert.IsTrue(mapPathWasCalled); }
To accomplish this we need to understand what is going on. “Server” is an instance property on the System.Web.UI.Page class which eventually will invoke the HttpContext.Current.Server property. Thus, to fake the method call we need to fake several things:
Finally, to be able to execute the method under test (Page_Load), we need to change its accessibility from protected to public.
I've shown how easy it is to get started covering your ASP.NET codebehinds with unit tests utilizing Moles Isolation Framework. Please leave feedback and any questions you might have. Good luck testing!
Have you ever come across the concept of a Code Kata?
For me it really took off after reading blog posts (1, 2, 3) by Unce Bob Martin and Pragmatic Programmer Dave Thomas. The concept is really simple: how can we, as programmers, better our selves and improve our techniques and proficiency in using the tools and processes in our every day work?
The suggested solution is inspired by the martial arts kata. You learn how to implement a solution to a specific problem and you practice all the moves in the exact same order over and over again. The point is that you should know the moves so well that you forget about them and focus on improving your key strokes and the use of your tool set. The never ending goal is to perform the kata with the least amount of key strokes.
The promise is that practicing these kata's often and regularly makes you a better and more productive programmer in that you are trained to act instinctively in certain reoccurring situations.
Anyway, I've been practicing a kata based on a problem initiated by Roy Osherove and I decied to record it to get some feedback and maybe spread some knowledge on how I practice Test-driven development using ReSharper.
Calculator Code Kata Cast 1 from Rickard Nilsson on Vimeo.
Have you ever wanted to rename a namespace but you have too many classes in the namespace that it would be an infeasible hassle changing all of them individually. Even using a tool like ReSharper to refactor the namespaces class by class is a hassle. I'm gonna show how to rename a namespace for all of its classes in a couple of key strokes using ReSharper.
Update! Alternate context menu option to rename namespaces. Tested with ReSharper 5.1.
and you're done!
Please leave a comment if you found this useful.
* Visual Studio scheme
I've been using Jetbrains ReSharper a while now and I love it. I can't even imagine going back to plain Visual Studio anymore because there are so many things in my daily work that involves ReSharper, even simple tasks like editing source code and navigating through code and source files, let alone creating files and running unit tests.
Now I want to share a user tip I found that isn't obvious to find nor part of any context menu. It's actually a refactoring and I call it Magical strings to variable. You can use it when you end up with multiple equal string literals in a piece of code. You would probably want to gather all of the string literals in a variable and reuse it through out the code. You can use ReSharper to do it for you in a couple of key strokes.
[Test] public void ParentPresenter_Update_should_update_view() { var model = new User { Name = "foo" };
using (mockery.Record()) { Expect.Call(parentView.Username = "foo"); }
using (mockery.Playback()) { IParentPresenter presenter = new ParentPresenter(parentView) { Model = model }; presenter.Update(); Assert.That(presenter.Model.Name, Is.EqualTo("foo")); } }
[Test] public void ParentPresenter_Update_should_update_view() { var name = "foo"; var model = new User { Name = name };
using (mockery.Record()) { Expect.Call(parentView.Username = name); }
using (mockery.Playback()) { IParentPresenter presenter = new ParentPresenter(parentView) {Model = model}; presenter.Update(); Assert.That(presenter.Model.Name, Is.EqualTo(name)); } }
1. Highlight one of the string literals
2. Press Ctrl+R, V (Ctrl+Alt+V)* to introduce a variable
3. Select to replace all occurrences (default option)
4. Pick a name for the variable
..and you're done! Please leave a comment if you find this usefull.
* Visual Studio scheme (ReSharper 2.x / IDEA scheme)