Bootstrap 是 Twitter 搞的一个框架，目的是有个工具可以方便快速搞起一个项目，样式部分使用 Less 写就，也提供了一些 jQuery 插件形式的扩展。对景德镇居民来说，它比较狠的是直接不支持 IE6，许多特效、属性在 IE7、8 里头也是捉襟见肘；因此，如果你的网站放不下这部分用户，还是先不要用了，或者可以参考着整一个自己的版本。Bootstrap 的代码托管在 Github，随时可以 fork。

样式方面，它提供了如下解决方案：

• 栅格系统
• 布局
• 字体样式
• 多媒体展现
• 表格
• 导航
• 警告与提示
• 弹出浮层

栅格系统与比较著名的 960 Grid 大同小异，不过丫默认是16栏，940像素宽，此外一个特性是，因为 Less 带来的动态语言特性（变量、函数等），可以通过配置几个参数，自定义自己的栅格。因为抛弃了老旧浏览器支持，可以直接用 :last-child 将最后一栏的 margin-right 去掉，这也是它与 960 Grid 的差别之一。

布局也是老生常谈，一个固定宽度的居中，一个可变宽度的浮动布局。

字体设置里的风格比较明显，标题、em、strong、b、i 以及 address，都配了一些样式。在 blockquote 的样式里头，利用 before 属性，加上了个 ‐。然后是列表，通过 .unstyled 类，获得样式充值效果；这个方式其实我也比较喜欢，特别是网站是以内容为主的时候。代码块也比较朴素，推荐了 Google Code Prettify。

接着这个就比较贴心的了，很常用的 eye candy，内敛标签。

多媒体列表其实也比较简单，明确了三种缩略图尺寸 330×230、210×150 和 90×90。至于你的网站如何做，可能还是悉听尊便吧。表格的样式也是简约风格。

Bootstrap 对表单做了比较充分的定制，风格上比较明确，label 左浮动，圆角输入框。正确、错误的状态，表单 legend 的字号，前缀字符，输入、复选框等。文件选择的东东比较朴素，基本是老样子，也没有采用一些风骚的解决方案（那些基本需要与 JavaScript 配合搞）。表单的按钮也十分细致。

网站的全局导航栏，风格一以贯之，使用样式实现背景色渐变，固定在头部；同样，因为不需要考虑老旧浏览器，放心地 position: fixed; 就够了。

此外，还实现了提示、警告：

区块风格的消息提示：

面包屑导航：

翻页：

以上是样式的部分，是 Bootstrap 框架的主打。在代码上，基本把样式重置与定制都做掉了，上述内容，出了比较明显的组件如面包屑、翻页等，基本都是直接用标签做选择器的。不过，框架就该简单直接，对吧？有许多风格是利用较新的样式属性搞出来的，最明显的莫过于背景色渐变与圆角（gradient、border-radius、box-shadow 等）。因此，对于图省事、不介意老浏览器看起来效果差些，IE6 不需要管的开发者，Bootstrap 是个好选择，省时省力，美观大方。

在样式之外，Bootstrap 还提供了几个常用的 JavaScript 实现的效果。模态框、提示浮层、表格的排序等等，jQuery 插件的形式。夜了，按下不表。

而 RMagick 与 MiniMagick 也算是两兄弟，后者比前者优势在更稳定，不容易内存泄露（That’s what they say…）。哥俩都是 Ruby Gem，是对 ImageMagick 的命令行选项的封装。中午查文档的时候瞥了一眼 MiniMagick 的些许代码，也是用的 method_missing 来搞。例如：

img = MiniMagick::Image.read(blob)
img.resize '800x800'
# method_missing thrown, resize wrapped as an option of `convert` command.

所以，基本上对着 ImageMagick 的文档用就是了。

然后再提一个经常用到的实践，在 CarrierWave 的封装里头也很常见的，resize_to_fit 与 resize_to_limit，以及其他一些需求，例如我今天要做的，把图片宽度限制在 800 以内，高度不限。这种需求都可以通过 -resize 参数统统搞定。在文档里头我们看到，它说接收一个 geometry 格式的参数。那这个 geometry 参数长啥样嘞？

