www/index.html

   1 <!DOCTYPE html>
   2 <!-- Blerg is (C) 2011 The Dominion of Awesome, and is distributed under a
   3      BSD-style license.  Please see the COPYING file for details.
   4   -->
   5 <html>
   6 <head>
   7 <title>Blërg!</title>
   8 <link rel="stylesheet" href="css/blerg.css">
   9 <script type="text/javascript" src="js/prototype.js"></script>
  10 <script type="text/javascript" src="js/Bytex64.FX.js"></script>
  11 <script type="text/javascript" src="js/blerg.js"></script>
  12 <script type="text/javascript" src="js/blergmedia.js"></script>
  13 <meta http-equiv="content-type" content="text/html; charset=utf-8">
  14 <meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1.0"/>
  15 </head>
  16 <body onload="init()">
  17
  18 <div id="header">
  19   <div id="siteid">
  20     <img src="images/blerglogo.png" class="logo" width="125" height="122">
  21     <h1><a href="#">Blërg!</a></h1>
  22     <h2><span name="section">Welcome</span></h2>
  23     <div id="usercontrols" style="display:none">
  24       <a href="#" name="user.reflink" onclick="return qlink()">[chatter]</a>
  25       <a href="#" name="user.subscribelink" onclick="subscribe(); return false" style="display: none">[stalk]</a>
  26       <a href="#" name="user.unsubscribelink" onclick="unsubscribe(); return false" style="display: none">[stop stalking]</a>
  27     </div>
  28   </div>
  29   <div id="controls">
  30     <form style="font-size: small" id="login" onsubmit="loginStatus.login($('login.username').value, $('login.password').value); return false">
  31       username: <input type="text" id="login.username" size="10">
  32       password: <input type="password" id="login.password" size="10">
  33       <input type="submit" value="login">
  34       <p style="font-size: large"><a href="#" onclick="$('welcome').hide(); $('items').hide(); $('post').hide(); $('signup').show(); return false;">I want to blërg!</a></p>
  35     </form>
  36     <div id="logout" style="display: none">
  37       Hello, <a href="#" id="userlink" onclick="return qlink()"></a>. <a href="#" onclick="loginStatus.logout(); return false">logout</a><br>
  38       <a href="#" onclick="postPopup(); return false">Write new entry</a><br>
  39       <a href="#" id="reflink" onclick="return qlink()">Chatter about me</a><br>
  40       <a href="#/feed" onclick="return qlink()">Stalk your victims <span id="newFeedMessages"></span></a>
  41     </div>
  42     <div id="rss" style="display:none"><a id="rsslink" href=""><img src="images/rss.png" width="16" height="16"> RSS</a></div>
  43   </div>
  44   <div style="clear:both"></div>
  45   <div id="post" style="display:none">
  46     <h2>What's on your mind?</h2>
  47     <form onsubmit="loginStatus.post($('post.content').value); return false">
  48       <textarea rows="3" id="post.content" onkeydown="resizePostContent()"></textarea>
  49       <div id="post.buttons">
  50         <input type="submit" value="close" onclick="$('post').hide(); return false">
  51         <input type="submit" value="post">
  52       </div>
  53     </form>
  54   </div>
  55 </div>
  56
  57
  58 <div id="main">
  59   <div id="items" style="display:none">
  60   </div>
  61
  62   <div id="welcome" style="display:none">
  63
  64   <div id="latest">
  65     <h2>Latest posts</h2>
  66     <div id="latest-posts"></div>
  67     <h2>Latest tags</h2>
  68     <div id="latest-tags"></div>
  69   </div>
  70
  71   <h2>I am 12 and what is this</h2>
  72
  73   <p>Blërg is a microblogging platform.  Or maybe a miniblogging
  74   platform.  Blërg is not sure.  Blërg is a lot like <a
  75   href="http://twitter.com/">Twitter</a>, but aims to fix some of its
  76   idiosyncracies.  Blërg does not want to be a full blogging platform
  77   like <a href="http://wordpress.com/">Wordpress</a> or <a
  78   href="http://livejournal.com/">Livejournal</a>.  Blërg is also an <a
  79   href="/doc/">open source tagged text database engine</a> written in C
  80   that does the back-end work. Blërg's author finds it entertaining to
  81   anthropomorphize Blërg in the third person.</p>
  82
  83   <h2>But what's wrong with Twitter?</h2>
  84
  85   <p>I'M GLAD YOU ASKED. There are two aspects of Twitter that just bug
  86   me as an engineer:</p>
  87
  88   <ol>
  89   <li><strong>Ruby on Rails</strong> - Using rails to prototype a system is
  90   fine &mdash; scaling up to a million hits a day with it is just a bad
  91   idea. As the service grew, I'm sure it cost them a lot more time than
  92   it saved.</li>
  93   <li><strong>140 characters is not enough</strong> - I routinely write
  94   sentences longer than 140 characters, so I can't even begin to imagine
  95   making a point in such a small space.  This textual confinement has
  96   led to the rise of URL shorteners, which are <a
  97   href="http://bytex64.net/blog/e2256">breaking the internet</a>.
  98   </ol>
  99
 100   <p>Blërg solves these problems by applying absurd reactionary
 101   engineering. Blërg's database backend is a custom C program that
 102   handles requests over HTTP and stores data in a very small and
 103   efficient indexed log-structured database. The frontend is done
 104   entirely in client-side Javascript. A single post can be up to 65535
 105   bytes in length.</p>
 106
 107   <p>Which is not to say that I believe writing your service in C is the
 108   solution to all your problems.  Clearly, this approach has just as
 109   many hairy problems that will bite you in the ass sooner or later.
 110   The best way, as with most things, lies somewhere in the middle of
 111   high-level abstraction and ZOMGHARDCORE OPTIMIZATION.</p>
 112
 113   <h2>Is this a joke?</h2>
 114
 115   <p>Yes. No. Maybe.  Blërg is an exercise in constructive satire &mdash; a
 116   fully functional service created in a fit of hubris to poke fun at Twitter's
 117   engineering.  It's just for fun, but no one is going to keep you from using
 118   it seriously. :]</p>
 119
 120   <h2>Tell me more about this database engine.</h2>
 121
 122   <p>Here, take a look at the <a href="/doc/#design">design docs</a>.</p>
 123
 124   <h2>I'm a social media whore and I want to share links!</h2>
 125
 126   <p>I've created a bookmarklet just for you: <a href="javascript:location.href='http://blerg.dominionofawesome.com/?post/'+encodeURIComponent(document.title)+'/'+encodeURIComponent(location.href)">Blërg it!</a></p>
 127
 128   </div>
 129
 130   <div id="navigation">
 131     <a id="newer_link" href="#" onclick="return qlink()" style="display:none">&lt;&lt; newer</a>
 132     <a id="older_link" href="#" onclick="return qlink()" style="display:none">older &gt;&gt;</a>
 133   </div>
 134
 135   <div id="signup" style="display:none">
 136     <h2>Sign Up</h2>
 137     <table>
 138       <tr><td>Username:</td><td><input type="text" id="signup.username" width="40"></td>
 139       <tr><td>Password:</td><td><input type="password" id="signup.password" width="40"></td>
 140     </table>
 141     <button onclick="signup()">Signup</button> <button onclick="signup_cancel()">Cancel</button>
 142   </div>
 143 </div>
 144
 145 </body>
 146 </html>