Revisions to CDN Fallback

added 142 characters in body

Source Link

edited Jul 9, 2013 at 1:55

471
3
7
16

Edit: Even adding a comment of "looks good to me" and up-voting that comment would be appreciated :) I just want the feedback! Thanks!

For the fun of it as well as professional development, I wrote a small "library" (single 24 line JavaScript function) that will allow a developer to double check that all external libraries loaded and to reload them with a local copy as a fallback if the CDN is blocked or down.

added 42 characters in body

Source Link

edited Jul 8, 2013 at 21:02

kentcdodds

471
3
7
16

<!DOCTYPE html>
<html>
  <head>
    <title>DT Script Loader</title>
  </head>
  <body>
    <h1>Double Take Script Loader Example</h1>
    <div id="message-jQuery">
      The safe script loader didWaiting notto work!load jQuery was never loaded!...
    </div>
    <div id="message-underscore">
      TheWaiting safeto scriptload loaderUnderscore...
 did not work! Underscore</div>
 was never loaded <!
 -- Method 1: Use </div>data- attributes. This does NOT require calling DoubleTakeScriptLoader, just including it. -->
    <script src="http://cdn.example.com/underscore/1.4.4/underscore-min.js" data-prop-name="_" data-local-src="underscore-min.js"></script>
    
    <!-- Method 2: Call DoubleTakeScriptLoader directly -->
    <script src="http://cdn.example.com/jquery/1.10.1/jquery.min.js" id="jQueryScript"></script>
    <script src="dt-script-loader.js"></script>
    <script>
      DoubleTakeScriptLoader({
        propName: '$',
        localSource: 'jquery-1.10.2.min.js',
        originalId: 'jQueryScript'
      });
    </script>
    <script>
     <!-- ifUse ($)libraries. {
This must be done AFTER calling DoubleTakeScriptLoader() -->
 var $jqMessage = $('#message-jQuery');<script>
        $jqMessage.text($jqMessage.textfunction() {
        var checkStuff .replace('not= 'function(prop, ''elementId) {
          .replace('nevervar ',el ''= document.getElementById(elementId);
          if (window[prop]); {
        $jqMessage    el.css('background-color',innerText 'green');
= 'Loading ' + prop + }' elseworked {great!';
        document.getElementById('message-jQuery').style.backgroundColor="red"
    el.style.backgroundColor = }"green";
    </script>
    <script>
   } else {
 var _Message = document.getElementById('message-underscore');
      if (window['_']) {
el.innerText = 'Loading ' + prop + ' _Message.innerTextdid =NOT _Message.innerTextwork!';
            el.replace('notstyle.backgroundColor ',= '')"red";
          .replace('never}
 ', '');
      };
  _Message.style.backgroundColor = "green";  
      } else {
checkStuff('$', 'message-jQuery');
       _Message.style.backgroundColor =checkStuff('_', "red";'message-underscore');
      })();
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>DT Script Loader</title>
  </head>
  <body>
    <h1>Double Take Script Loader Example</h1>
    <div id="message-jQuery">
      The safe script loader did not work! jQuery was never loaded!
    </div>
    <div id="message-underscore">
      The safe script loader did not work! Underscore was never loaded!
     </div>
    <script src="http://cdn.example.com/underscore/1.4.4/underscore-min.js" data-prop-name="_" data-local-src="underscore-min.js"></script>
    <script src="http://cdn.example.com/jquery/1.10.1/jquery.min.js" id="jQueryScript"></script>
    <script src="dt-script-loader.js"></script>
    <script>
      DoubleTakeScriptLoader({
        propName: '$',
        localSource: 'jquery-1.10.2.min.js',
        originalId: 'jQueryScript'
      });
    </script>
    <script>
      if ($) {
        var $jqMessage = $('#message-jQuery');
        $jqMessage.text($jqMessage.text()
          .replace('not ', '')
          .replace('never ', '')
          );
        $jqMessage.css('background-color', 'green');
      } else {
        document.getElementById('message-jQuery').style.backgroundColor="red"
      }
    </script>
    <script>
      var _Message = document.getElementById('message-underscore');
      if (window['_']) {
        _Message.innerText = _Message.innerText
          .replace('not ', '')
          .replace('never ', '');
        _Message.style.backgroundColor = "green";
      } else {
        _Message.style.backgroundColor = "red";
      }
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>DT Script Loader</title>
  </head>
  <body>
    <h1>Double Take Script Loader Example</h1>
    <div id="message-jQuery">
      Waiting to load jQuery...
    </div>
    <div id="message-underscore">
      Waiting to load Underscore...
    </div>
    <!-- Method 1: Use data- attributes. This does NOT require calling DoubleTakeScriptLoader, just including it. -->
    <script src="http://cdn.example.com/underscore/1.4.4/underscore-min.js" data-prop-name="_" data-local-src="underscore-min.js"></script>
    
    <!-- Method 2: Call DoubleTakeScriptLoader directly -->
    <script src="http://cdn.example.com/jquery/1.10.1/jquery.min.js" id="jQueryScript"></script>
    <script src="dt-script-loader.js"></script>
    <script>
      DoubleTakeScriptLoader({
        propName: '$',
        localSource: 'jquery-1.10.2.min.js',
        originalId: 'jQueryScript'
      });
    </script>
    
    <!-- Use libraries. This must be done AFTER calling DoubleTakeScriptLoader() -->
    <script>
      (function() {
        var checkStuff = function(prop, elementId) {
          var el = document.getElementById(elementId);
          if (window[prop]) {
            el.innerText = 'Loading ' + prop + ' worked great!';
            el.style.backgroundColor = "green";
          } else {
            el.innerText = 'Loading ' + prop + ' did NOT work!';
            el.style.backgroundColor = "red";
          }
        };
      
        checkStuff('$', 'message-jQuery');
        checkStuff('_', 'message-underscore');
      })();
    </script>
  </body>
</html>

deleted 291 characters in body; added 334 characters in body

Source Link

edited Jul 8, 2013 at 20:42

kentcdodds

471
3
7
16

I would also love some feedback on my example. Is this a good way to show devs how to use it or am I missing a(some) crucial piece(s) of information?

For an example of how to use this function, see example.htmlexample.html. You will of course need local copies of jQuery and Underscore because for the purpose of the example the CDNs do not actually exist. If the example works, you should see this in the browser: DT Example You can also look at the demo.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>DT Script Loader</title>
  </head>
  <body>
    <h1>Double Take Script Loader Example</h1>
    <div id="message-jQuery">
      The safe script loader did not work! jQuery was never loaded!
    </div>
    <div id="message-underscore">
      The safe script loader did not work! Underscore was never loaded!
    </div>
    <script src="http://cdn.example.com/underscore/1.4.4/underscore-min.js" data-prop-name="_" data-local-src="underscore-min.js"></script>
    <script src="http://cdn.example.com/jquery/1.10.1/jquery.min.js" id="jQueryScript"></script>
    <script src="dt-script-loader.js"></script>
    <script>
      DoubleTakeScriptLoader({
        propName: '$',
        localSource: 'jquery-1.10.2.min.js',
        originalId: 'jQueryScript'
      });
    </script>
    <script>
      if ($) {
        var $jqMessage = $('#message-jQuery');
        $jqMessage.text($jqMessage.text()
          .replace('not ', '')
          .replace('never ', '')
          );
      }  $jqMessage.css('background-color', 'green');
    </script>
  } else <script>{
      if  document.getElementById(window['_']'message-jQuery').style.backgroundColor="red"
 {     }
    </script>
    <script>
      var _Message = document.getElementById('message-underscore');
      if (window['_']) {
        _Message.innerText = _Message.innerText
          .replace('not ', '')
          .replace('never ', '');
        _Message.style.backgroundColor = "green";
      } else {
        _Message.style.backgroundColor = "red";
      }
    </script>
  </body>
</html>

I would also love some feedback on my example. Is this a good way to show devs how to use it or am I missing a(some) crucial piece(s) of information?

For an example of how to use this function, see example.html. You will of course need local copies of jQuery and Underscore because for the purpose of the example the CDNs do not actually exist. If the example works, you should see this in the browser: DT Example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>DT Script Loader</title>
  </head>
  <body>
    <h1>Double Take Script Loader Example</h1>
    <div id="message-jQuery">
      The safe script loader did not work! jQuery was never loaded!
    </div>
    <div id="message-underscore">
      The safe script loader did not work! Underscore was never loaded!
    </div>
    <script src="http://cdn.example.com/underscore/1.4.4/underscore-min.js" data-prop-name="_" data-local-src="underscore-min.js"></script>
    <script src="http://cdn.example.com/jquery/1.10.1/jquery.min.js" id="jQueryScript"></script>
    <script src="dt-script-loader.js"></script>
    <script>
      DoubleTakeScriptLoader({
        propName: '$',
        localSource: 'jquery-1.10.2.min.js',
        originalId: 'jQueryScript'
      });
    </script>
    <script>
      if ($) {
        var $jqMessage = $('#message-jQuery');
        $jqMessage.text($jqMessage.text()
          .replace('not ', '')
          .replace('never ', '')
          );
      }
    </script>
    <script>
      if (window['_']) {
        var _Message = document.getElementById('message-underscore');
        _Message.innerText = _Message.innerText
          .replace('not ', '')
          .replace('never ', '');
      }
    </script>
  </body>
</html>

For an example of how to use this function, see example.html. You will of course need local copies of jQuery and Underscore because for the purpose of the example the CDNs do not actually exist. You can also look at the demo.

<!DOCTYPE html>
<html>
  <head>
    <title>DT Script Loader</title>
  </head>
  <body>
    <h1>Double Take Script Loader Example</h1>
    <div id="message-jQuery">
      The safe script loader did not work! jQuery was never loaded!
    </div>
    <div id="message-underscore">
      The safe script loader did not work! Underscore was never loaded!
    </div>
    <script src="http://cdn.example.com/underscore/1.4.4/underscore-min.js" data-prop-name="_" data-local-src="underscore-min.js"></script>
    <script src="http://cdn.example.com/jquery/1.10.1/jquery.min.js" id="jQueryScript"></script>
    <script src="dt-script-loader.js"></script>
    <script>
      DoubleTakeScriptLoader({
        propName: '$',
        localSource: 'jquery-1.10.2.min.js',
        originalId: 'jQueryScript'
      });
    </script>
    <script>
      if ($) {
        var $jqMessage = $('#message-jQuery');
        $jqMessage.text($jqMessage.text()
          .replace('not ', '')
          .replace('never ', '')
          );
        $jqMessage.css('background-color', 'green');
      } else {
        document.getElementById('message-jQuery').style.backgroundColor="red"
      }
    </script>
    <script>
      var _Message = document.getElementById('message-underscore');
      if (window['_']) {
        _Message.innerText = _Message.innerText
          .replace('not ', '')
          .replace('never ', '');
        _Message.style.backgroundColor = "green";
      } else {
        _Message.style.backgroundColor = "red";
      }
    </script>
  </body>
</html>

added 27 characters in body

Source Link

edited Jul 8, 2013 at 14:15

kentcdodds

471
3
7
16

Loading

Tweeted twitter.com/#!/StackCodeReview/status/354240927021277184

occurred Jul 8, 2013 at 14:09

Source Link

asked Jul 8, 2013 at 11:41

kentcdodds

471
3
7
16

Loading

Stack Exchange Network

Return to Question