The past two weeks I’ve been doing lots of pitching and am reminded just how important the question “what makes you unique?” is so important. If you’re answer is not a narrative about how you’re 10 times better than anything else the world has to solve a problem you will lose.
Incremental Improvements vs 10x Game Changers
When I was in DC last week I had a chance to see Dan Yates from opower present. He talked about the power of incremental improvements and how in the macro world they can represent a huge opportunity. For opower that means reducing power consumption for it’s clients (power companies) by 6%. Very different than a clean tech startup that is trying to replace power plants with solar/wind/whatever. That small change, in aggregate, is a huge improvement and they are able to capture some of the value they are creating (profit).
Then there are consumer web startups where an incremental improvement of 6% over anything is laughable. Imagine someone pitched their startup to you as “I’ve built a product that’s 6% better than Twitter.” You just can’t get excited about an incremental improvement when the web is this crowded. In one of Peter Thiel’s class note essays (go read all of them), Peter talks about dominating markets and becoming the last mover. Competition leads to incremental improvements. Domination comes from 10x game changers.
Don’t Compete, Dominate
There are plenty examples of incremental improvements leading to big impacts (Edison’s light bulb is an incremental improvement over what existed), but in the crowded world of web startups I feel that incremental won’t cut it. If you want to dominate you need to be a 10x improvement. Obviously if you’re not solving the right problem you can be 10x improvement on something no one cares about, so keep that in mind too. The point is to dominate not compete.
Lean Startups and Domination
I’m beginning to see how lean startup tactics are indoctrinating us towards incremental improvements. Maybe you have a big idea and vision of how you will change the world. You dissolve that into a testable series of assumptions and set off to prove it. As you go along and test, speak with people, and iterate you increment. You hone in on the actual problem and optimize different parts of your funnel. However, it’s too easy to fall in love with the tests, data, and incremental improvements. Sometimes the best edit is a rewrite (I think PG said that). Sometimes your pivot is just an incremental improvement. We need to think less about optimization and more about domination. You improved your signup conversion rate by 5%? Cool, but you still only have 100 users because no one cares, you’re not can’t miss, not novel, not 10x, just noise.
Where do we go from here
Maybe it’s time we start thinking about intelligent design rather than evolution (not in the education/political sense). If we start thinking about domination from day 1, how does that change our approach to product and distribution? There’s the danger of solving the wrong problem, but there’s also the problem of not solving the problem hard enough. I already know how to optimize, but I don’t know how to dominate. I’m going to work on that.
I recently had to submit an app with two Open Graph actions to Facebook for their blessing. It’s a clunky process where you need to have it fully working on externally available server (in my case a dev server), post the action to your account successfully, then tell them how to test it so that it meets their guidelines. Turn around time was about 2 days.
And then they rejected an action
I recently did a deeper integration with Facebook for Edorati to bring some social reader functionality so you can follow what your friends are reading more easily. One of the actions was approved right away, but the “read” action was rejected. OMG wut? It’s so far within their guidelines I could puke and it would still be kosher.
After thinking it through, I decided that my integration was flawless (I’m not actually as cocky as my writing presumes) and within guidelines. I resubmitted the same thing, no code changes, nothing. All I did was update my instructions for them to test it to specifically hit every point in their guidelines and it was approved.
Lesson
Avoid wasting time with the approval process by being very specific about your test case when submitting your app. Clearly hit on points such as global settings to turn the action on or off, per item control of the action (in my case, that’s a button for sharing an article on the article detail page), why it’s relevant to other people, and make your test case super easy to follow. Oh, it also helps if your code actually works ;-)
Here’s the Edorati submission (sanitized):
Log in to DEV_URL with username: USERNAME, password: PASSWORD. Go to ARTICLE_PAGE and click the “mark as read” button. This will perform the “read” Facebook open graph action. Clicking the button again will delete the post. Go to SETTINGS_PAGE to toggle the “read” action globally on or off. The read action is performed when a user reads an article which is a strong indicator that this is a relevant article that other people will want to read in their network. There is global control for this action as well as per article with the Mark as Read/Unread button on the article detail page.
In the last two parts of this series we learned about the framework for building bookmarklets and how to use javascript with django templates for optimal maintainability. Now let’s look at how to make interactions work without needing any external javascript libraries.
Why not include Jquery
My guess is that all you really want are event bindings and for that you don’t need an entire library. Granted, lots of user’s have jquery cached in their browser already, but if not you have to include that which will make your bookmarklet slower. Every library you add will add more “weight” to the overall bookmarklet. Read the next paragraph before you decide you need the whole jquery library or you can make do with 6 lines of pure javascript.
Binding Events to Handlers
So you want to be fancy and make the bookmarklet change when the user clicks on something? Tough shit. Just kidding. The problem with event handling is that making it work cross-browser is tough. Jquery helps make writing js more cross-browser compatible and that’s a huge part of it’s overall value.
Here’s how we can add event handlers that will work across all browsers without Jquery. I can’t find where I originally found this from, but when I do I’ll add an attribution link.
var bindEvent = function(elem, evt, cb) {
//see if the addEventListener function exists on the element
if ( elem.addEventListener ) {
elem.addEventListener(evt,cb,false);
//if addEventListener is not present, see if this is an IE browser
} else if ( elem.attachEvent ) {
//prefix the event type with "on"
elem.attachEvent('on' + evt, function(){
//use call to simulate addEventListener
cb.call(event.srcElement,event);
});
}
};
Now we have a simple way to make interactions happen within the bookmarklet itself. For example:
// Remove the bookmarklet from the document assuming b is body and c is the bookmarklet
var cancelDialog = function(e){
b.removeChild(c);
};
bindEvent(cancelButton,"click", function(e){
cancelDialog(this);
});
All that without including the whole jquery library! That will keep your bookmarklet lightweight and fast.
Submitting a Form
Using our event binding snippet above we can create a simple handler for submitting a form free from cross-domain errors. Those of you familiar with jsonp will see that this is very similar, but done manually and in a simpler way.
// Assuming we have the following in the script
var d=document,
s=d.createElement("scr"+"ipt");
b.appendChild(s);
// Bind a submit event to a button click
var submitArticle = function(e){
// get the values of any form data you need
// URI encode the variables as GET parameters
s.src = "http://www.urltoyourservice.com?var1=" + encodeURIComponent(variable1) + "&var2=" + encodeURIComponent(variable2);
};
bindEvent(submitButton,"click", function(e){
submitArticle(this);
});
This will make a GET request to your your server with the parameters of your form. We can now process that request and return a response just like we did to initialize the bookmarklet in the first place. All we need to do is respond back with javascript. You can do this numerous times. All your doing is manipulating the bookmarklet that is already a part of the document. Make sure that you clean up after yourself (see my earlier example of binding a cancel button to removing the bookmarklet from the document).
There you have it. An interactive bookmarklet that’s fast, maintainable, and lightweight. You can make changes to it at any time since the initialization happens server-side with familiar templates. You can make cross-domain requests without any errors. You can even bind events and handle them all without needing Jquery.
Enjoy!
Let’s talk about how to generate a bookmarklet using server-side templating and pure javascript (no libraries!). In part 1 we discussed the basic framework for making a bookmarklet and performing requests directly from the client’s page. Now we’ll see how to set up the foundation for a bookmarklet UI and make it look good.
Building a Bookmarklet Template in Django
Let’s create a file called bookmarklet.js. In it we are going to add a self executing piece of javascript and leverage django templates to fill in the information we need. In here we are going to build the response using nothing but javascript and send it back to the user who requested the bookmarklet (remember all they did was request it to be initialized, see part 1 for more info). With django templates we can do some pretty handy things so that you don’t need to manually write out the template as a string in javascript. For example:
javascript:(function(){
var d=document,
{% comment %}Create the elements we need {% endcomment %}
c=d.createElement("div"),
b=d.body,
l=d.location;
{% comment %} server_scheme_and_netlog is my own tag which returns the base url of the website{% endcomment %}
c.id="bookmarkletArticleAlertBox";
{% comment %}This is where django templates get's awesome{% endcomment %}
{% comment %}Make sure the html rendered has no breaks{% endcomment %}
c.innerHTML = '{% spaceless %}{% include "bookmarklet_body.html" %}{% endspaceless %}';
{% comment %}Add the elements to the dom{% endcomment %}
b.appendChild(t);
b.appendChild(c);
....snip....
What we did was construct a div that will hold our bookmarklet UI and using django templates (the {%include … %} part) we can template the html easily, inheriting the context of this view. Please make sure to add the “spaceless” tags here because the innerHTML will fail if there are line breaks and I’ll be damned if I have to add linebreaks to my template. Also be extremely picky with your quotes as that can also lead to disaster.
Now in our “bookmarklet_body.html” we can create our UI just as if it were any other django template (almost). For example:
{% load static %}
{% load url_tags %}
{% comment %}NOTE Make sure you ONLY use double quotes!{% endcomment %}
<div id="bookmarkletAssistant">
<img src="{% server_scheme_and_netloc %}{% get_static_prefix %}images/assistant.png" style="border: 2px solid #666666;"/><br/>
<img id="bookmarkletLoadingImage" src="{% server_scheme_and_netloc %}{% get_static_prefix %}images/bookmarklet-ajax-loader.gif" style="display:none;"/>
</div>
<div id="bookmarkletResponse">
<p>Hey Chief, almost ready!</p>
<div id="bookmarkletPictureSelector">
<p>
<label>Select Picture:</label><br/>
<div id="bookmarkletImageContainer">
<img id="bookmarkletCurrentImage" />
<a id="bookmarkletSelectPrev">«</a><a id="bookmarkletSelectNext" >»</a>
</div>
</p>
</div>
<p id="bookmarkletImageCheckboxContainer"><input id="bookmarkletImageCheckbox" type="checkbox" style="margin-right: 5px;" />
<label>No Picture</label></p>
<p>
<label>Editor’s Note:</label><br/>
<textarea id="bookmarkletTextArea" placeholder="Add your commentary on the article here. (optional)"></textarea>
</p>
<input id="bookmarkletSubmit" type="submit" value="Publish Article" />
<a id="bookmarkletCancel">Cancel</a>
</div>
Notice how all the elements are contained within elements with IDs. This is extremely important so you can clean up after yourself and not pollute the dom. You will also need to do this so that subsequent interactions can find your bookmarklet and update the contents. BTW this is exactly what is used in Edorati.
Make sure that you have a view set up so that you know it is from your bookmarklet and can respond with your javascript template. When the user initializes the bookmarklet (see part 1 for reference) they will be requesting a url that you control. All you need to do is map that url to a view function and do the following:
variables = {'some_var': 'blah blah'}
resp = render_to_string('bookmarklet.js', variables)
return HttpResponse(resp, mimetype="text/javascript")
This will make sure we are responding with javascript and not html. The javascript will be executed as soon as it is received by the user. It’s actually very fast and should feel close to instantaneous.
Making it Look Pretty
Plain unstyled html would be a terrible idea for a bookmarklet. Keep in mind that you are injecting onto another page where their stylesheet is unknown. That means we need to style and reset the css for the bookmarklet or it will not look consistent across sites. Here’s how:
// in bookmarklet.js
t=d.createElement("link"),
t.rel="stylesheet";
t.media="screen, projections";
t.type="text/css";
t.href="{% server_scheme_and_netloc %}{% get_static_prefix %}stylesheets/bookmarklet.css";
Whoa, dynamically loading css just for our bookmarklet! Nothing fancy going on here, just using plain ol’ css to beautify our bookmarklet. Just make sure that you do not inadvertently style the rest of the elements on the page with your stylesheet. As mentioned before, add an ID for all major elements and when it comes to css, use the ID selector to style the element instead of the element selector or class. If you have to use classes just obfuscate the name so there is little possibility of you impacting the page i.e bookmarklet-textarea-field vs. textarea.
Next Week
Next week we’ll go over how to make the bookmarklet come alive with interaction through event binding and requests using about 15 lines of pure javascript and no libraries.
It’s not immediately obvious how to add a UUID field to an existing Django model. Let’s say you have a database with some data in it about certain accounts, but you realize you need a way of obfuscating the pk of a model instance. UUID is a perfect candidate and a pretty popular implementation for Django comes from dcramer called django-uuidfield. Everything is fine and dandy until you try to add that field to an existing model that already has data, then try to auto migrate it using south.
How to add a UUID field to an existing model
The problem here is that we need to add a UUID value to all existing records, not just new ones. Peaking through the source code you will see what uuid method they are using and what the data should look like.
# You'll need to import the following
import uuid
# At the end of the forwards() function add the following
def forwards(self, orm):
...
for a in MyModel.objects.all():
a.uuid = u'' + str(uuid.uuid1().hex)
a.save()
That will loop through all the existing instances of that model in your database and add a uuid to it as part of the migration. Make sure you test it first!
Here’s how to put together a non-trivial interactive bookmarklet. For some reason there are not too many resources on the subject, but it has become a much more popular way of user’s interacting with a service without having to be on the site. Pinterest, Evernote, etc. all rely heavily on the ease of use of bookmarklets.
For Edorati, I needed to create a simple, fast way for user’s to publish an article to their online newspaper whenever they came across something they liked. It also had to look nice and allow them to select a picture thumbnail and add an editor’s note. Oh yeah it also needs to be upgradeable from the server side so that the user doesn’t have to reinstall it every time you want to add something new.
Why is it so hard?
Bookmarklets are especially hard for a couple reasons:
What’s the plan?
I ended up building a simple framework for bookmarklets and that uses django to process the request, handle errors, and provide responses. The bookmarklet is actually just a small piece of javascript code that gets executed as soon as it is clicked. It will tell my server that it’s ready to be initialized for a particular user. Then the server will make a response with ONLY javascript that is contained in a self executing function which will manipulate the target page the user is on. From there any interactions are a matter of building a request on the client side or returning a javascript response from the server-side. Sound simple? Not really…
How do I make cross-browser requests, do I use Jquery?
No Jquery! We’re going to avoid all libraries and roll our own. Adding big libraries will make your bookmarklet slow and you probably only need a couple of things from it. All we need in this case is a small workaround to make cross-browser requests right from the user’s page. This is the pattern:
javascript:(function(){
var d=document,
// Create a script element
s=d.createElement("scr"+"ipt"),
// Set the src to an endpoint on your server
s.src = "http://www.urltoyourapi.com/?param1=something¶m2=somethingelse";
})()
Now your server can respond with javascript to fill in that script element that was just created on the user’s page. By adding some GET parameters to the end of the URL you also have a way of communicating information about the user or the page. For example you may want to construct the url in a way that it passes the users obfuscated ID number so you can save information to that user’s account. This is all a bookmarklet is.
Making it future proof
To prevent your users from having to install the bookmarklet every time you want to make a change, you should not include any presentation or interactive logic in the bookmarklet. For Edorati, all I need to know from the bookmarklet is who is the user. All the bookmarklet needs to do is essentially tell the server that it wants to be initialized. Everything else should happen on the server side. That way you can make any changes you want to the look or the functionality without ever having to change the user’s bookmarklet that they installed.
Next post will discuss constructing templated javascript on the server side to make a bookmarklet interactive, clean, and safe…
Here’s a quick and dirty way to add fields to a serializer. I wanted to add in the absolute url to the json data that was being sent back during an ajax request. I wouldn’t recommend it for large querysets since you are essentially adding a json load and another dump, but for a single model instance I think it’s ok. The alternative would be to use a library like wadofstuff-django-serializer, but I really want to avoid a dependency for just a single purpose.
import simplejson as json from django.core import serialize
# Somewhere in your view
# Note that I'm only serializing a single instance hence the tup
resp = serializers.serialize("json", (article,))
# Add absolute url to resp_obj = json.loads(resp) resp_obj[0]['fields']['get_absolute_url'] = article.get_absolute_url() r = json.dumps(resp_obj) # Then respond back as usual with your updated json object
His content is friggin awesome. I’m hooked.
Alex Kehayias is MVP’ing a newspaper app. I’m curating a paper called Future Prototype, which is a collection of articles new and old which point towards our cyberpunk future.
(Source: ccarella)
I wrote a simple reusable app for doing cohort analysis in Django. Cohort analysis is an incredible tool for deflating your ego. Since it compares apples to apples you will see if you are actually helping, hurting or, more than likely, making no impact at all on your users with the iterations you’ve been making on you’re awesome web app.
What is Cohort Analysis?
Cohort analysis involves segmenting your users into smaller groups so you can compare measurements on them. For example, a cohort could be the user’s that signed up for your app in a week. So all the people that joined last week is a group, everyone who joined two weeks ago are in a group, etc. Now we can analyze actions that the cohort has taken in relation to the week they joined. For example “Users who joined the week of 2/1 performed 10% more action x in their first week than the users who joined in 1/25.” You can then think about the changes you made and correlate it back to the results. This prevents things like traffic spikes or that PR you did from messing up your numbers. You’ll be able to see over time if you are actually getting any better rather than looking at aggregate statistics of the activity of all your users. If you try hard enough with any aggregate stat you can make it look like a hockey stick. But that’s bullshit because you have no idea if the changes you made are the cause of that improvement when you look in the aggregate.
Cohort Analysis in Django
So how do we do this in django? I wrote a very simple, reausable app called django-cohorts. The objective is to set up a simple framework for running cohort analysis defined by the segments (cohorts) you want and the metrics you want in a dashboard that lives in the admin section. It’s raw right now, but it’s a start.
How does it work?
I’ve done the base cohorts by week, which is pretty common, but you can override that. In metrics.py, create a class with functions that will return a percentage. It will send you the users and you do some db lookup for certain actions the user took. After you’ve hooked it up to your url conf, you can then see the analysis with a dropdown of the metrics that are available.
Looking for Contributors
If anyone wants to help make this more sophisticated please let me know. Feel free to fork it on GitHub.
A Note about Cohort Analysis
Since cohort analysis typically looks at usage over time, you need to have some data for it to be useful. You can’t identify patterns that are significant without at least a few weeks of data. Just saying.
As you may know, I rode the NYC StartupBus last year with a kickass crew of hackers, designers, and hustlers. The Red Bull was plentiful, the sleep was not. I can say without a doubt that the StartupBus had a bigger impact on me than any single tech-related event.
My Story
Things had been going pretty slow at BeanSprout and I have a regular impulse to do ridiculous things that involve transportation vehicles and technology. I met with Justin, who was running that years NYC bus, and before you know it I was on a bus bound for SXSW.
I pitched my idea, once on the bus, about creating a cheat sheet for pop culture, originally positioned as “Girlfriend Notes.” Essentially, shit your girlfriend expects you to know (amzingly I don’t have a girlfriend) about that you don’t give a shit about watching/reading i.e. last night’s Glee episode. Somehow I convinced three other people to join me and that’s how Whadimiss (as in “What did I miss?”) was born (we are no longer maintaining it). It evolved into an editorial style daily email that summarized major categories of pop culture in witty, bite sized chunks. I still love the idea, and people found it very entertaining (Charlie Sheen was the pop topic at the time), but automating isn’t possible to do well given the current technology (summarizing large chunks of text using NLP).
The Buspreneurs
It takes a certain kind of person to get on a bus for over 2 days, hack, launch at SXSW and party. I want to be around people like that all day, every day. The crew that was assembled for our bus had the highest quality tech people (by tech I don’t mean coders, just people who are involved in tech) I’ve ever been around. I still keep in touch with the majority of the bus and they’ve helped me along my journey in learning to code. That was the best part of the whole experience. Oh and I drank a lot too at SXSW, in parties that I was never on the list for (thanks Adrianne <3).
Inspiration
I’ve seen some shit on that bus. Market ready websites, mobile apps, a startup getting thrown a check for angel funding, all built in 2 days that destroy 70% of what I’ve seen other people create in months. When you work at the speed of the StartupBus there really is no going back. If things take me more than a week to do in real life, I think back to the bus, ignore the smells, and think about what’s possible when you push it. Life is a hackathon, and if you aint’ hackin’ you ain’t lastin’.