Minify Your CSS & Javascript With SquishIt

15. April 2012 06:38

API ASP.NET Web 

No one likes if their favourite site is loading up slow. Using CSS sprites instead of using individual images and minify javascript and css files is a way to minimize the request send to the server and also saves you few KBs or may be even MBs. If your site is high on using javacript and CSS then you should minimize them.

I recently used SquishIt to combine/minimize my CSS and javascript files. I found 2 major benefits, first, I am able to combine all of my CSS files into one and minimize it, and second it reduces the request sent to the server to load several .css and .js files. In a typical web application I can have one style sheet and one javascript or jQuery file, but if I am planning to use some plugins then there might be more than one style sheet and javascript files which will get loaded on every page request. Here is an example of a sample web forms application loading two css and javascript files which includes the plugin code. 

Here you can see that there are 4 requests in total to load site CSS and Javascript files. Though in this case the size of the file is less but when you have really large files then it can really affect your site performance and also save MBs in a long run. So, what happens when I use SquishIt? Install the package by firing the below command at NuGet console.

 

SquishIt is not an independent package, it has dependencies which is doing all the work of minifying and compressing CSS and JS files behind the scenes.

 

After the package is installed successfully, time to squish the files. Open the web page or the master page where you are loading CSS and JS files (in my case it is site.master) and add a reference to the SquishIt assembly on the top of that page.

<%@ Import Namespace="SquishIt.Framework" %>

In the head section of your page we can then combine all the CSS and JS files and then render them into ONE single file. There are two different methods to minimize CSS and JS files i.e. Bundle.Css() for CSS files and Bundle.JavaScript() for JS files. Here is an example:

To bundle CSS:

<%= Bundle.Css()
       .Add("Styles/adipoli.css")
       .Add("Styles/Site.css")
       .Render("Styles/squishstyle#.css")
%>

To bundle JavaScript:

<%= Bundle.JavaScript()
       .Add("Scripts/jquery-1.7.1.min.js")
       .Add("Scripts/jquery.adipoli.min.js")
       .Render("Scripts/squishjs#.js")
%>

You can go on adding all the css and javascript files using the Add() method. After all the files has been added call the Render() method. You can say that the Add()method just keep all the files in a stack and the Render() method will combine and minimize the files. If you look closely in the Render() method has a new file name with a (hash) #. The hash symbol is just generates a new unique id of the bundled script.

When you run the application and check the network call stack in your browser, you'll find that the files are not combined. The page is still loading 4 files!? To overcome this set the debug mode to false in the web.config file.

<compilation debug="false" targetFramework="4.0" />

Now if you look in the network call stack, you will find the files have been squished and minimised and compressed!!

And here are my saving statistics:

Without SquishIt:

Four requests in total!!

Name/Path Type Size Content Time Latency
adipoli.css text/css 683B 62ms
/Styles 441B 55ms
Site.css text/css 4.40KB 68ms
/Styles 4.16KB 61ms
jquery-1.7.1.min.js application/x-javascript 109.91KB 80ms
/Scripts 109.65KB 67ms
jquery.adipoli.min.js application/x-javascript 7.57KB 242ms
/Scripts 7.32KB 163ms

The Squish effect:

Two requests in total. Check out the file size and content being loaded. 

Name/Path Type Size Content Time Latency
squishstyle6788C36F832FE70161B88F2D08193F3E.css text/css 2.95KB 80ms
/Styles 2.71KB 72ms
squishjs0F44BB5917C6332E4D49DFCDA5F3556D.js application/x-javascript 98.29KB 91ms
/Scripts 98.03KB 76ms

The same can be done in MVC with this NuGet package.

Currently rated 5.0 by 1 person

HTML5 File Drag and Drop Upload With jQuery and ASP.NET

28. January 2012 12:00

ASP.NET HTML5 Jquery Web 

