2018年活動報告と2019年行動指針

2018年はお世話になりました。
2019年もひきつづきダーシノ、当ブログともによろしくお願いします。

過去の記事

• 2013年活動報告と2014年行動指針
• 2014年活動報告と2015年行動指針
• 2015年活動報告と2016年行動指針
• 2016年活動報告と2017年行動指針
• 2017年活動報告と2018年行動指針

2018年のBlack Everyday Company

まずは当ブログについての総括を。

ブログ 96.6万PV

2018年の1年間で、966,291PVあった。

前半は副業、後半はOSS活動などで忙しかったため投稿数は過去最少の33記事。PVはほぼ横ばいだ。ありがたいことに書いた記事がバズることが数回あり、3月、10月、11月は 約8.9万PV/月まで伸びた。

ファミコン風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つの違いについて調べた。