About Stack Overflow

  • Zero barriers to entry
  • Reward good content by putting the best answers first
  • Give people karma
  • Destroy Experts' Exchange and answers behind a paywall
  • Incredibly active, has sister sites superuser, serverfault - people collaboratively build great answers to pressing questions
  • Spawning clones - can license software behind Stack Overflow
  • "I could do that" tinyurl.com/bitquabit-so, tinyurl.com/mythical-weekend - this ignores how much "soft work" went into it, how the community would work, etc.
  • 24 hours of actual site-building behind this

Behind the site

  • You've got questions, people have answers, people can vote up/down, people can favorite, community moderation, collaborative editing - every question/answer can turn into a wiki page so people can edit/improve/tweak/correct content
  • Lots of views of content - tagging, rich user profiles, badges, "karma crap" to get people hooked on contributing
  • Mapping out architecture of site and how things are presented:
    • Current active list of questions - shows you votes, answers, how many views, tags
    • Can sort by "karma bounty" (give up 100 points of my karma to person with best answer)
    • Can sort by hot questions, current week, current month
    • Newest, featured, highest vote-earning
    • Tag cloud view of entire site
    • View of all users and activity level
    • Badges: all the different awards people have earned
    • View of unanswered questions
  • "Ask a question" form
  • Moderation tools - editing and flagging, and post an answer right below the question
  • A lot of rich functionality, but totally dedicated to its core goal of Q&A

Drupal version

  • www.array-shift.com
  • Can flag taxonomy tags that are interesting, and just see related questions
  • Node add form: done some work to streamline
  • BU Editor plugin - not WYSIWYG, but a tag helper - it puts the tags there, provides buttons
  • Uses markdown, not HTML
  • Markdown module in Drupal just provides an input filter
  • BU Editor plugin, Markdown manager, Markdown = rough analog to Stack Overflow
  • New module "Active Tags" - lets you accumulate tags as little flagged items rather than having them be in a list; just click a little X and it goes away - pure client-side stuff, nicer way of presenting the tag lists
  • Turned it on, added some extra CSS to put nice boxes around it, that's it
  • "Wikify" module lets you invert normal node access - like "Private" (checkbox for 'only people in specific codes can see this'), "Wikify" has the same thing, but the checkbox is for editing
  • "Flag" module used for star, "user points" module awards karma points when something is starred
  • (array-shift.com has major CSS problems in Safari)
  • 100 lines of code that intercept Drupal events and ward karma; could use "rules" module but it was easier to just do what I needed for this exercise
  • "user points" automatically assigns roles when people pass karma thresholds
  • "flag" is a "flag" module ... flag that lets you set up arbitrary toggle-able flags for things, even supports "when more than 10 people flag something, do X"
  • Flagging something as offensive takes karma away (that's why there's a confirmation page to avoid mistakes), 10 offensive flags unpublish questions
  • Module called "flag term" - taxonomy terms, that's how you track topics you care about
  • Pure theming differentiates word "flag" and image of a star
  • List of answers uses "node comments" module - stands in for built-in comments, has a content type "comment"
  • Can have a view that shows the comments, where the arrangement is based on the rating
  • Comments on comments wasn't implemented (Stack Overflow has in-line meta-discussion, we didn't have time to do this)
  • Node Comment lets you use normal Drupal comments on things too
  • User badges module exists for Drupal, but doesn't have enough API support to configure without a lot of work (Anyone want to rewrite User Badges from scratch?)
  • Tabs for "newest", "hot", "etc" - each of these is a display on one view, set up with tabs
  • Tags view is a view of taxonomy tags - sort by popularity/name
  • Users - uses Gravatar module to pull in global avatar; set up user pictures like normal for Drupal, but Gravatar sits in the middle; generates unique geometric icons if you don't specify your own picture
  • "Type to find users" - exposed filter
  • Node Form Settings module - lets you do things like hide the revisions field, hide name of the title - exercise control over chunks of the node form
  • Similar By Terms module used for "similar questions" - other questions tagged with the same tags

