webdevelpmentHacks-fitnessNit

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

Posted on Posted in Technology
webdevelpmentHacks-fitnessNit
webdevelpmentHacks-fitnessNit

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'
    }
    
    window.setTimeout(function(){
         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):

    'foo'.italics()
    

    …will return this:

    <i>foo</i>

    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>

    JS:

    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) {
      range.expand('word');
      var word = range.startContainer.textContent.substring(range.startOffset, range.endOffset);
      console.log(word);
    }
  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">
     </datalist>

    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:
    a[href]{}
  2. Select all elements that have a class (useful if JS is adding classes somewhere) :
    article[class]{}
  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”:
    a[href^="http"]{}
  5. Need to style a link to a ZIP or a PDF? Totally fine, too. Use the $ which means “ends with”:
    a[href$=".zip"]:after{content:"(zip)"}
  6. Style an image based on one word existing in the alt attribute? Let’s use the space substring selector:
    img[alt~="Insurance"]{}
  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:
    img[src|="-april-"]{}

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.