5 ms·
Uiji.js is jQuery in reverse
- saidur 14y agoLoving this.
- fruchtose 14y agoThis 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.
- shaunxcode 14y agoInteresting, here is my stab at a very similar concept (using selectors to generate dom fragments) https://github.com/shaunxcode/bling https://github.com/shaunxcode/bling
- eranation 14y agoThis is like zen coding in run time, brilliant.
- ville 14y agoFor 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/ http://code.google.com/p/zen-coding/
- aakilfernandes 14y agoThanks 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 14y agoZen 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 http://www.w3.org/TR/CSS2/selector.html#pattern-matching
- huxley 14y agoThere 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 14y agoInstead of prefixing protected attributes with underscore (_class) i would instead just wrap those in quotes (valid js, no extra logic), e.g. 'class': 'foo'.
- aakilfernandes 14y agoI had no idea. Much prettier.
- wycats 14y agoAlso has the benefit of being compatible with the no-quotes version in ES5 browsers.
- jQueryIsAwesome 14y agoNo 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 14y agoYou took the words right out of my mouth.
- solox3 14y agoIndeed. jQuery is awesome.
- eranation 14y agoThis made me wonder if there is a jQuery library that supports zen code, apparently there is: https://github.com/zodoz/jquery-ZenCoding https://github.com/zodoz/jquery-ZenCoding
- deleted 14y ago[deleted]
- jamesrom 14y agoFurther 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 14y agoSpeed might be a godo reason for the more compact version, especially if you're doing this in a loop.
- EricDeb 14y agoInterestingly 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 14y agoWhy not just use AJAX instead?
- lucian1900 14y agoA bit similar to Hiccup https://github.com/weavejester/hiccup https://github.com/weavejester/hiccup
- arrowgunz 14y agoHow can we use this to make our applications better? Could anybody explain please :-)
- aakilfernandes 14y agoInstead 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 14y agoI do like the shortcut `.uiji('p.greeting"Hello World!"')`, but what if I want to add two class names?
- aakilfernandes 14y agoYou could use `.uiji('p.greeting.earthling"Hello World!"')
- ganarajpr 14y agoOMG!!! 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 14y agoDislike. 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 14y agoI 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 14y agoThis page seems to crash the Gingerbread Android browser.
- aakilfernandes 14y agoWill look into it. Thanks.
- zerostar07 14y agoTangentially, why are some blogs using hacker news as their comments system?
- Kiro 14y agoWhy not?
- aakilfernandes 14y agoLess work than installing Discuss, and I'd rather keep the conversation in a single thread.
- DelvarWorld 14y agothis library: missing the point. use templating libraries instead of this please.