Learning Web Development to Build Parasol Apps

Background on web development

Parasol is used to create web-based applications, so understanding some web development will help users troubleshoot issues and give them more control over the form and function of their apps. The three most fundamental web technologies are HTML (Hypertext Markup Language), JavaScript, and CSS (Cascading Style Sheets).

HTML code dictates the structure of the webpage, the styling is described in CSS, and JavaScript provides the computational engine and interactivity. Creating a webpage requires a familiarity with web technologies and an understanding of how they communicate with one another. Below I have compiled a list of resources for Parasol users interested in learning more about web development and brief description of HTML, JavaScript, and CSS and how they are used to build Parasol apps.

Web development resources

There are many resources that will help you get up and running with web development, but I found Interneting Is Hard worked best for me. It is well-written and just plain beautiful. I'd start with their introduction to HTML, JavaScript, and CSS and start going through their tutorials to get a feel for web development.

I also found posts on W3Schools to be an invaluable resource. The W3Schools website has bite-sized, interactive examples for HTML, CSS, and JavaScript. I mostly use it as a reference to look up specific topics that I'm interested in. And like any programming project, good 'ol Google and StackOverflow will also be your friend.

Web development is a huge topic and it's easy to get lost in all the possibilities. If you are just trying to learn it to build better Parasol apps, make sure you check out the source code for the Parasol demo apps and tutorials. There is a lot of code you can reuse and things you can learn from editing and combining existing examples. For more context on how HTML, JavaScript, and CSS are used in our examples, see the sections below.

HTML for Parasol

An HTML document is at the heart of any Parasol application--HTML is what integrates the various web technologies together. For this reason, learning some HTML is probably the best place to start when learning web development. With simple Parasol applications (i.e., apps that only include parallel coordinates plots and data tables), you can get by using the tutorials and other examples as templates and making only minor edits to the code. However, if you want to incorporate buttons, sliders, and other interactive features beyond those described in Parasol examples you will want a more advanced understanding of HTML.

JavaScript for Parasol

Parasol is a JavaScript library, so understanding JavaScript will make the Parasol API easier to implement. JavaScript code can be either written between the <script> and </script> tags at the end of an HTML document or imported from an external JavaScript file between those tags. For example, in Parasol tutorial examples, we import JavaScript libraries at the top of the code and use those methods with the following code:

<script src="parasol.standalone.js"></script>
<script src="lib/d3.v5.min.js"></script>

To use those libraries and create our Parasol app, we create another <script> block to write our custom code:

<script>
// import data and visualize it using the Parasol API
</script>

CSS for Parasol

The aesthetics (i.e., font size and formatting, layout) of a web page can be altered directly from HTML, or imported from an external CSS file. CSS files are often preferred because these files can change the style and formatting of a website across multiple HTML documents. Using CSS files is typically easier for other developers to follow (changing the look of a webpage in HTML can get buried in code and hard to find) and less error prone.

For example, we import two CSS files for each of our Parasol tutorials with the following code:

<link rel="stylesheet" type="text/css" href="parasol.css">
<link rel="stylesheet" type="text/css" href="style.css">

To edit the styling of the two CSS files above and avoid unintended consequences, create copies and rename the files (e.g., rename copy of parasol.css to my_parasol.css), make changes to the file, and load my_parasol.css instead of parasol.css.