Geeky Peek

Below I have pasted what a single SMS message in GoogleVoice looks like. For those of you who do not want to read the code, here is the summary:
-369 lines
-46 divs
-7 tables
-8 spans

This is one SMS message! Its kind of crazy – a SMS message has the following basic pieces:
-the date/time of the message
-who sent the message
-the body of the message
-some status about the message (read/unread, delivered, etc)
-a menu or two with some actions

How in the world does that turn into a 300 odd line juggernaut with 40-odd divs??? How is this good for the internet? This is the ultimate “bigger engine” American auto philisophy being re-lived on the Internet.

This is why Peek exists. There is another story to the Google, Apple gas-guzzler smartphones – efficient, affordable, reliable, low energy use<->long battery life.

<div id=”48997a502b75e41f6fb150e2c32a2f7b58ff76e0″ class=”goog-flat-button gc-message gc-message-read”>
<div class=”gc-message-bg”>
<div>
<table class=”gc-message-bg-top”>
<tbody>
<tr>
<td class=”gc-message-bg-f”></td>
<td class=”gc-message-bg-tl”></td>
<td class=”gc-message-bg-t”></td>
<td class=”gc-message-bg-tr”></td>
</tr>
</tbody>
</table>
</div>
<div class=”gc-message-bg-msg”>
<table class=”gc-message-bg-middle”>
<tbody>
<tr>
<td class=”gc-message-bg-f”>
<div style=”position: relative; padding-left: 5px;”>
<div class=”goog-inline-block”><input class=”gc-message-checkbox” type=”checkbox” /></div>
</div></td>
<td class=”gc-message-bg-l”></td>
<td class=”gc-message-bg-m”>
<div style=”padding-bottom: 3px;”>
<table style=”width: 100%;”>
<tbody>
<tr>
<td class=”gc-sline-top”></td>
<td></td>
</tr>
<tr>
<td class=”gc-message-sline”><span> </span></td>
<td style=”padding-left: 4px;”>
<table class=”gc-message-tbl”>
<tbody>
<tr>
<td class=”gc-message-tbl-portrait”>
<div class=”gc-message-portrait”><img src=”/voice/resources/1366864992-blue_ghost.jpg” alt=”Blue_ghost” />

</div></td>
<td class=”gc-message-tbl-metadata”>
<div>
<span class=”gc-message-name”>
<span>Me</span>
<span class=”gc-message-to”>to</span>
<span class=”gc-nobold”> </span> </span>
</div>
<div class=”gc-message-time-row”>
<span class=”gc-message-time”>6/15/10 5:31 PM</span>
<span class=”gc-message-relative”>12 days ago</span>
</div></td>
<td class=”gc-message-tbl-actions”>
<div class=”gc-message-actions”>
<div class=”goog-inline-block” style=”margin-bottom: -4px;”>
<div class=”gc-message-label” style=”border-color: #eeeeee; background-color: #eeeeee;”>
<div class=”gc-message-label-o” style=”border-color: #eeeeee;”>
<div class=”gc-message-label-i” style=”color: #444444;”>Inbox</div>
</div>
</div>
</div>
</div></td>
</tr>
<tr>
<td class=”gc-message-tbl-desc” colspan=”4″>
<div class=”gc-message-transcript”>
<div class=”gc-message-transcript-msg”>
<table class=”gc-message-transcript-middle”>
<tbody>
<tr>
<td class=”gc-message-transcript-l”></td>
<td class=”gc-message-transcript-m”>
<div>
<div class=”gc-message-player”>
<div class=”gc-message-message-display”>
<div class=”gc-message-sms-row”>
<span class=”gc-message-sms-from”> </span>
Me:
<span class=”gc-message-sms-text”>boopy fail</span>
<span class=”gc-message-sms-time”> 5:31 PM</span>
</div>
<div class=”gc-message-sms-row”>
<span class=”gc-message-sms-from”> </span>
(650) 265-1193:
<span class=”gc-message-sms-text”>Error: this message was not successfully delivered.</span>
<span class=”gc-message-sms-time”> 5:31 PM</span>
</div>
</div>
</div>
</div></td>
<td class=”gc-message-transcript-r”></td>
</tr>
</tbody>
</table>
</div>
</div></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class=”gc-sline-bottom”></td>
<td></td>
</tr>
</tbody>
</table>
</div></td>
<td class=”gc-message-bg-r”></td>
</tr>
</tbody>
</table>
</div>
<div class=”gc-message-bg-msg”>
<table class=”gc-message-bg-middle”>
<tbody>
<tr>
<td class=”gc-message-bg-f”></td>
<td class=”gc-message-bg-l gc-message-bg-g”></td>
<td class=”gc-message-bg-m gc-message-bg-g”>
<div style=”position: relative; padding: 3px 7px 6px;”>
<div class=”gc-message-note-edit” style=”display: none;”>
<div class=”goog-inline-block”>

