1
2
3

let y = 1;
function foo(x = y, y) {}
foo();

结果是 reference error: y is not defined. 因为这里 y 是处在 TDZ(Temporal Dead Zone)。

1
2

console.log(x); // TDZ
let x;

可是为什么呢，明明全局有定义 y 呀，为什么未定义？难道参数默认值有单独的作用域？继续试验：

1
2
3
4
5
6
7
8

let y = 1;
function foo(x = function(){console.log(y)}, y = 2) {
  x(); // 2
  y = 3;
  x(); // 3
}
foo();
console.log(y); //1

1
2
3
4
5
6

let y = 1;
function foo(x = function(){console.log(y)}) {
  let y = 3;
  x(); // 1
}
foo();

1
2
3
4
5

function foo(x = function(){console.log(y)}) {
  let y = 3;
  x(); // ReferenceError: y is not defined
}
foo();

很让人困惑，感觉是存在3个作用域，全局/参数/函数体。参数默认值的函数，可以访问参数中定义的，和参数外定义(outer/global)的变量，不能访问函数体中定义的变量。

于是去找ES标准中的定义，找到了

9.2.12 FunctionDeclarationInstantiation
If the function’s formal parameters do not include any default value initializers then the body declarations are instantiated in the same Environment Record as the parameters. If default value parameter initializers exist, a second Environment Record is created for the body declarations. Formal parameters and functions are initialized as part of FunctionDeclarationInstantiation. All other bindings are initialized during evaluation of the function body.

豁然开朗，果然就是这样。

结论:

如果参数存在默认值，则有三个环境 environment( environment in ES6 = scope in ES5). Outer environment / parameters environment / function body environment.
parameters environment 可以访问自己和外层，不能访问函数体内的变量。
函数体内可以修改 parameters env 里定义的 formal parameters 的值，不能重新定义（除非用var……）。

关于var可以看一个更晕的例子:

1
2
3
4
5
6
7
8
9

let y =1;
function foo(x = function(){console.log(y)},y=2) {
  x(); // 2
  var y = 3; // if use let, then throw error: y is already declared, which is much more clear.
  console.log(y); //3
  x(); // 2
}
foo();
console.log(y); //1

so，个人建议:

• 参数变量、函数体内变量、全局变量别用一样的名字
• 不要用 var 来定义变量，总是用 let 或 const

参考资料：

• TDZ
• ES6 Notes: Default values of parameters

Slides 在这里：

http://wileam.com/the_beauty_of_css

============ 先说正事，技术分享笔记 ============

手机淘宝CSS实践启示录 勾股

slides: http://jiongks.name/slides/css-memos/

我司勾股老师讲手淘在CSS领域的一些实践，理念，开源产品以及工作流。

• zorro开源 http://zorro.io/
• 推荐本书 flexible web design
• lib-flexible https://github.com/amfe/lib-flexible
• responsive vs. flexible
• 高度设断点 vertical responsive
• 手机淘宝前端的图片相关工作流程梳理

New CSS Checker - Mike Smith

slides: http://img2.w3ctech.com/css-checker.pdf
New css checker repo: http://github.com/w3c/css-checker

一句话总结：
请关注css-checker，我会用rust写哦。rust这个可有意思啦，是新语言，有很多很好的特性。比如函数式编程。应当尝试一下。

花絮：虽然其实现场的语速和信息量翻译并不是十分必要，但 @高博 老师翻译的很好哇，比如问到现场有多少人知道rust，会场有一些人举手。Mike: You guys rock! 高博译：给你们点赞~

企业CSS应用 - 展新

slides: http://www.zhanxin.info/ppt/cssconf/

大概介绍了下支付宝的UI层面的产品，譬如之前的AliceUI以及最新的Ant Design，当然ant design只是一张ppt带过，在演讲前我还以为会重点讲一下，期间还说到css的attribute选择器的使用，这一点倒是蛮少人会使用。

CSS 预处理器老调新谈 - @郑海波

slides: http://leeluolee.github.io/css-conf/

觉得海波老师讲的很清楚，关于预处理器解决的核心问题，以及遇到的问题，以及预处理器和所谓的postcss的关系。当然信息量很大需要慢慢消化。

高性能 CSS 动画 - 黄薇

slides: http://melonh.com/sharing/slides.html?file=high_performance_animation#/
video: http://v.youku.com/v_show/id_XNzQ4MDE3ODQw.html?from=y1.7-2

这个错过了，主要在外面和人聊天，只听了一会儿，感觉确实讲的很清晰，大家的反馈也是好评如潮。回头补ppt。

重拾 CSS 的乐趣 - @CSS魔法

这个现场很赞啊，设计师出身的CSS魔法，ppt本身风格很赞，现场演讲技巧也很好。讲了一些所谓「奇技淫巧」，然而也是最初接触CSS最让人着迷的一些小快乐。比如用CSS画图标，画圆角，实现一些奇奇怪怪的小东西。

