A Look at the Tumblr Dashboard HTML

I recently found myself looking through the tumblr HTML source. Not sure why. Here are my moment-by-moment reactions and observations.

Starting at the top:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--

        .                                  .o8       oooo               
      .o8                                 "888       `888               
    .o888oo oooo  oooo  ooo. .oo.  .oo.    888oooo.   888  oooo d8b     
      888   `888  `888  `888P"Y88bP"Y88b   d88' `88b  888  `888""8P     
      888    888   888   888   888   888   888   888  888   888         
      888 .  888   888   888   888   888   888   888  888   888     .o. 
      "888"  `V88V"V8P' o888o o888o o888o  `Y8bod8P' o888o d888b    Y8P

-->

That. Is. Awesome. I particularly like the attention to detail on the serifs. Not sure if this was handmade or not, but if it was: props.

The JS includes prototype and scriptaculous along with application.js and tumblelog.js. The later is just some flash video player nonsense and the former (undoubtably the more interesting) looks like this:

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+
((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};
if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);
k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};
while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);
return p}('7 2K=a;7 15=a;7 16=a;7 17=a;7 1v=\'M 1w\';7 2L=a;7 u;7 y;7 z;
7 2M;7 18=a;7 s=(1x.1y&&1x.1y=="2N 2O 2P")?A:a;1z=e 19();1z.N=\'/O/1A.P\';
1B=e 19();1B.N=\'/O/2Q.P\';1C=e 19();1C.N=\'/O/2R.P\';

Guess that’s top secret stuff.

On to the stylesheets. These include global.css, dashboard.css and safari.css. Interesting that there is a Safari-specific stylesheet. There must be cool -webkit stuff inside.

.wide{width:584px;min-width:584px;max-width:584px;}

Uhh. I guess not.

Moving on, skipping over the top navigation to some lovely inline JS:

new Ajax.PeriodicalUpdater(
    { success: 'new_post_notice_container' },
    '/dashboard/check_for_new_posts/after/105653397', 
    { method: 'get', frequency: 60, evalScripts: true }
);

So that’s how that little updater works. When I go hit that URL in browser, I get a 200 OK with no content. If I change the post id to something a little less recent, I get this:

<a href="/dashboard" class="new_post_notice" title="1 new posts">1<img src="http://assets.tumblr.com/images/new_post_alert_arrow.png?alpha&2" alt=""/></a>

<script type="text/javascript">
    document.title = '(1) Tumblr';
</script>

Simple, but effective.

Next: Totally did not know you can use left/right arrows to navigate Dashboard:

document.onkeydown = function(e) { 
    if (! key_commands_are_suspended) {
        if (! e) var e = window.event;
        var code = e.charCode ? e.charCode : e.keyCode;
        if (! e.shiftKey && ! e.ctrlKey && ! e.altKey && ! e.metaKey) {
            if (code == Event.KEY_LEFT) {
                if ($('previous_page_link')) location.href = $('previous_page_link').href;
            } else if (code == Event.KEY_RIGHT) {
                if ($('next_page_link')) location.href = $('next_page_link').href;
            }
        }
      }
  }

After that, nothing really exciting in the right sidebar code. Some more inline styles and onclick JS, but nothing that noteworthy.

On to the main column:

        <li class="post is_mine with_avatar new_post" >
<img id="new_post_icons" alt="Create a post"
src="http://assets.tumblr.com/images/new_post_icons.png" usemap="#add_post"/>

<map id="add_post" name="add_post">
    <area shape="rect" coords="0,0,72,97"   title="Post Text" alt="Text"
    href="/new/text"
            />
    <area shape="rect" coords="72,0,147,97"  title="Post a Photo" alt="Photo"
    href="/new/photo"
            />
    <area shape="rect" coords ="147,0,221,97" title="Post a Quote" alt="Quote"
    href="/new/quote"
            />
    <area shape="rect" coords ="221,0,296,97" title="Post a Link" alt="Link"
    href="/new/link"
            />
    <area shape="rect" coords ="296,0,371,97" title="Post a Chat" alt="Chat"
    href="/new/chat"
            />
    <area shape="rect" coords ="371,0,447,97" title="Post Audio" alt="Audio"
    href="/new/audio"
            />
    <area shape="rect" coords ="447,0,513,97" title="Post a Video" alt="Video"
    href="/new/video"
            />
</map>

Whaaat!? Apparently, the new post buttons are an I-thought-everyone-stopped-using-those-in-1999 image map. Wow. Crazy.

(PS: Please fix the Audio drop shadow in that image!)

The left part of the main column, with avatars, is wrapped in this:

<div class="so_ie_doesnt_treat_this_as_inline">

Hah. Stupid IE.

At the bottom of the file, gAnalytics is included twice, in different ways with different account ids:

<script>
if(typeof(urchinTracker)!='function')document.write('<sc'+'ript src="'+
'http'+(document.location.protocol=='https:'?'s://ssl':'://www')+
'.google-analytics.com/urchin.js'+'"></sc'+'ript>')
</script>
<script>
_uacct = 'UA-6469975-1';
urchinTracker("/3339393604/goal");
</script>

[...]

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
    _uacct = "UA-97144-8";
    urchinTracker();            
</script>

Overall, I see a lot of inline styles, inline JS and onclicks, and code that looks like this:

<li id="post105653397"
class="
    post
    photo                                    not_mine        ">

What happened here? … -shrug- Things could definitely be cleaner, but hey, it works.

I know I’m an asshole for doing this, but it was fun and I learned a few things. It’s always interesting to see how others construct applications and the details they focus on (or don’t). I’d love to see what the PHP looks like.

No hard feelings, Tumblr staff!

3 years ago  Notes (55)
  1. igut reblogged this from do-nothing
  2. interglacial reblogged this from do-nothing
  3. do-nothing reblogged this from dstrelau
  4. takaakik reblogged this from answers
  5. syoichi reblogged this from answers
  6. mix3 reblogged this from tsupo
  7. manamanmana reblogged this from cxx
  8. tsupo reblogged this from cxx
  9. cxx reblogged this from answers
  10. 200 reblogged this from answers and added:
    We have a similar coding style in our Application. I think this case is very difficult, because I wouldn’t mix up Model...
  11. answers reblogged this from dstrelau and added:
    It belongs in the view,...the Post model, because it’s rendering-related. A...
  12. dstrelau reblogged this from answers and added:
    Oh, look: answers answered me:...That makes total sense. I’m not sure why I didn’t think...
  13. peterclark reblogged this from dstrelau
  14. dstrelau posted this