Uiji.js is jQuery in reverse | Hacker News Reader

Uiji.js is jQuery in reverse

aakilfernandes.com

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'.

Also has the benefit of being compatible with the no-quotes version in ES5 browsers.

I had no idea. Much prettier.

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.

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.

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.

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.

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.

Why not just use AJAX instead?

This is like zen coding in run time, brilliant.

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/

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?

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:

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.

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

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

You could use

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

How can we use this to make our applications better? Could anybody explain please :-)

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.

Tangentially, why are some blogs using hacker news as their comments system?

Less work than installing Discuss, and I'd rather keep the conversation in a single thread.

Why not?

Interesting, here is my stab at a very similar concept (using selectors to generate dom fragments) https://github.com/shaunxcode/bling

A bit similar to Hiccup https://github.com/weavejester/hiccup

This page seems to crash the Gingerbread Android browser.

Will look into it. Thanks.

Loving this.

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.

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.

Speed might be a godo reason for the more compact version, especially if you're doing this in a loop.

This made me wonder if there is a jQuery library that supports zen code, apparently there is: https://github.com/zodoz/jquery-ZenCoding

You took the words right out of my mouth.

Indeed. jQuery is awesome.

this library: missing the point. use templating libraries instead of this please.

Reply on news.ycombinator.com