I came across an article on Tutorialzine which demonstrate file drag and drop upload with jQuery and PHP. As a curious reader, I downloaded the sample files and took a look and also get it running on my LINUX VM. It worked like a charm. But I am a Windows user and .NET programmer, the question is how can I do the same in ASP.NET?

If someone out there can do something in PHP then I can do that in .NET!!

Who said the above line??.....ME!!??.....oh yeah!!! So, to get myself started I used the same downloaded files that I used to check the PHP version of the file drag and drop. The only thing that we are not going to re-use out of these files is the php file. You can delete it if you wish or keep it, it's of no harm to our ASP.NET app.

Updating The jQuery Part

This example uses an awesome plugin from Weixi Yen and you can found the plugin and it's sample usage (documentation) on GitHub. The basic or I should say the default functionality provided by this plugin is to allow users to drag and drop the files from desktop to the browser. But before you actually get started with the plugin, I strongly recommend that you make yourself familiar with the parameters and configurations of the plugin.

Open the script.js file and change the URL to point to the web service or the page which will upload the posted file. Here I want you to pay attention to the javascript function named createImage. This method accepts the file as a parameter and returns the image or file data in Base64 format. This is the data which actually gets posted when the user drops a file to the upload area on the web page. This is all up to you whether you want to use a web service or a normal web page to accept the posted file/data. Here is my script.js file looks like after the changes.

$(function () {

    var dropbox = $('#dropbox'),
		message = $('.message', dropbox);

    dropbox.filedrop({
        paramname: 'pic',
        maxfiles: 5,
        maxfilesize: 100,
        //url: '/Uploader.asmx/Upload',
        url: '/Default.aspx',

        uploadFinished: function (i, file, response) {
            $.data(file).addClass('done');
        },

        error: function (err, file) {
            switch (err) {
                case 'BrowserNotSupported':
                    showMessage('Your browser does not support HTML5 file uploads!');
                    break;
                case 'TooManyFiles':
                    alert('Too many files! Please select 5 at most! (configurable)');
                    break;
                case 'FileTooLarge':
                    alert(file.name + ' is too large! Please upload files up to 2mb (configurable).');
                    break;
                default:
                    break;
            }
        },

        // Called before each upload is started
        //        beforeEach: function (file) {
        //            if (!file.type.match(/^image\//)) {
        //                alert('Only images are allowed!');

        //                // Returning false will cause the
        //                // file to be rejected
        //                return false;
        //            }
        //        },

        uploadStarted: function (i, file, len) {
            createImage(file);
        },

        progressUpdated: function (i, file, progress) {
            $.data(file).find('.progress').width(progress);
        }

    });

    var template = '<div class="preview">' +
						'<span class="imageHolder">' +
							'<img />' +
							'<span class="uploaded"></span>' +
						'</span>' +
						'<div class="progressHolder">' +
							'<div class="progress"></div>' +
						'</div>' +
					'</div>';


    function createImage(file) {

        var preview = $(template),
			image = $('img', preview);

        var reader = new FileReader();

        image.width = 100;
        image.height = 100;

        reader.onload = function (e) {

            // e.target.result holds the DataURL which
            // can be used as a source of the image:
            //alert(e.target.result);
            image.attr('src', e.target.result);
        };

        // Reading the file as a DataURL. When finished,
        // this will trigger the onload function above:
        reader.readAsDataURL(file);

        message.hide();
        preview.appendTo(dropbox);

        // Associating a preview container
        // with the file, using jQuery's $.data():

        $.data(file, preview);
    }

    function showMessage(msg) {
        message.html(msg);
    }

});

Check out line number 10 and 11. I have change the url parameter to the one where my files are going to be posted. It can be a webservice or just a normal web page. The other two parameters maxfiles and maxfilesize defines the number of file that can be uploaded asynchronously and maximum size of the file that can be uploaded in MBs respectively. Also note that the demo that you download from the original source will have a validation that the files that are being uploaded by the user should only be images. If you want to override this rule then uncomment the lines from 33-42. This is it from the jQuery/script part. Now time to move on the server side code.

