7 ms·

Show HN: Umbrella JS, a 2.5kb jQuery alternative

132 points by franciscop 8y ago

franciscop 8y ago
I submitted this 3 years back [1] when I was starting. But now I think it's finished and well polished, so I am resubmitting it. I am happy to say that I don't normally find bugs anymore and the bug reports have slowed down while adoption has skyrocketed [2] [3] It follows loosely a subset of jQuery methods, but it adds some others where relevant for common JS patterns (.handle() == .on() + e.preventDefault()) and the existing ones are generally more flexible. [1] https://news.ycombinator.com/item?id=10954191 https://news.ycombinator.com/item?id=10954191 [2] https://npm-stat.com/charts.html?package=umbrellajs&from=2016-01-01 https://npm-stat.com/charts.html?package=umbrellajs&from=201... [3] https://www.jsdelivr.com/package/npm/umbrellajs https://www.jsdelivr.com/package/npm/umbrellajs
- brennebeck 8y ago
  Looks interesting. How compatible with jquery is it? You say a subset, but is that an exact subset that would pass tests for those methods? Either way, well done!
  - sonofblah 8y ago
    Is this criterion keeping you from using the framework right now?
  - franciscop 8y ago
    No, no method would pass all of the tests for said method in jQuery. I believe a part of those tests in jQuery are retroactive to settle the behavior of very edge undocumented cases, which might be different in Umbrella.js. I did in fact try to improve the size of jQuery, but the tests are too coupled to the internal behavior of the methods, even if undocumented and (potentially) unintended initially. So it was very difficult even to change the most basic things, let alone change the internal structure of the whole method. With Umbrella JS I'm trying to get to somewhere closer to native Javascript than jQuery. See for instance the arguments of any looping function (follows similar to the native arrays), or how things like .addClass(name) [1] are thin wrappers around .classList.add(name) (but quite more permissive/flexible). So it will follow closer to classList behavior than to whatever is defined in jQuery's tests, which is a win-win IMHO (since it also makes for a much smaller size, compare to jQuery's .addClass(name) [2]). [1] https://github.com/franciscop/umbrella/blob/master/src/plugins/addclass/addclass.js https://github.com/franciscop/umbrella/blob/master/src/plugi... [2] https://github.com/jquery/jquery/blob/master/src/attributes/classes.js#L27 https://github.com/jquery/jquery/blob/master/src/attributes/...
- pvorb 8y ago
  Nice that you're using npm-stat.com for checking adoption. I should use your library on the site.
  - franciscop 8y ago
    Thank for npm-stat! I use it a lot and love it, see my other repos from my website (in my profile). Not sure how much sense it makes for Umbrella JS though, since traditionally it'd be used under a CDN but now with webpack it's treated as another dependency. Indeed, the CDN has remain constant-ish but the npm one has grown quite a bit in the last year. Feel free to use Umbrella JS and ask me any question!
    - pvorb 8y ago
      Yeah, right. I thought I still had jQuery in there and thought about replacing it. But now as I looked at the code I realized that it's already mostly using Vanilla JS.
      - franciscop 8y ago
        Oh really? I was surprised that there was even jQuery, and after checking it does seem there's a bit of jQuery there. "$" matches 53 times here: https://github.com/pvorb/npm-stat.com/blob/develop/src/main/js/charts.js https://github.com/pvorb/npm-stat.com/blob/develop/src/main/...
        pvorb 8y ago
        So I was wrong again. ;-) Just checked the package.json, but it's a static JS dependency that's not transpiled using Webpack.
simonw 8y ago
This looks pretty great - I really like the look of Picnic, the author's lightweight (10KB) bootstrap alternative as well: https://github.com/franciscop/picnic https://github.com/franciscop/picnic
- franciscop 8y ago
  Thanks! I have two other libraries (besides Umbrella JS) that I really care about: Picnic CSS [1] and Server.js [2]. I'll be trying to do some cleaning in my spare time, but both of those require humongous amounts of work to get to the quality level of Umbrella JS. [1] https://picnicss.com/ https://picnicss.com/ [2] https://serverjs.io/ https://serverjs.io/
  - pritambaral 8y ago
    Two suggestions, both slightly pedantic: 1. I went by the name and typed picniccss.com instead of picnicss.com and it didn't work. picnic-es-es does sound weird in one's head too. 2. On the website, you say '10kb' but should probably use '10kB'. The small-b is conventionally used to indicate bits and the capital-b is used to indicate bytes.
    - postcss 8y ago
      are u joking?
