课程

课程的学习曲线就像曲棍球。在初期离开地面时可以轻松的几个基本功能的应用开始，但当应用变大变复杂时，若不注意结构会使开发变得棘手与笨重。

AngularJS入门时, 随便看几篇教程与文档的“准备-射击-瞄准”的学习方法会导致混淆与挫折。 这个课程可以带你遍历Angular的每个关键点。最后你可以流畅高效地架构大型应用。

预备知识

• 掌握HTML、CSS、JavaScript， 以及下面的概念：
  • POJO(plain old JavaScript object)，包括：
  • 面向对象变成，包括封装与继承
  • 对象的创建、原型
• 基本的MVC概念
• DOM
• JavaScript函数、事件、错误处理

资源

与其他JavaScript框架相比，AngularJS还在初期阶段，资源还有所不足。但是，本课程会介绍一批优秀的博客。

• 必修资源
  • AngularJS - O’Reilly Media (available on Amazon)
  • John Lindquist's egghead.io
  • egghead.io source code
  • AngularJS docs
• 补充读物
  • Jim Hoskins blog
  • Ben Nadel blog
  • OneHungryMind
  • year of moo
  • Bruno Scopelliti blog

剩余部分参看原文：A Better Way to Learn AngularJS

PS： 半年多后才在电脑中发现这篇刚翻译了开头的博客，而我已经从AngularJS转向了KnockoutJS。 Octopress的缺点是发布成本高，导致我的EverNote中躺满了未整理的杂乱资料。 但同时这也是优点，时刻提醒我博客与随手笔记是不同的。 每次写博客时可以从作者角度观察而获得更深入的理解， 感受到写作难度后对网上创作技术文章的人也更加佩服。 最近几年的技术瓶颈始终没有突破，而记博客的时间也反映出自己的碌碌无为，接下来该进行一些知识的整理了，希望会有所帮助。

PSPS： 作为想法和感情异常丰富的我，开本博客的那天便告诉自己这里只记录客观的技术。 所以与这段话类似的内容以后会尽量不出现。

报错：zsh: no matches found: new_post[arch-linux-reinstall-glibc]

