Color Picker Tool in Visual Studio IDE


Hello Developers,

I just thought of sharing a nice ‘n’ cool feature of Visual Studio IDE, i.e. Color Picker tool. In day to day life developer needs several color codes to give a nice look to their pages or sites. And they struggle to get it and at last they download some external tools to do this job for them.

But its something we can do within the VS IDE itself, which is cool n hidden(not known to maximum) developers, as its a bit of trick to enable the color picker. One you do it, you would love this. Let me explain the steps for the same.

STEP 1:

Right click on your any of the CSS class and choose “Build Style” option as below

STEP 2:

Choose “Color” option either from font tab or background tab

STEP 3:

Click on “Select

STEP 4:

Hit Alt + Tab to come out of Visual Studio IDE and go to the doc/any pic/ desktop/any where to pick you color. Then hit again Alt + Tab to get the above window.

STEP 5:

Click on “Select” and take the picker to your selection. Now you should be able to get the color code.

 

Try yourself and enjoy !!!!!

With Personal Regarrds

Swagat

 

 

Advertisements

Image Optimization technique to increase your Web Site performance!!!


Hello Web Developers,

This might be a very interesting topic to debate with. For all web developers Web Site performance is only one area, where we get struck by looking into different aspect to deal with. Some of are like Code Refactoring, DB Transactions, Server Performance etc.

But, I should say the major performance gaining area would be the amount of content we display. The less we display, the better is the performance…Is not it???

Generally, there are two kinds of content we display

1) Internal Resources

2) External Resources

Internal Resources are like the text we display on a Web Page. And the external resources, which are getting called from out of the Web Page, like Images, CSS, JS files.

So, most of the Web Sites have their 90% of content as External Resources. These resources cannot be ignored. How about we decrease 90%  to 10-15% or even 1% with considering all resources?

Sounds cool!!!  Now think about, how would it affect your performance????

In this article, I’ll concentrate upon one resource optimization i;e Image Optimization.

Image plays the major part to give richness to the Web Sites. We can not ignore this either. However we can optimize the images. For this we can use different Image Optimization techniques like CSS Sprite, Inline Base-64 Encoding Image Optimization.

We already have a ready to go framework in-hand to implement with, developed by Microsoft.NET. Its ASP.NET Sprite Image Optimization Framework.

The objective of this image optimization technique is to minimize the HTTP request for the HTML page to load. So, ultimately this framework gives us the way to reduce the external resources (images).

Microsoft.NET has built this framework using below technologies

1)      Sprite Image Optimization

2)      Inline Base-64 Encoding Image Optimization

This framework is built in order to automate some of the process, which normally consumes development time and providing the optimized image (sprite or inline) based upon browser detection.  CSS Image Sprite is the core concept to achieve through this framework. This can also be achieved without using this Framework. How? : Using only CSS. Below link can give you the basic idea upon CSS Image Sprite. But in this case we need to do manually, which is automated in this framework as below

  • Generating Sprite Image
  • Positioning

CSS Image Sprite: http://www.w3schools.com/css/css_image_sprites.asp

Here I’ll give a brief note on both the techniques..For more details you always can refer the links mentioned at the end of this article.

Sprite Image Optimization:

This approach will reduce the number of requests to the server. And oppose the traditional way of requesting server each time the external resources (Image) loads.

So, the performance of the web application would definitely be better than the traditional approach.

You can find the difference between Sprite and traditional way of loading images in the below examples. In-case of SPRITE, there are only 2 HTTP GET Requests which can be easily compared with the screen with multiple images loading with multiple GET Requests.

Some of the advantages are like

  1. Image is loaded without any quality loss. Image compression level can be configured with the help of optimization settings.
  2. Multi browser support.
  3. Better performance for low-end Mobile Browsers.
  4. Rich User Interface can be achieved, as the images always add richness to the application.
  5. Sprite framework automatically generates the CSS and markups for displaying the image and can determine which of the two approaches to use based on the user’s browser.

Primary Challenges

  1. While combining the various images into a single sprite isn’t rocket science, it can be a challenging and time-consuming task for a developer who lacks the image editing tools or experience to create a sprite, and
  2. Correctly displaying a particular image in the sprite requires knowing the image’s dimensions and offset within the sprite, as well as knowing the appropriate CSS rules to display just that portion of the sprite.

Inline Base64 Encoding Image Optimization

This technique allows us to embed the image into the Web Page, so that there will not be any external resource and web page will treat Images as internal elements. Using this we can reduce the number of HTTP requests to null.