scale%	Height and width both scaled by specified percentage.
scale-x%xscale-y%	Height and width individually scaled by specified percentages. (Only one % symbol needed.)
width	Width given, height automagically selected to preserve aspect ratio.
xheight	Height given, width automagically selected to preserve aspect ratio.
widthxheight	Maximum values of height and width given, aspect ratio preserved.
widthxheight^	Minimum values of width and height given, aspect ratio preserved.
widthxheight!	Width and height emphatically given, original aspect ratio ignored.
widthxheight>	Change as per widthxheight but only if an image dimension exceeds a specified dimension.
widthxheight<	Change dimensions only if both image dimensions exceed specified dimensions.
area@	Resize image to have specified area in pixels. Aspect ratio is preserved.

这货定义的真是太精彩了，言简意赅，上面的那些需求都可以分别满足：

-resize 80x80
-resize 80x80>
-resize 80
-reszie 80x800< # 如果刷屏金箍棒出现

不过话说回来，在可读性与简洁之间，确实很难做好平衡呢。

1. 吉他接着搞起
2. 每天画点小画
3. 各种 webapp 搞起
4. 工作上还得再接再厉，NodeJS 有必要搞起
5. 理论知识得熟络，联系实际能力要加强；看一遍《SICP》
6. 和林妹纸一起，去更多更远的地方
7. 多关心家人一些

不敢写具体了，怕食言而肥。努力吧。

事件代理利用的是事件冒泡机制，在事件，例如点击触发时，是从 DOM 树最底端的阶段开始往顶端冒泡，事件对象贯穿这个生命周期。入门事件绑定的时候，绑定与处理是这样的：

var button = document.getElementById('J_button');

button.onclick = function(e) {
   e = e || window.event;
   var target = e.target || e.srcElement;

   // handles target
};

这在要绑定、处理的节点多了之后有点难办的，尤其是列表、表格这种场景，在 for 循环的时候，有个经典的 js gotcha：

// 错误代码
for (i = 0; i < anchors.length; i++) {
    anchors[i].onclick = function(e) {
        alert(i);
    };
}

不管点那个锚点，alert 出来的都是 anchors.length -1，熟悉 js 的都会告诉你，这是因为闭包的关系，因为等你点击任意锚点的时候，这个 for 循环执行已毕，当前上下文，也就是 onclick 所在的闭包，里头的 i 已经是 anchors.length -1。

而如果用事件代理的方式，则强迫你放弃闭包中的这些循环变量：

anchors_box.onclick = function(e) {
   e = e || window.event;
   var target = e.target || e.srcElement;

   if (target.tagName.toLowerCase() === 'a') {
       alert(a);
   }
};

如果需要 i，则需要在事件处理时去实时获取，或者预处理一下，将 i 放到它们的属性里头去。两者对比，采用事件代理方式的好处显得清楚明了：

1. 绑定起来更加方便
2. 减少闭包使用，从而降低可能不必要的内存占用
3. 对代理节点的 innerHTML 做修改，不需要重新绑定
4. 在事件监听节点比较多的情况下，特别是重型的 OPOA，跑得更顺畅

参考文章

2011 年，年初没有定目标；而公司的个人 KPI 设定又略显偏工作内容了，不好提。只好按月份回顾一下罢：

一月份前后，开始学 Ruby on Rails，之前用过的语言与框架是 Python 与 Django，转到了 Ruby 与 Rails，许多技术思想其实相差无几，但语法差别、接口细节之类，也有些恼人，磕磕绊绊，边干边学，还算顺利。一月份看了两部电影，《黑天鹅》与《How To Be》，艺术追求与自我价值的找寻，娜塔莉·波特曼与罗伯特·帕丁森各自过着拧巴的日子。

二月份，博客里记的仍然只有技术文，中间其实有个很生活的片段，就是农历新年。正月里去怕了温州最高的山，金鸡山（照片），上山太早，冻了俩小时才看到日出；下山的时候第一次与别人刮擦，是个悍妇，扛不牢。这一年春节，也是大学毕业之后，工作两年多，头一回能在家待超过十天。回杭之后，还提了车，开始每天烦恼停车位。二月份看了一部电影，《非诚勿扰2》，谈恋爱是美好的，婚姻还是得一步一步来，行差踏错，麻烦得很。