原因：zsh中若出现‘*’, ‘(’, ‘|’, ‘<’, ‘[’, or ‘?’符号，则将其识别为查找文件名的通配符

快速解决：用引号括起来$ rake "new_post[arch-linux-reinstall-glibc.markdown]"

彻底解决：取消zsh的通配(GLOB), 在.zshrc中加入alias rake="noglob rake"

PS：在git回滚操作git reset --soft HEAD^时出现报错： zsh: no matches found HEAD^，

也为同样原因，因为^也为正则中的符号， 需要转义为git reset --soft HEAD\^。

参考

Not compatible with Zsh

$ pacman -Syu时提示错误， 因为Arch前段时间将/lib目录链到了/usr/lib， 见公告The /lib directory becomes a symlink。 当时没有看到这篇公告，而在网上搜到某贴说使用--force参数， 结果执行完后系统挂掉，因glibc不存在，所有命令行不可使用。

解决方法

• 从光盘启动Arch。
• $ fdisk -l查看磁盘状态， 我的系统分区为/dev/sda6。
• 创建目录：$ mkdir /root/tmp_disk。
• mount分区，我机子上是：$ mount /dev/sda6 /root/tmp_disk。
• 下载相应的glibc安装包（网络或U盘，配置网络参考下面相关部分）, 我的为x86_64 v2.16.0-2， 所以wget http://www.archlinux.org/packages/core/x86_64/glibc/download/
• 安装pacman -U glibc-2.16.0-2-x86_64.pkg.tar.xz -r /root/tmp_disk
• pacman -Su

注意

其它

配置网络

用启动光盘进入系统后，需要配置网络来下载最新glibc。 配置/etc/rc.conf

interface=eth0
address=192.168.0.2
netmask=255.255.255.0
gateway=192.168.22.1

配置/etc/resolv.conf

nameserver 8.8.8.8

最后重启网络服务$ /etc/rc.d/network restart

目录

/lib、/lib64皆应软链到/usr/lib目录。 在修复过程中查看/lib发现里面只有一个modules目录， 将其移至/usr/lib里后建立软链。 系统正常运行，但之后执行pacman后无法升级。 移除/usr/lib/modules目录后$ pacman -Su解决问题。

时间错误的解决

遇到报错

******************* FILESYSTEM CHECK FAILED *************
* Please repair manually and reboot. Note that the root *
* filesystem is currently mounted read-only. To remount *
* it read-write type: mount -n -o remount,rw / *
* When you exit the mantenance shel the system will *
* reboot automatically. *
*********************************************************

因为BIOS时间设置有问题。

参考

bug修复方案：How to re-install glibc?

Arch网络配置：Configuring Network

tmux是与screen类似的工具，但是功能更强大。

tmux的三个层级概念：

• session(会话)
• window(窗口)
• pane(面板)

命令：
$ tmux
$ tmux attach -t session

快捷键

C-b激活控制台，然后输入下面命令

系统

窗口

面板

复制/粘贴模式

(以Emacs模式为例)

1. C-b [进入视图模式
2. C-Space开始选择（可能与输入法快捷键冲突，最简单的办法是使用C-@，同样效果）
3. C-n/p/f/b/...选择结束后C-w复制
4. C-]粘贴

配置

~/.tmux.conf

#将激活控制台键绑定与Emacs相同
unbind C-b
set -g prefix C-x

其他

• 默认快捷键为Emacs模式，也可设置为vi模式。
• Ubuntu下翻页的M-v与菜单键可能有冲突，需要在终端窗口菜单Edit -> Keyboard Shortcuts取消Enable menu access keys前面的勾。

折腾了好久，终于定位到zsh的配置oh-my-zsh上。
最后查到原来Emacs Wiki上已经有解决方案，在.zshrc底部加上：

if [[ "$TERM" == "dumb" ]]
then
  unsetopt zle
  unsetopt prompt_cr
  unsetopt prompt_subst
  unfunction precmd
  unfunction preexec
  PS1='$ '
fi

参考：TrampMode Troubleshooting

非常简单：C-x C-f后/ssh:user@host#port:file

由此可以推出一个小技巧：

Emacs编辑本地需要sudo的文件

/ssh:root@locahost:file

过程中可能会遇到的问题：

• 1
  问题：ssh: connect to host localhost port 22: Connection refused
  原因：没装openssh-server
  解决：安装即可

• 2
  问题：ssh root@localhost并输入密码后报permission denied
  原因：发现直接用su也不行（之前一直都只是sudo），因为没设root密码
  解决：sudo passwd root
  注： /etc/ssh/sshd_config中有个参数PermitRootLogin需设置为yes。
  虽然有安全问题，不过是本机，问题不大。
  修改配置后需重启服务：sudo /etc/init.d/ssh restart

在新电脑上Octopress写博客时没法$ bundle install

现象：

$ bundle install安装到fast-stemmer时报一大堆错， 无法继续。

原因：

不详，可能是rvm里的bundle没升级

解决

做了一通操作，不知怎么就好了。。。 其中包括：

$ rvm gem update

不过我2次都引发了下面几个问题

$ bundle install RedCloth时报错

现象:

无法make，出错提示为：

Building native extensions.  This could take a while...
ERROR:  Error installing RedCloth:
        ERROR: Failed to build gem native extension.
...
make: /bin/install: Command not found
...

原因：

查看发现/bin/install文件不存在

解决：

$ ln -s /usr/bin/install /bin/install

参考：网上有人给出了解决方案

$ bundle install时直接安装到了当前目录

现象：

安装成功后提示： Your bundle is complete! It was installed into ./fast-stemmer 用git等版本控制的话，会发现有新目录

原因：

发现不知什么时候冒出了个新文件.bundle/config，里面的配置将安装指到当前目录。

解决：

# 直接删除配置，一般用不到
$ rm -rf .bundle
# 这个目录也删掉，当然目录名不一定是fast-stemmer，可能需要修改
$ rm -rf fast-stemmer
# 重新安装，完成
$ bundle install

最后祭出大招：重装

根本问题仿佛是更新后gem版本混乱，可以尝试

# xxx为某个gem名
$ gem list xxx
$ gem uninstall xxx
$ gem install xxx

也可以试试直接重装，这个很好使

$ rvm uninstall ruby-1.9.2-p290
$ rvm install ruby-1.9.2-p290

重装后记得重新bundle install啊

因关卡随时处于更新状态，可能会稍有不同
- 最后更新时间2012-11-14
- 最后更新时间2013-05-17

• 最后更新时间2016-02-25

准备

安装Githug：$ gem install githug。
安装完成后直接执行$ githug开始游戏，同一条命令进入下一关。
$ githug hint查看过关提示，
当操作错误无法过关时，可以$ githug reset重置当前关卡。

开始

0

y

1 初始化git项目

$ cd git_hug
$ git init

2 配置git用户信息

$ git config user.name xxx
$ git config user.email xxx@gmail.com

或者直接在.git/config文件里添加

[user]
        name = xxx
        email = xxx@gmail.com

回答时分别输入xxx和xxx@gmail.com

• 扩展
  使用--global参数修改本机全局设置

  $ git config --global user.name = xxx
  

• 问题
  命令行里不要带等号$ git config user.name = xxx, 否则去文件里查时会发现等号变成值name = =。 (之前好像可以用的？待解决)

3 stage一个文件

$ git add README

4 提交已stage的文件

$ git commit -m '-'

5 检出一个已有项目

$ git clone https://github.com/Gazler/cloneme

6 检出项目并重命名

$ git clone https://github.com/Gazler/cloneme my_cloned_repo

7 配置忽略文件规则

使用!可从忽略文件中排除。
在.gitignore文件里添加

*.swp

8 忽略文件中排除特定名称

在.gitignore文件里添加

*.a
!lib.a

9 查看状态

$ git status查看， 得到答案为database.yml

10 查看状态，分辨状态

$ git status查看。分为：可以被commit的，修改后但未stage的，新文件从未被stage的。
得到答案为2

11 删除文件

$ git status查看，发现被删文件名为deleteme.rb

$ git rm deleteme.rb

12 将文件移出git但不删除文件

$ git rm --cached deleteme.rb

13 保存项目当前状态但不提交（新，实用）

用于保存中间态，方便临时切换分支，用git stash list可查看git stash apply可取出(多个时后面可加stash@{2}之类的名字)。

$ git stash

14 重命名文件

$ git mv oldfile.txt newfile.txt

15 修改目录结构

$ mkdir src
$ git mv *.html src/

16 查看提交历史

$ git log查看提交历史记录，答案为commit后长字符串的前7位

17 tag

$ git tag 'new_tag'

18 推送 tag

因为默认push不会处理tag

$ git push --tags

19 将新修改并入上一次提交

$ git add forgotten_file.rb
$ git commit --amend

写完注释后保存退出（vi是:qw，应该都会吧）

20 修改提交时间

使用--date参数将时间修改到指定时间

$ git commit -m '-' --date 2099.01.01

21 unstage一个文件

$ git reset HEAD to_commit_second.rb

22 取消上一次提交

$ git reset --soft HEAD^

23 恢复文件修改

$ git checkout config.rb

24 查看remote信息

$ tail .git/config查看remote信息， 答案为my_remote_repo (应该有其他方法，直接通过命令)

25 查看remote链接

同上，答案为https://github.com/githug/not_a_repo (有其他方法)

26 pull

$ git pull origin master

27 关联远程库(新项目必备)

$ git remote add origin https://github.com/githug/githug

28 合并：rebase(与merge做对比)

$ git rebase origin/master
$ git push

29 查看变动

通过$ git diff app.rb查看文件改动，
显示行号为23，改动在下面第3行，所以答案为26。

30 跟踪具体代码行作者

$ git blame config.rb查看修改记录，发现密码出现在第五行。 在这行的左边可以看到提交者为Spider Man（卖萌了）。

31 新建分支

$ git branch test_code

32 新建并进入分支

$ git checkout -b my_branch

33 按标签检出

$ git checkout v1.2

34 仅按标签检出

当标签和分支名相同时，需要指定标签检出

$ git checkout tags/v1.2

35 按版本编号检出至新分支

查看提交历史，找到第二条的id，输入时只需要输入前几位即可

$ git branch test_branch -v 7cd3aa021

36 删除分支

$ git branch -d delete_me

37 推送分支

$ git push origin test_branch

38 合并分支

$ git merge feature

39 拉取分支

$ git fetch origin

40 rebase分支

$ git checkout feature
$ git rebase master

41 压缩空间

$ git repack -d

42 仅从分支合并指定提交

$ git branch查看分支列表，得到分支名。
$ git log new-feature查看分支提交记录。 最后合并：

$ git cherry-pick ca32a6da

43 全项目搜索

$ git grep TODO

其实 linux 下直接 grep 也可以

$ grep -Rn TODO

可以看到有4条，答案为4。

44 修改历史提交日志

查看历史记录，发现错误在倒数第二次提交上

$ git rebase -i HEAD~2

进入编辑页面，将需要改动的行（第一行）的pick改为reword （注意，只需要通过reword来标记，不要修改拼写）。 保存退出后在弹出的第二个窗口里修改拼写错误commmit改为commit。

45 合并历史提交（清洁日志，实用）

查看历史记录发现最后3次都为同一个文件的修改，可以合并

$ git rebase -i HEAD~4

将弹出编辑页的第2、3、4行的pick改为squash， 第二个弹出页直接保存退出即可。

46 从分支合并时仅保存为一次提交

$ git merge --squash long-feature-branch
$ git commit'

47 更改历史提交顺序

查看历史记录发现最后两次提交顺序错误

$ git rebase -i HEAD~2

然后在弹出编辑页的前两行顺序调换。

48 二叉树排错（很强大，侧面看出测试驱动重要性） *

$ git log --reverse -p prog.rb查看最初一次为正确提交，版本号为f608824888

$ git bisect start
$ git bisect good f608824888
$ git bisect bad
$ git bisect run make test
//$ git reset

日志里…… is the first bad commit 所以回答18ed2ac

49 仅stage一个文件的一部分 *

查看文件可知需要stage的是第二行（...the first feature）。

$ git add -p feature.rb

出现提示如何处理，输入e来编辑提交内容，
在弹出编辑页面删除第5行（...the first feature）， 因为不在本次stage操作内，保存退出。

50 查看操作历史

$ git reflog

查看到日志第2行...checkout: moving from solve_world_hunger to kill_the_batman...

$ git checkout solve_world_hunger

51 回滚某次提交历史

查看历史记录，发现倒数第二次提交需要取消

$ git revert HEAD~1

直接保存并退出

52 通过操作日志，挽救git reset --hard HEAD^的误操作

$ git reflog查看日志，发现需要回覆至版本804db65(每次版本号可能不同)，或直接写HEAD@{1}。

$ git checkout 804db65

53 合并分支并处理冲突

$ git merge mybranch

编辑poem.txt文件，处理冲突

$ git add poem.txt
$ git ci -m 'merge mybranch`

54 子模块

git submodule add https://github.com/jackmaney/githug-include-me

55

最后一关！！！ 内容是什么，就留点悬念吧:)

先回顾一下

/* 白色背景,透明度0.6 */
.alpha60 {
  background: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.6);
  background: transparent\9;
  zoom: 1;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff)";
}

