How to use Documentation — A Review of the p5.js Reference Manual and the MDN Docs

The alternate MDN web docs logo is displayed to the left; the p5.js logo is displayed to the right.

I recently wrote an article about ways that beginning coders can effectively ask for help. One question that came up from readers was how to use and familiarize oneself with documentation and reference manuals. One reader pointed out to me that successfully using documentation is a key step to effective problem solving as a programmer.

In this article, we will be reviewing the p5js reference manual and the Mozilla Developer Network (MDN) documentation, however, these tips are meant to be applicable no matter what documentation you may be using.

In Make School’s Ramp program, we use a Javascript library called p5.js as our coding framework. As a TA for that program, I’ve helped a lot of people get used to reading documentation while problem solving.

One of the awesome things about p5.js is that there is great, easy-to-read documentation available online.

Documentation is like a manual. If you’ve ever bought a car, a laptop or another machine, you know that it usually comes with a book that tells you all about how its various parts, buttons and features work.

Programming languages have docs. Whether you are into Python, Javascript, Golang, HTML, CSS, C++ or Java, there is always more information online about how things work.

Documentation is also reliable. Despite the occasional error or typo, generally documentation has a lot of the most up to date and correct information about a coding language. It is true that sometimes docs can be hard to read or a little cryptic, but generally using the documentation is superior to relying on answers in forums.

Using documentation should be a regular part of your problem solving process. Have you tried using a function, but you forgot what parameters it takes? Do you need an example of how to use a specific property? Are you trying to get more familiar with a core concept? These are all questions that can be answered using documentation.

Every programming language or framework’s documentation is a bit different. But in general there are a few things that you can expect to see:

1. Categories or organized grouping for various prominent topics.
2. Details about particular classes, functions, methods or properties on a separate page or in topical section.
3. Examples of use for each respective item. Usually a few code samples with expected parameters and the values returned.
4. Other information about the language such as versioning, download instructions and other resources.

You can see the Color and Shape categories here. In the Color category, we have functions like alpha(), hue() and stroke().

In p5.js, the reference manual is divided into categories and each function or property is listed in its respective area.

Some of these links actually show another sub-category with more functions listed within. p5.Color is an example of this from the Color section.

This is the documentation page for the setRed() function. It shows an example at the top and the proper syntax within the description section.

On each particular documentation page you can find a description of:

• What the function or property does.
• How it is typically used within the framework.
• What parameters it expects.

On the side panel you can also find more information about the mission of p5.js, other resources to learn to code and connect with the maintainers on Github or Twitter.

The MDN docs are the official resource for information about web development. This includes HTML, CSS and Javascript. Because this article is written from the lens of p5.js, we’re just going to discuss the Javascript documentation.

There are some topics that are used in p5.js, but not fully explained by its reference manual. While the DOM, loops and conditional statements all fit this mold, one example I’d like to focus on is Object Oriented Programming. Put simply, OOP is programming with objects and classes.

I have often seen students have trouble with this concept while writing p5.js code. They often go straight to seeking help from a TA or instructor, but there is a lot of helpful information available for explaining this concept to beginners. Let’s see how the MDN docs might be able to help.

Opening to the OOP for beginners page. A nice, short explanation of what to expect.

We can see that on concept pages like this, MDN provides information on things that we might need to already know (for our purposes, let’s ignore the requirement to know HTML and CSS. p5.js replaces some of that). It also gives us a short blurb on what we’ll learn by reading this page.

You might also have noticed the little link symbol next to the title above. There are links like this to various important items and headers on the page. This is great for easy navigation and for sharing resources with others.

A visual to help explain what objects are in the context of programming.

On this page there is a section that aims to breakdown the concepts of classes, objects, polymorphism and inheritance. This is much more detail than we get from p5.js’s reference manual and it might help us better understand why our objects and classes work the way they do.

This looks a little different from OOP in p5.js, but the underlying concepts are the same.

Here we can see a coding example of writing a class in plain Javascript. This does look a little different from how we write classes in p5.js, but the core concepts are the same.

Documentation can help us understand functions, topics and properties much better so that we can be more effective coders and be good at asking for help from others.

The next time you run into a coding issue, try referring to this guide on documentation. You may be able to find the exact answer that you’re looking for in the docs.

If you’re interested in learning to code, you can read a Medium article about Make School’s Ramp program here.

To learn more about how to access Ramp and the Make School admissions process as a whole, feel free to send an email to admissions@makeschool.com.