The Server Side Code

To remind you again that we are posting a file to a web service or to a web page and therefore that code for our web service or on our page will look something like this:

If you are using a web service to upload the posted file:

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string Upload()
{
       HttpContext postedContext = HttpContext.Current;
       HttpPostedFile file = postedContext.Request.Files[0];
       string name = file.FileName;
       byte[] binaryWriteArray = new
       byte[file.InputStream.Length];
       file.InputStream.Read(binaryWriteArray, 0,
       (int)file.InputStream.Length);
       FileStream objfilestream = new FileStream(Server.MapPath("uploads//" + name), FileMode.Create, FileAccess.ReadWrite);
       objfilestream.Write(binaryWriteArray, 0,
       binaryWriteArray.Length);
       objfilestream.Close();
       string[][] JaggedArray = new string[1][];
       JaggedArray[0] = new string[] { "File was uploaded successfully" };
       JavaScriptSerializer js = new JavaScriptSerializer();
       string strJSON = js.Serialize(JaggedArray);
       return strJSON;
}

Nothing fancy or complicated in the above code. Remember, the files will send to the web service one by one and not in a collection and this is the reason I am working with one file at a time and not with file collections. In my case I have used a web service that return me JSON result which I can show it to the user, though it is not necessary, but just in case if you want to have one for your web service you need to use 2 using statements:

  • using System.Web.Script.Serialization;
  • using System.Web.Script.Services;

If you are using a web page to upload the posted file:

HttpContext postedContext = HttpContext.Current;
HttpPostedFile file = postedContext.Request.Files[0];
string name = file.FileName;
byte[] binaryWriteArray = new
byte[file.InputStream.Length];
file.InputStream.Read(binaryWriteArray, 0,
(int)file.InputStream.Length);
FileStream objfilestream = new FileStream(Server.MapPath("uploads//" + name), FileMode.Create, FileAccess.ReadWrite);
objfilestream.Write(binaryWriteArray, 0,
binaryWriteArray.Length);
objfilestream.Close();
string[][] JaggedArray = new string[1][];
JaggedArray[0] = new string[] { "File was uploaded successfully" };
JavaScriptSerializer js = new JavaScriptSerializer();
string strJSON = js.Serialize(JaggedArray);
Response.Write(strJSON);
Response.End();

Same code as I have for the web service, put the above code on the page_load event.

Caution!!

While I was working around with the above code and configuration of the plugin I came across an error that won't allow me to upload heavy files or I should say large files. The error that I received is:

System.Web.HttpException: Maximum request length exceeded

To overcome this error you have make the below configuration in your web.config file inside <system.web>

<httpRuntime maxRequestLength="102400" executionTimeout="1200" />

A word of caution here, though it will solve your problem but:

  • If the maxrequestLength is TOO BIG then you will be open to DOS attacks.
  • The default executionTimeout is 360 seconds. Change it accordingly and only if you are running on really slow connections.

This is it, if you have followed the steps above then try uploading some file. And if you haven't and lazy to put all the pieces together then download the code from the below and try it.

Download: HTML5DragNDrpFileUpload.zip (58.15 kb)

Currently rated 4.4 by 13 people

SocialCounter.NET - .NET Library To Get Social Stats

4. January 2012 14:32

API C# Projects Web 

Few months back I have shared a code snippet on my blog which will get Twitter followers count, Facebook page like counts and Feed readers count. Now I have release a complete set of functions including Google plus counts, Facebook friends count and there will be more to come as I explore more.

You can read in more detail about the library here.

 No Rating

HTML 5: Show Your Support / Tell The World

3. December 2011 12:29

Web 

If you really love working with HTML5 the this is then time to show some support for HTML5. Use the HTML5 badge builder to create a badge and use it on your blog/website to show your support. The badge builder allows you to customize the badge with tech you use with HTML5. You can see the badge I customized with the tech under badge section on the right.