throwawaysky9 8y ago
I don't want to be "that guy", but haven't most people moved on to something like Vue instead of manipulating the DOM directly? Every developer I've worked with learned the basics of Vue quickly (less than a day) and marveled at how great it was compared to manipulating the DOM through jQuery (or something similar like Umbrella JS). But sure, there are edge cases where jQuery and similar libs still serve a purpose.
- simonw 8y ago
  Vue and React make sense for large SPA-style applications, but I often find myself wanting to drop a few lines of JavaScript onto a page to implement something simple without pulling in a massive framework dependency that requires a webpack compile step.
  - mmargerum 8y ago
    You don’t have to use webpack with vue. Only if you want single file components. You literally just include in script line and you can use vue. No harder than jquery.
  - throwawaysky9 8y ago
    jQuery is 84 KB minimized, while Vue is 85 KB. Not much of a difference (although, granted, Umbrella JS is notably smaller). You don't necessarily need Webpack for Vue, you can just include Vue in a script tag and write your code.
    - wild_preference 8y ago
      But it’s also about abstraction overhead. You wouldn’t bring in Vue to add a Select All button that checks a bunch of checkboxes. You wouldn’t use jQuery/Umbrella for that either, but there might then exist a middleground where you would. e.g. any time you’re adding JS to an existing page but don’t want a whole component abstraction.
      - gremlinsinc 8y ago
paradite 8y ago
Slightly off topic, but I have this OCD that my brain hurts when I see people use wrong capitalization for products. > It is strongly influenced by jquery... Please use jQuery instead, thank you.
- anothergoogler 8y ago
  Not only that, a code comment on the homepage refers to "ajax" rather than "AJAX". And would you believe that in the page copy, "JS" isn't in an <abbr> tag? The nerve of some people!
- franciscop 8y ago
  English is my 3rd language so please forgive some typos and inaccuracies like these. I understand that these are similar for some people as when I see people using "their" when they mean "they're". I agree it looks less professional, so I'll try fixing those. Is there any other bit that sounds off? Edit: That should be fixed! Also a couple of missing `css` => `CSS`, `umbrella` => `Umbrella`, etc.
  - deleted 8y ago
    [deleted]
  - paradite 8y ago
    Thank you for the quick fix. And no, I don't go crazy over grammar or spelling (English is my second language as well). I think the website looks pretty cool and well written overall.
- deleted 8y ago
  [deleted]
- maxerickson 8y ago
  The phrase you are looking for is "pet peeve".
  - alangpierce 8y ago
    +1. Using "OCD" casually to mean "things that annoy me when maybe they shouldn't" is a bit insensitive to people with real diagnosable OCD. Elements of OCD, like intrusive thoughts, are present in almost everyone, but usually the term "OCD" is reserved for cases where it has a significant negative impact on life. https://en.wikipedia.org/wiki/Obsessive%E2%80%93compulsive_disorder https://en.wikipedia.org/wiki/Obsessive%E2%80%93compulsive_d...
aphextron 8y ago
Is anyone actually still using jQuery in a new project? I can’t think of a single good reason to do so.
- dagoat 8y ago
  You still need jQuery for Bootstrap
  - tenryuu 8y ago
    I've always used bootstrap native, saved the extra request for jq
  - aphextron 8y ago
    Another great reason to never use Bootstrap
    - boubiyeah 8y ago
      Not sure why you get downvoted haha
  - is_true 8y ago
    It depends on what you need. You could use the grid without jquery
- jister 8y ago
  Sure, why not?!
- krishanath 8y ago
  jQuery is a library of shortcuts. Everything you can do using jQuery you can do without jQuery, but that's like saying everything you can do in Excel you can do with just a Calculator app. Yes, it is possible, but why would you want to? When you do things like drag & drop and interactive resize you have to query DOM to get position and sizes, and perform hit detection, and you have to manipulate DOM directly. jQuery is very convenient for these kinds of things.
