The SitePoint-Captcha Effect
Interactive, non-functional demo of that screen: http://c3po.stemlet.com/
Thanks for the continued support, it keeps me up at night!
I’ve spent the last 10 days scrambling to learn everything I can about talking to investors for a meeting I had 3 days ago. While it wasn’t a total floparoo (actually we ended up grabbing some brews after), I definitely didn’t make a deal.
During the meeting, they brought up some very obvious points:
- Wikipedia is effing huge. Like, really huge…both in content, userbase, and the large companies backing it. I knew this, but I didn’t realize this
- I compared my editing process (see The Flow above) to Wikipedia’s, and while they laughed at how comically difficult Wikipedia is to edit they told me it wouldn’t be enough
- Wikipedia has almost 5 million articles in English alone (34 million total!), I would need to have a significant percentage of that in terms of content before converting users/readers to my platform
what 5 million articles looks like…14% of the entire multilingual index
That last one hurt, because it’s true. Even with a thousand full time, hardcore editors we couldn’t possibly pump out content fast enough. It was depressing, and I was going to give up on the project…
“On Our Radar”
I’m a heavy feed reader (RSS, Atom, etc). In my opinion it’s the most efficient way to consume large amounts of information ffffast, and so I subscribe to SitePoint (you should too btw, point your reader to http://www.sitepoint.com/feed/)
While going through the articles, I happened across one of my favorite series “On Our Radar” (the other being @James_Hibbard and @Paul_Wilkins “This Week in JavaScript”), and in it Jasmine write’s this:
Don’t know what Stemlet is yet? Get familiar with that name, because it’ll be the next Wikipedia.
That boosted my confidence and sparked a bolder idea: A feed reader that automatically builds an encyclopedia based on what we read!
The Skinny
One of reCaptcha’s early goals was to help digitize books to make use of the 19 years worth of human hours a day being spent solving captchas (wtf). That’s a lot.
With Stemlet, I’m going to try and leverage the amount of time people spend a day going through their news feed to automatically create an encyclopedia. Here’s why I think this will work:
- When we go through articles in a feed, you either read it or you don’t
- If enough people read an article, something about the title drew them
- If enough people like the article, something about that article is important
From that, we can extrapolate that highly read, highly liked articles hold important content. Stemlet will use that to piece out articles automatically. For example, if a thousand people like 10 different articles about Earth, Stemlet will build an article about Earth using information from those articles. It literally improves itself the more we read.
There’s obviously some huge hurdles with that, but I just thought of it last night 
The Tech
I went into a coding frenzy after the idea. The demo above was made in about 4 hours using MaterializeCSS (covered in previous posts) for the UX, jTinder for reading through cards, and Velocity to morph decks into buttons.
My funds are running low, so I don’t have time to properly relearn an MVC framework. Therefore, I’m using Lodash’s .deepSet() and .deepCall() to build out a neat little custom framework that’s working like a treat!
To grab the RSS feeds, I’m using Google’s JavaScript Feed API.
Morphing the Decks
If you’re into Material Design, bookmark MaterialUp. It’s a showcase site for people incorporating Material Design and a great way to grab some ideas.
To morph any object into a button requires a little sneakiness. The trick is to have a button already made (and hidden). Then you “simply” animate your morphing object towards the hidden button. Finally hide the morphing object and show the button…users can’t tell the difference and it saves you a lot of coding.
That’s hard to describe (and probably hard to read), so here’s how to do it:
First, build your button:
<!-- Fixed Buttons -->
<div id="fixed-buttons" class="ghost fixed-action-btn">
<a href="#" class="btn-floating btn-large blue">
<span class="large mdi-content-add"></span>
</a>
</div>
That produces this:
That’s standard MaterializeCSS markup. The ghost class is just {opacity: 0;} and is there to hide it from the user. You should use opacity vs display: none so that the elements dimensions can be calculated (when it’s set to display none, an object effectively has no dimension). You can work around it if you want but this way is easier.
The morphing script looks like this:
// Hardcode the objects dimensions. Don't use a class if you want
// to be responsive!!
$object.css({
// Make sure it's above everything so people can awe at it
'z-index': 9999,
// This just makes sure the object has a defined width/height
// If these values aren't explicitely set, the animation engine
// will just make something up and it won't be a smooth transition
'width': $object.width(),
'height': $object.height(),
// Since the object will turn into a circle, this ensures the
// content inside the object stays within the circle as it morphs
'overflow': 'hidden'
// .velocity > .animate in terms of utility and speed!
}).velocity({
// Translate the object towards where the hidden button is
// If you animate the left/top directly, it'll take it out of
// DOM flow and bring up the content below it. This may cause
// the destination coordinates to move up with it.
translateX: $button.offset().left - $object.offset().left,
translateY: $button.offset().top - $object.offset().top + 15,
// Shrink the element down to the same size as the button
width: $button.children('a').first().width(),
height: $button.children('a').first().height(),
// This is what morphs the object into a circle.
borderRadius: 9999
// Uncomment this to animate the background color as well
//, background: $button.css('background')
}, {
// Don't make it too long, or the user can scroll around and
// possibly offset the target coordinates
duration: 500,
// Once the object is where and how it should be, hide it and show
// the button
complete: function(){
$object.hide()
$button.removeClass('ghost')
}
})
Next Up
I should have the fully functional reader ready by Wednesday (<-- thank goodness for spellcheck). The idea is to build out a kickass feed reader that functions like Tinder for even faster reading. I eventually plan on adding the ability to build what I call “people decks”, which is basically a feed about what specific people have read…kind of like GoodReads for internet readings.
At this point I’m using the Wikipedia-builder as a side-effect. Side effects are when you build something that accidentally builds something else. If you do it on purpose it let’s you focus on one really awesome thing so that when you’re done you can focus on building up that other thing that’s already cool into something even cooler.
I’ll talk about examples in my next post. Thanks again for the support 
