Most interesting web development hacks, Most web developers don’t know about?

Posted on Posted in Technology

Every programmer face differant challanges in its carrier and by working on these challanges he will find tricks or hacks. I am sharing my list of interesting hacks, I’ve found in my past years :

  1. You can pass arguments into setTimeout and setInterval :
    If you want to pass variables to the function called in the setTiemout. You’d probably think this is the only way to do it:

    var callback = function(a,b){ 
         console.log(a + b); // 'foobar'
         callback('foo', 'bar'); 
    }, 1000);

    But you can accomplish the same thing with this:

    window.setTimeout(callback, 1000, 'foo', 'bar');

    Note that this isn’t supported on IE (not even IE9).

  2. Old String functions :
    If you type in String.prototype into your console, you can use a bunch of old functions you can use to wrap the text in HTML tags (some deprecated HTML obviously):


    …will return this:


    Similarly for strike(), sub(), small(), link() etc.

  3. An HTML element with an ID creates a JavaScript global with the same name :
    Surprising but true, and it’s done by modern browsers as a means of backwards compatibility:HTML :

    <div id="someInnocentDiv"></div>


    console.log(someInnocentDiv);  // <div id="someInnocentDiv"></div>
  4. You can read the text at any XY coordinate on a webpage :
    var x = 50, y = 100;
    var range = document.caretRangeFromPoint(x, y);
    if(range) {
      var word = range.startContainer.textContent.substring(range.startOffset, range.endOffset);
  5. vh & vw (viewport width & viewport height) :
    There are two units in CSS that have a solid browser support, yet they are widely underused:One of the scenarios where we can use vh is a website with about 3-4 scrollable pages of content on which we have some elements. If we want to make each element the same height as the viewport (not the body height), the height: 100%; will not do the trick. Instead, height: 100vh; on each element will give each one the height of the viewport size.To prevent the content from being hiddden if it overflows the height of that element, a min-height can be used.

    .makeItWindowHeight {
       height: 100vh;
  6. You can put multiple statements in an ‘if’ block without using curly brackets like this:
    if (confirm("Do you wish to see two alerts?"))
    	  alert(1), alert(2);
  7. <datalist> tag :‘ tag :
    I think <datalist> tag is interesting and not well known. ThisĀ  tag specifies a list of predefined options for an ‘<input>’ element. The ‘<datalist>’ tag is used to provide an “autocomplete” feature on ‘<input>’ elements. Users will see a drop-down list of pre-defined options as they input data.

    <input list="browsers">
    <datalist id="browsers">
       <option value="Internet Explorer">
       <option value="Firefox">
       <option value="Chrome">
       <option value="Opera">
       <option value="Safari">

    Use the <input> element’s list attribute to bind it together with a <datalist> element.‘ element.

  8. If you see yourself getting alerts on a page but don’t know where the alert comes from, you can write , at starting of your page or console.
    alert = console.log.bind(console);

    then instead of alert message you would get the message displayed in the browser console with a line and column number and which file it comes from.

Some CSS selector Hacks :

  1. Select all that are hrefs:
  2. Select all elements that have a class (useful if JS is adding classes somewhere) :
  3. Select an ID, but with the specificity of a class:
    section[id="sideBar"]{color: red}
  4. Style all links that are fully qualified URLs, knowing that ^ means “starts with”:
  5. Need to style a link to a ZIP or a PDF? Totally fine, too. Use the $ which means “ends with”:
  6. Style an image based on one word existing in the alt attribute? Let’s use the space substring selector:
  7. Style an image based on the name of the image file itself? Also doable, even if you’re image is this-image-shot-april-2-2014.png. The | is a hyphen substring selector:

Hope these hacks will help my developer friends, for any further information please post your comment below, You can also share your hacks or tricks in comments as well.