Desktop Notifications In HTML5 Nov 17, 2013 HTML5   WEB

If you are using Google chat on your browser you can see a notification pop-up when a new chat message arrives. I don’t use Google chat or GTalk a lot for communication so I am not very well versed about its over all functionality and coolness. But one thing that always got my attention in the past was the notification that I get on my desktop from Google. This is a very cool feature and my colleagues find it a very important feature of chat as it get their attention immediately.

HTML5 now gives us the ability to the developers to show Google like desktop notifications with a very little effort. Here is how you can accomplish this for one of your web applications. I am going to use Notifications API to show desktop notifications.

<!DOCTYPE html>
<html xmlns="">
    <title>HTML5 Notifications</title>
    <input type="text" id="txt" />
    <input type="button"  value="Show as Notification"/>
    <input type="button" value="Show Random Notification"/>
    <input type="button" value="Show Random Notification (with icons)"/>

This is the plain HTML with controls in place. I have a text box and three buttons which will call a JavaScript function to show the notification on the desktop. The first button will show the text entered by the user as a notification. The second button will show a random message as a notification and a third button will show the same random message but this time with an icon. To see it in action lets add the JavaScript code.

function ShowTextAsNotification() {
    ShowNotification("Custom Notification", document.getElementById("txt").value);
function GetRandomText(ico) {
    var Quotes = ["Any fool can write code that a computer can understand. Good programmers write code that humans can understand.",
                  "Copy and paste is a design error.",
                  "I had a life once. Now I have a computer.",
                  "Before software can be reusable it first has to be usable.",
                  "Software sucks because users demand it to."];
    if (ico == false) {
        ShowNotification("Famous Quotes", Quotes[Math.floor(Math.random() * (1 - 5 + 1) + 5)]);
    else {
        ShowNotificationsWithIcons("Famous Quotes", Quotes[Math.floor(Math.random() * (1 - 5 + 1) + 5)]);
function ShowNotification(title, body) {
    Notification.requestPermission(function (perm) {
        if (perm == "granted") {
            var notification = new Notification(title, { body: body });
            //Un-comment the below line if you want to close the notification after a certain period
            //It not working on Chrome...I don't know why!!
            //notification.onshow = function () {
            //    setTimeout(notification.close, 5000)
function ShowNotificationsWithIcons(title, body) {
    Notification.requestPermission(function (perm) {
        if (perm == "granted") {
            var notification = new Notification(title, { icon: "Bomber.ico", body: body });

The is pretty self-explanatory. The Notification API uses the Notification.requestPermission function to get the user consent before showing the notification on the desktop. The API documentation states that there are 3 permissions:

  • default: This is equivalent to denied, but the user has made no explicit choice thus far.
  • denied: This means user does not want notifications.
  • granted: This means notifications can be displayed.

On line 22 in the above code, you can see that the API checks for the request permission from the user. When it does that the user is prompted to either allow or deny the access of the API. You will be only asked once for this permission.

HTML5 desktop notification security approval

The perm object is then checked for the permission, if “granted” then show the desktop notification to the user else there will be no notifications for the user. After the permission is granted from the user, initializes an instance of a Notification with title and body. You can say that title is the heading of the desktop notification and body is the text of the notification. You can also have an icon for the notification by setting the icon property.

Run the sample and enter a text in the text box and click on the button labeled “Show as Notification”. As soon as you click the button, if you are running it for the very first time then you will be prompted by the browser to allow or deny the access or it will show the notification at the bottom right corner of your desktop.

HTML5 desktop custom notification

In the above notification, Custom Notification is the title and “This is a desktop notification“ is the body.

Click the second button labeled “Show Random Notification”. Clicking this button will generate the same desktop notification but every time you click it it will generate a random message from an array and show it as a notification.

HTML5 desktop custom notification

If you click the second button multiple times you will 3 notification at a time. The new notifications will be shown at the top of the current notification like this.

HTML5 multiple desktop notification

In case you click the button more than 3 times, you still be able to see these notifications until you close the one which are already visible. Once you close any of the notification the one in the queue will become visible.

The icon can be displayed in the left portion of these notifications. Click the third button to see it in action. It will display the same random quotes but this time with an icon.

HTML5 desktop notification

The only problem I am facing implementing the Notifications API is that I cannot close these notifications automatically after the set time. You can try using it on your browser by un-commenting the lines in the ShowNotification() function.

Dev Buzz #2 - Bookmarks - 1 JUL 2013 Jul 1, 2013 DEVBUZZ
Devbuzz Image

Awesome Stuff

Web Development


Open Source

  • Attribute Routing – Attribute based routing library for MVC and Web APIs
  • LessCSS – The dynamic stylesheet language
MSDN Style Syntax Highlighting In ASP.NET Jun 30, 2013 ASP.NET

There are many syntax highlighting plugins available on the web right now. Majority of the sites are using javascript based Syntax Highlighter from Alex Gorbatchev. I am using it for my current blog and BlogEngine.NET has it as a default syntax highlighter. It is good because it has a lot of themes to offer and you can also customize according to the look and feel of your blog or site. Moreover it has support for multiple languages which makes it acceptable among most of the bloggers and developers.

I also like the way MSDN and Codeplex style their code. Although it has some flaws like moving the code to the next line if it exceeds the length of the pre or div tags. The library MSDN and Codeplex are using for syntax highlighting is ColorCode. ColorCode is open-source and supports every language specific to Microsoft. The way ColorCode works is totally different than that of any other syntax highlighting library. Javascript based syntax highlighter use CSS for different styles whereas ColorCode uses in-line CSS to set styling for the code.

To install ColorCode you can use NuGet command or add ColorCode reference as a library downloadable from Codeplex. NuGet command:

PM> Install-Package ColorCode

Only Microsoft stack languages are supported by ColorCode. Here is the complete list:

  • XML
  • Java
  • JavaScript
  • SQL
  • C#
  • VB.NET
  • ASPX (C#)
  • C++
  • PHP
  • PowerShell
  • Typescript
  • FSharp

As I mentioned earlier that this library uses in-line CSS and therefore you cannot use it in the windows forms application. You can use the webbrowser control in windows forms application if you want code to render correctly.

This is a sample basic usage of ColorCode.

string code = File.ReadAllText(Server.MapPath("~/Test.txt"));
string finalCode = new CodeColorizer().Colorize(code, Languages.CSharp);
codediv.InnerHtml = finalCode;

First line of the code will read all the text from a file. The second line will initialize a new CodeColorizer class Colorize method which will take 2 parameters, first is the code for which we want the syntax highlighting for and the second parameter is language. I now have the finalCode string which has the code with syntax highlighting. This is the output I have in my browser window.

MSDN Style Syntax Highlighting

It looks pretty good from the front but behind the scenes it’s not that pretty.

MSDN Style Syntax Highlighting Code Behind

ColorCode is an open-source library and is hosted on Codeplex.


Getting Started With Glimpse In ASP.NET MVC Jun 25, 2013 ASP.NET   ASP.NET MVC

When I heard about Glimpse, I thought it like to be another MiniProfiler like stuff or a combination of MiniProfiler and this. But it seems to be more robust diagnostic tool for developers. Here is my experience with this awesome diagnostic tool.

What is Glimpse?

Glimpse is a diagnostic tool for ASP.NET applications which let you see detailed diagnostic information of your web application. Glimpse knows everything your server is doing and displays it straight away to you in your browser. Currently Glimpse is supported for ASP.NET – Web Forms and MVC and PHP and other languages are in queue as well. If you want to contribute to the project as it is open-source, you can contact the project developers here. The Glimpse project is still under development and there are more that 70 bugs reported at Github.

Getting Glimpse & Getting Started

I have used MiniProfile in the past and the major difference between the two tools I noticed is that in MiniProfile you have to make changes in the code to profile or view the diagnostic information. On the other hand Glimpse is just simply plug and play library. If you are going to give Glimpse a try make sure that you use NuGet to get the library. Glimpse comes with lots of configurations and setting them out manually in the application will be a pain just like ELMAH. As we are now living in post-NuGet era, we must use the power of NuGet to do all the hard work and configuration for us. You can get Glimpse depending on the type of project you have. To add Glimpse in MVC application fire the below NuGet command.

PM> Install-Package Glimpse.MVC

For Web Forms

PM> Install-Package Glimpse.ASP

After the command gets completed, take a look at the web.config file where you can see all the configurations. Without paying more attention to the configs, run the application to see Glimpse in action. Unlike MiniProfiler, there were no changes in the code. Before you can actually see Glimpse in action you have to turn it on, and to turn Glimpse on navigate to the URL http://localhost:XXXX/glimpse.axd

Glimpse UI

A cookie is set when Glimpse is turned on. This cookie tells the server to send the diagnostic data to the application. Here is how it looks on my home page.

Glimpse UI Bar

The above screenshot gives you a summarized information of what your application and server is doing. The summary part is distributed in three parts i.e. HTTP, HOST and AJAX. The HTTP segment shows the summary of the diagnostic information that flows over HTTP. In the HOST segment you can also see the name of the controller and action name. AJAX segment shows zero count as there are no AJAX call yet in my application which communicates with the server. This is just a summary which is visible at the bottom right hand corner of the web page. To view more detailed diagnostic information hover the mouse over any of these segments and you get one level more information.

Glimpse UI information bar

If this is not enough for you then click on the big g icon at the bottom right corner.

Glimpse UI information report

The screenshot above just covering one tab out of 12 tabs which have complete diagnostic information about the application.

What else it can do?

Glimpse has extensions that will let you get information about EF, nHibernate, Ninject and many more. You can view the complete list of extensions here which you can use to see what these libraries are doing behind the scenes. Check out the complete list of extensions here.

Moving to production

Glimpse is a diagnostic tool and is very powerful from a developer’s perspective. When moving the website or web application to the production servers, no developer would want to leave Glimpse working on the landing page of your site. So before you move to production you have to turn Glimpse off. To turn off Glimpse you can navigate to the same URL which you have used earlier to turn it on. This is the easy option available, but anyone with the Glimpse handler URL can easily turn it on!? The best approach is to change the setting in the web.config file, so even if the third person has the URL of the Glimpse handler he will never be able to turn it on. To turn off Glimpse permanently set defaultRuntimePolicy to Off. The line in your web.config after the change will look like this.

Once this property is set to Off, there is no way a user can turn Glimpse on without changing its value back to On. Glimpse has a lot more options to explore which I can’t cover in single blog post. I am looking forward on using some extensions now for Ninject and Entity Framework.


Dev Buzz #1 - Bookmarks - 19 JUN 2013 Jun 19, 2013 DEVBUZZ
Devbuzz Image



  • JWERTY – Awesome handling of keyboard events
  • JustGage - JustGage is a handy JavaScript plugin for generating and animating nice & clean gauges
  • Spritely.NET – Best parallax plugin for jQuery
  • DropKick – A jquery plugin for beautiful dropdowns
  • Tipsy – Facebook-style tooltip plugin for jQuery

Visual Studio

Open Source

  • Windows 8 App design templates - More than 70 app design templates
  • MahApps – Make your WPF app look like Windows 8 app
  • MUI – Build Win8 like apps using this library in WPF
  • ModerUICharts – Modern UI (Metro) Charts for Windows 8, WPF, Silverlight
  • Dapper – A simple object mapper in .NET – Micro ORM
  • Mini-Profiler – A simple but effective min-profiler for .NET & Ruby