ƒu.js - The Functional DOM traversing library. • Hacker News Board

Re: ƒu.js - The Functional DOM traversing library.

#31

Post by Sephr » Sun, Jan 30, 2011, 4:18 PM UTC

jeresig wrote: post #26

masklinn wrote: post #25

Earlier quoted context omitted.

> In the author's defence, the Fu.JS syntax is much nicer than the jQuery syntax How? No, seriously, how is ƒ('body').style.background = '#f4f6f8'; much nicer than $('body').css('background', '#f4f6f8'); ? fu().body.fu('ul').appendChild(ƒ().createElement('li')); than $('body ul').append($(' ')); ? document.body.ƒ('ul li:last-child').innerText = "I'M THE NEW GUY!"; than $(document.body).find('ul li:last-child').text("…

Some quickie improvements to the jQuery examples: $('body ul').append($(' ')); can become: $('body ul').append(' '); and: $(document.body).find('ul li:last-child').text("I'M THE OLD GUY!"); can become: $("body").find('ul li:last-child').text("I'M THE OLD GUY!"); (We optimize for body explicitly in our selector code.) Although that last example selector is rather weird, it's equivalent to: $("body ul li:last-child") o…

    document.body.ƒ('ul li:last-child').innerText = "I'M THE NEW GUY!";

That code won't work in standards-compliant browsers. You should either use .textContent = "..." or .appendChild(document.createTextNode("...")) or .firstChild.wholeText = "..." if there's already a text node child.

The real issue though is that unlike jQuery, ƒu.js won't work in popular versions of IE.

Re: ƒu.js - The Functional DOM traversing library.

#32

Post by Tycho » Sun, Jan 30, 2011, 4:34 PM UTC

masklinn wrote: post #25

Tycho wrote: post #22

Earlier quoted context omitted.

In the author's defence, the Fu.JS syntax is much nicer than the jQuery syntax, so I can see why someone would want to build this.

> In the author's defence, the Fu.JS syntax is much nicer than the jQuery syntax How? No, seriously, how is ƒ('body').style.background = '#f4f6f8'; much nicer than $('body').css('background', '#f4f6f8'); ? fu().body.fu('ul').appendChild(ƒ().createElement('li')); than $('body ul').append($(' ')); ? document.body.ƒ('ul li:last-child').innerText = "I'M THE NEW GUY!"; than $(document.body).find('ul li:last-child').text("…

well for a start, Fu.js is using straight forward assignment statements with the = sign, whereas in jquery you're passing two arguments into a function without being able to see what they're for or what order they should be in.

some of the fu.js lines are a bit unwieldy but at least it's obvious to me what they do - i found jQuery code pretty bewildering until i delved into it

Re: ƒu.js - The Functional DOM traversing library.

#33

Post by masklinn » Sun, Jan 30, 2011, 4:42 PM UTC

jeresig wrote: post #26

masklinn wrote: post #25

Earlier quoted context omitted.

> In the author's defence, the Fu.JS syntax is much nicer than the jQuery syntax How? No, seriously, how is ƒ('body').style.background = '#f4f6f8'; much nicer than $('body').css('background', '#f4f6f8'); ? fu().body.fu('ul').appendChild(ƒ().createElement('li')); than $('body ul').append($(' ')); ? document.body.ƒ('ul li:last-child').innerText = "I'M THE NEW GUY!"; than $(document.body).find('ul li:last-child').text("…

Some quickie improvements to the jQuery examples: $('body ul').append($(' ')); can become: $('body ul').append(' '); and: $(document.body).find('ul li:last-child').text("I'M THE OLD GUY!"); can become: $("body").find('ul li:last-child').text("I'M THE OLD GUY!"); (We optimize for body explicitly in our selector code.) Although that last example selector is rather weird, it's equivalent to: $("body ul li:last-child") o…

Well apart from the first one (clearly my mistake) I was trying to translate the original semantics as closely as possible. Hence the repeated (if not very useful) `body` anchors.

> (When is a ul ever going to be outside of a body element?)

Document fragments? XML documents? Not sure you can use that style of jQuery calls on those, but~~

Re: ƒu.js - The Functional DOM traversing library.

#34

Post by masklinn » Sun, Jan 30, 2011, 4:47 PM UTC

Tycho wrote: post #32

masklinn wrote: post #25

Earlier quoted context omitted.

> In the author's defence, the Fu.JS syntax is much nicer than the jQuery syntax How? No, seriously, how is ƒ('body').style.background = '#f4f6f8'; much nicer than $('body').css('background', '#f4f6f8'); ? fu().body.fu('ul').appendChild(ƒ().createElement('li')); than $('body ul').append($(' ')); ? document.body.ƒ('ul li:last-child').innerText = "I'M THE NEW GUY!"; than $(document.body).find('ul li:last-child').text("…

well for a start, Fu.js is using straight forward assignment statements with the = sign, whereas in jquery you're passing two arguments into a function without being able to see what they're for or what order they should be in. some of the fu.js lines are a bit unwieldy but at least it's obvious to me what they do - i found jQuery code pretty bewildering until i delved into it

> whereas in jquery you're passing two arguments into a function without being able to see what they're for or what order they should be in.

