├── docs
├── CNAME
├── index.html
└── assets
│ ├── index-DfwBGwiZ.css
│ └── index-Ss1YZ7nU.js
├── .vscode
└── settings.json
├── why-do-you-look-like-that.jpg
├── vite.config.js
├── readme.md
├── tsconfig.json
├── src
├── handlers.ts
├── errorMessages.ts
└── scripts.ts
├── package.json
├── index.html
├── style.css
└── .gitignore
/docs/CNAME:
--------------------------------------------------------------------------------
1 | hair.wesbos.com
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "typescript.tsdk": "node_modules/typescript/lib"
3 | }
--------------------------------------------------------------------------------
/why-do-you-look-like-that.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wesbos/check-my-hair/HEAD/why-do-you-look-like-that.jpg
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 |
3 | export default defineConfig({
4 | // Output to docs directory to match current build setup
5 | build: {
6 | outDir: 'docs',
7 | emptyOutDir: true,
8 | },
9 | // Development server configuration
10 | server: {
11 | port: 8888,
12 | open: true,
13 | }
14 | });
15 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # Check Yourself before you wreck yourself
2 |
3 | A little app to check your webcam before you zoom away your afternoon. I built this because photo booth on the mac crops the webcam so you can't see everything.
4 |
5 | [hair.wesbos.com](https://hair.wesbos.com)
6 |
7 | 
8 |
9 | ## Todo:
10 |
11 | * [ ] Allow Webcam selection from the GUI
12 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": [
3 | "./src/**/*",
4 | "./index.html"
5 | ],
6 | "compilerOptions": {
7 | "strict": true,
8 | "target": "ESNext",
9 | "module": "ESNext",
10 | "moduleResolution": "bundler",
11 | "lib": [
12 | "ESNext",
13 | "DOM",
14 | "DOM.Iterable"
15 | ],
16 | "skipLibCheck": true,
17 | "allowImportingTsExtensions": true,
18 | "noEmit": true,
19 | "isolatedModules": true
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/handlers.ts:
--------------------------------------------------------------------------------
1 | export function setHandler(render: () => void) {
2 | return {
3 | get(target, prop, receiver) {
4 | const value = target[prop];
5 | if (!(value instanceof Function)) {
6 | return value;
7 | }
8 |
9 | return function (...args) {
10 | const result = value.apply(this === receiver ? target : this, args);
11 | if (prop === 'add' || prop === 'delete' || prop === 'clear') {
12 | console.log('Mutation, re-render');
13 | render();
14 | }
15 | return result;
16 | };
17 | },
18 | };
19 | }
20 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "check-my-hair",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "type": "module",
7 | "scripts": {
8 | "start": "vite",
9 | "dev": "vite",
10 | "build": "vite build",
11 | "preview": "vite preview"
12 | },
13 | "eslintConfig": {
14 | "extends": "eslint-config-wesbos/typescript"
15 | },
16 | "browserslist": [
17 | "Last 1 Chrome Versions"
18 | ],
19 | "author": "",
20 | "license": "ISC",
21 | "dependencies": {
22 | "vite": "^7.0.6"
23 | },
24 | "devDependencies": {
25 | "prettier": "^3.6.2",
26 | "typescript": "^5.9.2"
27 | },
28 | "packageManager": "pnpm@9.10.0+sha1.216899f511c8dfde183c7cb50b69009c779534a8"
29 | }
30 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Check My Hair
7 |
8 |
9 |
10 |
11 |
12 |
13 | Made by Wes Bos.
14 | [source]
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
14 | Made by Wes Bos.
15 | [source]
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
3 |
4 |
5 |
${t.label}
6 |
7 |
8 |
68 |
69 |
70 |
${camera.label}
71 |
74 |
75 |