分析

需要做的工作有：

• 颜色和透明值应该通过参数传入
• 需要能计算出rgba值：rgb(255, 255, 255)
• 需要计算出IE下的值#99ffffff
• 封装成minix模块，以便调用

过程

Sass的文档不全，为了查找一些计算函数，我只好去源码里找。
开始想寻求的是一个转十六进制的方法，结果发现ie_hex_str已经实现了。
在这里贴段里面的实现代码，来看看Sass的计算功能：

# Sass
alpha = (color.alpha * 255).round.to_s(16).rjust(2, '0')
# 等价于JS中的：
Math.round(0.6 * 255).toString(16);

最后的rjust方法，应该是空位补零。

非常有用的两个页面： 函数源码， 在线调试Sass

总结

最终代码如下：

@mixin better_transparentize($color, $alpha)
  $c: rgba($color, $alpha)
  $ie_c: ie_hex_str($c)
  background: rgba($color, 1)
  background: $c
  background: transparent\9
  zoom: 1
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c})
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c})"

然后在需要的地方直接引用即可，如：

.box
  @include better_transparentize(white, .8)

Bug出现需要同时满足以下3个条件:

• 顶部导航条navbar使用classnavbar-fixed-top
• 参考Bootstrap官方网站, 给body添加样式padding-top: 60px;
• 使用响应式(Responsive design), 并且处在此状态下(默认为宽度<=980时触发)

解决方案1

给此段样式加上条件

@media (min-width: 981px) {
    body {
        padding-top: 60px;
    }
}

解决方案2

将bootstrap-responsive.css放在body样式之后

<link href="../css/bootstrap.css" rel="stylesheet">
<style type="text/css">
      body {
        padding-top: 60px;
      }
