For Modernizr, Don’t Stop with NuGet

March 25, 2012 · 2 min read

The ASP.NET MVC template drops a copy of Modernizr 1.7 in your project automatically, and if you check for NuGet updates the library is brought up to the current version - 2.5.3.

The NuGet package is a a great way to introduce developers to Modernizr and makes checks for updates easy.  But when adding Modernizr to your projects consider two alternatives:

Alternative One – Content Delivery Network:

Microsoft CDN currently hosts two Modernizr versions – 1.7 and 2.0.6.  By using a CDN copy you increase the chance that your customers will already have a browser-cached version of the library. 

There are some negatives to this approach though.  MS is not hosting the newest version of the library (2.5.3), and despite the fact that Microsoft has a highly reliable CDN the potential for outage will always be higher when your site relies on multiple web sites. 

You can help resolve this last issue by using the pattern that HTML5Boilerplate employs to load jQuery: start by loading the CDN version, but use a local copy if the CDN load failed:

<script src="//ajax.aspnetcdn.com/ajax/modernizr/modernizr-1.7-development-only.js"></script> <script>window.Modernizr || document.write('<script src="Scripts/modernizr-1.7.js"><\/script>')</script>

Alternative Two:

The recommended approach, particularly for production sites, is to use the Modernizr Download Page (http://www.modernizr.com/download/).  This page lets you create a custom Modernizr JS file that only includes those tests that you require for your site.  It also lets you add YepNope calls for dynamic loading of JavaScript libraries – an option that isn’t available in your default NuGet MVC package.  You get all of this and a smaller file that reduces load and JS prep time.

There are potential caching benefits with the CDN route, but the Modernizr team has gone out of their way to endorse the customized download option (http://www.modernizr.com/news/modernizr-and-cdns).

For instance if you create a custom download of Modernizr including the first 5 HTML checks with HTML5shiv and the “add CSS” function the file is 4144 characters.  By comparison the default Modernizr 2.5.3 NuGet file is 49,397 characters.

ModernizrDownload

This article is part of the GWB Archives. Original Author: Steve Albers

New on Geeks with Blogs

  • We Won The One Award I Actually Care About

    Full Scale made the Inc. 5000 for the fifth year straight, the 12th listing across my three companies. Here is why the one award you cannot buy is worth stopping for.

  • Your Customers Build the Features Now

    I let a tool I liked sit dead for a year rather than build the features I wanted. An MCP server meant I never had to, and your customers can do the same to your product.

  • Get the Size of a Directory in Linux the Easy Way

    du -sh for the quick answer, ncdu for the cleanup, df for the disk itself: every command for checking directory size in Linux, plus why du and df never agree.

  • Vim Search and Replace: The Ultimate Guide

    One :%s command replaces every match in a file before a find dialog would even open. The Vim substitute patterns worth the muscle memory: flags, ranges, capture groups, and multi-file edits.