Introduction to Javascript Libraries

So far, everything you've written in Javascript, you/AI wrote it in the VSC code area. If you wrote your own functions, the definition is in your files.

A library is code (one way to think of it is that it's a collection of functions. Not 100% true but... ) that someone else already wrote, tested, and packaged up so you can drop it into your own project and use it instead of solving the same problem from scratch.

It isn't a huge jump from what we have been doing if we understand what a function is.

When you load a library, you're trusting code you didn't write and can't fully vet.

So who decided this code was safe and standard enough to use?

Usually: nobody, in the sense of a central authority. Many JavaScript libraries are published on npm, a public registry. Anyone can create an account and publish a package. No credentialing, no application, no institutional backing required. A library becomes trusted because enough other developers choose to use it, not because an agency approved it.



Many library ecosystem works in a similar way. No one is in charge of npm the way an editor is in charge of a magazine. Thousands of autonomous developers publish code that follows shared conventions (how a package.json is structured, how a function gets exported), and the packages that get widely adopted become de facto standards. That's the same "voluntary regulation" Galloway describes protocol.

"Open source" describes a license, not a decision-making process. Whether anyone can actually influence a project, and how, varies a lot. Four examples:

Project	Who can join	Who has final say	How it decides
IETF (internet protocols)	Any individual, no membership required	Area Directors / IESG, chosen through a rotating volunteer nominating committee	"Rough consensus and running code" in a working group, published as an RFC
Linux kernel	Anyone can submit a patch	Linus Torvalds, the "Benevolent Dictator For Life," delegates to subsystem maintainers but keeps final merge authority	Maintainer review, then Linus's approval for anything entering the mainline kernel
Apache Software Foundation	Anyone can contribute; earns "committer" status by merit	An elected Project Management Committee (PMC) per project; an ASF Board elected annually by ASF members	"Lazy consensus": a proposal passes unless someone formally objects (a veto), with real votes when needed
npm (JavaScript package registry)	Anyone can create an account and publish a package	The registry belongs to a company (npm Inc., part of GitHub, owned by Microsoft); each package is controlled by its own maintainers, often a single person	Company policy and terms of service for the registry as a whole; for each package, whatever its maintainers decide

Galloway's larger point: decentralization does not eliminate control. It relocates control into protocols, procedures, and particular points of authority.

Linux: it is arguably the most important operating system underlying today's internet infrastructure. Although relatively few people use Linux on their personal computers (about 4.5% of desktops worldwide), it dominates servers, cloud computing, supercomputers, and much of the infrastructure behind AI. Unix-family systems, mostly Linux, run about 92% of websites whose operating system can be identified, and every one of the 500 fastest supercomputers in the world has run Linux since 2017.

• Saves time: someone already solved this problem.
• Tested and hardened: used (and debugged) by thousands of other developers
• Does things you couldn't build in a semester: 3D rendering, physics simulation, smooth animation easing... these represent years of work.

In general, same <script> tag you've already been using. It's now pointing at someone else's code instead of yours. Two ways to do it:

1. CDN (Content Delivery Network): link directly to a copy hosted online. No download, no install:

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.4/dist/confetti.browser.min.js"></script>

2. Download the file: save a copy of the library into your own project folder and link to your local copy:

<script src="js/confetti.browser.min.js"></script>

Either way, once that line runs, the library's code is loaded and ready to use in whatever <script> comes after it.

Specifically though, you should follow the instructions for the library. Copilot will understand and take care of it when you ask it to include a specific library. "Prompt: I want to use this library" will suffice.

Step 1. Make an HTML page with one button in it and the CDN line from the previous slide. Note the order: the library loads first, then your code.

<!DOCTYPE html>
<html>
<body>

<button onclick="celebrate()">Celebrate</button>

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.4/dist/confetti.browser.min.js"></script>

<script>
  function celebrate() {
    confetti({
      particleCount: 150,
      spread:        70,
      origin:        { y: 0.6 }
    });
  }
</script>

</body>
</html>

Step 2. Run it and click the button. Then look at what you typed and name every part of it, out loud:

• confetti is a function name. Somebody else chose that.
• confetti( ... ) is one function call. Parentheses, like every function call since alert().
• It takes one argument, and that argument is an object. Braces, name: value pairs, commas.

Step 3. Change two values and reload. Make particleCount ten times bigger. Change spread to 360. Change y to 0.2. Break something on purpose and check the console.

Step 4. Open the canvas-confetti docs and observe what this library can do. Notice that there is sample code.

Library Lab