2020/01/17

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

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

過去の記事


2019年のBlack Everyday Comapany

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

ブログ 87万PV

2019年の1年間で、873,992PVあった。
3月までは週イチ更新をがんばっていたものの、NES.css関連や他の要因も重なりブログを続けるモチベーションが底をつき、以降はほとんど更新できなかった。
さらに、Googleのアルゴリズムの変更のためか、2018年1月には月8万PVあったが現在では6万台まで落ち込んだ。


収入 15.5万円(AdSense + アフィリエイト + 原稿執筆)

メインの収入源であるAdSenseは、4月以降に大幅下振れしマイナス2,500円/月になった。趣味でやっているだけなのであまり気にしてこなかったのだが、モチベーション維持のためにもSEO対策、モバイル対応なども考えている。

アフィリエイト記事はまったく書いていないが、Twitterで本を紹介するときにリンクを付けたため3,000円ほどの収入があった。

「仮想DOMの執筆依頼来ないかなー?」なんて適当にツイートしたところ、とあるウェブメディアの編集者から連絡をいただいた。8,000文字程度で初心者にもわかるように仮想DOMを解説してほしいとのこと。
ただ、編集者の要望に応えるために書き続けた結果、1ヶ月で3万文字の超大作になってしまった。公開予定は2月頃らしいので、公開されたらTwitterでシェアしようと思う。まだ公開されていないということで報酬も振り込まれていないが、Black Everyday Comapanyの収入としては2019年に計上した(※ 確定申告が必要な場合は2020年分として計上する)


2019年の活動報告


NES.cssがGitHub #css-framework トピックで世界4位になり、CSS芸人として登壇依頼、インタビューを受けたり、露出する機会が多かった。

1月
2月
3月
4月
5月
6月
  • 続、読書会
7月
8月
9月
  • Twitter歴10年を迎える
10月
11月
  • 誕生日にたくさんの人からお祝いされる
    • お誕生日会を開催してもらう
    • 多くの方からAmazonを通してプレゼントが送られてくる
12月
  • 6回くらい忘年会をする
  • 両親にスマホをプレゼントするもSIMの発送に手こずる
  • 液晶タブレットを購入し、絵の練習をはじめる
  • 来年こそは本気出すと宣言し、ふわっと年を越す




2019年、人気のあった記事 TOP3


2019年は22記事を投稿した。その中でも人気のあった記事を紹介する、

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

「本番環境でやらかしちゃった人 Advent Calendar 2019」の記事で、転職してからやらかしたこと(本番環境を消したこと)についてまとめた記事。


2位: position:stickyでスクロール可能なテーブルの行・列ヘッダを固定する

CSSのposition: stickyを使ってテーブルの行・列ヘッダを固定する方法をまとめた記事。

3位: Canvas上のオブジェクトがクリックされたか検知する

Canvas上に配置されている四角や丸のオブジェクトがクリックされたか検知する方法をまとめた記事。ゲームの当たり判定と同じアルゴリズムをクリックイベントに反映したもの。



2019年の振り返り


2019年も例年どおり3つの目標を立てた。

1. 関心事のひとつ下のレイヤーを学ぶ

2018年に仮想DOMを自作フレームワークを開発しながら学ぶ解説記事を公開して以来、関心事のひとつ下のレイヤーを学ぶようにしていた。JavaScriptのフレームワークを学ぶのであれば、使われている仮想DOMについて学ぶ。パフォーマンス改善をするなら、ブラウザの仕組みについて学ぶ。APIを開発するなら、TCP/IPを学ぶ。といった具合だ。

やる気が喪失しており、そもそも「関心事」がなかったのであまり学べなかった気がする。


2. NES.cssで名を売る

Meguro.cssに始まり、LINE株式会社主催のUIT meetupの登壇オファーがきたり、Podcastの出演依頼がきたり、読書会にお誘いいただいたり、お食事会にお誘いいただいたり、なんだかんだでTwitterのフォロワー数も下図のとおり1年で700人くらい増えた。

名を売れたと言っても過言ではないだろう。


3. 彼女をつくる

…………。



2020年の行動指針


1. 趣味に全振りする

2019年になってから「興味があるから勉強しよう」から「この先生きのこるために勉強しなきゃ」というマインドに変わってしまい、プログラミング自体に楽しさを見いだせなくなってしまった。
頭の片隅にある「勉強しなきゃ」という欠片に支配され、20年続けてきたギターも弾かなくなってしまった。

だから2020年は「仕事はがんばらない!」と宣言し、思い切り趣味に全振りする!


2. 彼女をつくる


…………。


基礎の年から、趣味の年へ


2013年「変化の年」
2014年「成長の年」
2015年「行動の年」
2016年「挑戦の年」
2017年「実現の年」
2018年「適当の年」
2019年「基礎の年」

そして、2020年は健全な肉体・精神を保つために趣味に全振りする「趣味の年」にしたい。

2019年12月のサイバーマンデーで液タブを購入し絵の練習をしている。この調子で来年には神絵師になり宗教画をたくさん描いて高値で売りさばきたい!


今年もBlack Everyday Comapanyをよろしくお願いします。



以上


written by @bc_rikko

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