Minify HTML content in Asp.net and MVC

I have previously blogged about the importance of serving good speed to you user. Poor web performance reduces your customers. As you continue to improve your web performance of your web application, So you will need to look in different ways and save milliseconds for your page load time.

In Previously I have talked about the minification and bundling concept in Asp.net but minifying HTML content is also very important for your web application. 

Generally, i have used Google PageSpeed Insights to check my website performance, as it provides tips to improve overall performance and page load time below is the image of that website.

Google PageSpeed Tool

I have also used GTmetrix to check my website performance it will provide almost every information which I have required to enhance my web application performance.

GTmetrix to check website performance

If you are Asp.net developer, So there is some options are available to minify your HTML content the one of best I have used is Asp.net HTML Minifier.

The Asp.net HTML Minifier is a tool which is simple command line tool that simply removes white spaces in your HTML. The great thing about this tool it is useful for Asp.net webforms, Asp.net MVC Razor view and MVC web forms and plain HTML files. You just provide the path of your website it simply minifies all your content.

I found this tool from one of my favorite blog of deanhume.com it will provide this tool along with source code, So here is the address of that blog.


After downloading this project along with source code extract that project and go to tool folder in that folder you can get HtmlMinifier.exe we can use this .exe in our visual studio so at the time of publishing it will provide the minified version of HTML.

So let's start the implementation of HtmlMinifier.exe

Step 1: Place this .exe file in our project solution So you can access this .exe file and every time when you publish your website so it will minify your content.

Step 2: Open solution explorer in visual studio and go to properties under this PublishProfiles is present open that file, below is a screen shot for your reference.

Solution Explorer

Open that file with the extension of .pubxml and placed this code after property group.

  Minify the HTML
  Target Name="CustomAction" AfterTargets="CopyAllFilesToSingleFolderForPackage"
      Message Text=" Minifying files....." 
      Exec Command="c:\htmlminifier.exe $(_PackageTempDir)" IgnoreExitCode="true"
  Target

Don't forget to replace your htmlminifier.exe file path with your original file path.

pubxml file

That's it you are ready to publish your profile, Save your pubxml file and publish your project so it will run htmlminifier.exe and only minify the HTML files that get deployed. If you see your output window, so it will look like this

Minify Output window

The secret to getting this to work is "CopyAllFilesToSingleFolderForPackage" step in the built.

If you have any query or suggestion, So I'll be happy to help you.

KEEP CALM and READ ON!!!!.    

Ankur Omar

Bundling & Minification in Asp.net MVC

Bundling and minification are two techniques you can use in ASP.NET to improve page load performance for your web application. By using bundling you can combine multiple files into one file and by using minification you can optimize your CSS and javascript file to a greater extent. Using bundling and minification improves load time performance by reducing the number of requests to the server and reduced the file size of requested assets(i.e. Javascript and CSS files)

Sections:

• Overview
• Implementation of Bundling
• Implementation of Minification
• Benefits of using bundling and minification 

Overview :

Bundling and minification primarily improves the performance of page, So by using this all server side files are combined and minify into one so it reduces the number of requested to the server and provide better performance to your web application this process is done at the run time and it also maintains key which indicates the version of file. 

Implementation of Bundling :

As we discussed above by use of bundling we can bundle or combined all javascript and CSS file into a single file to achieve this there are 4 simple steps.

Step 1: Open your solution in visual studio and go to App_Start folder and select BundleConfig.cs (if this file is not present in the App_Start folder, So you should manually add this class and take a reference to System.Web.Optimization). Below is the screen shot for your reference.

Solution Explorer

Open this file and put this code inside you BundleConfig.cs

public static void RegisterBundles(BundleCollection bundles)

{

      bundles.Add(new ScriptBundle("~/bundles/jquery").Include(

                        "~/Scripts/jquery-{version}.js"));

      bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(

                        "~/Scripts/jquery.validate*"));

      bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(

                        "~/Scripts/modernizr-*"));

      bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(

                      "~/Scripts/bootstrap.js",

                      "~/Scripts/respond.js"));

      bundles.Add(new StyleBundle("~/Content/css").Include(

                      "~/Content/bootstrap.css",

                      "~/Content/site.css"));

 }

