
ƒu.js - The Functional DOM traversing library. - tsenart
http://tsenart.github.com/fu.js
======
Sephr
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(value) === "[object Array]", but since
you're going to rely on latest browsers supporting querySelector{All}, you
might as well use Array.isArray.

I'm sorry for being so harsh, but this is the most worthless library I have
ever seen. You're adding an extremely thin and pointless layer of abstraction
to querySelectorAll and polluting the global namespace with _four_ globals,
three of which are completely identitcal, and two of which take too much
effort to type. Not to mention your use of _worst_ practices (such as using
eval(), only loose comparisons, wrapping all of your code in try..catch
statements instead of just not doing things that will throw errors, etc.) and
your prototypical pollution in Array, Document, and Element. For example, you
define Array.prototype.flatten for _internal_ use. You shouldn't pollute
global prototypes for something that you can do privately.

~~~
GrooveStomp
I think you bring up valid points, but you should work on delivery. Your post
is very offensive to read, even from someone who has no stake in this library
whatsoever - even though I think you're right.

You've also got a lot of typos.

So, try to be helpful and encouraging instead of damning and dismissive? I'd
appreciate that, and be more open to what you're saying.

~~~
Klonoar
His delivery is exactly what anybody is bound to get on the internet, and
there's seriously nothing wrong with it. If you have an issue with brutal
criticism like that, you should re-evaluate even spending time on this site.

This is, quite simply, the most _useless_ and badly written 'library' I've
seen in some time. I applaud the author for pushing his work out there, but
this is the part where you take criticism and run with it, _fix it_. Listen to
Sephr, he's spot on.

------
woogley
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 read: [https://developer.mozilla.org/en/a_re-
introduction_to_javasc...](https://developer.mozilla.org/en/a_re-
introduction_to_javascript)

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

~~~
jessedhillon
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.

~~~
tsenart
Well... Actually I do.

~~~
jessedhillon
If you want to eval anything anyone passes you with no consideration for what
it could be, then I have to agree with OP that you must not be aware of the
pitfalls of using eval.

Consider that the "black" portion of that argument actually comes from user
input and that you were passed instead:

black"); alert('This framework is awesome!

Try eval'ing that.

------
julian37
tsenart, you submitted the same thing two days ago:
<http://news.ycombinator.com/item?id=2146944>

At the very least you could link to the previous discussion, no?

~~~
tsenart
Oh well I am sorry. I linked the other way though. Thanks for noting.

------
tsenart
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)

------
acabal
Am I missing something here or do I really have to type the weird curly-F
every time I want to call this? Having charmap open in my taskbar is not my
idea of being productive. Plus, from my cursory glance this looks pretty
similar, if not almost identical, to jQuery...

~~~
tsenart
It is nothing like jQuery. It's a small utility library for easing your life
when dealing with raw javascript. You can use ƒ or fu.

~~~
jessedhillon
It's a lot like jQuery's $ selector mechanism and fluent API. Here's some of
your examples compared to their jQ equivalents:

\---

ƒ('selector1').ƒ('selector2').ƒ('selector3');

 _vs._

$('selector1 selector2 selector3');

\---

ƒ('body').style.background = '#f4f6f8';

 _vs._

$('body')[0].style.background = '#f4f6f8';

\---

for (var i=0; i < 50; i++) { ƒ('ul').appendChild(ƒ().createElement('li')); }

 _vs._

$.each($('ul'), function(index, ul) { for(var i=0; i < 50; i++) {
ul.appendChild(document.createElement('li')); } });

\---

I'm not even a jQuery user but I don't see a lot of difference in your
approach versus jQuery's here. I already only use lightweight libraries like
jQuery or Ext.Core for situations which call for only minor Javascript (read:
not an RIA).

In what situations do you imagine your framework is more useful?

~~~
Tycho
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.

~~~
masklinn
> 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($('<li>'));
    

?

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

than

    
    
        $(document.body).find('ul li:last-child').text("I'M THE OLD GUY!");
    

?

    
    
        for (var i=0; i < 50; i++) {
            ƒ('ul').appendChild(ƒ().createElement('li'));
        }
    

than

    
    
        for (var i=0; i<50; ++i) {
            $('ul').append($('<li>'));
        }
    

?

    
    
        ƒ('ul li:nth-child(2n)', 'style.background = "black"')
    

than

    
    
        $('ul li:nth-child(2n)').css('background', 'black')
    
    ?

~~~
jeresig
Some quickie improvements to the jQuery examples:

    
    
        $('body ul').append($('<li>'));
    

can become:

    
    
        $('body ul').append('<li>');
    

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")
    

or even just:

    
    
        $("ul li:last-child")
    

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

~~~
Sephr

        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.

------
CWIZO
Umm how the hell am I suppose to type "ƒ" every time? I know I can "map" it to
some other character, but that kinda defeats the purpose, no? Other than that
it looks nifty, but since I'm already using jQuery in all of my projects I
don't think I have much use for it.

~~~
pan69
It's a Mac thing. Alt-f prints ƒ on Mac. On any other OS it's a pain in the
ass. Granted, you can use fu but I think it would have been wiser to promote
the usage of fu instead of ƒ.

------
seasoup
Anyone who writes a js library gets props in my book, even if I'll never use
it :) It's a great way to learn about javascript.

------
mtrn
I like one-file less-than-100-LOC type libs.

~~~
tsenart
It's not really meant for general purpose. Just for projects where you want
raw javascript performance and need a little help for traversing and
manipulation of DOM elements as arrays. Like my Chrome extension: Sight:
<https://github.com/tsenart/sight>.

~~~
pizzaburger
Why would I use this over Sizzle in those cases? <http://sizzlejs.com/>

e.g. Sizzle('div:first')

------
tsenart
I am a happy person.

------
tsenart
And it is oh-so-ninja. It's 3Kb size. And 1.6Kb compressed with Closure. All
in 87 LOCs. Beautiful recursion rocks.

~~~
statenjason
Ninjas are stealthy. Carelessly adding four globals and modifying prototypes
is not stealthy.

~~~
apl
Additionally, ninjas never self-promote without adding a disclaimer. Moreover,
ninjas despise calling developers "ninjas."