</style>
<link href="../css/bootstrap-responsive.css" rel="stylesheet">

Rails3.2的Asset Pipeline就更方便了，放在import中即可（我用的是Sass）

@import compass
$baseFontSize: 15px
@import compass_twitter_bootstrap
body
  padding-top: 60px
@import compass_twitter_bootstrap_responsive

结论

我在某项目中因为使用的是customize出来的单个css文件, 所以采用了解决方案1.
在另一RoR项目中考虑使用解决方案2.

参考

navbar-fixed-top breaks when using responsive css

Github
Heroku
MongoHQ
UpYun
name.com

一切在拖延症患者眼里都是障碍, 尤其是: 技术, 设计, 域名, 服务器.

技术

语言

一个想法在脑子里几年了, 首要问题是怎么做.
从Java, PHP, Ruby一路走来, 从Rails1, 2, 3, 中途好几次刚建好项目便放弃.
到今天的3.2.1, 看上去最佳解决方案已经出炉. 同时还要忍住去捯饬NodeJS的冲动.

数据库用MongoDB, 单是不用像MySQL一样migrate的特性, 就让我深深爱上它.

前端代码模板很有意思.

• HTML
  先前流行的是HAML, 我也很喜欢它的格式.
  不过这回还是玩玩SLiM吧, 虽然它的可读性不如前者.
• CSS
  三选一: SASS, SCSS, LESS.
  选定SASS. 一是因为之前用过比较熟, 使用缩进的风格也是我喜欢的类型.
  一直不明白后来要推出SCSS这种不伦不类的东西.
  LESS偏向NodeJS系的, 以后有空再研究吧.
• JS
  CoffeeScript就先不考虑, JS是我最擅长的部分, 就让我敲敲正常的代码吧.
  自从用jQuery后我就很少写真正的JS了, 我恨jQuery!
  另外, UJS被Rails放弃也给我留下了一定的心理阴影.

功能模块

我不是个NB的程序员, 我最喜欢做的事是用别人的轮子.
与抄袭不同, 这一切都是开源的.
我懂得欣赏它们, 也知道该如何更好的去用, 这大概算是我的一个优点.

• jQuery
  虽然我恨他, 但还是先用着吧. 怀念MooTools的日子.
• Mongoid
  Ruby里MongoDB的ODM(Object-Document-Mapper)框架.
  MongoMapper和Mongoid我选择了后者.
• devise
  用户身份验证(Authentication)模块.
• CarrierWave
  Rails的文件上传模块.
  其实Paperclip用的人更多, 不过不支持Mongoid.
• 图片处理
  图片处理肯定离不开ImageMagick, Ruby下的接口gem包有: RMagick和Mini magick.
  不过这回我打算使用又拍云(UpYun)存储图片, 顺便就把图片处理也交给它做吧, 后面还会提到.

设计

还好有Bootstrip, 有了它前期可以把更多的精力放在功能上.
轻量级的Blueprint也是一个很不错的选择. 上天赐给我一名设计师吧!

域名

额...
这个实在太重要了.
想了几年终于想到一个还不错的域名, iaieye.com, 这也是最近比较有动力的原因.

服务器

没有自己服务器, 所以一切这么解决:

• 代码交给Github
  Github就不介绍了, 最好, 没有之一.
  需要注意的是免费版不能加私密项目.
  国内最近有个GitCafe, 观望中.
• 项目放在Heroku
• 数据库用MongoHQ
  免费16M, 先用着吧. MongoLab免费240M, 不过我喜欢前者的Icon.
• 图片存到又拍云(UpYun)
  前段时间才发现国内已经有一些云服务了. 又拍云的口碑不错, 还支持图片处理, 先用用看.
  盛大云仿佛也不错, 有云主机和MongoIC, 不过备案是个大问题(有朋友推荐DNSPod来解决).

笔记

配置文件里私密信息（尤其是密码不要进SVN）

• 用环境变量传递
  如: uri: <%= ENV['USERNAME'] %>

• 环境变量在Heroku里的设置
  添加: $ heroku config:add USERNAME=fancyoung PASSWORD=123456 ......
  查看: heroku config
  UpYun需要通过此方式配置

MongoHQ配置

修改配置文件: config/mongoid.yml

...
production:
  uri: <%= ENV['MONGOHQ_URL'] %>
...

发布到Heroku

$ git push heroku master

绑定自己的域名

添加Heroku插件(Add-on): Custom Domain.
Heroku里添加插件需要先用信用卡(需国际信用卡)认证.
(根据@joel 提醒，现在已可以直接设置，无需插件，
Custom Domains已打上REPLACED标记。)

配置过程中, 发现3个IP都ping不通, 发现是被墙.
最后用过设置CNAME的方式完成配置.

参考

Heroku绑定MongoHQ方法
用Heroku插件Custom Domain自定义域名
配置Heroku上的变量

1. 响应式Web设计(Responsive Web Design)

简单的说就是动态适应当前各种分辨率及设备(电脑, Pad, 手机, ...)的页面方案.
常用的有弹性布局. 另, "弹性图片"是个很有意思的东西.
什么是响应式Web设计？怎样进行？
绝对是将来的方向, 但考虑到技术和设计的实现复杂度, 暂时还是用定宽网格吧.

2. 固定导航条(Fixed-Position Navigation)

如果不是ie6不支持position:fixed,
估计每个网站都会放几个固定元素.
常见的有: 顶部导航条, 底部工具条, "回到顶部".

3. 圆(Circles)

圆圆的东西总能戳中人们的萌点,
比如: columnfivemedia.com
网站用了两种方式实现圆:
顶部的两个圈圈用的是透明背景的png图, 中部并排的四个圈圈通过圆角实现 (只需将圆角设定大于宽/高的一半即可).

