Third Party Javascript 2

Chapter 3. Rendering HTML and CSS

        Decoupling render targets

        I like the following approach the best for identifying the render point and 
        allowing multiple widgets to be displayed.

    jQuery('[data-stork-product]').each(function() {
         var location = jQuery(this);
         location.removeAttr('data-stork-product');

         var id = location.attr('data-stork-product');

         getWidgetData(id, function(data) {
              renderWidget(data, location);

         }); }); 

         Loading CSS Files

         function loadStylesheet(url) {
              var link = document.createElement('link');
              link.rel = 'stylesheet';
              link.type = 'text/css';
              link.href = url;
              var entry = document.getElementsByTagName('script')[0];
              entry.parentNode.insertBefore(link, entry);
         }

         function isCssReady(callback) {

               var testElem = document.createElement('span');

               testElem.id = 'stork-css-ready';

               testElem.style = 'color: #fff';

               var entry = document.getElementsByTagName('script')[0];

               entry.parentNode.insertBefore(testElem, entry);

               (function poll() {

                     var node = document.getElementById('css-ready');

                     var value;

                     if (window.getComputedStyle) {

                        value = document.defaultView

                          .getComputedStyle(testElem,  null).getPropertyValue('color');

                     }

                     else if (node.currentStyle) {

                            value = node.currentStyle.color;

                     }

                     if (value && value === 'rgb(186, 218, 85)' 
                              || value.toLowerCase() === '#bada55')

                    {

                          callback();

                    } else {

                          setTimeout(poll, 500);

                    } 

             })();

         }

            Defensive HTML and CSS

         Do you want your application to look the same everywhere? Or do you want the 
         application to inherit the native look and feel of the page on which it’s hosted? 
         Your answer will have a profound effect on your strategy for rendering.