三月份，木有记。去了一趟安徽家朋，和新安江上游，看到了许多油菜花田，看到了一棵超大的樟树。那边有个地方叫做磡头，跟我念小学时的镇上十分相似，有种穿越回九十年代的错觉。本月看了三部电影，《Gone Baby Gone》，Affleck 兄弟出品，剧情跌宕，没有了绝对的好人坏人了；《前度》，前男友前女友什么的，都是洪水猛兽；另一部是口水片，不评价。

四月份，翻译完了 Git 参考手册，很短的，领到了模样十分美帝国主义的 MacBook Pro，各种努力适应。清明的时候还去了青山湖打酱油，随便兜了兜，仰慕了一番湖边的别墅们。还去了杭州花圃、太子湾。那个时节去这些地方显得比较入时，对吧？四月份的电影十分精彩，《里约大冒险》是个很不错的 3D 动画片；《我是 Sam》是个很可爱的老爹，以及一首很萌的歌，lucy in the sky with diamond. 《将爱情进行到底》也十分有趣，尤其是在五菱里头车震被交警拖走那段。

五月份，记的只有两件事情，喜欢的两个球队都完败，曼联挂了，湖人也挂了。不过我久不打大球，又不喜做个纯球迷，得勉励自己要么索性不看，要么得开始篮球、足球择一恶补了。其间在枫华府第的单身公寓小住了几日，走路去上班的感觉真好，晚上不睡觉，跑去拍夜景。五一的时候，还开车回了趟家，第一次跑告诉，回来的时候一个人，开得有点累，但感觉也不坏。和老鸭、九九去了西溪湿地，还去了老余杭那边的薰衣草园（其实不是薰衣草，学名叫啥忘记了）。车子首保。五月的电影精彩纷呈，《国王的演讲》、《玫瑰人生》、《不一样的天空》、《危情三日》、《速度与激情5》都很值得一看。

六月份是个惊悚的月份，因为女朋友要毕业了，很庆幸现在还在一起。六月份有一部电影很值得看，《打擂台》，很有令我心折的港味。

七月份啥也没记，女朋友返家过最后一个暑假。去参加了 iConference，了解些 iOS 开发相关的东西，但到底没能立马动手开始做起来；回家赴飞腾订婚的宴席，就在我坐 D3115 回家两天之后，这班车与 D315 发生追尾，举国震惊。这月还有个很囧的事情，喝醉酒把自己手机搞挂了。

八月份，小兹兹被刮擦，对方全责，这人是我见过态度最好的车主了。爸爸妈妈和妹妹来杭州小住，陪我过暑假，待了一个星期多些，感觉家里从里到外新了一圈，真正的蓬荜生辉；女朋友也返杭了，送了我一只摇头狗狗，作七夕礼物。更多8月照片，在这里。这一月，《哈利·波特》系列完结，变形金刚出到3，还补看了《斯巴达克斯·血与沙》。

9月份，《钢的琴》是一部触动人的电影，亚马逊发布了新版的 Kindle，而我则趁着中秋小长假，和女朋友去了趟南浔和乌镇玩，照片请看这里。又回了趟家，大林伟订婚；后来还跟老鸭去了趟滨江的垃圾街，烧烤狠不错，偶尔吃一顿，感觉很好。

十月份，又回了趟家，项目发布，烟花节，去了趟之江玩，夜晚的时候遇到一只很萌的猫，后悔没有带回家。部门组织架构调整，成了一淘-UX-广告组的成员，大老板是个有趣的人。这个月，我24岁了。

十一月，同学们各种婚礼，本科室友，高中同桌、公司同事，都有结婚、订婚，送红包不迭。拍了许多照片，看到新郎官落泪，致辞的时候哽咽，被触动了。月底的时候，女友的妈妈来杭，接到家小住两日，做司机载着两位女士在杭州各处跑，第一次发现秋天的杭州（照片）这么美。

十二月，刚过去，给女朋友庆生，第一次喝好贵的茶，吃好贵的蛋糕，去许多没去过的店（三润居、21客、马灯部落、如拉小镇、BetaCafe、知味观、野鱼馆和台州小吃）。弄坏了 Kindle 屏幕，又花400块换了块新的，然后效果似乎有差。另一个项目上线，但都还忙于各种调 bug。

流水账的 2011 年，生活上一片忙乱，工作上也好不到哪儿去。然而毕竟没到求稳的阶段，还得再努努力，多快好省，搞定工作，享受生活才是。

明天找时间想想 2012 年该如何吧。

