テキストの縦位置・横位置をセンタリングしたいという想い（display: flex; align-items: center; justify-content: center;） 😇

いままで、display: table-cell とか text-align: center とか line-height（1行のときのみ）とか色々頑張ってきたけど、今後はflexboxをつかうと決意した。
なんていったって、いままでの試行錯誤と違って専用のプロバティだし。

CSS

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

過去に一度、一部Androidでflexboxが効かず、泣く泣くつくりなおしたトラウマから、flexboxを避けてきたけど、
古いIE、古いAndroidはもう知らん！（ http://caniuse.com/#search=flex ）

と言いたくてしょうがない。まあ、一応ベンダープレフィックスはつけますが。

...

んが。そういうわけにもいかないので、
動作保証端末でこのページ（ http://jsrun.it/kimmy/4m5p ）を確認してからコーディングに入ろうと思います。

DEMO

プレフィックスなし

-webkit-あり（折り返されることも想定してもろもろ追加設定）

iOS10.2でdocumentに張ったmousemoveが発火することがある 😭

仕様かバグかは調べてないのですが、iOS10.2では発火することがありました。

詳しい発生条件はわかりませんが、挙動を見るに、少なくとも、

• touchstart => touchend の間に touchmove を挟まない
• touchstart => touchend の間隔を0.1秒程度以下にする

の2つが揃うと発火するっぽいです。
※ iOS9では再現しませんでした。

documentではなくwindowに張ると発火しないので、windowでも良いならwindowに張ろうと思いました。

DEMO

documentにmousemove

windowにmousemove

JSONにコメントを描き込みたいという想い 😭

JSONをつくる際に、

{
    index : 3, // 背番号
    name : "サブロー"
}

という感じでコメントを入れてしまうとエラーになります。
なので、いつも泣く泣く、

{
    index : "COMMENT: 背番号",
    index : 3,
    name : "サブロー"
}

という感じで、
key名を重複させてコメント欄として活用しています。