

How to use HTML5 to make your CSS look like brainfuck - mathias
http://mathiasbynens.be/notes/html5-id-class

======
CWIZO
Am I the only one who doesn't see the point in having this kind of names for
IDs/classes ? Obfuscation maybe? That, off course, doesn't make much sense
with tools like Firebug :)

~~~
qeorge
The jQuery metadata plugin makes elegant use of this property of class names.

For example, you can do something like this:

<a href="#hello" class="{name:'George'}" />

and then in jQuery you can retrieve the metadata like so:

$('a').metadata('name'); // returns "George"

Its incredibly useful for associating metadata with DOM elements without
breaking the HTML's validity.

~~~
eli
Ick. I think I'd rather just break my HTML and add random attributes.

~~~
qeorge
Why is that better? You can use JSON here.

(I say this as someone who used to use random HTML attributes.)

~~~
eli
I find it aesthetically displeasing, and I'm not convinced that abusing the
class attribute to store metadata is "more correct" than just adding your own
attributes which.

------
csomar
It can be used for obfuscation, making it a little bit harder to decode a CSS,
HTML and JavaScript. Also this can be a good compression method. (Assuming you
parse CSS and JavaScript)

~~~
IgorPartola
I bet it can also be an XSS attack vector. Imagine that there is some piece of
jQuery-based code that evaluates selectors based on the ID attribute of a
given element (e.g. for this element find all the related ones):

    
    
      $('.' + div.attr('id')).each(function() {
          $('body').append($(this); // Moving elements
      });
    

Now imagine that I give the id attribute the following id: 'nada,<script
src="evil.js"></script>'

I suppose this is a bit contrived but still fun.

~~~
mathias
Good point! To be perfectly safe, `$div.attr('id')` should be escaped before
it’s used. I’m not sure in how many browsers this _could_ be a problem though.

FYI, the `.append` line is missing a closing `)`. Also, you probably don’t
want to use `$(this)` in that case, you could just use `this`.

~~~
IgorPartola
Oops! Thanks for pointing out the closing ). Both '$(this)' and 'this' work,
and I just use the former most of the time. I suppose you are right though
since $(this) would take longer. On the other hand, I wouldn't be surprised if
the HTML element was immediately converted to a jQuery object by append()
before anything else is done anyways.

As for the escaping, how would we do that? jQuery specifically allows
something like $('<div/>'). As far as I know, it does not have an escape
character to prevent that. My point is that that character would need to be
added to jQuery and other libraries that have the same function for fetching
DOM elements and creating them. Obviously, in raw JavaScript this is not a
problem since there it's two different methods (document.getElementById and
document.createElement).

~~~
mathias
Isn’t escaping usually done with a backslash (`\\`) instead of a forward slash
(`/`)? I don’t see how something like `$('<div />');` could interfere with
that.

~~~
IgorPartola
JavaScript escaping is done with backslashes:

    
    
      var str = "Hello \"world\", how\\are you";
    

But once you have your string composed, jQuery does not as far as I know have
a way to escape characters like < and >.

------
joubert
Has anybody put brainfuck on their resume?

~~~
mathias
Q: Any experience with brainfuck?

A: No, but if you want, I can write you some CSS that looks just like it!

------
est
javascript as brainfuck

<http://news.ycombinator.com/item?id=1153383>

------
nnash
How is it that HTML5 never ceases to make me furious with it for changes like
this?

~~~
mathias
How is being able to use any character you want as a value for an ID attribute
a bad thing?

