Echo JS 0.11.0

Nifty idea... :-)

Nice tips for dealing with styled-components.  I've been digging react-jss more myself, but it's another interesting approach.  I could also see styled-components working better if you're more content heavy then it's probably a better approach vs. more of an application.

Nothing new in this vs. every other release article, and a bonus advertisement for the sponsored produce.

Really interesting, but not sure if storybook really works to demonstrate these kinds of components.  Would love to see a practical demonstration video.

I would, frankly question the need for any version of IE at this point...  The extra overhead is significantly higher for supporting anything that isn't a modern browser, Edge, Chrome and Firefax update regularly (what is your userbase).  I'm working on a Government project of all things and the cutoff we went with is browsers supporting async functions (es2017).  A lot of polyfills for everything from generators/async to fetch are just eliminted by that.  ymmv. Supporting IE8 will blow up your bundle size with many polyfills and transforms if you want to use modern JS.

I have a modern app set for es2017+ browser with webpack, babel, react, redux, material-ui and more.  The main bundle is 156k gzipped[0].  If you want more lightweight, you could use a different UI kit, and use inferno. Alternatives include Vue, but the two apps I've been involved with using it I haven't cared for either. All said, 160K for JS + CSS + Controls isn't so bad.  It's not as lightweight as you can get, but it's a pretty rich feature set.  If you look at the core-js section, if you include IE8, it will be *MASSIVE*

If you work at it, and don't need routing, or fancy controls, etc... you can pretty readily create a bundle that's under 30k.


[0] https://imgur.com/a/CSvjNrb

Wishing I could vote this up twice.

IE11 support...

    function createUUID() {
      var fmt = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx';
      var rnd = Array.from((window.crypto || window.msCrypto).getRandomValues(new Uint8Array(32))).map(function(n){ return n&0xf });
      function rk(c,r) {return (c == 'x' ? r : (r&0x3|0x8)).toString(16); };
      return fmt.replace(/[xy]/g, function(c) { return rk(c, rnd.pop()); });
    }

Regarding the use of Math.random()

    function createUUID() {
      const fmt = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx';
      const rnd = Array.from(crypto.getRandomValues(new Uint8Array(32)))
        .map(n => n&0xf);
      const rk = (c,r) => ((c == 'x' ? r : (r&0x3|0x8)).toString(16));
      return fmt.replace(/[xy]/g, c => rk(c, rnd.pop()));
    }

[0] https://caniuse.com/#feat=cryptography

[1] https://developer.mozilla.org/en-US/docs/Web/API/Crypto/getRandomValues

graphql isn't free though... there is a *LOT* of boilerplate depending on your object graph structure and actual data source implementations.  It doesn't always make sense to jump through those hoops... then again, it doesn't always make sense to go through extra abstractions to group your AJAX requests either.