This repository archives projects made by students of the MS Data Visualization program at Parsons School of Design.
Note: Please submit a pull request with your new project URL if you relocate your work to a different domain name or hosting provider.
You will need the following command line tools.
Required:
- Node.js (v16.15.0) https://nodejs.org/
- pnpm (v7.14.0) https://pnpm.io/installation#using-npm
Optional:
Version 3 of Vue includes different component APIs than Vue 2, including a new composition api flow.
Vite is a tool that provides a development server and bundles JavaScript modules into publishable assets. You can configure Vite through the vite.config.mjs file.
This project uses ESM (or ECMAScript modules). Node.js will defaults to using CommonJS modules but will use ESM if your file extension ends in .mjs and you have "type": "module" set in package.json
Warning: Use
.mjsextension instead of.js. If CommonJS is needed, use.cjs. Do not remove"type": "module"frompackage.json
If you open this repository using Visual Studio Code, you will notice that it provides type checking. This is a helpful way to avoid bugs like if you pass a string into a function that expects a number. To configure this behavior, you can adjust the jsconfig.json file.
This repository uses pnpm to run commands. pnpm is an alternative to npm but uses less storage space on your computer by installing local dependencies within a shared location.
Our package.json file defines some common scripts that are used during development. They can be invoked by running pnpm [script name].
# Example:
# pnpm [script name]
pnpm dev| script name | description | why is this helpful |
|---|---|---|
| dev | starts development server | gives us a live preview of our site that we can view in the browser |
| format | runs prettier to format files according to .pretterrc.yml config | keeps code style consistent and reduces the number of line changes between Pull Requests |
| lint | runs eslint to check for code errors and bugs | helps catch errors like typos before we build the site |
| test | runs jest to execute unit tests to check components | checks that recent changes don't change how our components function |
| validate | validates that all JSON files in /data follow the correct schema | ensures that there aren't any unknown or missing properties in our JSON |
| build | builds static deployment assets | compiles framework specific files (like .vue) to browser compatible javascript |
This repository is set up to use GitHub Actions to check the status of commits made and to deploy the project to GitHub Pages. Each workflow is defined in a separate Yaml file in .github/workflows/
| workflow | description |
|---|---|
| test | runs formatter, linter, and ensures that build process do not throw any errors |
| validate | checks that all JSON files in /data folder use the correct schema and don't have unknown or missing properties |
| deploy | builds web assets and pushes automatically to github pages branch |
Project data is stored in ./data/projects.json. The file follows the schema defined in ./data/schema.json which follows a JSON Schema specification.
The projects array follows this template:
{
"description": "Project description",
"image": "static/preview-YEAR/<STUDENT NAME>.png",
"name": "Student Name",
"portfolio": "<PORTFOLIO LINK>",
"repo": "<PROJECT REPO>",
"subtitle": "Project intro text",
"tags": ["#data", "#technology"],
"title": "Project title",
"url": "<PROJECT LINK>",
"video": "<VIDEO LINK>",
"year": YYYY
}The validate GitHub workflow will run anytime a commit is made (including pull requests). You can also validate before pushing code by running
pnpm validate-
Make sure you have the right version of Node.js
node --version # v16.15.0 -
Make sure you have the right version of pnpm
pnpm --version # >= 7.14.0 -
Install dependencies
pnpm install
-
Start development server
pnpm dev
-
You can now open http://localhost:8080 in your browser.
An update to gh-pages is made when a commit is pushed to the main branch.
It is recommended to follow the best practices detailed in the MS Data Visualization GitHub workflow document found at https://github.com/visualizedata/github-workflow
-
Initial setup:
-
In the local clone of your fork, create a branch for your edits.
git branch mybranchcreates a branch named mybranchgit checkout mybranchswitches to the branch mybranch- Do all your work in this branch.
- Push your branch to the forked repo early and often.
- Never work in the
mainbranch! - gh-pages will publish directly to the live site (it takes about 5 minutes to update)
-
Pull in changes often from the
upstream mainto keep it synced so that when you prepare your pull request, merge conflicts will be less likely. Again, never work in themainbranch! -
Merge the fork main into the fork branch and, if applicable, resolve any merge conflicts.
git merge <branch>merges the specified branch into the current branch. -
When you are ready for your contributions to be considered, open a Pull Request in GitHub. The Pull Request should be for the up-to-date branch of your fork. Prior to submitting the Pull Request, make sure you have:
- Synced the fork main with the latest version of the upstream main (#3).
- Merged the fork main to the fork branch and resolved any merge conflicts (#4).
Use GitHub issues to log problems and communicate.
Sometimes, you mess up and need to go back to a previous commit. Use revert. Do not use reset! Here's a helpful Stack Overflow answer.
Vite
Node.js
Vue
pnpm
JSON Schema
GitHub