Chesanqi's Web World

编程语言教程书该怎么写

chesanqi — Tue, 20 Mar 2012 21:14:35 +0800

《编程语言教程书该怎么写: 向K&R学习！》
http://www.cn-cuckoo.com/2011/06/05/lax-language-tutorials-2450.html

这文章说的太对啦。
有人说 Jeremy Keith 的《JavaScript DOM 编程艺术》和《Bulletproof Ajax》写的太简单太薄，是坑钱用的。简单就不要看嘛，人家不是写给你看的；我这种非计算机科班专业的看着就很对胃口，它打开了我的兴趣。而现在学习 python，就是在 shell 敲代码，把 shell 敲穿了也不知道有什么用，验证书中例子吗？现在市面上大部分的编程语言书，都是写给已经掌握了一本语言想学其他语言者用的，简明教程就是简明语法。真正零起点的人掌握那么多语法有什么用，看着看着就困了。

知乎贴图功能和真实的用户需求

chesanqi — Wed, 22 Feb 2012 23:34:30 +0800

知乎刚刚开放了贴图功能，采用了最传统的贴图方式，直接插入在文字中。我认为这是一个挺好的关于用户需求的案例。这次用户的要求说起来很简单：一图胜千言，需要在答案中插入图片。仔细研究这两句话会发现，“一图胜千言”是需求产生的最根本原点；“需要在答案中插入图片”是用户自己提出的解决办法。用户不是专业人士（虽然在知乎里很多用户是专业人士），提出的解决办法往往只能短视的解决自己的问题，就像“要一匹更快的马”。

在知乎里，用户真实的需求是“一图胜千言”，需要用图完善答案。直接插入到答案中是一个解决办法；标注上这里有一张图片也是一个解决办法。虽然一个标注不如直接插入图片效果显著，但他确实可以解决最原生的用户需求。并且还有几个优势：
1、不会破坏文字流从而影响阅读。（并且减少屏幕滚动，更大的利用一屏空间）
2、不是每个人都需要借助图片理解答题人的意思。（甚至有些图片对某些人来说是多余的）
3、减少页面链接数，优化页面加载。（想认真看某个答案，但前一个答案不停的加载图片，页面不停的向下滚）

在答案里标注图片之前的办法是直接给出一个链接地址，一般有两类地址，也伴随着两个问题：
1、直接链接图片的 URL 地址。（需要图片已经存在于网上，需要用户从源代码里扒出图片地址）
2、上传到自己的第三方网站如 minus/flickr 微博等地址。（需要用户分心登录其他网站，这些网站会带其他私人信息）
并且这两个办法用户不能保证链接永远有效，图片和答案之间其实是单向关联的，图片孤立在外。

综合以上观点我觉得知乎贴图功能的重点不是图片，而是作为一个独立的问答网站提问人和答题人阐述自己观点的图片地址太分散并且常常失效。

webkit与web标准

chesanqi — Sun, 12 Feb 2012 23:06:50 +0800

webkit 引起一片争论，前端观察也写了篇博客《反 webkit 之战》谈论这件事情。

知乎也有讨论：
-webkit- 浏览器前缀伤害了 web 技术的进步吗？

我是这样理解的：
实际情况下，标准的达成需要一段不可预测的时间长度，即使成为标准，或许也与最初的设想有些许差异，webkit 标准与 w3c 标准不能完美的相互映射。比如 w3c 对 css 渐变并不是面面俱到的规范之，webkit 是第一个支持 css 渐变的浏览器内核（可以理解为谷歌自己有网页需求并且有自己的浏览器，有需求便实现），但 mozilla 和 webkit 对规范有不同的理解，导致后来语法实现上有差异，多数的意见是 mozilla 的写法更优雅一些，随后 webkit 对渐变语法进行了优化更新，采用了 mozilla 的标准。这种情况下浏览器按照“接收时开放，发送时保守”的原则需要保证以前使用 -webkit- 前缀的页面正确显示，“实验性的特性”、“不保证以后的兼容性”话可以这么说但事不能这么绝情做，开发人员担心私有前缀的后续兼容问题，在使用上会畏首畏脚。Chrome1 支持这个私有前缀 Chrome2 不支持，已完成的项目如果没有后期维护，用户不会升级。

对垄断的恐惧更多的源于技术的不更新，对 IE6 的阴影更多的是他对网页技术发展反应迟钝，IE6 的 bug 显而易见，技术上修复很容易，难点是微软放出了补丁也无济于事。升级IE需要重启电脑，这成本太高。同样我不喜欢 safair，不是技术领先不领先的问题而是不灵活，跟系统这样重量级的东西绑的太近。我不太担心 webkit 的“垄断”，浏览器是一款互联网入口软件，而现在世界是互联网公司的不是 PC/软件公司的。