移动下的CSS布局 - 施丰丰

这个也错过了，回头补ppt。

中文排版需求 - 刘庆

slides: http://img2.w3ctech.com/中文排版需求-cssconf.pdf

这个是惊喜，之前就在 @林小志 推荐下买了西文字体1，很吸引我，觉得字体特别有趣，开启了一个新世界的感觉。这次的分享也是感受到了很多字体的奥妙和玄机。很有意思。而且我是会后才知道刘庆老师就是西文字体的译者，于是吃饭的时候也找刘老师聊了一下表达了景仰之情，刘老师告诉我西文字体2出版的消息，以及小林章本人今年可能会来中国分享，大概会在深圳或广州。

============ 以下开始水文 ============

周五晚上，8点多到的上海。忘带面包没吃晚饭已饿晕， @徐飞 蜀黍告诉我地铁口有小杨生煎，于是就先去解决晚饭，正好第二天的讲师郑海波也在那里，于是三个人面基+聊天。我们仨住的不远，小杨生煎吃完晚饭，他俩送我回去。

之前就跟@林小志 约好了夜宵（小志哥说请吃小龙虾喵喵~），于是我们仨就去和他们会和。也许是台风影响，当天晚上上海很凉爽，看了下地图目的地不算太远，加上刚吃完饭，就决定散步消食走过去。到了地方，见了一众人，其中有见过好几次的大漠老师，还有第一次见的”网友”小志、情封和（美美的）轨迹妹子，以及初次见面的林毅老师。说是吃小龙虾，其实大家都是晚餐后过来的第二轮，还是聊天为主，聊天扯淡很开心，一不小心就聊到12点多，然后大家各自回家。

周六早上，和郑海波一起打车去会场（为什么没有徐蜀黍？因为他起的太早先走了……），路过携程新楼凌空soho，很气派嘛。遇到好多熟人，比如坐我旁边的@yuanyuanVivian ，比如米粽，还比如我司的几个同学，比如手淘的chard，巧的是还有我团队的小鲜肉也去了……总之好多人，中午和chard一起吃了饭，盒饭还挺不错的，而且安排得很好，没有出现想象中的排长队的情况。辛苦主办方 @裕波 。

下午听完郑海波的分享，女神 @点头猪 说她到了，于是到后面去面基，遇到 @一丝 ，一丝姐姐居然跟我情侣衫哦（就是第一届css conf发的衣服啦），给他回顾了下海波老师说的「基情难续」，然后听一丝和hax扯了一些关于postcss的东西，因为我也没实际用过postcss，只是听听了。然后还见到了小志、大漠、温特老湿、以及我司新来的张女神@羡辙，男神@早弦等……

后来五花肉来了，然后在她介绍下第一次见到 @寸志 ，第一次见面：我没认出来寸老师，寸老师不记得微信加过我。也算是扯平……

后来看 Mike 一个人坐在那边玩手机，于是鼓起勇气去搭讪，问了一些上午分享之后的疑惑，比如我觉得 CSS Checker 应当和 gulp/grunt 之类工作流结合起来才更好，他给我推荐了两个 w3c 的工具：w3c/web-platform-tests 和 w3c/csswg-test。然后说到 Rust ，我说我觉得函数式编程很难懂， Mike 倒是很热心的推荐我尝试一下，他说开始是会有点困难，但这是一种新的编程思想，值得一试。反正就聊了蛮久，也比较顺畅，还挺开心的。

之后去和徐飞、寸志、郭达峰聊了一会儿，然后时间就不知不觉过去了，一天的会议结束，大家合影留念。这时候很意外的是 Mike 忽然过来跟我说：“我跟小倩说你她居然不认识你，我一定要介绍你们认识。”然后就介绍我俩认识。觉得很神奇啦，其实我和小倩早就微博互粉，我也曾多次旁听 w3c 中国工作组的 skype 电话会议，但和她一直没有正式见面认识彼此这样。

然后大家一起吃晚饭。晚饭的时候又认识了梁杰，就是久仰的当初翻译 swift 的那位，以及一众携程厂工。期间搭讪了刘庆老师，前文已经说过，此处略过不表。小花絮是去中间桌敬酒，Mike 说：“To PHP”，一桌码农顿时 get 了笑点（也算是笑点很奇怪吧……）

吃完饭和海波老师一起打车回酒店，又继续跟徐飞聊天，又聊到深夜，聊得也是很愉快又很感慨。作为小辈，真的蛮庆幸在这个开放的时代，可以有很多的机会和前辈大拿交流，乃至成为朋友，从他们身上看到很多值得学习的地方，让他们所以成为大拿的地方。

