Skip to content

Code Repos

Critical Making Sandbox

The cm-sandbox repo is a starting point for web projects using HTML, CSS, and JS running on a localhost server.

To use:

  1. Navigate to your project directory: cd /Users/username/code

  2. Clone repo: git clone https://github.com/rjduran/cm-sandbox.git my-project-name

    This will clone the cm-sandbox repo into a new project folder named my-project-name. Now you have a starting point for a new web project running with live-server. If you plan to make any commits to a repo on Github with this new project folder you will need to create a repo on Github with the same project name and assign the remote to your repo.

  3. Assign a new remote to your new project repo.

    Assuming I have a new project folder called my-project-name and a new repo on Github with the same name, follow the steps below and replace the remote URL with your new repo URL.

1
2
cd my-project-name
git remote -v

You will see something like this returned:

1
2
origin  https://github.com/rjduran/cm-sandbox.git (fetch)
origin  https://github.com/rjduran/cm-sandbox.git (push)

Copy the url to your new Github repo and use with the git remote command then push the changes to your repo. Check what the remote is set to by using the git remote command as above. It should be updated with your new project URL. Prior to pushing the changes you can make any edits to the files in the repo and add them and commit them.

1
2
3
git remote set-url origin https://github.com/rjduran/my-project-name.git
git remote -v
git push -u origin master

You can read more about changing remotes between HTTPS and SSH and vice versa here.

How to Build a Sandbox

This short tutorial is adapted from Assignment 2: Build a Sandbox, Fall 2018.

Create a local development workspace (aka sandbox) to prototype with HTML, CSS, and JS. By the end of this you should have something that looks like my cm-sandbox repo.

What is the purpose of this?

To become familiar with the file types, languages, and how they work together. At a fundamental level this approach to experimentation establishes good development practices and efficient workflows. It also supports hands-on learning, which is the only way to improve as a programmer. As a programmer you want to be in control of your code, tools, workflow, and system. (Don't let the computer control you.).

Tip

Pro Tip: Setup a working directory for all programming projects (For Example, /Users/username/code). This directory then becomes your goto location for anything having to do with code, programming, cloning repos from github, experimenting with new tools and software, and more. This is precisely how I organize my system.

  1. Download and install Node.js and live-server.
    • Verify node and npm are installed via Terminal: node -v && npm -v. You should see two version numbers matching what you installed.
    • Install live-server globally: npm install -g live-server
    • If you have done all this correctly you should be able to download a zip of (or clone the) cm-code git repo and run the hello-live-server example via Terminal.
  2. Create a Github account and make a repository for your web project (as demonstrated in class). You can name the repo anything you want. For example, "cm-sandbox".
  3. Clone a copy of this repository to your machine via Terminal. git clone <repo-url>.
  4. Setup your machine to make use of a local development folder and local development server (See tip above and Step 1).
  5. Create 3 files in your web project repository folder (ie. the project "folder" or "repo" you created and then cloned from Github in step 3).
  6. Launch your local development server (live-server) via Terminal and code editor of choice (ex. Atom or VSCode) and make some changes to the files in your web project. Remember the purpose of a local development environment is to "simulate" how the code will perform when uploaded to another web server. Open a browser and goto the url shown. It will be http://localhost:8000 or something similar.
    • Create a basic html page using validated markup (Hint: Using a tool like FreeFormatter, check that your code works as expected.)
    • Add some css selectors to your style.css file.
    • Add some basic Javascript functionality to your script.js file.
  7. Commit the file changes to your Github repo. You should see the changes in the Github repo summary.

CM Repos

  • cm-code - Example code for various critical making topics
  • cm-tools - Setup guides for various tools
  • cm-xr - Examples in XR (VR / MR / AR)