Stepping back for a moment...

  • This thing has Q&A, voting (vote up/down module), karma (user points module), moderation (simple tools for flagging), ability to track interesting taxonomy terms (flag module), community editing (wikify - people with permissions can say "this is an article everyone should update to consolidate discussion"), a bunch of views that slice and dice content
  • Drupal didn't need a lot to do that basic functionality
  • What it doesn't have: meta-comments (this could be done, just didn't have time), in-line editing and AJAXy goodness (when you hit "edit", you go to the Drupal edit page; in Stack Overflow the body turns editable), karma bounties (could be written), user badges/awards (user badges module is pretty rough, doesn't work so well beyond use case), user profiles are unthemed (Stack Overflow can pull in OpenID profiles, what you've voted on, chart of karma history, etc - there's tools for each of that; user points history module that will generate chart; views attach module - stack views onto user profile)
  • Lots of polish isn't there
  • Queued messages - if you're not on the site when you've earned a new badge, it'll prepare a message for you when you come back (maybe Activity module?)
  • TOTALLY missing: performance tuning, no community around it (Stack Overflow has a great community - that's just as much work, and you can't install it)
  • Doesn't have a theme that can be distributed. Ever.

Under the hood

  • 20 contrib modules, 2 custom modules (one is just exported flags/views), 1 theme, lots of config work
  • 6 views with sub-tabs
  • 5 flags (just set up in flag modules user interface: favorite, wikify, offensive, interesting/ignored for taxonomy terms)
  • 3 behaviors: posting/editing, evaluating, filtering, suite of modules - vote up/down, voting API, user points; active tags, BU editor, markdown, markdown editor, node form settings
  • Did not theme node form - CSS + those modules
  • pathauto, token - clean URLS
  • CCK isn't even installed
  • 2 custom modules: export (held exported versions of those views and flags), tweaks (intercepting voting API/posting hooks to give karma)- could've used Rules module to do this
  • Theme has page templates
  • Views have unformatted view, row-style template (has title, number of votes, times node has been viewed, listing of tags) - give me an array, I'll write markup
  • Theming views was easy
  • Custom node templates for question and answer nodes to position things correctly
  • Flag module templates used to override things and get the little star
  • Pre-process hooks to pull in user karma points, but no crazy theming hacks
  • 30 lines of PHP in a template file
  • No overridden theme functions (user name, breadcrumbs, none of that)
  • Extra credit: just learned about a module called "inline registration" - if user is anonymous, can enter desired username and e-mail at the top of the node form; when they submit, it'll create user account, node, and assign node to user account in one step
  • Live preview of node editing can be done with "Live" module (used at groups.drupal.org)
  • blittr vs arrayshift
    • Analysis and evaluation of what the sites do, and what modules there are - spent more time on Array Shift doing that evaluation, bigger site, more ways of looking at that data than what Twitter provides
    • 10 hours on that stuff
    • Configuring the site - about 4 hours of going through and clicking on stuff in Twitter site, 3 hours for Array Shift
    • After analyzing what Stack Overflow looks like, how it works - implementing it in Drupal with user points, flags, views was pretty straightforward
    • Building the views took less time than doing it for the Twitter module - very clean mapping between the tabs and what they connect to
    • UX mapped itself well to building some views
    • Time for the more complex parts (custom code) kept going up for Twitter clone (7-ish hours) - kept going down for Stack Overflow (2 hours)
    • Theming - tricky any way you look at it; 9-ish hours for Twitter, 13-ish for Stack Overflow
    • Translating the info Drupal provides into the right markup for the theme
    • This time is based on starting from a design in HTML + CSS (coming up with an idea would take a lot longer)
  • "Magic" category - took 11+ hours, creating the whole install profile
  • Install profiles - use Aegir to install a copy of this on a sub-domain
  • Writing the install profile took as long as writing the theme - now can spawn infinite copies of this website
  • drupal.org/project/arrayshift - last pieces will be in place soon
  • BUT there will not be a pretty theme with it