Following on from previous posts and the possible cheap ways to increase your web-site load times. I thought I’d share a little bit code that helps reduce the number of calls your web pages make when loading images either from CSS or in the HTML itself.

The process is straight forwards enough; It’s just a case of where you want to implement it, either during the build process or at runtime.

I personally like minify during the build process, combining and Base64 files before deploying and then caching. There are a number of solutions that will do all this for you at run time. (Seem comments on previous posts) The choice is yours.

For a recent project I used code similar to the following. There is a little gotcha you have to keep in mind when process to base64 encoding images and that is the limitation of older browsers.

Microsoft Internet Explore version 6 and 7 do not support base64 natively and IE8 has a size limitation of 32Kb. As with most issues around different browsers, building a simple browser sniffer to decide which to version of the CSS to send to the client and cache it, will help resolve the issue.

The downloadable version of the code is wrapped in an MSBUILD task, should you need to wire this up to your CI.

So the following image :

Would be converted to the following inside the CSS file. Yes your files will get bigger but it’s still time saving and reduces the number of round trips, but I guess you knew that already else you would not be looking at this as an option.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK8AAAAy etc..

NB: WordPress does like to screw-up inline code, so see the download for a working example.

If you like it and feel the need, please donate and buy me a beer.

        public string ImagePath { get; set; }

private static string MakeImagesBase64(string stylesheet)
        {
            const RegexOptions MyRegexOptions = RegexOptions.None;
            const string RegexPattern = @"(?<=url\(/)(.*)(?=\))";

            var myRegex = new Regex(RegexPattern, MyRegexOptions);

            var result = myRegex.Replace(stylesheet, this.OnEvaluator).Replace(Environment.NewLine, string.Empty).Replace("/data", "data");
        }

private string OnEvaluator(Match match)
        {
            var uriData = LoadCssImage(this.ImagePath, match.ToString());
            return uriData;
        }

private static string LoadCSSImage(string capturedFilepath)
        {
            string imagePath = HttpContext.Current.Server.MapPath(capturedFilepath);
            int start = capturedFilepath.LastIndexOf('.') + 1;
            int end = capturedFilepath.Length;
            string imageType = capturedFilepath.Substring(start, end - start);
            string result = String.Empty;

            ////Try to load image, if we can't find it put back the original image path
            try
            {
                using(Image image = Image.FromFile(imagePath))
                {
                    System.Drawing.Imaging.ImageFormat format = image.RawFormat;
                    result = ImagetoBase64(image, format, imageType, capturedFilepath);
                }
            }
            catch
            {
                result = capturedFilepath;
            }
            return result;
        }

private static string ImagetoBase64(Image image, System.Drawing.Imaging.ImageFormat format, string imageType, string capturedFilepath)
        {
            using (MemoryStream ms = new MemoryStream())
            {
                string result = String.Empty;
                image.Save(ms, format);
                byte[] imageBytes = ms.ToArray();

                string base64String = Convert.ToBase64String(imageBytes);
                var ie8ByteLimit = 32768;

                if (imageBytes.Length < ie8ByteLimit)
                {
                    result = String.Format("data:image/{0};base64,{1}", imageType, base64String);
                }
                else
                {
                    result = capturedFilepath;
                }

                return result;
            }
        }

Recently I was very fortunate to work on contract for one of the UK’s leading nationwide used car sales company, Carcraft.

During my time with Carcraft, I worked on number of exciting and fun web projects with a really great bunch of people. One of the more interesting projects was the development of the Official Carcraft iPhone app. 

After seeing a presentation by @chrisntr at NxtGenUG (managed by @Grumpydev and team) about MonoTouch. I decided to stick with a language that complement the rest of the development team skills and develop in C# with MonoTouch.

To find out more and download the app, please visit iTunes store.

What is MonoTouch?

MonoTouch allows developers to create C# and .NET based applications that run on Apple’s iPhone, iPad, and iPod Touch devices, while taking advantage of the iPhone APIs and reusing both code and libraries that have been built for .NET, as well as existing skills.  Please visit their web-site and try it for yourself. MonoTouch

How was it?

Once you have the basics under your belt, development for the iPhone was fun and quick, utilising Strongly Typed Models and Web Services, we developed an easy use application, retrieving live stock updates, car galleries and accessing GPS to calculate route maps and distances to your nearest Carcraft showroom. Also unique car industry features like, “Love this car” which allows your to enter a registration of any car and search the whole of the Carcraft stock list for something similar car or applying for finance while on the app.

All these features and more where all developed in C#, what more could you ask for?  Android version, we’ll thanks to Mono for Android you can that too, if you wanted it.

Summary

If your interested in getting starting and want to build your own application, I’d recommend Professional iPhone Programming with MonoTouch and .NET/C# (Wrox Programmer to Programmer) as a good starting place.

Also reading the tutorials over at monotouch.info

I’ll be blogging about my next iPhone / iPad app, which is going to starting very shortly for mens underwear online store www.gounderwear.co.uk . So keep following.

If you found this helpful and would like to buy me a beer to say thanks, please

@ArranM

Left start with the “File > New Project” in Visual Studio 2010.

First we need to create a basic Model for our tweet, which we’ll call “TheTweet.cs”

Now we have an empty class, lets add the basics for parts to handle the tweets.

namespace TwitterFeedReader.Models
{
    public class TheTweet
    {
        public string Title { get; set; }
        public string Date { get; set; }
        public string Photo { get; set; }
    }
}

Next lets create the main function that we need in order to read our Twitter feed. I was going to do this in a few stages, however time is limited this morning so I’ll just bulk it all together, and its not that much code so it should easy to understand.

We want to display some tweets on your pages and try and reduce the need for fetching tweets on each view, so we are going to drop the results in to cache memory for 2 minutes. We’ll also wrap a try/catch around the loading of RSS feed, just encase we can’t load it.

