CSSConf.Asia 2014

Published at 2014-11-19

最初のセッションは9:00開始、Registrationが8:00開始、ホテルは会場まで電車で1時間弱という状況だったので、7:00にホテルを出発。ディズニーランドを彷彿とさせる電車に乗って、現地へ向かう。

アトラクションみたいな電車
A photo posted by 1000ch (@1000ch) on Nov 11, 2014 at 3:43pm PST

現地へ着いたらパスポートを見せて、参加登録を済ませた。

#cssconfasia
A photo posted by 1000ch (@1000ch) on Nov 11, 2014 at 3:57pm PST

面白かったセッションを幾つか紹介。

NO MORE TOOLS by @fox

ツールっていっぱいあって、どれがベストなのかわからない…
SIMPLICITY 目的がわかりやすく、複雑でないものを選ぼう
- “Complexity is a fact of the world, simplicity is in the mind.”
AUTOMATION 自動化がキモ
- AutoprefixerやらCSSLintやらCode BloatやらStressCSSやらを駆使
- 共有にはnpmもといpackage.jsonを利用するのが良いかな
- ランナーにはGruntでもGulpでもMakeでも！
COLLABORATION 皆が使うことを前提にする
- プロジェクトにジョインする人みながバイアスをもっている
- “Knowledge makes everything simpler”

“its easy to introduce that unnecessary complexity by adding tools that manage other tools”

本当にこれ。よく考えるべき。

この辺の話は最近タイムラインでも活発ですが、Gruntとかのタスクランナーは使わずにpackage.jsonに集約しているらしい。 LevelDBのプロジェクトのpackage.json等が例示されていた。

LevelDB package.json as task automation example https://t.co/5HpC1mNSJF #cssconfasia
— 1000ch (@1000ch) 2014, 11月 19

SVGに関するとてもわかり易い話だった。

The SVG reality by @sebdeckers #cssconfasia pic.twitter.com/0dSYnX11Mh
— 1000ch (@1000ch) 2014, 11月 19

The CSS Ninjaの中の人。

CSSがUIのパフォーマンスに与える影響
ペイントとリフロー
- ペイントは位置の更新を伴わない・リフローは位置の更新を伴う
- 何がそれらを引き起こすかはCSSTriggersを参考に
モダンブラウザならどれでもいつ何が起こっているか、タイムラインでデバッグできる
- SafariならCompositing Borderを表示することが出来る
- order属性はパフォーマンスの良いプロパティとは言えないよう
デバッグツールはどれもまだ過渡期だし、良いUIを作っていくのも難しい。 でも不可能じゃない。

“Performance is fragile”

しみじみそう思う。壊すのは簡単、直すのは難しい。

あと、orderプロパティしらなかったです…。

"order" property https://t.co/xh0x9YjtDz #cssconfasia
— 1000ch (@1000ch_en) 2014, 11月 19

CSS Triggersもあわせてどうぞ。

“an anti-language, full of dark magic”

レイアウトをする上で何に気をつければいいか
- すべての鍵は「float: left|rightを使うのをやめること」
- inline-blockは、text-alignも使えるし、いいよ。vertical-alignはバグじゃない。ああいうもんだ！
- whitespace問題は…プリプロセッサの mix-in つかうといいんじゃないかな

#CSS Selectors are evaluated right-to-left #cssconfasia
— 1000ch (@1000ch_en) 2014, 11月 19

Code Smellとか、BEMとか、おおよそパイセンとか谷さんが喋ってきたような話でしたとさ。

ビュッフェ形式でランチを。美味しかった。

Bullet Lunch at #cssconfasia
A photo posted by 1000ch (@1000ch) on Nov 11, 2014 at 9:04pm PST

デザインを変える時に、TwitterのBootstrapのようなコンポーネント群をまず作って、それをベースにデザインを組み立てるそう。 局所的に変えていくのは無理 ということだと思う。

CSS3の3Dレンダラーを使ったパースペクティブについての話。Three.jsのコミッターをしている人で、@yomotsuさんが大興奮していた。

レイアウトのサンプルはrstacruz/newsreader-sample-layoutに。メディアクエリも駆使して、よく出来てる。

初日のアフターパーティは、近くのビーチにある離れ小島のようなところで行われた。

Sunset
A photo posted by 1000ch (@1000ch) on Nov 11, 2014 at 1:56am PST

ギンペイさんが海賊にビールを突然奪われたりするハプニングに見舞われながらも、他の国の人ともそれなりに交流を深めた。ネイティブスピーカーと話すのは、相手のストレスにもなっている気がして申し訳なかったが、英語が母国語じゃない人ならそれなりに会話出来るような気がした。