移动设备的屏幕比较小，它的viewport就是能用来渲染网页的可视矩形窗口（不包括地址栏以及底部操作栏）。

现代的移动设备浏览器基本上都能处理桌面网页，但是很显然移动屏幕那么小，要显示桌面网页，肯定需要经过一些特殊处理：

Certain classes of browser attempt to display desktop pages on a small screen
by automatically zooming the display. This can be problematic for applications
that have already been optimized for a small screen. The viewport meta tag
tells the device at what scale to render the page.

注：引自http://www.w3.org/TR/mwabp/#bp-viewport

一个典型的viewport meta tag设置如下：

1

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

把上面代码插到页面head标签内，告诉移动浏览器按照设备的100%宽度去渲染页面：

阅读全文

web storage就是我们常说的本地存储，在这里我不多说web
storage，想深入了解可以自己到以下网址看：

• http://dev.w3.org/html5/webstorage/
• https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Storage

这里想说的是，怎么实现一个跨浏览器的localStorage。先看看哪些浏览器支持localStorage？

http://caniuse.com/namevalue-storage

caniuse上面的统计很详细，我们只关注pc端浏览器的支持情况：

• ie 8.0+
• firefox 3.5+
• chrome 4.0+

咦，稍等！caniuse上面统计的firefox 2.0、3.0部分支持localStorage是神马意思？请看以下 引文：

localStorage is also the same as globalStorage[location.hostname], with the
exception of being scoped to an HTML5 origin (scheme + hostname + non-standard
port) and localStorage being an instance of Storage as opposed to
globalStorage[location.hostname] being an instance of StorageObsolete which is
covered below.

原来是firefox初期版本的非标准实现globalStorage，但是：

阅读全文

最近在做一个项目的过程中，有个同事提出了“button在回车的时候会自动submit”的问题，然后还建议我们以后别用button，难道button真不能用么？

我在w3c上查了，找到了button的相关定义（ 传送门 ）：

Buttons created with the BUTTON element function just like buttons created
with the INPUT element, but they offer richer rendering possibilities: the
BUTTON element may have content. For example, a BUTTON element that contains
an image functions like and may resemble an INPUT element whose type is set to
“image”, but the BUTTON element type allows content.

可见，button是用来扩展input的，并不是不能用，相反，在有按钮需求的时候，应该多使用button。

那是什么原因导致button会在回车的时候自动提交呢？回想一下，表单在什么情况下回车会自动提交呢？
请看一下这些 案例 （如果有更多的案例，欢迎补充）

好，现在回到开头的问题，先看看我那同事的需求是怎样的？

页面有个输入框和一个查询按钮（表单的一部分，表单还有其他域），用户在输入框输入查询文本后，回车或者点击查询按钮，触发ajax搜索功能，但是不能提交整个表单。

那同事是怎么做的呢？html代码大概类似如下：

1
2
3
4

<form action="" method="post">
    <!-- 表单中还有其他元素 -->
    <input type="text" /><button>查询</button>
</form>

阅读全文

bower是twitter开发的一个web前端包管理器，使用它可以很方便的管理前端资源，比如我现在需要jquery，按照以前的做法，是上jquery官网去下载，但是现在可以用一行命令就搞定。

1

bower install jquery

这样就可以很简单地拿到所需要的jquery文件。

bower提供的功能很多，支持search、init、link等，具体详解bower官网。

安装bower的时候，并不支持tab
completion，那怎么办？在命令行上直接执行bower看看：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Usage:

    bower <command> [<args>] [<options>]

Commands:

    cache-clean    Clean the Bower cache, or the specified package caches
    completion     Tab Completion for Bower
    help           Display help information about Bower
    info           Version info and description of a particular package
    init           Interactively create a bower.json file
    install        Install a package locally
    link           Symlink a package folder
    list, ls       List all installed packages
    lookup         Look up a package URL by name
    register       Register a package
    search         Search for a package by name
    uninstall      Remove a package
    update         Update a package

Options:

    --no-color - Do not print colors (available in all commands)
   --quiet    - Suppress all output except for warnings and errors (available in all commands)
    --silent   - Suppress all output (available in all commands)

See 'bower help <command>' for more information on a specific command.

看到其中的completion顿时来了精神，再在命令行下执行:

1

bower completion

看一下输出的内容：

1
2
3
4
5

###-begin-bower-completion-###
#
# Installation: bower completion >> ~/.bashrc  (or ~/.zshrc)
# Or, maybe: bower completion > /usr/local/etc/bash_completion.d/bower
#

哈哈，走到这里，都应该知道怎么添加tab completion支持了吧！！！

_注意：在mac osx上应该添加到~/.bash_profile文件中。_

mac osx上大多数应用程序都是通过.DMG或者.pkg来安装的（当然brew方式安装的除外）。

如果是通过DMG方式安装的软件，要删除它就挺简单，直接从osx的应用程序文件夹上删除即可。

那么pkg方式安装的软件又该怎么删除呢？

mac并没有提供什么快捷删除方式，我们只能找到pkg安装后产生的文件，然后删除它。

方式一

mac会维护一份pkg安装历史，只要找到那个文件夹，我们就可以对症下药了。

我的机子是osx 10.8.4，pkg历史安装列表在/private/var/db/receipts目录下：

1
2

cd /private/var/db/receipts
ls -l

列出该目录，可以看到类似如下内容：

1
2

-rw-r--r--    1 root  wheel     47315  6 15 15:48 com.codeius.izip.bom
-rw-r--r--    1 root  wheel       253  6 15 15:48 com.codeius.izip.plist

找到.bom文件后，我们就可以使用以下命令找到安装的文件列表：

1

lsbom -pf com.codeius.izip.bom

执行上述命令后，输出了类似以下内容：

阅读全文

已经添加到版本库的某个文件，应该怎么删除呢？

• 使用git删除命令

1

git rm <file>

运行该命令后，git会提示：

1

rm '<file>'

再执行 svn status，可以看到文件已从暂存区删除，并等待 commit。

• 手动删除文件

1

rm <file>

然后再从git暂存区中把该文件删除即可：

1

git reset HEAD <file>

或者可以使用以下方式从暂存区删除文件：

1

git add -u

在google javascript style guide上有这么一条规则: function declarations within
blocks.

google建议不要这么写：

1
2
3

if(x) {
    function foo() {}   
 }

为什么呢？这涉及到function declarations与function expressions的问题。

什么是function declarations

ecma-262对function declarations的定义如下：

1

function Identifier ( FormalParameterListopt ) { FunctionBody }

function declarations具备以下几个特征：

• Identifier必不可少

• Function declarations cannot be nested within non-function blocks, such as if.

• Function Declarations must begin with function

• The function name is visible within it’s scope and the scope of it’s parent.

代码示例如下：

1
2
3
4

function bar() {
    return 3;    
}
bar(); // 3

阅读全文