旅行，写作，编程

chesanqi — Fri, 10 Feb 2012 17:45:04 +0800

21岁英国小伙环球旅行，途中写了《JavaScript Web Applications》和《CoffeeScript》，最后入职 Twitter 做前端开发的工作。看了这篇游记，眼泪夺眶而出……

· 花了10个月的时间做世界环游，途经非洲，东南亚，澳洲，中南美洲里的17个国家和地区。这次旅行的主题就是冲浪和摄影。
· 出席在香港，日本，美国和伦敦举行的会议。
· 启程时给O’Reilly出版公司写了一本书，书名叫做《JavaScript Web Applications》。
· 另外写了一本关于CoffeeScript的书，很快就会由O’Reilly公司出版。
· 写了大量的开源库，例如Spine, Spine.Mobile, GFX, 和 Juggernaut。
· 筹划了一个创业公司的框架。
· 出席伦敦2011FOWA会议。
· 最后，我在Twitter公司找到了一份工作。

《旅行，写作，编程》
http://www.aqee.net/traveling-writing-programming/

《JavaScript Web Applications》中文版
http://ued.taobao.com/blog/2012/02/03/jswebapps/

我理解的用户体验

chesanqi — Sat, 07 Jan 2012 20:53:21 +0800

对一些产品同学来说，用户体验这大帽子是修改一切的板砖。而他们所理解的用户体验70%又都是关于视觉优化的，还有30%是所谓的使用便捷。产品性能和安全从来不在他们理解的范围内。

所谓使用便捷。一个界面上有多个流向另一界面的入口，这是方便的设计吗？

信息是一切，其他都是载体，根本需求是获取信息。市场竞争唯信息不破，只是获取信息的手段在不断进化。

用户体验要服务于信息传达，有些产品体验没那么好，但信息传达准确到位，这就是好产品，跑不了。

选对象是要长的靓还是有内涵？长的靓是生理需求，虽然也要认同但有内涵的才能长久。做产品不是做一次性活动，而是要长久打造一种品牌。

信息的准确传达是个匹配度的问题。一个习惯追新闻的人，你推送给他一个全面的深入的几千字的纸媒信息，即使用户体验再好，你也留不住他。他需要的是一个最快的最标题党的140字微博信息。

CSS3 选择器

chesanqi — Wed, 14 Dec 2011 23:26:10 +0800

以前对 CSS3 选择器理解的不准确。比如 :first-child 伪类。如果有这么一个代码片段：

<div>
    <h1></h1>
    <h2></h2>
    <h2></h2>
</div>

给出一个组合选择器

1	div h2:first-child{}

能不能匹配到第一个 h2 呢？
答案是不能。因为 h2 不是 div 元素的第一个子元素。这个伪类选择器只适用于 h2 是第一个子元素的情况，如果 h2 不是第一个子元素，它什么都匹配不到。W3C 官网是这么介绍的：

The :first-child pseudo-class represents an element that is the first child of some other element.

并且明确的给出了两个例子：

This selector can represent the p inside the div of the following fragment:
1
2
3
4
<p> The last P before the note.</p>
<div class="note">
   <p> The first P inside the note.</p>
</div>
but cannot represent the second p in the following fragment:
1
2
3
4
5
<p> The last P before the note.</p>
<div class="note">
   <h2> Note </h2>
   <p> The first P inside the note.</p>
</div>

去 W3C 官网查看例子

那么，如果想实现匹配不是第一子元素的一组 h2 中的第一个，应该用那个选择器呢？
要用 :first-of-type 伪类。
W3C 官网给出的介绍：

The :first-of-type pseudo-class represents an element that is the first sibling of its type in the list of children of its parent element.

去 W3C 官网查看例子

因为
:first-child 和 :last-child 是 :nth-child() 的特例。
:first-of-type 和 :last-of-type 是 :nth-of-type() 的特例。
所以这几个伪类的用法是一样的。

在IE中用CSS3选择器

chesanqi — Mon, 07 Nov 2011 21:48:42 +0800

如果能在IE中实现一些高级的CSS技术，比如CSS3选择器、CSS3多背景、CSS3阴影等。或许就能更好的学习新技术，而不会总感觉那么遥远，总感觉新技术用不上。