去之前，我跟老板说我要去 CSS CONF ，他问这是你未来的方向吗？我说我还没想好诶，感觉 CSS 领域并没有太多东西，我个人还是希望发展的更全面一些。老板说其实还蛮多东西的可以研究的。这次 CSS CONF 还是很开心的，听到了很棒的分享，见到了一些老朋友，认识了一些新朋友。我希望，自己可以更努力，成长的更快一些，做一个好的码农。

p.s. 真的是很圆满很开心的一次旅程啊，除了……会议结束当天晚上就有点不舒服，开始有轻微的咳嗽。于是晚上聊天的时候大部分时间都在听以及一直在喝热水。然而还是挺严重的，咳嗽加嗓子疼加晕晕沉沉的，到今天还没完全好。。。太开心所以人品守恒吗 ಥ_ಥ

ES6的class提供了一个简洁的语法糖来实现之前通过原型链来实现的Class的功能。

可用性

截止目前（2015-04-05)，Class目前还基本没有浏览器支持，除了Firefox39最新版已经实现了。具体的支持情况可以在这里看到：ECMAScript compatibility table

可以通过Traceur来试验Class的功能。

Class语法

ES6

1
2
3
4
5
6
7
8
9
10
11
12

class Person {
    constructor(name,age) {
        this.name = name,
        this.age = age
    }
    sayHi() {
        console.log('Hi, my name is '+ this.name);
    }
}
var ray = new Person('ray',21);
ray.sayHi(); //'Hi, my name is ray'

以前的方式

1
2
3
4
5
6
7
8
9
10
11

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.sayHi = function() {
    console.log('Hi, my name is '+ this.name);
}
var ray = new Person('ray', 21);
ray.sayHi(); //'Hi, my name is ray'

Class实现继承

继承是通过extends关键字和super实现的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

//inheritance
class Female extends Person {
    constructor(name, age) {
        super(name, age);
    }
    sayHi() {
        // call Person.sayHi()
        super.sayHi();
        // add a new log
        console.log('meow');
    }
}
var joanna = new Female('joanna', 26);
joanna.sayHi();
//'Hi, my name is joanna'
//'meow'

ES5的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var Female = function (name, age) {
    Person.call(name, age);
    this.name  = name;
    this.age = age;
};
Female.prototype = Object.create(Person.prototype);
Female.prototype.sayHi = function() {
    Person.prototype.sayHi.call(this);
    console.log('meow');
}
var joanna = new Female('joanna', 26);
joanna.sayHi();
//'Hi, my name is joanna'
//'meow'

参考资料

• ECMAScript compatibility table
• ECMAScript 6 support in Mozilla
• An introduction to ES6 classes
• Traceur - Getting Started

后记

