Skip to content

Tool Chain

We use a combination of Visual Studio Code and Git to learn two basic tools that are widely used in the industry. Especially Git is an important tool when a Designer is involved in software development. Git is hard to wrap ones head around when one never worked with a version control system before. It is nevertheless an essential tool, when it comes to working in a team with software engineers and can also be a very useful companion when working with files in general.

Setup - Short Version

Tools

  1. Install git https://git-scm.com/downloads
  2. Configure git (git config user.name "your name" and git config user.email "your HfG mail") in your terminal
  3. Install Visual Studio Code https://code.visualstudio.com/
  4. Install p5js.vscode extension

Code and Share

  1. Create p5.js project with cmd+shift+p (Mac) or ctrl+shift+p (Windows) in VS Code
  2. Create account at our gitea instance
  3. Create repository
  4. Add remote to your p5.js project in VS Code (Source Control)
  5. Stage changes, commit and sync (push) to remote

Your code is now in our gitea instance.

Setup - Detailed Version

Command Line Basics

Please have a look at this guide (but ignore the part about scripts "Our first script" for now): https://www.freecodecamp.org/news/command-line-for-beginners/

Git

Windows

  1. Go to https://git-scm.com/downloads and download Git for Windows.

  2. Install like any regular program.

  3. Continue with Git Config

Mac

Before we can install git, we have to install brew.

  1. Go to https://brew.sh and hit the copy button.

  2. Open your terminal application (https://www.idownloadblog.com/2019/04/19/ways-open-terminal-mac/)

  3. Paste the command into the terminal (Cmd+V)

  4. Hit Return (Enter)

  5. Things happen, wait until finished

  6. Brew shows you two commands to run after the installation is finished

    They look something like this:

    echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> ~/.zprofile
eval "$(/opt/homebrew/bin/brew shellenv)"

  7. Mark the first line in your terminal with the mouse

  8. Hit Cmd-C

  9. Hit Cmd-V - the command should be in your terminal
  10. Hit Return
  11. Repeat for the second command
  12. Quit terminal
  13. Open terminal again
  14. Enter brew and see what happens

  15. If it does not say something like "command not found" but instead spits out some text, it works

    Almost done!

  16. Type into your terminal the following and hit return.

    brew install git

    It should say either something like "already installed" or it will install it.

  17. Quit terminal again

  18. Start terminal again
  19. Type git and see what happens

If that worked the next step is to configure your name and your email.

Git Config

  1. Open Terminal
    • If you are on Windows, open Git Bash from your Start Menu.
    • If you are on Mac OS, open Terminal from Spotlight, or from your Applications folder.
  2. Type the following into your terminal and hit return.

git config --global user.name "Your Name"
git config --global user.email "your@email"
You can copy/paste it, or type it.

Visual Studio Code

Installation

  1. Go to https://code.visualstudio.com/ and hit download

  2. Install the thing

P5.js Extension

Once installed, it is time to install the p5.js extension.

  1. Open the extension manager on the left side

  2. Install p5.vscode

Create p5.js Project

  1. In Visual Studio Code hit Ctrl+Shift+P or Cmd+Shift+P
  2. Enter create
  3. The first item should say "Create p5.js project"
  4. Hit Return
  5. Choose folder where your project should be created

Share Code with Git

Create Repository

Once your project is created, you can upload it to our git server.

  1. Register an account at our gitea instance Gitea

  1. Create a new repository (Owner is you, or DesignCoding1 if you have been added to the Organization). If you see only your username, that's ok, we can change it later. Give your repository a short but descriptive name. Everything else can stay at default values.

Add Repository Url to P5.js Project

When you want to share code remotely, you need to know the Url.

  1. Copy the repository's remote url (use the HTTPS url, not the SSH url as shown in the image)

  1. Paste remote url in Visual Sudio code (Ctrl+V, or Cmd+V on a mac)

  1. Press Return - another input opens with "Name"
  2. Enter "origin"

  1. Press Return - Remote is added, you are ready to add, stage, commit and push your changes

Stage, Commit, Push

To push code to a remote repository, you have to add changes, enter a commit message (very important in VSCode) and then push the changes to the remote.

  1. Stage or add your changes

  1. Enter a commit message (important!)

  1. Hit "Commit" - VSCode will add a commit to your git history
  2. Hit Publish or Sync (Publish for the first push, Sync for all thereafter)

Sync

The Publish button changes its name to Sync, when you did your first push to the remote. The Sync button does more than push, it also pulls changes that were done on another computer for example from the remote to your local repository.

Workflow from here on

  1. Make changes (code, add assets...)
  2. Stage changes
  3. Commit (with message!)
  4. Sync
  5. Back to 1