30+ Hidden Front‑End Hacks Every Web Developer Should Know

HTML Tricks

Run JavaScript directly from the address bar with the javascript: scheme, for example: javascript:alert('hello from address bar :)'); In non‑IE browsers you can also execute raw HTML by typing a data:text/html, URL, which can turn the page into a simple editor thanks to the contenteditable attribute: data:text/html,<h1>Hello, world!</h1> Elements that have an id automatically become global variables, allowing shortcuts like sample instead of document.getElementById('sample').

Use an a element to parse URLs without regular expressions:

var a = document.createElement('a');
a.href = url;
console.log(a.hostname, a.pathname, a.search);

CSS Tricks

Disable the cursor globally: *{cursor:none!important;} Create a simple text‑blur effect with CSS3: p{color:transparent;text-shadow:#111 0 0 5px;} Vertical centering using transform (IE9+):

.center-vertical{position:relative;top:50%;transform:translateY(-50%);}

Horizontal centering with transform:

.center-horizontal{position:relative;left:50%;transform:translateX(-50%);}

Multiple borders via repeated box‑shadow values:

div{box-shadow:0 0 6px rgba(0,0,0,.2),0 0 12px rgba(0,0,0,.2),0 0 18px rgba(0,0,0,.2);}

Perform simple arithmetic with calc():

.container{background-position:calc(100% - 50px) calc(100% - 20px);}

JavaScript Tricks

Generate a random alphanumeric string:

function generateRandomAlphaNum(len){
  var rdm="";
  for(var i=0;i<len;i++){
    rdm+=Math.random().toString(36).substr(2,1);
  }
  return rdm;
}

Convert floating‑point results to integers quickly with bitwise operators ( |0 or ~~) which are faster than parseInt or Math.round: var foo = (12.4/4.13) | 0; // result: 3 Swap two variables without a temporary variable:

var a=1,b=2;
a=[b,b=a][0];

Replace the native alert to count how many times it is called:

(function(){
  var oldAlert=window.alert, count=0;
  window.alert=function(msg){
    count++;
    oldAlert(msg+"
You've called alert "+count+" times now.");
  };
})();
alert('Hello World');

Override console.log to render logged text as blurred using CSS:

var _log=console.log;
console.log=function(){
  _log.apply(console, ['%c'+Array.prototype.slice.call(arguments).join(' '), 'color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);']);
};

Use logical AND ( &&) as a compact if statement, and the comma operator to execute multiple statements without braces:

day===0 && alert('Today is Sunday!');
if(condition) alert(1), alert(2), console.log(3);

Prevent your page from being loaded inside an iframe:

if(window.location!=window.parent.location){
  window.parent.location=window.location;
}

Display arrays as tables in Chrome using console.table:

var data=[{'品名':'杜雷斯','数量':4},{'品名':'冈本','数量':3}];
console.table(data);