排除这俩，自然就觉得整个世界崩溃了，出了人品与长相还有别的原因么？

结果晚饭的时候顺便跟同事提起，他讲到 nginx 可能会限制请求大小，恍然大悟，于是给配置文件加上：

client_max_body_size 4M;

或者你需要的更大的尺寸。

另一个经常需要改动的是它的错误提示信息，其实可以在 locale 中很方便地定制，在 config/locales/zh.yml 里头复制进

authlogic:
    error_messages:
      login_blank: can not be blank
      login_not_found: is not valid
      login_invalid: should use only letters, numbers, spaces, and .-_@ please.
      consecutive_failed_logins_limit_exceeded: Consecutive failed logins limit exceeded, account is disabled.
      email_invalid: should look like an email address.
      password_blank: can not be blank
      password_invalid: is not valid
      not_active: Your account is not active
      not_confirmed: Your account is not confirmed
      not_approved: Your account is not approved
      no_authentication_details: You did not provide any details for authentication.
      general_credentials_error: Login/Password combination is not valid
    models:
      user_session: UserSession (or whatever name you are using)
    attributes:
      user_session: (or whatever name you are using)
        login: login
        email: email
        password: password
        remember_me: remember me

然后提供你自己的翻译就成了。记得项目的 locale 设成 zh 吧。其他语言，自然照搬即可。

stackoverflow 上果然已经有了不少关于这个问题的问答，翻看一遍，总结解决办法如下：

var frame = document.getElementById('#frame'),
    win = frame.contentWindow,
    doc = win.document,
    html = doc.documentElement,
    body = doc.body;