GuB-42 8y ago
How does it fare when it comes to browser compatibility? IIRC, one of the main selling point of jQuery is compatibility with browsers like IE6.
- franciscop 8y ago
  jQuery doesn't claim compatibility with IE6, they dropped it on jQuery 2.0 to IE8+: https://jquery.com/browser-support/ https://jquery.com/browser-support/ Umbrella JS supports Internet Explorer 11+, with some of the known bugs and wont-fix here: https://github.com/franciscop/umbrella#support-ie11 https://github.com/franciscop/umbrella#support-ie11 There is a polyfill to help here: https://github.com/franciscop/umbrella/blob/master/polyfill.js https://github.com/franciscop/umbrella/blob/master/polyfill....
  - kristianp 8y ago
    Thanks for those links. Also the latest jQuery now only supports Internet Explorer: 9+
- paulie_a 8y ago
  Sidenote, everything and every web site should aggressively drop support for ie6.
  - pvorb 8y ago
    Why? If your website was IE6-compatible I'd salute you. Drpping support for legacy systems is something that's done too carelessly these days. PS: I admit that it's hard to support IE6 when it's no longer supperted by MS itself.
    - paulie_a 8y ago
      Ie6 was is a piece of shit and a security issue. it needs to go away. I would go so far as saying websites should actively block that browser. I don't care about some legacy compatible bullshit. Ie6 was a scourge on the internet. If some corporation doesn't want to upgrade, that's their problem.
bufferoverflow 8y ago
There are established tiny jQuery alternatives: Zepto: https://github.com/madrobby/zepto https://github.com/madrobby/zepto Cash: https://github.com/kenwheeler/cash https://github.com/kenwheeler/cash How is yours better?
- franciscop 8y ago
  Zepto is intended as a full clone; objectives are quite different from Umbrella, so I don't see an overlap here since size is not such a priority. Using plugins? Zepto. Care about size a lot? Umbrella. Flexible methods? Umbrella. About Cash, first Umbrella is about 0.5x the size. The version 1.0 of both were released the same year (Umbrella a bit later), so back then it was not established. Then, there are these differences (opinionated ofc): Better documentation in Umbrella. As an example, let's see the .addClass() in Cash [1] and in Umbrella [2]. Umbrella has many input examples, a lot more flexibility in the arguments (functions, comma-separated, etc), practical explained examples and related methods. This holds true for every single method. Better testing in Umbrella. Compare Cash tests [3] with Umbrella tests [4]; Cash has 663 LOC of testing while Umbrella has 2234 LOC, a 3.3x improvement. Not only that, but Umbrella has a public testing page so you can test it in any browser you want: https://umbrellajs.com/tests https://umbrellajs.com/tests Cleaner code in Umbrella. If you want to modify any method, it will be self-contained in `src/plugins/NAME/`. In there you will find the relevant documentation displayed from the readme.md, the relevant tests and the actual code. To modify Cash's addClass you'd have to chase down the code [5], the tests [6] and the documentation [1] while in Umbrella you'd only need to go to the plugin folder [7] More methods in Cash. This is the one I've seen that seems nicer, since it supports many more methods. Still, Umbrella's objectives is to be the minimum useful set. .insert() is enough and there's no need for .insertBefore() IMHO, but that's just different opinions. Some people prefer to have the choice, so this one is for Cash. Extra useful methods in Umbrella. .handle() is the common pair of .on() + e.preventDefault(). .size() returns an object with the size of the element like { width: 20, height: 20, top: 10, ... }. Better methods in Umbrella. Examples: .append(), .prepend(), etc will clone events and values (if any) from the DOM. More functions accepted as arguments. [1] Cash docs: https://github.com/kenwheeler/cash#fnaddclass- https://github.com/kenwheeler/cash#fnaddclass- [2] Umbrella docs: https://umbrellajs.com/documentation#addclass https://umbrellajs.com/documentation#addclass [3] Cash tests: https://github.com/kenwheeler/cash/blob/master/test/index.js https://github.com/kenwheeler/cash/blob/master/test/index.js [4] Umbrella tests: https://github.com/franciscop/umbrella/blob/master/docs/test.js https://github.com/franciscop/umbrella/blob/master/docs/test... [5] Cash addClass code: https://github.com/kenwheeler/cash/tree/master/src/attributes https://github.com/kenwheeler/cash/tree/master/src/attribute... [6] Cash addClass tests: https://github.com/kenwheeler/cash/blob/master/test/index.js#L57 https://github.com/kenwheeler/cash/blob/master/test/index.js... [7] Umbrella addClass folder: https://github.com/franciscop/umbrella/tree/master/src/plugins/addclass https://github.com/franciscop/umbrella/tree/master/src/plugi...
hughes 8y ago
The fake scrollbar on the documentation page is infuriatingly nonfunctional.
- franciscop 8y ago
  Uh? There is definitely no purposefully fake scrollbar, could you please share a screenshot and/or the device and browser you are using please? Ideally in Github as an issue: https://github.com/franciscop/umbrella/issues/new https://github.com/franciscop/umbrella/issues/new , but here is fine as well.
  - acqq 8y ago
    I believe hughes means: "when you click on an entry of the documentation, e.g. '.wrap' in the "Contents" you see a scrolling animation instead of just the entry you'd like to read." So not "scrollbar" but "scrolling" as the result of the click, on the documentation page: https://umbrellajs.com/documentation https://umbrellajs.com/documentation I'm one of those who have the problem with the animations in the UIs too. Believe or not some people get effectively a real sickness feeling just by looking at some specific movements, in my case that page manages to achieve that.
    - franciscop 8y ago
      Ah I see, that makes sense. Unfortunately for me it's the opposite! These kind of animations helps me know where I am, if it jumps suddently without any notice I tend to not know the size/position I am in respectto the whole page.
      - hughes 8y ago
        No, I really meant that the scrollbar was broken. I wasn't clickable or draggable and was not a system scrollbar. I'm pretty confused now, as it seems to be working.
11235813213455 8y ago
my 1.9KB version: https://gist.github.com/caub/437e5d98ee9260df811628f7900c1c84 https://gist.github.com/caub/437e5d98ee9260df811628f7900c1c8...
intellix 8y ago
Angular Ivy hello world is 2.5kb as well
- franciscop 8y ago
  That is a very early, highly experimental minimal demo from what I found...
trumped 8y ago
oh good, maybe that will help reduce the general reliance on CDNs... (me dreaming)
Joyfield 8y ago
KB != kb.

132 points by franciscop 8y ago

I submitted this 3 years back [1] when I was starting. But now I think it's finished and well polished, so I am resubmitting it. I am happy to say that I don't normally find bugs anymore and the bug reports have slowed down while adoption has skyrocketed [2] [3] It follows loosely a subset of jQuery methods, but it adds some others where relevant for common JS patterns (.handle() == .on() + e.preventDefault()) and the existing ones are generally more flexible. [1] https://news.ycombinator.com/item?id=10954191 https://news.ycombinator.com/item?id=10954191 [2] https://npm-stat.com/charts.html?package=umbrellajs&from=2016-01-01 https://npm-stat.com/charts.html?package=umbrellajs&from=201... [3] https://www.jsdelivr.com/package/npm/umbrellajs https://www.jsdelivr.com/package/npm/umbrellajs

brennebeck 8y ago
Looks interesting. How compatible with jquery is it? You say a subset, but is that an exact subset that would pass tests for those methods? Either way, well done!
- sonofblah 8y ago
  Is this criterion keeping you from using the framework right now?
