HN Explorer

34 comments

[ 5.3 ms ] story [ 78.2 ms ] thread
fruchtose
This is just plain awesome. Using the project to generate the page's HTML is brilliant, if not an exercise in depravity. However, it seriously needs a better name. Since you've built it as a jQuery plguin and not as its own library, I recommend that it be renamed to something like jQuery.create.
eranation
This is like zen coding in run time, brilliant.
ville
For those who didn't know, Zen Coding is a tool for creating html with a same kind of syntax, available for many editors: http://code.google.com/p/zen-coding/
aakilfernandes
Thanks for the link. Definitely some good inspiration for future versions.

I've never used it, any feedback on their syntax? I was planning on using a `space` instead of a `>` when I do inline hierarchy.

Also, what is zero padding? (`li.item$$$`)

edit: What is the purpose of zero padding?

calvin
Zen coding syntax is fantastic, it makes generating HTML in my editor a breeze.

Stick to ">". That's the standard CSS for indicating a child element.

e.g. "div.myclass > h1" indicates a div with class "myclass" and a child h1 element. In zen, it outputs:

  <div class="myclass">
    <h1></h1>
  </div>
http://www.w3.org/TR/CSS2/selector.html#pattern-matching
huxley
There are probably several other use-cases, but the one I've run into was where there is a naive implementation of alphabetic sorting (basically character by character sorting), zero padding allows proper numerical sorting to work:

001

002

010

022

Instead of:

1

10

2

22

If you think you might have a thousand items, you'd probably zero pad by 3 digits.

0001

0010

0100

1000

1001

Edit: of course, one area you're guaranteed to have trouble with numerical sorting is when your number is prefixed by a letter. Zero-padding mitigates that problem: M001, M002, M020, M023.

benjoffe
Instead of prefixing protected attributes with underscore (_class) i would instead just wrap those in quotes (valid js, no extra logic), e.g. 'class': 'foo'.
wycats
Also has the benefit of being compatible with the no-quotes version in ES5 browsers.
jQueryIsAwesome
No sense to include another library just to change the syntax a little bit

    $("<p>",{"class":"gretting",html:"Hellow World"}).appendTo("#helloWorld .output")
And you can also create hierarchy

    $("<p>",{"class":"gretting",html:
    	$("<a>",{href:"#",html:	
            $("<h1>",{html:"Hello World"})	
    	})
    }).appendTo("body")
Which looks disgusting but that is why template engines exist.
dyscrete
You took the words right out of my mouth.
solox3
Indeed. jQuery is awesome.
[deleted]
(comment deleted)
jamesrom
Further more, what's wrong with chaining function calls? It makes the whole thing a lot easier to read.

    $("<p>")
        .addClass("greeting")
        .html("Hello World")
        .appendTo("#helloWorld .output")
And your second example:

    $("<p>")
        .addClass("greeting")
        .append(
            $("<span>")
                .html("Hello ")
                .append(
                    $("<a>")
                        .prop("href", "google.com")
                        .html("World")
                )
        )
        .appendTo("body");
It's just as verbose but much more readable.
chime
Speed might be a godo reason for the more compact version, especially if you're doing this in a loop.
EricDeb
Interestingly I used JavaScript(Jquery) to generate a majority of the html for a site I did in the past to keep it free from page refreshes. In retrospect I thought it was bad practice, but maybe it will come into style with libraries like this.
Kiro
Why not just use AJAX instead?
arrowgunz
How can we use this to make our applications better? Could anybody explain please :-)
aakilfernandes
Instead of generating markup on the server side, generate it on the client side. Why?

1) The client side knows more about the client (screen width, device, scroll position) 2) Save yourself an AJAX call 3) Make your code more modular by templating jQuery and HTML at the same time. I plan on writing a whole blog post about this, but currently writing web apps seems to follow 1)Create DOM, 2) find relevant DOM with jQuery, 3) apply jQuery. This will combine steps 1 and 3 into the same template, and make 2 unnecessary.

rduchnik
I do like the shortcut `.uiji('p.greeting"Hello World!"')`, but what if I want to add two class names?
aakilfernandes
You could use

`.uiji('p.greeting.earthling"Hello World!"')

ganarajpr
OMG!!! Generating html with javascript is just soo stupid. It has the same problem as writing javascript in html ( I think html in js is even worse! ).

The way you separate out logic from presentation in html ( proponents of unobtrusive js?) you SHOULD separate out html from js. Or it starts becoming a mess. Please dont make writing html in js easy because stupid ppl will use it and start making our lives harder.

deepuj
Dislike. Don't need another library for this. Isn't this why we have templating engines? Mixing view and business logic leads to unmanageable code.
cmwelsh
I like how you included the underscore prefix to make it easier to use keys like "class", but wouldn't it be nicer to encourage people to learn the reserved words and escape them properly?

    $('#objectWorld .output').uiji({tag:'p','class':'greeting',html:'Hello Object World!'})
Alternatively, they could be using CoffeeScript where this is done for them automatically.
dochtman
This page seems to crash the Gingerbread Android browser.
zerostar07
Tangentially, why are some blogs using hacker news as their comments system?
aakilfernandes
Less work than installing Discuss, and I'd rather keep the conversation in a single thread.
DelvarWorld
this library: missing the point. use templating libraries instead of this please.