How to crack browser cache issue?

When we access any web application, our browser hits the server and gets all the required resource/content files and cache those for further requests to avoid latency and improve performance of the application.

This browser cache will be a problem in case if there is any changes to these resource or content files at server end, and these changes should reflect whenever user visit this application for the next time. But in most of the cases the browser will check for these files in their cache. If it founds then it won’t get latest files from server and lost the latest changes at client end.

To solve this issue we need to inform the browser that there are some changes to the files (JavaScript or CSS or images) and this time pick it from the server and update in your cache. To do so we need to append some query string kind of text at the end of each file, such that every time this string changes browser/cache-system treats it as a new file and requests the server for the latest version.

Following are the different approaches can be used.

Static Approach

Whenever the files are updated, all references to the files could be manually updated to increment a version number as follows.

<script type="text/javascript" src="~/Scripts/config.js?v=1"></script>

If there is any updates now increment the version from 1 to 2 as below

<script type="text/javascript" src="~/Scripts/config.js?v=2"></script>

Note: Instead of number we can have any number or string which uniquely identifies it for example may be any hash string or GUID string.

Advantages

• Browser will request for new file request in case there is a change in version string. If there is no change then it will get from its cache system and improves performance.

Disadvantages

• If we forget to update or change the version string at any file then the functionality might not work as expected. This can be avoided in case we are using any bundling tools like gulp or web pack.

Dynamic Approach

In this approach, developer always appends current server date time ticks such that every time a browser treat it as a new request and always get the latest version from the server irrespective of files updated or not.

MVC:  

<script type="text/javascript" src="~/Scripts/config.js?v=@(DateTime.Now.Ticks)"></script>

Advantages

• No need to worry of forgetting to update the version string as every time this will be changed automatically irrespective of changes or updates.

Disadvantages

• There will be lot of performance issue as for every request client browser should request for the file(s).
• It will use lots of bandwidth and especially on slow networks.
• Not much utilizing the browser cache system feature.

 

Happy Coding 🙂

Launched New Technology Site developersfusion.com

Hi Friends,

I have recently launched a new Technology WebSite www.developersfusion.com .

 

About Developers Fusion

Developers Fusion is a place where the professionals can share their experience and views contributing knowledge to the developer’s community. A successful professional, learns, explores, matures and finally contributes.

The developersfusion.com works with an idea, that has a big vision of bringing Technology to the cozy of your room wherever you are, and make learning comprehensive and exploring Technology real simple and easy.

We are dedicated in providing our Readers quality implementation, education, documentation and solutions. Our ultimate goal is to provide our readers with appropriate solution to their technical questions and needs. The developersfusion.com personifies the passion for Software Technology, delivers power in the technology and the skills associated with it, and enhances the productivity of professionals who shape the software field.

The developersfusion.com believes that it is vital to make learning Technology easy and effective and help its readers, technical breakthroughs in their future career along with other sessions that make them more informed about things that happen around them.

The Articles section lists articles published from different professionals enabling our readers to learn what’s new in the market and also the experience of the author. The FAQs section enables readers to prepare for answering the interview questions shot at them.

Our Vision

Bringing Technology to the cozy of every developer room wherever you are, and make learning comprehensive and exploring Technology real simple and easy.

Our Goal

Our ultimate goal is to provide our readers with appropriate solution to their technical questions and needs.

 

Hope all you make my new website a grand success by visiting posting and participating in forums etc…,

 

Regards,

Sai Kumar K

Using jQuery allowing Only Alphanumeric Characters in a Textbox

Requirement

Need to restrict the users by entering other than Alphanumeric Characters, if any user enters Non- Alphanumeric Characters then need to trim those Characters and display a message beside the respective textbox saying only Alphanumeric Characters are allowed…

 

Solution:

We have many solutions but using jQuery is the best way to achieve, with this we can use more flexible and reliable Regular expression technology with jQuery to achieve the above requirement.

 

Script Code:

 
 $(function () {

            $("#span_txtFirstName").hide();

            $("[id*='txtFirstName']").keyup(function () {

                $("#span_txtFirstName").hide();

                if (this.value.match(/[^a-zA-Z0-9 ]/g)) {
                    this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, '');
                    $("#span_txtFirstName").toggle(500);
                }
            });

HTML Code:

 
<asp:TextBox ID="txtFirstName" runat="server" Width="200px" CssClass="styled_input"></asp:TextBox>
<span id="span_txtFirstName" class="RegistrationNumericDiv">oops! Only AlphaNumberic Charecters are Accepted.</span>

Explanation:

In the above HTML Code is the normal code as I used asp.Net TextBox control to present this demo, but we can use any technology here as our browser parser can understand only HTML tags so every technology has their own parser to parse their respective language code to HTML code. Next line we have a SPAN tag which is used to hold the message to the user whenever user types a non-alphanumeric character in the respective textbox and this SPAN tag hide/show will be handled in the given jQuery code itself.

As we can see we use the regular expression to validate each character enter by the user and if anything wrong we replace those character(s) with empty string (‘’) and we show the message by toggling the  SPAN tag..

That’s it we are done with our requirement J

Thank you

Happy Coding J

What is CoffeeScript?

CoffeeScript is a little language that compiles into JavaScript. Underneath all of those embarrassing braces and semicolons, JavaScript has always had a gorgeous object model at its heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.

The golden rule of CoffeeScript is: “It’s just JavaScript”. The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript library seamlessly (and vice-versa). The compiled output is readable and pretty-printed, passes through JavaScript Lint without warnings, will work in every JavaScript implementation, and tends to run as fast or faster than the equivalent handwritten JavaScript.

The official website for CoffeeScript is a great place to start

Now Visual Studio includes all the capabilities you need to start writing CoffeeScript………………….

Happy Coding…. 🙂

Java Script code For Numeric Validation

In your html page add the control you want to validate but for this sample i used textbox to demonstrate this code,
in my textbox control i used onkeyup event to validate whether recently entered charecter is numeric or not.
so you can call this Javascript code as your requirement in your project.

Test.html
————

<input type=”text” id=”txt” name=”txt” onkeyup=”txtValidate(this.id)”/>
JavaScript Code
——————-

    function txtValidate(txtid)
    {
    var ok=0;
    var a=document.getElementById(txtid).value;
       
       for(var i=0;i<=a.length-1;i++)
      {
        var j=a.charCodeAt(i);
           for(var k=48;k<=57;k++)
        {
          ok=0;
          if(k==j)
          {
            ok=1;
            break ;
          }
        }
       
      }
      if(ok==0)
      {
        alert(“Only Numeric Values Allowed”);
        document.getElementById(txtid).value=””;
        for(var i=0;i<a.length-1;i++)
        {
         var j=a.charCodeAt(i);
           for(var k=48;k<=57;k++)
        {
          ok=0;
          if(k==j)
          {
           document.getElementById(txtid).value+=a.charAt(i);
             }
        }
        
        }
      }
    }

 

I hope this code helps you.

Thank you….,