public class TwitterReader
    {

        public IEnumerable GetFeed(int tweetCount)
        {
            //Setup Cache holder
            var TwitterCache = HttpRuntime.Cache;
            //Setup Cache key
            const string key = "twitter";

            //Initials TheTweet
            IEnumerable Result;

            //Check to see if we already have tweet in memory and has not expired
            if (TwitterCache[key] == null)
            {

                try
                {
                    //Handle XML namespage
                    XNamespace AtomNs = "http://www.w3.org/2005/Atom";
                    const string url = "http://search.twitter.com/search.atom?q=from%3AArranM";

                    //Load the twitter feed in.
                    var Element = XElement.Load(url);

                    //Look through the returned twitter feed and grab X tweets in to our Result
                    Result = (from Tweet in Element.Descendants(AtomNs + "entry").Take(tweetCount)
                              select new TheTweet
                              {
                                  Title = ConvertTwitterLinks((string)Tweet.Element(AtomNs + "title")),
                                  Date = ConvertTimeDiff(DateTime.Parse((string)Tweet.Element(AtomNs + "published")))
                              });

                    //Store the tweets in to memory for 2 minutes.
                    TwitterCache.Insert(key, Result, null, DateTime.Now.AddMinutes(2), Cache.NoSlidingExpiration);
                }
                catch
                {
                   //We have an issue, Return a friendly message to the model, so we don't crash. (//log it)
                   Result = new List {new TheTweet {Title = "Unable to load twitter feed.", Date = "1 second"}};
                }
            }
            else
            {
                //Yes we have tweets in memory, so we'll use those
                Result = (IEnumerable)TwitterCache[key];
            }
            return Result;
        }
    }

Aren’t we great, we are now reading tweets! Hold on, what about links in the tweet? Mmm OK, lets create a quick function to process the tweet and convert any WWW, # or @ we find in to useable links.

I converted some PHP code I found on the web, which seems simple and easy to use.

private static String ConvertTwitterLinks(string input)
        {

            const string strWebLinks = @"(^|[\n ])([\w]+?://[\w]+[^ \n\r\t< ]*)";
            const string strWebLinksWww = @"(^|[\n ])((www|ftp)\.[^ \t\n\r< ]*)";
            const string strTwitterNames = @"@(\w+)";
            const string strTwitterTags = @"#(\w+)";

             input = Regex.Replace(input, strWebLinks, " <a href=\"$2\" rel=\"external nofollow\">$2</a>");

            input = Regex.Replace(input, strWebLinksWww, " <a href=\"http://$2\" rel=\"external nofollow\">$2</a>");

            input = Regex.Replace(input, strTwitterNames, " <a href=\"http://www.twitter.com/$1\" rel=\"external nofollow\">@$1</a>");

            input = Regex.Replace(input, strTwitterTags, " <a href=\"http://search.twitter.com/search?q=$1\" rel=\"external nofollow\">#$1</a>");

            return input;
        }

Now we have the ability to enable href’s, @, # tags as links, let go back to GetFeed() function and added it in.

      Title = ConvertTwitterLinks((string)Tweet.Element(AtomNs + "title")),

Cool.. But can we do something with the Date/Time? Well we can, so lets do that.

private static String ConvertTimeDiff(DateTime tweetTime)
        {
            //Setup our timestamps
            DateTime Dt1 = DateTime.Now;
            DateTime Dt2 = tweetTime;
            TimeSpan Ts = Dt1.Subtract(Dt2);

            string TimeDiff = String.Empty;

            //if it's been more than 24 hours, then returns day/s
            if (Ts.TotalHours > 24)
            {
                TimeDiff = String.Format(Ts.Days >= 2 ? "{0} days, " : "{0} day, ", Ts.Days);
            }

            //if it's been more than 60 minutes, then returns hour/s
            if (Ts.TotalMinutes > 60)
            {
                TimeDiff = Ts.Hours >= 2
                               ? TimeDiff + String.Format("{0} hrs, ", Ts.Hours)
                               : TimeDiff + String.Format("{0} hr, ", Ts.Hours);
            }

            //finally return all our string of days/hours/minutes
            return TimeDiff + String.Format("{0} minutes", Ts.Minutes);
        }

Now we just need to parse the date/time from the Twitter feed and return our calculated time in text. We’ll change a line in the main reader function to this one.

     Date = ConvertTimeDiff(DateTime.Parse((string)Tweet.Element(AtomNs + "published")))

Now that’s all done!

Let hook up the Controller to use your new excellent Twitter plugin.

Open /Controllers/HomeController.cs and create a new ActionResult to handle the PartialView we will be using, thus allowing us to use the Twitter Plugin on any page.

First add a reference to our “Models” where our new function is.

using TwitterFeedReader.Models;

Next create a new “ActionResult” for the Twitter Feed.

 public ActionResult TwitterFeed(int tweetCount)
        {
                //could extend to take URL and cache time
                var Twitter = new TwitterReader();
                var Tg = Twitter.GetFeed(tweetCount);
                return PartialView(Tg);
        }

Great we are almost there. Now lets create our PartialView to handle displaying the Tweets. Right click on “TwitterFeed” in the name of the ActionResult definition and select “Add View”, you should then be presented with the following dialog box, which we will instruct to be Strongly Typed, and as PartialView..

Let populate the View with a simple HTML definition list element and the always ubiquitous UL LI.

@model IEnumerable</pre>
<dl><dt>Twitter Feed</dt>
<dd>
<ul>
     @foreach (var item in Model)
     {
	<li>@Html.Raw(item.Title) (sent @item.Date ago)</li>
     }
</ul>
</dd></dl>
<pre>

I’ll let you worry about the styling. Now on to the final part… Adding the call to the Partial View from our page. Now we can either pop it into the _Layout.cshtml (or Site.Master) or we in the individual view. For the purpose of this quick blog post I will call the Partial View from the /Views/Home/Index.cshtml

      @{Html.RenderAction("TwitterFeed", "Home", new { tweetCount = 5});}

