这是一个专门讨论 idea 的地方。
每个人的时间，资源是有限的，有的时候你或许能够想到很多 idea，但是由于现实的限制，却并不是所有的 idea 都能够成为现实。
那这个时候，不妨可以把那些 idea 分享出来，启发别人。
每个人的时间，资源是有限的，有的时候你或许能够想到很多 idea，但是由于现实的限制，却并不是所有的 idea 都能够成为现实。
那这个时候，不妨可以把那些 idea 分享出来，启发别人。
这是一个创建于 3931 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近看了 《最强大脑》里有盲拧魔方、盲填数独、盲走骑士跳。
突发奇想，盲写页面重构稿也挺好玩的。
规则：
1. 看60秒 PSD设计稿(图标素材已经切好)
2. 开始 HTML+CSS 编码
3. 浏览器预览，进行视觉还原比对
这个其实不难，大家可以继续YY~
突发奇想，盲写页面重构稿也挺好玩的。
规则：
1. 看60秒 PSD设计稿(图标素材已经切好)
2. 开始 HTML+CSS 编码
3. 浏览器预览，进行视觉还原比对
这个其实不难，大家可以继续YY~
第 1 条附言 · 2014-03-24 22:58:25 +08:00
脑力分为很多种嘛：记忆力，逻辑推理能力，数学运算能力，空间想象力等等。。。
虽然没有《最强大脑》里的题目难，但 HTML+CSS 盲写，还是蛮需要 记忆力，运算能力，空间想象等的。
虽然没有《最强大脑》里的题目难，但 HTML+CSS 盲写，还是蛮需要 记忆力，运算能力，空间想象等的。
第 2 条附言 · 2014-03-24 23:36:50 +08:00
注：HTML+CSS 编码过程只能在全屏编辑器模式下，不可使用浏览器预览，检验空间想象能力。
第 3 条附言 · 2014-03-25 19:16:56 +08:00
 |
1
sanddudu 2014-03-24 22:23:29 +08:00
PS CC有图片自动生成CSS的功能
简直赞 |
 |
2
hzlzh OP @sanddudu 不错，不过手写的更纯净。
继续YY ps: 盲写代码阶段，不准碰PS工具哟，图片都是以文件名字符串形式提供给选手的。 |
 |
3
5key 2014-03-24 22:28:39 +08:00
...
我只能坐等着看了。 |
 |
5
myljs 2014-03-24 22:38:51 +08:00
明觉厉啊，这得有很好的右脑影像记忆啊。
|
 |
6
yukirock 2014-03-24 22:48:16 +08:00
给个 CSS 布局库的话，单个静态页面其实快得很吧。
|
 |
7
cxe2v 2014-03-24 22:48:57 +08:00
那几个盲玩都被玩了几十年，有口诀的，你以为真是凭记忆力嗦，
HTML+CSS这个，有口诀吗？ |
|
8
hzlzh OP 脑力分为很多种嘛：记忆力，逻辑推理能力，数学运算能力，空间想象力等等。
可以绝对肯定：随人没有《最强大脑》里的题目难，但HTML+CSS 盲写，考的肯定不只是记忆力。 |
 |
9
Sivan 2014-03-24 23:17:06 +08:00
这个对于掌握了基本重构的人来说，难度仅仅是记清楚设计图啊。
|
 |
10
dorentus 2014-03-24 23:23:02 +08:00 via iPad
我应该可以写出基本能用的（然后需要对照设计稿修正细节和调整浏览器兼容性）
但是除了 show off 之外意义何在… |
|
11
hzlzh OP |
 |
12
ayang23 2014-03-24 23:44:09 +08:00
给出一张图片，肉眼测量算出平均ＲＧＢ
|
 |
14
jakwings 2014-03-25 00:20:58 +08:00  1
|
 |
15
Tink 2014-03-25 00:46:46 +08:00 via iPhone
有个外国人记马赛克的，感觉很叼
|
|
16
Sivan 2014-03-25 02:28:02 +08:00
@hzlzh 我觉得对职业前端工程师来说，只要设计不是过于复杂，样式不会有太大偏差……除了还原度，还应该加上代码质量判定。同样还原等级，看谁的代码少。
|
 |