写了一个JS。页面中只需引入这个JS，一些高级的CSS技术在IE中同样有效。实现起来很简单，比如选择器（现在只写了选择器 = =），通过JS找到一些高级选择器特有符号（如[] + ~ > *= ^=），把这些样式变成某个类的样式，把这个类名添加到相应的元素标签上。利用 jQuery 找到IE中相应的元素标签。

我找了下网上实现相同功能的办法，都需要一些配置，或者必须得在服务器环境下开发才行。我不是资深的工程师，不想那么麻烦，尽量做到跟平时写静态文件一样。也许这样看起来安全上没那么严谨。同时还有一些问题没解决，比如一些伪类没想好怎么处理。

看一下 demo 吧，共同解决。
点这里是 github 项目地址。

“Stay hungry. Stay foolish”最好的汉语翻译

chesanqi — Sun, 09 Oct 2011 23:39:31 +0800

有人知乎问：
“Stay hungry. Stay foolish” 最好的汉语翻译是什么？

我在知乎答：
不是翻译，只是说下我的理解。

有些当初看着幼稚可笑的事情，如果坚持下来，做成了一组一系列或者说成套的，这事情就变的不那么可笑，他就变成了一种风格、一种特色。有种从量变到质变的哲学意味在里面。比如说英国17岁少年手绘的《世界简史》，绝对称不上有多少画画技法在里面，单张画面不过是寥寥草草，任谁都能画着玩，但如果你能画几百张，那就是一个好故事。同样，朱德庸的漫画如果只有一张，我会觉得滑稽可爱，一个成年人的不务正业，但他有一套而且可以用单幅画面串联出有深度的故事，并且形成了自己的风格。

偶尔做一件傻事一定是犯了愚蠢，坚持做傻事有可能成为风格。现在已经没有必要讨论左小祖咒唱歌到底在不在调上，靠走音而红的还有还有华裔歌手孔庆祥。如果那些犯傻的事情，被我们凭借兴趣坚持下来……历史上每次伟大变革都是愚蠢的某些人坚持的结果。乔布斯的每个作品也都被认为是不可能完成的作品，是傻瓜天真的想法，但他每次都能做成，关键就在于“追随我心”在于“Stay foolish”吧。

永不满足，永做自己。

用不用jQuery库

chesanqi — Thu, 22 Sep 2011 15:21:06 +0800

我也一直在想这个问题：用不用JQ库？

有人说用了之后会让人变笨，写的再好不了解具体的东西其实还是不会…什么什么的。

这几天有些碎碎的想法：
1、各种库层出不穷的出来是帮助人解决问题的。
2、要深刻学习机器语言，不要用什么汇编语言、高级语言，那会让你搞不清计算机具体是怎么工作。现在还有抱这种想法的人吗？
3、能把jQuery整好的人，基础的JavaSrcipt不可能太差。这不是两种割裂的语言。（相反，精通JavaSrcipt的人，有可能对jQuery一窍不通，但要学起来会相当快，甚至不能说那是“学”，只是了解一下相应的套路即可。）
4、我们的工作是解决问题，不是研究基础语言的。需要用JavaSrcipt的项目，不介意具体用什么办法，用JavaSrcipt可以，用jQuery也可以只要能解决问题。（jQuery是开源的不会带来技术之外的其他问题）
5、由第4点说来，有些项目不用jQuery，是因为jQuery不适合这个项目只好选择其他库而不是改用原生的JavaSrcipt。
6、由第5点说来，用不用jQuery库这个问题，应该换为“只用jQuery？”。多了解其他比如YUI、Prototype、MooTools知晓他们之间的异同、功能侧重对原生JavaSrcipt的理解也更能深入一层。
7、抱着原生JavaSrcipt不放，不如找个相应的库迅速解决问题。这不就是所谓的“站在巨人肩上”吗？
8、有更多的时间关注新东西，应该远远好于纠结于已有解决办法的老问题。

基于jQuery的仿flash的幻灯片演示插件

chesanqi — Mon, 19 Sep 2011 23:05:53 +0800

把工作中的一个仿flash的幻灯片演示，打包成了jQuery插件。大概满足以下需求：
1、点击小图片切换大图片；
2、每隔一段时间自动播放下一张图片；
3、点击左右按钮，显示相应前后图片；
4、如果当前图片是最后一张，则返回到第一张重新开始；
5、小图片有滚动效果；
6、大图片有渐入效果。

这里有演示地址，请点击参观
——————分割线——————
顺便把源代码放到了github，虽然我不知道这个网站是干嘛的，但貌似很火。费了半天劲才整上去，请点击这里。