<textarea></textarea>
<div class=”gc-message-note-ctrl”>
<div class=”goog-inline-block gc-message-note-save”>Save Note</div>
<div class=”goog-inline-block gc-message-note-cancel”>Cancel</div>
<div class=”goog-inline-block gc-message-note-delete”>Delete</div>
</div>
</div>
</div>
<div class=”gc-message-sms-reply” style=”display: none;”>
<div class=”goog-inline-block”>

<textarea></textarea>
<div class=”gc-message-sms-ctrl”>
<div class=”goog-inline-block gc-message-sms-send”>Send</div>
<div class=”goog-inline-block gc-message-sms-cancel”>Cancel</div>
<div class=”gc-sms-counter”>160</div>
</div>
</div>
</div>
<div class=”gc-message-sms-actions gc-simple-menu”>
<div class=”goog-inline-block” style=”vertical-align: bottom;”>
<div class=”goog-inline-block goog-flat-button gc-control goog-flat-button-disabled gc-message-call” style=”vertical-align: bottom; margin-right: 10px;”>Call
<div class=”gc-quickcall-contents” style=”display: none;”><form>
<div>Google will call your phone and connect you to <strong> </strong>.</div>
<input class=”gc-text gc-quickcall-ac” type=”hidden” />
<div class=”gc-bubble-ih”>Phone to call with</div>
<div>
<div class=”goog-flat-menu-button gc-quickcall-phone”></div>
</div>
<div class=”gc-bubble-sub”><input id=”gc-qcr-1276637467132″ class=”gc-quickcall-remember” type=”checkbox” tabindex=”32″ /><label for=”gc-qcr-1276637467132″>Remember my choice</label>

</div>
<div style=”margin-top: 8px;”><input class=”gc-quickcall-submit” style=”display: none;” type=”submit” />
<div class=”goog-inline-block gc-quickcall-connect”>Connect</div>
<div class=”goog-inline-block gc-quickcall-cancel” style=”display: none;”>Cancel</div>
</div>
</form></div>
</div>
<div class=”goog-inline-block goog-flat-button gc-control goog-flat-button-disabled gc-message-sms” style=”vertical-align: bottom; margin-right: 10px;”>Text</div>
<div class=”gc-message-reply-menu goog-inline-block goog-flat-menu-button” style=”margin-right: 8px; display: none;”>
<div class=”goog-inline-block goog-flat-menu-button-dropdown”><small>▼</small></div>
</div>
<div class=”goog-inline-block” style=”vertical-align: bottom;”><a class=”gc-message-sms-mark-link” style=”margin-right: 10px; display: none;” href=”javascript://”>Mark as read</a></div>
<div class=”gc-message-more-menu goog-inline-block goog-flat-menu-button”>
<div class=”goog-inline-block goog-flat-menu-button-caption”>more
<ul class=”goog-menu gc-message-menu” style=”display: none;”>
<li class=”goog-menuitem”>Mark as unread</li>
<li class=”goog-menuitem”>Add note</li>
<li class=”goog-menuitem”>Block caller</li>
</ul>
</div>
<div class=”goog-inline-block goog-flat-menu-button-dropdown”><small>▼</small></div>
</div>
</div>
</div>
</div></td>
<td class=”gc-message-bg-r gc-message-bg-g”></td>
</tr>
</tbody>
</table>
</div>
<div>
<table class=”gc-message-bg-bottom”>
<tbody>
<tr>
<td class=”gc-message-bg-f”></td>
<td class=”gc-message-bg-bl”></td>
<td class=”gc-message-bg-b”></td>
<td class=”gc-message-bg-br”></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

———————————
Buy the hot new Peek 1.10 here, now with GoogleVoice Integration (beta)