Getting Started with Bootstrap

18 May 2016

What is Bootstrap?

Bootstrap is a powerful toolkit - a collection of HTML, CSS, and JavaScript tools for creating and building web pages and web applications
Originally created by Twitter

Benefits

Responsive by design
Re-usable components
Rich extensibility using JavaScript

Download

Bootstrap is available in two forms:
1. Precompiled Version:
  - Vanilla CSS
  - Note: All styles can be overridden later
2. Source Code Version:
  - Can choose between Less and Sass preprocessor version
  - Provides flexibility to ambitious developers to customize and build their own version of Bootstrap
URL: http://getbootstrap.com/getting-started/#download

File Structure

Precompiled Version comes with
1. CSS files
2. JavaScript files
3. Font files: Glyphicons fonts folder should be on the same level as the CSS folder
HTML: HTML templates can be copied and modified from Bootstrap tutorial page

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Getting started

3 meta tags must come first in the head
Include minified bootstrap CSS file
Optional: Bootstrap interactive feature
- Include minified bootstrap JavaScript file
- Include jQuery library which is referenced by Bootstrap plugins
Optional: For IE8 support
- Include HTML5 shim and Respond.js

Start by copying the HTML below to begin a minimal Bootstrap document

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap Template</title>

    <!-- Bootstrap CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <!-- Bootstrap JS-->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Building HTML pages with Bootstrap

Bootstrap comes with include many common UI components
These include Navigation, Grids, Buttons,Tabs, Accordions, and many others
Many of these use JavaScript extensions and jQuery plugins

How to use Bootstrap components

Components are available as well-factored CSS classes
Convenient to use through semantic class names like .btn and .btn-success
For example, including the btn-success class will paint the button in green color
```
<button type="button" class="btn btn-lg btn-success">Success</button>
```

Grids

Bootstrap can easily scales your websites with a single code base, from phones to tablets to desktops
This responsiveness is achieved using a fluid grid system that can be applied to appropriately scale up to 12 columns
Grid system has 4 tiers of classes:
1. xs for phones (<768px)
2. sm for tablets (≥768px)
3. md for desktops (≥992px)
4. lg for larger desktops (≥1200px)
Wrapper contains rows
1. Fixed-width layout: .container class, 1170px width
2. Full-width layout: .container-fluid
Rows contains columns
- Max number of columns: 12

<div class="container">
  <div class="row">
    <div class="col-md-8">
      Parent fixed-width column
      <div class="row">
        <div class="col-md-6">Nested column</div>
        <div class="col-md-6">Nested column</div>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">Fluid ..</div>
    <div class="col-md-4">.. and full-width ..</div>
    <div class="col-md-4">.. example</div>
  </div>
</div>

Typography

Every browser has its own default “user agent” style sheet that is applied to the HTML, and no two browsers have the same defaults
Bootstrap comes with Normalize.css that makes browsers render all elements more consistently and in line with modern standards
Bootstrap also includes simple and easily customized typography for headings, body text, lists, and more
For example, Text Emphasis will add colors to emphasize statements
- .text-danger class will display error message in red color

<p class="text-danger">Error: An error has been occurred while submitting your data.</p>

URL: http://getbootstrap.com/css/#type

Forms

Bootstrap helps in aligning and styling labels and inputs, validating forms, and showing error messages which can be tricky without some help
All textual input elements like input, textarea and select are set to 100% of parent element
Rendering labels and input fields
- .form-inline: Render multiple labels and input fields in same line
- .form-horizontal: Render each input in its own row
- .form-control-static: Render plain text next to a form label
Bootstrap brings validation styles for different states
- .has-warning
- .has-error
- .has-success
URL: http://getbootstrap.com/css/#forms

Images and Icons

Images can be made responsive by simply adding .img-responsive class
.img-rounded: Applies a rounded corner
.img-thumbnail: Converts to a thumbnail image
Includes over 250 glyphs in font format from the Glyphicon Halflings set
Font icons are scalable and easy to customize using just CSS
URL: http://getbootstrap.com/components/#glyphicons

