coltborg

// Colt Borg Settings
// Last Updated 6/20/2017
{

// Editor

  // Controls the font family.
  "editor.fontFamily": "Fira Code",

  // Controls the font size.

coltborg

# get current branch in git repo
function parse_git_branch() {
	BRANCH=`git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/\1/'`
	if [ ! "${BRANCH}" == "" ]
	then
		STAT=`parse_git_dirty`
		echo "[${BRANCH}${STAT}]"
	else
		echo ""
	fi

coltborg

syntax on
set number
filetype plugin indent on
set tabstop=2 shiftwidth=2 expandtab
set backspace=indent,eol,start
"Set shortcut and symbols for white space
nmap <leader>l :set list!<CR>
set listchars=tab:▸\ ,eol:¬

"From Daniel Miessler

coltborg

{
  "editor.fontFamily": "Dank Mono",
  "editor.fontSize": 14,
  "editor.lineNumbers": "relative",
  "editor.glyphMargin": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": true,
  "editor.roundedSelection": true,
  "editor.scrollBeyondLastLine": true,

coltborg

{
  "editor.fontFamily": "Dank Mono",
  "editor.fontSize": 14,
  "editor.lineNumbers": "relative",
  "editor.glyphMargin": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": true,
  "editor.roundedSelection": true,
  "editor.scrollBeyondLastLine": true,

coltborg

{
  "eslint.enable": true,
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false,
  },
  "[vue]": {
    "editor.formatOnSave": false,
  },
  "eslint.autoFixOnSave": true,

coltborg

CSS Basics

---

Agenda

• Basics
• The Cascade
• Specificity
• Box Model

coltborg

<template>
  <div>Capacity: {{ capacity }}</div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const capacity = ref(3); // Ref is used to wrap a primitive (number) inside of a reactive reference (object)

coltborg

<template>
  <div>Capacity: {{ capacity }}</div>
  <button @click="increaseCapacity">Increase Capacity</button>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {

coltborg

<template>
  <p>
    Spaces left: {{ spacesLeft }} out of {{ capacity }}
  </p>
  <button @click="increaseCapacity">Increase Capacity</button>
  <h2>Attending</h2>
  <ul>
    <li
      v-for="(name, index) in attending"
      :key="index"