you can put any number of CSS and javascript file in a single bundle and you also create bundles as per your requirement, Below are the screen shot of BundleConfig.cs file.

BundleConfig.cs

Your 1st step is complete and the longer one is finished.

Step 2 : After all this you need to register this BundleConfig.cs file in Global.asax file under Application_Start event like BundleConfig.RegisterBundles(BundleTable.Bundles);

protected void Application_Start()

{

       AreaRegistration.RegisterAllAreas();

       FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);

       RouteConfig.RegisterRoutes(RouteTable.Routes);

       BundleConfig.RegisterBundles(BundleTable.Bundles);

 }

Step 3: Render this bundle into view by using a small code.

Render Javascript bundle in view you need to call like this @Scripts.Render("~/bundles/modernize")

Render CSS bundle in view you need to call like this @Styles.Render("~/Content/CSS")

The name which is present under Script.Render and Styles.Render is the same name which you have provided at the time of creating a bundle name in bundleconfig.cs

Step 4: To enable bundling you need to follow one more step under the web.config file you need to change compilation debug=" true" to false like this

compilation debug="false" targetFramework="4.5" 

by doing this your bundling will start and you can see this by running your project.  

Implementation of Minification: Minification is a technique where unwanted spaces and commented code have been removed due to this we can reduce the size of file content.

The process of minifying CSS and javascript is same as bundling only one keyword is required to process this. 

BundleTable.EnableOptimizations = true;

put this line in bundle config.cs, After that, your minification will work in run time and run the project in debug="false" then you can see the js and CSS files are bundled and minify also.

below I have attached the screen shot of bundleconfig.cs file.

BundleConfig.cs file after minification code.

Benefits of using bundling and minification: There are a lot of benefits of using bundling and minification it will take less time to get files from the server.

If we are not using bundling and minification technique so it will take a lot of time to get those file below image will show this.

Before bundling and minification, it will take lot of HTTP request

In the above image, we can see there are so many CSS and javascript file coming from the server and each file takes our time to render. So if we combine those CSS and javascript file and minify those file so it will take less and file size will also reduce, See below image for your reference.

After bundling and minification reduce server HTTP request

In the above image, we can see we can combine all CSS and javascript file into one so less HTTP request is there and it will take less time to render.

Hey, friends thanks for reading this article the motive of this article is how we can improve our website performance by using this technique definitely your website performance will increase and give better output.

This is only a one step to increase the performance of the website, In future, i will provide lot's of technique which will help you for increasing performance.

If you have any query or suggestion, So I'll be happy to help you.

KEEP CALM and READ ON!!!!.    

Ankur Omar

Android Push Notifications using Google Cloud Messaging (GCM), .Net, SQL Server

Google Cloud Messaging(GCM)

As per Google's Documentation "Google Cloud Messaging for Android is a service that helps developers to send data from server to user's Android Application on Android devices". Using this service you can send your data in a timely manner to update user about new information, services, updates etc.
Integrating Google Cloud Messaging in your Android device provides the more good way to pass information to the user and it saves lots of battery.

Some Basic Concepts of Google Cloud Messaging through SQL Server with C#

In this tutorial, I used C# as server side programming language and SQL Server as database and to code, in a C# I used Visual Studio 2013 as an Integrated Development Environment(IDE).

If you want to know more about GCM so please visit the official document of Google here is a link

There is a simple process to learn how GCM work. Below are the steps :

Step 1: When we install any Any Android application so it will go to GCM for registration and provide Application id to GCM.

Step 2: On successful registration, GCM provides registration id to user Android device.

Step 3: After that our Android device sends this registration id to our server and we are stored that registration id in our database i.e. SQL Server to send notification purpose.

• When we want to send the notification to a user so we can take user's registration id along with our message and send to GCM Server.

•  After that rest of the work is done by GCM to send the particular message to a particular user with the help of registration id. 

Registering with Google Cloud Messaging