There we go, All done. So you should have something like this :

Full project code is available for download (See right hand navigation)

If you found this helpful and would like to buy me a beer to say thanks, please

@ArranM

The Blog-Health-o-Meter™ reads This blog is doing awesome!.

Crunchy numbers

A Boeing 747-400 passenger jet can hold 416 passengers. This blog was viewed about 2,000 times in 2010. That’s about 5 full 747s.

In 2010, there were 6 new posts, not bad for the first year! There were 47 pictures uploaded, taking up a total of 2mb. That’s about 4 pictures per month.

The busiest day of the year was November 16th with 54 views. The most popular post that day was Stag night.

Where did they come from?

The top referring sites in 2010 were twitter.com, aspdotnetmvc.com, Google Reader, en.wordpress.com, and instapaper.com.

Some visitors came searching, mostly for visual studio combine css files, visual studio javascript minifier, visual studio minify, minify html, and visual studio 2010 minified script jquery.

Attractions in 2010

These are the posts and pages that got the most views in 2010.

Stag night November 2010

Minify, Combine CSS and JavaScript with Visual Studio July 2010
1 comment

Minify HTML with .NET MVC ActionFilter August 2010
4 comments

.NET MVC, Upload a CSV file to Database with Bulk upload July 2010

Cache for speed with .Net August 2010

I had a need today to create a QueryString from a Model (Serialise). There was a good reason why, which I won’t go into; Lets just say it involves SEO requirements, ever changing model, pagination and price sorting.

So lets get to it and see what we can do. We need to build a function that will take any Model and strip it to any Key and Value’s.

First, we’ll set-up a basic model class in “/Models/SearchItems.cs”.

Model:

using System;

namespace ModelToKeyValuePairs.Models
{
    public class SearchItems
    {
            public SearchItems()
            {
                Makes = "Any";
                Models = "Any";
                Colour = "Any";
                Location = "Any";
            }
            public string Makes { get; set; }
            public string Models { get; set; }
            public string Price { get; set; }
            public string Colour { get; set; }
            public string Location { get; set; }
    }
}

As you see, this is a very basic mode with a bunch of default values.
In order to make this a little more reusable, I want to allow any model to be used with the function, so I’m going to push Gerenic Types.

Now to create a simple static function with all my others “/Extentions/StaticFunctions.cs”

Function:

using System;
using System.Linq;
using System.Text;
using System.Web.UI;

namespace ModelToKeyValuePairs.Extenstions
{
    public class StaticFunctions
    {
        public static string ConvertToQueryString<T>(T obj)
        {
            var keyPairs = typeof(T).GetProperties().Select(p => new Pair(p.Name, p.GetValue(obj, null)));
            StringBuilder sb = new StringBuilder();
            foreach (var item in keyPairs)
            {
                sb.Append(String.Format("{0}={1}&", item.First, item.Second));
            }
            return "?" + sb.ToString().Substring(0, sb.Length - 1).ToLower(); //remove last &
        }
    }
}

We pass in our model to ConvertToQueryString, and use GetProperties() and a little Linq query to retrieve the model attributes for the Key Name and the Key Value.

We then need to loop though the results and use StringBuilder to join all the queries together. I’m sure this could be refactored to use string.Join and converting it all to an array.

Once we have our output string we just need to chop of the last & to keep it all tidy.

Now lets put the code in to action and drop it in to a simple view.

Usage:

using System;
using System.Web.Mvc;
using ModelToKeyValuePairs.Models;
using ModelToKeyValuePairs.Extenstions;

namespace ModelToKeyValuePairs.Controllers
{
  [HandleError]
  public class HomeController : Controller
  {
        public ActionResult Index()
        {
            ViewData["Message"] = "Welcome to ASP.NET MVC!";

            SearchItems item = new SearchItems();
            var query = StaticFunctions.ConvertToQueryString<SearchItems>(item);

            ViewData["Query"] = query;

            return View();
        }
   }
}

Now we are done, left just run the example and see the result
The result :

?makes=any&models=any&price=&colour=any&location=any

Sure there are more things you can do with this little snippet for example, create a CVS string. I’d love to hear about your examples.

I hope this will help someone somewhere, should your have a similar need. You can download the working example code from the right hand menu.

If you found this helpful and would like to buy me a beer to say thanks, please

@ArranM

I’ve had this idea for a long time, but after reading @hugoware post about removing white space, I decided to implement it in my own projects. As with any good code, let’s stand on the shoulder of giants and make it fit our needs.

Normally, if we did a “View Source” on our web page we would see something like this:

Now a lot of good HTML developers like to leave closing html comments and notes in their code. This helps them track end elements in nested code.  For example:

<div id="wrap">
    <div id="content">
     content goes here, with more elements of <>
    </div> <!--end content-->
</div> <!--end wrap -->

The issue we may face on larger pages is there can be a lot of notes and end line comments which can add to the overall size of your page, which the user doesn’t care about but the developer needs for easy editing later.

So how do we achieve this?

We need to minify the generated HTML, thus removing the comments and whitespace as the page is run. Very much the same process we did when minifying our CSS and JavaScript in an earlier post.

As we are working on an .NET MVC project we will look at building an ActionFilter.

The tools

• Microsoft Visual Studio 2010 or Trail editions (Download via Web platform installer)
• A little time to look good.

Creating the ActionFilter

We will start as always with a standard vanilla MVC (Model View Controller) .NET application install, good old “File > New Project > ASP.NET MVC Web Application”

Next we will create a folder to hold our ActionFilter, mm what should I call it?

Right click on this folder and add a new class called ‘RemoveWhiteSpace.cs’ or whatever you thing is best for you. Your class should look something like this.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace RemoveWhiteSpace.ActionFilters
{
         public class WhiteSpaceFilter
         {

         }
}

