Web Dev Cheat-sheets

HTML Cheat-sheet

Forms

<form>

  <fieldset>
    <legend>Describes fieldset</legend>

    <p>
      <input type="radio" name="vertical" id="option1" value="top">
      <label for="option1">Top</label>
    </p>

    <p>
      <label for="option2">
        <input type="radio" name="vertical" id="option2" value="bottom"> Bottom
      </label>
    </p>

    <p>
      <label for="horizontal">
        Horizontal:
      </label>
      <select id="horizontal" name="horizontal">
        <option value="left">Left</option>
        <option value="middle">Middle</option>
        <option value="right">Right</option>
      </select>
    </p>

  </fieldset>

</form>

Semantic Markup

<html lang="en">

  <head>
    <title>Title<title>
  </head>

  <body>

    <header>
      Logo, title, navigation
      <nav>
        Primary and secondary menus but ever nest navs
      </nav>
    </header>

    <section>
      Related grouping of semantic meaning

      <article>
        Self-contained content
      </article>

      <article>
        Would still make sense if all other content removed

        <aside>
          <blockquote>
            Related to main but outside the main flow
          </blockquote>
        </aside>

      </article>
    </section>

    <footer>
      Copyright, contact, links
    </footer>

  </body>

</html>

Tables

<table>

  <caption>Table Caption</caption>

  <colgroup>
    <col>
    <col span="2" class="left-two">
    <col span="2" class="right-two">
  </colgroup>

  <thead>
    <tr>
      <th></th>
      <th colspan="2">Left Two</th>
      <th colspan="2">Right Two</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th rowspan="2">Top Two</th>
      <td>Body 1,1</td>
      <td>Body 1,2</td>
      <td>Body 1,3</td>
      <td>Body 1,4</td>
    </tr>
    <tr>
      <td>Body 2,1</td>
      <td>Body 2,2</td>
      <td>Body 2,3</td>
      <td>Body 2,4</td>
    </tr>
    <tr>
      <th rowspan="2">Bottom Two</th>
      <td>Body 3,1</td>
      <td>Body 3,2</td>
      <td>Body 3,3</td>
      <td>Body 3,4</td>
    </tr>
    <tr>
      <td>Body 4,1</td>
      <td>Body 4,2</td>
      <td>Body 4,3</td>
      <td>Body 4,4</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th></th>
      <td>Footer 1</td>
      <td>Footer 2</td>
      <td>Footer 3</td>
      <td>Footer 4</td>
    </tr>
  </tfoot>

</table>

CSS Cheat-sheet

Coloring

Positioning

position: static | relative | absolute | sticky

sets element's positioning, along with top, left, bottom, right properties

MDN 
margin 0 auto

centers block in containing block

MDN 
overflow: visible | hidden | scroll | auto | clip | hidden visible

how to render content outside content-box

MDN

Sizing

box-sizing: content-box | border-box

content-box is default

MDN 
height: <px | em | % | keyword>

Sets height for non-inline elements

MDN 
width: <px | em | % | keyword>

Sets width for non-inline elements

MDN

DOM Cheat-sheet

Querying/Selecting Elements

document.getElementById(id)

returns element object by id

MDN 
document.getElementsByClassName(className)

returns live HTMLCollection of elements by class

MDN 
document.getElementsByTagName(tagName)

returns live HTMLCollection of elements by tag

MDN 
document.querySelector(cssSelector)

returns the first element matching selector(s)

MDN 
document.querySelectorAll(cssSelector)

returns static NodeList representing elements matching selector(s)

MDN

Traversing Elements

firstElementChild, lastElementChild

returns first/last child element or null if none

MDN 
nextElementChild, previousElementChild
nextElementSibling, previousElementSibling
parentNode, childNodes, childElementCount

self-explanatory

JAVASCRIPT.INFO

JavaScript Cheat-sheet

Arrays

Array.from(arrayLike[, mapFn[, thisArg]])

creates mapped array from array-like iterable object

MDN 
Array.prototype.includes(valueToFind[, fromIndex])

returns true if value found

MDN

Objects

Object.prototype.hasOwnProperty('property')

returns true of object has property (not inherited) specified in string

MDN 
for (let [key, value] of Object.entries(object1))

returns array of object's keys and values: [key, value]

MDN 
console.log(Object.keys(object1))

returns array of object's own property names

MDN

Strings

stringVar.includes(searchString[, position])

returns true if searchString found in stringVar, beginning at position

MDN

Miscellaneous

parseInt(process.version.slice(1))

returns node's major version number

nodejs article nodejs docs 
typeof variable === "undefined"

checks if variable is defined--do not forget the quotes since: typeof typeof whatever === "string"

MDN

Git Cheat-sheet

Viewing

git log --oneline

shows most concise history format

git reference 
git log --pretty=format:'%h %ad | %s%d [%an]' --graph --date=human

shows a practical format

Creating and Committing

git init

creates local repository--don't forget .gitignore

git clone <http | https | ssh | git URL>

(http and git don't require credentials)

git add -A [-v]

adds, modifies, and removes entries to match working tree

git reference 
git add -u [-v]

removes and modifies entries to match working tree; adds nothing

git rm <file>

removes file from working tree and index

git commit -m "Message"

commits working tree to branch

git reference rules 
git commit --amend -m "New message"

add changes and/or changes message to last commit

Branching and Merging

git branch -vva

lists all local and remote branches

git branch <branch-name>

creates new branch

git branch -d <branch-name>

deletes local branch

git checkout <branch-name>

checks out local branch

git checkout -b <branch-name>

shortcut for git branch + git checkout <branch-name>

git merge <branch-name>

merges branch-name into current checked-out branch

git merge --abort

aborts merge during conflict resolution

Stashing

git stash

stashes local changes and cleans working directory

git stash list

lists stashes, newest on top

git stash pop

applies changes to working directory and removes stash

git stash apply [stash-name]

applies changes but keeps stash

git stash drop [stash-name]

deletes stash

Undoing

git checkout file/to/restore.ext

restores a file to the last committed version

git reset HEAD file/to/unstage.ext

clears staging area of staged changes without changing working copy

git reference 
git reset --hard <HEAD | 7-hash-digits>

replaces working copy files with last or specified commit, moves HEAD

git revert <HEAD | 7-hash-digits>

produces new commit with changes to revert to last or specified commit

Remote

git remote add upstream <http | https | ssh | git URL>

adds remote repository

git remote -v

lists remote repositories with URLs

git fetch origin

updates local information about the remote

git pull [upstream master]

fetches and merges remote commits

git checkout --track origin/branch-name

creates and checks out local branch with same name as remote

git push [-u origin branch-name]

uploads local commits to remote, [optional] required if not tracked

git push origin --delete branch-name

deletes remote branch

Configuring

git config --list [--local|--global][ | sort]

shows current configuration

git reference 
git config [--global] core.editor /path/to/editor

selects editor for blank commit comment

Workflow

From:

HR Git Workflow
  1. Fork project from hackreactor GitHub
  2. Clone GitHub forked project to local machine 
    git clone https://github.com/USER_NAME/REPOSITORY_NAME.git
  3. Add remote to point to original (upstream) repo 
    git remote add upstream https://github.com/USER_NAME/REPOSITORY_NAME.git
  4. Check for correct branch and clean staging area 
    git status
  5. Make smallest possible change to add or improve something; review 
    git status, git diff
  6. Add files to commit 
    git add, git status
  7. Commit changes 
    git commit, git status
  8. Push changes to GitHub fork 
    git push origin master