The w3.org site for HTML5 has to offer more than just a badge. You can download HTML5 Logos, stickers, T-shirts, jacket, grey hoodie and beanie to show your love or I must say more precisely show off your HTML5 love. The HTML5 T-shirts are awesome and worth buying if you want to show off. Take a look at HTML5 Logo T-Shirts and buy one if you really like HTML5 and yes if you want to show off and make other jealous.

 No Rating

Upload and Show Image Without Post Back With Jquery

11. October 2011 11:20

ASP.NET ASP.NET MVC Jquery Web 

Previously in a lot of hurry I wrote a post on how to upload files in MVC3 with the help of Uploadify, a famous jQuery plugin to upload files. If you have not heard about it yet, then it is time for you to check and find out what this plugin can do for you. Appending my last post about this plugin (which was not very well written) I tried one more thing with it today. This time I am trying to upload an image and then show it inside a DIV without a post back. If you have the source code from the previous post, then it will be good as you need not to start from the scratch.

I assume that you are a good designer as I am not. I am saying this because I really got a blank head in designing. Therefore it is up to you how you are going to show off the images on the page, I am just telling you a way to do that. I am using MVC3 for this example but it will work for both web forms and MVC. The only difference in MVC and web forms is in the server side code which is responsible to upload the file. If you are using MVC3 then your method to upload the file in the controller will be something like this:

public string Upload(HttpPostedFileBase fileData)
{
        var fileName = this.Server.MapPath("~/uploads/" + System.IO.Path.GetFileName(fileData.FileName));
        fileData.SaveAs(fileName);
        return "OK";
}

As we are using Uploadify, we now have to make changes in some of the parameters of the plugin. The Upload method is inside home controller, so the script parameter of the plugin will be /Home/Upload. For my convenience I have changed the multi and auto parameter to false and true respectively. By now this is the jQuery code I have:

<script type="text/javascript">
$(window).load(
function () {
    $("#fileuploader").fileUpload({
        'uploader': '/Scripts/uploader.swf',
        'cancelImg': '/Images/cancel.png',
        'buttonText': 'Select Image',
        'script': 'Home/Upload',
        'folder': '/uploads',
        'fileDesc': 'Image Files',
        'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
        'multi': false,
        'auto': true
    });
}
);
</script>

In the end I append one more parameter onComplete which gets fired when the plugin finish uploading the file. To get the uploaded path of the image I am using fileObj.filePath and response to check if the file has been uploaded successfully or not. If the response I received after the uploading of the file is completed is ok then I will set the html to show the image in another DIV. Below is the complete configuration of the plugin.

<script type="text/javascript">
$(window).load(
function () {
    $("#fileuploader").fileUpload({
        'uploader': '/Scripts/uploader.swf',
        'cancelImg': '/Images/cancel.png',
        'buttonText': 'Select Image',
        'script': 'Home/Upload',
        'folder': '/uploads',
        'fileDesc': 'Image Files',
        'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
        'multi': false,
        'auto': true,
        'onComplete': function (event, ID, fileObj, response) {
            if (response == "OK") {
                $("#uImg").addClass("loading");
                var htmlString = "<img src=\"" + fileObj.filePath + "\" alt=\"" + fileObj.name + "\" />";
                $("#uImg").html(htmlString);
                $("#uImg").removeClass("loading");
            }
        }
    });
}
);
</script>

Just to demonstrate I have placed an alert message box with the response which got fired on the onComplete event after the image has been uploaded successfully. After this I have created a html string which is actually a html img tag with src and alt tags. I have then set the same html string to another DIV which acts as a holder of the image being uploaded. Here is an output after the image is uploaded. Just to remind you, it is all done without post back.

This is it, try it yourself and I recommend you to check out the documentation of the plugin I used. Check out the other links below and one more thing that I would like you to do is to set the multi property of the plugin to true and the try uploading multiple images. If you end up making something awesome then do share with me/us.

Related Links:

Currently rated 4.6 by 8 people