Below are the steps to registering google for GCM

Step 1: Go to Google API's console page and login with your google account and create new project (if you already created so it will take you to dashboard)

Step 2: After creating a project you can see the project id in URL. 

Step 3: Go to Mobile API's section and select Google Cloud Messaging from the list.

Step 4: Click on it and enable this API.

Step 5: After this click on Credentials which is coming below.

Step 6: Provide credentials to your project by adding API name in first dropdown i.e. Google Cloud Messaging and Android in your second dropdown and click what credentials do I need

Step 7: After this create an API key by proving name and package name i.e. (your android package name) and SHA-1 certificate fingerprint.

To get a SHA-1 certificate fingerprint so please run this command from cmd and you will get this key.

$ key tool -list -v -keystore mystore.keystore

After putting all this press create API key and you will get your API key please copy this API key.

Next set is to create database and table where you can store Application id of the user to send push notification from the server.

And finally, you can use visual studio to send the request to a GCM for push notification.

Create new project in visual studio

Step 1: Open visual studio (i am using vs 2013 steps are same) to learn how to create new project in visual studio so please visit my last blog "How to create .net project in visual studio"

Step 2: Add new web form in current project and design front end as per your requirement by using this code you can set title, description, an image of a notification.

Step 3: Copy and paste below code and call that method from the button click and fill rest of the fields which is useful.


public void Pushnotification(string registrationid, string titletext, string description, string ImagePath, int ID)
{
       string regid = registrationid;
       var applicationid = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
       var senderid = "xxxxxxxxxxxxx";
       var value = titletext;
       var _description = description;
       string _imgpath = imgpath;


       WebRequest tRequest;

       tRequest = WebRequest.Create("https://android.googleapis.com/gcm/send");

       tRequest.Method = "post";

       tRequest.ContentType = " application/x-www-form-urlencoded;charset=UTF-8";

       tRequest.Headers.Add(string.Format("Authorization: key={0}", applicationID));

       tRequest.Headers.Add(string.Format("Sender: id={0}", senderid));

       string postData = "collapse_key=score_update&time_to_live=108&delay_while_idle=1&data.title="

                + value + "&data.img=" + _imgpath + "&data.desc=" + _description + "&data.ID=" + ID + "&data.time=" + System.DateTime.Now.ToString() + "&registration_id=" + regid + "";

            Byte[] byteArray = Encoding.UTF8.GetBytes(postData);

            tRequest.ContentLength = byteArray.Length;

            Stream dataStream = tRequest.GetRequestStream();

            dataStream.Write(byteArray, 0, byteArray.Length);

            dataStream.Close();

            WebResponse tResponse = tRequest.GetResponse();

            dataStream = tResponse.GetResponseStream();

            StreamReader tReader = new StreamReader(dataStream);

            String sResponseFromServer = tReader.ReadToEnd();

            tReader.Close();

            dataStream.Close();

            tResponse.Close();

}

Registrationid is a user device id which we can store in the database.
titletext is a title of your notification.
description of your notification.
imagepath is a path of your image which you want to send through push notification.
id is a unique id of your client.

Applicationid is your API key which you are generated in google API's.
SenderID is your project id which you are generated in google API's.




If you have followed above procedure correctly so now you are able to send Android Push Notification through Google Cloud Messaging using .Net.

Please run this project and I'll be happy to solve the errors if you got any.

KEEP CALM and READ ON!!!

Ankur Omar

Umbarco the complete CMS

Umbraco CMS 

Introduction:

Umbraco is a fully-featured open source content management system with the flexibility to run anything from small campaign or brochure sites right through to complex applications for Fortune 500's and some of the largest media sites in the world.

Umbraco is easy to learn and use, making it perfect for web designers, developers and content creators alike.

How to install or download Umbraco cms 

There are multiple ways to download Umbraco-cms :

1. Install through a NuGet package. Open visual studio goes to tools and open NuGet package and type Umbraco and install it will automatically install all dependencies and make sure to update your web.config file if you install Umbraco in the existing project. 

2. Download Umbraco project through https://our.umbraco.org/  here is a link where you can download the latest version of Umbraco  download link