Unless, of course, you've spent roughly 5mn reading upon how jQuery's getting and setting works. Then you know the first argument is a key and the second one is a value to set.

I can see you've also quickly moved the goalposts, from "fu.js's syntax is much nicer" (emphasis yours) to "I claim to undetstand what fu.js does without having read its documentation"

Re: ƒu.js - The Functional DOM traversing library.

#35

Post by tsenart » Sun, Jan 30, 2011, 4:54 PM UTC

Sephr wrote: post #10

Why would you use this over normal querySelector{All}? Also, why do you define a window.typeOf global? It completely defeats the purpose of using a clousure. You also seem to be checking `typeof value.length == 'number' && typeof value.splice != 'undefined' && !value.propertyIsEnumerable('length')` to determine if something is an Array. First of all, the recommended practice is to check Object.prototype.toString.call…

Even tough he is being harsh I guess he is right. I am not a ninja Javascript programmer and this is my first library. Thanks for the tips. I have a lot to learn. Also, this is a toy project made in one night that I had no internet access. If you don't like it, don't use it. I'm not selling it as the ultimate solution to all problems. It's my personal play and I learned with it and had no intentions of being so serious. If you noticed, I have the following on the README.md: "I'm sleepy. Don't know if this is too useful yet... Playing with Unicorns.(Unicodes)"

Re: ƒu.js - The Functional DOM traversing library.

#36

Post by tsenart » Sun, Jan 30, 2011, 4:57 PM UTC

woogley wrote: post #27

There are alot of bad practices being used in this code. It gives the impression that you've (ab)used JavaScript for a long time, but haven't actually bothered to read the 101 introduction to the language. E.g.: try { eval('el.' + argv[1]); return el; } catch(e) { return null }; Why in the world would you do this? JavaScript has property access via bracket syntax for a reason: return el[argv[1]] || null; Give this a…

I do that to be able to do: ƒ('ul li:nth-child(2n)', 'style.background = "black"').

Re: ƒu.js - The Functional DOM traversing library.

#37

Post by tsenart » Sun, Jan 30, 2011, 5:03 PM UTC

Sephr wrote: post #10

Why would you use this over normal querySelector{All}? Also, why do you define a window.typeOf global? It completely defeats the purpose of using a clousure. You also seem to be checking `typeof value.length == 'number' && typeof value.splice != 'undefined' && !value.propertyIsEnumerable('length')` to determine if something is an Array. First of all, the recommended practice is to check Object.prototype.toString.call…

Please fork. Let me know those good practices.

Re: ƒu.js - The Functional DOM traversing library.

#38

Post by tsenart » Sun, Jan 30, 2011, 5:11 PM UTC

Disclosure: I think I got misunderstood. This is not a serious library meant for multi-browser support or a general purpose library like jQuery (which I use daily). It's a toy project born out of interest, will to learn and the simple fact that in another project I have, Sight(https://github.com/tsenart/sight), I didn't use any external libraries (except Underscore.js). That's how I really started to learn Javascript. I missed the ability to directly iterate through the results of document.querySelectorAll() so I just had fun playing with a solution and ƒu.js came out. I'm not praising it as the best library in the world. And it can even have no advantages over the others. It's just my toy project with which I learned a lot (and even more with brutal criticism) and published for the others to see. Not selling anything here. (The headline of the page is mere satyre)

Re: ƒu.js - The Functional DOM traversing library.

#39

Post by Tycho » Sun, Jan 30, 2011, 5:58 PM UTC

masklinn wrote: post #34

Tycho wrote: post #32

Earlier quoted context omitted.

well for a start, Fu.js is using straight forward assignment statements with the = sign, whereas in jquery you're passing two arguments into a function without being able to see what they're for or what order they should be in. some of the fu.js lines are a bit unwieldy but at least it's obvious to me what they do - i found jQuery code pretty bewildering until i delved into it

> whereas in jquery you're passing two arguments into a function without being able to see what they're for or what order they should be in. Unless, of course, you've spent roughly 5mn reading upon how jQuery's getting and setting works. Then you know the first argument is a key and the second one is a value to set. I can see you've also quickly moved the goalposts, from "fu.js's syntax is much nicer" (emphasis yours…

Well in the original examples I responded to, I thought the syntax was considerably nicer, that's what I was commenting on. In the different examples (shifting goalposts...) someone responded to me with, the benefit was less pronounced. In general, jQuery has absolutely horrible syntax (IMO), so I can understand someone building a library to make a few small improvements like normal assignment statements.

Re: ƒu.js - The Functional DOM traversing library.

#40

Post by jessedhillon » Sun, Jan 30, 2011, 6:17 PM UTC

tsenart wrote: post #36

woogley wrote: post #27

There are alot of bad practices being used in this code. It gives the impression that you've (ab)used JavaScript for a long time, but haven't actually bothered to read the 101 introduction to the language. E.g.: try { eval('el.' + argv[1]); return el; } catch(e) { return null }; Why in the world would you do this? JavaScript has property access via bracket syntax for a reason: return el[argv[1]] || null; Give this a…

I do that to be able to do: ƒ('ul li:nth-child(2n)', 'style.background = "black"').

A better way to do that would be to split() it first on '=' then, split() the left side on '.' and iterate the results. You don't want to evaluate just anything anyone puts in that second argument.