- franciscop 8y ago
  No, no method would pass all of the tests for said method in jQuery. I believe a part of those tests in jQuery are retroactive to settle the behavior of very edge undocumented cases, which might be different in Umbrella.js. I did in fact try to improve the size of jQuery, but the tests are too coupled to the internal behavior of the methods, even if undocumented and (potentially) unintended initially. So it was very difficult even to change the most basic things, let alone change the internal structure of the whole method. With Umbrella JS I'm trying to get to somewhere closer to native Javascript than jQuery. See for instance the arguments of any looping function (follows similar to the native arrays), or how things like .addClass(name) [1] are thin wrappers around .classList.add(name) (but quite more permissive/flexible). So it will follow closer to classList behavior than to whatever is defined in jQuery's tests, which is a win-win IMHO (since it also makes for a much smaller size, compare to jQuery's .addClass(name) [2]). [1] https://github.com/franciscop/umbrella/blob/master/src/plugins/addclass/addclass.js https://github.com/franciscop/umbrella/blob/master/src/plugi... [2] https://github.com/jquery/jquery/blob/master/src/attributes/classes.js#L27 https://github.com/jquery/jquery/blob/master/src/attributes/...
pvorb 8y ago
Nice that you're using npm-stat.com for checking adoption. I should use your library on the site.
- franciscop 8y ago
  Thank for npm-stat! I use it a lot and love it, see my other repos from my website (in my profile). Not sure how much sense it makes for Umbrella JS though, since traditionally it'd be used under a CDN but now with webpack it's treated as another dependency. Indeed, the CDN has remain constant-ish but the npm one has grown quite a bit in the last year. Feel free to use Umbrella JS and ask me any question!
  - pvorb 8y ago
    Yeah, right. I thought I still had jQuery in there and thought about replacing it. But now as I looked at the code I realized that it's already mostly using Vanilla JS.
    - franciscop 8y ago
      Oh really? I was surprised that there was even jQuery, and after checking it does seem there's a bit of jQuery there. "$" matches 53 times here: https://github.com/pvorb/npm-stat.com/blob/develop/src/main/js/charts.js https://github.com/pvorb/npm-stat.com/blob/develop/src/main/...
      - pvorb 8y ago
        So I was wrong again. ;-) Just checked the package.json, but it's a static JS dependency that's not transpiled using Webpack.

simonw 8y ago

This looks pretty great - I really like the look of Picnic, the author's lightweight (10KB) bootstrap alternative as well: https://github.com/franciscop/picnic https://github.com/franciscop/picnic

franciscop 8y ago
Thanks! I have two other libraries (besides Umbrella JS) that I really care about: Picnic CSS [1] and Server.js [2]. I'll be trying to do some cleaning in my spare time, but both of those require humongous amounts of work to get to the quality level of Umbrella JS. [1] https://picnicss.com/ https://picnicss.com/ [2] https://serverjs.io/ https://serverjs.io/
- pritambaral 8y ago
  Two suggestions, both slightly pedantic: 1. I went by the name and typed picniccss.com instead of picnicss.com and it didn't work. picnic-es-es does sound weird in one's head too. 2. On the website, you say '10kb' but should probably use '10kB'. The small-b is conventionally used to indicate bits and the capital-b is used to indicate bytes.
  - postcss 8y ago
    are u joking?

throwawaysky9 8y ago

I don't want to be "that guy", but haven't most people moved on to something like Vue instead of manipulating the DOM directly? Every developer I've worked with learned the basics of Vue quickly (less than a day) and marveled at how great it was compared to manipulating the DOM through jQuery (or something similar like Umbrella JS). But sure, there are edge cases where jQuery and similar libs still serve a purpose.

simonw 8y ago
Vue and React make sense for large SPA-style applications, but I often find myself wanting to drop a few lines of JavaScript onto a page to implement something simple without pulling in a massive framework dependency that requires a webpack compile step.
- mmargerum 8y ago
  You don’t have to use webpack with vue. Only if you want single file components. You literally just include in script line and you can use vue. No harder than jquery.
- throwawaysky9 8y ago
  jQuery is 84 KB minimized, while Vue is 85 KB. Not much of a difference (although, granted, Umbrella JS is notably smaller). You don't necessarily need Webpack for Vue, you can just include Vue in a script tag and write your code.
  - wild_preference 8y ago
    But it’s also about abstraction overhead. You wouldn’t bring in Vue to add a Select All button that checks a bunch of checkboxes. You wouldn’t use jQuery/Umbrella for that either, but there might then exist a middleground where you would. e.g. any time you’re adding JS to an existing page but don’t want a whole component abstraction.
    - gremlinsinc 8y ago

paradite 8y ago

Slightly off topic, but I have this OCD that my brain hurts when I see people use wrong capitalization for products. > It is strongly influenced by jquery... Please use jQuery instead, thank you.

anothergoogler 8y ago
Not only that, a code comment on the homepage refers to "ajax" rather than "AJAX". And would you believe that in the page copy, "JS" isn't in an <abbr> tag? The nerve of some people!
franciscop 8y ago
English is my 3rd language so please forgive some typos and inaccuracies like these. I understand that these are similar for some people as when I see people using "their" when they mean "they're". I agree it looks less professional, so I'll try fixing those. Is there any other bit that sounds off? Edit: That should be fixed! Also a couple of missing `css` => `CSS`, `umbrella` => `Umbrella`, etc.
- deleted 8y ago
  [deleted]