Now to add our Inheritance on the Stream and change our ‘Using’ statements to only the ones we need. Thus

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace RemoveWhiteSpace.ActionFilters
{
         public class WhiteSpaceFilter : Stream
         {

         }
}

The Stream requires we implement inherited abstract members, so let’s add the basics to our class and alter the constructor to allow for stream input and filter params

<pre>using System;
using System.IO;
using System.Text;
using System.Web.Mvc;
using System.Text.RegularExpressions;

namespace RemoveWhiteSpace.ActionFilters
{
    public class WhiteSpaceFilter : Stream
    {

        private Stream _shrink;
        private Func<string, string> _filter;

        public WhiteSpaceFilter(Stream shrink, Func<string, string> filter)
        {
            _shrink = shrink;
            _filter = filter;
        }

 
        public override bool CanRead { get { return true; } }
        public override bool CanSeek { get { return true; } }
        public override bool CanWrite { get { return true; } }
        public override void Flush() { _shrink.Flush(); }
        public override long Length { get { return 0; } }
        public override long Position { get; set; }
        public override int Read(byte[] buffer, int offset, int count)
        {
            return _shrink.Read(buffer, offset, count);
        }
        public override long Seek(long offset, SeekOrigin origin)
        {
            return _shrink.Seek(offset, origin);
        }
        public override void SetLength(long value)
        {
            _shrink.SetLength(value);
        }
        public override void Close()
        {
            _shrink.Close();
        }

        public override void Write(byte[] buffer, int offset, int count)
        {
            // capture the data and convert to string 
            byte[] data = new byte[count];
            Buffer.BlockCopy(buffer, offset, data, 0, count);
            string s = Encoding.Default.GetString(buffer);

            // filter the string
            s = _filter(s);

            // write the data to stream 
            byte[] outdata = Encoding.Default.GetBytes(s);
            _shrink.Write(outdata, 0, outdata.GetLength(0));
        }
    }
}

Next we need to add the ActionFilter Attribute. This allows us to decorate our controller later with our minify filter.

<pre>public class WhitespaceFilterAttribute : ActionFilterAttribute
    {

        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {

            var request = filterContext.HttpContext.Request;
            var response = filterContext.HttpContext.Response;

            response.Filter = new WhiteSpaceFilter(response.Filter, s =>
                    {
                        s = Regex.Replace(s, @"\s+", " ");
                        s = Regex.Replace(s, @"\s*\n\s*", "\n");
                        s = Regex.Replace(s, @"\s*\>\s*\<\s*", "><");
                        s = Regex.Replace(s, @"<!--(.*?)-->", "");   //Remove comments

                        // single-line doctype must be preserved 
                        var firstEndBracketPosition = s.IndexOf(">");
                        if (firstEndBracketPosition >= 0)
                        {
                            s = s.Remove(firstEndBracketPosition, 1);
                            s = s.Insert(firstEndBracketPosition, ">");
                        }
                        return s;
                    });
                   
            }

    }</pre>
  

We are almost done, we just need to put it all together and decorate our HomeController.cs with the new ActionFilter.   First we need to add another ‘Using’ to HomeController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using RemoveWhiteSpace.ActionFilters;  //Minify HTML Filter
  

Now to minify our HomeController, you can decorate either on the whole controller or just on an ‘ActionResult’

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using RemoveWhiteSpace.ActionFilters; //Minify HTML Filter

namespace RemoveWhiteSpace.Controllers
{
    [HandleError]
    [WhitespaceFilter]
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewData["Message"] = "Welcome to ASP.NET MVC!";

            return View();
        }

        public ActionResult About()
        {
            return View();
        }
    }
}

 With the Filter running we can now see our HTML source code looks a lot different.

This is just a basic page, but comparing the standard HTML page against the minified version we can see we have reduced the download file size even before we add Gzip/Deflate
Before:

After:

Finally

In the last few posts we have covered some of the basics of speeding up your web-site. Putting all these together can really make your pages fly. Now it doesn’t end there, it might be worth you looking at sockets and other alternative options, base64 image in-line to reduce the number http calls. Speed is an ever moving target.

I hope what I shown you over the last few posts helps.

Full project code is available for download (See right hand navigation)

If you found this helpful and would like to buy me a beer to say thanks, please

@ArranM

Following on from my previous post, we will look at adding simple caching to our project for another quick win, this is just one method of many. Caching really depends on the size and type of your application and hosting environment.

The tools

• Microsoft Visual Studio 2010 or Trail editions (Download via Web platform installer)
• Mmm thats it!

Lets start

We need to create a HttpModule to interface and handle our events.

Here we go again. “File > New Project > Windows > Class Library”

Create a new class and call it eModule.cs , the name is not really important, it’s just what fits your best.

Now we should have something that look likes this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace ExpiresModule
{
    class eModule
    {
    }
}

Lets tidy up our “using”, and add the ones we will need.

Remove :

using System.Collections.Generic;
using System.Linq;
using System.Text;

And add :

using System.Web;
using System.IO;

Now lets inherit from IHttpModule and set up the basic structure of the HttpModule. First we need to add “System.Web” to our references so we can work with IHttpModule.

Time to set up the basic frame work for our Caching module, We will need to add the Init() and if we want to be nice the Dispose() methods.

namespace ExpiresModule
{
    public class eModule : IHttpModule
    {

        public void Dispose()
        {
            // Dispose();
        }

        public void Init(HttpApplication context)
        {

        }

    }
}

Great thats a good start. Now we have to decide which file types we wish to cache. Lets go for static file types.

private readonly static string[] CACHCED_STATIC_TYPES = new string[] {".jpg", ".gif", ".png",".css", ".js" };

I think that covers the basics. Now to work with HttpContext to deal with our item request to out static file types and respond back and set the expire headers for our static types.

