LeaVerou / bliss

Blissful JavaScript
http://blissfuljs.com
MIT License
2.39k stars 101 forks source link

Plugins catalog #125

Open dzek69 opened 8 years ago

dzek69 commented 8 years ago

I'd be nice to have some sort of plugins catalog, so users interested would easly find useful stuff to use with Bliss. Switching from jQuery to anything-else requires rewriting a lof of stuff, cause most ready-to-use-browser-stuff-in-javascript requires jQuery to work (I'm rewriting UI in my CMS with Bliss, but I still have to load jQuery, cause of all those plugins).

And with "plugins" I don't mean only some kind of sliders, lightboxes or other-big-things, but also small methods, like the one I wrote yesterday - to temporarily disable the whole form, remembering which inputs was disabled before disabling the form (so they stay disabled after re-enabling the form).

voxpelli commented 8 years ago

This feels somewhat related to @LeaVerou's earlier issue here: https://github.com/h5bp/lazyweb-requests/issues/178

That issue resulted in eg: http://youmightnotneedjqueryplugins.com/

Another vanilla-js plugin site that was mentioned there was: http://microjs.com/

For most things those sites would probably serve the purpose well. Perhaps there's a use case for some Bliss-specific things as well, but since the purpose of Bliss is to make vanilla js-simpler it feels weird to make non-vanilla js plugins that only work with Bliss and if the plugins are vanilla then those existing sites and the references issue would solve this fairly well I think.

dperrymorrow commented 8 years ago

One thing i really like about bliss is that it adds functions that are as convenient as prototype extensions but yet much less intrusive by defining _ on arrays and elements.

plugins / extensions to bliss could be as simple as a way to define _ on other native objects. for example:

"my string"._.capitalize();
// My String

then there could be a bliss extension libs organized by object type, String, Date, Number ect..

LeaVerou commented 8 years ago

That’s a great idea @dperrymorrow! Love it!!

LeaVerou commented 8 years ago

In general, we should have a list of “official” plugins, like we do in Prism. These end up getting more contributions from the community so are more polished than random plugins people post on their website or StackOverflow. However, that means adding at least one more page to the website, so I do need to figure out some templating solution. Maybe I'll extend transform.js to accept URIs, that'd be pretty cool :)

nevf commented 8 years ago

+1 for the Plugins page. Just having it on Github would be a good start. And like @dperrymorrow the win is to have plugins accessible via. _ on elements etc.

Also a short boilerplate example of writing a plugin using $.add() would be nice.

LeaVerou commented 8 years ago

Short example I actually have in my current Bliss-powered work project:

// Add or remove a CSS class based on whether the second param is truthy or falsy.
$.add("toggleClass", function(className, addIf) {
    this.classList[addIf? "add" : "remove"](className);
});

// Provide shortcuts to long property chains in class definitions
$.proxy = $.classProps.proxy = $.overload(function(obj, property, proxy) {
    Object.defineProperty(obj, property, {
        get: function() {
            return this[proxy][property];
        },
        configurable: true,
        enumerable: true
    });

    return obj;
});
nevf commented 8 years ago

@LeaVerou Thanks, very helpful. However $.overload() isn't documented and $.classProps is only touched upon. ;-)

LeaVerou commented 8 years ago

$.overload() is not crucial here, it just saves you from having to handle two signatures of the function, one with an object of key-value pairs and one with 2 arguments (one key and one value).

@dperrymorrow could you please add some documentation for $.overload()? (I do remember correctly that you wrote it, right? If not, sorry!) Even a stub with a 1 line description would be something.

dperrymorrow commented 8 years ago

sure thing @LeaVerou will try to get to that today.

dperrymorrow commented 8 years ago

added documentation, https://github.com/LeaVerou/bliss/commit/eb0948b30309788b1c0600c3b3fe7bc5c4b75aee http://blissfuljs.com/docs.html#fn-overload

LeaVerou commented 8 years ago

Fantastic, thanks!!

It might be good to have 2 keys in the object example.