---
# System prepended metadata

title: Why The F**k Didn't I Know This Sooner?!

---

# Why The F**k Didn't I Know This Sooner?!
By Hannah Gooding

## Contact Me
- FAC Slack
- Email: hannah.gooding@yahoo.com
- Twitter: @hannahwsgooding

---

## Pimp My Terminal

- ZSH terminal shell (aka Z shell) runs on Unix-like operating system: macOS, Linux, BSD, Windows: WSL2 is preferred
- You can download [Oh My Zsh](https://ohmyz.sh/), an opensource framework for terminal configuration
- You can customise the look of your CLI with themes, I use [agnoster](https://github.com/ohmyzsh/ohmyzsh/wiki/Themes#agnoster) which shows the git branch you're on
- You can use plugins, it ships with the [git plugin](https://github.com/ohmyzsh/ohmyzsh/tree/master/plugins/git) which gives you cool shortcuts for git commands

---

## Emmet in VS Code
- Shortcut support built into VS Code - no extension required

### HTML Boilerplates
- `!` is a built-in Emmet shortcut that brings up a basic HTML boilerplate
- Doesn't have:
    - `<meta name="description" content="">` meta description for SEO
    - `<link rel="stylesheet" type="text/css" href="styles.css">` for linking CSS stylesheets
    - `<script src="scripts.js"></script>` for linking JavaScript files

### Custom Shortcuts
- I made `!!` into a custom shortcut for my VS Code editor that includes these tags and a few other frequently used semantic tags
- To configure:
    - Code > Preferences > User Snippets > html.json
    - Add snippets into this file
- There are comments in the file (and docs) that explain in more detail, but the JSON structure means this:

```json
{
  "Shortcut name": {
    "prefix": "shortcut keystrokes",
    "body": [
      "<code goes here>"
    ],
    "description": "Shortcut description"
  }
}
```
- To parse your HTML file into a JSON string with escaped characters you can use a tool like [this](https://www.freeformatter.com/json-escape.html)
- My `html.json` file:

```json
{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
	  "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <meta name=\"description\" content=\"\">\r\n  <link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\">\r\n  <title>Document<\/title>\r\n<\/head>\r\n<body>\r\n  <header>\r\n  <\/header>\r\n  <main>\r\n  <\/main>\r\n  <footer>\r\n  <\/footer>\r\n  <script src=\"scripts.js\"><\/script>\r\n<\/body>\r\n<\/html>"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}
```

### Elements with children 
- The shortcut `nav>ul>li` creates:
```htmlembedded
<nav>
  <ul>
    <li></li>
  </ul>
</nav>
```

### Multiple elements 
- The shortcut `li*5` creates:
```htmlembedded
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
```

### HTML abbrevations 
- The shortcut `a{Click Me}` creates:
```htmlembedded
<a href="">Click Me</a>
```

---

## Useful VS Code extensions

### Bracket Pair Colorizer
- Colorize matching brackets so you can scope functions at a glance

### Relative File path
- Shortcut for getting the relative filepath of another file from your current file
- Windows `Ctrl+Shift+H`
- Mac `Cmd+Shift+H`

### GitLens
- Shows commit history for each line in your files
- It shows Git history information on the extension dashboard, it's [Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)!

### Source Control Tab (in-built you do not need to download)
- You can stage your files and write commit messages in VS Code rather than using the terminal
- It tells you the character count if you go over the "recommended" amount in a line
- If you are using the Live Share extension, your collaborators co-authoring credentials appear (they have to be signed in with their GitHub account)

---

## Prettier
- Formats your code!
- You can download it as an extension on VS Code, and it will run your settings that you configure in the application
- To format the current file, right click and select `Format Document`
- To turn on automatic formatting go to Settings and search for `format on save`
- It's a good idea to have a `.prettierrc` config file in the root folder of your projects where you specify how many spaces you want for intentation, single or double quotes, etc.
- The config file overrides your local VS Code Prettier settings so everyone on the team will have the same formatting rules applied to their code - avoiding nasty conflicts!

---

## Resources

### Oh My Zsh
[Oh My Zsh Docs](https://github.com/ohmyzsh/ohmyzsh)
[Git Shortcut Cheat Sheet](https://kapeli.com/cheat_sheets/Oh-My-Zsh_Git.docset/Contents/Resources/Documents/index)

### VS Code Emmet
[Emmet Cheat Sheet](https://docs.emmet.io/cheat-sheet/)

### Git Commits
[How to Write a Git Commit Message](https://chris.beams.io/posts/git-commit/)

### Prettier
[Prettier Config Generator](https://michelelarson.com/prettier-config/)