这个网站有意思的还有将鼠标指到圈圈上时,图片会动起来.
实现方法也非常简单,利用了CSS spirit.
将一张静态图和一张动态图拼接成git图, 再通过CSS实现显示部分.
(不用两张图是为了能同时加载, 以避免鼠标指上去时第二张图还没有加载.) {% jsfiddle zr4ac result,html,css light 230px 420px %}

4. 大矢量图(Big Vector Art)

5. 多列菜单(Multi-Column Menus)

6. jQuery/CSS3/HTML5动画(Animation)

7. 缎带&横幅(Ribbons & Banner Graphics)

一秒钟网页立体化, 元素变卡片.
可与固定位置配合使用(如:RoR教程, 见右上角的"edge").
你应该在某处已经看过了, 放几张图片例子: {% img http://www.webpagescreenshot.info/img/184189-1216201135658am.png %} {% img http://www.webpagescreenshot.info/img/491988-1216201135455am.png %}

8. 自定义字体风格(Custom Font Faces)

这点就先不看了。人家只有26个字母，算上大小写也才52个。

9. 信息可视化(Infographics)

没技术含量, 就不写了. 数据之美：Infographics 终极探索

10. 专注于简约(Focus on Simplicity)

11. 视差滚动(Parallax Scrolling)

这个是我自己加的，因为实在太炫了。
据说这是最经典的视差滚动：Nike Better World
每页都有很多创意元素：某汽车网站
从开发角度讲难度并不高，可能会有点点繁琐，
我想它没排进前十的原因大约是对设计者要求太高。
来份教程：Behind The Scenes Of Nike Better World

参考

原文：Web Design Trends in 2012

当今的大部分网页设计都包含了半透明的元素.但用CSS实现想要的效果却没那么简单.

现存的问题

如果我们想要一个半透明背景,有两种实现方式:

• 利用CSS和opacity属性
• 建立一个24位PNG背景图片
  用opacity的问题除了 需要通过麻烦的语法来兼容所有浏览器, 还有不单该元素自身背景透明了,它的子元素也会透明. 所以里面所有的文字也是透明的,这一般不是想要的效果. 你可以做一些CSS trick,通过建立额外的元素来解决这个问题,但这种解决方案很恶心.

用PNG的问题是会额外增加HTTP请求, 而且图片比几行css代码要大得多- 尤其考虑到图片不能太小以避免 IE下24位PNG图透明时引起的内存泄漏.

解决方案

这里提供一种方法: RGBa colors. 它的美妙之处在于你可以通过设置RGB值和透明值,轻松的实现颜色透明. 代码如下:

.alpha60 {
  /* 用于不支持RGBa的浏览器 */
  background: rgb(0, 0, 0);
  /* RGBa, 透明度0.6 */
  background: rgba(0, 0, 0, 0.6);
}

透明将只对背景生效,很好很强大,对吧:)

继续

不幸的是IE不支持RGBa(IE678都不行). 幸运的是微软在2000年时疯狂的给IE加上了各种过滤器. 其中有一个是渐变过滤器(the gradient filter).aspx), 我们只需要把开始结束都设置成一个颜色就可以了. 你现在会想,"那我们怎么将其透明呢?". 你只需要用16进制值来定义颜色就可以了. 下面是用渐变过滤器实现和上面同等透明效果的代码:

.alpha60 {
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
}

你可以看到定义里的8位16进制数字, 前两位代表透明度,接下来两位是红色,接着就是绿色和蓝色. 注意两位16进制颜色的范围是0~255(ff). 那我们怎么将0.6转化为16进制数呢?

这里就需要用到一些数学知识了. 基本上,我们只需要将需要的透明度(比如0.6)乘以255,再转化为16进制即可. 还有一个简单的办法是利用 Google’s Search Features, 你只需要在Google里搜索 0.6 * 255 in hex 就能得到答案. 不过Google计算器仿佛只能处理整数,而 0.3 * 255 in hex 它便无法得出结果.

还有一种更快的方法就是利用JavaScript, 只需要在浏览器控制行里输入

Math.floor(0.6 * 255).toString(16);

便能得出结果.

整合

根据上面的方法,我们来写一个完整的实现:

.alpha60 {
  /* Fallback for web browsers that doesn't support RGBa */
  background: rgb(0, 0, 0);
  /* RGBa with 0.6 opacity */
  background: rgba(0, 0, 0, 0.6);
  /* For IE 5.5 - 7*/
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
  /* For IE 8*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

注意,我们还需要额外为IE定义background: transparent, 我们可以通过条件注释来解决.

浏览器支持

支持RGBa的有:

• firefox 3+
• Safari 2+
• Opera 10
  IE过滤器支持IE5.5及以上版本.

所以这种方式几乎支持了所有浏览器.

感谢

Thanks to RGBa Browser Support and Bulletproof, cross-browser RGBA backgrounds, today for the information and inspiration.

Thanks to Emil Stenström and Pelle Wessman for coming up with countless alternatives for hex conversion, and explaining basic math to stupid me.

译者总结

大家使用时可直接复制下面代码:

/* 白色背景,透明度0.6 */
.alpha60 {
  background: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.6);
  background: transparent\9;
  zoom: 1;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff)";
}

最后来个效果图,顺便试试jsfiddle的嵌入:
{% jsfiddle nMKGs result,html,css %}

(2012-05-01 更新)
因为自己用的是Sass，所以封装了一下，Sass的功能很强大：
Sass中通过mixin封装透明背景模块

送给敬爱的GFW

问题

$ rails new报错
$ bundle install报错
等等一切灵异问题
据说是因为rubygems.org用的是Amazon的S3服务，而部分s3服务器被GFW拦于墙外。

解决

