Code

Today I wanted to add some screenshots to a GitHub readme for the sake of documenting. While this wasn’t particularly hard, I do had to iterate a few times before I got it right. Hosting the images You could simply add the images to your repository and reference them using the raw url’s, but this isn’t very efficient. Using this method, every request needs to go through GitHub’s application layer. It’s far better to make use of GitHub Pages, a feature purely designed to publish web content. I also like how you’re not polluting the repository this way. ...

I have been experimenting with the HTML5 offline application cache some more over the last few days, doing boundary tests in an attempt to learn more about browser behaviour in edge cases. One of these experiments was testing the cache quota. Two weeks ago, I blogged about generating and serving an offline application manifest using ASP.NET MVC. I reused that code to add hundreds of 7MB PDF files to the cache. public ActionResult Manifest() { var cacheResources = new List<string>(); var n = 300; // Play with this number for (var i = 0; i < n; i++) cacheResources.Add("Content/" + Url.Content("book.pdf?" + i)); var manifestResult = new ManifestResult("1") { NetworkResources = new string[] { "*" }, CacheResources = cacheResources }; return manifestResult; } I initially tried adding 1000 PDF files to the cache, but this threw an error: Chrome failed to commit the new cache to the storage, because the quota would be exceeded. ...

Recently I prototyped a mobile web application using ASP.NET MVC, jQuery Mobile and some HTML5 features. One of the key goals was to find out how far you can push a web ‘application’ until the browser starts getting in the way. Working disconnected is one of these things that appear to be a major showstopper at first. However - to my surprise honestly - the HTML5 Offline Web applications API seems to be widely implemented across modern browsers already. Not of all of them though. Looking into the specifics, the API itself is fairly straightforward. At his core, you will find the manifest file, which dictates which files should be cached by the browser. The API provides other useful events and methods for inspecting the status of the cache and swapping the cache for a newer version, but they are out of scope today. A useful resource to read up on the full API can be found here, and a working example implementation can be found here. ...

One of the new wildly evangelized features of ASP.NET MVC4 is the built-in support for bundling and minification of scripts and stylesheets. I don’t see any reason why this new feature wouldn’t work for ASP.NET MVC3 though. If you open the packages config of an ASP.NET MVC4 beta project, you will find that bundling support lives in the Microsoft.Web.Optimization package. <package id="Microsoft.Web.Optimization" version="1.0.0-beta" /> So we should just be able to install this package for an ASP.NET MVC3 project. To install the package, run following command. Pay attention to the -Pre switch. ...

While your Dependency Injection bootstrappers - being responsible for gluing your application together - are a vital part of your application, they are seldom put under test. I don’t see any reason why they shouldn’t be though. The cost of these tests is negligible, definitely if you compare it to the cost of the often catastrophical outcome of bugs in your bootstrappers. I encourage you to take a look at the commit history of your DI bootstrappers; I bet they change a lot. Wouldn’t it be nice to have a set of tests that proves that the dependency container still behaves like you expect it to at runtime? Next to proving correctness, I think writing these tests also helps you discover various behaviours of your DI container, which is a valuable investment in itself. ...

Something I hadn’t noticed until recently is that Wikipedia tries to use the browser’s native SVG support to render certain images. For example, if you search for a high resolution image of your country’s flag, you will probably end up viewing an SVG. Wikipedia also offers downloads to the image rendered as a PNG though. Next to being able to scale to an arbitrary size without suffering data loss, the SVG data format allows images to be far more compact. Basically, SVG is just XML, which also means it can be easily compressed to make its size even smaller. For example, this is the (uncompressed) SVG for the flag of the Kingdom of Belgium. ...

This weekend I prototyped an idea I had earlier this week: autocorrecting unknown actions in ASP.NET MVC. Handling unknown actions To give you an example, let’s say I have a Home controller with an action named Kitten on it. If there is an incoming route for the Home controller with Kitty (instead of Kitten) as the action name, the controller will not be able to invoke any action method and instead will call the HandleUnknownAction method. ...

Yesterday I came across an if statement that looked something like this. if (arg == "a" || arg == "b" || arg == "c" || arg == "d" || arg == "e") { Console.WriteLine(true); } An alternative way of writing this could look like this. if (new [] { "a", "b", "c", "d", "e" }.Contains(arg)) Console.WriteLine(true); I can’t remember in which Github repository I spotted this technique, but I’m sure it was written in something other than C#. I think it works for C# as well though. The language hardly gets in the way, although it would be nice to be able to drop the new. ...

I have been working on something small on the side lately. I hardly have anything to show for it though, most of it is still being shaped in my head. Anyhow, a very important part of the front-end is built using jQuery mobile. Although the framework hasn’t been released - release candidates are available though -, it’s something you should start looking into today. Why? Because the browser is the future of mobile applications. With the Flash and Silverlight bombs that were dropped today, I am even more confident that that future might be nearer than we think. ...

The latest addition to my [data structures and algorithms in JavaScript](https://github.com/JefClaes Data-structures-and-algorithms-in-JavaScript) is the merge sort algorithm. There are four main steps in the merge sort algorithm (from Wikipedia): If the list is of length 0 or 1, then it is already sorted. Otherwise: Divide the unsorted list into two sublists of about half the size. Sort each sublist recursively by re-applying the merge sort. Merge the two sublists back into one sorted list. I found it a lot easier to understand the algorithm by just looking at this diagram (also from Wikipedia). ...