
Pure CSS Twitter Fail Whale - jakarta
http://www.subcide.com/articles/pure-css-twitter-fail-whale/
======
alain94040
From the article:

 _... stranger angles (such as the strings) are masked using containers with
overflow: hidden_

Hum, am I the only one who wonders why we have to reinvent, in 2010, a
graphics language, and everyone seems to think it's cool?

Even on the Apple II you didn't to do such ugly hacks. Why now?

~~~
psadauskas
Its not that you _have_ to, its that you can. This would absolutely be much
better suited as SVG or canvas, but it does a good job of demonstrating how
amazingly powerful CSS3 is.

If everyone only did something the "right" way, and the simplest way, the
world would be a very uninteresting place.

~~~
pmjordan
I don't know about you but pretty much every live site I've been involved in
has used some non-intuitive CSS and markup to achieve the intended result. CSS
is great for its intended use of styling marked up text documents; as soon as
you try to do anything that falls outside of that zone, such as implementing a
contemporary website layout & design, you end up working _against_ the
language. It works, but it's a lot like inferring that Brainfuck must be a
good programming language because it's Turing complete.

Yes, we have SVG, canvas, etc., but they aren't supported widely enough. Even
if you ignore that and focus on the browsers with the best (X)HTML+SVG
support, do the layout & design using SVG and the typesetting with HTML/CSS,
the resulting markup and CSS aren't pretty at all - again, SVG is good for
vector art, not laying out interactive pages.

Canvas is generic enough to do pretty much anything, but it's very low level.
It's like the X server - you still need all the toolkit infrastructure on top
to get anything done in most cases. This is fine for animations, games, etc.
of course.

So yes, this particular animation could have been better implemented using SVG
or canvas. Sure, it's _interesting_ doing it with CSS3, but the sad thing is
that it's more than that: the weird hacks required aren't far removed from the
ones you _need_ to use in practice, because the 'right' way you mention
currently doesn't exist for the vast majority of what we do on the web.

It's more than a cool hack - it's a demonstration (intentional or not) that
it's 2010 and we're still fighting our presentation languages.

------
moron4hire
If I cut down a 50 foot tall tree with a swiss army knife, it would not be a
testament to the "power" of the knife, it would be a testament to my own
stupidity.

~~~
mcobrien
If you cut down a 50 foot tall tree with a swiss army knife, I'd like to see
how you did it. I think it's clear the author isn't stupid and did this to see
what was possible with a limited tool.

~~~
moron4hire
My point was that, with enough perseverance, one can do practically anything
with anything (or nothing). Just because something is possible doesn't make
doing it an intelligent thing if it's just a brute force effort. While
herculean efforts of perseverance are commendable displays of stamina (like
([http://links.zigzo.com/files/2007/10/coat_20hanger_20gorilla...](http://links.zigzo.com/files/2007/10/coat_20hanger_20gorilla.jpg))
this gorilla made out of coat hangers), once the basic theory has been
demonstrated, the intellectual interest is over. See also, X program
implementation in Y Turing-complete language (I'm specifically reminded of a
chess engine written in the infamous Brainf __*, which was really just a C
chess engine converted to BF).

~~~
sjs
Perseverance and stamina are rare qualities, and that gorilla is a very nice
work of art. A ported BF chess engine not so much. Now, a C-to-BF compiler
would be interesting.

The recent "X in pure CSS" theme is important as it shows how advanced CSS3
is. They are tech demos, which as we know are often not meant to be anything
more than that. They display how far you can bend CSS and nothing more. Just
like the Blendtech ads, if someone cut down a tree with a pocket knife in an
afternoon I bet 1/2 of us would run out to buy that knife.

If an artist had done this using more standard tools and rendered it as SVG no
one would care. I think you've completely missed the point.

edit: It seems that psadauskas made this point some time ago.
<http://news.ycombinator.com/item?id=1428943>

~~~
GrandMasterBirt
I'm sorry but this is a tiny fraction of CSS3. Lets see some real cool stuffs.

However, "look what I can do in CSS3" is always fun to see, because it
introduces techniques not necessarily just the technology.

------
Subcide
The HTML/CSS all up is about 34kb, but could be a lot less if minified, and
the CSS was made for ease of drawing over optimization :) You could get a PNG
down to less than 10kb easily (but of course, that was hardly the point hehe).
Cheers for the comments guys!

------
kwamenum86
A very clever hack. I wonder how much total memory is used versus the image-
based version? A couple potential disadvantages: more http requests and more
dom nodes. But I'm guessing the author did this just because they could, not
as a demonstration of how things should be done.

~~~
thwarted
You mean fewer HTTP requests. The CSS is entirely in the document. So unless
you base64 encode the failwhale image and put it in a data: url in an img tag,
it's one less request compared to an HTML page containing a single image.

~~~
kwamenum86
By that logic it is the same number of HTTP requests. Embedding images in the
document is trivial at this point.

------
Groxx
Awww, if you scale it up it gets horizontal gaps in the whale :'(

Other than that, very nice job. Wonder if Twitter would use it.

~~~
jrockway
A fail whale that failed to render correctly would be amusing.

------
wushupork
I think if I did this using purely tables and background colors, I'd probably
get tons of down votes. Just saying.

------
trezor
Works neatly in Firefox and even better in Chrome, but fails horribly on my
iPhone. Might just be due to the small screensize but I haven't tested that
properly yet.

Impressive none the less.

~~~
grandalf
Works on ipad

~~~
uptown
That's because it's magical.