17
andybest 2014-03-25 05:08:44 +08:00 1
Good idea！ 甚至可以蒙上眼，键盘和屏幕都不让看，纯盲写
|
 |
20
yangff 2014-03-25 07:41:09 +08:00
给我一个结构化编辑器……
|
 |
21
Seita 2014-03-25 09:53:47 +08:00
自动完成各种浏览器兼容就牛逼了。。
|
 |
22
loading 2014-03-25 10:01:11 +08:00 via iPhone 1
先请大牛写个webkit能用，ie6是翔的而且全是坑的demo页，然后不查资料，做兼容！
|
 |
23
g0thic 2014-03-25 10:43:51 +08:00
好屌的样子啊，博主
|
 |
24
iwege 2014-03-25 12:24:48 +08:00 1
那再加一条吧：比哪个的写的行数最少，用纸最少（比人肉minify的功能）。
|
 |
25
mongodb 2014-03-25 12:56:27 +08:00 1
我认识至少五个人能做到楼主说的那个，算上我就是六个了。。。
不过回复里做IE6兼容的简直是... >< |
 |
26
unnya 2014-03-25 15:03:42 +08:00
规则：
1. 看60秒 PSD设计稿(图标素材已经切好) 2. 开始 HTML+CSS 编码 3. 写一个浏览器 4. 浏览器预览，进行视觉还原比对 这样大概就可以上电视了吧 |
|
27
yukirock 2014-03-25 16:30:19 +08:00
@iwege HTML 对断行不敏感，只要自己能看得请，全部放到一行都没问题。
--- 题主设计的这个问题，手写 HTML 什么的实在是太简单了，因为 HTML 只是 ML，根本就不涉及逻辑。没有逻辑只有样式的东西，除了代码质量以外，成品实在是没什么水准。 要速度快么，Emmet/ZenCoding + BootStrap + Sass，写完 HTML 写 CSS，V2EX 主题页这种级别的十分钟不到啊。 操作 DOM 么？不做通信岂不是也没什么难度么。 再说写代码这种事做成电视节目有什么意义……哦，给屏幕一个镜头，欣赏程序员操作 Vim/Emacs 的英姿？Emmet 展开代码的水银泻地？这都哪跟哪啊。再说主持人和嘉宾怎么解说？「嗯这里他用了个 <center>，实际上这个元素早就废弃了」，「看这里他又用了个 <hgroup>，可惜这个元素也是出来没多长时间也被废弃了」，「不好他用了 XMP，快把他踢出去」，这又哪跟哪啊。说难听的不搞前端的都不管这个吧。 --- @unnya 写一个浏览器，这个好，值得大力推广。 |
|
28
hzlzh OP @yukirock 不用浏览器预览，10分钟能完成V2EX的重构吗？
注意看下顶部的追加规则：不管你是用 BootStrap 还是什么，注意一点，编写代码的时候只能在编辑器里，不可切换程序，或者打开别的程序。 我来解释一下难点： 1. 工程师首先记住 PSD 视觉高 ＝等价于＝ 选手记住魔方的色块分布； 2. 工程师敲代码(当然如果可以，请闭上眼睛) ＝等价于＝ 选手在手上盲拧魔方； 3. 完成（网页 ＝等价于＝ 魔方） ************** 我在强调一次：写 HTML+CSS 的时候，你是看不到任何布局效果的，没有浏览器，全在脑子里。 ************** 番外偏： 难度可以增加：工程师坐在小黑屋，远离电脑，用嘴报出代码，由工作人员抄录，最终输出成品网页， 大家认为有难度不？ |
 |
30
P233 2014-03-25 19:21:10 +08:00
线下聚会可以搞个比赛
|
|
31
yukirock 2014-03-25 21:25:07 +08:00
|
 |
33
pfitseng 2014-03-26 08:05:27 +08:00 via Android
没观赏性
|
|
34
iwege 2014-03-26 13:41:46 +08:00
|
 |
35
yreenchan 2014-07-15 23:35:30 +08:00 via Android
颜色值也能目测？你这个想法要是能用在工具上就好了，节约很多时间
|
Select Language