James Cook

I'm a web and mobile developer from Newcastle, England. I try to blend good design with useful utility.

I post ideas and things I'm working on here.

122 days since the last post. My programming tells me that's shit.

I'm accountability bot. I make sure James posts every 14 days.

Accountability Bot

To get comfortable with posting my ideas and projects on this blog, I decided I need to post something at least once a week.

Accountability bot is designed to guilt me into keeping to this schedule by publicly displaying my commitment. It shows a green bar when I’ve recently posted, moving through yellows and oranges when it’s getting close to the deadline, and red if I’ve neglected my responsibilities. You can see it at the top of this page.

If you want to use it on your own WordPress site feel free to copy and modify the code below.

It isn’t exactly well structured but I didn’t want to spend very long on it!

At some point I may turn this into a WordPress plugin to make it easier to install.

<?php
    /**
     * Accountability bot configuration
     */
    $postFrequencyInDays = 7;
    $personToHoldAccountable = 'James';
    // do the maths
    $daysSinceLastPost = (time() - strtotime(get_lastpostdate())) / 86400;
    $remainingPercent = (100 / $postFrequencyInDays) * ($postFrequencyInDays - $daysSinceLastPost);
    $daysSinceLastPost_rounded = number_format($daysSinceLastPost, 0);
    $remainingTimeString = $daysSinceLastPost_rounded . ' day' . ($daysSinceLastPost_rounded > 1 ? 's' : '');
    switch (true) {
        case ($remainingPercent <= 0): {
            $status = 'shit';
            break;
        }
        case ($remainingPercent <= 20): {
            $status = 'bad';
            break;
        }
        case ($remainingPercent <= 40): {
            $status = 'good';
            break;
        }
        case ($remainingPercent <= 60): {
            $status = 'great';
            break;
        }
        case ($remainingPercent <= 100): {
            $status = 'brilliant';
            break;
        }
    }
?>
<div class="accountability-bar status__<?php echo $status; ?>">
    <div class="accountability-bar-content">
        <div class="flex-row">
            <div class="accountability-bot">
                <svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <g id="accountability-bot-svg" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g class="accountability-bot-fill" fill="#000000">
                            <g>
                                <path d="M25.0369034,4.47213686 L3.23836935,48 L46.7662325,48 L25.0369034,4.47213686 Z M25.9330369,1.78942392 L49.2778278,48.5533555 C49.5245027,49.047491 49.3238963,49.6480366 48.8297608,49.8947115 C48.6910535,49.9639549 48.5381464,50 48.3831162,50 L1.61918468,50 C1.06689993,50 0.619184676,49.5522847 0.619184676,49 C0.619184676,48.8445401 0.655429822,48.6912212 0.725041985,48.5522179 L24.1441827,1.78828629 C24.391486,1.29446491 24.9922862,1.09462249 25.4861076,1.34192574 C25.6795735,1.43881252 25.8363963,1.59583488 25.9330369,1.78942392 Z" id="Rectangle" fill-rule="nonzero"></path>
                                <g id="Group" transform="translate(15.000000, 26.000000)">
                                    <path d="M10.102657,1.00018148e-13 C15.087151,0.0122015153 20.0028425,4.40303826 19.9999994,5.79777029 C19.9971563,7.19250231 15.1087714,11.7006245 10.0788308,11.6883117 C5.04889018,11.6759989 -0.00320400028,7.32085692 5.51534031e-07,5.7488124 C0.00320510334,4.17676788 5.11816297,-0.0122015153 10.102657,1.00018148e-13 Z M10,10 C12.3054558,10 14.174397,8.13105879 14.174397,5.82560297 C14.174397,3.52014715 12.3054558,1.65120594 10,1.65120594 C7.69454418,1.65120594 5.82560297,3.52014715 5.82560297,5.82560297 C5.82560297,8.13105879 7.69454418,10 10,10 Z" id="Combined-Shape"></path>
                                    <g id="Group-2" transform="translate(5.714286, 1.428571)">
                                        <circle id="Oval" cx="4.28571429" cy="4.39703154" r="2.50463822"></circle>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                </svg>
            </div>
            <div>
                <p><?php echo $remainingTimeString; ?> since the last post. My programming tells me that's <strong><?php echo $status; ?>.</strong></p>
                <p class="disclaimer">I'm accountability bot. I make sure <?php echo $personToHoldAccountable; ?> posts every <?php echo $postFrequencyInDays; ?> days.</p>
            </div>
        </div>
    </div>
</div>
<style>
    .accountability-bar {
        color: #ffffff;
    }
    .accountability-bar.status__shit {
        color: #C3362F;
        background: #E7BFBF;
    }
    .accountability-bar.status__shit #accountability-bot-svg .accountability-bot-fill { fill: #C3362F; }
    .accountability-bar.status__bad {
        color: #A99D05;
        background: #E7E8AD;
    }
    .accountability-bar.status__bad #accountability-bot-svg .accountability-bot-fill { fill: #A99D05; }
    .accountability-bar.status__good {
        color: #99AC0C;
        background: #DAE897;
    }
    .accountability-bar.status__good #accountability-bot-svg .accountability-bot-fill { fill: #99AC0C; }
    .accountability-bar.status__great {
        color: #68AD08;
        background: #D1E8A0;
    }
    .accountability-bar.status__great #accountability-bot-svg .accountability-bot-fill { fill: #68AD08; }
    .accountability-bar.status__brilliant {
        color: #51AD09;
        background: #C6E8A7;
    }
    .accountability-bar.status__brilliant #accountability-bot-svg .accountability-bot-fill { fill: #51AD09; }
    .accountability-bar-content {
        max-width: 1000px;
        padding: 10px;
        margin: 0 auto;
    }
    .accountability-bar-content p {
        margin: 0;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 0.9em;
    }
    .accountability-bar-content p.disclaimer {
        font-size: 0.7em;
        font-weight: 600;
        color: rgba(0,0,0,0.3);
    }
    .accountability-bar .flex-row {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .accountability-bar .accountability-bot svg {
        display: block;
        max-width: 40px;
        margin: 0 10px 0 0;
    }
</style>