Git Product home page Git Product logo

msworddit's Introduction

MSWorddit

MSWorddit was my first Javascript project -- it essentially reskins the homepage of reddit (along with other functionality) into a Microsoft Word interface.

It serves the silly (and not-so-honorable) purpose of disguising reddit browsing during work.

Video

A demo on how to use MSWorddit can be seen here

Challenges

I knew that if this application was going to be popular, I would have no way of sustaining the amount of traffic the reddit community would generate. I needed some kind of way obtaining all the reddit stories directly from the browser in a cross-origin way (aka JSONP). Reddit's API at the time didn't have JSONP support, so I was out of luck doing it the old-fashioned / obvious way.

I realized though that Yahoo's YQL API can serve up the raw DOM tree for any page on the internet. If I could get the raw HTML of the reddit front page, I could extract out the links I needed and build up my own view inside the fake MSWord interface.

Extracting out the relevant information is a bit of a hack unfortunately -- I basically recurse through the provided DOM tree in a semi-intelligent way and aggressively parse out the titles, users, and destination links. I anticipate changes in the HTML by having a few try / catches that will force recursion to another part of the tree. The same method is used for comment pages.

Since the HTML format is subject to change, this method is fairly brittle (it was my first project afterall :D).

Usage

The site still gets around 50,000 unique visitors per month at the time of writing (with ~350k total uniques), so I've left the server running for the time being despite the code not being in the best shape.

Functionality

You can change the subreddit displayed by editing the "font" field to a valid subreddit name and hitting enter. Comments for a post can be viewed by clicking on the link embedded in the filler text, and the document can be turned into (and back from) a text editor by clicking on the formatting buttons. All this functionality is demonstrated in the video as well (linked above).

Reddit Thread

The original reddit thread which got 17,296 upvotes can be viewed here. The puns in this thread are pretty good as well.

msworddit's People

Contributors

pcottle avatar

Stargazers

 avatar

Watchers

James Cloos avatar  avatar  avatar

Forkers

martina6hall

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.