Why MiniMe?

For a while I have been using SquishIt to minify, bundle and version JavaScript and CSS files – and to a large extent it did a good job. However on a number of occations I ran into a group of scenarios where it just didn’t quite do enough for what I wanted. So when I was starting a new project and ran into the same issues again, I decided to take a look at making my own.

The basic idea behind MiniMe is that it should make it easy to bundle JavaScript and CSS files across masterpages, usercontrols etc. with the option to control how they are sorted, and end up with one file that is minified and versioned. It should also be easy to introduce into an existing project, with a minimal amount of refactoring, and lastly it should be easy to adhere to best practices and inject the script tag at the very bottom of the html page.

These are the requirements that I run into again and again, so I wanted a tool that did exactly that.

Getting started

To make it as easy as possible I made a nuget package, so all you need to get off the ground is to search for MiniMe in the package manager and hit install.

Building a complete file

Now you have access to the classes MiniJavaScriptBuilder and MiniStyleSheetBuilder, that can be used to build either a JavaScript or CSS file. The approach is similar, so from how on I will just show the JavaScript case. Using either one you can build a collection of files by calling Add or AddToRequest, which takes a path to the file you wish to add. The difference is that Add is local to the instance of the builder, where the ToRequest version is stored for the request across any number of builders. Both methods return the builder instance, so calls to Add/AddToRequest can be chained.

@{ new MiniMe.MiniJavaScriptBuilder()
    .AddToRequest(Url.Content("/scripts/myFirstScriptFile.js"))
    .AddToRequest(Url.Content("/scripts/mySecondScriptFile.js"), 1)         
    }

When using AddToRequest you can optionally pass an index as a second parameter. Files with a lower index are included before those with a higher index – allowing files that are added from usercontrols to run after those added in the masterpage.

Manually rendering a combined file

When all your files have been added you can call either Render or RenderForRequest, which will behave differently depending on if you have turned debug on in web.config or not. If you are in debugmode there is simply rendered a reference to each file, allowing you to debug like you are used to. If you are NOT in debugmode the files that were added will be combined and saved to the path you pass to the method. Writing a # as part of the path will enable versioning, so the # is replaced by a hashvalue of the filecontent. Versioning will make sure the filename changes when any of the files are changed, so caching does not prevent your users from getting any changes that you have made.

@{ MvcHtmlString.Create(new MiniMe.MiniJavaScriptBuilder()
.AddToRequest(Url.Content("/scripts/myFirstScriptFile.js"))
.AddToRequest(Url.Content("/scripts/mySecondScriptFile.js"), 1)
.RenderForRequest(Url.Content("~/Scripts/Site_#.min.js")))
}

Automatically injecting a combined file

Working with complex layouts can be a pain, because you have to take into account the order the usercontrols are rendered, and you will have duplication of code to render the files. To solve this MiniMe comes with an HttpHandler that will handle the rendering for you. This means that files that are added to the request, will be bundled, the combined JavaScript is referenced from the very bottom of the page and the Stylesheet is referenced from the header. All you have to do is add the HttpModule.

<system.webServer>
    <modules>
        <add name="MiniHttpModule" type="MiniMe.MiniHttpModule, MiniMe"/>

By default the HttpModule renderes the files to “/Scripts/Site_#.min.js” and “/Content/Site_#.css” – this can be overwritten using appSettings

<appSettings>
    <add key="MiniJsRelativePath" value="/Scripts/OtherSite_#.min.js"/>
    <add key="MiniCssRelativePath" value="/Content/OtherSite_#.min.css"/>

Create .min.js versions of all JavaScript files

In some cases you might want to have MiniMe generate .min.js versions for any files that have not yet been minified. This will also give you a slight performance boost, because MiniMe will not have to do the minification on the fly when files are combined. It is important to note that MiniMe will only make minified versions when no minified version already exist. Personally my preference is to do it when not running in debugmode, because then I won’t have to delete the minified versions when I make chances, in order for MiniMe to generate new ones.

if (!HttpContext.Current.IsDebuggingEnabled) new MiniGenerator().EnsureMiniVersions("/Scripts");

Go to the source to gain more insight or contribute

MiniMe is hosted on bitbucket, so if you wish to see how it works, or if you want to contribute please don’t hesitate. The first version was focused around the features I felt were missing, but there are undoubtedly other scenarios that can provide value.

Over the last couple of weeks I have been looking at quite a few new frameworks, tools and plugins. My focus area has mainly revolved around an app that I will be building that needs to pop and therefore it will make pretty heavy use of javascript and css - and of course by extention jQuery.

First of all dotLessCss deserves a mention, even though its actually not one things I looked at now. Basically it allows you to do some of the stuff you probably miss when working with css. Variables, mixins and nesting really helpes reduce all the repetitiveness. SquishIt is a little library I read about a while ago. It makes bundeling and minimizing javascript and css files as easy as can be. On top of that it also makes sure the files get versioned, so you won't run into users running on an old cached version.

In the category nice jQuery plugins I have looked at quite a few things. jQuery cookie addin makes it a no brainer to work with cookies. Watching a video from NDC I learned that newer browsers now support other ways of saving data on the client called sessionStorage and localStorage. As always the problem is compatibility, but there is a shim to fix this for IE6 and IE7, which are the main culprits.

I also looked at a few flashy jQuery addins, and FancyBox and Cycle solve a few of the things designers crave these days while being super simple to implement. Now that we are in the design department Cufón helpes you do font replacement easily, so you can use cool non websafe fonts.

Video is an area where there are quite a few options available, and it is becomming a jungle figure out which players support which formats and run in which browsers. Video for everybody is a simple way to implement videos in a way that will work across all the popular browsers. The idea is to use the html 5 video tag and then default to others where it is not supported. If being crossbrowser is not quite that important but designing the player is Silverlight has some great optios as well as flowplayer. Both are also easy to work with from javascript almost as straight foreward as the html 5 player API.

Lastly I saw a tweet about TopShelf and decided to try it out. Safe to say, I'll probably use it everytime I need to write a Windows Service from now on. It makes it just a little easier, and allows you to run your app either in a console or as a windows service.

A little while ago I read about a nice little library called .less, which is a port from ruby less, that lets you write css, but with the added features of enabeling variables, operations, mixins and nesting. Today I decided to try it out, and I definately want to give it my recommendation.

Using variables makes stylesheets a lot more maintainable because it allows you to avoid having colorcodes scattered all around the stylesheet simply by writing:

@listbackground_color: #E3EFFF;

Nesting just makes it more maintainable and gives the stylesheet a better sence of structure like this:

table.MapsList
{
  background-color: @listbackground_color;       
  tr th
  {
    width: 300px;
    background-color: @listbackgroundheader_color;
  }
}

Finally mixins makes it possible to keep the stylesheets more DRY (don't repeat yourself) like so:

.rightBackground { background-repeat:no-repeat;background-position:right; }
th.headerSortUp { .rightBackground; background-image: url(desc.gif); }
th.headerSortDown { .rightBackground; background-image: url(asc.gif); }

An added bonus is that you can toggle caching and minimizing from your web.config.