But this technique is not much reliable to the lower version of browsers. This works for latest WebKit and Mozilla. So, in case of Mobile application, it would be the biggest limitation as maximum devices would not have these browsers support. And images are ignored by web crawlers.

For more detail with example you can refer to the below links:

1) http://www.4guysfromrolla.com/articles/101310-1.aspx 

2) http://dotnetslackers.com/articles/aspnet/CSS-Sprites-and-the-ASP-NET-Sprite-and-Image-Optimization-Library.aspx#s5-displaying-images-using-css-sprites

Cheers!!!!

Swagat

Caching On BlackBerry Browsers


Hello Mobile Web Developers,

As we all know BB mobile devices are one of the most popular and widely used by Mobile Users all over the world. So, this is obvious for any mobile web developer to build the Application to run on BB browsers. While testing on BB devices or emulators you’ll see mostly rendering issues. But I am not going to explain about those issues. Here I’ll share something “Good to Know” concept very specific to BB browsers caching.

BlackBerry browser has built in caching mechanism. In general caching mechanism is used to increase the UI experience and reduce reloading the content again and again. So, for this reason BB has done a good thing by introducing this default caching.

But think about the dynamic content on your application and needs to load based upon user selections or inputs. In these cases the caching will cause issue by not refreshing on page refresh. No matter what, the page will get the old data on each refresh. This is not GOOD!!!!! Right…

So, what’s the solution to this????

We need to tell the browser that the particular page in not asking for caching…Means we need to modify the particular page request header with no-caching elements.

This can be done by adding the <META> tag or through code-behind also.

**************************************************************************************************

<meta http-equiv=”CACHE-CONTROL” content=”NO-CACHE” />

<meta http-equiv=”EXPIRES” content=”0″ />

**************************************************************************************************

 

But this could not be the solution for all BB models. So its better to include the below lines of code into your MasterPage or BasePage, if you want it for entire site. Else do it for particular pages.

 

**************************************************************************************************

HttpContext.Current.Response.Cache.SetAllowResponseInBrowserHistory(false);

 HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);    

HttpContext.Current.Response.Cache.SetNoStore();   

Response.Cache.SetExpires(DateTime.Now.AddSeconds(0));

**************************************************************************************************

 

Cheers!!!!!

Swagat

 

How do you recognize Mobile Browser??


Hello Developers,

You all might have noticed when you browse any popular sites from any mobile device, your browser gives you a mobile compatible version of the same sites not the site you see on the desktop or laptop..Right!!!!

HOW DO THEY DO THAT…

Answer is very simple…They recognize the “User Agent” and do the tweaking.

User Agent holds the description about the browser, operting system, browser version, OS version etc. We can easily get this from the request header.

For example:

Mozilla/5.0 (Linux; U; Android 2.2.1; de-de; X2 Build/FRG83) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

This example shows the request has come from an Android device. Similarly there are different USER AGENTS for different devices. You can easily get this by using Javascript or Code Behind.

Javascript:  Using Navigator object. As

navigator.userAgent

ASP.NET CODE BEHIND: Using Request object

Request.ServerVariables[“http_user_agent”];

Now you can write a static helper method to recognize the requested device as below

public static bool IsMobileDevice(string userAgent)   {

userAgent = userAgent.ToLower();

return userAgent.Contains(“iphone”) |

userAgent.Contains(“android”) |

userAgent.Contains(“blackberry”) |

userAgent.Contains(“palm”);

}

Similarly you can have a Dictionary or List of devices and get the peroper device through these objects.

Thanks for reading this article.

With Personal Regards

Swagat

Mobile Web Development Basics


Hello Developers,

This article is to share few basic notes regarding Mobile Web Application development. I am sharing few of the external post those I found very useful for a mobile web developer.

1) http://www.utexas.edu/web/guidelines/mobile.html

A growing number of users have portable devices like cell phones or portable digital assistants (PDAs) that they use to access information on the Web. The University has developed a Web site for mobile users at www.utexas.mobi. The guidelines below are intended to assist Web developers in preparing mobile-friendly content and applications. The W3C Mobile Web Best Practices Draft also has valuable information on developing for mobile devices.

Developers might notice that mobile-friendly sites and accessible sites have many common features including useful ALT text, single column design, no frames, no pop-ups, no Javascript, and no dynamic menus………………….

2) http://www.w3.org/standards/webdesign/mobilweb

