Behold sm8

sm8 is microblogging, social-networking service that allows users to shere content, vote and comment them to determine its position in popularity ranking. Entries itself are organized by hashtags. (sm8 is by the way a catchy pun for "soulmate" since it's social-network app)

---

Technology abstract

- Backend - [django 1.6] - [django-rest-framework] - [django-pipeline] improved by [django-pipeline-eco] - [django-recaptcha] - [django-south] - [celery] - [memcached] - [pillow] - [opengraph] - python, virtualenv, git... (doh!) - Frontend - [backbone] enhanced by [backbone.paginator 2.0] - [bootstrap] - [coffeescript] - [sass] - [eco] - [moment.js] - [font-awesome] - [jquery] - [underscore] - [Google Fonts API]

Features showcase

- 100% SPA - RESTful API - responsive design - automatic URLs detection for asynchronous [opengraph] preview generation with [celery] tasks - popular recent discussions - cached by [memcached] - full featured minification for js, css and html (yes, html is also minified) - support for static pages - reCAPTCHA protected users registration - configurable profile fields, avatars and timeline background photo - browsable user profiles - posting, commenting, voting - browsable hashtags - pagination via [backbone.paginator 2.0]

##Concept overview##

html core

Application document structure is intended to be as tiny as possible and contain only necessary core, identical for all paths: ```html <title></title>

<script type="application/javascript" src="/static/all.js" charset="utf-8"></script> ``` All required style-sheets and scripts are glued together, minified and loaded in separate calls or grabbed from browser cache if it's possible. Data is not prefetched to allow further varnish-like caching. The above html code afterwards is minified with MinifyHTMLMiddleware hence it looks as follows: ```html <title></title>

<script type="application/javascript" src="/static/js/all.js" charset="utf-8"></script> ```

Design

Application design is inspired by Windows Phone metro style. Design itself contains absolutely no images (except for avatars and images posted by users obviously) it's built on pure sass style rules and [font-awesome] glyphs therefore it's super-lightweight and flexible.

[click for larger preview]

Full responsiveness and user friendliness comes from [bootstrap]:

[click for larger preview]

Code

Since both [backbone] and [coffeescript] are designed by the same person - Jeremy Ashkenas, their combination in same application turns out to be extraordinarily productive and incredibly readable: ```coffeescript class sm8.views.Post extends Backbone.View tagName: "div" template: JST['static/eco/post'] disabled: false

events:
    "click .reply": "show_reply_form"
    "submit .reply_form": "send_reply"

render: ->
    @$el.html @template @model.toJSON()
    for comment in @model.get('comments') or [] by -1
        comment.parent or = this
        view = new sm8.views.Post model: comment

To spread coffeescript presence, *embedded coffeescript* also known as [eco] was chosen as templating language:
```html
<h4 class="media-heading"><i class="fa fa-user"></i> <a href="/user/<%= @user.username %>/"><%= @user.username %></a> </h4>
<i class="fa fa-calendar"></i> <%= moment(@pub_date).fromNow() %>
<% if @opengraph: %>
    <div class="og">
        <% if @opengraph.image: %>
            <a href="<%= @opengraph.url %>" target="_blank"><img src="<%= @opengraph.image %>" class="og-img"></a>
        <% else if @opengraph.video: %>
            <iframe width="560" height="315" src="<%= @opengraph.video %>" frameborder="0" allowfullscreen></iframe>
        <% end %>
        <h4><a href="<%= @opengraph.url %>" target="_blank"><%= @opengraph.title %></a></h4>
        <p><%= @opengraph.description %></p>
        <p class="site-title"><%= @opengraph.site_name %></p>
    </div>
<% end %>
<p><%= @safe insert_hashtag_hrefs insert_http_hrefs @content %></p>
<div class="footer">
    <% if not @parent: %>
        <div><span class="clickable reply"><i class="fa fa-reply"></i> Reply</span></div>
    <% end %>
    <div><span class="clickable vote-<%= @id %>"><i class="fa fa-thumbs-o-up"></i>x<%= @likes.length %> votes</span></div>
    <% if @comments?.length: %>
        <div><i class="fa fa-comments-o"></i>x<span><%= @comments.length %> comments</span></div>
    <% end %>
</div>

Installation

1. clone repository: ```git clone https://github.com/andrzejkrecicki/sm8.git```

2. install requirements: pip install -r requirements/common.txt

3. make sure you have some message broker already running

4. install coffeescript 1.7.1

License

MIT License