• 2012.12.31更新：淘宝提供了镜像
  添加source地址: 先$ gem sources -a http://ruby.taobao.org/,
  用$ gem sources -l查看source列表,
  然后用$ gem sources -r 不需要的source地址命令来删除之前的.

• 曾经解决方案，单独下载安装包
  可能需要安装的包
  multi_json
  activesupport

链接

Rubygems

Blueprint是个好框架，本教程会深入介绍你可以用它来做什么，也会说到什么时候不适合用。

Blueprint简介

Blueprint是一个CSS框架，为减少开发时间而设计。它可以构架起有坚实基础的CSS，其中包含合理的排版（typography）、可定制的网格(grid)、打印样式等。

但是Blueprint不是银弹，它适用于每个页面都需要独特的设计。在决定使用Blueprint前建议先看看Blueprint例子以决定是否适合你。你可以检出tests目录，里面例子展示大部分Blueprint样式。

“框架”这个词也许有些误导，Blueprint并不会建议你如何组织你的CSS文件。它更像一个工具箱，你可以从中选出你需要的。

结构概述

自下而上的看Blueprint：

CSS布局： CSS reset: 移除浏览器的默认规则。 Typography: 默认提供一些漂亮的排版和颜色。 Grid: 提供一组样式来制作网格。

第二部分是脚本。你可以它来自定义框架，可以是列数、宽度等外观，还可以是路径、命名空间等。我们有两个脚本：

1. Compressor: 用于压缩和自定义源文件。
2. Validator: 用于验证Blueprint核心文件。

以上是简单介绍，接下来让我们进入细节。首先，我们看看CSS部分。然后我们再介绍脚本，以及如何通过它数和自定制框架。

设置Blueprint

为了使用Blueprint，你必须包含以下三个文件在你的HTML中：

• blueprint/screen.css: 主要文件，页面展示的样式都在里面。
• blueprint/print.css: 用于打印。
• blueprint/ie.css: 用于IE浏览器下的校正。

在HTML中嵌入下面代码来引用（请确认路径正确）：

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print" /> 
<!--[if lt IE 8]>
  <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->

（原文提示XHTML需要用"/>"结束标签，上面代码中我已经直接加上了）

使用Blueprint里的CSS

之前已经提过，Blueprint有三个布局，前两个布局，CSS reset和默认排版用于设置默认HTML样式。所以你不需要更改这两个文件。如果你想更改全局字体大小等，建议你写在自己的CSS文件里，以便将来更新Blueprint版本。

排版相关class

While the typography of Blueprint mainly applies itself, there’s a few classes provided. 下面是一个它们名字的列表和介绍它们的作用:

.hide 隐藏元素
.quiet 使字体颜色柔和
.loud 黑色字体
highlight 黄色背景
.added 绿色背景
.removed 红色背景
.first 移除左侧margin/padding
.last 移除右侧margin/padding
.top 移除顶部margin/padding
.bottom 移除底部margin/padding

表格样式

Blueprint可以通过给输入元素加.text, .title类来控制，其中.text表示普通大小，.title提供一个大字体的输入框。

这里还有一些类可以用于成功或失败信息：

div.error 建议一个失败框（红色）。
div.notice 建议一个提示框（黄色）。
div.success 建议一个成功框（绿色）。

建立网格

第三个布局是网格，是一个给你网站建立各样网格的工具。记住网格背后的大部分CSS都可以自定义（下面会讲到）。在这个部分我会使用默认设置。

默认网格有24列，每列宽30px，边距(margin)10px。总共宽为950px，适合1024x768的分辨率。如果你想要更窄的设计，可以看下面自定义网格一节。

怎么用Blueprint来建立网格呢？新建一个<div/>来代表一列，并且给它加一个.span-x的class。比如，如果你想要一个三列的布局，两窄一宽，并且包含头尾，可以参考下面的代码:

<div class="container">
  <div class="span-24">
    头部
  </div>

  <div class="span-4">
    第一列
  </div>
  <div class="span-16">
    中间列
  </div>
  <div class="span-4 last">
    最后一列
  </div>

  <div class="span-24">
    尾部
  </div>
</div>

此外，还有两个class你应该知道。首先，每个Blueprint页面应该包含在一个class为.container的div里，一般紧跟在body标签后。

第二，每行的最后一列（默认24列），应该用class.last来移除右侧的边距(margin)。可以参考tests/parts/里的例子。这些文件告诉了你Blueprint的网格能做些什么。

这里是一个其他网格相关class的快速概述：
.append-x 附加（在后面加）x条空列。
.prepend-x 追加（在前面）x条空列。
.push-x 推送x列到左侧。可用于切换列。
.pull-x 推送x列到右侧。可用于切换列。
.border 列右侧加分界线。
.colborder 建立新列，分界线在中部。
.clear 换行，无论是否有空。
.showgrid 给容器或列添加后能看见网格和基线。

在这个列表中，x用于append/prepend时范围是1-23，用于push/pull时是1-24。如果你自定义了新的列数，这个范围会随之变化。

下面是另一个例子，包含4列等宽，前两列间有分界线，后两列间也有，4列的中间有段空白。

<div class="container">
  <div class="span-5 border">
    第一列
  </div>
  <div class="span-5 append-4">
    第二列
  </div>
  <div class="span-5 border">
    第三列
  </div>
  <div class="span-5 last">
    第四列
  </div>
</div>

你也可以通过嵌套列来实现想要的布局。下面例子展现的是页面左半部有四个长方形，两上两下，右半部有一个长方形。

<div class="container">
  <div class="span-12">
    <div class="span-6">
      左上
    </div>
    <div class="span-6 last">
      右上
    </div>
    <div class="span-6">
      左下
    </div>
    <div class="span-6 last">
      右下
    </div>
  </div>
  <div class="span-12 last">
    另一块
  </div>
</div>

