So, first of all, I fail at New Year’s Resolutions. I know. I haven’t read anything and I’ve been terrible at posting more and stuff. Bad me. But in good news, I’m here to post right now and do a little mini walkthrough.
I started off with something super easy: figuring out the math. You remember those ridiculous word problems you would get in math class all the time, that were inplausible and super difficult to read correctly? This was kind of like one of those. So I started working backwards because I already knew what my end value should be. Everyone reads at different speeds, which is something difficult to accomodate for, unless I prompt the reader to tell me their average words per minute (WPM) that they read every time they come to my blog. (<– This is a sure way to have readers NOT return to your blog.) Instead, I chose to do a little research and find an average WPM that I would set as a constant and not worry about. Along the way I found some really interesting articles, some about speed readers and so on, but average WPM is about 200WPM give or take a few words here and there.
Cool, so now we have an average. Let’s do a little math in our heads. Let’s say we have an article that has 300 words on the dot. For an average reader, reading at 200 words per minute: in 1 minute the reader will get through 200 words of that article, then there are still 100 words left which will then take the read 1/2 minute, or 30 seconds. Hey, look, math problem solved.
which obviously compiles to:
console.log. Which is exaclty what I did, every step of the way, (obviously removed them from my final code but I’m going to walk you through my process anyway).
I’m most familiar with jquery, so I told myself I will first get this working using jquery and then decide what I want to do after that. I first defined my function and some basic variables that I knew I was looking for or I was going to need:
Ok, cool. This looks awesome and when I
console.log I get the text within the data attribute (I was currently not bothering to look at anything such as an anchor or a span within the text, that scared me and I hoped that as I was doing this, it would solve itself and fortunately it did.) Moving on. At this point in time, I needed to figure out how many words were in the text. I knew from working a bit with Ruby that you can use the method
console.log the result. At that point you can even go ahead and check the length of your array to see how many words it contains:
So far, so good. At this point, now that I had a word count, I was wondering how it would handle if I had multiple locations with this same data attibute and if it would count all the words etc. So I added a new paragraph with the same styling and data attribute and was pleasantly surprised that my number of words just kept going up so I brought the number to 300, since that is what our practice problem laid out and it would make it easier for doing math if I already have an example that I know the answer to. Now I started laying out the math:
This code doesn’t account for if there is only one second, to change the plauralization of seconds to second, same with minutes, and a bunch of other stuff. But it worked and got the job done. Cool.
Back to the drawing board. I was going to attempt to refactor the function within the function, but then I decided to create a new function so I could more easily compare the two. I created a new function and defined my variables:
This was working great! I had a solid and correct word count, math was working exaclty as I needed it to, everything seemed great. Until…
I realized that when I write in Markdown on my blog posts on my site, I can’t control the class that each paragraph gets, also, I REALLY didn’t want to add this data attribute to EVERY. SINGLE. PARAGRAPH. Look at this post, image how tedious that would become. So I moved the data attribute to a
<div> that was surrounding the text. But SUDDENLY!
Suddenly, my word counter was telling me that there were far more words than there were before and I couldn’t figure out why. Back to
console.log. After console logging and inspecting each array closely, the function was taking a new paragraph (whenever I had a new p tag start) as an empty character (‘’). So that required a quick conditional statement to get that fixed:
But, there was still an extra ‘word’ in there that was bugging me, and it was a newline character at the beginning of the first paragraph. Well that had to go.
I tested this out by adding an anchor into the text and a random image to make sure that wasn’t getting any additional words that weren’t supposed to be there. Yay! Here’s the completed codepen:
SO CLOSE! We are so close to being done. I implemented the js into the page rather simply and as I started writing this post I noticed something funky going on when I started adding code samples on the page, the text I was adding into the examples was being counted into the function as well. I don’t expect any of you to read any of the jibber jabber I wrote in the haml/html files, so I had to add a little extra code to make it work on here:
And that seemed to remove any text within code blocks from the calculation. And now everything is working so fine and dandy!
Let’s be honest, it’s a rather simple function, but it gets the job done. It’s also something people can use for additional ideas for code samples.
As part of my goal to attempt to aspire more people to pursure a dream in development and encourage them that they too can make it, this is one sort of idea for adding to your portfolio. It’s relatively easy and a short task, but there is a lot more thought that can go into it. I could definitely take this even further, but for now, I like where it is.
Let me know your thoughts in the comments below or if you have any other suggestions on how to make the function better or more efficient.