www/index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>Blërg!</title>
   5 <link rel="stylesheet" href="css/blerg.css">
   6 <script type="text/javascript" src="js/prototype.js"></script>
   7 <script type="text/javascript" src="js/blerg.js"></script>
   8 <meta http-equiv="content-type" content="text/html; charset=utf-8">
   9 <meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1.0"/>
  10 </head>
  11 <body onload="init()">
  12
  13 <div id="header">
  14   <div id="siteid">
  15     <img src="/images/blerglogo.png" class="logo" width="125" height="122">
  16     <h1><a href="/">Blërg!</a></h1>
  17     <h2><span name="section">Welcome</span></h2>
  18   </div>
  19   <div id="controls">
  20     <form style="font-size: small" id="login" onsubmit="loginStatus.login($('login.username').value, $('login.password').value); return false">
  21       username: <input type="text" id="login.username" size="10">
  22       password: <input type="password" id="login.password" size="10">
  23       <input type="submit" value="login">
  24       <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>
  25     </form>
  26     <div id="logout" style="display: none">
  27       Hello, <a href="#" id="userlink"></a>. <a href="#" onclick="loginStatus.logout(); return false">logout</a><br>
  28       <a href="#" onclick="postPopup(); return false">Write new entry</a><br>
  29       <a href="#" id="reflink">Chatter about me</a>
  30     </div>
  31     <div id="rss" style="display:none"><a id="rsslink" href=""><img src="/images/rss.png" width="16" height="16"> RSS</a></div>
  32   </div>
  33   <div style="clear:both"></div>
  34   <div id="post" style="display:none">
  35     <h2>What's on your mind?</h2>
  36     <form onsubmit="loginStatus.post($('post.content').value); return false">
  37       <textarea rows="3" id="post.content" onkeydown="resizePostContent()"></textarea>
  38       <div id="post.buttons">
  39         <input type="submit" value="close" onclick="$('post').hide(); return false">
  40         <input type="submit" value="post">
  41       </div>
  42     </form>
  43   </div>
  44 </div>
  45
  46
  47 <div id="main">
  48   <div id="items" style="display:none">
  49   </div>
  50
  51   <div id="welcome">
  52   <h2>I am 12 and what is this</h2>
  53
  54   <p>Blërg is a miniblogging platform.  It's less limited than
  55   microblogging platforms like <a
  56   href="http://twitter.com/">Twitter</a>, but much simpler than
  57   full-blown blogging platforms like <a
  58   href="http://wordpress.com/">Wordpress</a> or <a
  59   href="http://livejournal.com/">Livejournal</a>.  Blërg is also an open
  60   source tagged text database engine written in C that does the back-end
  61   work.</p>
  62
  63   <h2>But what's wrong with Twitter?</h2>
  64
  65   <p>I'M GLAD YOU ASKED. While I don't believe the basic social premise
  66   of Twitter is broken, there are two facets of it that are IMNSHO just
  67   wrong:</p>
  68
  69   <ol>
  70   <li><strong>Ruby on Rails</strong> - Using rails to prototype a system is
  71   fine &mdash; scaling up to a million hits a day with it is just poor
  72   engineering. As the service grew, I'm sure it cost them a lot more
  73   time than it saved.</li>
  74   <li><strong>140 characters is not enough</strong> - I routinely write
  75   sentences longer than 140 characters, so I can't imagine even beginning to
  76   make a point in such a small space.  This textual confinement has led to the
  77   rise of URL shorteners, which are <a
  78   href="http://bytex64.net/blog/e2256">breaking the internet</a>.
  79   </ol>
  80
  81   <p>Blërg solves these problems by applying absurd reactionary
  82   engineering. Blërg's database backend is a custom C program that
  83   handles requests over HTTP and stores data in a very small and
  84   efficient indexed log-structured database. The frontend is done
  85   entirely in client-side Javascript. A single post can be up to 65535
  86   bytes in length.</p>
  87
  88   <p>Which is not to say that I believe writing your service in C is the
  89   solution to all your problems.  Clearly, this approach has just as
  90   many hairy problems that will bite you in the ass sooner or later.
  91   The best way, as with most things, lies somewhere in the middle of
  92   high-level abstraction and ZOMGHARDCORE OPTIMIZATION.</p>
  93
  94   <h2>Is this a joke?</h2>
  95
  96   <p>Yes. No. Maybe.  Blërg is an exercise in constructive satire &mdash; a
  97   fully functional service created in a fit of hubris to poke fun at Twitter's
  98   engineering.  It's just for fun, but no one is going to keep you from using
  99   it seriously. :]</p>
 100   </div>
 101
 102   <div id="navigation">
 103     <a id="newer_link" href="#" onclick="newer_page(); return false" style="display:none">&lt;&lt; newer</a>
 104     <a id="older_link" href="#" onclick="older_page(); return false" style="display:none">older &gt;&gt;</a>
 105   </div>
 106
 107   <div id="signup" style="display:none">
 108     <h2>Sign Up</h2>
 109     <table>
 110       <tr><td>Username:</td><td><input type="text" id="signup.username" width="40"></td>
 111       <tr><td>Password:</td><td><input type="password" id="signup.password" width="40"></td>
 112     </table>
 113     <button onclick="signup()">Signup</button> <button onclick="signup_cancel()">Cancel</button>
 114   </div>
 115 </div>
 116
 117 </body>
 118 </html>