如果不理解可以在浏览器里尝试上面的代码。想看更过的如何使用class的例子，请看/tests/parts/grid.html。

脚本

Blueprint有两个脚本：一个用于压缩和自定义CSS，另一个是验证核心CSS文件，以免你修改了某些文件。

验证器(The Validator)

验证器的工作很简单——检查Blueprint核心CSS里的文件。脚本使用配套版本的W3C CSS验证器来完成。为了运行，你需要安装Ruby。然后你可以运行$ ruby validate.rb。

请注意Blueprint有几个验证错误。它们是已知的，来自于几个为了保持浏览器一致性的CSS hack。

压缩器(The Compressor)

你的HTML里引用压缩版的核心CSS文件时，当你做过修改，需要重新压缩。这是压缩器脚本的作用。

另外，你可以在这里自定义网格。为了自定义网格，需要使用一个特殊的设置文件，当你运行压缩器时，就会生成新的CSS。新压缩的文件将会使用你的设置。

你之需要重新运行脚本来重新压缩。这会解析核心CSS文件并在blueprint文件夹里生成新文件。与验证器一样，需要安装Ruby。在lib目录里执行$ ruby compress.rb。

执行这个文件会将blueprint/src下的文件合并成三个文件：ie.css, print.css, screen.css。
但是你可以通过加参数来改变行为。执行$ ruby compress.rb -h查看你可以使用的基本参数。

自定义设置

你可以阅读lib/compress.rb里的文档来学习如何自定义设置。

参考

Blueprint CSS Framework Tutorial(官方原文)
官网
Demo

准备工作

确认为64位平台

如果你已经正在使用x86_64但是想安装i686，可以跳过此步。 为了运行64位软件，你的CPU必须支持64位。现在大部分CPU都支持64位。你可以通过运行一下命令来确认：

$ grep --color 'lm' /proc/cpuinfo

（原文中为grep --color '\' /proc/cpuinfo， 应该不对） 当CPU为x86_64平台时，输出结果里会出现高亮的 lm （“long mode”）。 注意不是lahf_lm，它和64位无关。

硬盘空间

在迁移过程中，/var/cache/pacman/pkg的大小将翻倍，请为此做好准备。这是假定cache里只有当前安装的包，就像$ pacman -Sc（clean）刚运行过一样。使用空间增长是因为所有包同时有i686和x86_64两个版本。 如果你没有足够的空间，可以使用gparted来调整相关分区大小，或者mount另一个分区到/var/cache/pacman。 在迁移过程中请不要移除老框架的软件包，知道完全升级成功。过早的移除会使你无法回退和还原变更。

电源支持

升级时间比较长，并且不可中断。根据你的 安装包大小及网络速度，你最好为此准备至少一个小时的升级时间（虽然你可以先把它们下载下来）。请保证你的电源稳定。

回退准备

如果迁移过程中失败，有些包可以帮助你解决此时的问题，但是需要你在迁移之前安装。详情可以参考后面的 #Troubleshooting 。 包busybox可以用来还原变更。它不依赖于其他包，可以单独安装。通过下面命令可以安装32位（i686）的版本

$ pacman -S busybox

另一个包是lib32-glibc，在Multilib的x86_64资源库里。这个只有当你从32位迁移至其它版本时才可能使用（It is probably only useful when migrating away from 32 bits）;无论如何你可能安全跳过这个包。你可以用这个包来运行32位程序，通过明确的调用/lib/ld-linux-x86-32.so.2。可用下面命令行安装。

$ pacman -S lib32-glibc

方法1：使用Arch LiveCD