// 获取高度
var height = Math.max( body.scrollHeight, body.offsetHeight,
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

frame.setAttribute('height', height);

这里还有个值得注意的是，最好让上面这段，在 iframe onload 事件触发之后执行：

frame.onload = function(){};
frame.setAttribute('src', frame.getAttribute('data-src'));

这俩结合起来，就是我最终采取的方式啦。

毕业的时候选公司，并没有做足够的考量，仓促签了一家给外企做外包的公司，做大学里学过的 J2EE 的东东，有点无可无不可混碗饭吃的意思。去了之后，接触了些其他的，做财务报表，学了点 Actuate Basic，又勉强应用上了一些大学时学过的 Perl，又突然要开始学 Flex 开发。恰逢经济危机，资本主义人人自危，母公司不招新人了，于是有什么新项目要人，便把我们这些最后进去的，调来调去，写过样式，又改过 C 写的项目，也写过 Perl，做 SQL 的批处理。

如果木头看到我描述的这段经历，可能会说，讲技术名称太过枯燥乏味，真要说明问题，得说具体项目。然而我的记忆里头，竟然只剩这些苍白的名头了，对实际项目，我并未着意，并且实情如此，做得多的，只是技术运用，许多细枝末节、架构模式之类，并没有轮到我辈研究。

09年的时候，我开始学 Python 和 Django，同时接触 Google App Engine。那个时候天天看 Reddit 和 YCombinator，是个很潮很追新然而实际经验了了的土鳖程序猿。后来又开始看国内的各大公司的 UED，自然也包括我的现东家，淘宝网，的 UED 博客。那会的任务是修改 SQL，前东家有许多财务报表要跑，有许多 SQL 查询语句是专人维护的，它们有个共同点是都很长，同时长得都差不多。因为其格式还算正规，而需求往往是找出有区别的字段，或者添加 schema 等小调整，但又需要大量人力的工作，我终于劝自己用 Perl，贯彻懒人追求一劳永逸的程序猿美德。

后来此间事了，回到吴老板手下，做的是一个 Flex 项目，那时候觉得这玩意的 API 真有点浩如烟海，各种控件，傻傻分不清楚。现在看来，眼界有点小了，同时也觉得，封装得太多，牺牲了太多效率。尤其是在当时我们那个项目，需要构建、重绘的控件太多，很难保证效率。也难怪现在的 BannerMaker，使用纯 ActionScript 开发。

总体来说，在前东家，是个努力做好眼前事，有空便学习新技术的阶段，然而因为广而不专，反而觉得在前东家前途渺茫，不合自己脾胃了。其实，说到底是自己心浮，不愿专精一门罢了。

所以，在此感谢李老板、吴老板和陈老板，也感谢宙贻、小麦、克凡、标哥、Tracy、ZP、豪哥、瞎抖哥、自敏、焕焕、飞哥等等等等同事们，还有我没写出来的诸位，能与你们公事是我的幸运，我学到了许多。

觉得对前端、对 Web 更感兴趣之后，我开始找新东家，在杭州的阿里系，尤其是在城西的两家自然是我的最大选择。我先给淘宝 UED 投了份简历，有了次电话面试的机会，然而彼时我对所谓前端技术，并没有太多深究，用过 jQuery，学过语言精粹，而运用场景却是 ActionScript 的开发，不太给力。那时候电话面试官问我觉得淘宝首页怎么样，我的回答是，那个大类目好烦。牛头不对马嘴，自然悲剧。后来是支付宝，过了技术面，有个主管面我，扯点七七八八，似乎在对我当时的东家是不是外包公司上起了分歧。彼时的我对这些不太关注，而他的说法是对的，可能由此被鄙视吧。

然而后来我还是来了，不是淘宝 UED，而是 MED，现在的一淘 UX 广告组。按先后顺序，面我的是克良、亮亮、小banner，和超凡大大，还有个闻味官，她说我是个小愤青。

以上是工作，再说点生活上的事情吧。

毕业后，我突发奇想开始学吉他，学晓了一些基础知识，然而认识妹纸+来到淘宝之后，不自觉的就荒废了；我画了一些画，然而很难花精力专注在一个作品上面去，大多潦草，不够精致成熟；我住到了五常，成了郊区人士，不过我也从来木有城里过，并无所谓。

三年里头，凭着08年底跟妹纸的一句戏言，“从望月吃到上城区”，我们吃了许多地方，可能是街边的小面馆（忠儿面馆），也可能是景区的死贵死贵茶楼（大兜路的三润居），有好吃的有不好吃的，但凭着易满足的性格，大部分还是满意的。有了自己的家之后，也开始自己做菜，有烧焦的也有没烧焦的，基本按菜谱来的都画虎不成反类犬，但也能凑合吃。今天看到张公子的文章，《爸妈与我们耗费的时光，有意义吗？》，让我想到了跟妹纸在一起度过的每个周末，可能并没有所谓的成就感、或者生产力补充，然而这些时光，才是人生真正重要的所在。

所以这三年半，我觉得自己找到了适合自己的工作，也找到了一个觉得共度此生也不坏的妹纸；社会这所大学，很不赖。

2011年很忙，开头是第一次接手已有项目钻石展位，中间是学习新技术 Ruby on Rails，结尾则是各种学晓的前、后端技术运用，做了俩项目。单枪匹马做项目的感觉很独特，有些时候可以自作主张，有些时候需要屈从产品经理或者老板的想法，无论如何，看到最终页面从浏览器里打开的样子，心里都是有成就感的。心里想到的却是一句话，成功就是机会遇到准备。老板已经给了机会，而我想我做的准备还算不错。

然而这一年遇到的事情是之前所未曾预料的，2009年我做的最多的事情，是用 Python、Django 和 jQuery 制作各种玩具网站，而2010年的上半年，却是用 Flex 开发一个在线报表定制工具。或许真的如大牛们所说，技术是相通的，我学晓的，其实更多的是 DOM 结构、网站开发的各种最佳实践、ECMAScript 的精粹，和各种开发、除虫思路。Linus 大大说过的一句话我记忆犹新，这种随便乱调，不停刷新，以期解决问题的做法是极不可取的，我们更需要的，是从根本上厘清思路，找到原由，再去解决问题。按这个标准，我做的还远未足够。

貌似总结过头了，先说写近况吧。有个新项目上了，一淘UX规范平台，是个展示同事们工作成果的地方，做得仓促，连浏览器兼容都还木有做。所以如果围观的时候遇到疑难，请务必在此留言，或者私信我，可别利用漏洞做坏事。

车子开了9个月，居然已经1w多公里了，跟人刮擦有过、被人追尾有过，自己开得奔放有过、超速有过，甚至还有一次被人溜坡顶到车头，被动地爆了前车的菊花，所以总体还算精彩，不枉此1w公里。

前些天，是女友生日，花了些心思，想来点惊喜，最终还是没能完成，希望可以在农历新年之前做好，聊表心意。

啊，这文章写得虎头蛇尾了，另起一篇，小结一下毕业这三年余。