A Look at the Tumblr Dashboard HTML

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.

Sorry, it wasn’t. There’s some online generator thing that David used.

Guess that’s top secret stuff.

Not really — it’s compressed to save bandwidth and give faster load times. It’s pretty boring, but if you want to see the uncompressed Javascript, replace “.js” with “_src.js”.

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.

Output-markup cleanliness is sacrificed for source-code readability. The source for the above block, with some too-wide Boolean expressions removed for space reasons (don’t worry, they were boring):

<li id="post<?= $post->id ?>"
class="
    post
    <?= $post->type ?>
    <?= (/* [removed for space] */) ? 'same_user_as_last' : '' ?>
    <?= ($post->is_reblog) ? 'is_reblog' : '' ?>
    <?= (/* [removed for space] */) ? 'is_mine' : 'not_mine' ?>
">

Normally I try to enforce an approximate 80-character line-length limit, but

this is all David’s code, being front-end, and
short length limits are impractical for HTML/view code.

Rest assured the controller and model code looks awesome.

No hard feelings, Tumblr staff!

None taken. :)

Answers

A Look at the Tumblr Dashboard HTML

About