Skip to content

Instantly share code, notes, and snippets.

@yatil
Forked from anonymous/fastbook.html
Created December 22, 2012 11:30
Show Gist options
  • Save yatil/4358523 to your computer and use it in GitHub Desktop.
Save yatil/4358523 to your computer and use it in GitHub Desktop.
<div class="container list-item story stretched" xid="list-item-9" id="element-337" style="-webkit-transform: translate3d(0px, 4500px, 0px) scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg); min-height: 110px; width: 1280px;">
<div class="inner container-inner list-item-inner" id="element-338">
<div class="container unsized frame list-item-item" xid="container-11" id="element-339">
<div class="inner container-inner" id="element-340">
<div class="image buffered-image story-profile-picture sized" xid="buffered-image-13" id="element-341" style="width: 35px; height: 35px; background-image: url(https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc6/261057_631604675_297058556_q.jpg);"></div>
<div class="container inlines unsized story-title" xid="inlines-4" id="element-342">
<div class="inner container-inner inlines-inner" id="element-343">
<div class="text unsized story-title-actor inlines-item" xid="text-23" id="element-344">
Eric Eggert
</div>
<div class="text html unsized story-title-description inlines-item" xid="html-5" id="element-345"></div>
</div>
</div>
<div class="text unsized story-creation-time" xid="text-24" id="element-346">
2 hours ago
</div>
<div class="container unsized story-body" xid="container-12" id="element-347">
<div class="inner container-inner" id="element-348">
<div class="text html unsized story-message has-message" xid="html-6" id="element-349">
Flickr extends your Pro membership for three months if you click this link: <span data-type="link">http://www.flickr.com/holidaygift<br>
<br>
(Reads</span> like scam, but isn&acirc;&euro;&trade;t! Also, Flickr is doing some very clever things to compete with Instagram and the likes. Look like they rise from the ashes like a phoenix! :-)
</div>
<div class="container unsized story-attachment has-attachment" xid="container-13" id="element-350">
<div class="inner container-inner" id="element-351">
<div class="image buffered-image attached-place sized loading" xid="buffered-image-14" id="element-352" style="height: 80px; margin: 0px auto; width: 1240px; background-image: url(http://maps.googleapis.com/maps/api/staticmap?format=jpg&amp;zoom=15&amp;size=300x80&amp;scale=1&amp;sensor=false&amp;markers=color%3Ablue%7Clabel%3A.%7C48.174654853359%2C16.332474060769); display: none;"></div>
<div class="image buffered-image multiple-buffered-image unsized attached-photo" xid="multiple-buffered-image-7" id="element-353" style="display: none;"></div>
<div class="container carousel attached-album sized" xid="carousel-3" id="element-354" style="width: 300px; display: none; height: 300px;">
<div class="body" id="element-356">
<div class="inner container-inner carousel-inner composited" id="element-355" style="margin-left: 10px; -webkit-transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg);">
<div class="container carousel-item attached-album-image-frame sized" xid="carousel-item-10" id="element-357" style="-webkit-transform: translate3d(-1000%, 0px, 0px) scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg); width: 100%;">
<div class="inner container-inner carousel-item-inner" id="element-358">
<div class="image buffered-image multiple-buffered-image unsized attached-album-image carousel-item-item" xid="multiple-buffered-image-8" id="element-359"></div>
</div>
</div>
<div class="container carousel-item attached-album-image-frame sized" xid="carousel-item-11" id="element-360" style="-webkit-transform: translate3d(-1000%, 0px, 0px) scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg); width: 100%;">
<div class="inner container-inner carousel-item-inner" id="element-361">
<div class="image buffered-image multiple-buffered-image unsized attached-album-image carousel-item-item" xid="multiple-buffered-image-9" id="element-362"></div>
</div>
</div>
<div class="container carousel-item attached-album-image-frame sized" xid="carousel-item-12" id="element-363" style="-webkit-transform: translate3d(-1000%, 0px, 0px) scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg); width: 100%;">
<div class="inner container-inner carousel-item-inner" id="element-364">
<div class="image buffered-image multiple-buffered-image unsized attached-album-image carousel-item-item" xid="multiple-buffered-image-10" id="element-365"></div>
</div>
</div>
<div class="container carousel-item attached-album-image-frame sized" xid="carousel-item-13" id="element-366" style="-webkit-transform: translate3d(-1000%, 0px, 0px) scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg); width: 100%;">
<div class="inner container-inner carousel-item-inner" id="element-367">
<div class="image buffered-image multiple-buffered-image unsized attached-album-image carousel-item-item" xid="multiple-buffered-image-11" id="element-368"></div>
</div>
</div>
<div class="container carousel-item attached-album-image-frame sized" xid="carousel-item-14" id="element-369" style="-webkit-transform: translate3d(-1000%, 0px, 0px) scaleX(1) scaleY(1) scaleZ(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg); width: 100%;">
<div class="inner container-inner carousel-item-inner" id="element-370">
<div class="image buffered-image multiple-buffered-image unsized attached-album-image carousel-item-item" xid="multiple-buffered-image-12" id="element-371"></div>
</div>
</div>
</div>
</div>
</div>
<div class="container attached-link sized" xid="container-14" id="element-372" style="height: 70px; width: 94%;">
<div class="dock dock-horizontal sized" id="element-375">
<div class="image buffered-image attached-link-image sized dock-item" xid="buffered-image-15" id="element-374" style="width: 50px; height: 50px; display: none;"></div>
<div class="dock-body" id="element-376">
<div class="inner container-inner" id="element-373">
<div class="text unsized attached-link-title" xid="text-25" id="element-377">
Sign in to Yahoo!
</div>
<div class="text unsized attached-link-source" xid="text-26" id="element-378">
login.yahoo.com
</div>
</div>
</div>
</div>
</div>
<div class="video unsized attached-video" xid="video-3" id="element-379" style="display: none; height: 175px;">
<div class="image buffered-image unsized video-poster" xid="buffered-image-16" id="element-381"></div>
</div>
</div>
</div>
</div>
</div>
<div class="container inlines unsized story-actions" xid="inlines-5" id="element-382" style="height: 29px;">
<div class="inner container-inner inlines-inner" id="element-383">
<div class="text unsized like-count inlines-item" xid="text-27" id="element-384" style="">
1
</div>
<div class="text unsized comment-count inlines-item" xid="text-28" id="element-385" style="">
1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@codepo8
Copy link

codepo8 commented Dec 22, 2012

Well the only non-HTML5 thing is xid. That it doesn't make semantic sense and loses a lot of benefits of using the proper elements for the job is another issue. To me a much more important one. I'd wager to guess that this is generated, so we need to fix the renderers.

@yatil
Copy link
Author

yatil commented Dec 22, 2012

Yeah, it is rendered code. But there should be a link in it (It is a link post on facebook by myself), that would make sense. Likes and Comments are basically <div>1</div> – with attached icon fonts icons, so there is no context here.

That could easily be a article element, with a time@postdate element for the post date, marking everything up in an hfeed microformat to show the author and more.

(I won’t comment on the fact that they replicate scrolling in JavaScript, which disables your mouse’s scroll wheel and scrolling for VO users on iOS devices. Breaking the web, hard.)

@HichemBenChaaben
Copy link

lot of divs and classes and most dangerous is inline styles .

@ZoranJambor
Copy link

That's true, but I think that this should be looked at in context of the native applications, not in the context of the web.

I'd use Sencha Touch to create 'native' application that will be sold through App Store, but never to create a public web application.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment