Monthly Archives: January 2015

Git useful commands

I am a guy who always likes to search online to get the answer. So StackOverflow is my favorite website. But after tens times’s search, you find you always search the same questions sometimes. Here I write down useful Git commands which I use most.

1. configuration

When you finish installing Git, you have to configure it to push your personal information on your GitHub or other git server.

// no "--global" means for one Git repo, with "--global" means for one user, with "--system" means for the whole system(here, you need to use sudo)
git config --global user.name "Your Name"
git config --global user.email "youremail@domain.com"

If you want to check your configuration status, you can use list. Of course, you can go to ~/.git/config to see your local folder’s configuration and ~/.gitconfig to check global Git configuration.

git config --list

If this is not your first time configuration, you can use amend to change it.

git commit --amend --author='Your Name <you@example.com>'

2. commit

If you want to revert to a special commit based on commitID, you can use reset.

git reset --hard c14809fa

If you want to merge multiple commits to one, use this:

  • git rebase -i <unchanged commitID>

3. fetch

Setting your branch to exactly match the remote branch can be done in two steps:

git fetch origin 
git reset --hard origin/master

4.compare

If you want to compare your local Git repo with remote, you can use diff.

git diff <local branch> <remote-tracking branch>
// For example git diff master origin/master, or git diff featureA origin/next

5. branch

If you want to rename a local Git branch,

  • git branch -m <oldname> <newname>
  • If you want to rename the current branch, you can simply do:

    git branch -m <newname>
Advertisements

Bootstrap Study Note (1)

<span class=”badge pull-right”>42</span>Because my project is related to Twitter API, Bootstrap is built by Twitter developers. In order to make the whole page same style, I decide to use Bootstrap to build the website’s frontend. Before that, I already can use Bootstrap to build website but it is not professional. Here I will write down study note to record knowledge related to Bootstrap systematically.

Bootstrap is a toolkit of CSS, HTML, JavsScript to make building website much easier and more flexible, which is built on HTML5 and CSS3.

  • <p class=”lead“></p>

If you want your paragraph obvious, you can add class, named “.lead”, which will enlarge font, bold, and modify line-height and margin. Meanwhile, we can use <strong> <b> to bold words; <i> <em> to italics. In addition, you can use color to highlight text, for example, “.text-danger“, “.text-muted“, etc. You also can modify text position, like “.text-center“, “.text-left“, “.text-right” and “.text-justify“.

  • <h1>…<small>…</small>…</h1>

We can use “small” to add sub-title.

  • <ul class=”list-inline”>

This is used to make menu,  transferring from vertical list to horizontal list and remove bullet number to maintain level display.

  • <tr class=”active”><td>…</td></tr>

We can set different class to mark table row’s status(different color), like “.active“, “.success“, “.info“, “.warning” and “.danger“.

  • icon

Bootstrap uses @font-face attribute to load font. So you use this freely. <span class=”glyphicon glyphicon-cloud”></span>

  • grid system

Each row(.row) must be contained in container(.container).

In row, we can add column (.column), but its sum should be no more than 12, like “.col-md-4“, “.col-md-8“, etc.

Detail content should be put in column, and only column can be treated as row container’s sub-element.

We can use padding to create each column’s space, like “.col-md-offset-4“.

  • droplist

We can use <li role=”presentation” class=”dropdown-header“>第一部分菜单头部</li> to add sub-title in droplist; <li role=”presentation” class=”divider“></li> to draw a line to seperate groups.

We can add “.pull-right” and “.dropdown-menu-right” to modify drop menu’s position. For example, <ul class=”dropdown-menu pull-right” role=”menu” aria-labelledby=”dropdownMenu1″>

We can set like this: <div class=”btn-group dropdown“> to make menu show up(“.dropup”) or down(“.dropdown”).

  • navigation

We can use “.nav-tabs” or “.nav-pills” to define navigation’s style. “.nav-stacked” can make navigation vertically. Like droplist, we also can use “.nav-divider” to draw line in navigation list. “.nav-justified” can modify navigation display model(vertial or horizontal) depending on window’s size. There is another special navigation, named breadcrumb.

There is another special navigation, named “.breadcrumb”. It is used to tell the user which location he is now. For example:

<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">我的书</a></li>
  <li class="active">《图解CSS3》</li>
</ol>
  • navbar

Navbar is more complex than navigation. There are two steps to build a navbar.

(1) build a container(div) and use its class “.navbar” ( control position and style) and “.navbar-default” (control color)

(2) build a list by (<ul class=”nav“>) and use its class “.navbar-nav“.

If we want our navbar suitable for all kinds of windows, we need to use “.navbar-responsive-collapse”. Following is example to tell us how to use it.

<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
  <!-- .navbar-toggle样式用于toggle收缩的内容,即nav-collapse collapse样式所在元素 -->
 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
 <span class="sr-only">Toggle Navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <!-- 确保无论是宽屏还是窄屏,navbar-brand都显示 -->
 <a href="##" class="navbar-brand">慕课网</a>
 </div>
 <!-- 屏幕宽度小于768px时,div.navbar-responsive-collapse容器里的内容都会隐藏,显示icon-bar图标,当点击icon-bar图标时,再展开。屏幕大于768px时,默认显示。 -->
 <div class="collapse navbar-collapse navbar-responsive-collapse">
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">网站首页</a></li>
 <li><a href="##">系列教程</a></li>
 <li><a href="##">名师介绍</a></li>
 </ul>
 </div>
</div>

Default navbar’s color is gray; we can use “.navbar-inverse” to replace “.navbar-default” to change its color to black.

If we want to fix navigation, we need to add “.navbar-fixed-top“.

  • Page Navigation

We can use “.pagination” to do page navigation. For example:

<ul class="pagination">
   <li><a href="#">&laquo;</a></li>
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">&raquo;</a></li>
</ul>

Meanwhile, we can use “.pagination-lg” and “.pagination-sm” to modify page navigation’s size. Bootstrap also provides flip page navigation by “.pager“.

  • Label

We can use “.label” to implement highlight. Similar to button, label has different colors, like “.label-default“(gray), “.label-primary“(navy blue), “.label-success“(green), “.label-in“(light blue), “.label-warning“(orange) and “.label-danger“(red). For instance,

<span class="label label-default">New</span>
  • Badge

Badge is similar to label to remind something. It doesn’t have so many colors, but its usage is same with label.  If I want to add color for badge, I can use process to help.

<span class="badge pull-right">42</span>
<span class="badge progress-bar-info">10</span> 
<span class="badge progress-bar-success">20</span>
<span class="badge progress-bar-warning">30</span>
<span class="badge progress-bar-danger">40</span>
  • thumbnail

Thumbnail always combines with grid system to use. Meanwhile, we normally add “.caption” to describe the image. For example:

<div class="container">
 <div class="row">
 <div class="col-xs-6 col-md-3">
 <a href="#" class="thumbnail">
 <img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
 </a>
 <div class="caption">
 <h3>Bootstrap框架系列教程</h3>
 <p>Bootstrap框架是一个优秀的前端框,就算您是一位后端程序员或者你是一位不懂设计的前端人员,你也能依赖于Bootstrap制作做优美的网站...</p>
 <p>
 <a href="##" class="btn btn-primary">开始学习</a>
 <a href="##" class="btn btn-info">正在学习</a>
 </p>
 </div> 
 </div>
</div>
</div>
  • alert

Bootstrap uses different color to show warning box, like “.alert-success“, “.alert-info“, “.alert-warning” and “.alert-danger“. For example,

<div class="alert alert-success" role="alert">Cong</div>

We also can close the alert and use “.alert-link” to give link highlight in alert.

<div class="alert alert-success alert-dismissable" role="alert">
 <button class="close" type="button" data-dismiss="alert">&times;</button>
 恭喜您操作成功!<a href="#" class="alert-link">import message</a>
</div>
  • Processing bar

We just need to use following method to show processing bar.

<div class="progress">
       <div class="progress-bar" style="width:40%">40%</div>
</div>

Colorful processing bar is so easy, like “.progress-bar-info“, “.progress-bar-success“, “.progress-bar-warning” and “.progress-bar-danger“.

We can change processing style, like “.progress-striped“. In order to make processing running, we add “.active”, for example <div class=”progress progress-striped active“>. We also can add label to processing bar, just adding number before </div>, see above example.

  • media

Media can seperate to four parts, one is container (.media), the other is object (.media-object), another is body (.media-body) and topic (.media-heading). Here is an exmaple. object is usually image. body is to describe this image, including heading and real paragraph. We can use “.pull-left” or “.pull-right” to modify object and body’s related position.

<div class="media">
 <a class="pull-left" href="#">
 <img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">
 </a>
 <div class="media-body">
 <h4 class="media-heading">系列:十天精通CSS3</h4>
 <div>全方位深刻详解CSS3模块知识,经典案例分析,代码同步调试,让网页穿上绚丽装备!</div>
 </div>
</div>

If we want to do comment/review, we can use “.media-list” to list all medias.

  • list-group

list group looks like a table with only one column and multiple rows.

<ul class="list-group">
 <li class="list-group-item"><span class="badge">13</span>揭开CSS3的面纱</li>
 <li class="list-group-item"><a href="##">CSS3选择器</a></li>
 <li class="list-group-item">CSS3文本</li>
</ul>

We can add badge/link to it. In “.list-group-item”, we also can define header and text by “.list-group-item-heading” and “.list-group-item-text“. Except that, we can color list-group-item by “.list-group-item-success“, “.list-group-item-info“, “.list-group-item-warning” and “.list-group-item-danger“.

  • panel

Panel is to generate a text box with boarder.

<div class="panel panel-default">
    <div class="panel-heading">topic: ##</div>
    <div class="panel-body">I'm a panel's body</div>
    <div class="panel-footer">author: linda</div>
</div>

We can change “.panel-default” to others to change panel’s color, like “.panel-primary“, “.panel-success“, “.panel-info“, “.panel-warning” and “.panel-danger“.

  • pop out box

This part is complex, but we can use JavsScript method to implement it. So here I don’t write down any additional information about it. Maybe later I will add it.

