Twitter Bootstrap essentials

Twitter Bootstrap is a great way to get started with a CSS look and feel for a site or webapp without spending much time yourself messing with your own CSS.

In a nutshell, here’s the essentials:

  • You must use the HTML5 doctype,without it, your layouts in IE look random:
<!DOCTYPE html>
<html lang="en">
...
</html>
  • Layout can either be:
    • Fixed:
      <div class="container">
      ...
      <div>
    • or Fluid:
      <div class="container-fluid">
      ...
      </div>
  • The layout is based on 12 columns. Use the following classes to control your layout with the 12 columns – the number of offset columns and spanned columns should total 12. Offset and Span classes can be combined:
    • row : encloses one row in the layout
      <div class="row">
      ...
      </div>
    • offsetX : where X is a number of columns to offset
      <div class="offset1 span2">
      ...
      </div>
    • spanX : where X is the number of columns to span

Complete example:

<div class="container">
    <div class="row">
        <div class="offset1 span2">Left column</div>
        <div class="span8">right column, one column left blank on right</div>
    </div>
</div>

Iomega ix-200: Monitoring RAID resyncing status

When the Dashboard webapp is showing ‘verifying data protection configuration’ you can get a more detailed status from the box if you ssh into and ‘cat /proc/mdstat’ – you’ll see something like this:

Personalities : [linear] [raid0] [raid1] [raid6] [raid5] [raid4]
md1 : active raid1 sda2[0] sdb2[1]
974722192 blocks super 1.0 [2/2] [UU]
[====>…………….] resync = 21.3% (208528384/974722192) finish=340.8min speed=37457K/sec

md0 : active raid1 sda1[0] sdb1[1]
2040128 blocks [2/2] [UU]

unused devices: <none>

Coding around lack of trim() in IE’s Javascript support

IE8 doesn’t support trim() on Strings (Firefox and other browsers do). To workaround this, you can perform the same operation using some regex on a String:

example.replace(/^s+|s+$/g, '')

… this matches one or more spaces anchored at the start of the line, or one or more spaces anchored at the end of the line, replaces with ”, and then globally replaces to do both.

Extracting cookies using Javascript

Cookies in the current page can be extract using Javascript using ‘document.cookies’ which returns a ‘;’ separated String of all the current cookie values.

You can parse the values with some script like this:

function getCookie(name) {
    var result = '';
    var cookies = document.cookie.split(';');
    for ( var i = 0; i < cookies.length; i++) {
        //alert(cookies[i]);
        var cookie = cookies[i].split('=');
        if (cookie[0].replace(/^s+|s+$/g, '') == name)
            result = cookie[1];
    }
    return result;
}