Fri 06 Oct 2017
Reading time: (~ mins)
In our busy lives and with thousands of monkeys at type writers putting out blogs posts, knowing how long an article will take to read is priceless. A quick google will tell you that the average reading speed is around 200 words per minute! Ignoring that typical comprehension is really low (only 60%!), this gives us pretty clear route of how to generate a reading time for any article:
var paragraphs = document.getElementsByTagName("p");
var display = document.getElementById("time");
var count = 0;
for (var i = 0; i < paragraphs.length; i++) {
count = count + paragraphs[i].innerHTML.split(" ").length;
}
display.innerHTML = Math.round(count/200);
We simply grab each p tag, split it's content into words by breaking on 'spaces'(" ") and count the total number of 'words'. We divide that by the average speed of 200. Tada! For this page that gives us: ~ mins.
This gives a pretty rough, but decent estimate. I have an issue though, my blog posts contain plenty of code snippets. Code reading time/comprehension is a beast of a problem, and the numbers for the average there vary widely! So how can I get something that better approximates the time to read a technical blog?
Like any good problem solver we'll make some assumptions and build and expand our simple algorithm from above.
My first assumption that I've already made is that headings take no time to read. I think that is fine since usually those can be skimmed without much thought.
My second assumption that I'll make now is that my readers are better than average. Looking at code all day must make programmers slightly faster at reading, right? So I'll bump the speed from 200 -> 250.
The last assumption is that each block of code will take on average of one minute to read. While my code snippets aren't usually complex I still want to reflect that some time should be taken going over them a little slower than you would usually a block of text. I allot 1 minute per code block found in a posting. On this blog code blocks always have the class prettyprint so that's how I'll wrangle and count all of them:
var paragraphs = document.getElementsByTagName("p");
var code = document.getElementsByClassName("prettyprint");
var display = document.getElementById("time");
var count = 0;
for(var i = 0; i < paragraphs.length; i++) {
count = count + paragraphs[i].innerHTML.split(" ").length;
}
display.innerHTML = Math.round(count/250+code.length);
That gives us the result you see at the top of the page! Neat huh?
EDIT: I have since increased the the time to TWO minutes per code block. You're welcome!