andres

Thanks for the recommendation! I wasn't aware of the modules feature or that it was already supported in Chrome/Safari/Firefox/Edge. I'll take a closer look at modules but if you're only targeting edge browsers then maybe you can do dependency management purely natively.

Hi Everyone - author here. I just wanted to give you some background on the project. JohnnyDepp came out of a feature request I got on another project called LoadJS (https://github.com/muicss/loadjs) which is an async loading library. The request was for a higher-level dependency manager that:

  1. lazy-loads files
  2. handles JS/CSS/images
  3. handles nested dependencies
  4. makes it easy to manage dependencies among team members
  5. is extremely lightweight

I realize that many teams use RequireJS to manage dependencies but I saw an opportunity to make a library that could accomplish many of the same things but with a much smaller footprint and a simpler API. I hope you'll give it a try and let me know what you think!

Do you have an example of this technique? I just tried using your technique but I couldn't get it to work.

Can you give an example of how you would do this with mutation observers?

Yes, it comes down to when animation events fire which I believe is after DOMContentLoaded.

In MUI we detect all elements present in the DOM when DOMContentLoaded fires using document.querySelectorAll() and then use SentinelJS to detect elements added after.

Fixed. Thanks.

Yes. SentinelJS will trigger a watch for elements present when DOMContentLoaded fires and for elements added dynamically afterwards. In the Quickstart example, there's an element that is part of the initial HTML payload and a button to add more dynamically: https://jsfiddle.net/muicss/rbqLbjzf/

Sam - I'm very proud of you and your team.

Humans can intellectualize anything which is why we end up in some very dark places. That's why it's important to listen to many voices and avoid certainty.

We use the `onerror` handler to detect load errors on IE9: https://github.com/muicss/loadjs/blob/master/src/loadjs.js#L...

The original bare-bones version of LoadJS was down to 455 bytes and grew to 710 as we added some useful features (e.g. CSS loading, async false support, load retries).

Initially I was hesitant to add CSS support because handling load errors across browsers is very tricky but I think we came up with a good solution [1] that is tested down to IE9 [2].

[1] https://github.com/muicss/loadjs/blob/master/src/loadjs.js#L...

[2] https://github.com/muicss/loadjs/blob/master/test/tests.js#L...

Hi Everyone - This is Andres, the lead author of MUI. It's exciting to see the project on HN and I'm glad to see some folks are finding it useful. Please let me know if you have any questions or suggestions!

The Werkzeug password hasher looks interesting. It uses PBKDF2 under the hood but bcrypt seems to be considered more secure: http://security.stackexchange.com/questions/4789/most-secure...

I wasn't aware of it but Cookiecutter looks interesting!

How does dysel do sequential loading? Dynamically loaded script tags default to async=true so I think this code loads/executes scripts asynchronously:

https://github.com/sun2rise/dysel/blob/master/dist/dysel.js#...

That's a good suggestion but it looks like the minifier removes "continue" automatically: https://raw.githubusercontent.com/muicss/loadjs/master/dist/...

Arrow functions would be great but then we'd have to drop support for browsers that don't support ES6.

I just shaved off another 3 bytes so LoadJS is now 503 bytes (minified + gzipped). HN - If you see a way to get below 500 bytes please let me know!

https://github.com/muicss/loadjs/blob/master/src/loadjs.js

Here are some of the changes:

  * Replaced for-loops with while-loops [1]
  * Removed un-necessary code in the script loading function [2][3]
  * Removed setTimeout wrapper [4][5]

[1] https://github.com/muicss/loadjs/blob/master/src/loadjs.js#L...

[2] https://github.com/muicss/loadjs/blob/master/src/loadjs.js#L...

[3] https://github.com/muicss/loadjs/blob/8d380e1f6c2af431b08088...

[4] https://github.com/muicss/loadjs/blob/master/src/loadjs.js#L...

[5] https://github.com/muicss/loadjs/blob/8d380e1f6c2af431b08088...

Author of MUI here - It's awesome to see Pokedex on HN! Pokedex uses the MUI CSS framework to great effect. We put a lot of work into making the library small and light and we'd love to see more developers take it for a spin so please try it out for your next project. https://www.muicss.com

I'd been using $script for quite a while until I noticed that it was executing callbacks even when the dependency didn't load. After looking at the source code, I realized that it's because it was designed to work with legacy browsers that don't have onerror callbacks. Since I'm only focused on modern browsers and $script isn't maintained anymore, I wrote LoadJS to add success/fail callback support.

LoadJS is an extremely lightweight async loader/dependency manager that is meant to be embedded on every pageload. It has a payload size of 590 bytes (minified + gzipped).

RequireJS is a fully-featured dependency manager that works in legacy browsers. It has a payload size of 6.2KB (minified + gzipped).

Great, thanks for the info. If there's anything I can do on my end, let me know.

What are the symptoms? Please shoot me an email with more info! (andres@muicss.com)

If you have a second check out MUI, which is a lightweight Material Design framework that addresses some of your technical concerns: https://www.muicss.com

Let me know what you think!

I think the Material Design spec will evolve but the design principles are sound and the paper metaphor is useful. With MUI I tried to focus on the core elements and leave the more stylized design decisions up to the app designer.

I think it's beyond the scope for the core library but it'd be a good addition as a plugin further down the road.

You can use mixins from the source SASS files to do most of this. I was thinking about formalizing it and including it in the documentation but I wanted to get some feedback first.

https://github.com/amorey/mui/blob/master/src/sass/mui/_butt...

Thanks! The drawer isn't a UI component provided by the framework (it's custom code in the documentation).

Can you point out which animations feel too abrupt?

Agreed! By design MUI only implements some of the core features of Material Design so that sites don't start to feel like they were designed with a certain framework.