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のメリット・デメリットを理解し良好な関係を築く方法を紹介する。

2019/09/12

GitHub Actionsの使い方まとめ

9月上旬にGitHubから「You're in! Get started with GitHub Actions beta」というメールが届いた。どうやら以前した利用申請が通り、個人アカウントでGitHub Actionsのベータ版が利用できるようになったらしい。

ちょうどJSライブラリを開発していたので、そのリポジトリでGitHub Actionsを使ってCI(継続的インテグレーション)の設定をしてみたので、その使い方や解説をする。


GitHub Actionsとは


一言でいうと、GitHub上で完結するCI/CDサービス。
いままでCircleCIやTravisCI、Drone CIなど外部のサービスを使っていたところを、GitHub上で実行できるサービスだ。

昔はTerraformなどで使われているHCL(HashiCorp Configration Language)を用いて設定ファイルを書いていたらしいが、2019年9月30日に廃止されYAML構文に一本化される。そのため、CircleCIやTravisCIなどからも比較的簡単に移行することができる。

詳しくは公式ドキュメント参照。
▶ GitHub Actionsについて - GitHub ヘルプ

2019/09/10

TypeScriptの似ているようで違うvoid/never型とany/unknown型の比較

TypeScriptは業務で使っているが、脳内バージョンは2.x系で最新情報を追ってこなかった。その弊害として、never型とunknown型の意味がわからず、void/anyと何が違うの?状態だった。

そこで当記事ではvoidとnever、anyとunknownのそれぞれの型の特徴を一言、二言で表し比較する。