cheatsheet.md

Cheat Sheet

Group Projects

---

• Make sure you join the correct group
• Once you are part of that group, DO NOT create and git init a local directory. Always git clone your teams' repo locally
• If you prefer to name the directory you want to clone your project into, mkdir the directory and then, when you clone it, follow the command with a . For example, git clone <url> . This will copy the contents of the directory into the directory you named as opposed to making another folder
• Add to your .gitignore
  • .DS_Store
  • dist
  • node_modules
• Include your package-lock.json in your project, not your .gitignore (I was wrong about this -Meg)

Project Setup (that uses Grunt, json-server and a dist folder)

---

Cloning Someone Else's Repo

• Clone it to your machine
• Locate their package.json file and (in that directory) run npm install to install the packages needed to run their application
• Locate their Guntfile.js and (in that directory) run grunt to bundle their js files
• After running grunt, locate their dist folder and within that folder, run your http-server
• If they are using json-server locate their database and (in that directory) run cmd + r and start to type in json-server As you do that, your terminal will find the command in your prompt history. Alter the command to match the name of their database, and check the port their code is using to host the file (check their fetch statements)

Creating Your Own Project

Your file structure may look something like this. This is a general guideline it is not how it has to be done every single time.

── README.md
── api
   |── database.json
── dist (made for you by grunt - do not edit these files)
   |── bundle.js
   |── bundle.min.js
   |── index.html
   |── styles
   |── main.css
── src
|── index.html
|── lib
   |── Gruntfile.js
   |── package-lock.json
   |── package.json
|── scripts
   |── main.js
|── styles
   |── main.css
|── .eslintrc

• If your file structure matches the one above, your Gruntfile.js will look something like the one below.
• If you are using eslint, you may want a .eslintrc file like the one below

jQuery

---

Some of the most useful jQuery shortcuts (vanilla first, jQuery second):

document.querySelector("#output")
$("#output")

let container = document.createElement("div")
let $container = $("div")

document.querySelector("#output").addEventListener("click", somefunction)
("#output").on("click", somefunction)

document.querySelector("#output").innerHTML = `I love ${programmingLanguage}!!`
("#output").text(`I love ${programmingLanguage}!!`)

//or, if you want to create elements via .html()

("#output").html(`<h1>I love ${programmingLanguage}!!</h1>`)

eslintrc.json

{
  "parserOptions": {
      "ecmaVersion": 6,
      "sourceType": "module",
      "ecmaFeatures": {
          "jsx": true
      }
  },
  "rules": {
      "semi": 0,
      "quotes": [
          "error",
          "double"
      ],
      "eqeqeq": 2,
      "no-trailing-spaces": 2
  }
}

Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON("package.json"),
        watch: {
            scripts: {
                files: ["../index.html", "../scripts/**/*.js", "../styles/**/*.css", "!node_modules/**/*.js"],
                tasks: ["eslint", "browserify", "copy"],
                options: {
                    spawn: false,
                },
            }
        },
        browserify: {
            options: {
                browserifyOptions: {
                    debug: true,
                    paths: ["../scripts"],
                }
            },
            dist: {
                files: {
                    "../../dist/bundle.js": ["../scripts/main.js", "./node_modules"]
                }
            }
        },
        eslint: {
            src: ["../scripts/**/*.js", "!node_modules/**/*.js"]
        },
        copy: {
            main: {
                files: [{
                    expand: true,
                    cwd: "..",
                    src: "./styles/*",
                    dest: "../../dist/"
                }, {
                    expand: true,
                    cwd: "..",
                    src: "./index.html",
                    dest: "../../dist/"
                }]
            }
        }
    });
    grunt.loadNpmTasks("grunt-contrib-copy");
    grunt.loadNpmTasks("grunt-contrib-watch");
    grunt.loadNpmTasks("grunt-eslint");
    grunt.loadNpmTasks("grunt-browserify");
    grunt.registerTask("default", ["eslint", "browserify", "copy", "watch"]);
};

package.json

{
  "name": "",
  "version": "1.0.0",
  "description": "NSS Exercise",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "Steve Brownlee <steve@stevebrownlee.com>",
  "license": "MIT",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "devDependencies": {
    "grunt": "^1.0.2",
    "grunt-browserify": "^5.3.0",
    "grunt-contrib-copy": "^1.0.0",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-eslint": "^20.1.0",
    "jquery": "^3.3.1"
  }
}