Chen Yangjian's Blog

Carpe diem - Seize the day

CSS Sprite 的完美演示

| Comments

via

動畫 輕舞飛揚 效果很不錯，回歸原始了。

以上所有特效都與 Flash 無關，原理都是 HTML + JavaScript，即 CSS Sprite 和 JavaScript 的 setInterval()。

離我們最近的例子是 Google.cn，可惜即將關閉了。g.cn（G 點處[男女]） 的導航特效最早出現在 Google.kr 和 Google.jp。

皇帶魚

| Comments

via

皇帶魚生活在深海的中、上層，作波浪式的蛇行運動。由於數量稀小，習性幾乎未被研究過。關於皇帶魚的傳說很多，歐洲漁民稱它為「海魔王」。

歷史上有關捕獲皇帶魚（Oarfish）的記載甚少，坊間更流傳著生活在深海水域的皇帶魚除非因為地質出現大變動，例如發生地震，否則鮮有海到淺水的海域而改變棲息環境，因此被捕獲的機會極微，亦因為這樣的生活特性，才會被稱為「地震魚」，相傳皇帶魚會因地震而受驚游至淺水避難，所以牠的出現即預示了會有大地震的發生。

同志們，船票是買不起了，自己移民四川造船吧。

推荐个 JavaScript Micro-Template

| Comments

出自大牛 ejohn 之手：

// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
(function(){
  var cache = {};

  this.tmpl = function tmpl(str, data){
    // Figure out if we're getting a template, or if we need to
    // load the template - and be sure to cache the result.
    var fn = !/\W/.test(str) ?
      cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :

      // Generate a reusable function that will serve as a template
      // generator (and which will be cached).
      new Function("obj",
        "var p=[],print=function(){p.push.apply(p,arguments);};" +

        // Introduce the data as local variables using with(){}
        "with(obj){p.push('" +

        // Convert the template into pure JavaScript
        str
          .replace(/[\r\t\n]/g, " ")
          .split("<%").join("\t")
          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
          .replace(/\t=(.*?)%>/g, "',$1,'")
          .split("\t").join("');")
          .split("%>").join("p.push('")
          .split("\r").join("\\'")
      + "');}return p.join('');");

    // Provide some basic currying to the user
    return data ? fn( data ) : fn;
  };
})();

模板代码（HTML）则巧妙地藏在 HTML 文件里头去，搜索引擎不可见，普通用户也瞧不着。

<script type="text/html" id="item_tmpl">
  <div id="<%=id%>" class="<%=(i % 2 == 1 ? " even" : "")%>">
    <div class="grid_1 alpha right">
      <img class="righted" src="<%=profile_image_url%>"/>
    </div>
    <div class="grid_6 omega contents">
      <p><b><a href="/2012/<%=from_user%>"><%=from_user%></a>:</b> <%=text%></p>
    </div>
  </div>
</script>

原理是，直接解析模板，替换占位符为 JavaScript 取值代码，動態生成個函數，执行掉。詳情還得等他的書 JavaScript Ninja 吧……

真的很趁手。

杰克的鹿木·更新

| Comments

删删改改，去掉了一些东西，添加了许多内容， 还加了 RSS。下一步希望做的，应该是 sluggish URL。

yo2.cn 挂掉，我搬家之后，博客的订阅量掉到了个位数，好不凄惨。

Sergey Brin 年轻时

| Comments

Sergey Brin 和 Larry Page 创立了 Google，剩下的你也都知道了。喜欢打破砂锅的，不妨看看在他创立 Google 之前的简历。

有趣的地方有很多，比如他也参与过 Wolfram Research。比如他的隐藏关：

Objective: A large office, good pay, and very little work. Frequent expense-account trips to exotic lands would be a plus.

他的爸爸，Michael Brin，的主页也很有意思。隐藏了这么一首诗。

Sergey is a grad student at Stanford (computer science). He does data
mining
and (with his friend Larry) developed a search engine GOOGLE which
he claims is the
best. He turned 25 this August (1998). On that occasion I wrote the
following poem.

You are growing stronger
In body, spirit and mind.
I am getting older
Leaving decades behind.

You are tough, you mine data,
You surf first and think later,
And your crawler fast as light
Wanders madly in the night.

You work hard to squeeze a thesis
From the world wide web of feces.
You live abroad on the sunny coast
To you, my son I propose a toast.

In the stately oval office
Clinton grimly counts his losses,
Plumpy interns taking turns,
Many wonderful returns!

JavaScript 版 Brainfuck

| Comments

前些天在 est 的博客上看到 《仅用 []()+! 就足以实现几乎任意Javascript代码》 一文，很是震惊。

