Part 3 | Vanilla JS Projects

## Moar Dev Tools

## [git](https://git-scm.com/) & [Github](https://github.com)

Version control & collaboration (& more)

```shell
					$ git clone https://github.com/vakila/selfie-cam
					$ cd selfie-cam
					$ git checkout -b bugfix

...edit files...

$ git add .
					$ git commit -m "Fix that pesky bug"
					$ git push -u origin bugfix
					```

## [eslint](https://eslint.org/)

Syntax control & (some) bug catching

```shell
					$ npm init @eslint/config
					```

```js
					// package.json
					// ...
					  "scripts": {
						//...
						"lint": "eslint ."
					  }
					```

```shell
					$ npm run lint
					```

## [prettier](https://prettier.io/)

Style control & auto-formatting

```shell
					$ npm install --save-dev --save-exact prettier
					```

```js
					// package.json
					// ...
					  "scripts": {
						//...
						"format": "prettier . --write"
					  }
					``` 
					
					```shell
					$ npm run format
					```

### VSCode does it all

- git & Github built in ([source control](https://code.visualstudio.com/docs/sourcecontrol/overview) tab)
					- [eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension
					- [prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extension

## Deploying

<img src="../assets/liftoff.webp" alt="Apollo 13 mission liftoff" width="500" />
					--

### dev vs. prod
					
					 | 
					-- | --
					dev | "Move fast, break things"
					prod | Deliver a working site to real users

### In Vite:

| 
					-- | --
					dev | Builds targets newest browsers `dev` server watches for changes & reloads
					prod | Build targets wider range of browsers `preview` serves `/dist`, no updates

### Configuring Vite

We can customize:
					- The base path where our site will be hosted (e.g. anjana.dev/selfie-cam/)
					- How the build should work
					- Settings for the `dev` & `preview` servers (e.g. port)

```js
					// my-project/vite.config.js

import { defineConfig } from "vite"; // VSCode autocomplete

export default defineConfig({
						base: "https://my.site.com/project/", 
						server: {
							port: 1234,
						},
						build: {
							target: [ "firefox78", "safari14" ],
						},
						//... lots of other options
					});
					```

### Hosting static sites

Popular options: 
					- [Github Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages)
					- [Netlify](https://docs.netlify.com/get-started/)
					- [Vercel](https://vercel.com/docs/getting-started-with-vercel)

### Ship that Selfie Cam!

[vitejs.dev/guide/static-deploy](https://vitejs.dev/guide/static-deploy#github-pages)

# Recap

## so javascript, much wow

- Browser internals (Stack, Heap, Event Loop)
					- Asynchronous code (callbacks, `setTimeout`, etc.)
					- Programming Paradigms (FP, OOP)
					- The prototype chain
					- Iteration protocols (`[Symbol.iterator]`, generators)
					- Classes & inheritance
					- Browser APIs (e.g. DOM, Canvas, MediaDevices)

## very workflow, amaze

- Node.js 
					- npm & packages
					- ES Modules & `import`/`export`
					- Vite for dev & prod
					- Linting & formatting
					- Production deploys
					- Github & open source