《最强大脑》 - 盲写 HTML 页面重构稿？

[hzlzh]

最近看了 《最强大脑》里有盲拧魔方、盲填数独、盲走骑士跳。
突发奇想，盲写页面重构稿也挺好玩的。

规则：

1. 看60秒 PSD设计稿(图标素材已经切好)
2. 开始 HTML+CSS 编码
3. 浏览器预览，进行视觉还原比对

这个其实不难，大家可以继续YY~

[sanddudu]

PS CC有图片自动生成CSS的功能
简直赞

[hzlzh]

@sanddudu 不错，不过手写的更纯净。
继续YY ps: 盲写代码阶段，不准碰PS工具哟，图片都是以文件名字符串形式提供给选手的。

[5key]

...
我只能坐等着看了。

[sanddudu]

@hzlzh 正所谓DW的代码永远没法过W3C XD

[myljs]

明觉厉啊，这得有很好的右脑影像记忆啊。

[yukirock]

给个 CSS 布局库的话，单个静态页面其实快得很吧。

[cxe2v]

那几个盲玩都被玩了几十年，有口诀的，你以为真是凭记忆力嗦，
HTML+CSS这个，有口诀吗？

[hzlzh]

脑力分为很多种嘛：记忆力，逻辑推理能力，数学运算能力，空间想象力等等。

可以绝对肯定：随人没有《最强大脑》里的题目难，但HTML+CSS 盲写，考的肯定不只是记忆力。

[Sivan]

这个对于掌握了基本重构的人来说，难度仅仅是记清楚设计图啊。

[dorentus]

我应该可以写出基本能用的（然后需要对照设计稿修正细节和调整浏览器兼容性）
但是除了 show off 之外意义何在…

[hzlzh]

@Sivan 难度不只是记忆这么简单，比如 PSD视觉稿 就放在选手面前，然后盲写HTML+CSS，期间不能使用浏览器预览，需要完全靠自己的想象力来判断代码所对应的样式是否正确。
@dorentus 很多东西 show off 不就是最大的功能么？

[ayang23]

给出一张图片，肉眼测量算出平均ＲＧＢ

[hzlzh]

@ayang23 这个游戏设计师估计喜欢玩，之前记得有个web游戏就是猜 hex 值

[jakwings]

@ayang23 http://leaverou.github.io/whathecolor

[Tink]

有个外国人记马赛克的，感觉很叼

[Sivan]

@hzlzh 我觉得对职业前端工程师来说，只要设计不是过于复杂，样式不会有太大偏差……除了还原度，还应该加上代码质量判定。同样还原等级，看谁的代码少。

[andybest]

Good idea！ 甚至可以蒙上眼，键盘和屏幕都不让看，纯盲写

[alay9999]

@andybest 噗~

[alay9999]

@andybest 别误会，只是笑的喷饭，后来想到还可以手写……

我是多么的 IT 宅，都忘记了还有纸笔

[yangff]

给我一个结构化编辑器……