1. 下载、刻录并启动64位Arch ISO LiveCD。
2. 配置LiveCD的网络，然后pacman用新的库。
3. 将现在的安装挂在到/mnt目录。如：mount /dev/sda1 /mnt
4. 使用下面的脚本来执行：升级本地pacman数据库、取得本地安装包列表并重新安装： ``` #!/bin/bash

MOUNTED_INSTALL='/mnt' TEMP_FILE='/tmp/packages.list'

pacman --root $MOUNTED_INSTALL -Sy pacman --root $MOUNTED_INSTALL -Qqet > $TEMP_FILE

for PKG in $(cat $TEMP_FILE) ; do pacman --root $MOUNTED_INSTALL -S $PKG --noconfirm done

exit 0

## 方法2：从当前系统升级
### 准备
#### Cache old packages
> 注意：如果你有从AUR或第三方库的包，并且在新的平台里查询不到，pacman会告知找不到相应替代。将这些包记录下来，以便在升级成功后重新安装，并用```$ pacman -Rsn package_name```来卸载。

确保你现在的包都在你的cache里，下载它们（老平台的）以便回退。

$ pacman -Sw $(comm -23 <(pacman -Qq) <(pacman -Qmq))

或者用pacman-contrib包里的bacman来生成它们。
如果你是从32位迁移，现在可以安装32位的Busybox

$ pacman -S busybox

#### 更换pacman平台
编辑配置文件```/etc/pacman.conf```并且把```Architecture```从```auto```改为新值。你可以参考下面的sed命令：
For x86_64

$ sed -i -e s/'Architecture = auto'/'Architecture = x86_64'/g /etc/pacman.conf

For i686

$ sed -i -e s/'Architecture = auto'/'Architecture = i686'/g /etc/pacman.conf

手动移除Pacman软件仓库的数据库，强制同步新的软件仓库：

$ rm -rf /var/lib/pacman/sync/* # remove existing repository cache $ pacman -Sy # sync new architecture repositories

#### 下载新包
给所有当前安装包下载新平台版本

$ pacman -Sw $(pacman -Qq|sed '/^lib32-/ d') # download new package versions

如果有些包不能下载，请删除它们。
如果是迁移到32位，安装32位的Busybox fallback now that Pacman has been configured with the 32-bit architecture:

$ pacman -S busybox

或者，如果是迁移到64位，安装lib-32-glibc fallback:

$ pacman -S lib32-glibc

### 安装包
#### 安装内核（64位）
将内核升级到64位（x86_64）很安全很简单：32位和64位的应用在64位内核下都能很好的运行。如果是从64位迁移至其它平台，leave the 64-bit kernel installed and running for now and skip this step.
用下面命令安装Arch Linux内核：

$ pacman -S linux

启动新的64位内核，并确认它运行x86_64平台：

$ uname -m

#### 控制台终端
现在切换到一个text-mode虚拟控制台（可以通过Ctrl+Alt+F1）来完成接下来的步骤。你可以使用SSH之类的伪终端，但不建议你这么做。有些包会被移除或者被替换，可能会导致X11桌面不稳定，以至于系统无法启动。

#### 安装Pacman
> 警告：一旦你开始升级pacman及相关依赖，便不能中断。Pacman及相关依赖必须在同一条命令行上同时安装。

$ pacman -S pacman glibc libfetch libarchive openssl acl attr xz-utils bzip2 zlib readline bash ncurses expat

Immediately following this command only Busybox, Bash and Pacman will be executable until the other packages are migrated below. 安装成功前不能重启。

#### 安装已存在的包
为新平台安装所有之前下载的替换。（此时可以休息休息，因为需要花费一段时间。）

$ pacman -S $(pacman -Qq)

For migration away from 64 bits, you may want to skip installing a 32-bit kernel in the command above, since the old 64-bit kernel will still run 32-bit programs.
完整这步迁移后，各方面都已经完成并且可以重启电脑。

### 清理
你现在可以移除Busybox和lib32-glibc。

$ pacman -Rcn busybox lib32-glibc

#### Makepkg compiler flags
升级中新版的```/etc/makepkg.conf```可能会被保存至```/etc/makepkg.conf.pacnew```。如果你以后要用[makepkg](https://wiki.archlinux.org/index.php/Makepkg)进行编译，你必须替换或修改老版本。

$ mv /etc/makepkg.conf /etc/makepkg.conf.backup && mv /etc/makepkg.conf.pacnew /etc/makepkg.conf

It might also be a good idea to just get a list of "new" additions to /etc. You can get a list with the following command:

$ find /etc/ -type f -name *.pac*

## 问题解决
在升级过程中，当glibc替换为新版本后，许多老版本的程序将不能运行。如果发生此类问题，你可以用[busybox](https://www.archlinux.org/packages/?name=busybox)和[lib32-glibc](https://www.archlinux.org/packages/?name=lib32-glibc)来解决。

### Busybox
In Arch, Busybox is statically linked; it can run without any libraries. There are many commands available to you. For example, to extract an i686 version of Pacman from a cached package:

$ busybox tar xf /var/cache/pacman/pkg/pacman-3.3.2-1-i686.pkg.tar.gz -C

### Lib32-glibc
Example run 32 bit /bin/ls:

$ /lib/ld-linux-x86-32.so.2 /bin/ls ```

其它

• Migrate installation to new hardware

Octopress is a framework designed by Brandon Mathis for Jekyll, the blog aware static site generator powering Github Pages.

优点

用文件方式储存数据，无需数据库
以静态方式发布，可直接挂在github等地方
用markdown格式写博客
可以轻松的配置和发布

常用命令

注意

有些机子上运行可能会报错，需要在命令前加上bundle exec

添加文章

$ rake new_post["title"]

运行后会通过title生成相关文件、链接，可在文件里修改显示出来的标题。
title可以使用中文，会自动转化为拼音（个人不建议，因为链接会比较无意义）。

$ rake generate       #发布文件到public目录
$ rake watch          #监控source和sass目录的变动
$ rake preview        #启动服务器并监控变动，通过http://localhost:4000预览

发布

$ rake generate
$ rake deploy

# 或者直接使用一条命令，看名字就知道是怎么回事了
$ rake gen_deploy

保存源代码

因为发布的只是生成的静态页面，
需要在项目里建立source分支用于保存整个项目源代码（配置、markdown文件等）。

$ git add .
$ git commit -m 'blog'
$ git push origin source

更多设置

添加"关于我"

在source下新建about目录，并在里面添加index.markdown文件。
编辑导航条source/_includes/custom/navigation.html
注意:index.markdown文件需要加上头，否则会找不到。

首页只显示摘要

• 在文中加入<!--more-->来控制摘要截取位置
• 修改_config.yml里的excerpt_link控制链接文字

部署到Github

操作步骤参考：Deploying to Github Pages
如果你有自己的域名，可参考：Github Page绑定自己域名

Bug Fix

不能进行deploy(Github)

问题：有次发现$ rake deploy不能发布，但是预览正常。检查github上source分支代码已更新，但master仍为老代码。
原因：发现是因为代码是新从github下clone下来的，未进行初始化deploy。
解决：需要执行$ rake setup_github_pages进行初始化。
注意：rake操作应该在source分支下进行，若是刚从github里clone下来的，请先执行$ git checkout source。

修改的样式preview时不生效

问题：预览时发现之前设置成功的自定义样式不生效，变回默认样式。
解决：$ rake generate即可，会重新生成css。

无法update octopress

每过一段时间，可能需要更新一下Octopress版本，
问题：执行$ git pull octopress master时报错：fatal: 'octopress' does not appear to be a git repository
原因：没有相应远程分支（第一次生成博客的项目中才有？）。打开.git/config查看，应该不包含[remote "octopress"]块。
解决：手动添加，或者在命令行执行：$ git remote add octopress https://github.com/imathis/octopress.git

参考

Octopress官方文档
markdown语法

$ echo 'fancyoung.com' >> source/CNAME

官方教程