Buttons, Button groups, Button dropdowns

Bootstrap makes buttons maintain a consistent look in all browsers through .btn class
.btn-group: Group a series of buttons together into a single line
Button dropdowns: Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.
For example, Country Selection dropdown

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Country <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Canada</a></li>
    <li><a href="#">Mexico</a></li>
    <li><a href="#">USA</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Nepal</a></li>
  </ul>
</div>

Navbars

Navbars are responsive meta components that serve as navigation headers
They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases
Under the hood, Navbars are unordered inline list of menu items
Additional HTML elements can be added to Navbars
- Brand image or text
- Search bar and more

Customizing Bootstrap

Overriding With CSS

The most straightforward approach is to override Bootstrap’s styles using CSS

<!-- Replace bootstrap.min.css with custom css -->
<link rel="stylesheet" href="css/custom.css">

@import url("bootstrap.min.css");
.btn {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

Generating A Custom Build

Customize Bootstrap’s components, Less variables, and jQuery plugins to get your very own version.
URL: http://getbootstrap.com/customize/

Overriding with LESS

Download the Source code version
URL: http://getbootstrap.com/getting-started/#download
In the LESS directory: (Some things to note about these files)
1. bootstrap.less
  - This is the central file
  - It imports all of the others and is the one you’ll ultimately compile
2. variables.less and mixins.less
  - Variables contains the same variables as used on the generator websites
3. utilities.less
  - This is always the last file to be imported, in order for the classes that it contains to override the rest of the styles where necessary

For example:

The following .less file looks pretty similar to css
Things to notice:
- @baseFontSize: variable defined in variables.less
- .border-radius: mixin defined in mixins.less

.btn-large {
   padding: 9px 14px;
   font-size: @baseFontSize + 2px;
   line-height: normal;
   .border-radius(5px);
}

Installing LESS

Install less using Node Package Manager (NPM)

npm install less

Compile bootstrap.less

lessc bootstrap.less > bootstrap.css

For the minified version, use this instead:

lessc --compress bootstrap.less > bootstrap.min.css

Modularizing your changes

Download Bootstrap source code, rename it to bootstrap and leave it untouched
Create separate folder named custom
Copy these files from bootstrap to custom folder and perform necessary modifications
- custom-variables.less: Modify the variables in this copy instead of bootstrap original file
- custom-other.less: Any other customizations that aren’t possible with the variables
- custom-bootstrap.less: The new central file that you will compile to CSS
Along with the original LESS files, imports the two custom files above using the following commands

@import "../bootstrap/less/bootstrap.less";
@import "custom-variables.less";
@import "custom-other.less";
@import "../bootstrap/less/utilities.less";

Resources:
- Tomislav Bacinger’s post from Toptol.com
- Thomas Park’s post from Smashing Magazine

Getting Started with Node.js

12 Apr 2016

Getting Node.js

There are different ways of getting Node.js:

Downloading installers or binaries
- https://nodejs.org/en/download/
Build from source code
For OSX and Linux environment, manage multiple version using nvm tool
- We will be installing Node.js using the nvm tool for OSX

Installing Node Version Manager `nvm` tool

Manual install of nvm:

$ git clone https://github.com/creationix/nvm.git ~/nvm

Use source command load function file(nvm.sh) into the command prompt:

$ . ~/nvm/nvm.sh

Test nvm:

$ nvm

Installing Node.js using `nvm` tool

Install multiple versions of node:

$ nvm install v4.4.2
$ nvm install v5.10.1

List installed node versions:

$ nvm ls

Display current version:

$ node -v

Switch node version:

$ nvm use v4.2.2

Set Alias default:

$ nvm alias default v5.10.1

Run node (Enters REPL[Read Eval Print Loop] Terminal):

$ node
> console.log("Node Intro");
Hello World
undefined
>
(^C again to quit)
>
##

Running a simple web server

Create a server.js file

const http = require('http');

const hostname = '127.0.0.1';
const port = 1337;

http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Node Intro\n');
}).listen(port, hostname, () => {
  console.log('Server running at http://${hostname}:${port}/');
});