啊我为什么会写ES6 Class呢，因为好玩呗 其实这是一篇命题作文 (逃

W3ctech已更新slides资料，见：http://www.w3ctech.com/topic/733

下面就挨个讲每个分享我记得的要点、感受及资料分享吧。

Bert Bos - The future of CSS

Slides: http://www.w3.org/Talks/2015/0110-CSS-Beijing/

Bert Bos是CSS的联合创始人，也是重量级人物。这次主要就是介绍了W3C标准的工作流程，以及CSS未来的发展方向。

题外话：现场邀请了高博老师来翻译，之前w3ctech有个投票说是否需要翻译，80%＋是需要，但是其实现场说的很简单根本不需要翻译嘛（逃

W3C的文稿状态：

WD: working draft草案
CR: Candidate Recommendation
PR: Proposed Recommendation
REC: Recommendation

这四种是从WD-CR-PR-REC的顺序，所以看到一个标准先看它目前所处的状态，一般越靠后越稳定。REC就是最终定稿了。

level NOT version

扩展：level 3包括level2全部内容。
not change, only extent.
add new feature, not change existing one.

1994-1996: 1 spec.
1998: 1 spec.
1999+: 60 modules, each have independent level.

1999年之后一个重要的变化就是把整体的一个标准拆分成60个模块，每一个模块都有自己的level，也就是不存在CSS3、CSS4，只有某个处在CSS level 3的模块，或者是CSS level 1的模块。

where does the w3c wg get ideas

• company: w3c members
• join other group.
• join the w3c email group www-style@w3.org
• conferences, personal communication i.e. w3c agenda

参与W3C的方式：1和2都需要公司层面的参与，3是所有人都可以加入邮件组，也是bert比较推荐的方式。另外中文也有一个邮件组，叫 W3C HTML5 中文興趣小組 public-html-ig-zh@w3.org，有兴趣的同学也欢迎加入。

development areas

• 语音识别
• 电子书格式标准化 Pager
• GUI layout ( include user interaction)
• Graphics

总结

• CSS虽然已经18年了但仍然在活跃的开发中，是很有活力的语言
• 未来关注ebooks & paper books领域CSS标准的发展
• 打印排版的解决方式，尤其是非西方字体的排版，Bert也是呼吁中文开发者们需要加快行动，进行中文排版的优化。

winter 重识CSS

计子winter老师用geek的方式去学习css，他觉得学习一个语言有三步：学习语法、学习表达式、如何去用。他期待看到的是一个css的语法的列表，表达式的列表，但现状是这些都是零散的散落在w3c的文档里。于是他拉取了css所有syntax和semantic的Json串……方便有一个整体的认识还有做二次开发。
（问了一下寒老师json地址，他说回头会放到github上。到时候再更新。

点头猪 移动时代CSS对用户体验的影响

Slides: keynote http://pan.baidu.com/s/1mgA6Unu
PDF: http://pan.baidu.com/s/1dDo035n
PDF带注释：http://pan.baidu.com/s/1sjO9Olf

CSS女神前携程现平安付的点头猪分享了她的一些思考，台风很赞，有内容有深度思考也有恰到好处的幽默，强烈推荐。等视频出来也不要错过。

• 关于交互的很多细节和思考。
• 设计师工程师的职责划分。
  设计师和工程师不同的角色，以及开发者个人的知识结构的影响。理想状态大概是豆瓣的克军老师提到的“产品工程师”。
• CSS动画性能：招财猫的动画。

灭灭 豆瓣阅读在 WebFont 上的探索和实践

Slides: https://speakerdeck.com/houkanshan/web-fonts-at-douban-read （需翻墙）

灭灭是豆瓣阅读的前端，关注已久但是一直没见过。据说我在帝都的时候去open party那场他也在，只是当时我不知道。这回也算是终于见面了。

这场有蛮多干货，对web字体排版有兴趣的强烈推荐去看slides。但是讲的非常非常快，有点跟不上节奏。事后沟通得知是安排时间太紧张了，只有15分钟。很多对于文字处理的细节，非常细致到近乎处女座。下面只是简单记的几个问题，重点还是去看slides，制作也很精致。

Itatic Type

中文斜体的处理：楷体。

中英文混排时对italic type的处理，期望的效果：中文楷体，正体。英文斜体。

bitmap

unicode-range: 强制对中文使用中文引号。

Kerning

OpenType中也用到了kerning，来调整字符间距。

标点挤压

制作了一套标点挤压的字体Mojikumi。

解决方案：
自己做字体，选取异常的字符做成字体，并且放在声明的最前面。

坑

line-height
不同字体的base-line位置，ascend height和descend height不同。slides里面有各个系统的这些数据汇总表。

hint

webfont替换本地字体 闪动

webfont无法加载，影响整个页面加载。如google font。
解决：检测加载，超时不加载，采用本地字体。

中文排版优化：漢字標準格式

Jaychsu Flexbox更优雅的布局

Slides: https://gitcafe.com/jaychsu/flex

功能

垂直居中的实现：

1 固定宽高的容器
parent:

1

position:relative

child:

1
2
3
4
5

position:absolute;
left:50%;
top:50%;
margin-left:-width/2;
margin-top:-height/2;

2
parent:

1

text-align: center;

child:

1
2

display:inline-block;
vertical-align:middle;

3 flexbox

1
2
3

display:flexbox;
justify-content:center; //水平居中
align-items:center; //垂直居中

兼容性

见caniuse
兼容性还并不好，安卓4.4+, IE11 目前还无法广泛使用。

flexbox原理

• flexbox宽度的计算：
  flex-grow: 没有充满的时候充满宽度
  flex-shrink: 超过宽度的时候缩小宽度
  flex-basis:没有flex-grow和flex-shrink时的宽度

default:
flex: 1 0 auto;

hax（贺师俊） myth of css frameworks

Slides: http://johnhax.net/2015/myth-of-css-frameworks/

Hax的主题是对CSS框架的迷(pi)思(pan)，关于各种CSS的组织方式(OOCSS/SMACSS/ACSS/BEM)的思(pi)考(pan)。

这个问题其实我之前有蛮多思考，CSS本身不难，但涉及到命名、规范、可维护性，就变的复杂起来。Hax看了很多很多相关文章，其中不少我也看过。Hax用了很久来说BEM，OOCSS这些方案的缺陷，和css的初衷背离，得出的结论是semantic（语义化） css是没有意义的，只有semantic html。而这些实践事实上都是在解决一个block/widget/ui components层面的问题，这个问题有很多的方案，hax更认同的是html层面的，比如html5的一些自定义标签，role=”xx”乃至未来的web components。而这个问题在实际中更加复杂，会受到项目历史的代码规范、工期等等的影响，BEM等方案并不能提高可维护性反而可能更差。

贺老的最终观点就是：
There’s no such thing as semantic CSS. There’s only semantic HTML and its visible form.

我觉得web components自然是很好的，可是目前我们还很不成熟，没办法投入生产，甚至h5的自定义标签使用也需要hack的引入一段js来兼容旧版浏览器。那么对于一个block/widget/ui components，总需要一种方式去解决，虽然bem很丑，但是它也是一种实践中比较有效的解决方案。避免了多层嵌套，实现了复用。至于过长的书写，也都有比较成熟的工具比如html中emmet+bem, css中scss/less+bem都可以大大的简化书写复杂度，实现了一个比较清晰的组件和较好的可维护性，同时并没有增加工作量。

所以我觉得在新项目中，之前没有代码规范的情况下，还是可以使用这些方式去组织css和html的，只要项目成员达成一致。我觉得可能任何方案都会有问题，重要的是总是要有一种相对统一的规范来解决问题。

（如有错误欢迎指出，求hax大神轻喷

一丝 CSS工作流

Slides: http://yisibl.github.io/share/css-workflow.html

因为之前一丝姐姐来我们部门分享过类似的内容，这里就主要是复习一下+听段子了。武大头传奇、百家讲坛什么的，简直23333……讲了CSS后处理器的一些原理，虽然我至今也没完全明白postcss和css-preprocessor比如scss/less的区别，我理解的css grace大概就是紧跟W3C标准，如果标准没有实现，那么css grace会给一个hack的实现。虽然在生产中还不打算使用，但是回头打算在demo或个人项目里尝试一下。

另外还提到了阿里妈妈那边对中文字体的处理 Type.css，也是针对中文做了一些优化。

尤雨溪 CSS与界面动效

Slides: http://feppt.qiniudn.com/浅谈CSS与web界面动效开发模式.pdf

前Google Creative Lab成员，Vue.js作者，尤小右。之前也来我厂做了vuejs的分享，这次的主题是关于界面动效的。有几点印象比较深的。

• 命令式 vs 声明式
  命令式：如jQuery
  声明式：状态和动画分离，易于维护。如Angular/Vue

• JS vs CSS 动画
  JS：逐帧渲染
  CSS: 避免触发reflow，repaint

• 动画 可能的未来：

  • http://famo.us/
  • web-animations at polymer

勾三股四（@勾股） web components

Slides: http://jiongks.name/slides/css-scoping/ (勾股：由于本人比较骚包急于秀一下新技术，所以需要支持webcomponents的浏览器才可以正常打开，比如Chrome 36+)
Video: 现场 http://www.tudou.com/programs/view/8bvwGHaL6T4/
补充：http://www.tudou.com/programs/view/dz4aXjDFnLw/
web components标准的翻译：http://w3c-html-ig-zh.github.io/webcomponents/

勾股上场的时候离整场大会结束只剩20分钟了，于是噼里啪啦飞速的过了一遍还跳过了好多，见现场视频，之后又补录了一个视频把现场略过的章节细讲了一下。讲的很清楚，对web components有兴趣的严重推荐看视频。毕竟这是web可能的未来。

web components

• 组件化
• 自定义标签
• 隐藏内部结构 shadow-dom

吴小倩 CSS动画性能

Slides: http://www.w3.org/2015/Talks/0109-CSSConf-xq/

之前都只是在邮件组里或者w3c的skype会议里听到小倩声音（很好听），这次见到真人，也是一个很美的小姑娘。她上场的时候只剩5分钟了几乎没什么时间，于是快速的过了一些CSS动画的demo，对比他们的速度和性能，主要是说做CSS动画的时候要避免repaint和reflow，这两个是比较耗性能的。

另外小倩还介绍了动画控制相关的新的API，RequestAnimationFrame & will-change。

访问：http://wileam.com/iphone-6-screen-cn/ 查看。

图较多，而且大多是svg矢量图，在博客里排版比较麻烦，于是单独做了上面这个站点。这里是翻译原文的中英文对照，欢迎批评指正。

iPhone 6 Screens Demystified

iPhone 6 屏幕揭秘

Few days ago, Apple introduced iPhone 6 Plus. The new iPhone substantially changes the way graphics are rendered on screen. We’ve made an infographic to demystify this.
几天前，Apple发布了iPhone 6 Plus. 新的iPhone大幅改变了图像在屏幕上渲染的方式。我们做了一个图表进行详细分析。

Point

点

At the beginning, coordinates of all drawings are specified in points.
最初，所有图像的坐标都是用点的方式确定的。

Points are abstract units, they only make sense in this mathematical coordinate space.
点是绝对单位，他们只在数学的坐标空间里有意义。

In the original iPhone, points corresponded perfectly to actual pixels on screen, but this is no longer true.
在最初的iPhone上，点和实际屏幕的像素是完全一致的，但现在不再是这样了。

Rendered Pixels

渲染像素

Point-based drawings are rendered into pixels. This process is known as rasterization.
以点为基础的图像渲染成为像素，这个过程就是光栅化（rasterization）。

Point coordinates are multiplied by scale factor to get pixel coordinates. Higher scale factors result in higher level of detail.
点坐标乘以一定的比例系数得到相应的像素坐标。更高的比例系数可以得到更好的细节呈现。

Typical scale factors are 1×, 2× and 3×.
典型的比例系数有1倍，2倍和3倍。

Physical Pixels

物理像素

iPhone 6 Plus has screen with lower pixel resolution than the image rendered in previous step.
iPhone 6 Plus的屏幕像素分辨率比之前步骤渲染的图像分辨率低。

Before the image can be displayed on the screen, it must be downsampled (resized) to lower pixel resolution.
在图像显示在屏幕之前，图像必须重新调整大小到更低的像素分辨率。

Physical Device

物理设备

The last step is to show the computed pixels on the physical screen.
最后一步是将计算的像素显示在物理屏幕上。

Every screen has pixels-per-inch (PPI) characteristic. This number tells you how many pixels fit into one inch and thus how large the pixels appear in the real world.
每一个屏幕都有一个每英寸像素(PPI)的特性。这个数字告诉你一英寸显示多少像素，也就是一像素在真实世界里显示的大小。

Points

点

The content is defined mathematically using point coordinates.
内容是按照数学上的点坐标来定义的。

Rendered Pixels

渲染像素

Content is rendered to pixels using scale factor. This process is called rasterization.
内容用比例系数渲染成像素，这个过程叫做光栅化（rasterization）。

Physical Pixels

物理像素

iPhone 6 Plus downsamples the rendered image before displaying it on screen.
iPhone 6 Plus 在显示在屏幕上之前缩小了已渲染的图像。

Physical Device

Rasterized drawings are displayed on the physical devices.
光栅化之后的图像显示在物理设备上。

Line rendering

一根线的渲染

To demonstrate different rendering of pixels on various devices, we compare how 1-point wide line is rendered on
为了说明多种设备的不同像素渲染情况，我们比较了一个一像素宽的线是怎样渲染的：

• Original iPhone - without retina display. Scaling factor is 1.
• iPhone 5 - with Retina display, scaling factor is 2.
• iPhone 6 Plus - with Retina display HD. Scaling factor is 3 and the image is afterwards downscaled from rendered 2208 × 1242 pixels to 1920 × 1080 pixels.

• 最初的iPhone - 没有高清屏，比例系数是1。
• iPhone 5 - 有高清屏，比例系数是2。
• iPhone 6 Plus - 超高清屏（Retina display HD）。比例系数是3，并且图像会先渲染为2208 × 1242像素然后缩小为1920 × 1080像素。

The downscaling ratio is 1920 / 2208 = 1080 / 1242 = 20 / 23. That means every 23 pixels from the original render have to be mapped to 20 physical pixels. In other words the image is scaled down to approximately 87% of its original size.
缩小的比例是1920 / 2208 = 1080 / 1242 = 20 / 23. 这意味着最初渲染的每23像素会分布到20物理像素中。换句话说图像会缩小为大约原尺寸的87%。

报错一 HexoError：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

[error] { name: 'HexoError',
reason: 'incomplete explicit mapping pair; a key node is missed',
mark:
{ name: null,
buffer: 'categories: Kategorien\nsearch: Suche\ntags: Tags\ntagcloud: Tag-C
loud\ntweets: Tweets\nprev: Vorherige Seite\nnext: Nächste Seite\ncomment: Komm
entare\narchive_a: Archiv\narchive_b: Archiv: %s\npage: Seite %d\nrecent_posts:
Neueste Artikel\n\u0000',
position: 180,
line: 9,
column: 17 },
message: 'Process failed: languages/de.yml',
domain:
{ domain: null,
_events: { error: [Function] },
_maxListeners: 10,
members: [ [Object] ] },
domainThrown: true,
stack: undefined }

原因：
YAML格式规则改变，有空格的项都需要加上双引号。

tag cloud –> "tag cloud"

解决方法：
将主题language下的有空格的项都需要加上双引号。

如果用的默认主题light，可以直接拉取最新主题，覆盖language文件夹即可。

1

$ git clone https://github.com/tommy351/hexo-theme-light themes/light

更新plugins

安装升级后必须的plugins:

1
2
3

$ (sudo) npm install hexo-renderer-ejs --save
$ (sudo) npm install hexo-renderer-marked --save
$ (sudo) npm install hexo-renderer-stylus --save

完成后的package.json类似这样：

1
2
3
4
5
6
7
8
9
10
11
12

{
  "name": "hexo",
  "version": "2.8.2",
  "private": true,
  "dependencies": {
    "hexo-generator-feed": "^0.2.0",
    "hexo-generator-sitemap": "0.0.6",
    "hexo-renderer-ejs": "^0.1.0",
    "hexo-renderer-marked": "^0.1.0",
    "hexo-renderer-stylus": "^0.1.0"
  }
}

这样之后应该就大功告成了。若有其他报错，可去hexo的github页面找一下issue或者提新的issue。作者大多都会解答。

以上。Happy blogging. :)

