2019/12/17

rsyncの悲劇 〜本番環境を消し飛ばす前に覚えておきたいこと〜


この記事は本番環境でやらかしちゃった人 Advent Calendar 2019 17日目の記事です。


はじめまして、ダーシノ(@bc_rikko)です。

突然ですが、懺悔します。
私は転職して10ヶ月で2回も本番環境をぶっ飛ばしました。お客様をはじめ、関係各位には多大なるご迷惑をおかけしたことを、ここでお詫び申し上げます。


1回目は2015年11月27日、入社27日目のこと。
gitの設定ミスにより壊れたブランチをmasterにforce pushしてしまい、CIが流れて本番環境が壊れた。原因はpush.defaultなのだが、詳しくはすでに記事を書いているのでそちらを読んでほしい。
2回目は翌年9月1日、入社してちょうど10ヶ月たった日のことだ。
またしても本番環境をぶっ飛ばした。しかも、前回より盛大に……。

タイトルにもあるようにrsyncコマンドが原因だ。
当記事では、この「rsyncの悲劇」を二度と繰り返さないために原因・対策を共有したい。


勘の鋭い方は「rsync」と「本番環境でやらかしちゃった」という組み合わせでオチにお気づきと思いますが、しばらくの間お付き合いください。

2019/12/09

CSS Custom Propertiesと良好な関係を築くための戦略


この記事はCSS Advent Calendar 2019 9日目の記事です。

CSS Custom Properties、ときにCSS変数やCSS Variablesとも呼ばれているプロパティがある。昨今のダークモード等のテーマ変更の需要の高まりとともに、多くのウェブサイトで使われるようになった。

たとえば、CSS Custom Propertiesを使うと以下のようにCSSだけでOSのテーマを判別し、ダークモード表示ができる。
/* Default / Light Theme */
:root {
  --color: black;
  --background-color: white;
}

/* Dark Theme */
@media (prefers-color-scheme: dark) {
  :root {
    --color: white;
    --background-color: black;
  }
}

body {
  color: var(--color);
  background-color: var(--background-color);
}

他にも以下のようにスタイルの管理がしやすくなる。
/* Before */
a {
  color: #0000EE;
}
a:visited {
  color: #800080;
}
a:active {
  color: #FF0000;
}

a.grayscale {
  color: LightSlateGray;
}
a.grayscale:visited {
  color: Silver;
}
a.grayscale:active {
  color: LightSteelBlue;
}
/* After */
a {
  --link: #0000EE;
  --link-visited: #800080;
  --link-active: #FF0000;
}

a.grayscale {
  --link: LightSlateGray;
  --link-visited: Silver;
  --link-active: LightSteelBlue;
}

a {
  color: var(--link);
}
a:visited {
  color: var(--link-visited);
}
a:active {
  color: var(--link-active);
}
参考: Patterns for Practical CSS Custom Properties Use | CSS Tricks


すごい、、、すごく便利そう!!


しかし、一見便利そうなCSS Custom Propertiesも使い方によっては闇を生み出してしまう。
ということで、当記事ではNES.css(CSSフレームワーク)開発で得た<知見>を元に、CSS Custom Propertiesのメリット・デメリットを理解し良好な関係を築く方法を紹介する。