High Performance JavaScript

Because I change my job recently, I move from backend developer to front-end developer. I will write down some knowledge related to front-end step by step. But I still will use my free time to fulfill unfinished study on backend. It is not a new start, but a continue.

In fact, before I quit the previous job, my tasks already switched between front-end development and back-end such as involving in website development. It is not systematic study. This post will follow a book, named “High Performance JavaScript” to arrange related knowledge about JavaScript systematically.

Before we start to talk about the detailed knowledge, we need to realize why we want “High-Performance JavaScript”, not others, like “Programming in JavaScript”. The reason is that it is quite easy to write JavaScript code and make it running (I use two weeks to learn it). However, how to make it run as efficiently and quickly as possible is a serious question. So high performance becomes the main factor we need to consider when we write down codes. We should care about execution time, loading, interaction with the DOM, page life cycle and more. I will not copy book’s content but write down my understanding with my logic.

Let’s go.

Loading and Execution

JavaScript Position: put scripts at the bottom

When the page meets a <script>, browser will wait for this content to be parsed and executed. Page rendering and user interaction are completely blocked during this time. And the browser doesn’t start rendering anything on the page until the opening <body> tag is encountered. Considering these two facts, it is recommended to place all <script> tags as close to the bottom of the <body> tag as possible so as not to affect the download of the entire page.

<html>
<head>
  <title>Script Position</title>
  <link ref="stylesheet" type="text/css" href="stype.css">
</head>
<body>
  <p>hello world</p>
  ...
  <script type="text/javascript" src="file1.js"></script>
</body>
</html>

Grouping Scripts

It is recommended to concatenate JavsScript files together into a single file and then call that single file with a single <script> tag. The reason is that each HTTP request brings with it additional performance overhead, so downloading one 100 KB file will be faster than downloading four 25 KB files.

Nonblocking Scripts

Nonblocking script is to load the JavaScript source code after the page has finished loading. There are a few techniques for achieving this result.

  1. Deferred Scripts
    1. The defer attribute indicates that the script contained within the element is not going to modify the DOM and therefore execution can be safely deferred until a later point in time. (only in IE 4+ and Firefox 3.5+) Any <script> element marked with defer will not execute until after the DOM has been completely loaded, before the onload event handler is called. (DOM —> defer script —> window.onload)
    2. <script type="text/javascript" src="files1.js" defer></script>
  2. Dynamic Script Elements
  3. XMLHttpRequest Script Injection

Data Access

Data Types

There are four basic places from which data can be accessed in JavaScript.

  1. Literal values
    • JavaScript can represent strings, numbers, Booleans, objects, arrays, functions, regular expressions, and the special values null and undefined as literals.
  2. Variables
    • Any developer-defined location for storing data created by using the var keyword.
  3. Array items
    • A numerically indexed location within a JavaScript Array object.
  4. Object members
    • A string-indexed location within a JavaScript object.

The general trends remain the same across all browsers: literal value and local variable access tend to be faster than array item and object member access.

Data Scope

Every function in JavaScript is represented as an object – more specifically, as an instance of Function. Local variables are always the fastest to access inside of a function, whereas global variables will generally be the slowest. The reason is that global variables always exist in the last variable object of the execution context’s scope chain, so they are always the furthest away to resolve.

It’s advisable to use local variables whenever possible to improve performance in browsers without optimizing JavaScript engines. A good rule of thumb is to always store out-of-scope values in local variables if they are used more than once within a function. If you need to refer to a global variable many times, like this, window, document, etc. you can store the reference in a local variable and then use the local variable instead of the global.

DOM Scripting

The Document Object Model (DOM) is a language-independent application interface (API) for working with XML and HTML documents.

The more you access the DOM, the slower your code executes. Therefore, the general rule of thumb is this: touch the DOM lightly, and stay within ECMAScript as much as possible. Or you can clone existing DOM elements instead of creating new ones – in other words, using element.cloneNode() (where element is an existing node) instead of document.createElement().

Algorithms and Flow Control

Loops

There are four types of loop.

// Type 1
for (var i=0; i < 10; i++){
  //loop body
}
// Type 2
var i = 0;
while(i < 10){
 //loop body
 i++;
}
// Type 3
var i = 0;
do {
 //loop body
} while(i++ < 10);
// Type 4: The for-in loop is significantly slower than the others. 
for (var prop in object){
 //loop body
}

It’s recommended to avoid to the for-in loop unless your intent is to iterate over an unknown number of object properties. If you have a finite, known list of properties to iterate over, it is faster to use one of the other loop types and use a pattern such as this:

var props = ["prop1", "prop2"],
    i = 0;
while (i < props.length){
  process(object[props[i]);
}

Decreasing the work per iteration

//original loops
for (var i=0; i < items.length; i++){
  //process(items[i]);
}

To minimize property lookups, see this optimization:

for (var i=0, len=items.length; i < len; i++){
  process(items[i]);
}
// Or antoher way
for (var i=items.length; i--; ){
  process(items[i]);
}

Strings and Regular Expressions

Responsive Interface

Ajax