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

[hzlzh]

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

规则：

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

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

[Seita]

自动完成各种浏览器兼容就牛逼了。。

[loading]

先请大牛写个webkit能用，ie6是翔的而且全是坑的demo页，然后不查资料，做兼容！

[g0thic]

好屌的样子啊，博主

[iwege]

那再加一条吧：比哪个的写的行数最少，用纸最少（比人肉minify的功能）。

[mongodb]

我认识至少五个人能做到楼主说的那个，算上我就是六个了。。。

不过回复里做IE6兼容的简直是... ><

[unnya]

规则：

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


这样大概就可以上电视了吧

[yukirock]

@iwege HTML 对断行不敏感，只要自己能看得请，全部放到一行都没问题。

---

题主设计的这个问题，手写 HTML 什么的实在是太简单了，因为 HTML 只是 ML，根本就不涉及逻辑。没有逻辑只有样式的东西，除了代码质量以外，成品实在是没什么水准。

要速度快么，Emmet/ZenCoding + BootStrap + Sass，写完 HTML 写 CSS，V2EX 主题页这种级别的十分钟不到啊。

操作 DOM 么？不做通信岂不是也没什么难度么。

再说写代码这种事做成电视节目有什么意义……哦，给屏幕一个镜头，欣赏程序员操作 Vim/Emacs 的英姿？Emmet 展开代码的水银泻地？这都哪跟哪啊。再说主持人和嘉宾怎么解说？「嗯这里他用了个 <center>，实际上这个元素早就废弃了」，「看这里他又用了个 <hgroup>，可惜这个元素也是出来没多长时间也被废弃了」，「不好他用了 XMP，快把他踢出去」，这又哪跟哪啊。说难听的不搞前端的都不管这个吧。

---

@unnya 写一个浏览器，这个好，值得大力推广。

[hzlzh]

@yukirock 不用浏览器预览，10分钟能完成V2EX的重构吗？

注意看下顶部的追加规则：不管你是用 BootStrap 还是什么，注意一点，编写代码的时候只能在编辑器里，不可切换程序，或者打开别的程序。

我来解释一下难点：

1. 工程师首先记住 PSD 视觉高 ＝等价于＝ 选手记住魔方的色块分布；
2. 工程师敲代码(当然如果可以，请闭上眼睛) ＝等价于＝ 选手在手上盲拧魔方；
3. 完成（网页 ＝等价于＝ 魔方）

**************
我在强调一次：写 HTML+CSS 的时候，你是看不到任何布局效果的，没有浏览器，全在脑子里。
**************

番外偏：
难度可以增加：工程师坐在小黑屋，远离电脑，用嘴报出代码，由工作人员抄录，最终输出成品网页，
大家认为有难度不？

[hzlzh]

@yukirock 我补了张图上去，看看新规则下，难度如何。

[P233]

线下聚会可以搞个比赛

[yukirock]

@hzlzh 屏蔽调试环境的确有点意思，但是闭着眼睛敲代码啊口述啊什么的，这种莫名其妙的设限我觉得很奇怪……

你还不如设定「键盘没有退格键与删除键」，或者「手写代码禁止涂改」这样……

[hzlzh]

@yukirock 嗯，电视节目了的数独是可以更改之前填错的项目的，只要你还记得住。

[pfitseng]

没观赏性

[iwege]

@yukirock 我说的是人肉minify，虽然包含html，但是这个minify最关键的是CSS。

当然，还有另外一个层面的意思：比谁字最小....

[yreenchan]

颜色值也能目测？你这个想法要是能用在工具上就好了，节约很多时间