12 ms·

ƒu.js - The Functional DOM traversing library.

55 points by tsenart 16y ago

mtrn 16y ago
I like one-file less-than-100-LOC type libs.
- tsenart 16y ago
  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 https://github.com/tsenart/sight.
  - pizzaburger 16y ago
    Why would I use this over Sizzle in those cases? http://sizzlejs.com/ http://sizzlejs.com/ e.g. Sizzle('div:first')
acabal 16y ago
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 16y ago
  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 16y ago
    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 16y ago
      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 16y ago
        > 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 16y ago
        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 16y ago
        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.
  - zootm 16y ago
    I don't think "nothing like jQuery" is really correct here; its API is very similar to jQuery. In fact, it behaves a lot like a very small subset of jQuery, as a neighbouring post to this one points out. I can imagine it's handy if one wants something like the jQuery API but doesn't need support for all of the CSS selector features, or for older browsers, and wants to save a few bytes on downloads, given that it's much smaller (the uncompressed jQuery source is something like 60 times the size of this library, although in its defence that includes inline documentation).
tsenart 16y ago
And it is oh-so-ninja. It's 3Kb size. And 1.6Kb compressed with Closure. All in 87 LOCs. Beautiful recursion rocks.
- statenjason 16y ago
  Ninjas are stealthy. Carelessly adding four globals and modifying prototypes is not stealthy.
  - apl 16y ago
    Additionally, ninjas never self-promote without adding a disclaimer. Moreover, ninjas despise calling developers "ninjas."
julian37 16y ago
tsenart, you submitted the same thing two days ago: http://news.ycombinator.com/item?id=2146944 http://news.ycombinator.com/item?id=2146944 At the very least you could link to the previous discussion, no?
- tsenart 16y ago
  Oh well I am sorry. I linked the other way though. Thanks for noting.
- deleted 16y ago
  [deleted]
Sephr 16y ago
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 16y ago
  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 16y ago
    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.
  - Sephr 16y ago
seasoup 16y ago
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.
CWIZO 16y ago
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 16y ago
  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 ƒ.
- deleted 16y ago
  [deleted]
woogley 16y ago
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_javascript https://developer.mozilla.org/en/a_re-introduction_to_javasc...
- tsenart 16y ago
  I do that to be able to do: ƒ('ul li:nth-child(2n)', 'style.background = "black"').
  - jessedhillon 16y ago
    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 16y ago
      Well... Actually I do.
      - jessedhillon 16y ago
        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.
- jhuni 16y ago
  Using JavaScript is a bad practice!
tsenart 16y ago
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 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)
tsenart 16y ago
I am a happy person.

55 points by tsenart 16y ago

mtrn 16y ago

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

tsenart 16y ago
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 https://github.com/tsenart/sight.
- pizzaburger 16y ago
  Why would I use this over Sizzle in those cases? http://sizzlejs.com/ http://sizzlejs.com/ e.g. Sizzle('div:first')

acabal 16y ago

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 16y ago
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 16y ago
  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 16y ago
    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 16y ago
      > 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 16y ago
        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 16y ago
        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.
- zootm 16y ago
  I don't think "nothing like jQuery" is really correct here; its API is very similar to jQuery. In fact, it behaves a lot like a very small subset of jQuery, as a neighbouring post to this one points out. I can imagine it's handy if one wants something like the jQuery API but doesn't need support for all of the CSS selector features, or for older browsers, and wants to save a few bytes on downloads, given that it's much smaller (the uncompressed jQuery source is something like 60 times the size of this library, although in its defence that includes inline documentation).

tsenart 16y ago

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

statenjason 16y ago
Ninjas are stealthy. Carelessly adding four globals and modifying prototypes is not stealthy.
- apl 16y ago
  Additionally, ninjas never self-promote without adding a disclaimer. Moreover, ninjas despise calling developers "ninjas."

julian37 16y ago

tsenart, you submitted the same thing two days ago: http://news.ycombinator.com/item?id=2146944 http://news.ycombinator.com/item?id=2146944 At the very least you could link to the previous discussion, no?

tsenart 16y ago
Oh well I am sorry. I linked the other way though. Thanks for noting.
deleted 16y ago
[deleted]

Sephr 16y ago

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 16y ago
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 16y ago
  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.
- Sephr 16y ago

seasoup 16y ago

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.

CWIZO 16y ago

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 16y ago
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 ƒ.
deleted 16y ago
[deleted]

woogley 16y ago

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_javascript https://developer.mozilla.org/en/a_re-introduction_to_javasc...

tsenart 16y ago
I do that to be able to do: ƒ('ul li:nth-child(2n)', 'style.background = "black"').
- jessedhillon 16y ago
  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 16y ago
    Well... Actually I do.
    - jessedhillon 16y ago
      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.
jhuni 16y ago
Using JavaScript is a bad practice!

tsenart 16y ago

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

tsenart 16y ago

I am a happy person.