3. If you want a complete control over Umbraco-cms, So you can download a complete source code of Umbraco from here download link

but it is the little bit tricky to install complete solution of Umbraco so here are the steps to install it completely and working Umbraco solution

Step 1: Download complete solution of Umbraco and unzip it.

Step 2: Install Git into your system if it is not present here is a link. Git is available for different types of an operating system so choose as per your requirement.

Step 3: Open the command prompt in administrator mode and go to your project solution directory and run build.bat file which is present in the build folder.

when you run this from the command prompt so you will see so many packages will install in your project and rest of the missing file will come from server below are the screenshot for your reference

 After completing this your project is ready to work

So open your solution in visual studio and simply press F5 to start when you run this so Umbraco will run in  IIS express and it will open your website in the default browser.

When your website is started so you can get installation page on a screen it will take Name, Email Address, and Password.

The default database of Umbraco-cms is SQL Server Compact, If you want to change database so after filling all details click in customize so new pop up will open just like below image.

In this pop up there are so many options of database are present like Microsoft SQL Server Compact, Microsoft SQL Server, Microsoft SQL Azure, MySQL and Custom connection string choose as per your requirement and click on install

It will open another pop up where you can choose your theme after that your website is ready to work.

If you want to open an admin panel of Umbraco website so simply go to http://localhost/umbraco it will redirect to admin panel

Admin panel contains lots of thing like you can install the theme as per your requirement and install packages or upgrade packages here is a link where you can start learning Umbraco-cms.

Learn more about Umbraco and their packages so please visit https://our.umbraco.org/documentation/


KEEP CALM and READ ON!!!

Ankur Omar

How to create a Dotnet project

To create a .Net project you need some basic tool to start.

First of all you need any version of Visual Studio IDE (Integrated Development environment) after installing Visual Studio to our local system automatically install .Net framework, Below is an Image of visual studio 2013 when you open visual studio 2013.

After installing when you open a visual studio so it look like above image this is an image of visual studio 2013 that's it installation part is complete.

Some thing about Visual Studio :

"Visual Studio is a complete set of development tools for building ASP.NET Web applications, XML Web Services, desktop applications, and mobile applications. Visual Basic, Visual C#, and Visual C++ all use the same integrated development environment (IDE), which enables tool sharing and eases the creation of mixed-language solutions. In addition, these languages use the functionality of the .NET Framework, which provides access to key technologies that simplify the development of ASP Web applications and XML Web Services."

Visual Studio is a IDE to develop new websites, windows project, web services, windows services etc. This IDE is very simple to understand and develop lots of thing. In market their are so many versions of visual studio is present like visual studio 2013, visual studio 2012, visual studio 2010, visual studio 2008, visual studio 2005 etc  but the latest version of visual studio is visual studio 2015 , So don't worry if you any of this version so you can start.

Here we ready to develop any project in visual studio. 

Step 1 : Open Visual Studio (I am using visual studio 2013 so don't get worry steps are same in any version of visual studio)

Step 2 : Go to file which is present in top left corner - New - New Project. When you click on project new wizard will open just like below image.

As you can see in left side their is so many templates is present like visual basic, visual C#, visual C++ etc, So click on Visual C# and it will open all templates of C# in right side, So select Asp.net Web Application template and provide Project Name, Location and Solution name and click OK.

When you press OK so another wizard will open, This wizard will come in visual studio 2012 and upgrade version of visual studio, If you are not getting this wizard so don't get panic your solution are ready in that case.

Below are the image of wizard

If you get that wizard so go tho empty template and select web form and press OK.


That's it your project is ready to work.

Open Solution Explorer (if you are unable to find solution explorer so go to view and click solution explorer)

In Solution Explorer right click and new pages and start working on it.

Conclusion : In above article i have explained how to start with visual studio. This part contains only basic level of visual studio and in next article i will explain how to create a basic application using asp.net with c# and what type of tool is present in visual studio which have make visual studio a best IDE to development.


KEEP CALM and READ ON!!!

Ankur Omar