Qiita の「最終更新日から1年以上が経過しています。」を強化する

なぜ

無意識に無視するようになってきたからです。(ぼくは)

Qiita には古い記事を警告する機能があり、僕はありがたく思っています。
現非推奨や古い記法などを含む記事は早めに気づきたいです。

もうこの機能は実装されてからかなり時間が立ちます。
最初はすぐに警告を認知していて、古い記事は慎重に読んでいました。
しかし、それを繰り返すうちにこのメッセージを無視するようになってしまいました。

そして今日悲劇が再臨しました。古い内容だとあとから気づいて30分ほど手戻りが発生してしまいました。

そこで警告メッセージにちょっと手を加えてみました。

警告メッセージのパワーアップ

アラートを大きくしました。

経過によってペナルティを変える

ここが重要なポイントです。

大きくするだけでは同じ見た目なので、また慣れてしまうのが心配です。

なのでペナルティを動的にしました。
↓さらに古い記事です。

paddingTop paddingBottom を 経過日数 x 1px にしてます。

例えば↑の画像は執筆日2017/10/17にスクショした、2014-12-16の記事です。
671(+365)日が経過しているので、上下に671px広がっています。

これによって記事が古いほどスクロールするストレスが発生します。そして記事の古さへの認知をあがることを期待します。

実装内容

Tampermonkey を使っています。

// ==UserScript==
// @name         Powerup　Qiita warning
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://qiita.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    const alertElem = document.querySelector('.alert-warning > .fa-warning').parentElement;
    const timeElem = document.querySelector('time');
    const articleTime = Date.parse(timeElem.getAttribute('datetime'));
    const overDay = (Date.now() - articleTime) / (1000 * 60 * 60 * 24);
    const penaltyDay = overDay - 365;
    if (penaltyDay <= 0) {
        return;
    }
    console.log(penaltyDay);
    alertElem.style.paddingTop = `${penaltyDay}px`;
    alertElem.style.paddingBottom = `${penaltyDay}px`;
})();

しばらく使ってみたいと思います。ストレスが過ぎたら色やアニメーションなど他の策も試してみます。

その他考察

• そもそもこの機能は間違いに注意するきっかけでしかない。
• 無視するようになってしまったのは、警告が役に立ったと実感することが少ないから？
• 古い内容があったら執筆者に記事更新(本文で非推奨をいれるなど)してもらうなどが一番いいと思う。
• が、編集リクエストやコメントで教えるところまで気が回ってない。
• 検索からたどり着く場合、Google 検索結果の画面で知っておきたい。

追記 2017-11-03
徐々に、伸びる+赤くなる+点滅が早くなるものも作ってみました。
Gist コード