- paradite 8y ago
  Thank you for the quick fix. And no, I don't go crazy over grammar or spelling (English is my second language as well). I think the website looks pretty cool and well written overall.
deleted 8y ago
[deleted]
maxerickson 8y ago
The phrase you are looking for is "pet peeve".
- alangpierce 8y ago
  +1. Using "OCD" casually to mean "things that annoy me when maybe they shouldn't" is a bit insensitive to people with real diagnosable OCD. Elements of OCD, like intrusive thoughts, are present in almost everyone, but usually the term "OCD" is reserved for cases where it has a significant negative impact on life. https://en.wikipedia.org/wiki/Obsessive%E2%80%93compulsive_disorder https://en.wikipedia.org/wiki/Obsessive%E2%80%93compulsive_d...

aphextron 8y ago

Is anyone actually still using jQuery in a new project? I can’t think of a single good reason to do so.

dagoat 8y ago
You still need jQuery for Bootstrap
- tenryuu 8y ago
  I've always used bootstrap native, saved the extra request for jq
- aphextron 8y ago
  Another great reason to never use Bootstrap
  - boubiyeah 8y ago
    Not sure why you get downvoted haha
- is_true 8y ago
  It depends on what you need. You could use the grid without jquery
jister 8y ago
Sure, why not?!
krishanath 8y ago
jQuery is a library of shortcuts. Everything you can do using jQuery you can do without jQuery, but that's like saying everything you can do in Excel you can do with just a Calculator app. Yes, it is possible, but why would you want to? When you do things like drag & drop and interactive resize you have to query DOM to get position and sizes, and perform hit detection, and you have to manipulate DOM directly. jQuery is very convenient for these kinds of things.

GuB-42 8y ago

How does it fare when it comes to browser compatibility? IIRC, one of the main selling point of jQuery is compatibility with browsers like IE6.

franciscop 8y ago
jQuery doesn't claim compatibility with IE6, they dropped it on jQuery 2.0 to IE8+: https://jquery.com/browser-support/ https://jquery.com/browser-support/ Umbrella JS supports Internet Explorer 11+, with some of the known bugs and wont-fix here: https://github.com/franciscop/umbrella#support-ie11 https://github.com/franciscop/umbrella#support-ie11 There is a polyfill to help here: https://github.com/franciscop/umbrella/blob/master/polyfill.js https://github.com/franciscop/umbrella/blob/master/polyfill....
- kristianp 8y ago
  Thanks for those links. Also the latest jQuery now only supports Internet Explorer: 9+
paulie_a 8y ago
Sidenote, everything and every web site should aggressively drop support for ie6.
- pvorb 8y ago
  Why? If your website was IE6-compatible I'd salute you. Drpping support for legacy systems is something that's done too carelessly these days. PS: I admit that it's hard to support IE6 when it's no longer supperted by MS itself.
  - paulie_a 8y ago
    Ie6 was is a piece of shit and a security issue. it needs to go away. I would go so far as saying websites should actively block that browser. I don't care about some legacy compatible bullshit. Ie6 was a scourge on the internet. If some corporation doesn't want to upgrade, that's their problem.

bufferoverflow 8y ago

There are established tiny jQuery alternatives: Zepto: https://github.com/madrobby/zepto https://github.com/madrobby/zepto Cash: https://github.com/kenwheeler/cash https://github.com/kenwheeler/cash How is yours better?

