升级博客后，在另一台电脑上无法启动了。

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

现象：

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

原因：

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

解决

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

1

$ rvm gem update

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

Githug将git的入门与游戏相结合，太有意思了。
游戏过程中少不了网上查找资料，man，难度4以后不停的hint。
通关后对git的了解又加深了许多。
取连接名时很是矛盾，写完博客后还是将链接中的walkthrough改为了cheat sheet。
希望大家不需要使用到这篇博客吧。

准备

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

开始

0

1

y

1

1
2

$ cd git_hug
$ git init

2

1
2

$ touch README
$ git add README

3

1

$ git ci -m '-'

之前讲到过CSS实现背景透明完美解决方案，
在Sass里可以通过mixin将其封装起来。

先回顾一下

1
2
3
4
5
6
7
8
9

/* 白色背景,透明度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的计算功能：

1
2
3
4

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

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

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

总结

最终代码如下：

1
2
3
4
5
6
7
8
9

@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})"

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

1
2

.box
  @include better_transparentize(white, .8)

原因

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

解决方案1

给此段样式加上条件

1
2
3
4
5

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

解决方案2

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

1
2
3
4
5
6
7

<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）

1
2
3
4
5
6

@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

1
2
3
4

...
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上的变量

本不想取这么俗的标题, 可原文正好推荐了10个.
这回就不翻译原文, 记点自己的看法.

翻译自: CSS Background Transparency Without Affecting Child Elements, Through RGBa And Filters

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

现存的问题

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

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

送给敬爱的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 CSS Framework Tutorial

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

Blueprint简介

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

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

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