void context_AcquireRequestState(object sender, EventArgs e)
        {

            HttpContext context = HttpContext.Current;

            if (context != null & context.Response != null)
            {

                string fileExtension = Path.GetExtension(context.Request.PhysicalPath).ToLower();

                if (context.Response.Cache == null || Array.BinarySearch(CACHCED_STATIC_TYPES, fileExtension) < 0)
                    return;

                HttpCachePolicy cache = context.Response.Cache;

                cache.SetExpires(DateTime.Now.AddYears(30));
                cache.SetMaxAge(TimeSpan.FromDays(365.0 * 3.0));

            }

        }

The important thing about caching it setting the cache date far enough in the future, YSlow and Google Page speed do like to be at least a couple of months. You might be thinking, what if I change my CSS file, I want to make sure the user see the latest version? I’ll cover that in a future post.

Time to add our event listener to Init() to trigger our function on request of a page load.

public void Init(HttpApplication context)
        {

            context.BeginRequest += context_AcquireRequestState;
        }

Well thats about it for our ExpiresModule. We should now have something like this:

using System;
using System.Web;
using System.IO;

namespace ExpiresModule
{
    public class eModule : IHttpModule
    {
        private readonly static string[] CACHCED_STATIC_TYPES = new string[] {".jpg", ".gif", ".png",".css", ".js" };

        public void Dispose()
        {
            // Dispose();
        }

        public void Init(HttpApplication context)
        {

            context.BeginRequest += context_AcquireRequestState;
        }

        void context_AcquireRequestState(object sender, EventArgs e)
        {

            HttpContext context = HttpContext.Current;

            if (context != null & context.Response != null)
            {

                string fileExtension = Path.GetExtension(context.Request.PhysicalPath).ToLower();

                if (context.Response.Cache == null || Array.BinarySearch(CACHCED_STATIC_TYPES, fileExtension) < 0)
                    return;

                HttpCachePolicy cache = context.Response.Cache;

                cache.SetExpires(DateTime.Now.AddYears(30));
                cache.SetMaxAge(TimeSpan.FromDays(365.0 * 3.0));

            }

        }
    }
}

How do I use it?

Once you have compile this module, we can add the release DLL as a reference in to any of your other projects.

Followed by a declaration in your web.config to initialise the HttpModule.

<httpModules>
       <add name="ExpiresModule" type="ExpiresModule.eModule, ExpiresModule"/>
</httpModules>

Finally

I hope this might help someone, I’m sure a bit more work could make it better.

If you have access to IIS then the above code could be avoided and caching static types could be configure in IIS. You may also want to investigate “ETags” and “clientCache” in web.config.

If you found this helpful and would like to buy me a beer to say thanks, please

Full project code is available for download (See right hand navigation)

@ArranM

Why do this?

If a page takes a while to download, many visitors will simply click elsewhere.

Some of the advantages of compression:

• Better experience for the user, better user retention
• Reduces your bandwidth and hosting costs
• Faster loading for slower connections

But as you are reading this post, I’m guessing you already know all this and more so lets get on with the code.

The code

OK, now that is all out of the way lets stand on the shoulders of giants and quickly enable compression for our application.

Add the following section of code to your Global.asax

First we import the namespaces we need, Gzip and Deflate Stream classes as of .net 2.0 are now present in System.IO.Compression

<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.IO.Compression" %>

Next we need to declare the handle for the life cycle event in the Global.asax, PreRequestHandlerExecute

void Application_PreRequestHandlerExecute(object sender, EventArgs e)
{

}

Finally drop in the reset of the code and let the magic happen.

Enable Gzip or Deflate depending on Encoding
void Application_PreRequestHandlerExecute(object sender, EventArgs e)
{
    HttpApplication app = sender as HttpApplication;
    string acceptEncoding = app.Request.Headers["Accept-Encoding"];
    Stream prevUncompressedStream = app.Response.Filter;

    if (acceptEncoding == null || acceptEncoding.Length == 0)
        return;

    acceptEncoding = acceptEncoding.ToLower();

    if (acceptEncoding.Contains("deflate") || acceptEncoding == "*")
    {
        // defalte
        app.Response.Filter = new DeflateStream(prevUncompressedStream,
            CompressionMode.Compress);
        app.Response.AppendHeader("Content-Encoding", "deflate");

    }
    else if (acceptEncoding.Contains("gzip"))
    {
        // gzip
        app.Response.Filter = new GZipStream(prevUncompressedStream,
            CompressionMode.Compress);
        app.Response.AppendHeader("Content-Encoding", "gzip");

    }
    app.Response.AppendHeader("Vary", "Accept-Encoding");

}

Now, I would like to claim credit for this, however I can’t. I found this little gem over at www.stardeveloper.com by Faisal Khan.

If you would like to know more about Gzip / Deflate take a look at the following web-sites:

• Enabling GZip and Deflate HTTP Compression in ASP.NET pages – Faisal Khan
• Gzip vs Deflate, which is faster HTTP compression method? – Faisal Khan
• GZipStream Class – MSDN
• More on GZip compression with ASP.NET – Rick Strahl

Finally

Using Gzip with minify is now really starting to speed up our pages. Next time we will look at Caching and donut caching your pages for faster users experience. 

Achieving at least a 95/100 on Google’s Page Speed rating and (A /97) on Yahoo! YSlow rating in V2 mode on a graphically, interactive heavy page is straight forward to obtain even without using a CDN (Content delivery network).

I hope you found this helpful, and can progress on it.

If you found this helpful and would like to buy me a beer to say thanks, please

@ArranM

Not everyone has continuous integration (CI) setup and able perform Combine and Minify actions after committing your code to a build agents; so I hope this will help a few people that are running locally or even with build agents.

The tools

• Microsoft Visual Studio Express 2010 (Download via Web platform installer)
• Microsoft Ajax Minified, YUI Compressor for .Net or Google Closure Compiler
• Large Coffee and a muffin
• Example JS, CSS files to work with.
• Web Deployment Project 2010

