Part 3
Hackathon
Goals
- Keep refining our dev workflow
- Deploy a project to prod
- See our quick-wins come together
- Get hacking & get creative
Ready?
Let's go!
Moar Dev Tools
git & Github
Version control & collaboration (& more)
$ 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 bugfixeslint
Syntax control & (some) bug catching
$ npm init @eslint/config// package.json
// ...
"scripts": {
//...
"lint": "eslint ."
}$ npm run lintprettier
Style control & auto-formatting
$ npm install --save-dev --save-exact prettier// package.json
// ...
"scripts": {
//...
"format": "prettier . --write"
}$ npm run formatVSCode does it all
- git & Github built in (source control tab)
- eslint extension
- prettier extension
Deploying
dev vs. prod
| dev | "Move fast, break things" |
| prod | Deliver a working site to real users |
In Vite:
| dev | Builds targets newest browsersdev server watches for changes & reloads |
| prod | Build targets wider range of browserspreview 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&previewservers (e.g. port)
// 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:
Ship that Selfie Cam!
Pulling it all together
Quick Wins
+
Selfie Cam
+
A little extra code
equals...
MEME ME!
Hackathon
- Fork the Github project
- Make it your own
- Deploy your version
- Show off your work!
Feature brainstorm
- Custom text placement
- More text nodes
- Additional settings, e.g.
- More font choices
- Different colors for each text
- Filters on the image
- Emoji/Stickers
- Share button
- ...anything else you can think of!
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
Part 3 Hackathon