Literally Pushing Code

index.html

<article>
  <header>
    <h1><span>Literally</span><span>Pushing</span><span>Code</span></h1>
    <h3><span>How much</span><span>your fingers</span><span>actually work</span></h3>
  </header>

  <section class="inputs">
    <form>
      <div>
        <input id="keystrokes" type=text value="10985" placeholder="10985"/>
        <label for="keystrokes">Keystrokes Recorded</label>
      </div>
      <div>
        <input id="hours" type=text value="4" placeholder="4"/>
        <label for="hours">Hours Recorded</label>
      </div>
      <div>
        <input id="hours_coding" type=text value="6.25" placeholder="6.25"/>
        <label for="hours_coding">Avg hours coding per day</label>
      </div>
      <div>
        <input id="days_coding" type=text value="5" placeholder="5"/>
        <label for="days_coding">Avg days coding per week</label>
      </div>
      <div>
        <input id="keystroke_distance" type=text value="0.03125" placeholder="0.03125"/>
        <label for="keystroke_distance">Height of key in inches</label>
      </div>
    </form>
    <h3>Instructions</h3>
    <ol>
      <li>Install a program like <a href="https://whatpulse.org" target="blank">WhatPulse</a> that can track keystrokes <em>per application</em>.</li>
      <li>Use your text editor of choice</li>
      <li>Note the start and stop time to derive the total time recorded</li>
      <li>Note the keystroke count for the text editor application</li>
      <li>Fill in the information above (I put some of my recent data in as a default)</li>
      <li>Data is output on the right</li>
    </ol>
  </section>
  <section class="outputs">
    <pre id="output"></pre>
  </section>
</article>

Literally Pushing Code.markdown

Literally Pushing Code

Yes, we push code to and from repos. We push it live. We pull it down. The one thing that we neglect to notice is that the act of a keypress is a literal push. Our fingers "push" code.

This pen calculates data about how much your little fingers actually work.

A Pen by Jake Albaugh on CodePen.

License.

script.js

// building a keystrokes object for each period of time
function getKeystrokes(keys, hours, hours_per_day, days_per_week) {
	var
  ratio = keys / hours,
  hours_per_week = hours_per_day * days_per_week;
	return {
    "hourly"	:	ratio,
    "daily"		:	ratio * hours_per_day,
    "weekly"	: ratio * hours_per_week,
    "annually": ratio * hours_per_week * 52.1775
  }  
}

// building a distance object for each measure
function getDistances(keys, keystroke_distance) {
	var inches = keys * keystroke_distance;
  return {
    "inches": inches,
    "feet"	:	inches / 12,
    "miles"	:	inches / 63360
  }
}

// getting
function getResults() {
  var 
	// get input values  
	$hours 							= document.getElementById("hours").value,
	$keystrokes					= document.getElementById("keystrokes").value,
	$hours_coding 			= document.getElementById("hours_coding").value,
	$days_coding 				= document.getElementById("days_coding").value,
  $keystroke_distance = document.getElementById("keystroke_distance").value,
  // do maths
  keystrokes 	= getKeystrokes($keystrokes, $hours, $hours_coding, $days_coding),
  h_distances = getDistances(keystrokes.hourly, $keystroke_distance),
  d_distances = getDistances(keystrokes.daily, $keystroke_distance),
  w_distances = getDistances(keystrokes.weekly, $keystroke_distance),
  a_distances = getDistances(keystrokes.annually, $keystroke_distance)
	// results object  
  results = {
    "keystrokes": keystrokes,
    "hourly"		: h_distances,
    "daily"			: d_distances,
    "weekly"		: w_distances,
    "annually"	: a_distances
  };
  // return results object
  return results;
}

// output results to dom
function outputResults() {
  var 
  results = getResults(),
  key = /(\"[a-z]*\")/g,
  decimal = /(\d{1,}\.?\d{1,})/g,
  // syntax highlighting
  formatted_results = JSON.stringify(results, null, "  ")
  	.replace(key, "<em class=\"key\">$1</em>")
  	.replace(decimal, "<em class=\"val\">$1</em>");
  // write shit to the DOM
  document.getElementById("output").innerHTML = formatted_results;
}

// for each input
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
  // whenever the input changes
  inputs[i].oninput = function() {
    // form complete to be invalidated on empty input
    var form_complete = true;
    // check if we have all the data
    for (var ii = 0; ii < inputs.length; ii++) {
      if (!inputs[ii].value) { form_complete = false; }
    }
    // if we have all the data
    if (form_complete) { outputResults(); }
  }
}

// initial results
outputResults();


jakealbaughSignature();

style.scss

@import url(http://fonts.googleapis.com/css?family=Lato:300,300italic|Oxygen+Mono|Oswald:300,400,700);

// font families 
$f-sans:  "Lato";
$f-title: "Oswald";
$f-mono:  "Oxygen Mono";

// sizes
$s-header-w: 340px;
$s-output-w: 340px;

// color
$c-dark:  #1F1F1F;
$c-white: #FFFFFF;
$c-light: #999;
$c-color: #FFDD00;
$c-text:  $c-white;
$c-bg:    $c-dark;

$corner: 2px;

// general formatting
body {
  font-family: $f-sans;
  background-color: $c-text;
  color: $c-text;
  line-height: 1.6;
}

// typography 
h1, h2, h3 { text-transform: uppercase; }
h1, h3 { margin: 0; }
h1 { font-family: $f-title; }
h2, h3 { letter-spacing: 0.125em; }
h2 { font-weight: 100; color: $c-light; }
a { color: $c-bg; }

// header
header {
  box-sizing: border-box;
  padding: 1em 1em;
  background-color: $c-bg;
  display: block;
  border-bottom: 1px solid;
  h1 {
    font-size: 4em;
    line-height: 1.1;
  }
  h3 {
    color: $c-color;
    line-height: 1.3;
  }
  h1 span, h3 span {
    display: block;
  }
}

ol {
  margin-top: 0.5em;
  padding: 0 0 0 1em;
}

// form
form {
  margin: 0 0 2em;
  > div ~ div { padding-top: 1em; }
  > div::after { content: " "; clear: both; display: table; }
  input, label { display: block; float: left; box-sizing: border-box; }  
  input { 
    color: $c-dark; 
    width: 30%;
    margin-right: 2%;
    padding: 0.5em;
    border-radius: $corner;
    border: 1px solid #DDD;
    font-family: $f-mono;
  }
  label { 
    width: 68%; 
    line-height: 2.2em;
  }
}

// article container
article { 
  min-width: 700px; 
  max-width: 1200px; 
  margin: 0px auto;
  
}
// sections
section {
  width: 50%;
  float: left;
  box-sizing: border-box;
  padding-top: 48px;
  padding-bottom: 48px;
  color: $c-bg;
}
section.inputs {
  padding: 48px 20px; 
}
section.outputs {
  font-family: $f-mono;
  font-size: 0.875em;
  pre { padding: 0 20px;  margin: 0; }
  em { font-style: normal; }
  .val { font-weight: bold; }
}