本文源码：https://github.com/wileam/code/blob/master/source/_posts/update-hexo.md

Html/CSS方面

• IE有几种渲染模式？

答：标准模式(Standards mode)和兼容模式(Quirks mode)。

详见：https://developer.mozilla.org/en-US/docs/Quirks_Mode_and_Standards_Mode

• 遇到过IE 6/7 下元素消失的情况吗？

所有IE低版本兼容相关问题都被我忽略了，真心没怎么处理过。硬伤。 TT

后来查了些资料，大概是IE6/7下绝对定位元素的bug。

详见：http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm

• CSS怎么实现相对定位？

答：父元素position:relative 子元素 position:absolute

• inline-block和Float的对比，优缺点，如何选择。

答：inline-block需要处理空白问题，float需要清除浮动。

参考链接：

[1] CSS display: inline-Block: Why It Rocks, And Why It Sucks

[2] About inline-blocks

[3] What is inline-block

[4] CSS Float Theory: Things You Should Know

• 清除浮动的方式，优缺点。

见：

[1] http://www.quirksmode.org/css/clearing.html

[2] http://www.positioniseverything.net/easyclearing.html

• 对响应式设计的理解。

• 用CSS实现三角形。

见：CSS Triangle

##　JS/jQuery方面：

• document.ready和window.onload有什么区别？

