Devlog for Stemlet: The Next Wikipedia


#1

Devlog for Stemlet: The Next Wikipedia


I'm going to use this devlog to give you a gritty, raw look at the euphoric highs and depressing lows of building a startup from day one. It'll be filled with tips and tricks, advice, and discussions on the tools I use.

Phase 1: Augment Books                  | Goal  | Done  | Comment
----------------------------------------+-------+-------+--------
Project Start Date                      : ----  : 2/27  : ---
Build a Wiki into WordPress             : 3/4   :       :     
Goto post with barcode reader           : 3/5   :       :     
View Augmentations on markers           : 3/7   :       :
Three.js Scene Manager                  : 3/11  :       :
Misc                                    : 3/15  :       :

Beta                                    | Goal  | Done  | Link
----------------------------------------+-------+-------+-----
Augment Markers                         : 3/15  :       :
Discourse/Discussion                    : 3/22  :       :
Augment Images (Image Recognition)      : 3/29  :       :
Speech recognition/dictation            : 4/5   :       :

Tools


Biz Plan (short version)

Vision Statement: Let anyone experience anything for free
Mission Statement: Merge the virtual world with the physical

The Problem: Wikipedia is dated, and there is a growing decline in the number of volunteer editors. Recent events like the GamerGate Wiki Wars are steadily draining editors. Furthermore, Wikipedia is built on top of old software that's weak to spam, internal politics, and intimidating to new users. They've also locked themselves into a business model that they can't change without destroying the trust of their users.

My Solution: Stemlet will utilize in-browser barcode scanning, image recognition, and augmented reality to help readers find, consume, and generate information on the fly. It aims at adding a social, and emotional, element to learning. A clean, markup-less editor will lower the bar of editing to anyone that can read and write.

Stemlet will follow Wikipedia in the totally free model: no ads and anonymous (login-less) editing.


On Our Radar: Getting Started, Clean Code and the Next Wikipedia
New CMS and Page Builder
Linkshow Devlog - Interactive Slideshows
On Our Radar: Creativity, Mapping PHP and Color Keyboards
How I'm Starting a Start Up: Part 1 - Looking for Problems
#2

#ScreenshotSaturday: 2/28

The Tech

MaterializeCSS is a slick framework modeled off the epic UX research done by Google. It's the natural progression to the current flat-design trend you've probably noticed (check out this great question from the Get Started forum on "Following Trends"). The idea is to apply shadows and other visual cues you see in the real world to help create a seamless, fluid workflows.

Tips & Tricks

I used jQuery-UI's powerful .switch() method to create the column-split animation when typing something into Stemlet's Omnibar. .switch()'ing works like .toggleClass(), only it also handles the animations. It also helps separate the CSS/JS.

If you notice towards the end of the clip, changes I make in the right input box show up on the left. This is easily done by binding to the 'keydown' event, something like this:

$('body').on('keyup change', '[data-sync-value]', function(){
    // "cache" the element, else jQuery scans the DOM everytime! 
    var $this = $(this)

    // If you don't use `.not(this)`, the cursor will always
    // move to the end, even when using the arrow keys
    var $targets = $($this.data('sync-value')).not(this)

    // Sync the values yo
    $targets.val($this.val())
})

What's happening here is that I give an attribute [data-sync-value] with the value set to a common class. Something like:

<input class="group-a" type="text" data-sync-value="group-a">
<input class="group-a" type="text" data-sync-value="group-a">

<input class="group-b" type="text" data-sync-value="group-b">
<input class="group-b" type="text" data-sync-value="group-b">

Changing one automatically changes the other. It's a simple data-binding technique I learned from experimenting with a few different JavaScript MVC frameworks.

Future

As far as the project goes, the next step is to show search results for Stemlet in the left column and stuff from around the web (Twitter, YouTube, discussions, even Wikicommons) on the right. You'll be able to grab those widgets and drop them into the green box to help build up media-rich articles fast!


PS: Anyone know why I can't edit the first post? Is that specific to the Showcase forum?


#3

30 minute edit window is in effect for all of the forum.


#4

Thanks, makes sense!


#5

The Flow


In psychology, the term Flow (or, "in the zone") refers to a state in which you are completely immersed in something: time, environment, and even pain and exhaustion fade away.

Anyone who's ever been involved in any creative hobby has experienced it: from knitting to painting to coding and designing. My mom says she experiences flow when she mows the lawn...but she's weird.