Lets get started by picking which minifier tool we’d like to use. Each of the minifies have their own merits and I would recommend you investigate further which is right for your needs. In this example we are going to be using Microsoft Ajax Minified and Web Deployment Project 2010. So download load them and install.

That was easy, lets move on to setting up a basic project and creating some  simple CSS and JavaScript files.

We are  going to start with a standard vanilla MVC (Model View Controller) .NET application install, good old “File > New Project > ASP.NET MVC Web Application”

Adding Web Deployment Project

Adding our basic Deployment Project. “Build > Add Web Deployment Project”

Release mode

We need to make sure we configure our new Web Deployment project in to Release mode.

Right click on “Solution ‘MinifyCombineCssJavaScript’ (2 projects)” and select “Properties”. In the new dialogue popup windows we need to change “MinifyCombineCssJavaScript.csproj_deploy” to release mode.

CSS and JavaScript files

Lets create a couple of new files in addition to the default ones that come with the vanilla MVC project; Extras.css and Extras.js. These new files really don’t do anything special, but you get the idea.

The beauty of these minify tools, means we can leave comments and formatting in our files and not worry about them still being there in the released code.

Extras.css

/* Style up our h1 */
h1
{
    font-size:2.8em;
    color:ff0000;
}

Extras.js

$(document).ready(function () {

    $("h1").click(function () {

        alert("Hello");

    }); //End h1 click

});   //End of document ready

Time for a break

Again we have done some great ground work here, Time for a coffee and a muffin.

Done?

Right back to work.

Adding CSS and JavaScript files to our page

Lets edit the master page to allow site to use debug files when running locally and minified files when released.

Add this simple little code snippet to the Site.Master page to allow the magic to happen.

<%if (HttpContext.Current.IsDebuggingEnabled){%>
        <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<%}
else
{ %>
        <!--release version here-->
<% } %>

Site.Master (original)

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
                <!--tml.RenderPartial("LogOnUserControl");--></div>
<div id="menucontainer">
<ul id="menu">
	<li><%= Html.ActionLink("Home", "Index", "Home")%></li>
         <li><%= Html.ActionLink("About", "About", "Home")%></li>
</ul>
</div>
</div>
<div id="main">
<div id="footer"></div>
</div>
</div>

Site.Master (new)

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <%if (HttpContext.Current.IsDebuggingEnabled){%>
        <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
        <link href="../../Content/Extras.css" rel="stylesheet" type="text/css" />
    <%}
       else
       { %>
        <link href="../../Content/all.min.css" rel="stylesheet" type="text/css"/>
    <% } %>
</head>

<body>
    <div class="page">

        <div id="header">
            <div id="title">
                <h1>My MVC Application</h1>
            </div>

            <div id="logindisplay">
                <% Html.RenderPartial("LogOnUserControl"); %>
            </div>

            <div id="menucontainer">

                <ul id="menu">
                    <li><%= Html.ActionLink("Home", "Index", "Home")%></li>
                    <li><%= Html.ActionLink("About", "About", "Home")%></li>
                </ul>

            </div>
        </div>

        <div id="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />

            <div id="footer">
            </div>
        </div>
    </div>
    <%if (HttpContext.Current.IsDebuggingEnabled){%>
        <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
        <script src="../../Scripts/Extras.js" type="text/javascript"></script>
    <%}
       else
       { %>
        <script src="../../Scripts/all.min.js" type="text/javascript"></script>
    <% } %>
</body>
</html>

Adding the Minify engine

Time to start editing the “MinifyCombineCssJavaScript.csproj_deploy” file.

Original “MinifyCombineCssJavaScript.csproj_deploy” file

<?xml version="1.0" encoding="utf-8"?>
<!--
  Microsoft Visual Studio 2010 Web Deployment Project
  http://go.microsoft.com/fwlink/?LinkID=104956

-->
<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  <PropertyGroup>
    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
    <Platform Condition=" '$(Platform)' == '' ">AnyCPU</Platform>
    <ProductVersion>10.0.30319</ProductVersion>
    <SchemaVersion>2.0</SchemaVersion>
    <ProjectGuid>{3740F659-35EC-4DF3-87A3-99FAC0D999F7}</ProjectGuid>
    <SourceWebPhysicalPath>..\MinifyCombineCssJavaScript</SourceWebPhysicalPath>
    <SourceWebProject>{B4BFD876-1C24-4A86-AD69-3ACD82E5DE12}|MinifyCombineCssJavaScript\MinifyCombineCssJavaScript.csproj</SourceWebProject>
    <SourceWebVirtualPath>/MinifyCombineCssJavaScript.csproj</SourceWebVirtualPath>
    <TargetFrameworkVersion>v3.5</TargetFrameworkVersion>
  </PropertyGroup>
  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' ">
    <DebugSymbols>true</DebugSymbols>
    <OutputPath>.\Debug</OutputPath>
    <EnableUpdateable>true</EnableUpdateable>
    <UseMerge>true</UseMerge>
    <SingleAssemblyName>MinifyCombineCssJavaScript.csproj_deploy</SingleAssemblyName>
  </PropertyGroup>
  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|AnyCPU' ">
    <DebugSymbols>false</DebugSymbols>
    <OutputPath>.\Release</OutputPath>
    <EnableUpdateable>true</EnableUpdateable>
    <UseMerge>true</UseMerge>
    <SingleAssemblyName>MinifyCombineCssJavaScript.csproj_deploy</SingleAssemblyName>
  </PropertyGroup>
  <ItemGroup>
  </ItemGroup>
  <Import Project="$(MSBuildExtensionsPath)\Microsoft\WebDeployment\v10.0\Microsoft.WebDeployment.targets" />
  <Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />

  <!-- To modify your build process, add your task inside one of the targets below and uncomment it.
       Other similar extension points exist, see Microsoft.WebDeployment.targets.
  <Target Name="BeforeBuild">
  </Target>
  <Target Name="BeforeMerge">
  </Target>
  <Target Name="AfterMerge">
  </Target>
  <Target Name="AfterBuild">
  </Target>
  -->

