英語圏の巨大掲示板redditの一ページを新規にデザインしたとしたらどれぐらい手間か、というのをブラウザ上で見せてくれるページです。
画面右側にCSSとHTMLの枠が表示され、そこにコードが追加されていくにつれて、ページ上にredditのデザインが少しずつ出来上がっていきます。右上のスライダーで作業速度を速めることもできますが、それでもなかなか出来上がりません。
redditは、どちらかといえばシンプルなデザインとされるサイトですが、それでも、これだけの画面を表示するためにどれぐらいのソースコードが必要か、一度もサイトを作ったことが無い人は、もっと短くできるのではと思っているかもしれません。
このようなサイトを見せることで、ウェブ制作の裏側を知らない人にも少したいへんさを伝えられるかもしれませんね。このデモでは上から順にスラスラとコードを書いていってるので、実際のウェブ開発では手戻りや調整でさらにずっと大変なんですよ、と。
このデモで生成される掲示板のやりとり自身が指しているように、Jake Albaughさんの脈打つハートを作る様子を再現するコードを見て、それに触発されて作られたということです。
同じコードを参考に、CSSで描くダースベイダーをデモ化したページも作られています。
via TheNextWeb
「ウェブページ制作のたいへんさを見せるページ」への7件の返信
ウェブページ制作のたいへんさを見せるページ http://t.co/xShv2kQOS7 #feedly
“ウェブページ制作のたいへんさを見せるページ” http://t.co/vwTrAqK55B #web技術系 #feedly
おもしろい。 > ウェブページ制作のたいへんさを見せるページ | 秋元@サイボウズラボ・プログラマー・ブログ http://t.co/4aktw23OIj
“ウェブページ制作のたいへんさを見せるページ | 秋元@サイボウズラボ・プログラマー・ブログ” http://t.co/XCgnaxwEHy
ウェブページ制作のたいへんさを見せるページ | 秋元@サイボウズラボ・プログラマー・ブログ http://t.co/IQIP04coa5
ウェブページ制作のたいへんさを見せるページ http://t.co/8SgBBxrdnz @akkyさんから
Now Browsing: ウェブページ制作のたいへんさを見せるページ | 秋元@サイボウズラボ・プログラマー・ブログ – http://t.co/4RRD6YCajx