With Stemlet, I'm trying to get the reader and writer into that state. I want them totally focused on what their doing. And one way to do that is to eliminate distraction. To do that, I'm trying to create a totally seamless UX.

For example, if you were to edit a page on Wikipedia this is what you'd get:



That's horrifying.

Not only is it intimidating (and I code for a living), but you spend a lot of time just trying to find the spot you want to edit. Then you have to preview. And forget about the average reader trying to correct any markup issues.

The editor is one of the barriers I feel is preventing more people from being involved in Wikipedia.

The Tech

Using MaterializeCSS and heavy use of jQuery UI's powerful .switchClass method, I think I'm getting pretty close to a UI-less interface. Enter moves you forward, Esc moves you back (in the video I use the mouse, but that's just to show you the cool waves effect I can't get over).

One of the tricks I'm using to get a Google-like interface is to make use of keystrokes people use anyways. I do this with Mousetrap.js, which is very easy to use. For example to bind to the ESC key, you simply do:

Mousetrap.bind('esc', function(ev){
    // Do stuff
    // `ev` is the event object. console.log() it to see what else you can do
})

Use + for combos, like: .bind('shift+enter'), or spaces for chaining, like .bind('up up down down left right left right b a b a enter'). You can even combine combo's and chains to create all sorts of shortcuts. And since they're human-readable strings, you can easily make them user-definable.

It's also important to focus elements for the user. For example, in the video above after clicking the "Create Page" button the user will want to edit the content. So, to save them a step I simply $.focus() the element for them. It's a minor subtly, but it let's users type almost continuously from the moment then land on the homepage!

Next Up

I spent the last three days recoding the project to be modular (I was using lots of jQuery bindings) and re-planning. For now, I'm only going to focus on the Wiki features.

Next up will be making the project live! While I plan on adding in browser Virtual/Augmented Reality to wiki articles, it's not necessary to have people actually start using it (you can read a little about Minimum Viable Products from Alex Walker's post)

Milestones to Beta Launch               | Goal  | Done  |
----------------------------------------+-------+-------+
Project start date                      : ----  : 2/27  :
Basic wiki                              : 3/8   :       :
Social embeds and discussion            : 3/11  :       :
Barcode Scanner                         : 3/13  :       :
Augmented Reality                       : 3/21  :       :
Speech recognition/dictation            : 3/29  :       :
Launch                                  : 3/31  :       :

#6

I just want to say, I'm really enjoying this series. Please keep it up.


#7

Oh hell no I'm not stopping this train. Had a bunch of life stuff to deal with the last few days, but I should have a live link in 2 days finally.

Thanks for the encouragement!!


#8

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 @Pullo 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 stuck_out_tongue

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 smile


#9

I must say I'm impressed. Stemlet sounds fascinating, especially the AR component. I've been wanting to work with AR for awhile now, I think it has tremendous untapped potential.


#10


Real pixels video: https://twitter.com/Stemlet/status/579791663398301696

I'm going to experiment with shorter, slightly more frequent posts (2-3x a week) vs these weekly marathon posts I have to mentally and physically prepare myself for stuck_out_tongue

Just wanted to update on the super smooth animations I've got going. I can definitely see this new direction (auto building an encyclopedia based on what you read) as being able compliment or even replace Wikipedia.


Thanks @estebanrules ! Actually AR is one of the main drives...I have this image in my head of being able to "visit" places or "see" animals on your desk instead of just reading about them. I think it would be a very powerful way to learn.


#11

Beta!

http://stemlet.com

The new vision for the project will be in organizing the web into stacks of index cards: a Tinder for news.