Lets first add the Minify engine. We need to add the following line to just before “<Target Name=”BeforeBuild”></Target>”

<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />

Next we need to create a list group of CSS files which we wish to merge. We can do this in the “Aftermerge” target area.

<Target Name="AfterMerge">
    <CssFilesIndex Include="$(TempBuildDir)\Content\Site.css;$(TempBuildDir)\Content\Extras.css;" />
  </Target>

Now, we will also do the same for the JavaScript files.

<JsFiles Include="$(TempBuildDir)\Scripts\jquery-1.4.1.js;$(TempBuildDir)\Scripts\Extras.js;" />

Time to merge our CSS files in to one file and then for the JavaScript files.

CSS merge to all.css

<ReadLinesFromFile File="%(CssFiles.Identity)">
      <Output TaskParameter="Lines" ItemName="cssLines" />
    </ReadLinesFromFile>
    <WriteLinesToFile File="$(TempBuildDir)\Content\all.css" Lines="@(cssLines)" Overwrite="true" />

JavaScript merge to all.js

<ReadLinesFromFile File="%(JsFiles.Identity)">
      <Output TaskParameter="Lines" ItemName="jsLines" />
</ReadLinesFromFile>
<WriteLinesToFile File="$(TempBuildDir)\Scripts\all.js" Lines="@(JsLines)" Overwrite="true" />

We are on the final stretch.

Lets tell the minifier to compress our new single files. We’ll do this inside  the “<Target Name=”AfterBuild”></Target>” and then delete out the single non-minified files, just so we keep things a little tidy.

<Target Name="AfterBuild">
      <ItemGroup>
        <JS Include="**\Scripts\all.js;" Exclude="**\*.min.js" />
      </ItemGroup>
      <ItemGroup>
        <CSS Include="**\Content\all.css;" />
      </ItemGroup>
      <AjaxMin JsSourceFiles="@(JS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".min.js" CssSourceFiles="@(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css" />
    <ItemGroup>
      <DeleteAfterBuild Include="$(OutputPath)Scripts\all.js" />
      <DeleteAfterBuild Include="$(OutputPath)Scripts\jquery-1.4.1.js" />
      <DeleteAfterBuild Include="$(OutputPath)Scripts\Extras.js" />
      <DeleteAfterBuild Include="$(OutputPath)Content\all.css" />
      <DeleteAfterBuild Include="$(OutputPath)Content\Site.css" />
      <DeleteAfterBuild Include="$(OutputPath)Content\Extras.css" />
    </ItemGroup>
  </Target>

That’s it we are done, Hit F5 and watch the magic happen. The release version now knows to use the minified/combine files yet leaving our original files intact while working locally, allowing us to debug.

Finally

There is much more you can do with the build script, like excluding files not needed for your live site and deleting all other non live file. We could actually remove one of the steps above, however I thought I’d leave it in just to keep things in simple blocks.

The same process works for each of the different minifiers, it’s just a case of swapping them in and out to the one you prefer.

I hope this helps someone out, let me know.

If you found this helpful and would like to buy me a beer to say thanks, please

@ArranM

I thought I’d give a quick example of taking a CSV file, building a data table in memory and the pushing all the data to MS SQL Server in one action.

The following is by no means a finish code or ready for production, but here goes. 

The tools

• Microsoft Visual Studio Express 2010 (Download via Web platform installer)
• Microsoft SQL Express 2008
• Large cup of tea and couple of biscuits
• Example CSV file to work with. (CSV example file)
• Excel

I’m going to start with a standard vanilla MVC (Model View Controller) .NET application install, good old “File > New Project > ASP.NET MVC Web Application”

Now that’s done, lets look at our CSV file and understand what table structure we are going to have to create in the database.

The CSV file

The example CSV file contain a simple set of data, First Name (String), Surname (String) and Date of birth (DateTime).

To make life a little easier for ourselves we will delete the first line which contains the heading. It’s one less thing to deal with. Our CSV should now like this:

Arran,Maclean,01/12/1980
Rachel,Gorrod,20/12/1985
Simon,Gainham,14/05/1983
Bill,Gates,12/12/1960
Marky,Mark,15/02/1970


From this we can now look at creating a table in our database to capture the imported data. Again we will keep this simple, you can refine it later.

Now create your database. I’m keeping this example simple, just asking Visual Studio to create an empty database in the App_Data folder.

We will need 3 columns, “Firstname” nvarchar(50), “Surname” nvarchar(50) and “Dateofbirth” datetime.

CREATE TABLE BulkImportDetails(
[Firstname] [nvarchar](50) NULL,
[Surname] [nvarchar](50) NULL,
[Dateofbirth] [datetime] NULL
)

Now to quickly drop in the connection string for the database in the the web.config

<connectionStrings>
<add name="DataBaseConnectionString" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\CSVtoBulkUpLoad.mdf;Integrated Security=True;User Instance=True"      providerName="System.Data.SqlClient" />
</connectionStrings>

OK, now that’s all out of the way, lets get to the fun stuff.

Upload your CSV file

As we are utilising MVC; We will create our form in a with a simple Html Helper. The important item to remember when uploading a file is enctype=”multipart/form-data” attribute, this deals with the bits and bytes. We will also add a ViewData holder for our feedback to the screen.

<h2>CSV Bulk Upload</h2>
<% using (Html.BeginForm("upload","",FormMethod.Post, new {enctype="multipart/form-data"})){ %>

<input type="file" name="FileUpload" />
<input type="submit" name="Submit" id="Submit" value="Upload" />

<%}    %>

<p><%= Html.Encode(ViewData["Feedback"]) %></p>

The HomeController

Now we have the inputs ready, it’s time to build our controller to handle the uploaded file and save it to a set location. Create a new folder in your App_Data folder called “uploads”

Lets add the code for to handle the upload process after the user click the upload button. Add the following code to the HomeController. (Upload load multiple files?)

[HttpPost]
public ActionResult Index(HttpPostedFileBase FileUpload)
{
if (FileUpload.ContentLength > 0)
{
           string fileName = Path.GetFileName(FileUpload.FileName);
           string path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
           try {
                FileUpload.SaveAs(path);
                ViewData["Feedback"] = "Upload Complete";
           }
           catch (Exception ex)
           {
                ViewData["Feedback"] = ex.Message;
           }
}

       return View("Index", ViewData["Feedback"]);
}

Time for a break

Great work everyone, the upload feature is working. Time for a cup of tea and a biscuit. MMMMmmm.

Lets crack on and finish.

Copying CSV to a DataTable

We are now going to convert our CSV file and return a DataTable . Think of this as Excel spread sheet in memory.

Let create our static function; One stumbling block you can come up against when working with CSV data is handling the “ , “ in a sentence.  Thanks to agreed conventions any sentence that contain a “,” should be wrapped in quotes. With this in mind we can use a regular expression to detect the comma’s and which one we need to split on.

private static DataTable ProcessCSV(string fileName)
{
//Set up our variables
string Feedback = string.Empty;
string line = string.Empty;
string[] strArray;
DataTable dt = new DataTable();
DataRow row;
// work out where we should split on comma, but not in a sentence
   Regex r = new Regex(",(?=(?:[^\"]*\"[^\"]*\")*(?![^\"]*\"))");
            //Set the filename in to our stream
            StreamReader sr = new StreamReader(fileName);

            //Read the first line and split the string at , with our regular expression in to an array
            line = sr.ReadLine();
           strArray = r.Split(line);

           //For each item in the new split array, dynamically builds our Data columns. Save us having to worry about it.
          Array.ForEach(strArray, s => dt.Columns.Add(new DataColumn()));

           //Read each line in the CVS file until it’s empty
            while ((line = sr.ReadLine()) != null)
           {
                      row = dt.NewRow();

                    //add our current value to our data row
                    row.ItemArray = r.Split(line);
                  dt.Rows.Add(row);
            }

            //Tidy Streameader up
            sr.Dispose();

            //return a the new DataTable
           return dt;

}

Lets amend our HomeController to now run our new function after upload.

[HttpPost]
        public ActionResult Index(HttpPostedFileBase FileUpload)
        {
            // Set up DataTable place holder
            DataTable dt = new DataTable();

            //check we have a file
            if (FileUpload.ContentLength > 0)
            {
                //Workout our file path
                string fileName = Path.GetFileName(FileUpload.FileName);
                string path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);

                //Try and upload
                try
                {
                    FileUpload.SaveAs(path);
                    //Process the CSV file and capture the results to our DataTable place holder
                    dt = ProcessCSV(path);

                }
                catch (Exception ex)
                {
                    //Catch errors
                    ViewData["Feedback"] = ex.Message;
                }
            }
            else
            {
                //Catch errors
                ViewData["Feedback"] = "Please select a file";
            }

            //Tidy up
            dt.Dispose();

            return View("Index", ViewData["Feedback"]);
        }

