ファミコン風CSSフレームワーク「NES.css」をリリースしました

ファミコン風（8bitライク）なCSSフレームワーク「NES.css」を、2018年12月19日に正式リリースした。開発した経緯や、タイムライン、OSS活動の感想、「そのロゴ、SNESじゃね？」の反論を書こうと思う。

つくったもの

ウェブサイトを懐かしいファミコンテイストにしてくれるCSSフレームワークを開発した。口で説明するより、実際にデモサイトを見ていただいたほうがわかりやすいだろう。

https://nostalgic-css.github.io/NES.css/

任意の背景色に対して読みやすい文字色を取得するSass functionを実装する

@ktsnさんが興味深い記事を公開されていた。
WCAG(Web Content Accessibility Guidelines)で定義されているコントラスト比の計算方法を用い、任意の背景色に対して読みやすい文字色を選択する方法だ。

詳しくは@ktsnさんの記事を読んでほしい。
この記事ではJavaScriptを用いて文字色を選択していたのだが、Sassの関数として定義できればかなり便利なのでは？と思い実装してみた。

自作フレームワークをつくって学ぶ 仮想DOM実践入門

昨今の代表的なJavaScriptフレームワーク（React、Vue.jsなど）には「仮想DOM（Virtual DOM）」という概念が採用されているので、フロントエンド界隈の人は一度は耳にしたことがあるだろう。ただ、仮想DOMについて学ぼうと検索してもヒットするのは「フレームワークの使い方」ばかり。踏み込んでいても概念の説明どまりで、仮想DOMがどのように実装されているか解説した記事はすくない。

ということで、当記事では理解を深めるために仮想DOMを使ったフレームワークを自作し、仮想DOMに入門する！
そして、ReactやVue.jsを単なるブラックボックスのフレームワークではなく、中身を理解して使えるようになることを、当記事の目標とする。


フレームワークが完成すると以下のようなWebアプリケーションがつくれるようになる。

DOM、Node、Elementの違いとそれぞれの使い分け

仮想DOMのフレームワークを開発しその解説記事を書いているときに、自分がDOM、Node、Elementの違いを正確に理解していないことに気づいた。頭の中でふんわりとDOM≒Node≒Elementという理解になっていたのだ。

ということで、この3つの違いについて調べた。

box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる

CSSだけでドット絵（Pixel Art）を描く・アニメーションさせる方法を紹介する。ただ、バニラCSSだけでも大丈夫なのだが、よりメンテナブルにするためSassで描く方法も併せて紹介する。

ちなみに下図のようなドット絵がつくれる。

マリオとMinecraftの土ブロックは、CSSアニメーションをつかって動かしている。もちろんJavaScriptは使っていない。