The widespread deployment of Web-enabled mobile devices (such as phones) make them a target of choice for content creators. Understanding their strengths and their limitations, and using technologies that fit these conditions are key to create success mobile-friendly Web content.

See also the Mobile Web Initiative pages…………….

You can read through the above posts and I’ll be posting very good articles in near futures.

With Personal Regards

Swagat

How to recognize javaScript is enabled or not in browser?


Hello Developers,

As we all know Javascript is the most popular scripting language for all Web developers. But always there is a question from other end(customers). Question is something like this

If browser does not support JavaScript then what will happen to the JS logic?

Simple answer to this……..the JS logic will never work..:P

But we can think of some alternative like, why not ask the end user to enable the Javascript for your web application. Sounds crazy right!!!

But we have to go in this way. how do you do that?

This solution is simple…just include a HTML tag with few message then you are done. You can see below for example

<noscript> javascript is not enabled on your browser!!!!!!!! </noscript>

This <noscript> tag will do the work for you. As soon as user browses your site with Javascript disabled, this tag will execute and show the particular message. Otherwise this tag will never execute.

You can also try some samples and test in multiple browsers. this should work for you.

Thanks for reading this article.

With Personal Regards

Swagat

Web.Config conflict issue


Hello developers,

In this article i am going to describe an interesting topic regarding ASP.NET web application hosting issue due to Web.Config configuration.

I want to give an live example which would make this issue more easier to understand…

When I was working in a Web Application(WAP A), it has 3 sub Web Applications(WAP B, WAP C, WAP D). All applications were havng their own solution and project file. While development there were no config issues as I directly compile the code and run.

But the moment I pushed one of the Web Application(WAP C) into the server after creating its virtual directory then I met an issue called Web.Config conflict issue. The WAP C application was throwing errors on Config file. You must be wondering with this. you might think also that I could have done some wrong Virtual directory settings. Ok you would get your all answers below.

OUR SITE AND VIRTUAL DIRECTORY STRUCTURE ON SERVER

The setups were like below

-> Root( Web Site – WAP-A.com)

-> Virtual Directory( WAP-A.com/WAP-B/)

-> Virtual Directory( WAP-A.com/WAP-C/

-> Virtual Directory( WAP-A.com/WAP-D/)

And the Directory structure were like below

WAP A was inside D:/WAP A/ directory.

And all others were inside D:/WAP A/ like D:/WAP A/WAP B/.

When I completed the virtual directory setup for WAP B then I got the below error while running  http://WAP-A.com/WAP-B/

Configuration Error

Description: An error occurred during the processing of a configuration file required to service this request. Please review the specific error details below and modify your configuration file appropriately.

Parser Error Message: The entry ‘asp:System.Web.UI:System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35’ has already been added.

Source Error:

Line 30: <pages validateRequest=”false”>

Line 31: <controls>

Line 32: <add tagPrefix=”asp” namespace=”System.Web.UI” assembly=”System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″/>

Line 33: <add tagPrefix=”ajaxToolkit” namespace=”System.Web.UI” assembly=”System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″/>

Line 34: <add tagPrefix=”ajaxToolkit” namespace=”AjaxControlToolkit” assembly=”AjaxControlToolkit”/>

And when I tried commenting the above tags in WAP B config file then it threw an issue in the below line

Line 80: <add name=”ScriptModule” type=”System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″/>

Again I commented the above line in WAP B config file, then it threw another error as below

Line 71: <add verb=”*” path=”LanappCaptchaa.aspx” type=”Lanapp.BotDetectt.CaptchaaHandler, Lanapp.BotDetectt”/>

Above was the assembly info for a 3rd party DLL. It could be any thing.

Then I included the particular DLL into the WAP B bin folder and the site worked fine.

Just think why all these issue happened while hosting, and I never faced this on development phase.

Reason-

When we host any virtual directory under the site which has the Config file with same tags, then the Virtual Directory site considers the tags as duplicate tags in its Web.Config file. The Parent chile relationship would be generated in such cases. So the Child site would inherit the properties or tags in Web.Config file from the main or root site. This is the reason why the 3rd party DLL assembly info issue came up. Because the child site got the info from parent config file that it needs the assembly configuration in the solution. So after placing the proper DLL the issue got resolved.

Hope the above explanation helps you all in understanding this issue. Also make sure that you create the same environment on your development phase before publishing into production. it helps us to avoid such kind of unknown issues.

Thanks for reading this article.

With Personal Regards

Swagat