Now, if we run our web page and incept the DataTable (dt) we should now see our data in a nice little table.

Cool, feeling good so far. Lets move on and do what we really came here for! Bulk copy this table to our database table. The new function will take the DataTable generated above and send it all in one go to our database. You can of course sort, delete etc the data before sending it.

private static String ProcessBulkCopy(DataTable dt)
        {
            string Feedback = string.Empty;
            string connString = ConfigurationManager.ConnectionStrings["DataBaseConnectionString"].ConnectionString;

            //make our connection and dispose at the end
            using(  SqlConnection conn = new SqlConnection(connString))
            {
                //make our command and dispose at the end
                using (var copy = new SqlBulkCopy(conn))
                {

                        //Open our connection
                        conn.Open();

                        ///Set target table and tell the number of rows
                        copy.DestinationTableName = "BulkImportDetails";
                        copy.BatchSize = dt.Rows.Count;
                        try
                        {
                            //Send it to the server
                            copy.WriteToServer(dt);
                            Feedback = "Upload complete";
                        }
                        catch (Exception ex)
                        {
                            Feedback = ex.Message;
                        }
                }
            }

            return Feedback;
       }

Also most there, lets amend out HomeController yet again to now run our new bulk copy function.

[HttpPost]
        public ActionResult Index(HttpPostedFileBase FileUpload)
        {
            // Set up DataTable place holder
            DataTable dt = new DataTable();

            //check we have a file
            if (FileUpload.ContentLength > 0)
            {
                //Workout our file path
                string fileName = Path.GetFileName(FileUpload.FileName);
                string path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);

                //Try and upload
                try
                {
                    FileUpload.SaveAs(path);
                    //Process the CSV file and capture the results to our DataTable place holder
                    dt = ProcessCSV(path);

                    //Process the DataTable and capture the results to our SQL Bulk copy
                    ViewData["Feedback"] = ProcessBulkCopy(dt);
                }
                catch (Exception ex)
                {
                    //Catch errors
                    ViewData["Feedback"] = ex.Message;
                }
            }
            else
            {
                //Catch errors
                ViewData["Feedback"] = "Please select a file";
            }

            //Tidy up
            dt.Dispose();

            return View("Index", ViewData["Feedback"]);
        }

Finally

Well that’s it, all working. We have covered a number of topics here. File upload, Reading a CSV file and bulk copying data to a database.

Full project and database is available for download. (See right hand navigation)

If you found this helpful and would like to buy me a beer to say thanks, please

@ArranM