Cache Boosting on your websites

What is a browser cache ?
The browser cache is a temporary storage location on your computer for files downloaded by your browser to display websites. The browser stores the static content of a website such as java script files , style sheets and images .

When you revisit a website, the browser checks if the content is already present in cache or not . If present it loads the files from the cache else it downloads from the server and keeps a local copy in the cache to serve next time . This reduces bandwidth usage on both the user and server side and allows the page to load faster. Hence, the cache is especially useful when you have a slow or limited Internet connection.

The cache stays till the expire time if not cleared by the user . Also it gets reloaded when the user does a hard refresh (using Ctrl + R) .

The problem arises when you are in process of upgrading the website . After you upgrade your style sheet or java script file , your clients will still be viewing the older version of the files which are cached on their local system . So to over come this we need to do little trick .

Suppose you have a style sheet and you refer them like below –

<link rel=’stylesheet’ href=’css/style.css’ type=’text/css’/>

The browser keeps track on the cache using the URL . So just give a version number in the URL which will not affect the style sheet .

<link rel=’stylesheet’ href=’css/style.css?ver=1.0.1′ type=’text/css’/>

and when you update your website to the next version you should update the link like below so that all your users will have a fresh copy of your website

<link rel=’stylesheet’ href=’css/style.css?ver=1.0.2′ type=’text/css’/>

How to delete a remote tag in git

If you need to delete a remote tag named – `oldtag` use the below command

git tag -d oldtag
git push origin :refs/tags/oldtag

That’s it. You are done.

Disable text selection in CSS

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
usage
<p class="noselect">
  Unselectable text.
</p>

How to redirect to a page in Javascript

You can use any of the tricks shown below

Javascript way

var url = "http://amiyasahu.com" ;

// similar behavior as an HTTP redirect
window.location.replace(url);

// similar behavior as clicking on a link
window.location.href = url;

window.location.assign(url);

JQuery way

$(location).attr('href',url);          
$(window).attr("location",url);      
$(location).prop('href',url);

If you want to redirect after certain amount of time , then you can use setTimeout function

Redirect after some time

var delay = 1000; //Your delay in milliseconds

setTimeout(
    function(){
        window.location.href = url;
    }, delay);

How to disable copy cut paste in JQuery for input fields

$(document).ready(function(){
    $('selector').bind("cut copy paste",function(e) {
        e.preventDefault();
        alert('cut,copy & paste options are not allowed !!');
    });
});

Handle copy cut paste events in JQuery

$(document).ready(function() {
    $('selector').on('copy', function(event) {
        console.log("Handle copy event")
    });
    $('selector').on('cut', function(event) {
        console.log("Handle cut event")
    });
    $('selector').on('paste', function(event) {
        console.log("Handle paste event")
    });
});

Shortest method to swap variables in Javascript

var a = 10 , b = 20 ;
console.log("a = " + a + " , b = " + b);  // a = 10 , b = 20
b = [a, a = b][0];                        // swap the variables
console.log("a = " + a + " , b = " + b);  // a = 20 , b = 10

Best way to check if a element is a text node or not in Javascript

    function isTextNode(elem){
        // If this is a text node, return true.
        return( elem.nodeType === window.Node.TEXT_NODE );
    }

Best way to get text nodes in JQuery

$('selector')
    .contents()
    .filter(function(){
        return this.nodeType === window.Node.TEXT_NODE && $.trim(this.nodeValue) !== '';
    });

Best way to get next text node in JQuery

$.fn.nextNode = function(){
    var contents = $(this).parent().contents();
    return $(contents.get(contents.index(this)+1));
}

© 2016 Amiya Sahu

Theme by Anders NorénUp ↑