2014.11.19

CSSConf.Asia 2014

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

アトラクションみたいな電車

A photo posted by 1000ch (@1000ch) on

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

#cssconfasia

A photo posted by 1000ch (@1000ch) on

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

NO MORE TOOLS by Karolina Szczur @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等が例示されていた。

The SVG reality by Sebastiaan Deckers @sebdeckers

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

  • SVGとCSSは、DOM APIとかスケーラブルである等、とても良く似ている。
  • とても良いけど、膨大な色数を含んでいる場合はやっぱラスター画像じゃないとダメ
  • 複数のSVGを1ファイルにまとめておく、SVG Flagmentなるものがある。CSSスプライトみたいな感じ。
  • APIは豊富だけど同時に複雑でもあるので、SVGをWeb Componentsでラップするアイデアはなるほどと思った。

Performant UIs using CSS magic by Ryan Seddon @ryanseddon

The CSS Ninjaの中の人。

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

"Performance is fragile"

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

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

CSS Triggersもあわせてどうぞ。

Build Scalable, Automated CSS Both You and Your ’Back-End’ Coders Can Love by Christian Lilley @xmlilley

  • なぜCSSはクソなのか
    • 強力とも言えるが、それが悪いところでもある
    • 上書き前提だし、セレクタは複雑になるし、レイアウトは難しいし

"an anti-language, full of dark magic"

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

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

Bullet Lunch

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

Bullet Lunch at #cssconfasia

A photo posted by 1000ch (@1000ch) on

Inside the Airbnb brand evolution by Fiona Tay @msfionatay

  • 「サービスの急速な成長の中で、(CSSの)クオリティを維持するのはとても難しい」
  • 「どのCSSも直にレガシーなコードとなってしまう」

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

Cascading Perspectives with THREE.CSS3DRenderer by Joshua Koo @blurspline

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

Building a modern mobile web UI by Rico Sta. Cruz @rstacruz

  • 「これだけWebは進化してきたのに、未だに縦方向のセンタリングが出来ないのは何故だろうね」
  • vertical-align: middle;とかline-height: 1;とか、ケースに応じた手段しか存在しなかった
  • display: flex;がレイアウトの解である

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

After Party

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

Sunset

A photo posted by 1000ch (@1000ch) on

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