recode-fa23
Module 3 - Working with External Libraries
One of the greatest features of the web, and also maybe the most hard to believe, is the plethora of free and open source resources available on the internet. Many of today’s modern applications are built with them - Facebook, Instagram, Snapchat, Google, and more - and depend on technologies that were made freely available, for commercial use or otherwise. As such, these companies often ‘give back’ by making internal tools available to the open source community, like Facebook/Meta has done with React and Yarn, Google has done with Chrome and Tensorflow, and Snap has done with Lens Studio, to name a few.
Obviously, these companies have various motivations for releasing these tools, so you should view these with caution and understand that they could revoke the use of these at any time. Also, you should consider that by including these tools in your projects, these companies values could pollute your own and the integrity of your work - so be aware of what you are doing and do your own investigations.
p5.js Contributor Community
p5.js itself is open source, as in, you can easily look at the source code. It also has its own set of open source libraries which were developed to work easily with p5.js. If you visit this page, you’ll see that the types and quality of documentation varies. This variation demonstrates one of the difficulties in working with software that is mostly free - without the incentive for compensation, developers lose interest in their project. The nice thing is that p5.js has a group of managers and exists as a part of a the larger Processing Foundation community, which has many thousands of enthusiastic users from around the world, such that the code stays up to date and that many things do stay updated.
Content Delivery Networks (CDN’s)
You’ll notice the root URL that provided the p5.js library is from a cdnjs.cloudflare.com. The CDN in cdnjs stands for “Content Delivery Network.” CDN’s are online repositories for code that can easily be included into projects via a web accessible link. It’s a convenient way for the authors of the library to have their code hosted by a reliable service online to be delivered to end-users.
It also provides an easy way to manage software versions and updates. For example, if I wanted to load a previous version of the p5.js library, I could replace the version number in the URL with a previous one - so .../p5.js/1.7.0/p5.js"> would be become .../p5.js/1.6.0/p5.js">.
You can also download the code directly from these networks by navigating to the file and doing a Save As... and including the code manually in your HTML file.
The drawback in using code in this way is that you depend on the CDN to make the code always available. Furthermore, as libraries often update to newer versions, you could lose access to the old “deprecated” version or mistakenly download the latest version which has “breaking updates”, aka updates that are not compatible your code that was written with older version of the code.
For this reason, you should familiarize yourself with the manual process so that any artworks you may create can remain in tact through the years.
Later this term, we will look later at platforms like Node.js which have a streamlined way for you to download packages, via the Node Package Manager or npm. Package managers help you to keep an inventory of what code your project depends on, aka the project’s dependencies, and easily add and remove various open source packages, of which there are thousands.
Staying Organized
We will tidy up our HTML by moving our CSS and JS to external files:
<link rel='stylesheet' type='text/css' href='./style.cs'>
The Javascript is typically included/loaded later as it will be “asking for” things in document that must be already available.
<script type='text/javascript' src='./myScript.js' />
These files can of course be linked from the web, as in the case of p5.js when using the p5 web editor.