([][(![]+[])[!+[]+!+[]+!+[]]+(!![]+[][(![]+[])[+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]]+(!![]+[])[+...

让人想到 Brainfuck。

++++++++++[>+++++++>++++++++++>+++>+<<<<-]>++.>+.+++++++..+++.>++.<<+++++++++++++++.>.+++.------.--------.>+.>.

然而 Brainfuck 是个 Turing Tarpit （极简化的 Turing-complete 机器），而上面这个 JavaScript From Hell，则是一门脚本语言的 hack （类型强制转换、字符串 == 字符数组、first class function 和几个 JavaScript 漏洞的把握）。

我们从最简单的 [] 开始。

[];    // []，空数组
+[];   // 0，空数组视为 null，类型转换为 0
!+[];   // true
+!+[];   // 1

整形可以搞出来了，字符串也是如此。false + []，返回的是 "false"。比如要取到 “s”，就可以，(“false”)[3]：

(![]+[])[+!+[]+!+[]+!+[]];     // 3

完整的码表可以参考 est 的博客。还有一个，window 对象的取得。Array 对象的方法 [].sort.call() 返回的是 window 对象。也就是说，我们可以试着拼出 []["sort"]["call"]()[ "eval"]("alert('hi there')")

理解了原理之后是体力活，大牛们 已经做好了一个自动转换的工具)。

所以说这玩意看着很像 Brainfuck，其实是不一样的。最后隆重推荐 JavaScript From Hell，十足劲爆。

去年买的手绘板

| Comments

WACOM 影拓3 PTZ630

翔仔告诉的我 98 上有人卖，于是跑去收了来。今年从家里回来，便摸出来练习。Windows 7 自带的驱动不好用，不会认笔势的轻重缓急，只能当铅笔。装了随板附带的驱动之后一切安好了。上色是门技术活，加上我辨色能力差劲，就不献丑了。

习惯了之后基本上可以像平时盯着纸面那样盯着屏幕画，不需要找笔在哪里。有兴趣的筒子们，不妨也入一个。

人生如戏

| Comments

Jesse Schell 童鞋对未来游戏开发方向的想象令我当时就震惊了。

他是卡耐基·梅隆大学的讲师，曾经当过迪斯尼的 Imagineer，有个公司叫做 Schell Games 60 来个人专门做各种各样各色平台的游戏。对于 2009 年在北美风光无限的游戏们，Wii、Wii Fit、 Guitar Hero 等，他的总结是，游戏已经从原先的极想象之能事，脱离现实越远越好，改变为贴近现实。我们周遭充斥着伪装与掩饰，便越来越追求 authentic 的东西（所以人们喜欢原木）。

而对于游戏开发中琳琅满目的技术，Jesse 说，在过去技术的发展都是在分化，我们已经开始需要集大成的东西。但是不可以是大而全，他以 iPhone 与 iPad 举例。iPhone 啥事都能做，游戏、视频、音乐、手机、上网，是个瑞士军刀，大家都喜欢；iPad 是放大的 iTouch，除了不能电话跟 iPhone 没啥区别，为啥人们不喜欢？因为 iPad 太大，毕竟我们不需要一把几十斤重的瑞士军刀，即便他能宰牛都不行。

所以他憧憬的未来游戏是，它们无处不在。我们的电视机、手机、汽车已经是电脑了，以后我们的餐具、杯具、鞋子、交通工具都将配备 CPU、存储设备、无线网卡、摄像头、话筒，它们随时随刻可以感知到你的行为。我们的一天就是一次游戏。早晨刷牙的时候，刷满 3 分钟，牙刷就会给你加分。晚上看电视的时候，看广告不转台，电视机同样给你加分。分数的作用是，可以作为减税的有利条件，可以作为商家发放优惠券的依据，等等。

在萝卜面前人和驴没什么区别。

为了引出上面这句话，Jesse 还提到他的一个朋友，在某大学教游戏开发。他的看法就是，游戏俯拾皆是，我们的学校就是个游戏。所以在他的班上，考分并不是重点，而是各种各样依据出勤率、作业等评定出来的经验值。经验值攒够，基本就可以升级出去打怪了。

这让我想到《How I Met Your Mother》不久前的一集。Robin 主持一个凌晨的早间新闻节目，没想到观众如云。这班家伙都是些泡吧的年轻人，耗到后半夜，刚好看到 Robin 的节目，注意到她老是“But um…”，便以此为游戏。她一说，就饮胜。

Jesse 的看法，把科技与游戏人生结合了起来。我们参与的不再是四到十个人的三国杀，不再是四人围坐哗啦啦的麻将，而是一个巨大的网络，它注视着你的一举一动，再依据它对你的设定作赏罚。很熟悉把？Matrix 和巴普洛夫。

Sheldon 可以调教 Penny，我们这群玩着各色游戏长大的人恐怕也不能逃避那样的诱惑。只是，这样的人生，也不大有意思把？

回杭了

| Comments

8 天长假，以后过年要求休假的话，还是请在正月里比较好。

去了次温州乐园，喝了一些酒，吃了许多东西，给爷爷等祖宗们点岁灯，玩了几通三国杀。

离开网络八天，木啥特别耸动的新鲜事。有 nc 宣称要废除农历；火箭终于换走了麦迪；我们终于不恐韩了……

祝大家新年愉快，莫要被亚克西。