franciscop 8y ago
Zepto is intended as a full clone; objectives are quite different from Umbrella, so I don't see an overlap here since size is not such a priority. Using plugins? Zepto. Care about size a lot? Umbrella. Flexible methods? Umbrella. About Cash, first Umbrella is about 0.5x the size. The version 1.0 of both were released the same year (Umbrella a bit later), so back then it was not established. Then, there are these differences (opinionated ofc): Better documentation in Umbrella. As an example, let's see the .addClass() in Cash [1] and in Umbrella [2]. Umbrella has many input examples, a lot more flexibility in the arguments (functions, comma-separated, etc), practical explained examples and related methods. This holds true for every single method. Better testing in Umbrella. Compare Cash tests [3] with Umbrella tests [4]; Cash has 663 LOC of testing while Umbrella has 2234 LOC, a 3.3x improvement. Not only that, but Umbrella has a public testing page so you can test it in any browser you want: https://umbrellajs.com/tests https://umbrellajs.com/tests Cleaner code in Umbrella. If you want to modify any method, it will be self-contained in `src/plugins/NAME/`. In there you will find the relevant documentation displayed from the readme.md, the relevant tests and the actual code. To modify Cash's addClass you'd have to chase down the code [5], the tests [6] and the documentation [1] while in Umbrella you'd only need to go to the plugin folder [7] More methods in Cash. This is the one I've seen that seems nicer, since it supports many more methods. Still, Umbrella's objectives is to be the minimum useful set. .insert() is enough and there's no need for .insertBefore() IMHO, but that's just different opinions. Some people prefer to have the choice, so this one is for Cash. Extra useful methods in Umbrella. .handle() is the common pair of .on() + e.preventDefault(). .size() returns an object with the size of the element like { width: 20, height: 20, top: 10, ... }. Better methods in Umbrella. Examples: .append(), .prepend(), etc will clone events and values (if any) from the DOM. More functions accepted as arguments. [1] Cash docs: https://github.com/kenwheeler/cash#fnaddclass- https://github.com/kenwheeler/cash#fnaddclass- [2] Umbrella docs: https://umbrellajs.com/documentation#addclass https://umbrellajs.com/documentation#addclass [3] Cash tests: https://github.com/kenwheeler/cash/blob/master/test/index.js https://github.com/kenwheeler/cash/blob/master/test/index.js [4] Umbrella tests: https://github.com/franciscop/umbrella/blob/master/docs/test.js https://github.com/franciscop/umbrella/blob/master/docs/test... [5] Cash addClass code: https://github.com/kenwheeler/cash/tree/master/src/attributes https://github.com/kenwheeler/cash/tree/master/src/attribute... [6] Cash addClass tests: https://github.com/kenwheeler/cash/blob/master/test/index.js#L57 https://github.com/kenwheeler/cash/blob/master/test/index.js... [7] Umbrella addClass folder: https://github.com/franciscop/umbrella/tree/master/src/plugins/addclass https://github.com/franciscop/umbrella/tree/master/src/plugi...

hughes 8y ago

The fake scrollbar on the documentation page is infuriatingly nonfunctional.

franciscop 8y ago
Uh? There is definitely no purposefully fake scrollbar, could you please share a screenshot and/or the device and browser you are using please? Ideally in Github as an issue: https://github.com/franciscop/umbrella/issues/new https://github.com/franciscop/umbrella/issues/new , but here is fine as well.
- acqq 8y ago
  I believe hughes means: "when you click on an entry of the documentation, e.g. '.wrap' in the "Contents" you see a scrolling animation instead of just the entry you'd like to read." So not "scrollbar" but "scrolling" as the result of the click, on the documentation page: https://umbrellajs.com/documentation https://umbrellajs.com/documentation I'm one of those who have the problem with the animations in the UIs too. Believe or not some people get effectively a real sickness feeling just by looking at some specific movements, in my case that page manages to achieve that.
  - franciscop 8y ago
    Ah I see, that makes sense. Unfortunately for me it's the opposite! These kind of animations helps me know where I am, if it jumps suddently without any notice I tend to not know the size/position I am in respectto the whole page.
    - hughes 8y ago
      No, I really meant that the scrollbar was broken. I wasn't clickable or draggable and was not a system scrollbar. I'm pretty confused now, as it seems to be working.

11235813213455 8y ago

my 1.9KB version: https://gist.github.com/caub/437e5d98ee9260df811628f7900c1c84 https://gist.github.com/caub/437e5d98ee9260df811628f7900c1c8...

intellix 8y ago

Angular Ivy hello world is 2.5kb as well

franciscop 8y ago
That is a very early, highly experimental minimal demo from what I found...

trumped 8y ago

oh good, maybe that will help reduce the general reliance on CDNs... (me dreaming)

Joyfield 8y ago

KB != kb.