Stacks will (eventually stuck_out_tongue ) contain the text cards you see now, image cards (for getting inspiration from sites like Dribbble or Instagram), video cards, and experimental augmented reality cards (I'm super psyched about this).

I still want to curate information like the original Wiki plan, but by gathering content up into stacks of cards I think I can go about it differently!


The [new] roadmap

I'm pouring everything I've got into the project now and will be moving at a pretty epic pace. If you're thinking of starting a project and haven't read about the Lean Startup method, you definitely should. This is a pretty awesome case study/introduction:

Obviously, I'm terrible at longterm planning (which is bad since technically this has all been short term lol), so instead I'll plan a single feature and then do follow up posts off that.

Next Feature: Feed Finder

You can already create custom decks (w/o a membership, it just stores it in LocalStorage), but it's a nasty process of having to copy/paste feed URLs. I ran across this awesome RSS Search Engine, and thought it would be great to build custom stacks based on keywords instead of specific sites.

Fortunately, the Google API I've been using already does that! With jQuery, it can be done in a single line of code:

$.getJSON('https://ajax.googleapis.com/ajax/services/feed/find?v=1.0&q='+keyword, callback)

That'll return a list of feeds matching the keyword. Simple!


Thanks again everyone for reading and for the support. I'm using my Twitter account to document the project and startup lifestyle so definitely check it that sounds cool: https://twitter.com/@stemlet



#12

Another Pivot

Demo: http://stemlet.com/feed/20/

I wanted to take my devlog to a fierce, new level of OCD but I didn't want to flood this thread. So I've been typing away on a "startup wiki": http://wiki.stemlet.com It's pretty boring, but that's sort of the point. I've been keeping a daily devlog with reports and a daily "reflections" section.


Same goal, new implementation

I validated that cards on desktops aren't cool. Instead I've pivoted from a card-based interface to a regular list-based one, with heavy inspiration from DuckDuckGo's UI. In fact, the feed so closely resembles a search engine that I'm toying with the idea of letting you monetize your own feeds (by letting you add your own Google AdWords etc in the sidebar of your feed).


To help the site grow, I've made the entire site usable without signup. I've even made it possible to fork existing feeds anonymously. An account is only needed for organization purposes (bookmarking, keeping track of your feeds, etc) though I'm working on an adding an opt-in LocalStorage solution.

The Tech

It's all running on WordPress. Each feed you create is represented by a single post, and each fork becomes a new post of that post. This let's me do an inexpensive get_ancestors() to trace fork histories.

Kindle, for the Web

By next weekend I should have the full suite of Kindle Reader annotation tools on Stemlet. This will let you annotate your curated content. The goal is to let you read the web exactly how you would with a Kindle.

Oh! I'm going to start logging expense reports on here next week too. That'll be interesting lol


Feedback

I'd love to get any feedback on how you like Stemlet so far as a news reader (remember, you don't need an account to create feeds...or anything else!). Also, any response on the following will definitely help me determine my next steps:

  • Is highlighting content and taking notes on the web important to you?
  • Is seeing what others are highlighting important?
  • Would you enjoy social reading? In other words, would you enjoy reading what your friends or favorite celebrities are [publicly] bookmarking/highlighting?

Feel free to PM me your responses if you prefer not to share!

Edit: Posting this and realizing I forgot to upload the changes


#13

It's very interesting and I like the UI but I am curious as to how it's going to:

1: cover its costs

and

2: make money

if it's totally ad-free and allows users to access anything without some form of premium level account.


#14

Great questions!

It's ad-free now but that's only because integrating an ad service would take time and it adds another layer of maintenance. Since I'm the only one, I need to focus my time on figuring out what people need so that I can grow my userbase - because to generate sustainable revenue from ads alone you need [really] high numbers (which I don't have).

(numbers over a 6 day period)


1: cover its costs
Basically, these last few weeks have all been about trying to find a problem I can generate real revenue from - not actually generating it. So I didn't have a solid plan.

I do now though.

I'm just finishing up the latest version which I'll launch and write about tomorrow, which has finally raised serious investor interest. I'll go into detail about how I'll make money then (and what the costs will be), but basically it'll be through ads, affiliate programs, and API's.

2: make money
I'm not doing the premium account thing because I want to grab all of my competitors users. Every. Single. One. If you look at what my top commercial competitors are (Feedly and Newsblur), there's actually no real benefit to the average individual for a pro account.

In the case of Feedly, you're paying for access to lots of features, but only really using 1 or 2 (if that). In the case of Newsblur, they put limits on how much you can read (even with pro). Neither of them do any real marketing - Feedly just happened to be the best alternative when Google Reader was discontinued, but it doesn't mean they're the best.

My strategy is to offer everything for free and monetize through other means (mostly ads, affiliates, and API's).


Sorry about the length, those were great questions.


#15

Thanks for the detailed reply, will continue to watch with interest.


#16

I second that!

Traditional market research generally discovers what people say they will do, the lean startup methodology evolves your idea to fit with what people actually are doing.


#18