答得不好，查了下资料，是酱紫：document.ready 是DOM加载完毕，onload是所有页面元素加载完毕。onload比ready晚一些。

见：http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready

• 了解哪些前端的MVC，怎么理解前端MVC？

• 用jQuery如何选择一个元素的兄弟节点？

• 关于Ajax回调函数的。

• 写一个slides的效果。

综合/其他：

• 有哪些熟悉的前端html/css框架？

• 如果让你从头开始搭建一个类似Bootstrap的框架，你会怎么实现？

• Git里删除一个远程分支的命令是？

答：这个问题好坑爹，我回答是git branch -d origin branch-name，回头一查应该是git push origin :branch-name

• 平时关注哪些站点，从什么渠道获得资讯？

• 最近读过的一篇印象最深的文章

• 对代码风格的理解。

说些题外话，其实面试是一个双向选择，从面试题也可以看出一个公司的风格，侧重点。这样就可以考虑一下和你自己想要的方向是否一致，环境氛围是否契合。在一个舒服的契合的环境里工作，至少对我还是非常重要的。

本文源码：https://github.com/wileam/code/blob/master/source/_posts/front-end-interview.md

现在把相关的demo和幻灯片也放在这里：

Demo

Slide
作为一名前端，自然想到能否用html来实现，尤其是涉及代码高亮的一些问题，如果用ppt可能会比较麻烦。
于是最后选择了revealjs来做幻灯片，效果也是还不错。

