12月 052013
 

JavaScript 社区的国际性技术大会 JingJS 2013 于 11 月 9 号和 10 号两天在学校东门外的紫光国际会议中心(紫光二楼)举行,我有幸作为活动志愿者一枚近距离围观了两天的活动。这里记录下其中的点滴收获。

活动有众多演讲,特别是有许多国外讲师,组织工作会很辛苦。不过得知活动的组织核心只是几个技术大牛在负责。佩服他们的热情和能力。也耳濡目染到一些组织经验,包括日程调整、活跃气氛等。

活动第一天上午,Jason Denizac 在题为 My Year With Node.js (我与 Node.js 的一年) 的分享中,说自己是个 writer (作家),也 write code (写代码)。听起来感觉碉堡了,这个认识水平比一般人高了不少。

IMG_0007

后面 cnblog 的创始人 Issac Mao 在不用幻灯片的分享中,谈他对社区、分享等的体会。他提到 sharism 这个词,将分享精神上升为一种主义。他还提到 meme 一词,他建议翻译为“媒母”(音)。谈到多种文化时常提到这个词,维基百科上给出的翻译是“迷因”“模因”等。不确定它们是否恰切地反应了词的含义。此外他还提到他们做的对社交媒体信息的归档。

IMG_0010

中午之前有个 workshop 教学环节。无奈家用路由器根本无法满足会场二百多人同时连接的需求,最后只能选取若干幸运者代表大家参与一下。

午饭和众多大神一起在科技园里某餐馆吃的,其中包括 Domonic Tarr,npm 模块数目排行第三的大神。等餐期间,他学习了中文中的模块、土等词汇,并用在了自己第二天的演讲稿中。

头天最吸引人的演讲恐怕是 James Halliday 带来的 the wizard of moduletopia (模块之魔法)。James 不经意间展示了飞速的键盘操作,亲手绘制的漫画风格幻灯片,以及用 Vim 放映展示代码功能的“幻灯片”。James 网名 substack,目前提交 npm 模块数量上排行第二,其中 browserify 模块已经颇为知名。

IMG_0018 IMG_0019 IMG_0021

第二天的演讲,Eric Redmond 在题为 HTTP Is Hard 的演讲中讲述了 HTTP 状态码背后的含义,以及常见的误区。人们或许会习惯于检查 HTTP 回应状态吗是否是 200 以确定是否是正常回复,然而事实上 2xx 都意味着正确结果。有个网站可以帮忙查询每个状态码的含义,用法如下:

curl -I http://codes.io/206

(此外 418 也是一个有趣的状态码。)除了状态码之外,HTTP 本身就支持授权认证 (Basic authentication)。值得一提的是,Eric 还是 7 Databases in 7 Weeks 一书的作者。

百度的 Yao Tong 介绍了他们的一个针对实时性应用的开源纯 JavaScript 框架 Clouda。现场测试的待办事项列表应用在使用手机 GPRS 网络时依然表现良好,令人印象深刻。

闪电演讲环节,一个小朋友流畅地用英文介绍了自己的小项目 gifme。它是一个 Web 应用,获取访问用户摄像头权限后,可以截取一段动作,并自动生成 GIF 图片,然后可以选择保存在本地或者分享到社交网络。

之后有演讲总结了自动化 CSS 测试,介绍了语法检查、lint、截图对比等方式,推荐了 hardy 模块。演讲者 Jakob Mattson 强烈建议设计先行的做法。

来自阿里的漂亮的 Zhouxuan Yang (fool2fish) 介绍了名为 totoro 的前端测试工具。没错,这个名字来自宫崎骏的龙猫。这一工具的设计特点是简单易用足够稳定。

最后一个演讲是沈嵘带来的 Grunt.js 介绍。Grunt 是一个自动化构建工具,实现了用 JavaScript 构建 JavaScript 的美好特性,这在别的语言是似乎还是没有过的,这一特性带来了极大的便捷。Grunt 的安装需要两步,先全局安装 grunt-cli,再给每个项目安装 grunt。详细内容见幻灯片材料

晚上的 After Party 在五道口的 Pyro Pizza,那里提供了丰盛的食物饮料,还有游戏环节,不过最主要的活动还是随机的小范围的聊天。自己也应该更积极地投入到这种氛围中去。

1月 262012
 

CSS 是 web 设计中非常重要的一部分。CSS 也非常的强大,通过指定 media 类型,可以为不同的显示设备指定不同的显示样式。CSS2 可以识别的 media 类型中有屏幕显示(screen)、打印版本(print)、投影仪(projection) 等, 而且不止这些,参见这里。 可以期望 CSS3 会引入更多的 media 类型(比如 3D 眼镜?)。如果 media 类型是 all,则意味着 CSS 文件适合各种设备。这也是缺省设置,未指定特定 media 类型的样式规则会适用于所有设备。

可以在 HTML 文件中指定 CSS 文件适合的 media 类型:

<link href="style1.css" rel="stylesheet" media="all" type="text/css" />
<link href="print.css" rel="stylesheet" media="print" type="text/css" />

不过这样浏览器需要请求多个 CSS 文件,有人担心可能引起性能问题。 我们还有另外一种方式在一个 CSS 文件中为不同的 media 指定不同的样式规则。 例如下面的 CSS 代码使得页面字体无衬线且比较大,适合如今的电脑屏幕; 而打印版本使用 12pt 的带衬线字体,且指定白底黑字,适于打印。

@media screen {
    body {
        font-family: sans-serif;
        font-size: 16px;
    }
}
@media print {
    body {
        font-family: serif;
        font-size: 12pt;
        background-color: white;
        color: black;
    }
}

关于适合打印的 CSS 设计,alistapartmeyerweb 有不错的介绍。

CSS 指定 media 类型时还支持带逻辑运算的高级选择, 通过它可以更精细地为不同屏幕大小指定不同的样式,以更好地设计网页。 下面是一个来自 CSS-Tricks 的例子:

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  body {
    background: #ccc;
  }
}

其中 and 是逻辑与,逗号代表逻辑或。此外 not 也可以使用。更多的介绍参见 CSS-Tricks,事实上我还没有用到这个高级功能。

CSS 标准中有关于分页媒质特有属性和选择器 (selector) 的介绍, 然而我试图使用 :first 选择器时发现在 Firefox 9 中并不好使,原因不详。