How do you reference a js library in a code page?

Github is a repository for source code not a CDN (Content Delivery Network) so you shouldn't reference source code from Github.

Instead, load the library from a CDN:

https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js

or place the library in a code page and reference it as follows:

https://SUBDOMAIN.quickbase.com/db/APPDBID?a=pageedit&pagename=MYSCRIPT.JS

Note that many libraries loaded from a CDN have been constructed so that they can load as AMD, CommonJS, UMD, ES6, modules or as Globals. If you are injected the library into a QUickBase authored page the is a good chance the library will detect the presence of requirejs (the loader used by QuickBase) and expect to be loaded as an AMD module. If this is your scenario ask another question if you encounter this problem.

Okay, currently I am running with:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js"></script>;  <script>  snowStorm.snowColor = '#99ccff';  snowStorm.autoStart = true;  snowStorm.followMouse = true;  </script>   

It is not currently working, how do I check to see if the issue is that is was loaded using requirejs before I ask in another post?

Their simple demo works for me with that particular CDN reference to the library:

http://www.schillmania.com/projects/snowstorm/basic-example.html

<html>
<head>
<title>DHTML SnowStorm: Basic Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm-min.js"></script>
</head>
<body style="background:#6699cc;font:100 1.75em helvetica neue, helvetica,arial,verdana,sans-serif;color:#fff">
<h1 style="font-size:2em;margin:0px;font-weight:100">Example SnowStorm page</h1>
<p>
 A single Javascript reference in the &lt;head&gt; tag is required for SnowStorm to work.
</p>
<p>
 View the source of this page for reference.
</p>
</body>
</html>

If the reference is working then it may be how it loaded, how do I check to see how it loaded before I post the question asking how to modify how its loaded to be sure that is the issue?

It is loaded through a global named snowStorm

console.dir(snowStorm)

Just to make sure I set this up right I have attached some screenshots:






Since when I opened the console in the browser and put in the command I received an error

That will not work at all. The IOL technique loads a JavaScript file but you have HTML in your snow.js code page.

Ahhh I see. I've never called a CDN before and always downloaded libraries and referenced their location. So how should I be formatting this, given I can't use HTML?

This is my formula in the Pastie Databse that loads snowstorm.js:

[iol] & "modulePasties.js" & [/iol]

This is the relevant code in modulePasties.js:

(function(){
    $.getScript("https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm.js";, function() {
      //snowStorm.snowColor = '#99ccff';   // blue-ish snow!?
      snowStorm.snowColor = "blue";
      snowStorm.followMouse = true;
      snowStorm.flakesMaxActive = 96;    // show more snow on screen at once
      snowStorm.useTwinkleEffect = true; // let the snow flicker in and out of view
      snowStorm.usePositionFixed = false;
    });
})();

This was very helpful! So whenever I want to reference a particular JS library I should find it on a CDN and use the jQuery $.getScript to grab it, then use a function to pass any of the libraries arguments to it. Thank you so much for helping me with this Dan!

NO. Most libraries you find on a CDN will have built in code that will detect how they should be loaded. Since QuickBase used requirejs to load AMD modules most libraries from a CDN will assume they should load as AMD modules not as globals. Snowstorm is an oldschool library and loads through a global but loading through a global is becoming more unpopular over time.

For example d3 version 4 from a CDN would be loaded into a QuickBase page using requirejs:

require.config({
  paths: {
    "d3": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3";
  }
});
require(['d3'], function(d3) {
  console.dir(d3);
});

In contrast d3 version 3 loads through a global.

At times I have been giving advise to modify libraries and remove loading logic at the head of the file because most users of QuickBase don't have the experience to wade through the proper was to load AMD modules.

It can be very confusing. Most of this nonsense will go away once JavaScript modules are widely supported:

http://caniuse.com/#feat=es6-module

Here is a little trick you can use to detect what libraries have been configured to load as AMD modules in QuickBase:

console.dir(requirejs.s.contexts._.config );

Note in the above console screenshot d3 was manually required so it shows up in requirejs's internal context in addition to all the other modules QuickBase has configured to load.

So a library can  load as AMD, CommonJS, UMD, ES6, modules or globals, and may need to be configured to work in Quickbase. Which is why even though I now have

(function(){  $.getScript("https://cdnjs.cloudflare.com/ajax/libs/Snowstorm/20131208/snowstorm.js";,   function() {  snowStorm.snowColor = '#99ccff';  snowStorm.followMouse = true;     }); })();

when I run

console.dir(snowStorm) 

I get the same error since it was not loaded properly and need to configure its path so it loads properly into Quickbase. Sorry, if I still don't understand!