分享这个主题，一是因为了解和使用之后确实觉得iconfont是一个非常好的值得推广使用的东西，尤其是在当前的扁平化的大趋势下，iconfont的单色甚至也不会成为一个很大的缺陷。二是和OP的团队也认识挺多年了，自己也作为听众参与了几次，很喜欢这样开放的理念。也很高兴自己也可以贡献话题与大家分享和交流。

就酱紫，可以先demo感受一下，然后ppt看具体原理和实现方法。幻灯片上下左右快捷键操作，也支持手机或者触屏设备访问。

有问题欢迎交流。

本文源码：https://github.com/wileam/code/blob/master/source/_posts/icon-font-intro.md

折腾的成果就是你现在看到的这个博客，所以这里本身就是一个demo。^_^

p.s. hexo作者据说是台湾的一名在校学生…… T_T 努力吧少年……

建站流程

1. 安装node.js以及git

2. 安装hexo

$ npm install -g hexo

3. 部署github pages

3.1 github建立repo

以下二选一。

• 建立一个 username.github.com 的repo，username为你的github用户名，每个用户只能有一个这样的repo，则直接发布到master分支即可。
• 建立一个项目repo，发布的branch是gh-pages.

自定义域名

如果你用自定义域名的话，github pages需要你建立一个名称为CNAME的文件，里面放入你的域名地址。如我的CNAME文件.

因为每次deploy的时候hexo都会重新生成文件，所以直接加在github是不好使的，这个文件需要放在 hexo folder/source文件夹根目录下。

3.2 hexo配置deploy信息：

修改在blog根目录下的_config.yml，添加repo地址：

deploy:
  type: github
  repository: https://github.com/[username]/[reponame].git

References:
[1] github pages help
[2] hexo Deployment Docs
[3] 想用BAE的可以看这篇：在BAE上使用hexo搭建博客

4. hexo基本操作

• 新建博客

  $ hexo init <folder>
  

在该目录下就建立了你的hexo blog.

• 新建文章

  $ hexo init <title>
  

会在source/_post新建一个名为 title.md 的文章，用喜欢的编辑器打开就可以用markdown语法写文章了。

