Category Archives: Web

A Short List of My Favourite Google Chrome Extensions and Apps

The web browser started out as simple program that allowed access to HTML content. Today, it has become a portal for media content, real time communication, and an extensible hub with 3rd party developed functionality. The history of web browsers is very interesting, starting from the WorldWideWeb browser created by Tim Berners-Lee which was initially used at CERN. This blog post details a few of my favorite chrome extensions and apps, which I use more or less on a daily basis.

Momentum

momentumNewTab.png

Momentum replaces the content in a new tab page in chrome with a personalized dashboard, and some very stunning background visuals. It contains a personalized message,  weather information, favorite links, and a to do list.

Chrome Web Store Launcher

chromeWebStoreLauncher.png

The chrome web store launcher enables you to manage and launch your installed chrome apps, as well as search for new apps. It is also possible to define five favorite applications that come up on top for easy access.

Dark Reader

darkreader

The dark reader extension is very interesting and useful, as it does not just simply invert the colors of the web pages displayed in the browser for easy viewing. Instead, it provides a set of filter and font options, which can be tweaked in order to get an optimal viewing experience that is easy on the eyes.

Turn Off The Lights

turnoffthelights

The turn off the lights extension does exactly what it says: dims the whole web page except the video you are watching. This extension is a simple but very effective tool for giving a somewhat cinematic experience to the videos that you watch, and also helps to focus on the video content.

PDF Viewer

pdfjs

The PDF Viewer extension provides a really cool and lightweight PDF reader right within chrome. I’ve found out that from the time I installed the extension, I have done almost all of my reading in chrome. The main winning points for me was the rendering/scrolling speed, and the ability to navigate between reading and looking up web references from within the browser itself.

Gliffy Diagrams

gliffyapp

The Gliffy Diagrams app is a great tool for all manner of diagramming requirements, from flowcharts to UML views. It has a great collection of diagram types, and some nice themes that can change the look and feel and the colors of the diagrams created.

Postman

postman

Postman is a really great Web/REST API client, where you can test your API with HTTP requests. That being said, it is quite a function heavy app, where you can see request-response history, create custom scripts, and document your API. If your work touches on building HTTP APIs, this tool is a must.

Pixabay

pixabay.png

Pixabay is a simple app which launches the pixabay site where all the images and videos are available for free. They are released from copyright under the creative commons, and can be used royalty free. A great source of free content for media required by designers and content creators.

WordPress

wordpress.png

And finally, the WordPress app which I use to create all my blog posts (including the current one). This app is a very intuitive program, with a clean and neat interface which is a pleasure to use. Compared against logging into the wordpress admin portal to create blog articles, the wordpress app is a lifesaver.

The above list of chrome extensions and applications are some that I use the most, and maximizes browser capability for increased productivity in my work and research. What tools, extensions, and apps do you use for work, play, or study? It would be great to hear about your recommendations and favorite extensions, in the comments section below…

Advertisements

AutoCompleteExtender with data from ASPX code behind

The auto complete functionality is a useful aid where suggestions are displayed when you type into a textbox. You would have come across this in many sites. Looking at how to implement this in an ASP.Net application using the AJAX control toolkit, it was not a complex task, as the great video tutorial here demonstrates. But the video (and many other articles on the web) showed how to use the auto complete extender hooked up to a ASMX file. Almost all the articles described how AJAX retrieves the auto suggestion text via a web service and displays them when the user types into the text box. But my need was to get the suggested text from the code behind of the ASPX file where the textbox was displayed. I needed the AJAX control to communicate with a method in the ASPX code behind, instead of a service. Documented in the following sections is how I got it working.

In case you don’t have the AJAX control toolkit downloaded and integrated with Visual studio, the video here shows how to obtain the toolkit, and set it up in the development environment. I used Visual Web developer 2010 express for the example given here. Opening up the IDE, create an ASP.Net web project and reference the AJAX control toolkit DLL. You can also create a new tab in the toolbox and add the controls to it by selecting the DLL (the steps to do this are in the same video link). Drag a textbox to the default.aspx page, this will be the textbox where the user will type in and get the autocomplete suggestions.

Switching to source view in default.aspx,drag a ToolkitScriptManager from the AJAX control toolkit tab in the toolbox into the source window:

You need a script manager when using the AJAX control tools. The script manager takes care of generating the code to communicate with the back end using AJAX  without doing a post back of the page. ASP.Net AJAX extensions already provide a script manager, but the ToolkitScriptManager inherits from this previous componenet, and is better in performance due to script combining.

Next, drag the AutoCompleteExtender control onto the source window. This will be the AJAX component that specifies which control in the ASPX page gets the auto complete functionality and how:

Some properties in the AutoCompleteExtender have to specified in order for the auto complete functionality to work, and these are shown in the below screenshot:

TargetControlID is the ID of the textbox to which the AutoCompleteExtender is connected. ServicePath and ServiceMethod are the web service path and web method respectively. But as we are retrieving auto complete suggestions from our default.aspx.cs code behind, the ServicePath is left empty, and the ServiceMethod ‘GetNames’ is the name of the static method in the code behind that will return the array of strings triggered by the AJAX request.

The code behind file, default.aspx.cs will contain the method that will return the array of strings to the AJAX control in the ASPX page. The method has to be declared static, and should be decorated with the ‘WebMethod’ and ‘ScriptMethod’ attributes. WebMethod is used to specify that the method is part of a service, and ScriptMethod is used to identify a method that AJAX can invoke. The complete code in the default.aspx.cs is given below:

Some specifics to note:

  • The ServiceMethod can have any name, but it should be declared static, and it should be decorated with the WebMethod and ScriptMethod attributes.
  • The parameters of the method should be ‘prefixText’ and ‘count’, of type string and int, respectively. They are case sensitive and cannot be changed to any other variable name. prefixText is the text we enter into the textbox, sent over by AJAX, and count is the number of characters typed in. They can be used in many ways, specially when retrieving string values from a database.
  • The method should return an array of strings. There are workarounds to return collections and key-value pairs, but they are out of the scope of this post.

When you debug the web application, you should see the auto complete functionality that you have wired up to your textbox, when you type in some text:


I had to type a minimum of three characters before the auto complete kicked in, but this minimum number of characters can be set in the AutoCompleteExtender control, using the ‘MinimumPrefixLength’ property. This basically covers the essentials needed for passing data to the auto complete AJAX control using a method from the ASPX code behind file, instead of  a Web service or WCF service.

Website performance troubleshooting woes…

DynaTrace AJAX edition is great tool for alleviating webapp performance troubleshooting headaches. It can be downloaded for free, and once set up, can trace your browser actions (i.e. the website causing the headache), storing and displaying myriads of key performance indicators. A great thing about the tool is that you can measure and analyze end-to-end performance, meaning you get to peek at whats going on at the web server end. And the ability to trace click events, button events and other minute details along with their metrics and KPI’s are a gift from heaven. The tool can be downloaded from here once you register (registration is free). A great primer for using the tool can be found at this link, where the views and metrics displayed by the tool are explained in great detail.