atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

  <title><![CDATA[没有标题的博客]]></title>
  <link href="http://fancyoung.com/atom.xml" rel="self"/>
  <link href="http://fancyoung.com/"/>
  <updated>2019-04-16T21:51:32+08:00</updated>
  <id>http://fancyoung.com/</id>
  <author>
    <name><![CDATA[思扬]]></name>
    
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <entry>
    <title type="html"><![CDATA[学习AngularJS方法（翻译）]]></title>
    <link href="http://fancyoung.com/blog/a-better-way-to-learn-angularjs/"/>
    <updated>2013-09-07T19:59:00+08:00</updated>
    <id>http://fancyoung.com/blog/a-better-way-to-learn-angularjs</id>
    <content type="html"><![CDATA[<p>这个AngularJS课程意在为你揭露Angular各方面话题的最佳资源。我们尽量展示其各方面优势，使得你可得到这些话题完整的全景。</p>

<h4>课程</h4>

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

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

<h4>预备知识</h4>

<ul>
<li>掌握HTML、CSS、JavaScript， 以及下面的概念：

<ul>
<li>POJO(plain old JavaScript object)，包括：</li>
<li>面向对象变成，包括封装与继承</li>
<li>对象的创建、原型</li>
</ul>
</li>
<li>基本的MVC概念</li>
<li>DOM</li>
<li>JavaScript函数、事件、错误处理</li>
</ul>


<h4>资源</h4>

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

<ul>
<li>必修资源

<ul>
<li><a href="http://shop.oreilly.com/product/0636920028055.do">AngularJS - O’Reilly Media</a> (available on <a href="http://www.amazon.com/AngularJS-Brad-Green/dp/1449344852/ref=sr_1_1?ie=UTF8&amp;qid=1372874049&amp;sr=8-1&amp;keywords=angularjs">Amazon</a>)</li>
<li><a href="http://www.egghead.io/">John Lindquist&rsquo;s egghead.io</a></li>
<li><a href="https://github.com/msfrisbie/egghead-angularjs">egghead.io source code</a></li>
<li><a href="http://docs.angularjs.org/">AngularJS docs</a></li>
</ul>
</li>
<li>补充读物

<ul>
<li><a href="http://jimhoskins.com/">Jim Hoskins blog</a></li>
<li><a href="http://www.bennadel.com/">Ben Nadel blog</a></li>
<li><a href="http://onehungrymind.com/">OneHungryMind</a></li>
<li><a href="http://www.yearofmoo.com/">year of moo</a></li>
<li><a href="http://blog.brunoscopelliti.com/">Bruno Scopelliti blog</a></li>
</ul>
</li>
</ul>


<h2>剩余部分参看原文：<a href="http://www.thinkster.io/angularjs/GtaQ0oMGIl">A Better Way to Learn AngularJS</a></h2>

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

<p>PSPS：
作为想法和感情异常丰富的我，开本博客的那天便告诉自己这里只记录客观的技术。
所以与这段话类似的内容以后会尽量不出现。</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Octopress在zsh下无法新建博客的问题]]></title>
    <link href="http://fancyoung.com/blog/use-octopress-new-post-function-with-zsh/"/>
    <updated>2012-08-12T16:50:00+08:00</updated>
    <id>http://fancyoung.com/blog/use-octopress-new-post-function-with-zsh</id>
    <content type="html"><![CDATA[<p>执行：<code>$ rake new_post["arch-linux-reinstall-glibc.markdown"]</code></p>

<p>报错：<code>zsh: no matches found: new_post[arch-linux-reinstall-glibc]</code></p>

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

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

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

<hr />

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

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

<h2>参考</h2>

<p><a href="https://github.com/imathis/octopress/issues/117">Not compatible with Zsh</a></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Arch升级失败后修复glibc记录]]></title>
    <link href="http://fancyoung.com/blog/arch-linux-reinstall-glibc/"/>
    <updated>2012-08-10T00:27:00+08:00</updated>
    <id>http://fancyoung.com/blog/arch-linux-reinstall-glibc</id>
    <content type="html"><![CDATA[<h2>起因</h2>

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

<h2>解决方法</h2>

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


<h4>注意</h4>

<h2>其它</h2>

<h4>配置网络</h4>

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>interface=eth0
</span><span class='line'>address=192.168.0.2
</span><span class='line'>netmask=255.255.255.0
</span><span class='line'>gateway=192.168.22.1</span></code></pre></td></tr></table></div></figure>


<p>配置<code>/etc/resolv.conf</code></p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>nameserver 8.8.8.8</span></code></pre></td></tr></table></div></figure>


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

<h4>目录</h4>

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

<h4>时间错误的解决</h4>

<p>遇到报错</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>******************* FILESYSTEM CHECK FAILED *************
</span><span class='line'>* Please repair manually and reboot. Note that the root *
</span><span class='line'>* filesystem is currently mounted read-only. To remount *
</span><span class='line'>* it read-write type: mount -n -o remount,rw / *
</span><span class='line'>* When you exit the mantenance shel the system will *
</span><span class='line'>* reboot automatically. *
</span><span class='line'>*********************************************************</span></code></pre></td></tr></table></div></figure>


<p>因为BIOS时间设置有问题。</p>

<h2>参考</h2>

<p><a href="https://bbs.archlinux.org/viewtopic.php?id=142459">bug修复方案：How to re-install glibc?</a></p>

<p><a href="https://wiki.archlinux.org/index.php/Configuring_Network">Arch网络配置：Configuring Network</a></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Tmux使用]]></title>
    <link href="http://fancyoung.com/blog/tmux-study/"/>
    <updated>2012-07-12T15:29:00+08:00</updated>
    <id>http://fancyoung.com/blog/tmux-study</id>
    <content type="html"><![CDATA[<h2>简介</h2>

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

<p>tmux的三个层级概念：<br/>
- session(会话)<br/>
- window(窗口)<br/>
- pane(面板)</p>

<p>命令：<br/>
<code>$ tmux</code><br/>
<code>$ tmux attach -t session</code></p>

<h2>快捷键</h2>

<p><code>C-b</code>激活控制台，然后输入下面命令</p>

<h4>系统</h4>

<table>
<thead>
<tr>
<th>快捷键   </th>
<th> 功能</th>
</tr>
</thead>
<tbody>
<tr>
<td>?       </td>
<td> 快捷键帮助</td>
</tr>
<tr>
<td>[       </td>
<td> 进入视图模式</td>
</tr>
<tr>
<td>s       </td>
<td> 切换会话</td>
</tr>
<tr>
<td>d       </td>
<td> 脱离当前会话，<code>$ tmux attach</code>继续</td>
</tr>
</tbody>
</table>


<h4>窗口</h4>

<table>
<thead>
<tr>
<th>快捷键   </th>
<th> 功能</th>
</tr>
</thead>
<tbody>
<tr>
<td>c       </td>
<td> 新建窗口</td>
</tr>
<tr>
<td>&amp;       </td>
<td> 关闭窗口</td>
</tr>
<tr>
<td>l       </td>
<td> 前一个窗口</td>
</tr>
<tr>
<td>n/p     </td>
<td> 下/上一个窗口</td>
</tr>
<tr>
<td>数字     </td>
<td> 跳到相应窗口</td>
</tr>
<tr>
<td>w       </td>
<td> 列出所有窗口</td>
</tr>
<tr>
<td>,       </td>
<td> 重命名当前窗口</td>
</tr>
<tr>
<td>.       </td>
<td> 修改窗口编号，相当于排序</td>
</tr>
<tr>
<td>f       </td>
<td> 查找</td>
</tr>
</tbody>
</table>


<h4>面板</h4>

<table>
<thead>
<tr>
<th>快捷键   </th>
<th> 功能</th>
</tr>
</thead>
<tbody>
<tr>
<td>&ldquo;/%     </td>
<td> 上下/左右分割面板</td>
</tr>
<tr>
<td>x       </td>
<td> 关闭当前面板</td>
</tr>
<tr>
<td>!       </td>
<td> 将当前面板置于新窗口</td>
</tr>
<tr>
<td>o       </td>
<td> 移到下一面板</td>
</tr>
<tr>
<td>q       </td>
<td> 显示面板编号，当时输入数字可跳到相应面板</td>
</tr>
<tr>
<td>C/M-方向</td>
<td> 以1/5的速度调节面板尺寸</td>
</tr>
<tr>
<td>SPACE    </td>
<td> 调整布局</td>
</tr>
<tr>
<td>{/}     </td>
<td> 向前/后调节当前面板顺序</td>
</tr>
<tr>
<td>C/M-o   </td>
<td> 逆/顺时针旋转窗口中的面板</td>
</tr>
</tbody>
</table>


<h4>复制/粘贴模式</h4>

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

<h2>配置</h2>

<p><code>~/.tmux.conf</code></p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>#将激活控制台键绑定与Emacs相同
</span><span class='line'>unbind C-b
</span><span class='line'>set -g prefix C-x</span></code></pre></td></tr></table></div></figure>


<h2>其他</h2>

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

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[解决Emacs远程连接时卡住的bug]]></title>
    <link href="http://fancyoung.com/blog/emacs-tramp-hangs-bug-in-zsh/"/>
    <updated>2012-07-04T00:14:00+08:00</updated>
    <id>http://fancyoung.com/blog/emacs-tramp-hangs-bug-in-zsh</id>
    <content type="html"><![CDATA[<p>前几天终于买了Linode的VPS，配置过程中遇见一个灵异问题：<br/>
Emacs无法远程SSH编辑文件，状态一直卡在<code>Tramp: Waiting for prompts from remote shell</code>。</p>

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>if [[ "$TERM" == "dumb" ]]
</span><span class='line'>then
</span><span class='line'>  unsetopt zle
</span><span class='line'>  unsetopt prompt_cr
</span><span class='line'>  unsetopt prompt_subst
</span><span class='line'>  unfunction precmd
</span><span class='line'>  unfunction preexec
</span><span class='line'>  PS1='$ '
</span><span class='line'>fi</span></code></pre></td></tr></table></div></figure>


<p>参考：<a href="http://emacswiki.org/emacs/TrampMode#toc6">TrampMode Troubleshooting</a></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[用Emacs远程编辑文件及相关笔记]]></title>
    <link href="http://fancyoung.com/blog/edit-remote-file-with-emacs/"/>
    <updated>2012-06-02T10:16:00+08:00</updated>
    <id>http://fancyoung.com/blog/edit-remote-file-with-emacs</id>
    <content type="html"><![CDATA[<h4>Emacs编辑远程文件</h4>

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

<p>由此可以推出一个小技巧：</p>

<h4>Emacs编辑本地需要sudo的文件</h4>

<p><code>/ssh:root@locahost:file</code></p>

<p>过程中可能会遇到的问题：</p>

<ul>
<li><p>1<br/>
问题：<code>ssh: connect to host localhost port 22: Connection refused</code><br/>
原因：没装openssh-server<br/>
解决：安装即可</p></li>
<li><p>2<br/>
问题：<code>ssh root@localhost</code>并输入密码后报<code>permission denied</code><br/>
原因：发现直接用<code>su</code>也不行（之前一直都只是sudo），因为没设root密码<br/>
解决：<code>sudo passwd root</code><br/>
注：
<code>/etc/ssh/sshd_config</code>中有个参数<code>PermitRootLogin</code>需设置为<code>yes</code>。<br/>
虽然有安全问题，不过是本机，问题不大。<br/>
修改配置后需重启服务：<code>sudo /etc/init.d/ssh restart</code></p></li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Bundle Install时的一些灵异bug]]></title>
    <link href="http://fancyoung.com/blog/solve-bundle-install-problems/"/>
    <updated>2012-05-02T13:12:00+08:00</updated>
    <id>http://fancyoung.com/blog/solve-bundle-install-problems</id>
    <content type="html"><![CDATA[<p>升级博客后，在另一台电脑上无法启动了。</p>

<h2>在新电脑上Octopress写博客时没法<code>$ bundle install</code></h2>

<h4>现象：</h4>

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

<h4>原因：</h4>

<p>不详，可能是rvm里的bundle没升级</p>

<h4>解决</h4>

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ rvm gem update</span></code></pre></td></tr></table></div></figure>


<p>不过我2次都引发了下面几个问题</p>

<!--more-->


<h2><code>$ bundle install RedCloth</code>时报错</h2>

<h4>现象:</h4>

<p>无法make，出错提示为：</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>Building native extensions.  This could take a while...
</span><span class='line'>ERROR:  Error installing RedCloth:
</span><span class='line'>        ERROR: Failed to build gem native extension.
</span><span class='line'>...
</span><span class='line'>make: /bin/install: Command not found
</span><span class='line'>...</span></code></pre></td></tr></table></div></figure>


<h4>原因：</h4>

<p>查看发现<code>/bin/install</code>文件不存在</p>

<h4>解决：</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ ln -s /usr/bin/install /bin/install</span></code></pre></td></tr></table></div></figure>


<p>参考：<a href="http://jgarber.lighthouseapp.com/projects/13054/tickets/245">网上有人给出了解决方案</a></p>

<h2><code>$ bundle install</code>时直接安装到了当前目录</h2>

<h4>现象：</h4>

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

<h4>原因：</h4>

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

<h4>解决：</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class=''><span class='line'># 直接删除配置，一般用不到
</span><span class='line'>$ rm -rf .bundle
</span><span class='line'># 这个目录也删掉，当然目录名不一定是fast-stemmer，可能需要修改
</span><span class='line'>$ rm -rf fast-stemmer
</span><span class='line'># 重新安装，完成
</span><span class='line'>$ bundle install</span></code></pre></td></tr></table></div></figure>


<h2>最后祭出大招：重装</h2>

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class=''><span class='line'># xxx为某个gem名
</span><span class='line'>$ gem list xxx
</span><span class='line'>$ gem uninstall xxx
</span><span class='line'>$ gem install xxx</span></code></pre></td></tr></table></div></figure>


<p>也可以试试直接重装，这个很好使</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ rvm uninstall ruby-1.9.2-p290
</span><span class='line'>$ rvm install ruby-1.9.2-p290</span></code></pre></td></tr></table></div></figure>


<p>重装后记得重新bundle install啊</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Githug通关全攻略]]></title>
    <link href="http://fancyoung.com/blog/githug-cheat-sheet/"/>
    <updated>2012-05-02T12:49:00+08:00</updated>
    <id>http://fancyoung.com/blog/githug-cheat-sheet</id>
    <content type="html"><![CDATA[<p><a href="https://github.com/Gazler/githug">Githug</a>将git的入门与游戏相结合，太有意思了。<br/>
游戏过程中少不了网上查找资料，man，难度4以后不停的hint。<br/>
通关后对git的了解又加深了许多。<br/>
取连接名时很是矛盾，写完博客后还是将链接中的walkthrough改为了cheat sheet。<br/>
希望大家不需要使用到这篇博客吧。</p>

<p>因关卡随时处于更新状态，可能会稍有不同<br/>
<del>- 最后更新时间2012-11-14</del><br/>
<del>- 最后更新时间2013-05-17</del> <br/>
- 最后更新时间2016-02-25</p>

<h2>准备</h2>

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

<h2>开始</h2>

<h4>0</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>y</span></code></pre></td></tr></table></div></figure>


<h4>1 初始化git项目</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ cd git_hug
</span><span class='line'>$ git init</span></code></pre></td></tr></table></div></figure>


<h4>2 配置git用户信息</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git config user.name xxx
</span><span class='line'>$ git config user.email xxx@gmail.com</span></code></pre></td></tr></table></div></figure>


<p>或者直接在<code>.git/config</code>文件里添加</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>[user]
</span><span class='line'>        name = xxx
</span><span class='line'>        email = xxx@gmail.com</span></code></pre></td></tr></table></div></figure>


<p>回答时分别输入<code>xxx</code>和<code>xxx@gmail.com</code><br/>
- 扩展<br/>
使用<code>--global</code>参数修改本机全局设置</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git config --global user.name = xxx</span></code></pre></td></tr></table></div></figure>


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


<h4>3 stage一个文件</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git add README</span></code></pre></td></tr></table></div></figure>


<h4>4 提交已stage的文件</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git commit -m '-'</span></code></pre></td></tr></table></div></figure>




<!--more-->


<h4>5 检出一个已有项目</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git clone https://github.com/Gazler/cloneme</span></code></pre></td></tr></table></div></figure>


<h4>6 检出项目并重命名</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git clone https://github.com/Gazler/cloneme my_cloned_repo</span></code></pre></td></tr></table></div></figure>


<h4>7 配置忽略文件规则</h4>

<p>使用<code>!</code>可从忽略文件中排除。<br/>
在<code>.gitignore</code>文件里添加</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>*.swp</span></code></pre></td></tr></table></div></figure>


<h4>8 忽略文件中排除特定名称</h4>

<p>在<code>.gitignore</code>文件里添加</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>*.a
</span><span class='line'>!lib.a</span></code></pre></td></tr></table></div></figure>


<h4>9 查看状态</h4>

<p><code>$ git status</code>查看，
得到答案为<code>database.yml</code></p>

<h4>10 查看状态，分辨状态</h4>

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

<h4>11 删除文件</h4>

<p><code>$ git status</code>查看，发现被删文件名为<code>deleteme.rb</code></p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git rm deleteme.rb</span></code></pre></td></tr></table></div></figure>


<h4>12 将文件移出git但不删除文件</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git rm --cached deleteme.rb</span></code></pre></td></tr></table></div></figure>


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

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git stash</span></code></pre></td></tr></table></div></figure>


<h4>14 重命名文件</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git mv oldfile.txt newfile.txt</span></code></pre></td></tr></table></div></figure>


<h4>15 修改目录结构</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ mkdir src
</span><span class='line'>$ git mv *.html src/</span></code></pre></td></tr></table></div></figure>


<h4>16 查看提交历史</h4>

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

<h4>17 tag</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git tag 'new_tag'</span></code></pre></td></tr></table></div></figure>


<h4>18 推送 tag</h4>

<p>因为默认<code>push</code>不会处理<code>tag</code></p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git push --tags</span></code></pre></td></tr></table></div></figure>


<h4>19 将新修改并入上一次提交</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git add forgotten_file.rb
</span><span class='line'>$ git commit --amend</span></code></pre></td></tr></table></div></figure>


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

<h4>20 修改提交时间</h4>

<p>使用<code>--date</code>参数将时间修改到指定时间</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git commit -m '-' --date 2099.01.01</span></code></pre></td></tr></table></div></figure>


<h4>21 unstage一个文件</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git reset HEAD to_commit_second.rb</span></code></pre></td></tr></table></div></figure>


<h4>22 取消上一次提交</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git reset --soft HEAD^</span></code></pre></td></tr></table></div></figure>


<h4>23 恢复文件修改</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git checkout config.rb</span></code></pre></td></tr></table></div></figure>


<h4>24 查看remote信息</h4>

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

<h4>25 查看remote链接</h4>

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

<h4>26 pull</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git pull origin master</span></code></pre></td></tr></table></div></figure>


<h4>27 关联远程库(新项目必备)</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git remote add origin https://github.com/githug/githug</span></code></pre></td></tr></table></div></figure>


<h4>28 合并：rebase(与merge做对比)</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git rebase origin/master
</span><span class='line'>$ git push</span></code></pre></td></tr></table></div></figure>


<h4>29 查看变动</h4>

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

<h4>30 跟踪具体代码行作者</h4>

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

<h4>31 新建分支</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git branch test_code</span></code></pre></td></tr></table></div></figure>


<h4>32 新建并进入分支</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git checkout -b my_branch</span></code></pre></td></tr></table></div></figure>


<h4>33 按标签检出</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git checkout v1.2</span></code></pre></td></tr></table></div></figure>


<h4>34 仅按标签检出</h4>

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git checkout tags/v1.2</span></code></pre></td></tr></table></div></figure>


<h4>35 按版本编号检出至新分支</h4>

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git branch test_branch -v 7cd3aa021</span></code></pre></td></tr></table></div></figure>


<h4>36 删除分支</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git branch -d delete_me</span></code></pre></td></tr></table></div></figure>


<h4>37 推送分支</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git push origin test_branch</span></code></pre></td></tr></table></div></figure>


<h4>38 合并分支</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git merge feature</span></code></pre></td></tr></table></div></figure>


<h4>39 拉取分支</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git fetch origin</span></code></pre></td></tr></table></div></figure>


<h4>40 rebase分支</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git checkout feature
</span><span class='line'>$ git rebase master</span></code></pre></td></tr></table></div></figure>


<h4>41 压缩空间</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git repack -d</span></code></pre></td></tr></table></div></figure>


<h4>42 仅从分支合并指定提交</h4>

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git cherry-pick ca32a6da</span></code></pre></td></tr></table></div></figure>


<h4>43 全项目搜索</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git grep TODO</span></code></pre></td></tr></table></div></figure>


<p>其实 linux 下直接 grep 也可以</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ grep -Rn TODO</span></code></pre></td></tr></table></div></figure>


<p>可以看到有4条，答案为<code>4</code>。</p>

<h4>44 修改历史提交日志</h4>

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git rebase -i HEAD~2</span></code></pre></td></tr></table></div></figure>


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

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

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git rebase -i HEAD~4</span></code></pre></td></tr></table></div></figure>


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

<h4>46 从分支合并时仅保存为一次提交</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git merge --squash long-feature-branch
</span><span class='line'>$ git commit'</span></code></pre></td></tr></table></div></figure>


<h4>47 更改历史提交顺序</h4>

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git rebase -i HEAD~2</span></code></pre></td></tr></table></div></figure>


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

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

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git bisect start
</span><span class='line'>$ git bisect good f608824888
</span><span class='line'>$ git bisect bad
</span><span class='line'>$ git bisect run make test
</span><span class='line'>//$ git reset</span></code></pre></td></tr></table></div></figure>


<p>日志里<code>…… is the first bad commit</code>
所以回答<code>18ed2ac</code></p>

<h4>49 仅stage一个文件的一部分 *</h4>

<p>查看文件可知需要stage的是第二行（&hellip;the first feature）。</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git add -p feature.rb</span></code></pre></td></tr></table></div></figure>


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

<h4>50 查看操作历史</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git reflog</span></code></pre></td></tr></table></div></figure>


<p>查看到日志第2行<code>...checkout: moving from solve_world_hunger to kill_the_batman...</code></p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git checkout solve_world_hunger</span></code></pre></td></tr></table></div></figure>


<h4>51 回滚某次提交历史</h4>

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git revert HEAD~1</span></code></pre></td></tr></table></div></figure>


<p>直接保存并退出</p>

<h4>52 通过操作日志，挽救<code>git reset --hard HEAD^</code>的误操作</h4>

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git checkout 804db65</span></code></pre></td></tr></table></div></figure>


<h4>53 合并分支并处理冲突</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git merge mybranch</span></code></pre></td></tr></table></div></figure>


<p>编辑<code>poem.txt</code>文件，处理冲突</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git add poem.txt
</span><span class='line'>$ git ci -m 'merge mybranch`</span></code></pre></td></tr></table></div></figure>


<h4>54 子模块</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>git submodule add https://github.com/jackmaney/githug-include-me</span></code></pre></td></tr></table></div></figure>


<h4>55</h4>

<p>最后一关！！！
内容是什么，就留点悬念吧:)</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Sass中通过mixin封装透明背景模块]]></title>
    <link href="http://fancyoung.com/blog/better-transparentize-mixin-for-sass/"/>
    <updated>2012-05-01T22:51:00+08:00</updated>
    <id>http://fancyoung.com/blog/better-transparentize-mixin-for-sass</id>
    <content type="html"><![CDATA[<p>之前讲到过<a href="http://fancyoung.com/blog/css-background-transparency/">CSS实现背景透明完美解决方案</a>，<br/>
在Sass里可以通过mixin将其封装起来。</p>

<h2>先回顾一下</h2>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>/* 白色背景,透明度0.6 */
</span><span class='line'>.alpha60 {
</span><span class='line'>  background: rgb(255, 255, 255);
</span><span class='line'>  background: rgba(255, 255, 255, 0.6);
</span><span class='line'>  background: transparent\9;
</span><span class='line'>  zoom: 1;
</span><span class='line'>  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff);
</span><span class='line'>  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff)";
</span><span class='line'>}</span></code></pre></td></tr></table></div></figure>


<h2>分析</h2>

<p>需要做的工作有：<br/>
- 颜色和透明值应该通过参数传入<br/>
- 需要能计算出rgba值：<code>rgb(255, 255, 255)</code><br/>
- 需要计算出IE下的值<code>#99ffffff</code><br/>
- 封装成minix模块，以便调用</p>

<h2>过程</h2>

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class=''><span class='line'># Sass
</span><span class='line'>alpha = (color.alpha * 255).round.to_s(16).rjust(2, '0')
</span><span class='line'># 等价于JS中的：
</span><span class='line'>Math.round(0.6 * 255).toString(16);</span></code></pre></td></tr></table></div></figure>


<p>最后的rjust方法，应该是空位补零。</p>

<p>非常有用的两个页面：
<a href="https://github.com/nex3/sass/blob/master/lib/sass/script/functions.rb">函数源码</a>，
<a href="http://sass-lang.com/try.html">在线调试Sass</a></p>

<h2>总结</h2>

<p>最终代码如下：</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>@mixin better_transparentize($color, $alpha)
</span><span class='line'>  $c: rgba($color, $alpha)
</span><span class='line'>  $ie_c: ie_hex_str($c)
</span><span class='line'>  background: rgba($color, 1)
</span><span class='line'>  background: $c
</span><span class='line'>  background: transparent\9
</span><span class='line'>  zoom: 1
</span><span class='line'>  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c})
</span><span class='line'>  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie_c}, endColorstr=#{$ie_c})"</span></code></pre></td></tr></table></div></figure>


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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>.box
</span><span class='line'>  @include better_transparentize(white, .8)</span></code></pre></td></tr></table></div></figure>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Bootstrap使用响应式设计(Responsive Design)时导航条上部有空白的解决方案]]></title>
    <link href="http://fancyoung.com/blog/bootstrap-bug-when-responsive-css-with-navbar-fixed-top/"/>
    <updated>2012-03-07T17:32:00+08:00</updated>
    <id>http://fancyoung.com/blog/bootstrap-bug-when-responsive-css-with-navbar-fixed-top</id>
    <content type="html"><![CDATA[<h4>原因</h4>

<p>Bug出现需要同时满足以下3个条件:<br/>
- 顶部导航条navbar使用class<code>navbar-fixed-top</code><br/>
- 参考Bootstrap官方网站, 给body添加样式<code>padding-top: 60px;</code><br/>
- 使用响应式(Responsive design), 并且处在此状态下(默认为宽度&lt;=980时触发)</p>

<h4>解决方案1</h4>

<p>给此段样式加上条件</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>@media (min-width: 981px) {
</span><span class='line'>    body {
</span><span class='line'>        padding-top: 60px;
</span><span class='line'>    }
</span><span class='line'>}</span></code></pre></td></tr></table></div></figure>


<h4>解决方案2</h4>

<p>将bootstrap-responsive.css放在body样式之后</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;link href="../css/bootstrap.css" rel="stylesheet"&gt;
</span><span class='line'>&lt;style type="text/css"&gt;
</span><span class='line'>      body {
</span><span class='line'>        padding-top: 60px;
</span><span class='line'>      }
</span><span class='line'>&lt;/style&gt;
</span><span class='line'>&lt;link href="../css/bootstrap-responsive.css" rel="stylesheet"&gt;</span></code></pre></td></tr></table></div></figure>


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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>@import compass
</span><span class='line'>$baseFontSize: 15px
</span><span class='line'>@import compass_twitter_bootstrap
</span><span class='line'>body
</span><span class='line'>  padding-top: 60px
</span><span class='line'>@import compass_twitter_bootstrap_responsive</span></code></pre></td></tr></table></div></figure>


<h4>结论</h4>

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

<h4>参考</h4>

<p><a href="https://github.com/twitter/bootstrap/issues/1570">navbar-fixed-top breaks when using responsive css</a></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[将一切放在云端]]></title>
    <link href="http://fancyoung.com/blog/deploy-a-website-without-your-own-server/"/>
    <updated>2012-02-25T00:17:00+08:00</updated>
    <id>http://fancyoung.com/blog/deploy-a-website-without-your-own-server</id>
    <content type="html"><![CDATA[<blockquote><p>Github<br/>
Heroku<br/>
MongoHQ<br/>
UpYun<br/>
name.com</p></blockquote>

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

<h2>技术</h2>

<h4>语言</h4>

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

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

<h4>前端代码模板很有意思.</h4>

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


<h4>功能模块</h4>

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

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


<h2>设计</h2>

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

<h2>域名</h2>

<p>额&hellip;<br/>
这个实在太重要了.<br/>
想了几年终于想到一个还不错的域名,
<a href="http://iaieye.com">iaieye.com</a>,
这也是最近比较有动力的原因.</p>

<h2>服务器</h2>

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

<h2>笔记</h2>

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

<ul>
<li><p>用环境变量传递<br/>
如: <code>uri: &lt;%= ENV['USERNAME'] %&gt;</code></p></li>
<li><p>环境变量在Heroku里的设置<br/>
添加: <code>$ heroku config:add USERNAME=fancyoung PASSWORD=123456 ......</code><br/>
查看: <code>heroku config</code><br/>
UpYun需要通过此方式配置</p></li>
</ul>


<h4>MongoHQ配置</h4>

<p>修改配置文件: <code>config/mongoid.yml</code></p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>...
</span><span class='line'>production:
</span><span class='line'>  uri: &lt;%= ENV['MONGOHQ_URL'] %&gt;
</span><span class='line'>...</span></code></pre></td></tr></table></div></figure>


<h4>发布到Heroku</h4>

<p><code>$ git push heroku master</code></p>

<h4>绑定自己的域名</h4>

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

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

<h2>参考</h2>

<p><a href="http://devcenter.heroku.com/articles/mongohq">Heroku绑定MongoHQ方法</a><br/>
<a href="http://devcenter.heroku.com/articles/custom-domains">用Heroku插件Custom Domain自定义域名</a><br/>
<a href="http://devcenter.heroku.com/articles/config-vars">配置Heroku上的变量</a></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[2012十大Web设计趋势]]></title>
    <link href="http://fancyoung.com/blog/web-design-trends-in-2012/"/>
    <updated>2011-12-15T15:03:00+08:00</updated>
    <id>http://fancyoung.com/blog/web-design-trends-in-2012</id>
    <content type="html"><![CDATA[<p>本不想取这么俗的标题,
可原文正好推荐了10个.<br/>
这回就不翻译原文,
记点自己的看法.</p>

<!--more-->


<h4>1. 响应式Web设计(Responsive Web Design)</h4>

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

<h4>2. 固定导航条(Fixed-Position Navigation)</h4>

<p>如果不是ie6不支持<code>position:fixed</code>,<br/>
估计每个网站都会放几个固定元素.<br/>
常见的有: 顶部导航条, 底部工具条, &ldquo;回到顶部&rdquo;.</p>

<h4>3. 圆(Circles)</h4>

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

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

<iframe style="width: 420px; height: 230px" frameborder="0" seamless="seamless" src="http://jsfiddle.net/zr4ac/embedded/result,html,css/light/"></iframe>


<h4>4. 大矢量图(Big Vector Art)</h4>

<h4>5. 多列菜单(Multi-Column Menus)</h4>

<h4>6. jQuery/CSS3/HTML5动画(Animation)</h4>

<h4>7. 缎带&amp;横幅(Ribbons &amp; Banner Graphics)</h4>

<p>一秒钟网页立体化, 元素变卡片.<br/>
可与固定位置配合使用(如:<a href="http://edgeguides.rubyonrails.org/getting_started.html">RoR教程, 见右上角的"edge"</a>).<br/>
你应该在某处已经看过了, 放几张图片例子:
<a href="http://365psd.com/day/2-23/"><img src="http://www.webpagescreenshot.info/img/184189-1216201135658am.png"></a>
<a href="http://365psd.com/day/2-183/"><img src="http://www.webpagescreenshot.info/img/491988-1216201135455am.png"></a></p>

<h4>8. 自定义字体风格(Custom Font Faces)</h4>

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

<h4>9. 信息可视化(Infographics)</h4>

<p>没技术含量, 就不写了.
<a href="http://www.cnblogs.com/lhb25/archive/2011/03/19/1988526.html">数据之美：Infographics 终极探索</a></p>

<h4>10. 专注于简约(Focus on Simplicity)</h4>

<h4>11. 视差滚动(Parallax Scrolling)</h4>

<p>这个是我自己加的，因为实在太炫了。<br/>
据说这是最经典的视差滚动：<a href="http://www.nikebetterworld.com/">Nike Better World</a><br/>
每页都有很多创意元素：<a href="http://www.beetle.com/">某汽车网站</a><br/>
从开发角度讲难度并不高，可能会有点点繁琐，<br/>
我想它没排进前十的原因大约是对设计者要求太高。<br/>
来份教程：<a href="http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/">Behind The Scenes Of Nike Better World</a></p>

<h2>参考</h2>

<p>原文：<a href="http://webdesignledger.com/tips/web-design-trends-in-2012">Web Design Trends in 2012</a></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[CSS实现背景透明完美解决方案]]></title>
    <link href="http://fancyoung.com/blog/css-background-transparency/"/>
    <updated>2011-11-29T16:44:00+08:00</updated>
    <id>http://fancyoung.com/blog/css-background-transparency</id>
    <content type="html"><![CDATA[<p>翻译自: <a href="http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/">CSS Background Transparency Without Affecting Child Elements, Through RGBa And Filters</a></p>

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

<h2>现存的问题</h2>

<p>如果我们想要一个半透明背景,有两种实现方式:<br/>
- 利用CSS和opacity属性<br/>
- 建立一个24位PNG背景图片<br/>
用opacity的问题除了
<a href="http://robertnyman.com/2008/09/16/you-want-css-opacity-to-go-with-that-well-suit-yourself/">需要通过麻烦的语法来兼容所有浏览器</a>,
还有不单该元素自身背景透明了,它的子元素也会透明.
所以里面所有的文字也是透明的,这一般不是想要的效果.
你可以做一些CSS trick,通过建立额外的元素来解决这个问题,但这种解决方案很恶心.</p>

<p>用PNG的问题是会额外增加HTTP请求,
而且图片比几行css代码要大得多-
尤其考虑到图片不能太小以避免
<a href="http://robertnyman.com/2009/05/26/serious-memory-leak-issue-with-24-bit-png-images-with-alpha-transparency-in-internet-explorer/">IE下24位PNG图透明时引起的内存泄漏</a>.</p>

<!--more-->


<h2>解决方案</h2>

<p>这里提供一种方法:
<a href="http://en.wikipedia.org/wiki/RGBA_color_space">RGBa colors</a>.
它的美妙之处在于你可以通过设置RGB值和透明值,轻松的实现颜色透明.
代码如下:</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>.alpha60 {
</span><span class='line'>  /* 用于不支持RGBa的浏览器 */
</span><span class='line'>  background: rgb(0, 0, 0);
</span><span class='line'>  /* RGBa, 透明度0.6 */
</span><span class='line'>  background: rgba(0, 0, 0, 0.6);
</span><span class='line'>}</span></code></pre></td></tr></table></div></figure>


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

<h3>继续</h3>

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>.alpha60 {
</span><span class='line'>  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
</span><span class='line'>}</span></code></pre></td></tr></table></div></figure>


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

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

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>Math.floor(0.6 * 255).toString(16);</span></code></pre></td></tr></table></div></figure>


<p>便能得出结果.</p>

<h3>整合</h3>

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>.alpha60 {
</span><span class='line'>  /* Fallback for web browsers that doesn't support RGBa */
</span><span class='line'>  background: rgb(0, 0, 0);
</span><span class='line'>  /* RGBa with 0.6 opacity */
</span><span class='line'>  background: rgba(0, 0, 0, 0.6);
</span><span class='line'>  /* For IE 5.5 - 7*/
</span><span class='line'>  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
</span><span class='line'>  /* For IE 8*/
</span><span class='line'>  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
</span><span class='line'>}</span></code></pre></td></tr></table></div></figure>


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

<h2>浏览器支持</h2>

<p>支持RGBa的有:<br/>
- firefox 3+<br/>
- Safari 2+<br/>
- Opera 10<br/>
IE过滤器支持IE5.5及以上版本.</p>

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

<h3>感谢</h3>

<p>Thanks to <a href="http://css-tricks.com/rgba-browser-support/">RGBa Browser Support</a> and
<a href="http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/">Bulletproof, cross-browser RGBA backgrounds, today</a>
for the information and inspiration.</p>

<p>Thanks to <a href="http://friendlybit.com/">Emil Stenström</a> and <a href="http://kodfabrik.se/">Pelle Wessman</a>
for coming up with countless alternatives for hex conversion, and explaining basic math to stupid me.</p>

<h2>译者总结</h2>

<p>大家使用时可直接复制下面代码:</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>/* 白色背景,透明度0.6 */
</span><span class='line'>.alpha60 {
</span><span class='line'>  background: rgb(255, 255, 255);
</span><span class='line'>  background: rgba(255, 255, 255, 0.6);
</span><span class='line'>  background: transparent\9;
</span><span class='line'>  zoom: 1;
</span><span class='line'>  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff);
</span><span class='line'>  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff)";
</span><span class='line'>}</span></code></pre></td></tr></table></div></figure>


<p>最后来个效果图,顺便试试jsfiddle的嵌入:</p>

<iframe style="width: 100%; height: 300px" frameborder="0" seamless="seamless" src="http://jsfiddle.net/nMKGs/embedded/result,html,css/light/"></iframe>


<p>(2012-05-01 更新)<br/>
因为自己用的是Sass，所以封装了一下，Sass的功能很强大：<br/>
<a href="http://fancyoung.com/blog/better-transparentize-mixin-for-sass">Sass中通过mixin封装透明背景模块</a></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[HTML模板]]></title>
    <link href="http://fancyoung.com/blog/html-template/"/>
    <updated>2011-11-21T19:48:00+08:00</updated>
    <id>http://fancyoung.com/blog/html-template</id>
    <content type="html"><![CDATA[<div><script src='https://gist.github.com/1321460.js?file=html.html'></script>
<noscript><pre><code>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
  &lt;head&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;
    &lt;title&gt;HTML template&lt;/title&gt;
    &lt;link href=&quot;http://blueprintcss.org/blueprint/screen.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
    &lt;style type=&quot;text/css&quot;&gt;
    &lt;/style&gt;
    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;container&quot;&gt;
    &lt;/div&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre></noscript></div>



]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Ruby on Rails使用时灵异的Bug]]></title>
    <link href="http://fancyoung.com/blog/rubygems-problem/"/>
    <updated>2011-11-17T20:33:00+08:00</updated>
    <id>http://fancyoung.com/blog/rubygems-problem</id>
    <content type="html"><![CDATA[<blockquote><p>送给敬爱的GFW</p></blockquote>

<h2>问题</h2>

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

<h2>解决</h2>

<ul>
<li><p>2012.12.31更新：淘宝提供了<a href="http://ruby.taobao.org/">镜像</a><br/>
添加source地址:
先<code>$ gem sources -a http://ruby.taobao.org/</code>,<br/>
用<code>$ gem sources -l</code>查看source列表,<br/>
然后用<code>$ gem sources -r 不需要的source地址</code>命令来删除之前的.</p></li>
<li><p><del>曾经解决方案，单独下载安装包</del><br/>
<del>可能需要安装的包</del><br/>
<del>multi_json</del><br/>
<del>activesupport</del></p></li>
</ul>


<h2>链接</h2>

<p><a href="http://rubygems.org/">Rubygems</a></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Blueprint教程]]></title>
    <link href="http://fancyoung.com/blog/blueprint-tutorial/"/>
    <updated>2011-11-17T13:15:00+08:00</updated>
    <id>http://fancyoung.com/blog/blueprint-tutorial</id>
    <content type="html"><![CDATA[<p>翻译自: <a href="https://github.com/joshuaclayton/blueprint-css/wiki/Quick-start-tutorial">Blueprint CSS Framework Tutorial</a></p>

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

<h2>Blueprint简介</h2>

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

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

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

<!--more-->


<h2>结构概述</h2>

<p>自下而上的看Blueprint：</p>

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

<p>第二部分是脚本。你可以它来自定义框架，可以是列数、宽度等外观，还可以是路径、命名空间等。我们有两个脚本：
1. Compressor: 用于压缩和自定义源文件。
2. Validator: 用于验证Blueprint核心文件。</p>

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

<h2>设置Blueprint</h2>

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

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


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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection" /&gt;
</span><span class='line'>&lt;link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print" /&gt; 
</span><span class='line'>&lt;!--[if lt IE 8]&gt;
</span><span class='line'>  &lt;link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection" /&gt;
</span><span class='line'>&lt;![endif]--&gt;</span></code></pre></td></tr></table></div></figure>


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

<h2>使用Blueprint里的CSS</h2>

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

<h4>排版相关class</h4>

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

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

<h4>表格样式</h4>

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

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

<p><code>div.error</code>
建议一个失败框（红色）。<br/>
<code>div.notice</code>
建议一个提示框（黄色）。<br/>
<code>div.success</code>
建议一个成功框（绿色）。</p>

<h4>建立网格</h4>

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

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

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;div class="container"&gt;
</span><span class='line'>  &lt;div class="span-24"&gt;
</span><span class='line'>    头部
</span><span class='line'>  &lt;/div&gt;
</span><span class='line'>
</span><span class='line'>  &lt;div class="span-4"&gt;
</span><span class='line'>    第一列
</span><span class='line'>  &lt;/div&gt;
</span><span class='line'>  &lt;div class="span-16"&gt;
</span><span class='line'>    中间列
</span><span class='line'>  &lt;/div&gt;
</span><span class='line'>  &lt;div class="span-4 last"&gt;
</span><span class='line'>    最后一列
</span><span class='line'>  &lt;/div&gt;
</span><span class='line'> 
</span><span class='line'>  &lt;div class="span-24"&gt;
</span><span class='line'>    尾部
</span><span class='line'>  &lt;/div&gt;
</span><span class='line'>&lt;/div&gt;</span></code></pre></td></tr></table></div></figure>


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

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

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

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

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;div class="container"&gt;
</span><span class='line'>  &lt;div class="span-5 border"&gt;
</span><span class='line'>    第一列
</span><span class='line'>  &lt;/div&gt;
</span><span class='line'>  &lt;div class="span-5 append-4"&gt;
</span><span class='line'>    第二列
</span><span class='line'>  &lt;/div&gt;
</span><span class='line'>  &lt;div class="span-5 border"&gt;
</span><span class='line'>    第三列
</span><span class='line'>  &lt;/div&gt;
</span><span class='line'>  &lt;div class="span-5 last"&gt;
</span><span class='line'>    第四列
</span><span class='line'>  &lt;/div&gt;
</span><span class='line'>&lt;/div&gt;</span></code></pre></td></tr></table></div></figure>


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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;div class="container"&gt;
</span><span class='line'>  &lt;div class="span-12"&gt;
</span><span class='line'>    &lt;div class="span-6"&gt;
</span><span class='line'>      左上
</span><span class='line'>    &lt;/div&gt;
</span><span class='line'>    &lt;div class="span-6 last"&gt;
</span><span class='line'>      右上
</span><span class='line'>    &lt;/div&gt;
</span><span class='line'>    &lt;div class="span-6"&gt;
</span><span class='line'>      左下
</span><span class='line'>    &lt;/div&gt;
</span><span class='line'>    &lt;div class="span-6 last"&gt;
</span><span class='line'>      右下
</span><span class='line'>    &lt;/div&gt;
</span><span class='line'>  &lt;/div&gt;
</span><span class='line'>  &lt;div class="span-12 last"&gt;
</span><span class='line'>    另一块
</span><span class='line'>  &lt;/div&gt;
</span><span class='line'>&lt;/div&gt;</span></code></pre></td></tr></table></div></figure>


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

<h2>脚本</h2>

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

<h4>验证器(The Validator)</h4>

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

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

<h4>压缩器(The Compressor)</h4>

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

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

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

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

<h4>自定义设置</h4>

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

<h2>参考</h2>

<p><a href="https://github.com/joshuaclayton/blueprint-css/wiki/Quick-start-tutorial">Blueprint CSS Framework Tutorial(官方原文)</a><br/>
<a href="http://blueprintcss.org/">官网</a><br/>
<a href="http://blueprintcss.org/tests/">Demo</a></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[将Arch Linux从32位升到64位]]></title>
    <link href="http://fancyoung.com/blog/migrating-between-architectures-without-reinstalling/"/>
    <updated>2011-11-07T14:37:00+08:00</updated>
    <id>http://fancyoung.com/blog/migrating-between-architectures-without-reinstalling</id>
    <content type="html"><![CDATA[<ul>
<li>翻译自Arch Wiki：<a href="https://wiki.archlinux.org/index.php/Migrating_Between_Architectures_Without_Reinstalling">Migrating Between Architectures Without Reinstalling</a></li>
<li>i686为32位，x86_64位64位</li>
<li>升级有风险，操作须谨慎。本人使用文中方法2升级时无意间重启了电脑，催悲了。</li>
</ul>


<!--more-->


<h2>准备工作</h2>

<h3>确认为64位平台</h3>

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ grep --color 'lm' /proc/cpuinfo</span></code></pre></td></tr></table></div></figure>


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

<h3>硬盘空间</h3>

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

<h3>电源支持</h3>

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

<h3>回退准备</h3>

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ pacman -S busybox</span></code></pre></td></tr></table></div></figure>


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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ pacman -S lib32-glibc</span></code></pre></td></tr></table></div></figure>


<h2>方法1：使用Arch LiveCD</h2>

<ol>
<li>下载、刻录并启动64位Arch ISO LiveCD。</li>
<li>配置LiveCD的网络，然后pacman用新的库。</li>
<li>将现在的安装挂在到<code>/mnt</code>目录。如：<code>mount /dev/sda1 /mnt</code></li>
<li>使用下面的脚本来执行：升级本地pacman数据库、取得本地安装包列表并重新安装：</li>
</ol>


<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>#!/bin/bash
</span><span class='line'>
</span><span class='line'>MOUNTED_INSTALL='/mnt'
</span><span class='line'>TEMP_FILE='/tmp/packages.list'
</span><span class='line'>
</span><span class='line'>pacman --root $MOUNTED_INSTALL -Sy
</span><span class='line'>pacman --root $MOUNTED_INSTALL -Qqet &gt; $TEMP_FILE
</span><span class='line'>
</span><span class='line'>for PKG in $(cat $TEMP_FILE) ; do
</span><span class='line'>   pacman --root $MOUNTED_INSTALL -S $PKG --noconfirm
</span><span class='line'>done
</span><span class='line'>
</span><span class='line'>exit 0</span></code></pre></td></tr></table></div></figure>


<h2>方法2：从当前系统升级</h2>

<h3>准备</h3>

<h4>Cache old packages</h4>

<blockquote><p>注意：如果你有从AUR或第三方库的包，并且在新的平台里查询不到，pacman会告知找不到相应替代。将这些包记录下来，以便在升级成功后重新安装，并用<code>$ pacman -Rsn package_name</code>来卸载。</p></blockquote>

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ pacman -Sw $(comm -23 &lt;(pacman -Qq) &lt;(pacman -Qmq))</span></code></pre></td></tr></table></div></figure>


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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ pacman -S busybox</span></code></pre></td></tr></table></div></figure>


<h4>更换pacman平台</h4>

<p>编辑配置文件<code>/etc/pacman.conf</code>并且把<code>Architecture</code>从<code>auto</code>改为新值。你可以参考下面的sed命令：
For x86_64</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ sed -i -e s/'Architecture = auto'/'Architecture = x86_64'/g /etc/pacman.conf</span></code></pre></td></tr></table></div></figure>


<p>For i686</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ sed -i -e s/'Architecture = auto'/'Architecture = i686'/g /etc/pacman.conf</span></code></pre></td></tr></table></div></figure>


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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ rm -rf /var/lib/pacman/sync/*   # remove existing repository cache
</span><span class='line'>$ pacman -Sy                      # sync new architecture repositories</span></code></pre></td></tr></table></div></figure>


<h4>下载新包</h4>

<p>给所有当前安装包下载新平台版本</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ pacman -Sw $(pacman -Qq|sed '/^lib32-/ d')  # download new package versions</span></code></pre></td></tr></table></div></figure>


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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ pacman -S busybox</span></code></pre></td></tr></table></div></figure>


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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ pacman -S lib32-glibc</span></code></pre></td></tr></table></div></figure>


<h3>安装包</h3>

<h4>安装内核（64位）</h4>

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ pacman -S linux</span></code></pre></td></tr></table></div></figure>


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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ uname -m</span></code></pre></td></tr></table></div></figure>


<h4>控制台终端</h4>

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

<h4>安装Pacman</h4>

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ pacman -S pacman glibc libfetch libarchive openssl acl attr xz-utils bzip2 zlib readline bash ncurses expat</span></code></pre></td></tr></table></div></figure>


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

<h4>安装已存在的包</h4>

<p>为新平台安装所有之前下载的替换。（此时可以休息休息，因为需要花费一段时间。）</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ pacman -S $(pacman -Qq)</span></code></pre></td></tr></table></div></figure>


<p>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.
完整这步迁移后，各方面都已经完成并且可以重启电脑。</p>

<h3>清理</h3>

<p>你现在可以移除Busybox和lib32-glibc。</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ pacman -Rcn busybox lib32-glibc</span></code></pre></td></tr></table></div></figure>


<h4>Makepkg compiler flags</h4>

<p>升级中新版的<code>/etc/makepkg.conf</code>可能会被保存至<code>/etc/makepkg.conf.pacnew</code>。如果你以后要用<a href="https://wiki.archlinux.org/index.php/Makepkg">makepkg</a>进行编译，你必须替换或修改老版本。</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ mv /etc/makepkg.conf /etc/makepkg.conf.backup && mv /etc/makepkg.conf.pacnew /etc/makepkg.conf</span></code></pre></td></tr></table></div></figure>


<p>It might also be a good idea to just get a list of &ldquo;new&rdquo; additions to /etc. You can get a list with the following command:</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ find /etc/ -type f -name \*.pac\*</span></code></pre></td></tr></table></div></figure>


<h2>问题解决</h2>

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

<h3>Busybox</h3>

<p>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:</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ busybox tar xf /var/cache/pacman/pkg/pacman-3.3.2-1-i686.pkg.tar.gz -C &lt;some folder&gt;</span></code></pre></td></tr></table></div></figure>


<h3>Lib32-glibc</h3>

<p>Example run 32 bit /bin/ls:</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ /lib/ld-linux-x86-32.so.2 /bin/ls</span></code></pre></td></tr></table></div></figure>


<h2>其它</h2>

<ul>
<li><a href="https://wiki.archlinux.org/index.php/Migrate_installation_to_new_hardware">Migrate installation to new hardware</a></li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[技术博客利器——Octopress]]></title>
    <link href="http://fancyoung.com/blog/octopress-study/"/>
    <updated>2011-11-04T12:59:00+08:00</updated>
    <id>http://fancyoung.com/blog/octopress-study</id>
    <content type="html"><![CDATA[<h2>Octopress简介</h2>

<blockquote><p><a href="https://github.com/imathis/octopress">Octopress</a> is a framework designed by Brandon Mathis for <a href="https://github.com/mojombo/jekyll">Jekyll</a>, the blog aware static site generator powering Github Pages.</p></blockquote>

<!--more-->


<h4>优点</h4>

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

<h2>常用命令</h2>

<h4>注意</h4>

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

<h4>添加文章</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ rake new_post["title"]</span></code></pre></td></tr></table></div></figure>


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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ rake generate       #发布文件到public目录
</span><span class='line'>$ rake watch          #监控source和sass目录的变动
</span><span class='line'>$ rake preview        #启动服务器并监控变动，通过http://localhost:4000预览</span></code></pre></td></tr></table></div></figure>


<h4>发布</h4>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ rake generate
</span><span class='line'>$ rake deploy
</span><span class='line'>
</span><span class='line'># 或者直接使用一条命令，看名字就知道是怎么回事了
</span><span class='line'>$ rake gen_deploy</span></code></pre></td></tr></table></div></figure>


<h4>保存源代码</h4>

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

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ git add .
</span><span class='line'>$ git commit -m 'blog'
</span><span class='line'>$ git push origin source</span></code></pre></td></tr></table></div></figure>


<h2>更多设置</h2>

<h4>添加"关于我"</h4>

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

<h4>首页只显示摘要</h4>

<ul>
<li>在文中加入<code>&lt;!--more--&gt;</code>来控制摘要截取位置</li>
<li>修改<code>_config.yml</code>里的<code>excerpt_link</code>控制链接文字</li>
</ul>


<h4>部署到Github</h4>

<p>操作步骤参考：<a href="http://octopress.org/docs/deploying/github/">Deploying to Github Pages</a><br/>
如果你有自己的域名，可参考：<a href="http://fancyoung.com/blog/host-to-github/">Github Page绑定自己域名</a></p>

<h2>Bug Fix</h2>

<h4>不能进行deploy(Github)</h4>

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

<h4>修改的样式preview时不生效</h4>

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

<h4>无法update octopress</h4>

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

<h2>参考</h2>

<p><a href="http://octopress.org/docs/">Octopress官方文档</a><br/>
<a href="http://daringfireball.net/projects/markdown/syntax">markdown语法</a></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Github Page绑定自己域名]]></title>
    <link href="http://fancyoung.com/blog/host-to-github/"/>
    <updated>2011-11-04T11:31:00+08:00</updated>
    <id>http://fancyoung.com/blog/host-to-github</id>
    <content type="html"><![CDATA[<!--more-->


<ul>
<li>在项目根目录下建立一文件，名为<code>CNAME</code>，里面写上域名，如<code>fancyoung.com</code>
或者在命令行里执行：</li>
</ul>


<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$ echo 'fancyoung.com' &gt;&gt; source/CNAME</span></code></pre></td></tr></table></div></figure>


<ul>
<li><p>去自己的域名运营商（我是name.com）处修改:<br/>
CNAME: www.fancyoung.com => fancyoung.github.com<br/>
A: fancyoung.com => 207.97.227.245</p></li>
<li><p>注意：<br/>
文中fancyoung请替换为自己的域名</p></li>
</ul>


<p><a href="http://pages.github.com/">官方教程</a></p>
]]></content>
  </entry>
  
</feed>