• server

  $ hexo server
  

就可以在 localhost:4000/ 查看你的博客。

• generate & deploy

  $ hexo generate
  $ hexo deploy
  

或者（以下这俩效果是完全一样的）

$ hexo generate --deploy
$ hexo deploy --generate

折腾

插件 plugins

• rss生成 hexo-generator-feed
• sitemap hexo-generator-sitemap

添加插件的基本操作是：

$ npm install <plugin-name> --save
$ npm update

然后修改blog根目录下的_config.yml，添加：

plugins:
- plugin-name

插件部分详见：https://github.com/tommy351/hexo/wiki/Plugins

组件 widgets

• 关于 about me [1]
• 日历 calendar [2]
• 返回页面顶部 Scrolltop [2]
• 微博秀 weibo show [3]

其他调整

• 去掉addthis和Disqus
• 添加多说 [1]
• 添加百度统计 [1] 和Google Analytics
  原先一直用GA然后现在两个都用是打算对比一下。。
• 自动附上博客文章源码的github地址
• 添加social icons
• 样式微调
• 字体微调 [1]

优化调整参考了：
[1] jim-liu的优化版light theme
[2] 净土howiefh
[3] 微博开放平台

其他

源代码管理

由于我用的github pages所以发布是会发布到gh-pages分支，而我用这个博客repo的master分支管理整个博客的源代码。这样就可以轻松的实现不同电脑的同步了。
本博客的源代码：https://github.com/wileam/code/

发布显示更多

在你觉得适合的位置插入

<!-- more -->

就会将之前的部分生成摘要。点击”阅读全文“才会看到全文。

YAML

hexo文章的头部文件是用YAML来写的，比如文章要同时标记多个tags，就需要用

tags: [tag1, tag2]

或者

tags:
- tag1
- tag2

这样的语法来写，详见YAML的wikipedia.

ejs和stylus

hexo是用的ejs和stylus。同样如果习惯用LESS之类也可以装相应的plugins.

ejs是embedded javascript，从js文件中抽取出html结构，使代码结构清晰简洁易读。(其实我还不太明白所以没怎么改ejs……)
文档存备用：https://code.google.com/p/embeddedjavascript/w/list

stylus是和less/sass类似的一个css processor，比原生的css更简洁一些。
同样文档存备用：http://learnboost.github.io/stylus/

markdown

参见markdown syntax，或者我之前的博客，markdown语法

疑似bug

如果更新了css文件，那么需要把public的css文件删除，然后

$ hexo deploy --generate

这样才会重新生成新的文件。我试了好几次都是这样，不知道是不是bug……

本文源码：https://github.com/wileam/code/blob/master/source/_posts/build-a-hexo-blog-and-optimize.md

哲学 philosophy

咳咳。简单说就是“易读”，“易写”。

Markdown is intended to be as easy-to-read and easy-to-write as is feasible.

标题 HEADERS

一级标题 H1

# 这是一个一级标题 header1

这还是一个一级标题 header1
===========

二级标题 H2

## 这是一个二级标题 H2

这还是一个二级标题 H2
--------

三级-六级标题

### 三级标题 H3
……
###### 六级标题 H6

只有一种写法了。

引用 Blockquotes

> Smile, breathe and go slowly.

Smile, breathe and go slowly.

列表 LIST

无序列表 Unordered lists

- 第一点
- 第二点

• 第一点
• 第二点

有序列表 Ordered lists

3. 第一点
2. 第二点

有趣的是这里前面的数字不重要，无论写什么数字都会生成从1开始递增的有序列表。比如我上面这个例子。会生成。

1. 第一点
2. 第二点

链接

行内式

[曼珠沙华](http://blog.wileam.com/ "生活博客")

曼珠沙华

参考式

[曼珠沙华][1], [技术博客][2]
[1]: http://blog.wileam.com/ "(此处可选)生活博客"
[2]: http://code.wileam.com/ "(此处可选)技术博客"

曼珠沙华, 技术博客

注意最下面的参考链接是直接不会出现的。

代码块 CODE BLOCKS

缩进 4spaces/1Tab。

<div class="container">
    <div class="row">
        <div class="span4"></div>
        <div class="span8"></div>
    </div>
</div>

加粗/斜体 EMPHASIS

**加粗**
*斜体*

加粗
斜体

图像 IMAGES

###行内式

![Avatar](../uploads/avatar.jpg "Optional title")

参考式

![Avatar-gavatar][3]
[3]: ../uploads/avatar.jpg "(optional)avatar-1"

目前markdown还不能更改大小，如果需要设置宽高需要写html \代码。

其他

电子邮件 email

<abc@gmail.com>

abc@gmail.com

反斜杠

\*我就是想显示星号不想斜体\*

*我就是想显示星号不想斜体*

reference: markdown syntax
本文源码：https://github.com/wileam/code/blob/master/source/_posts/markdown-syntax.md