Strip html-tags from string

Java
String strippedHtml = html.replaceAll(“\<.*?\>“, “”);

PHP
strip_tags($html);

Javascript
var strippedHtml = html.replace(/(<.*?>)/ig,”");

CSS reset

There’s a bunch of different css-reset to use on your site, I’ve tried several of them but always comes back to use the YUI version.

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/reset/reset-min.css">

CSS3, round corners

.round-all {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.round-top {
  -webkit-border-top-left-radius: 5px; 
  -webkit-border-top-right-radius: 5px; 
  -moz-border-radius-topleft: 5px; 
  -moz-border-radius-topright: 5px; 
  border-top-left-radius: 5px; 
  border-top-right-radius: 5px;
}
.round-bottom {
  -webkit-border-bottom-right-radius: 5px; 
  -webkit-border-bottom-left-radius: 5px; 
  -moz-border-radius-bottomright: 5px; 
  -moz-border-radius-bottomleft: 5px; 
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
.round-left {
  -webkit-border-top-left-radius: 5px; 
  -webkit-border-bottom-left-radius: 5px; 
  -moz-border-radius-topleft: 5px; 
  -moz-border-radius-bottomleft: 5px; 
  border-top-left-radius: 5px; 
  border-bottom-left-radius: 5px;
}
.round-right {
  -webkit-border-top-right-radius: 5px; 
  -webkit-border-bottom-right-radius: 5px; 
  -moz-border-radius-topright: 5px; 
  -moz-border-radius-bottomright: 5px; 
  border-top-right-radius: 5px; 
  border-bottom-right-radius: 5px;
}

CSS3, Inner Shadow

Just like the regular box shadow,  but add the keyword “inset” to make it inner. Works in Firefox, Safari, Chrome, Opera and IE9.

div{
  -moz-box-shadow:0 0 5px rgba(0,0,0,0.5) inset;
  -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5) inset;
  box-shadow:0 0 5px rgba(0,0,0,0.5) inset;
}

Curl latest jQuery to disk

cd /dir/to/save/in |
  curl http://code.jquery.com/jquery-latest.js --O jquery.js |
  curl http://code.jquery.com/jquery-latest.min.js --O jquery-min.js

Debug css

Found a really handy way to debug my wireframes from snipplr :  http://snipplr.com/view/746/handy-css-debug-snippet/

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

CSS clearfix

Add class=”clearfix” to parent-elementet needing to be cleared.

.clearfix {
  *zoom: 1;
}

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
  visibility: hidden;
  font-size: 0;
  height: 0;
}

jQuery zebra stripes

I usually let a  plug-in (tablesorter) to handle sorting and zebra-stripe on my tables, but sometimes it’s just easier to zebra-stripe a table this way:

$('.tablerowClass tr:odd').css('background','#757575');

Ta bort outline från button i Firefox

Det är lätt att tro att följande borde ta bort outline från button-elementet i Firefox.

button:focus { outline: 0;}

Men för att åstadkomma det behöver man följande lilla css-rad:

button:-moz-focus-inner { border: 0; }

Javascript console commands

console.debug('This is a Debug message');
console.info('This is an Information');
console.warn('This is a Warning message');
console.error('This is an Error message');
console.log('This is a logged message');