Then run $ node server.js
Open http://127.0.0.1:1337 in browser to test your simple web server

Spread / Rest in ES6

03 Mar 2016

The new ES6 ... operator is referred as spread or rest operator depending on where/how it’s used
Solid alternative to deprecated so called arguments array

Syntax

Function call foo(...[1,2,3]);
Array Literal var b = [ 1, ...a, 5 ];
Function parameters function foo(x, y, ...z) { /* .. */ }

Spread

Used infront of an array to spread/expand out into its individual values

Examples

function foo(x, y, z) {
  console.log( x, y, z );
}

// 1. Spread out individual values
foo(...[1,2,3]); // 1 2 3

// 2. Pre-ES6 syntax
foo.apply( null, [1,2,3] ); // 1 2 3

// 3. Spread out individual values
var a = [2,3,4];
var b = [ 1, ...a, 5 ];
console.log( b ); // 1,2,3,4,5

Rest

Collecting the rest of the parameters into an array

Examples

// Gather rest of the arguments to `z` variable as an array
function foo(x, y, ...z) {
  console.log( x, y, z );
}

foo( 1, 2, 3, 4, 5 ); // 1 2 [3,4,5]

Hiding in Plain Scope

01 Feb 2016

You can hide variables and functions by enclosing them in the scope of a function.
Inspired by the Principle of Least Privilege which states that you should expose only minimally and hide everything else.

Another benefit of hiding variables and functions is to avoid unintended collision of identifiers.

function doSomething(a) {
  b = a + doSomethingElse( a * 2 );
  console.log( b * 3 );
}
  
function doSomethingElse(a) {
  return a - 1;
}
  
var b;
  
doSomething( 2 ); // Output 15

The b variable and doSomethingElse(..) can be treated as private details of doSomething(..) function.

Proper Design

function doSomething(a) {
  function doSomethingElse(a) {
    return a - 1;
  }

  var b;

  b = a + doSomethingElse( a * 2 );

  console.log( b * 3 );

}

doSomething( 2 ); // Output 15

Global Namespace

Multiple libraries can collide with each other. To avoid such collision, such libraries will create a single variable declaration (often an object) with significantly unique name, in the global scope.

This object is then used as a namespace for that library, where all specific exposures of functionality are made as properties off that object.

var MyBestJSLibrary = {
  awesome: "stuff",
  doSomething: function() {
    //..
  },
  doAnotherThing: function() {
    //..
  }
};

Reference: Scope & Closures By Kyle Simpson

Equality in Javascript == Vs ===

21 Jan 2016

There are two ways of comparing equality in Javascript.

Lenient equality operator: “==” checks for value equality
Strict equality operator: “===” checks for both value and type equality

var a = "42";
var b = Number( a ); // Explicit coercion
console.log(a == b);  // true
console.log(a === b); // false

Best Practice: Whether to use == or ===

If either value (aka side) in a comparison could be true, false, 0, “”, [] use ===
Else it is safe to use ==

Older Newer

Andrew

Getting Started with Bootstrap

What is Bootstrap?

Benefits

Download

File Structure

Getting started

Building HTML pages with Bootstrap

How to use Bootstrap components

Grids

Typography

Forms

Images and Icons

Buttons, Button groups, Button dropdowns

Navbars

Customizing Bootstrap

Overriding With CSS

Generating A Custom Build

Overriding with LESS

Installing LESS

Modularizing your changes

Getting Started with Node.js

Getting Node.js

Installing Node Version Manager nvm tool

Installing Node.js using nvm tool

Running a simple web server

Spread / Rest in ES6

Syntax

Spread

Examples

Rest

Examples

Hiding in Plain Scope

Global Namespace

Equality in Javascript == Vs ===

Best Practice: Whether to use == or ===

Installing Node Version Manager `nvm` tool

Installing Node.js using `nvm` tool