NSDateFormatterの年数表示が12/27〜12/31の間だけ狂う

dateformatter

2015/12/27のタイムスタンプをNSDateFormatterに渡すと、1年後である2016/12/27として返ってきてしまう、という不具合で詰まりました。
2015/12/26のタイムスタンプだと再現せず、2015/12/27〜2016/12/31のタイムスタンプだと1年ズレてしまう不思議さ。。

解決方法

フォーマット文字列の YYYYyyyy に変更したら正しい年数表示になりました。

//formatter.dateFormat = "YYYY/MM/dd HH:mm"
formatter.dateFormat = "yyyy/MM/dd HH:mm"

問題を解決したコード

let formatter = NSDateFormatter()
formatter.timeZone = NSTimeZone.systemTimeZone()
let expiresDate = NSDate(timeIntervalSince1970: 1451185520)
formatter.dateFormat = "yyyy/MM/dd HH:mm"
print(formatter.stringFromDate(expiresDate))

CSSで行数が不定なテキストの縦センタリング

ボタンのマークアップで、「ボタンラベルが1行になるか2行になるか分からないけど縦方向に中央寄せしたいボタン」という厄介な仕様に出会った際に、同僚がくれたアイディアです。
社内でも結構な議論になったのでポストしておきます。

先に結論を言うと、今回は以下のコードで対応しました。

css

.btn {
    display: inline-block;
    margin: 0 5px 0 0;
}
.btnInner {
    display: table-cell;
    width: 200px;
    height: 100px;
    background: #000;
    color: #ccc;
    text-align: center;
    vertical-align: middle;
}

html

<div class="btn">
    <a href="#" class="btnInner">1行ボタン</a>
</div>
<div class="btn">
    <a href="#" class="btnInner">2行<br>ボタン</a>
</div>

実行結果

この実装の特徴

display: table-cell;

を使っている点。
td要素は縦センタリングしてくれる珍しい要素なのですが、その挙動をa要素で利用するために指定しています。

display: flex

を使っても縦のセンタリングは出来るようですが、ほとんどのブラウザが部分的サポートになってるので怖いなぁということでこっちにしました。

ただ、親に display: table; な要素が無い状態で display: table-cell; を使うのは若干怖い気がするので、更に安全策を採るなら親要素に display: table; を付けた方が良さそうです。

おまけ:更にHTMLをシェイプアップするなら

怖い実装ですが、こんなやり方もあります。

css

.btn {
    display: table-cell;
    width: 200px;
    height: 100px;
    background: #000;
    color: #ccc;
    text-align: center;
    vertical-align: middle;
    border-left: solid 2px transparent; /* margin-leftの代わり */
    border-right: solid 2px transparent; /* margin-rightの代わり */
    -webkit-background-clip: padding-box; /* これを指定するとborderの後ろにbackground-colorが描画されない */
    background-clip: padding-box;
}

html

<a href="#" class="btn">1行ボタン</a>
<a href="#" class="btn">2行<br>ボタン</a>

実行結果

この実装の特徴

さっきまでボタンを囲っていたdiv要素を取り除いて、a要素単体でボタンとして見せるやり方です。
display: table-cell; の要素だけだと要素間のmarginが効かないので、marginの代わりに border で余白を確保する強引な実装w
少々トリッキーな方法なので見送りましたが、どうしてもDOMを削りたい場合はこんな方法もあるよ、ってことで。