Workflow: Terminal, Shell, Node, VSCode

🚂 Outline

• Introduction
• Terminal Basics
• Shell (ZSH) and Oh My Zsh
• Installing Node.js using NVM
• Code Editor: Visual Studio Code

🚀 Introduction

• 🎥 Working with Data and APIs in JavaScript
• 🎥 2018 Workflow Series
• 🎥 Git and GitHub for Poets

💻 Terminal Basics

• 🍎 Mac Users: Use terminal found under Applications > Utilities or download iTerm.
• 🪟 Windows Users: You can use the Command Prompt or PowerShell.
• Read about Unix on Wikipedia
• Unix Commands Covered
  • echo: Print text to the terminal.
  • cd: Change directory.
  • pwd: Print working directory. (🪟 just cd without arguments)
  • ls: List the contents of a directory. (🪟 dir)

🐚 Shell (ZSH) and Oh My Zsh

• Z Shell
• Oh My Zsh for more details and installation instructions.
• curl
• 🪟 Windows Users: You can look into something like starship.rs for terminal customization.

📦 Installing Node.js using NVM

You can install node.js through the node website or using NVM (Node Version Manager). For the tutorials, using Node version 18.18 is recommended.

• Node.js official website
• NVM GitHub repository
• 🪟 Windows Users: NVM for windows GitHub repository

source ~/.zshrc

• NVM Commands covered
  • nvm install <version>: Install a specific version of Node.
  • nvm use <version>: Switch to a specific version of Node.
  • nvm list: List installed Node versions.
  • nvm alias default <version>: Set the default version of Node.
• Confirm node.js version

node --version

📝 Using a Code Editor: Visual Studio Code

• Visual Studio Code website
• Prettier Extension

Settings

{
  "editor.tabSize": 2,
  "editor.renderWhitespace": "all",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "javascript.preferences.quoteStyle": "single",
  "prettier.singleQuote": true,
  "editor.fontSize": 24,
  "editor.wordWrapColumn": 120,
  "prettier.printWidth": 120,
  "diffEditor.hideUnchangedRegions.enabled": true
}

code command

• VSCode Command Line Interface

Running a p5.js sketch

• Create index.html file along with sketch.js
• Install Live Preview extension.
• 🎥 See more in Hosting a p5.js sketch with GitHub Pages