txarli/txarli.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Format literally everything

Browse Source
This commit is contained in:
Cassidy Williams
2022-10-23 23:26:41 -05:00
parent ff9f16105e
commit 0d4e70c5ee
45 changed files with 11569 additions and 11706 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
astro.config.mjs
View File

@@ -1,10 +1,8 @@
import { defineConfig } from "astro/config"; import { defineConfig } from "astro/config";
import mdx from "@astrojs/mdx";
import sitemap from "@astrojs/sitemap"; import sitemap from "@astrojs/sitemap";
// https://astro.build/config // https://astro.build/config
export default defineConfig({ export default defineConfig({
site: "https://cassidoo.co/blog", site: "https://cassidoo.co/blog",
integrations: [mdx(), sitemap()], integrations: [sitemap()],
}); });

745
package-lock.json generated
View File

@@ -11,7 +11,9 @@
"@astrojs/mdx": "^0.10.0", "@astrojs/mdx": "^0.10.0",
"@astrojs/rss": "^1.0.0", "@astrojs/rss": "^1.0.0",
"@astrojs/sitemap": "^1.0.0", "@astrojs/sitemap": "^1.0.0",
"astro": "^1.0.7" "astro": "^1.0.7",
"prettier": "^2.7.1",
"prettier-plugin-astro": "^0.6.0"
} }
}, },
"node_modules/@ampproject/remapping": { "node_modules/@ampproject/remapping": {
@@ -583,22 +585,6 @@
"integrity": "sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==", "integrity": "sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==",
"dev": true "dev": true
}, },
"node_modules/@esbuild/linux-loong64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz",
"integrity": "sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==",
"cpu": [
"loong64"
],
"dev": true,
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/@jridgewell/gen-mapping": { "node_modules/@jridgewell/gen-mapping": {
"version": "0.1.1", "version": "0.1.1",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -735,6 +721,26 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/@pkgr/utils": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.3.1.tgz",
"integrity": "sha512-wfzX8kc1PMyUILA+1Z/EqoE4UCXGy0iRGMhPwdfae1+f0OXlLqCk+By+aMzgJBzR9AzS4CDizioG6Ss1gvAFJw==",
"dev": true,
"dependencies": {
"cross-spawn": "^7.0.3",
"is-glob": "^4.0.3",
"open": "^8.4.0",
"picocolors": "^1.0.0",
"tiny-glob": "^0.2.9",
"tslib": "^2.4.0"
},
"engines": {
"node": "^12.20.0 || ^14.18.0 || >=16.0.0"
},
"funding": {
"url": "https://opencollective.com/unts"
}
},
"node_modules/@polka/url": { "node_modules/@polka/url": {
"version": "1.0.0-next.21", "version": "1.0.0-next.21",
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz", "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
@@ -1584,6 +1590,15 @@
"clone": "^1.0.2" "clone": "^1.0.2"
} }
}, },
"node_modules/define-lazy-prop": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
"integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
"dev": true,
"engines": {
"node": ">=8"
}
},
"node_modules/dequal": { "node_modules/dequal": {
"version": "2.0.3", "version": "2.0.3",
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -1693,54 +1708,6 @@
"esbuild-windows-arm64": "0.14.54" "esbuild-windows-arm64": "0.14.54"
} }
}, },
"node_modules/esbuild-android-64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.54.tgz",
"integrity": "sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ==",
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">=12"
}
},
"node_modules/esbuild-android-arm64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.54.tgz",
"integrity": "sha512-F9E+/QDi9sSkLaClO8SOV6etqPd+5DgJje1F9lOWoNncDdOBL2YF59IhsWATSt0TLZbYCf3pNlTHvVV5VfHdvg==",
"cpu": [
"arm64"
],
"dev": true,
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">=12"
}
},
"node_modules/esbuild-darwin-64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.54.tgz",
"integrity": "sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug==",
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">=12"
}
},
"node_modules/esbuild-darwin-arm64": { "node_modules/esbuild-darwin-arm64": {
"version": "0.14.54", "version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.54.tgz", "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.54.tgz",
@@ -1757,262 +1724,6 @@
"node": ">=12" "node": ">=12"
} }
}, },
"node_modules/esbuild-freebsd-64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.54.tgz",
"integrity": "sha512-OKwd4gmwHqOTp4mOGZKe/XUlbDJ4Q9TjX0hMPIDBUWWu/kwhBAudJdBoxnjNf9ocIB6GN6CPowYpR/hRCbSYAg==",
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">=12"
}
},
"node_modules/esbuild-freebsd-arm64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.54.tgz",
"integrity": "sha512-sFwueGr7OvIFiQT6WeG0jRLjkjdqWWSrfbVwZp8iMP+8UHEHRBvlaxL6IuKNDwAozNUmbb8nIMXa7oAOARGs1Q==",
"cpu": [
"arm64"
],
"dev": true,
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">=12"
}
},
"node_modules/esbuild-linux-32": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.54.tgz",
"integrity": "sha512-1ZuY+JDI//WmklKlBgJnglpUL1owm2OX+8E1syCD6UAxcMM/XoWd76OHSjl/0MR0LisSAXDqgjT3uJqT67O3qw==",
"cpu": [
"ia32"
],
"dev": true,
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/esbuild-linux-64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz",
"integrity": "sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==",
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/esbuild-linux-arm": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.54.tgz",
"integrity": "sha512-qqz/SjemQhVMTnvcLGoLOdFpCYbz4v4fUo+TfsWG+1aOu70/80RV6bgNpR2JCrppV2moUQkww+6bWxXRL9YMGw==",
"cpu": [
"arm"
],
"dev": true,
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/esbuild-linux-arm64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.54.tgz",
"integrity": "sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig==",
"cpu": [
"arm64"
],
"dev": true,
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/esbuild-linux-mips64le": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.54.tgz",
"integrity": "sha512-qTHGQB8D1etd0u1+sB6p0ikLKRVuCWhYQhAHRPkO+OF3I/iSlTKNNS0Lh2Oc0g0UFGguaFZZiPJdJey3AGpAlw==",
"cpu": [
"mips64el"
],
"dev": true,
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/esbuild-linux-ppc64le": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.54.tgz",
"integrity": "sha512-j3OMlzHiqwZBDPRCDFKcx595XVfOfOnv68Ax3U4UKZ3MTYQB5Yz3X1mn5GnodEVYzhtZgxEBidLWeIs8FDSfrQ==",
"cpu": [
"ppc64"
],
"dev": true,
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/esbuild-linux-riscv64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.54.tgz",
"integrity": "sha512-y7Vt7Wl9dkOGZjxQZnDAqqn+XOqFD7IMWiewY5SPlNlzMX39ocPQlOaoxvT4FllA5viyV26/QzHtvTjVNOxHZg==",
"cpu": [
"riscv64"
],
"dev": true,
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/esbuild-linux-s390x": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.54.tgz",
"integrity": "sha512-zaHpW9dziAsi7lRcyV4r8dhfG1qBidQWUXweUjnw+lliChJqQr+6XD71K41oEIC3Mx1KStovEmlzm+MkGZHnHA==",
"cpu": [
"s390x"
],
"dev": true,
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=12"
}
},
"node_modules/esbuild-netbsd-64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.54.tgz",
"integrity": "sha512-PR01lmIMnfJTgeU9VJTDY9ZerDWVFIUzAtJuDHwwceppW7cQWjBBqP48NdeRtoP04/AtO9a7w3viI+PIDr6d+w==",
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"netbsd"
],
"engines": {
"node": ">=12"
}
},
"node_modules/esbuild-openbsd-64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.54.tgz",
"integrity": "sha512-Qyk7ikT2o7Wu76UsvvDS5q0amJvmRzDyVlL0qf5VLsLchjCa1+IAvd8kTBgUxD7VBUUVgItLkk609ZHUc1oCaw==",
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"openbsd"
],
"engines": {
"node": ">=12"
}
},
"node_modules/esbuild-sunos-64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.54.tgz",
"integrity": "sha512-28GZ24KmMSeKi5ueWzMcco6EBHStL3B6ubM7M51RmPwXQGLe0teBGJocmWhgwccA1GeFXqxzILIxXpHbl9Q/Kw==",
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"sunos"
],
"engines": {
"node": ">=12"
}
},
"node_modules/esbuild-windows-32": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.54.tgz",
"integrity": "sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w==",
"cpu": [
"ia32"
],
"dev": true,
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">=12"
}
},
"node_modules/esbuild-windows-64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.54.tgz",
"integrity": "sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ==",
"cpu": [
"x64"
],
"dev": true,
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">=12"
}
},
"node_modules/esbuild-windows-arm64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.54.tgz",
"integrity": "sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg==",
"cpu": [
"arm64"
],
"dev": true,
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">=12"
}
},
"node_modules/escalade": { "node_modules/escalade": {
"version": "3.1.1", "version": "3.1.1",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -2362,6 +2073,18 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/globalyzer": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
"integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==",
"dev": true
},
"node_modules/globrex": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
"integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
"dev": true
},
"node_modules/graceful-fs": { "node_modules/graceful-fs": {
"version": "4.2.10", "version": "4.2.10",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -4330,6 +4053,38 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/open": {
"version": "8.4.0",
"resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
"integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
"dev": true,
"dependencies": {
"define-lazy-prop": "^2.0.0",
"is-docker": "^2.1.1",
"is-wsl": "^2.2.0"
},
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/open/node_modules/is-docker": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
"integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
"dev": true,
"bin": {
"is-docker": "cli.js"
},
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/ora": { "node_modules/ora": {
"version": "6.1.2", "version": "6.1.2",
"resolved": "https://registry.npmjs.org/ora/-/ora-6.1.2.tgz", "resolved": "https://registry.npmjs.org/ora/-/ora-6.1.2.tgz",
@@ -4650,6 +4405,43 @@
"node": ">=10" "node": ">=10"
} }
}, },
"node_modules/prettier": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
"integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
"dev": true,
"bin": {
"prettier": "bin-prettier.js"
},
"engines": {
"node": ">=10.13.0"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/prettier-plugin-astro": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.6.0.tgz",
"integrity": "sha512-xU67TzyGi1u/pwVbEh55AwoOfcOpsh9BtD2MpUAEVrViAcdrBDcmA9VN0edLgla7f2NYu8ntGakxTSrSNFv1mQ==",
"dev": true,
"dependencies": {
"@astrojs/compiler": "0.27.2",
"prettier": "^2.7.1",
"sass-formatter": "^0.7.5",
"synckit": "^0.8.4"
},
"engines": {
"node": "^14.15.0 || >=16.0.0",
"npm": ">=6.14.0"
}
},
"node_modules/prettier-plugin-astro/node_modules/@astrojs/compiler": {
"version": "0.27.2",
"resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-0.27.2.tgz",
"integrity": "sha512-VG4X87cUkcmT40HqEwShQzUgl0VSnVTszobbmnhAOkHzdoWMxhwAm61A2o5fEsv6eEK8M0lW/fGwkSofYM5GcQ==",
"dev": true
},
"node_modules/prismjs": { "node_modules/prismjs": {
"version": "1.28.0", "version": "1.28.0",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.28.0.tgz", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.28.0.tgz",
@@ -5096,6 +4888,12 @@
"queue-microtask": "^1.2.2" "queue-microtask": "^1.2.2"
} }
}, },
"node_modules/s.color": {
"version": "0.0.15",
"resolved": "https://registry.npmjs.org/s.color/-/s.color-0.0.15.tgz",
"integrity": "sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==",
"dev": true
},
"node_modules/sade": { "node_modules/sade": {
"version": "1.8.1", "version": "1.8.1",
"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz", "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
@@ -5114,6 +4912,15 @@
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
"dev": true "dev": true
}, },
"node_modules/sass-formatter": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/sass-formatter/-/sass-formatter-0.7.5.tgz",
"integrity": "sha512-NKFP8ddjhUYi6A/iD1cEtzkEs91U61kzqe3lY9SVNuvX7LGc88xnEN0mmsWL7Ol//YTi2GL/ol7b9XZ2+hgXuA==",
"dev": true,
"dependencies": {
"suf-log": "^2.5.3"
}
},
"node_modules/sax": { "node_modules/sax": {
"version": "1.2.4", "version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -5403,6 +5210,15 @@
"inline-style-parser": "0.1.1" "inline-style-parser": "0.1.1"
} }
}, },
"node_modules/suf-log": {
"version": "2.5.3",
"resolved": "https://registry.npmjs.org/suf-log/-/suf-log-2.5.3.tgz",
"integrity": "sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==",
"dev": true,
"dependencies": {
"s.color": "0.0.15"
}
},
"node_modules/supports-color": { "node_modules/supports-color": {
"version": "5.5.0", "version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -5436,6 +5252,32 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/synckit": {
"version": "0.8.4",
"resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.4.tgz",
"integrity": "sha512-Dn2ZkzMdSX827QbowGbU/4yjWuvNaCoScLLoMo/yKbu+P4GBR6cRGKZH27k6a9bRzdqcyd1DE96pQtQ6uNkmyw==",
"dev": true,
"dependencies": {
"@pkgr/utils": "^2.3.1",
"tslib": "^2.4.0"
},
"engines": {
"node": "^14.18.0 || >=16.0.0"
},
"funding": {
"url": "https://opencollective.com/unts"
}
},
"node_modules/tiny-glob": {
"version": "0.2.9",
"resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
"integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
"dev": true,
"dependencies": {
"globalyzer": "0.1.0",
"globrex": "^0.1.2"
}
},
"node_modules/to-fast-properties": { "node_modules/to-fast-properties": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -6608,13 +6450,6 @@
"integrity": "sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==", "integrity": "sha512-8HqW8EVqjnCmWXVpqAOZf+EGESdkR27odcMMMGefgKXtar00SoYNSryGv//TELI4T3QFsECo78p+0lmalk/CFA==",
"dev": true "dev": true
}, },
"@esbuild/linux-loong64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz",
"integrity": "sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==",
"dev": true,
"optional": true
},
"@jridgewell/gen-mapping": { "@jridgewell/gen-mapping": {
"version": "0.1.1", "version": "0.1.1",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
@@ -6722,6 +6557,20 @@
"fastq": "^1.6.0" "fastq": "^1.6.0"
} }
}, },
"@pkgr/utils": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/@pkgr/utils/-/utils-2.3.1.tgz",
"integrity": "sha512-wfzX8kc1PMyUILA+1Z/EqoE4UCXGy0iRGMhPwdfae1+f0OXlLqCk+By+aMzgJBzR9AzS4CDizioG6Ss1gvAFJw==",
"dev": true,
"requires": {
"cross-spawn": "^7.0.3",
"is-glob": "^4.0.3",
"open": "^8.4.0",
"picocolors": "^1.0.0",
"tiny-glob": "^0.2.9",
"tslib": "^2.4.0"
}
},
"@polka/url": { "@polka/url": {
"version": "1.0.0-next.21", "version": "1.0.0-next.21",
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz", "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
@@ -7367,6 +7216,12 @@
"clone": "^1.0.2" "clone": "^1.0.2"
} }
}, },
"define-lazy-prop": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
"integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
"dev": true
},
"dequal": { "dequal": {
"version": "2.0.3", "version": "2.0.3",
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -7460,27 +7315,6 @@
"esbuild-windows-arm64": "0.14.54" "esbuild-windows-arm64": "0.14.54"
} }
}, },
"esbuild-android-64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-android-64/-/esbuild-android-64-0.14.54.tgz",
"integrity": "sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ==",
"dev": true,
"optional": true
},
"esbuild-android-arm64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-android-arm64/-/esbuild-android-arm64-0.14.54.tgz",
"integrity": "sha512-F9E+/QDi9sSkLaClO8SOV6etqPd+5DgJje1F9lOWoNncDdOBL2YF59IhsWATSt0TLZbYCf3pNlTHvVV5VfHdvg==",
"dev": true,
"optional": true
},
"esbuild-darwin-64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-darwin-64/-/esbuild-darwin-64-0.14.54.tgz",
"integrity": "sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug==",
"dev": true,
"optional": true
},
"esbuild-darwin-arm64": { "esbuild-darwin-arm64": {
"version": "0.14.54", "version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.54.tgz", "resolved": "https://registry.npmjs.org/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.54.tgz",
@@ -7488,118 +7322,6 @@
"dev": true, "dev": true,
"optional": true "optional": true
}, },
"esbuild-freebsd-64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.54.tgz",
"integrity": "sha512-OKwd4gmwHqOTp4mOGZKe/XUlbDJ4Q9TjX0hMPIDBUWWu/kwhBAudJdBoxnjNf9ocIB6GN6CPowYpR/hRCbSYAg==",
"dev": true,
"optional": true
},
"esbuild-freebsd-arm64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.54.tgz",
"integrity": "sha512-sFwueGr7OvIFiQT6WeG0jRLjkjdqWWSrfbVwZp8iMP+8UHEHRBvlaxL6IuKNDwAozNUmbb8nIMXa7oAOARGs1Q==",
"dev": true,
"optional": true
},
"esbuild-linux-32": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-linux-32/-/esbuild-linux-32-0.14.54.tgz",
"integrity": "sha512-1ZuY+JDI//WmklKlBgJnglpUL1owm2OX+8E1syCD6UAxcMM/XoWd76OHSjl/0MR0LisSAXDqgjT3uJqT67O3qw==",
"dev": true,
"optional": true
},
"esbuild-linux-64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz",
"integrity": "sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==",
"dev": true,
"optional": true
},
"esbuild-linux-arm": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-linux-arm/-/esbuild-linux-arm-0.14.54.tgz",
"integrity": "sha512-qqz/SjemQhVMTnvcLGoLOdFpCYbz4v4fUo+TfsWG+1aOu70/80RV6bgNpR2JCrppV2moUQkww+6bWxXRL9YMGw==",
"dev": true,
"optional": true
},
"esbuild-linux-arm64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.54.tgz",
"integrity": "sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig==",
"dev": true,
"optional": true
},
"esbuild-linux-mips64le": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.54.tgz",
"integrity": "sha512-qTHGQB8D1etd0u1+sB6p0ikLKRVuCWhYQhAHRPkO+OF3I/iSlTKNNS0Lh2Oc0g0UFGguaFZZiPJdJey3AGpAlw==",
"dev": true,
"optional": true
},
"esbuild-linux-ppc64le": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.54.tgz",
"integrity": "sha512-j3OMlzHiqwZBDPRCDFKcx595XVfOfOnv68Ax3U4UKZ3MTYQB5Yz3X1mn5GnodEVYzhtZgxEBidLWeIs8FDSfrQ==",
"dev": true,
"optional": true
},
"esbuild-linux-riscv64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.54.tgz",
"integrity": "sha512-y7Vt7Wl9dkOGZjxQZnDAqqn+XOqFD7IMWiewY5SPlNlzMX39ocPQlOaoxvT4FllA5viyV26/QzHtvTjVNOxHZg==",
"dev": true,
"optional": true
},
"esbuild-linux-s390x": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.54.tgz",
"integrity": "sha512-zaHpW9dziAsi7lRcyV4r8dhfG1qBidQWUXweUjnw+lliChJqQr+6XD71K41oEIC3Mx1KStovEmlzm+MkGZHnHA==",
"dev": true,
"optional": true
},
"esbuild-netbsd-64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.54.tgz",
"integrity": "sha512-PR01lmIMnfJTgeU9VJTDY9ZerDWVFIUzAtJuDHwwceppW7cQWjBBqP48NdeRtoP04/AtO9a7w3viI+PIDr6d+w==",
"dev": true,
"optional": true
},
"esbuild-openbsd-64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.54.tgz",
"integrity": "sha512-Qyk7ikT2o7Wu76UsvvDS5q0amJvmRzDyVlL0qf5VLsLchjCa1+IAvd8kTBgUxD7VBUUVgItLkk609ZHUc1oCaw==",
"dev": true,
"optional": true
},
"esbuild-sunos-64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.54.tgz",
"integrity": "sha512-28GZ24KmMSeKi5ueWzMcco6EBHStL3B6ubM7M51RmPwXQGLe0teBGJocmWhgwccA1GeFXqxzILIxXpHbl9Q/Kw==",
"dev": true,
"optional": true
},
"esbuild-windows-32": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-windows-32/-/esbuild-windows-32-0.14.54.tgz",
"integrity": "sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w==",
"dev": true,
"optional": true
},
"esbuild-windows-64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-windows-64/-/esbuild-windows-64-0.14.54.tgz",
"integrity": "sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ==",
"dev": true,
"optional": true
},
"esbuild-windows-arm64": {
"version": "0.14.54",
"resolved": "https://registry.npmjs.org/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.54.tgz",
"integrity": "sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg==",
"dev": true,
"optional": true
},
"escalade": { "escalade": {
"version": "3.1.1", "version": "3.1.1",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -7843,6 +7565,18 @@
"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
"dev": true "dev": true
}, },
"globalyzer": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
"integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==",
"dev": true
},
"globrex": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
"integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
"dev": true
},
"graceful-fs": { "graceful-fs": {
"version": "4.2.10", "version": "4.2.10",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -9156,6 +8890,25 @@
"mimic-fn": "^4.0.0" "mimic-fn": "^4.0.0"
} }
}, },
"open": {
"version": "8.4.0",
"resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
"integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
"dev": true,
"requires": {
"define-lazy-prop": "^2.0.0",
"is-docker": "^2.1.1",
"is-wsl": "^2.2.0"
},
"dependencies": {
"is-docker": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
"integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
"dev": true
}
}
},
"ora": { "ora": {
"version": "6.1.2", "version": "6.1.2",
"resolved": "https://registry.npmjs.org/ora/-/ora-6.1.2.tgz", "resolved": "https://registry.npmjs.org/ora/-/ora-6.1.2.tgz",
@@ -9377,6 +9130,32 @@
"which-pm": "2.0.0" "which-pm": "2.0.0"
} }
}, },
"prettier": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz",
"integrity": "sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==",
"dev": true
},
"prettier-plugin-astro": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.6.0.tgz",
"integrity": "sha512-xU67TzyGi1u/pwVbEh55AwoOfcOpsh9BtD2MpUAEVrViAcdrBDcmA9VN0edLgla7f2NYu8ntGakxTSrSNFv1mQ==",
"dev": true,
"requires": {
"@astrojs/compiler": "0.27.2",
"prettier": "^2.7.1",
"sass-formatter": "^0.7.5",
"synckit": "^0.8.4"
},
"dependencies": {
"@astrojs/compiler": {
"version": "0.27.2",
"resolved": "https://registry.npmjs.org/@astrojs/compiler/-/compiler-0.27.2.tgz",
"integrity": "sha512-VG4X87cUkcmT40HqEwShQzUgl0VSnVTszobbmnhAOkHzdoWMxhwAm61A2o5fEsv6eEK8M0lW/fGwkSofYM5GcQ==",
"dev": true
}
}
},
"prismjs": { "prismjs": {
"version": "1.28.0", "version": "1.28.0",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.28.0.tgz", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.28.0.tgz",
@@ -9689,6 +9468,12 @@
"queue-microtask": "^1.2.2" "queue-microtask": "^1.2.2"
} }
}, },
"s.color": {
"version": "0.0.15",
"resolved": "https://registry.npmjs.org/s.color/-/s.color-0.0.15.tgz",
"integrity": "sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==",
"dev": true
},
"sade": { "sade": {
"version": "1.8.1", "version": "1.8.1",
"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz", "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
@@ -9704,6 +9489,15 @@
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
"dev": true "dev": true
}, },
"sass-formatter": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/sass-formatter/-/sass-formatter-0.7.5.tgz",
"integrity": "sha512-NKFP8ddjhUYi6A/iD1cEtzkEs91U61kzqe3lY9SVNuvX7LGc88xnEN0mmsWL7Ol//YTi2GL/ol7b9XZ2+hgXuA==",
"dev": true,
"requires": {
"suf-log": "^2.5.3"
}
},
"sax": { "sax": {
"version": "1.2.4", "version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -9914,6 +9708,15 @@
"inline-style-parser": "0.1.1" "inline-style-parser": "0.1.1"
} }
}, },
"suf-log": {
"version": "2.5.3",
"resolved": "https://registry.npmjs.org/suf-log/-/suf-log-2.5.3.tgz",
"integrity": "sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==",
"dev": true,
"requires": {
"s.color": "0.0.15"
}
},
"supports-color": { "supports-color": {
"version": "5.5.0", "version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -9938,6 +9741,26 @@
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
"dev": true "dev": true
}, },
"synckit": {
"version": "0.8.4",
"resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.4.tgz",
"integrity": "sha512-Dn2ZkzMdSX827QbowGbU/4yjWuvNaCoScLLoMo/yKbu+P4GBR6cRGKZH27k6a9bRzdqcyd1DE96pQtQ6uNkmyw==",
"dev": true,
"requires": {
"@pkgr/utils": "^2.3.1",
"tslib": "^2.4.0"
}
},
"tiny-glob": {
"version": "0.2.9",
"resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
"integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
"dev": true,
"requires": {
"globalyzer": "0.1.0",
"globrex": "^0.1.2"
}
},
"to-fast-properties": { "to-fast-properties": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",

4
package.json
View File

@@ -13,6 +13,8 @@
"@astrojs/mdx": "^0.10.0", "@astrojs/mdx": "^0.10.0",
"@astrojs/rss": "^1.0.0", "@astrojs/rss": "^1.0.0",
"@astrojs/sitemap": "^1.0.0", "@astrojs/sitemap": "^1.0.0",
"astro": "^1.0.7" "astro": "^1.0.7",
"prettier": "^2.7.1",
"prettier-plugin-astro": "^0.6.0"
} }
} }

5
src/components/BaseHead.astro
View File

@@ -1,5 +1,5 @@
--- ---
import '../global.css'; import "../global.css";
export interface Props { export interface Props {
title: string; title: string;
@@ -7,7 +7,7 @@ export interface Props {
image?: string; image?: string;
} }
const { title, description, image = '/placeholder-social.jpg' } = Astro.props; const { title, description, image = "/placeholder-social.jpg" } = Astro.props;
--- ---
<!-- Global Metadata --> <!-- Global Metadata -->
@@ -43,4 +43,3 @@ const { title, description, image = '/placeholder-social.jpg' } = Astro.props;
href="https://fonts.googleapis.com/css?family=Roboto+Mono" href="https://fonts.googleapis.com/css?family=Roboto+Mono"
rel="stylesheet" rel="stylesheet"
/> />

8
src/components/ColorScript.astro
View File

@@ -1,19 +1,19 @@
<script is:inline> <script is:inline>
let colors = ['#24d05a', '#eb4888', '#10a2f5', '#e9bc3f']; let colors = ["#24d05a", "#eb4888", "#10a2f5", "#e9bc3f"];
function getRandomColor() { function getRandomColor() {
return colors[Math.floor(Math.random() * colors.length)]; return colors[Math.floor(Math.random() * colors.length)];
} }
function setRandomLinkColor() { function setRandomLinkColor() {
Array.from(document.getElementsByTagName('a')).forEach((e) => { Array.from(document.getElementsByTagName("a")).forEach((e) => {
e.style.color = getRandomColor(); e.style.color = getRandomColor();
}); });
} }
function setColorHoverListener() { function setColorHoverListener() {
Array.from(document.querySelectorAll('a, button')).forEach((e) => { Array.from(document.querySelectorAll("a, button")).forEach((e) => {
e.addEventListener('mouseover', setRandomLinkColor); e.addEventListener("mouseover", setRandomLinkColor);
}); });
} }

25
src/components/Post.astro
View File

@@ -6,19 +6,24 @@ const { slug, title, tags, description, date } = Astro.props;
<li class="post"> <li class="post">
<a href={`/post/${slug}/`} class="title">{title}</a> <a href={`/post/${slug}/`} class="title">{title}</a>
<time datetime={date}> <time datetime={date}>
{new Date(date).toLocaleDateString('en-us', { {
year: 'numeric', new Date(date).toLocaleDateString("en-us", {
month: 'short', year: "numeric",
day: 'numeric', month: "short",
})} day: "numeric",
})
}
</time> </time>
<br /> <br />
{description && <span class="excerpt">{description}</span>} {description && <span class="excerpt">{description}</span>}
<div> <div>
{tags && tags.map(tag => ( {
<> tags &&
<a class="tag" href={`/tag/${tag}`}>#{tag}</a> tags.map((tag) => (
</> <a class="tag" href={`/tag/${tag}`}>
))} #{tag}
</a>
))
}
</div> </div>
</li> </li>

16
src/components/RandomPosts.astro
View File

@@ -1,16 +1,20 @@
--- ---
import Post from '../components/Post.astro'; import Post from "../components/Post.astro";
const { allPosts } = Astro.props; const { allPosts } = Astro.props;
let posts = allPosts.sort(() => 0.5 - Math.random()).slice(0, 3) let posts = allPosts.sort(() => 0.5 - Math.random()).slice(0, 3);
--- ---
<content> <content>
<ul> <ul>
{posts.map( {
({url, frontmatter: { description, slug, title, tags, added: date }}) => ( posts.map(
<Post {url} {description} {date} {slug} {title} {tags} /> ({
))} url,
frontmatter: { description, slug, title, tags, added: date },
}) => <Post {url} {description} {date} {slug} {title} {tags} />
)
}
</ul> </ul>
</content> </content>

3
src/config.js Normal file
View File

@@ -0,0 +1,3 @@
export const SITE_TITLE = "Cassidy Williams";
export const SITE_DESCRIPTION =
"Cassidy Williams, Software Engineer and Developer Advocate in Chicago.";

2
src/config.ts
View File

@@ -1,2 +0,0 @@
export const SITE_TITLE = 'Cassidy Williams';
export const SITE_DESCRIPTION = 'Cassidy Williams, Software Engineer and Developer Advocate in Chicago.';

0
src/env.d.ts → src/env.d.js
View File

1
src/global.css
View File

@@ -83,6 +83,7 @@ ul {
} }
.tag { .tag {
display: inline-block;
margin-right: 20px; margin-right: 20px;
color: var(--gray); color: var(--gray);
font-size: 0.8rem; font-size: 0.8rem;

21
src/layouts/BlogPost.astro
View File

@@ -28,7 +28,7 @@ const {
margin: 0.25em 0 0; margin: 0.25em 0 0;
} }
hr { hr {
border-top: 1px solid #DDD; border-top: 1px solid #ddd;
margin: 1rem 0; margin: 1rem 0;
} }
</style> </style>
@@ -38,18 +38,17 @@ const {
<Header /> <Header />
<main> <main>
<article> <article>
{heroImage && ( {heroImage && <img width={720} height={360} src={heroImage} alt="" />}
<img
width={720}
height={360}
src={heroImage}
alt=""
/>
)}
<h1 class="title">{title}</h1> <h1 class="title">{title}</h1>
{added && <time>{added}</time>} {added && <time>{added}</time>}
{updatedDate && <div>Last updated on <time>{updatedDate}</time></div>} {
<hr/> updatedDate && (
<div>
Last updated on <time>{updatedDate}</time>
</div>
)
}
<hr />
<slot /> <slot />
</article> </article>
</main> </main>

40
src/pages/index.astro
View File

@@ -1,18 +1,19 @@
--- ---
import BaseHead from '../components/BaseHead.astro'; import BaseHead from "../components/BaseHead.astro";
import Header from '../components/Header.astro'; import Header from "../components/Header.astro";
import Footer from '../components/Footer.astro'; import Footer from "../components/Footer.astro";
import RandomPosts from '../components/RandomPosts.astro'; import RandomPosts from "../components/RandomPosts.astro";
import ColorScript from '../components/ColorScript.astro'; import ColorScript from "../components/ColorScript.astro";
import { SITE_TITLE, SITE_DESCRIPTION } from '../config'; import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
import { Content as About } from './about.md'; import { Content as About } from "./about.md";
const posts = (await Astro.glob('../posts/*.{md,mdx}')); const posts = await Astro.glob("../posts/*.{md,mdx}");
// Get tags from all posts // Get tags from all posts
const getTags = posts.map((post) => { const getTags = posts
.map((post) => {
const postTags = post.frontmatter.tags; const postTags = post.frontmatter.tags;
let allTags = [] let allTags = [];
if (postTags.length > 0) { if (postTags.length > 0) {
postTags.forEach((tag) => { postTags.forEach((tag) => {
@@ -22,11 +23,10 @@ const getTags = posts.map((post) => {
}); });
} }
return allTags; return allTags;
}).flat(1); })
.flat(1);
// Make the tags unique // Make the tags unique
let tags = [...new Set(getTags)]; let tags = [...new Set(getTags)];
--- ---
<!DOCTYPE html> <!DOCTYPE html>
@@ -44,9 +44,17 @@ let tags = [...new Set(getTags)];
<h3>View posts by tag</h3> <h3>View posts by tag</h3>
<p> <p>
{tags && tags.map(tag => ( {
<><a class="tag-home" href={`/tag/${tag}`}>#{tag}</a>{` `}</> tags &&
))} tags.map((tag) => (
<>
<a class="tag" href={`/tag/${tag}`}>
#{tag}
</a>
{` `}
</>
))
}
</p> </p>
</main> </main>
<Footer /> <Footer />

5
src/pages/post/[slug].astro
View File

@@ -4,10 +4,10 @@ export async function getStaticPaths() {
let posts = await Astro.glob(`../../posts/*.md`); let posts = await Astro.glob(`../../posts/*.md`);
return posts.map((post) => { return posts.map((post) => {
return ({ return {
params: { slug: post.frontmatter.slug }, params: { slug: post.frontmatter.slug },
props: { post: post }, props: { post: post },
}) };
}); });
} }
@@ -17,7 +17,6 @@ const {
Content, Content,
frontmatter: { title, added, updated, tags, excerpt }, frontmatter: { title, added, updated, tags, excerpt },
} = post; } = post;
--- ---
<Content /> <Content />

30
src/pages/posts.astro
View File

@@ -1,15 +1,17 @@
--- ---
import BaseHead from '../components/BaseHead.astro'; import BaseHead from "../components/BaseHead.astro";
import Header from '../components/Header.astro'; import Header from "../components/Header.astro";
import Footer from '../components/Footer.astro'; import Footer from "../components/Footer.astro";
import Post from '../components/Post.astro'; import Post from "../components/Post.astro";
import ColorScript from '../components/ColorScript.astro'; import ColorScript from "../components/ColorScript.astro";
import { SITE_TITLE, SITE_DESCRIPTION } from '../config'; import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
// Use Astro.glob() to fetch all posts, and then sort them by date. // Use Astro.glob() to fetch all posts, and then sort them by date.
const posts = (await Astro.glob('../posts/*.{md,mdx}')).sort( const posts = (await Astro.glob("../posts/*.{md,mdx}")).sort(
(a, b) => new Date(b.frontmatter.added).valueOf() - new Date(a.frontmatter.added).valueOf() (a, b) =>
new Date(b.frontmatter.added).valueOf() -
new Date(a.frontmatter.added).valueOf()
); );
--- ---
@@ -28,10 +30,14 @@ const posts = (await Astro.glob('../posts/*.{md,mdx}')).sort(
<main> <main>
<content> <content>
<ul> <ul>
{posts.map( {
({url, frontmatter: { description, slug, title, tags, added: date }}) => ( posts.map(
<Post {url} {description} {date} {slug} {title} {tags} /> ({
))} url,
frontmatter: { description, slug, title, tags, added: date },
}) => <Post {url} {description} {date} {slug} {title} {tags} />
)
}
</ul> </ul>
</content> </content>
<Footer /> <Footer />

6
src/pages/rss.xml.js
View File

@@ -1,10 +1,10 @@
import rss from '@astrojs/rss'; import rss from "@astrojs/rss";
import { SITE_TITLE, SITE_DESCRIPTION } from '../config'; import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
export const get = () => export const get = () =>
rss({ rss({
title: SITE_TITLE, title: SITE_TITLE,
description: SITE_DESCRIPTION, description: SITE_DESCRIPTION,
site: import.meta.env.SITE, site: import.meta.env.SITE,
items: import.meta.glob('./blog/**/*.md'), items: import.meta.glob("./blog/**/*.md"),
}); });

29
src/pages/tag/[tag].astro
View File

@@ -1,10 +1,11 @@
--- ---
import BaseHead from '../../components/BaseHead.astro'; import BaseHead from "../../components/BaseHead.astro";
import Header from '../../components/Header.astro'; import Header from "../../components/Header.astro";
import Footer from '../../components/Footer.astro'; import Footer from "../../components/Footer.astro";
import Post from '../../components/Post.astro'; import Post from "../../components/Post.astro";
import ColorScript from "../../components/ColorScript.astro";
import { SITE_TITLE, SITE_DESCRIPTION } from '../../config'; import { SITE_TITLE, SITE_DESCRIPTION } from "../../config";
// Credit to @rachsmithcodes for helping out my lil ol brain // Credit to @rachsmithcodes for helping out my lil ol brain
export async function getStaticPaths() { export async function getStaticPaths() {
@@ -23,16 +24,15 @@ export async function getStaticPaths() {
}, {}); }, {});
return Object.keys(tags).map((t) => { return Object.keys(tags).map((t) => {
return ({ return {
params: { tag: t }, params: { tag: t },
props: { tag: tags[t] }, props: { tag: tags[t] },
}) };
}); });
} }
const { tag } = Astro.props; const { tag } = Astro.props;
const { tag: currentTag } = Astro.params; const { tag: currentTag } = Astro.params;
--- ---
<!DOCTYPE html> <!DOCTYPE html>
@@ -51,13 +51,18 @@ const { tag: currentTag } = Astro.params;
<content> <content>
<h3>Posts tagged with "{currentTag}"</h3> <h3>Posts tagged with "{currentTag}"</h3>
<ul> <ul>
{tag.map( {
({url, frontmatter: { description, slug, title, tags, added: date }}) => ( tag.map(
<Post {url} {description} {date} {slug} {title} {tags} /> ({
))} url,
frontmatter: { description, slug, title, tags, added: date },
}) => <Post {url} {description} {date} {slug} {title} {tags} />
)
}
</ul> </ul>
</content> </content>
<Footer /> <Footer />
</main> </main>
<ColorScript />
</body> </body>
</html> </html>

10
src/posts/10-tips-for-successful-public-speaking.md
View File

@@ -14,31 +14,41 @@ So, not everyone likes speeches. Public speaking is the #1 most common fear out
So, here are my tips for you. I’m not just saying these. When I go out and talk to a bunch of people, I think about these all the time, and it helps. So do it. So, here are my tips for you. I’m not just saying these. When I go out and talk to a bunch of people, I think about these all the time, and it helps. So do it.
## Don’t read. ## Don’t read.
You are talking to people because you have something to say. You’re talking to them because you know what the heck you’re talking about. Speak from your head, not from your paper in front of you. In fact, try not to bring any paper at all, because they make shaky hands easy to spot. If you need notes, bring a clipboard or a notebook to help you out. You are talking to people because you have something to say. You’re talking to them because you know what the heck you’re talking about. Speak from your head, not from your paper in front of you. In fact, try not to bring any paper at all, because they make shaky hands easy to spot. If you need notes, bring a clipboard or a notebook to help you out.
## Get your hair out of your face. ## Get your hair out of your face.
The strongest hairspray can fail with the right amount of sweat and nervous touching. Give the audience an unblocked view of your face and your eyes for the best engagement. Bring a hair clip or up-do it. Or shave it. Your choice. The strongest hairspray can fail with the right amount of sweat and nervous touching. Give the audience an unblocked view of your face and your eyes for the best engagement. Bring a hair clip or up-do it. Or shave it. Your choice.
## Take your hands out of your pockets. ## Take your hands out of your pockets.
It’s distracting. You look nervous. If you’re at a podium, put your hands at your sides or hold onto it. If you’ve not nothing in front of you, just keep your arms loosely at your sides unless you’re making a purposeful gesture. It’s distracting. You look nervous. If you’re at a podium, put your hands at your sides or hold onto it. If you’ve not nothing in front of you, just keep your arms loosely at your sides unless you’re making a purposeful gesture.
## Plant your feet in a comfy stance. ## Plant your feet in a comfy stance.
Nothing is more distracting than watching someone pace, rock, or fidget with their feet. Also, DO NOT cross your legs while standing. Even if you have incredible balance, you’re just asking to fall over. Nothing is more distracting than watching someone pace, rock, or fidget with their feet. Also, DO NOT cross your legs while standing. Even if you have incredible balance, you’re just asking to fall over.
## Eye contact. ## Eye contact.
This is the easiest one on the list. Don’t shift your eyes around, don’t stare at the back wall. That advice is for high schoolers. Look at everyone in the eye. For every sentence you say, look at someone. Shift to someone nearby when you say your next sentence. If your transition from person to person is smooth and steady, everyone will feel like you’ve spoken to them, and spoken to them well. This is the easiest one on the list. Don’t shift your eyes around, don’t stare at the back wall. That advice is for high schoolers. Look at everyone in the eye. For every sentence you say, look at someone. Shift to someone nearby when you say your next sentence. If your transition from person to person is smooth and steady, everyone will feel like you’ve spoken to them, and spoken to them well.
## Don’t touch your face. ## Don’t touch your face.
When people make mistakes (or have their hair in their face), they touch their face a LOT. It’s distracting. Some of the best speeches I’ve ever heard we ruined because I saw someone scratching their face and playing with their hair. No. Stop. Don’t do it. When people make mistakes (or have their hair in their face), they touch their face a LOT. It’s distracting. Some of the best speeches I’ve ever heard we ruined because I saw someone scratching their face and playing with their hair. No. Stop. Don’t do it.
## Take some time to recover. ## Take some time to recover.
If you make a mistake, don’t apologize profusely, don’t stammer. Audiences are very tolerant of a moment of silence. So, if you fumble, just take pause and recollect your thoughts, and then resume. It’s a much more graceful approach to saying, “oh um I forgot to mention that crap so I have to go back” etc. etc. If you make a mistake, don’t apologize profusely, don’t stammer. Audiences are very tolerant of a moment of silence. So, if you fumble, just take pause and recollect your thoughts, and then resume. It’s a much more graceful approach to saying, “oh um I forgot to mention that crap so I have to go back” etc. etc.
## Tell stories. ## Tell stories.
People remember them. If you want to talk about the importance of adopting puppies, tell them about your (or a friend’s) experience in buying a puppy. If you’re talking about best practices for putting together an event on campus, tell them about events you’ve hosted. Be funny, and smile with your stories. Chances are, the audience will smile back. People remember them. If you want to talk about the importance of adopting puppies, tell them about your (or a friend’s) experience in buying a puppy. If you’re talking about best practices for putting together an event on campus, tell them about events you’ve hosted. Be funny, and smile with your stories. Chances are, the audience will smile back.
## Be CONFIDENT. ## Be CONFIDENT.
Public speaking isn’t as much about what you say as it is how you say it. Whether the audience is 5 people or 5,000, you have a reason to be there, and to make them really listen to what you’re saying. Sell yourself and your message to them. Deliver it like you’re the best person in the world to do it. Speak loudly, and smile. It’ll make the most boring speech more engaging. Public speaking isn’t as much about what you say as it is how you say it. Whether the audience is 5 people or 5,000, you have a reason to be there, and to make them really listen to what you’re saying. Sell yourself and your message to them. Deliver it like you’re the best person in the world to do it. Speak loudly, and smile. It’ll make the most boring speech more engaging.
## Have FUN! ## Have FUN!
You’re going to be awesome at this. Go and tell people your message, and be proud doing it! You’re going to be awesome at this. Go and tell people your message, and be proud doing it!

3
src/posts/5-examples-of-linear-regression.md
View File

@@ -28,12 +28,10 @@ The capital asset pricing model:
![pic](/assets/capm.png) ![pic](/assets/capm.png)
...uses linear regression as well as the concept of beta for analyzing and quantifying the systematic risk of an investment. This comes directly from the beta coefficient of the linear regression model that relates the return on the investment to the return on all risky assets. The point is to be playful and work him into a desire-filled frenzy by not giving him exactly what he wants (a lower measure of the risk arising from exposure to general market movements as opposed to idiosyncratic factors)! ...uses linear regression as well as the concept of beta for analyzing and quantifying the systematic risk of an investment. This comes directly from the beta coefficient of the linear regression model that relates the return on the investment to the return on all risky assets. The point is to be playful and work him into a desire-filled frenzy by not giving him exactly what he wants (a lower measure of the risk arising from exposure to general market movements as opposed to idiosyncratic factors)!
## Econometrics ## Econometrics
Linear regression is the predominant empirical tool in economics. In modern econometrics, other statistical tools are frequently used, but linear regression is still the most frequently used starting point for an analysis. Estimating a linear regression on two variables can be visualized as fitting a line through data points representing paired values of the independent and dependent variables. Mention Okun's Law here and he'll be wondering, "wow, how'd she do that?" Linear regression is the predominant empirical tool in economics. In modern econometrics, other statistical tools are frequently used, but linear regression is still the most frequently used starting point for an analysis. Estimating a linear regression on two variables can be visualized as fitting a line through data points representing paired values of the independent and dependent variables. Mention Okun's Law here and he'll be wondering, "wow, how'd she do that?"
## Environmental Science ## Environmental Science
Linear regression finds application in a wide range of environmental science applications. In Canada, the Environmental Effects Monitoring Program uses statistical analyses on fish and benthic surveys to measure the effects of pulp mill or metal mine effluent on the aquatic ecosystem. After you tell him this, he'll crave you so much that he won't know what he did to deserve you. Linear regression finds application in a wide range of environmental science applications. In Canada, the Environmental Effects Monitoring Program uses statistical analyses on fish and benthic surveys to measure the effects of pulp mill or metal mine effluent on the aquatic ecosystem. After you tell him this, he'll crave you so much that he won't know what he did to deserve you.
@@ -41,4 +39,3 @@ Linear regression finds application in a wide range of environmental science app
Driving your boyfriend crazy with linear regression application examples is a guaranteed way to make your relationship more fun, dynamic, and sexy. If you want to drive your man wild and to make him want you even more, you have to be bold, adventurous, and sexy, and to remember to keep things feeling exciting and fresh by telling him all the exotic ways that these applications can be applied. Driving your boyfriend crazy with linear regression application examples is a guaranteed way to make your relationship more fun, dynamic, and sexy. If you want to drive your man wild and to make him want you even more, you have to be bold, adventurous, and sexy, and to remember to keep things feeling exciting and fresh by telling him all the exotic ways that these applications can be applied.
Go get 'em, sister. Go get 'em, sister.

19
src/posts/a-weekend-at-battlehack-boston.md
View File

@@ -60,7 +60,7 @@ Finally, just before 1PM, we had a big countdown to start. We banged the gong,
Over the next few hours, Matt and I were approached several times about using the Venmo API, which was great. The PayPal/Braintree dev evangelists kept thanking us on the side for coming. They said that Venmo has been one of the most popular APIs of the entire BattleHack competition so far, and they loved having us there to help. Over the next few hours, Matt and I were approached several times about using the Venmo API, which was great. The PayPal/Braintree dev evangelists kept thanking us on the side for coming. They said that Venmo has been one of the most popular APIs of the entire BattleHack competition so far, and they loved having us there to help.
Time went on, more food was served throughout the night. The BattleHack team brought in *professional masseuses* (holy crap, am I right?) and soon Matt's and my shift was over. We were able to leave at about 9, as long as we got back by 4AM. That was one of the things I appreciated about the planning that went into BattleHack; designated shifts aren't always thought of for the staff of hackathons. Time went on, more food was served throughout the night. The BattleHack team brought in _professional masseuses_ (holy crap, am I right?) and soon Matt's and my shift was over. We were able to leave at about 9, as long as we got back by 4AM. That was one of the things I appreciated about the planning that went into BattleHack; designated shifts aren't always thought of for the staff of hackathons.
After a nearly sleepless night, I got back at 4 and started circling the room looking for the Best Progress award. Teams had been working hard. Some included hardware components, some were trying to use every API available. It was very impressive to see the work being done. Eventually, the team we decided had the Best Progress was FundRunner, an application that assisted those running and those donating to people running in various races for charity. It checked when certain milestones were hit using geolocation, it texted donors when their maximum donation amount was hit, it sent emails... their work so far was pretty darn solid. After a nearly sleepless night, I got back at 4 and started circling the room looking for the Best Progress award. Teams had been working hard. Some included hardware components, some were trying to use every API available. It was very impressive to see the work being done. Eventually, the team we decided had the Best Progress was FundRunner, an application that assisted those running and those donating to people running in various races for charity. It checked when certain milestones were hit using geolocation, it texted donors when their maximum donation amount was hit, it sent emails... their work so far was pretty darn solid.
@@ -72,18 +72,17 @@ Rehearsals were another big part of Sunday morning. Every team practiced their
And finally, after a lip-smacking lunch of lobster rolls and a grilled cheese bar, it was time for presentations. There were some really cool ones, and quite a few using Venmo! A few cool ones where: And finally, after a lip-smacking lunch of lobster rolls and a grilled cheese bar, it was time for presentations. There were some really cool ones, and quite a few using Venmo! A few cool ones where:
* AgriGate, an "Etsy for farmers" that allowed farmers to post their produce for people to buy, and included a hardware component of a packing slip being printed - AgriGate, an "Etsy for farmers" that allowed farmers to post their produce for people to buy, and included a hardware component of a packing slip being printed
* Street Music is a platform that connects users to street performers to legitimize their profession and allows donation through Venmo and PayPal (they kicked off their presentation by singing, I was impressed) - Street Music is a platform that connects users to street performers to legitimize their profession and allows donation through Venmo and PayPal (they kicked off their presentation by singing, I was impressed)
* HaveKnow proves your identity for emergency rescue payments when you've lost your ID and/or wallet, and lets you pay people with PayPal/Venmo after they give you cash - HaveKnow proves your identity for emergency rescue payments when you've lost your ID and/or wallet, and lets you pay people with PayPal/Venmo after they give you cash
* Honk is a license plate-based messaging app that allows users to send compliments and constructive criticism to drivers (sent in the form of a Venmo charge/payment) - Honk is a license plate-based messaging app that allows users to send compliments and constructive criticism to drivers (sent in the form of a Venmo charge/payment)
* FundMatch is a web-based platform dedicated to efficient giving for nonprofits and allows donations through PayPal (the cool part of this one was they took in organization emails and information and parsed them into an easy-to-read form for donors to understand) - FundMatch is a web-based platform dedicated to efficient giving for nonprofits and allows donations through PayPal (the cool part of this one was they took in organization emails and information and parsed them into an easy-to-read form for donors to understand)
* Pothole Sonar app uses audio to enhance the awareness of mobile users to the dangerous potholes nearby and compiles pothole data - Pothole Sonar app uses audio to enhance the awareness of mobile users to the dangerous potholes nearby and compiles pothole data
* Nome (short for "metronome") is a "git for music" where people can collaborate on music projects and donate to other musicians with Venmo - Nome (short for "metronome") is a "git for music" where people can collaborate on music projects and donate to other musicians with Venmo
There were a bunch more, and overall the event was so cool. The winners of the event made "Late Night Safety Kit," an app with tools that allows a user to stay safe by sending alerts for crime and to the police station in the area. There were a bunch more, and overall the event was so cool. The winners of the event made "Late Night Safety Kit," an app with tools that allows a user to stay safe by sending alerts for crime and to the police station in the area.
And so, as the BattleHack saying goes: _City Conquered!_
And so, as the BattleHack saying goes: *City Conquered!*
I had to run off after the presentations for my train back to NYC. Overall, I genuinely enjoyed my time at BattleHack Boston. The planning team was a well-oiled machine, on top of every single nuance. I loved helping them and being a part of such an impressive event. I had to run off after the presentations for my train back to NYC. Overall, I genuinely enjoyed my time at BattleHack Boston. The planning team was a well-oiled machine, on top of every single nuance. I loved helping them and being a part of such an impressive event.
![pic](/assets/bh/team.jpg) ![pic](/assets/bh/team.jpg)

2
src/posts/adding-keyboard-shortcuts-to-react.md
View File

@@ -24,7 +24,7 @@ Dang. That was so easy. This is crazy.
Now that you've done that, go ahead and build your React app as usual. Now, Now that you've done that, go ahead and build your React app as usual. Now,
let's say that you have a super awesome component (called `<SuperAwesomeComponent>`), let's say that you have a super awesome component (called `<SuperAwesomeComponent>`),
and you want to call a function `letFishFly` in that component's class whenever and you want to call a function `letFishFly` in that component's class whenever
someone hits "* k", "ctrl+r", or the Konami Code. Because you feel like it. someone hits "\* k", "ctrl+r", or the Konami Code. Because you feel like it.
It's so easy to add now! In your component, you just have to bind the Mousetrap It's so easy to add now! In your component, you just have to bind the Mousetrap
command to `letFishFly` in the `componentWillMount` function, and unbind it in `componentWillUnmount`. command to `letFishFly` in the `componentWillMount` function, and unbind it in `componentWillUnmount`.

8
src/posts/closures-in-javascript.md
View File

@@ -14,7 +14,7 @@ be the knowledge bomb-dropper in the room. Let's do this.
Okay so the quick summary of a closure is that from an inner function, it gives Okay so the quick summary of a closure is that from an inner function, it gives
you access to an outer function's scope. So essentially, you can create you access to an outer function's scope. So essentially, you can create
*private variables*. In JavaScript. Whoa. _private variables_. In JavaScript. Whoa.
Moving backwards a bit, JS has both local and global variables. A local variable Moving backwards a bit, JS has both local and global variables. A local variable
looks something like this (see `magic`): looks something like this (see `magic`):
@@ -47,7 +47,7 @@ There has to be a better way.
Oh wait, that's the whole point of this blog post. Oh wait, that's the whole point of this blog post.
*Closures!* _Closures!_
Closures are the primary way to have data privacy in your JavaScript. A super Closures are the primary way to have data privacy in your JavaScript. A super
duper basic example of this is a simple iterator, where every time you call duper basic example of this is a simple iterator, where every time you call
@@ -56,7 +56,9 @@ duper basic example of this is a simple iterator, where every time you call
```js ```js
function iterate() { function iterate() {
var count = 0; var count = 0;
return function () { return count += 1; }; return function () {
return (count += 1);
};
} }
``` ```

24
src/posts/css-text-carousel.md
View File

@@ -23,7 +23,7 @@ is perfect for quotes, if I do say so myself:
The code isn't too crazy, if you read it out. The first thing I had to add in The code isn't too crazy, if you read it out. The first thing I had to add in
the HTML was the wrappers for the quotes. The `<div>` tags for the HTML was the wrappers for the quotes. The `<div>` tags for
`content-slider`, `slider`, and `mask` (let's call these the *Trio of Mystery*) `content-slider`, `slider`, and `mask` (let's call these the _Trio of Mystery_)
were all purely for the actual box holding the quotes and making sure that they were all purely for the actual box holding the quotes and making sure that they
disappeared when they "faded away" (I use quotes because of how it's written, disappeared when they "faded away" (I use quotes because of how it's written,
you'll see). you'll see).
@@ -34,29 +34,29 @@ straightforward part of the code.
Now let's get crazy. Now let's get crazy.
So in the CSS you'll see basic body stuff, and then the *Trio of Mystery*. Like So in the CSS you'll see basic body stuff, and then the _Trio of Mystery_. Like
I said before, pretty straightforward, just creates a container and a mask that I said before, pretty straightforward, just creates a container and a mask that
makes innocent `<div>`s like you disappear. Now, you'll notice a little further makes innocent `<div>`s like you disappear. Now, you'll notice a little further
down that the `.slider li` section has something a little gross in there. This down that the `.slider li` section has something a little gross in there. This
is where things get hard-coded. is where things get hard-coded.
```css ```css
height: 320px; height: 320px;
position: absolute; position: absolute;
top: -325px; top: -325px;
``` ```
Here, you'll notice that the `<li>` are being set at a height and positioned Here, you'll notice that the `<li>` are being set at a height and positioned
325px above their normal position. That's because the container is set at 320px 325px above their normal position. That's because the container is set at 320px
high. The `top` part could have had `-321px` and it would have been fine. This high. The `top` part could have had `-321px` and it would have been fine. This
is how the *Trio of Mystery* gets away with hiding its stowaways. is how the _Trio of Mystery_ gets away with hiding its stowaways.
If you look after this section, you'll get to the animations. Now, this is the If you look after this section, you'll get to the animations. Now, this is the
part that would have been very, very significantly improved had I used a CSS part that would have been very, very significantly improved had I used a CSS
preprocessor. There's a LOT of repetition here, and a lot of things hard-coded preprocessor. There's a LOT of repetition here, and a lot of things hard-coded
for 5 quotes (no more, no less). The way each animation works is that each for 5 quotes (no more, no less). The way each animation works is that each
quote is hidden at `-325px` (just out of sight, again, thanks to the *Trio of quote is hidden at `-325px` (just out of sight, again, thanks to the _Trio of
Mystery*), and then when it's that quote's turn, it scrolls into view at 100% Mystery_), and then when it's that quote's turn, it scrolls into view at 100%
opacity, and after 3 seconds, it fades (when really, its position is just moving opacity, and after 3 seconds, it fades (when really, its position is just moving
at the same time as the opacity is lowered to zero). Because each of the at the same time as the opacity is lowered to zero). Because each of the
animations last the same amount of time and goes in one direction animations last the same amount of time and goes in one direction
@@ -69,9 +69,9 @@ around 40%, etc).
Honestly, this works for what my original needs were. But, this mini-project Honestly, this works for what my original needs were. But, this mini-project
could DEFINITELY be improved. Some of my ideas for a next time: could DEFINITELY be improved. Some of my ideas for a next time:
- Use a pre-processor - Use a pre-processor
- Save CSS variables for the number of quotes that exist - Save CSS variables for the number of quotes that exist
- Generate HTML code based on the number of quotes - Generate HTML code based on the number of quotes
- Divide the percentages for the animations based on the number of quotes - Divide the percentages for the animations based on the number of quotes
Until next time! Until next time!

24
src/posts/finding-a-mentor.md
View File

@@ -19,26 +19,26 @@ Finding a mentor is really just a matter of keeping communication lines open. O
## What you should look for in a mentor ## What you should look for in a mentor
- *Someone who wants a mentee*. Sometimes, you won't get a reply to that email asking for coffee. Sometimes, people won't chat with you. That's okay. You want someone who wants the relationship. - _Someone who wants a mentee_. Sometimes, you won't get a reply to that email asking for coffee. Sometimes, people won't chat with you. That's okay. You want someone who wants the relationship.
- *Someone you can be friends with*. Your mentor isn't just someone you suck advice from. You should enjoy your relationship with them, they should be someone around whom you can be yourself. If you have a very formal, not really comfortable relationship, you won't be able to easily converse with each other to get the guidance for which you're seeking. - _Someone you can be friends with_. Your mentor isn't just someone you suck advice from. You should enjoy your relationship with them, they should be someone around whom you can be yourself. If you have a very formal, not really comfortable relationship, you won't be able to easily converse with each other to get the guidance for which you're seeking.
- *Someone who doesn't compete with you*. You want someone that can help celebrate your accomplishments, not feel threatened by them. - _Someone who doesn't compete with you_. You want someone that can help celebrate your accomplishments, not feel threatened by them.
- *Someone who drives you to succeed*. A good mentor will be someone who can push you to be the best that you can be, even if it's just by finding someone else that can answer your questions, or by just being a good role model. - _Someone who drives you to succeed_. A good mentor will be someone who can push you to be the best that you can be, even if it's just by finding someone else that can answer your questions, or by just being a good role model.
## How to be a good mentee ## How to be a good mentee
- *Don't just suck information out of your mentor*. Nobody likes someone who is just in it for themselves, who is selfish with their information. Build a relationship that's give and take with your mentor, don't just email them once a month with your latest problem. - _Don't just suck information out of your mentor_. Nobody likes someone who is just in it for themselves, who is selfish with their information. Build a relationship that's give and take with your mentor, don't just email them once a month with your latest problem.
- *Lift as you climb*. As you move up with your career, help people who are like you who could use your own advice. A great mentee gives back. - _Lift as you climb_. As you move up with your career, help people who are like you who could use your own advice. A great mentee gives back.
- *Accept things your mentor tells you, even if it's not what you want to hear*. Sometimes it's hard to absorb frank feedback. But, it's necessary to do so if you really want to internalize the information you're getting. Sometimes things don't go the way you want, and sometimes you just want to be further along, like your mentor. It can be frustrating sometimes when things don't go your way, but trust the advice you get. Sure, that doesn't mean you have to follow *all* of it, but trust that it's coming from someone who cares. - _Accept things your mentor tells you, even if it's not what you want to hear_. Sometimes it's hard to absorb frank feedback. But, it's necessary to do so if you really want to internalize the information you're getting. Sometimes things don't go the way you want, and sometimes you just want to be further along, like your mentor. It can be frustrating sometimes when things don't go your way, but trust the advice you get. Sure, that doesn't mean you have to follow _all_ of it, but trust that it's coming from someone who cares.
## Thank you to my mentors ## Thank you to my mentors
My mentors are amazing women who I look up to every single day as they're making the world a better place. I'm going to link to their Twitter handles here, and tell you how I met each of them. My mentors are amazing women who I look up to every single day as they're making the world a better place. I'm going to link to their Twitter handles here, and tell you how I met each of them.
- [Jennifer Arguello](https://twitter.com/engijen) - I met Jennifer at the White House Tech Inclusion Summit, where we hit it off talking about diversity in tech and her time with the Latino Startup Alliance. I made sure to keep in touch since I would be interning in the Bay Area, where she's located, and we've been chatting ever since. - [Jennifer Arguello](https://twitter.com/engijen) - I met Jennifer at the White House Tech Inclusion Summit, where we hit it off talking about diversity in tech and her time with the Latino Startup Alliance. I made sure to keep in touch since I would be interning in the Bay Area, where she's located, and we've been chatting ever since.
- [Kelly Hoey](https://twitter.com/jkhoey) - I met Kelly at a women in tech hackathon, and then she ended up being on my team on the [British Airways UnGrounded Thinking hackathon](http://ungroundedthinking.com/). She and I both live in NYC, now, and we see each other regularly at speaking engagements and chat over email about networking and inclusion. - [Kelly Hoey](https://twitter.com/jkhoey) - I met Kelly at a women in tech hackathon, and then she ended up being on my team on the [British Airways UnGrounded Thinking hackathon](http://ungroundedthinking.com/). She and I both live in NYC, now, and we see each other regularly at speaking engagements and chat over email about networking and inclusion.
- [Rane Johnson](https://twitter.com/sfbayrane) - I met Rane at the [Grace Hopper Celebration for Women in Computing](http://gracehopper.org) in 2011, and then again when I interned at Microsoft in 2012. She and I started emailing and video chatting each other during my senior year of college, when I started working with her on the [Big Dream Documentary](http://bigdreammovement.com) and the International Women's Hackathon at the USA Science and Engineering Festival. - [Rane Johnson](https://twitter.com/sfbayrane) - I met Rane at the [Grace Hopper Celebration for Women in Computing](http://gracehopper.org) in 2011, and then again when I interned at Microsoft in 2012. She and I started emailing and video chatting each other during my senior year of college, when I started working with her on the [Big Dream Documentary](http://bigdreammovement.com) and the International Women's Hackathon at the USA Science and Engineering Festival.
- [Ruthe Farmer](https://twitter.com/ruthef) - I first met Ruthe back in 2010 during my senior year of high school when I won the [Illinois NCWIT Aspirations Award](https://www.aspirations.org/). She and I have been talking with each other at events and conferences and meetups (and even just online) almost weekly since then about getting more girls into tech, working, and everything in between. - [Ruthe Farmer](https://twitter.com/ruthef) - I first met Ruthe back in 2010 during my senior year of high school when I won the [Illinois NCWIT Aspirations Award](https://www.aspirations.org/). She and I have been talking with each other at events and conferences and meetups (and even just online) almost weekly since then about getting more girls into tech, working, and everything in between.
These women have helped me probably more than they can imagine, even when they're just a listening ear when I'm asking endless questions about what I should do next with my career or how I should approach certain situations. They're amazing, influential, and make a *real* difference in hundreds (even thousands) of lives with their work, and I strive to be like them someday. These women have helped me probably more than they can imagine, even when they're just a listening ear when I'm asking endless questions about what I should do next with my career or how I should approach certain situations. They're amazing, influential, and make a _real_ difference in hundreds (even thousands) of lives with their work, and I strive to be like them someday.
I hope that you find someone like them to work with. It's, in the realest sense of the phrase, life-changing. I hope that you find someone like them to work with. It's, in the realest sense of the phrase, life-changing.

16
src/posts/how-ace-an-interview.md
View File

@@ -12,30 +12,30 @@ So, I thought I'd give you some advice based on what I've learned.
Right now. Right now.
##Study the usual interview questions, and fit in your own experiences. ## Study the usual interview questions, and fit in your own experiences.
All you have to do here is go on the internet and search, “common interview questions.” All you have to do here is go on the internet and search, “common interview questions.”
Everything from “describe a time when you worked on a team” to “what was the most fun presentation you’ve ever had to plan?” is asked to everyone, engineers and business majors alike. Everything from “describe a time when you worked on a team” to “what was the most fun presentation you’ve ever had to plan?” is asked to everyone, engineers and business majors alike.
Make sure you follow STAR: *Situation* (what was the situation you were in), *Task* (what was your job, or task, to tackle the situation), *Action* (what were the actions to ultimately took), and *Results* (what were the responses you received and the results you achieved)! Make sure you follow STAR: _Situation_ (what was the situation you were in), _Task_ (what was your job, or task, to tackle the situation), _Action_ (what were the actions to ultimately took), and _Results_ (what were the responses you received and the results you achieved)!
Now, if you're thinking about technical questions (which I'm a computer science chick too, I get it), my only advice here is to talk a LOT. Now, if you're thinking about technical questions (which I'm a computer science chick too, I get it), my only advice here is to talk a LOT.
Too many engineers just go up to the white board and start coding then and there without explaining what they're doing. Too many engineers just go up to the white board and start coding then and there without explaining what they're doing.
Whenever I've interviewed with someone, I stay sitting and talk about the problem with the interviewer. Whenever I've interviewed with someone, I stay sitting and talk about the problem with the interviewer.
When you do it that way, they can see where you're going with your thought process when you start writing on the board. When you do it that way, they can see where you're going with your thought process when you start writing on the board.
And if you change what you're thinking, turn around, away from the board, and tell the interviewer your thought process again. And if you change what you're thinking, turn around, away from the board, and tell the interviewer your thought process again.
The *thought process* is what these companies are looking for, not just correct code. The _thought process_ is what these companies are looking for, not just correct code.
It's better to have a good thought process and bad code than good code and a bad thought process. It's better to have a good thought process and bad code than good code and a bad thought process.
##Know your story well. ## Know your story well.
Instead of reflecting all the time on interview questions and rehearsing answers, try reflecting on your school and career chronology until now! Instead of reflecting all the time on interview questions and rehearsing answers, try reflecting on your school and career chronology until now!
Think about how you got started in your field, struggles you overcame, what you’ve learned over the years, where and how you developed certain skills, what you’re most proud of, etc. Think about how you got started in your field, struggles you overcame, what you’ve learned over the years, where and how you developed certain skills, what you’re most proud of, etc.
When you know your story, you can answer almost any question about anything because of your personal experiences and what you know already about yourself. When you know your story, you can answer almost any question about anything because of your personal experiences and what you know already about yourself.
##Follow the PIE. ## Follow the PIE.
I mean this in both senses of the word. Pie is delicious. I mean this in both senses of the word. Pie is delicious.
BUT, what I really mean is, the best interviewees are the ones who are *Positive, Interested, and Engaged* in the interview conversations. BUT, what I really mean is, the best interviewees are the ones who are _Positive, Interested, and Engaged_ in the interview conversations.
If you keep worrying about the next question and saying things perfectly, you might forget to have your positive game face showing. If you keep worrying about the next question and saying things perfectly, you might forget to have your positive game face showing.
Just remember to smile! If you look like you’re happy to be there, they’ll be more happy to interview you. Just remember to smile! If you look like you’re happy to be there, they’ll be more happy to interview you.
##Consider what the company (or organization or school, whatever) wants. ## Consider what the company (or organization or school, whatever) wants.
When you’re at the career fair, ask companies what they look for, and what their culture is like. When you’re at the career fair, ask companies what they look for, and what their culture is like.
You don’t want to think, “oh yeah I’ll just keep practicing, if I know what I’m talking about and can show it, they’ll hire me.” You don’t want to think, “oh yeah I’ll just keep practicing, if I know what I’m talking about and can show it, they’ll hire me.”
Yes and no. You do want to show them that you know what you’re talking about. But, they also want to feel that you are likable, and that you’ll fit in at the company! Yes and no. You do want to show them that you know what you’re talking about. But, they also want to feel that you are likable, and that you’ll fit in at the company!
@@ -43,5 +43,5 @@ Focus more on demonstrating aptitude while being likable rather than just spitti
Laugh with them, relax a bit, and let them see your personality! I mean, I like you, so why wouldn’t they? Laugh with them, relax a bit, and let them see your personality! I mean, I like you, so why wouldn’t they?
You personality is one of your skill sets that people often don’t count. Believe me, it counts for a lot. You personality is one of your skill sets that people often don’t count. Believe me, it counts for a lot.
##Breathe. ## Breathe.
You’re going to rock this! Just know that if it doesn't work out, it's not the end of the world, and if it does, that's even better. Have FUN and good luck! You’re going to rock this! Just know that if it doesn't work out, it's not the end of the world, and if it does, that's even better. Have FUN and good luck!

1
src/posts/how-to-ask-for-help.md
View File

@@ -7,7 +7,6 @@ added: "Apr 24 2014"
tags: [advice] tags: [advice]
--- ---
Hey cutie. Your laugh makes my morning, and your smile makes my afternoon. Hey cutie. Your laugh makes my morning, and your smile makes my afternoon.
So, I’ve helped as a peer mentor, as an impromptu tutor, as a friend, and just as an upperclassman with a lot of homework problems. From math to science to computing to whatever, you’ll often run into something that you just can’t figure out, and you need to ask for help. So, I’ve helped as a peer mentor, as an impromptu tutor, as a friend, and just as an upperclassman with a lot of homework problems. From math to science to computing to whatever, you’ll often run into something that you just can’t figure out, and you need to ask for help.

186
src/posts/html-css-tutorial-part-2.md
View File

@@ -29,47 +29,48 @@ I have this tutorial hosted on [my GitHub account](https://github.com/cassidoo/H
Because this stuff is important. Whether you're a business person formatting your emails, an aspiring web designer wanting to get your feet wet, or just someone who is interested and hasn't tried any sort of coding, scripting, or programming before, **HTML and CSS are an essential part** of your learning curve. Because this stuff is important. Whether you're a business person formatting your emails, an aspiring web designer wanting to get your feet wet, or just someone who is interested and hasn't tried any sort of coding, scripting, or programming before, **HTML and CSS are an essential part** of your learning curve.
## Table of Contents ## Table of Contents
* HTML (this half is in a separate post, for your readability, because I care)
* Editors
* Tag Structure
* Text Structure
* Links
* Other tags
* Images
* Line Breaks
* Tables
* Making Things Gorgeous The Wrong Way
* Colors
* Width and Height
* Borders
* Text Styles
* The `<head>` tag
* Putting it all together so far
* CSS
* Classes and IDs and other Segregation
* Classes
* IDs
* Other Segregation
* The `<span>` tag
* The `<div>` tag
* Background color
* Floating
* Positioning
* Margins and Padding
* Z-Index
* The `<link>` Tag, Comments, and other Developer Joys
* The `<link>` tag
* Commenting
* HTML Comments
* CSS Comments
* Other Developer Joys
* Forms
* HTML5 and CSS3
* How To Meet Ladies/Laddies (Get it? HTML Jokes are the best...)
* Final Project!
* And now, the end is near
##CSS is magical, and now you're gonna learn it. - HTML (this half is in a separate post, for your readability, because I care)
- Editors
- Tag Structure
- Text Structure
- Links
- Other tags
- Images
- Line Breaks
- Tables
- Making Things Gorgeous The Wrong Way
- Colors
- Width and Height
- Borders
- Text Styles
- The `<head>` tag
- Putting it all together so far
- CSS
- Classes and IDs and other Segregation
- Classes
- IDs
- Other Segregation
- The `<span>` tag
- The `<div>` tag
- Background color
- Floating
- Positioning
- Margins and Padding
- Z-Index
- The `<link>` Tag, Comments, and other Developer Joys
- The `<link>` tag
- Commenting
- HTML Comments
- CSS Comments
- Other Developer Joys
- Forms
- HTML5 and CSS3
- How To Meet Ladies/Laddies (Get it? HTML Jokes are the best...)
- Final Project!
- And now, the end is near
## CSS is magical, and now you're gonna learn it.
So far, we've been making things pretty the wrong way. So, we're going to learn it the right way. So excited. So far, we've been making things pretty the wrong way. So, we're going to learn it the right way. So excited.
@@ -93,10 +94,10 @@ We're going to be working in the `<head>` tag again. Underneath the `<title>` t
{ } { }
</style> </style>
Congratulations. You have some empty CSS. Now, what the heck is CSS anyway? Well, CSS stands for *Cascading Style Sheets*. Gee whiz, that word *style* is everywhere. And it's true. The `style` attribute is for styling *inline* HTML (just that line of code), the `<style>` tag is for holding CSS, and CSS *defines* the styles! Let that sink in. Nice. Stylish. Just like you. Congratulations. You have some empty CSS. Now, what the heck is CSS anyway? Well, CSS stands for _Cascading Style Sheets_. Gee whiz, that word _style_ is everywhere. And it's true. The `style` attribute is for styling _inline_ HTML (just that line of code), the `<style>` tag is for holding CSS, and CSS _defines_ the styles! Let that sink in. Nice. Stylish. Just like you.
Now, you'll notice some familiar keywords in there, in particular, `body`, `h1`, `p`, and `ol`. That's right, they're the tags we know and love! But, in CSS, these are called *selectors*. The selector tells us what tag you're about to style. So, whatever code you put in between the curly braces `{}` after the `body` selector will affect everything in the `<body>` tags. Whatever you put in the braces after the `p` selector will affect what's in the `<p>` tags. Now, you'll notice some familiar keywords in there, in particular, `body`, `h1`, `p`, and `ol`. That's right, they're the tags we know and love! But, in CSS, these are called _selectors_. The selector tells us what tag you're about to style. So, whatever code you put in between the curly braces `{}` after the `body` selector will affect everything in the `<body>` tags. Whatever you put in the braces after the `p` selector will affect what's in the `<p>` tags.
Whatever code you have in those curly braces will only affect that tag, so if you try editing the font colors for the `h1` selector, it won't affect whatever is in the `p` selector's tags. Each portion of code `selector { code }` in CSS is called a *declaration*. Make sense? Good. If not, keep reading and hopefully it will become more clear as we go on. Whatever code you have in those curly braces will only affect that tag, so if you try editing the font colors for the `h1` selector, it won't affect whatever is in the `p` selector's tags. Each portion of code `selector { code }` in CSS is called a _declaration_. Make sense? Good. If not, keep reading and hopefully it will become more clear as we go on.
The code that we're going to be putting in each declaration is the same syntax as the code that we normally put in the `style` attribute. How convenient. So, change your code above to the following: The code that we're going to be putting in each declaration is the same syntax as the code that we normally put in the `style` attribute. How convenient. So, change your code above to the following:
@@ -129,7 +130,7 @@ The code that we're going to be putting in each declaration is the same syntax a
} }
</style> </style>
Recognize that? It's exactly the same! For each selector, there is a *property* of that selector, and each property has a *value*, just like how we wrote it in the `style` attributes! Recognize that? It's exactly the same! For each selector, there is a _property_ of that selector, and each property has a _value_, just like how we wrote it in the `style` attributes!
You will always have your CSS in the syntax, `selector { property: value; property: value; }`. I've only shown you some properties so far, but don't worry. There are plenty more to come. You will always have your CSS in the syntax, `selector { property: value; property: value; }`. I've only shown you some properties so far, but don't worry. There are plenty more to come.
@@ -139,10 +140,10 @@ Try playing around with the CSS we have right now. Edit the colors, add some bo
So, you have some of the CSS basics down already. You're so smart. It's really a simple language, once you know the basic syntax. So, now we'll get into more fancy stuff. What if you want to edit several tags differently? So, you have some of the CSS basics down already. You're so smart. It's really a simple language, once you know the basic syntax. So, now we'll get into more fancy stuff. What if you want to edit several tags differently?
####Classes #### Classes
Let's say that we have 8 `<p>` tags on our HTML page (hint: open style3.html in the **3 - Styles** folder). Let's say that we have 8 `<p>` tags on our HTML page (hint: open style3.html in the **3 - Styles** folder).
If we want to style each of these tags differently, we can use *classes*. A class is actually an HTML attribute that you can name whatever you want. If we want to style each of these tags differently, we can use _classes_. A class is actually an HTML attribute that you can name whatever you want.
Check out style3.html to see the classes I added to the `<p>` tags on the page. When you add a class, the user doesn't see it. Check out style3.html to see the classes I added to the `<p>` tags on the page. When you add a class, the user doesn't see it.
But, you can style specific classes to do what you want, instead of having all `<p>` tags be the same. But, you can style specific classes to do what you want, instead of having all `<p>` tags be the same.
@@ -178,7 +179,7 @@ Gosh you're good at this. Go eat a cookie.
[Pausing here for cookie break] [Pausing here for cookie break]
####IDs #### IDs
Now, let's talk about IDs. They are very similar to classes. The only real difference between classes and IDs is that you can only have one of each ID. So, for example, if you have a special paragraph that you only want to style once, then you can stick in there the `id` attribute like so: Now, let's talk about IDs. They are very similar to classes. The only real difference between classes and IDs is that you can only have one of each ID. So, for example, if you have a special paragraph that you only want to style once, then you can stick in there the `id` attribute like so:
@@ -193,12 +194,12 @@ When you want to style your IDs, you put a hashtag `#` before it in your CSS, li
Remember: You can only use an ID once. IDs are more helpful when you're controlling the element with JavaScript, not styling, but that's something for another day. Remember: You can only use an ID once. IDs are more helpful when you're controlling the element with JavaScript, not styling, but that's something for another day.
####Other Segregation #### Other Segregation
Let's say that you want to separate individual text in your paragraphs or sections on your page. Let's introduce 2 new tags: `<span>` and `<div>`. Let's say that you want to separate individual text in your paragraphs or sections on your page. Let's introduce 2 new tags: `<span>` and `<div>`.
#####The `<span>` tag ##### The `<span>` tag
The `<span>` tag is pretty invisible unless you style it. It's used to group *inline-elements* (so like a word in a paragraph), and it doesn't actually do anything unless you style or manipulate it with something else. The `<span>` tag is pretty invisible unless you style it. It's used to group _inline-elements_ (so like a word in a paragraph), and it doesn't actually do anything unless you style or manipulate it with something else.
So, let's say you have a paragraph and you really want to emphasize some text within a paragraph without a line break or anything. In comes `<span>`. For example: So, let's say you have a paragraph and you really want to emphasize some text within a paragraph without a line break or anything. In comes `<span>`. For example:
@@ -214,7 +215,7 @@ Add some `<span>` tags around your favorite lines of the poems in style3.html of
font-style: italic; font-style: italic;
} }
Wait a minute. Hold up. `p span`?? WHY THE SPACE? Calm yourself, I'll tell you. This is called *nesting* CSS. When you have a space in your selector like this, it means that, in this case, the style will only affect `<span>` tags within `<p>` tags. So, if you put `<span>` tags around a word in your `<h1>` tags, your CSS will not affect it. You can still have a plain `span` selector, or nest it in one of your classes too: Wait a minute. Hold up. `p span`?? WHY THE SPACE? Calm yourself, I'll tell you. This is called _nesting_ CSS. When you have a space in your selector like this, it means that, in this case, the style will only affect `<span>` tags within `<p>` tags. So, if you put `<span>` tags around a word in your `<h1>` tags, your CSS will not affect it. You can still have a plain `span` selector, or nest it in one of your classes too:
span span
{ {
@@ -227,13 +228,13 @@ Wait a minute. Hold up. `p span`?? WHY THE SPACE? Calm yourself, I'll tell y
Make sense? I hope so. To sum up: `<span>` tags separate specific parts of paragraphs or other inline sections of a page. They do nothing otherwise. You can nest CSS if you want. Boom. Next. Make sense? I hope so. To sum up: `<span>` tags separate specific parts of paragraphs or other inline sections of a page. They do nothing otherwise. You can nest CSS if you want. Boom. Next.
#####The `<div>` tag ##### The `<div>` tag
Alrighty. Go enjoy a beach vacation and then come back to this. Alrighty. Go enjoy a beach vacation and then come back to this.
Welcome back. Welcome back.
The `<div>` tag is very similar to the `<span>` tag, in that it separates a section of something but doesn't do much else. However, the difference with `<div>` tags is that they are *block level* elements, not just within a line of text. The `<div>` tag is very similar to the `<span>` tag, in that it separates a section of something but doesn't do much else. However, the difference with `<div>` tags is that they are _block level_ elements, not just within a line of text.
The `<div>` tag might end up being the tag that you use most often. It is what lets you easily make website layouts (with help from CSS of course), and so, let's play with it! The `<div>` tag might end up being the tag that you use most often. It is what lets you easily make website layouts (with help from CSS of course), and so, let's play with it!
@@ -315,7 +316,7 @@ This should be straightforward for you so far. The first thing we'll do is crea
width: 100%; width: 100%;
} }
Whoa ho ho, slow down there. What the heck is with these `%` signs?? Well, what this means is that if, for example, a tag's `width` is `75%`, then it's width on the page will be 75% of it's *containing element.* Whoa ho ho, slow down there. What the heck is with these `%` signs?? Well, what this means is that if, for example, a tag's `width` is `75%`, then it's width on the page will be 75% of it's _containing element._
So when you see that the `.menu` class has a `width: 15%;`, it takes up 15% of its containing element's width, which is the `<body>` tag. So when you see that the `.menu` class has a `width: 15%;`, it takes up 15% of its containing element's width, which is the `<body>` tag.
Typically, the `height` property defaults to `0%` and the `width` property defaults to `100%`. Typically, the `height` property defaults to `0%` and the `width` property defaults to `100%`.
@@ -327,7 +328,7 @@ Makes sense? I hope so. You're hot.
Okay, so if you open `homepage.html` in the browser, you see nothing. That's okay. Let's change that by learning a few new CSS properties! Okay, so if you open `homepage.html` in the browser, you see nothing. That's okay. Let's change that by learning a few new CSS properties!
######Background color ###### Background color
One property that you will learn to know and love is `background-color`. One property that you will learn to know and love is `background-color`.
It does exactly what you would expect it to: it sets the background color of the element it is styling! It does exactly what you would expect it to: it sets the background color of the element it is styling!
@@ -369,7 +370,7 @@ Let's add some backgrounds.
Save in your editor and now refresh in that browser! WOW. COLOR. Now, our site definitely isn't perfect yet. Save in your editor and now refresh in that browser! WOW. COLOR. Now, our site definitely isn't perfect yet.
Let's throw some MORE new CSS properties at you! Let's throw some MORE new CSS properties at you!
######Floating ###### Floating
One property that you will probably use fairly often is `float`. This is one of those properties that you will learn to both love and hate. One property that you will probably use fairly often is `float`. This is one of those properties that you will learn to both love and hate.
It's kind of magical. It's kind of magical.
@@ -437,14 +438,15 @@ Let's make it so that your header and footer are always on the top and bottom of
Incoming, the `position` property. Incoming, the `position` property.
######Positioning ###### Positioning
The `position` property is pretty much exactly what one would expect a positioning property to do: It positions things. The `position` property is pretty much exactly what one would expect a positioning property to do: It positions things.
It can have several states, but we'll focus on the 3 states you'll probably use most: `absolute`, `relative`, and `fixed` (the default state is `static`, but you will rarely need to work with this). It can have several states, but we'll focus on the 3 states you'll probably use most: `absolute`, `relative`, and `fixed` (the default state is `static`, but you will rarely need to work with this).
* In `absolute` positioning, the selected element will be placed in an exact location on the page, and moves with the page. So, in our example, the header could be placed at the top of the page and the footer at the bottom, but when you scroll, they will move with the page and they won't stay where they are supposed to. Some people like this, some don't. In our case, we won't use this.
* In `relative` positioning, the selected element will be placed *relative* (fancy that) to its default position. I'll show you an example of this later. - In `absolute` positioning, the selected element will be placed in an exact location on the page, and moves with the page. So, in our example, the header could be placed at the top of the page and the footer at the bottom, but when you scroll, they will move with the page and they won't stay where they are supposed to. Some people like this, some don't. In our case, we won't use this.
* Now, `fixed` positioning is just like `absolute` positioning, except that once an element is placed in an exact location on the page, it is stuck there. A similar example is like a watermark on a video. It stays the same there, no matter what the content is. - In `relative` positioning, the selected element will be placed _relative_ (fancy that) to its default position. I'll show you an example of this later.
- Now, `fixed` positioning is just like `absolute` positioning, except that once an element is placed in an exact location on the page, it is stuck there. A similar example is like a watermark on a video. It stays the same there, no matter what the content is.
How do we actually position things after you use `position`? You can use `top`, `bottom`, `left`, and `right` to place it. How do we actually position things after you use `position`? You can use `top`, `bottom`, `left`, and `right` to place it.
So, for example, if you want a header bar to be at the top of the page (but it's okay if it scrolls with the page), you'll have `position: absolute;` and `top: 0px;` because you want it to be 0 pixels from the top. So, for example, if you want a header bar to be at the top of the page (but it's okay if it scrolls with the page), you'll have `position: absolute;` and `top: 0px;` because you want it to be 0 pixels from the top.
@@ -500,13 +502,13 @@ Why the heck is that happening?
I'll tell you. I'll tell you.
######Margins and Padding ###### Margins and Padding
![Alt](https://raw2.github.com/cassidoo/HTML-CSS-Tutorial/master/cpbm.jpg) ![Alt](https://raw2.github.com/cassidoo/HTML-CSS-Tutorial/master/cpbm.jpg)
I made the diagram above to show you what the heck you'll be working with. I made the diagram above to show you what the heck you'll be working with.
First, let's look at the CSS property `margin`. Like you can see above, `margin` is the space *outside* the content's border. First, let's look at the CSS property `margin`. Like you can see above, `margin` is the space _outside_ the content's border.
Think of it as the 1 inch margins when you write a paper, or the margins of the pages of a book. Think of it as the 1 inch margins when you write a paper, or the margins of the pages of a book.
The HTML `<body>` tag actually has a natural margin, which is why our header and footer have the space on their sides. S The HTML `<body>` tag actually has a natural margin, which is why our header and footer have the space on their sides. S
@@ -518,7 +520,7 @@ o, let's add `margin: 0px;` to our `<body>` (that's all we'll change right now t
margin: 0px; margin: 0px;
} }
Now, let's talk about `padding`. Padding is the space *inside* the content's border. Now, if you look at our `.content` currently, it is uncomfortably close to our `.menu`. These things are not meant to be touching. I would insert a joke here but you can figure out what the punchline would be. Now, let's talk about `padding`. Padding is the space _inside_ the content's border. Now, if you look at our `.content` currently, it is uncomfortably close to our `.menu`. These things are not meant to be touching. I would insert a joke here but you can figure out what the punchline would be.
Anyway. Anyway.
@@ -574,20 +576,20 @@ There is a way to fix this.
So, instead of adding space to margins and padding on all four sides, you can add them just to the top, bottom, left, and/or right. There's a few ways to do this: So, instead of adding space to margins and padding on all four sides, you can add them just to the top, bottom, left, and/or right. There's a few ways to do this:
* `margin: 5px 10px 15px 0px;` - `margin: 5px 10px 15px 0px;`
* top margin is 5px - top margin is 5px
* right margin is 10px - right margin is 10px
* bottom margin is 15px - bottom margin is 15px
* left margin is 0px - left margin is 0px
* `margin: 15px 0px 5px;` - `margin: 15px 0px 5px;`
* top margin is 15px - top margin is 15px
* right and left margins are 0px - right and left margins are 0px
* bottom margin is 5px - bottom margin is 5px
* `margin: 5px 10px;` - `margin: 5px 10px;`
* top and bottom margins are 5px - top and bottom margins are 5px
* right and left margins are 10px - right and left margins are 10px
* `margin: 15px;` - `margin: 15px;`
* all four margins are 15px - all four margins are 15px
The same goes for `padding`, you can also do `padding: 5px 10px 15px 0px;`, etc. for all of the properties above. We're going to make some changes to both the `.header` and the `.menu` here: The same goes for `padding`, you can also do `padding: 5px 10px 15px 0px;`, etc. for all of the properties above. We're going to make some changes to both the `.header` and the `.menu` here:
@@ -639,7 +641,7 @@ The same goes for `padding`, you can also do `padding: 5px 10px 15px 0px;`, etc.
Now, with all that you've learned so far, you should probably make this a really great, functional website. Now, with all that you've learned so far, you should probably make this a really great, functional website.
I'll teach you just one more thing, and then I'll set you free like a bird or something. I'll teach you just one more thing, and then I'll set you free like a bird or something.
######Z-Index ###### Z-Index
The property `z-index` isn't one that you'll run into super often, but it's something that will help you in the long run. The property `z-index` isn't one that you'll run into super often, but it's something that will help you in the long run.
@@ -657,8 +659,8 @@ The content would overlap on top of the header (because we just HAD to make our
So, let's add some `z-index` magic to our page! A couple things to note first: So, let's add some `z-index` magic to our page! A couple things to note first:
* `z-index` only works when you have already set the `position` of an element. - `z-index` only works when you have already set the `position` of an element.
* You can assign any number you want to `z-index`, as long as it is an integer (no decimals), and as long as the highest number is the highest level, and the lowest number is the lowest level. - You can assign any number you want to `z-index`, as long as it is an integer (no decimals), and as long as the highest number is the highest level, and the lowest number is the lowest level.
Okay, I'm going to add some `z-index` properties to the page, and I'm also going to add some text changes that you have seen before (`text-align`, `font-family`) and one that you haven't seen before (`font-size`... you get one guess to figure out what this does): Okay, I'm going to add some `z-index` properties to the page, and I'm also going to add some text changes that you have seen before (`text-align`, `font-family`) and one that you haven't seen before (`font-size`... you get one guess to figure out what this does):
@@ -725,12 +727,12 @@ But hey, that's a LOT of reusing code. Plus what if someone is trying to read y
Duh. Duh.
###The `<link>` Tag, Comments, and other Developer Joys ### The `<link>` Tag, Comments, and other Developer Joys
Let's just say you want to reuse your styles across your website on every page. It makes sense. Let's just say you want to reuse your styles across your website on every page. It makes sense.
It'd be kind of annoying to have drastic changes on every page. It'd be kind of annoying to have drastic changes on every page.
####The `<link>` tag #### The `<link>` tag
That's where the `<link>` tag comes in! The `<link>` tag is an empty tag (like <br> and <img>), so it has no end tag, and it's used to link to external stylesheets! That's where the `<link>` tag comes in! The `<link>` tag is an empty tag (like <br> and <img>), so it has no end tag, and it's used to link to external stylesheets!
@@ -740,7 +742,7 @@ You write the `<link>` tag like this:
<link rel="stylesheet" type="text/css" href="main.css"> <link rel="stylesheet" type="text/css" href="main.css">
Let's take a look at those attributes. The `rel` attribute is for *relationship*. Let's take a look at those attributes. The `rel` attribute is for _relationship_.
It specifies the relationship between the current document and the linked document, which will almost always be `stylesheet`. It specifies the relationship between the current document and the linked document, which will almost always be `stylesheet`.
I've never actually seen it in action with anything other than `stylesheet`, but if you really want to know other values you can look it up. I've never actually seen it in action with anything other than `stylesheet`, but if you really want to know other values you can look it up.
The `type` attribute will also pretty much always be `text/css`. If it's ever anything else when you want to use it with CSS, I will be quite surprised. The `type` attribute will also pretty much always be `text/css`. If it's ever anything else when you want to use it with CSS, I will be quite surprised.
@@ -755,9 +757,9 @@ Let's just say that you want to show off your code to someone, but they're not e
You can add comments! You can add comments!
*Comments* in your code are blocks of text that will not be read by the computer. Every computer language has them. _Comments_ in your code are blocks of text that will not be read by the computer. Every computer language has them.
#####HTML Comments ##### HTML Comments
In HTML, a comment looks like this: In HTML, a comment looks like this:
@@ -785,7 +787,7 @@ You can make notes for yourself to check later, or you could just tell someone w
#### Other Developer Joys #### Other Developer Joys
There's so many things that could go in this section for such a generic title. So, what am I going to tell you? There's so many things that could go in this section for such a generic title. So, what am I going to tell you?
Well, I'm going to tell you what I *haven't* taught you so far. Well, I'm going to tell you what I _haven't_ taught you so far.
##### Forms ##### Forms
@@ -811,10 +813,10 @@ CSS3 has a bunch of new features too. From new selectors to fancy text effects
If you want to read more about HTML5 and CSS3, check out some of the links below. If you feel like you've mastered the materials you learned here, you're probably ready to start diving in further! If you want to read more about HTML5 and CSS3, check out some of the links below. If you feel like you've mastered the materials you learned here, you're probably ready to start diving in further!
* [W3Schools - HTML5](http://www.w3schools.com/html/html5_intro.asp) - [W3Schools - HTML5](http://www.w3schools.com/html/html5_intro.asp)
* [W3Schools - CSS3](http://www.w3schools.com/css/css3_intro.asp) - [W3Schools - CSS3](http://www.w3schools.com/css/css3_intro.asp)
* [HTML5 Rocks](http://www.html5rocks.com/) - [HTML5 Rocks](http://www.html5rocks.com/)
* [Dive Into HTML5](http://diveintohtml5.info/) - [Dive Into HTML5](http://diveintohtml5.info/)
##### How To Meet Ladies/Laddies (Get it? HTML Jokes are the best...) ##### How To Meet Ladies/Laddies (Get it? HTML Jokes are the best...)
@@ -822,7 +824,7 @@ Honestly I have nothing to put here I just like the joke that HTML stands for th
I hope your HTML is spin and <span>. Heh. I hope your HTML is spin and <span>. Heh.
##Final Project! ## Final Project!
Alrighty! So you've looked at the **7 - Project** folder a bit, but I haven't told you what that folder is for yet. Alrighty! So you've looked at the **7 - Project** folder a bit, but I haven't told you what that folder is for yet.
@@ -846,7 +848,7 @@ The best way to learn is by doing. Do as much as you can until you think you ha
And if you need help you can always come back and visit. :) And if you need help you can always come back and visit. :)
##And now, the end is near ## And now, the end is near
Actually, now the end is here. Actually, now the end is here.

203
src/posts/html-css-tutorial.md
View File

@@ -7,80 +7,81 @@ added: "Feb 10 2014"
tags: [tutorial] tags: [tutorial]
--- ---
###What ### What
In this tutorial, we'll start from the very beginning. You don't need to know anything about HTML and CSS or anything about code to start. In this tutorial, we'll start from the very beginning. You don't need to know anything about HTML and CSS or anything about code to start.
I'll included some tutorial files for you to play with and check out here: [HTML+CSS Tutorial Files](https://github.com/cassidoo/HTML-CSS-Tutorial/archive/master.zip) I'll included some tutorial files for you to play with and check out here: [HTML+CSS Tutorial Files](https://github.com/cassidoo/HTML-CSS-Tutorial/archive/master.zip)
###When ### When
Now. Or whenever. I'm not planning on taking this down anytime soon. But you are only limited by your own schedule. Or set free by it. Whatever. Now. Or whenever. I'm not planning on taking this down anytime soon. But you are only limited by your own schedule. Or set free by it. Whatever.
###Where ### Where
On a computer. Here. On a computer. Here.
I have this tutorial hosted on [my GitHub account](https://github.com/cassidoo/HTML-CSS-Tutorial) if you'd like to look at it there, or if you'd like to suggest improvements! I have this tutorial hosted on [my GitHub account](https://github.com/cassidoo/HTML-CSS-Tutorial) if you'd like to look at it there, or if you'd like to suggest improvements!
###Why ### Why
Because this stuff is important. Whether you're a business person formatting your emails, an aspiring web designer wanting to get your feet wet, or just someone who is interested and hasn't tried any sort of coding, scripting, or programming before, **HTML and CSS are an essential part** of your learning curve. Because this stuff is important. Whether you're a business person formatting your emails, an aspiring web designer wanting to get your feet wet, or just someone who is interested and hasn't tried any sort of coding, scripting, or programming before, **HTML and CSS are an essential part** of your learning curve.
##Table of Contents ## Table of Contents
* HTML
* Editors
* Tag Structure
* Text Structure
* Links
* Other tags
* Images
* Line Breaks
* Tables
* Making Things Gorgeous The Wrong Way
* Colors
* Width and Height
* Borders
* Text Styles
* The `<head>` tag
* Putting it all together so far
* CSS (this half is in a separate post, for your readability, because I care)
* Classes and IDs and other Segregation
* Classes
* IDs
* Other Segregation
* The `<span>` tag
* The `<div>` tag
* Background color
* Floating
* Positioning
* Margins and Padding
* Z-Index
* The `<link>` Tag, Comments, and other Developer Joys
* The `<link>` tag
* Commenting
* HTML Comments
* CSS Comments
* Other Developer Joys
* Forms
* HTML5 and CSS3
* How To Meet Ladies/Laddies (Get it? HTML Jokes are the best...)
* Final Project!
* And now, the end is near
##HTML Time. Let's Go. - HTML
- Editors
- Tag Structure
- Text Structure
- Links
- Other tags
- Images
- Line Breaks
- Tables
- Making Things Gorgeous The Wrong Way
- Colors
- Width and Height
- Borders
- Text Styles
- The `<head>` tag
- Putting it all together so far
- CSS (this half is in a separate post, for your readability, because I care)
- Classes and IDs and other Segregation
- Classes
- IDs
- Other Segregation
- The `<span>` tag
- The `<div>` tag
- Background color
- Floating
- Positioning
- Margins and Padding
- Z-Index
- The `<link>` Tag, Comments, and other Developer Joys
- The `<link>` tag
- Commenting
- HTML Comments
- CSS Comments
- Other Developer Joys
- Forms
- HTML5 and CSS3
- How To Meet Ladies/Laddies (Get it? HTML Jokes are the best...)
- Final Project!
- And now, the end is near
###Editors ## HTML Time. Let's Go.
### Editors
So the first thing you'll need is an editor to edit your jazz. There's tons of options out there. So the first thing you'll need is an editor to edit your jazz. There's tons of options out there.
* Notepad (that's right, the stupid thing that comes on your PC) - This is about as basic as you can get. It's totally okay if you want to use this, but I recommend one of the editors below just so you can see code highlighting (which will help you out later on). But, if you want to be a purist, this'll work just fine. - Notepad (that's right, the stupid thing that comes on your PC) - This is about as basic as you can get. It's totally okay if you want to use this, but I recommend one of the editors below just so you can see code highlighting (which will help you out later on). But, if you want to be a purist, this'll work just fine.
* [Aptana Studio 3](http://aptana.com/) - This is what I typically use. It's fairly easy to navigate, you create projects in it and it supports standard web projects, PHP, and Ruby. If you're a beginner that probably means nothing to you. Anyway, a decent choice. - [Aptana Studio 3](http://aptana.com/) - This is what I typically use. It's fairly easy to navigate, you create projects in it and it supports standard web projects, PHP, and Ruby. If you're a beginner that probably means nothing to you. Anyway, a decent choice.
* [Sublime Text 2](http://www.sublimetext.com/2) - This is a pretty popular option, and for good reason. Very clean interface. Once you can navigate it (learning curve isn't that big), it's pretty dreamy. Like your face. - [Sublime Text 2](http://www.sublimetext.com/2) - This is a pretty popular option, and for good reason. Very clean interface. Once you can navigate it (learning curve isn't that big), it's pretty dreamy. Like your face.
* [Notepad++](http://notepad-plus-plus.org/) - This is just one step up from Notepad. But it's pretty dece. Code highlighting is in it, and nothing else too fancy, which is what I like about it. - [Notepad++](http://notepad-plus-plus.org/) - This is just one step up from Notepad. But it's pretty dece. Code highlighting is in it, and nothing else too fancy, which is what I like about it.
* [IDEcoder](http://icecoder.net/) - this is an in-browser code editor, which lets you code directly within the web browser, online or offline, it means you only need one program (your browser) to develop websites, which is cool - [IDEcoder](http://icecoder.net/) - this is an in-browser code editor, which lets you code directly within the web browser, online or offline, it means you only need one program (your browser) to develop websites, which is cool
There's a bunch of others [listed here](http://en.wikipedia.org/wiki/List_of_HTML_editors), I just listed the ones I've used and liked! There's a bunch of others [listed here](http://en.wikipedia.org/wiki/List_of_HTML_editors), I just listed the ones I've used and liked!
###HTML Tag Structure ### HTML Tag Structure
Here is a barebones HTML page, about as simple as you can get. You can open it up in the **1 - Structure** folder in the file part1.html. If you were to open the file in your favorite browser (which you can do, go ahead), you'll see a plain webpage with the title "My Website" and the words, "Hello, World!" written on the page. Here is a barebones HTML page, about as simple as you can get. You can open it up in the **1 - Structure** folder in the file part1.html. If you were to open the file in your favorite browser (which you can do, go ahead), you'll see a plain webpage with the title "My Website" and the words, "Hello, World!" written on the page.
@@ -97,19 +98,20 @@ Here is a barebones HTML page, about as simple as you can get. You can open it
</html> </html>
So, what are we looking at here? So, what are we looking at here?
HTML, short for *HyperText Markup Language*, consists of these things called tags, which are words written between `<` and `>` characters, like `<sometag>`. All tags (with just a few exceptions that we'll talk about later) have a matching closing tag, which has the same name as the opening tag, except that it contains `/` after the first `<`, like `</sometag>`. HTML, short for _HyperText Markup Language_, consists of these things called tags, which are words written between `<` and `>` characters, like `<sometag>`. All tags (with just a few exceptions that we'll talk about later) have a matching closing tag, which has the same name as the opening tag, except that it contains `/` after the first `<`, like `</sometag>`.
For example, `<html>` is one tag and the closing tag for it is `</html>`, same with `<head>` and `</head>` and `<body>` and `</body>`, and so on. You get it. For example, `<html>` is one tag and the closing tag for it is `</html>`, same with `<head>` and `</head>` and `<body>` and `</body>`, and so on. You get it.
The opening and closing tags together are an *element* (which also includes everything written in it). For example, `<title>My Website</title>` is one element. The text inside an element, in the title case, `My Website`, is called the *content* of an element. The opening and closing tags together are an _element_ (which also includes everything written in it). For example, `<title>My Website</title>` is one element. The text inside an element, in the title case, `My Website`, is called the _content_ of an element.
Tags organize your page and tell the browser what your page consists of. There's tons of tags out there, some that you may never use. Tags organize your page and tell the browser what your page consists of. There's tons of tags out there, some that you may never use.
Here's some lists of tags if you really care to see all of them at this point: Here's some lists of tags if you really care to see all of them at this point:
* [HTML Dog Tag List](http://www.htmldog.com/reference/htmltags/)
* [W3Schools Tag List](http://www.w3schools.com/tags/default.asp)
* [Quackit HTML Tag List](http://www.quackit.com/html/tags/)
So, if you look at our example, you can also put tags inside other tags (like we did with the `<title>` tags inside the `<head>` tags). This is called *nesting* elements. - [HTML Dog Tag List](http://www.htmldog.com/reference/htmltags/)
In this case, we would say that the `<head>` *contains* the `<title>`. Sometimes when you have a lot of nested tags, it's hard to keep track, so you have to format your code with spacing, as shown. Typically, inner tags are spaced more than their outer tags (just as `<title>` is indented further than `<head>`). - [W3Schools Tag List](http://www.w3schools.com/tags/default.asp)
- [Quackit HTML Tag List](http://www.quackit.com/html/tags/)
So, if you look at our example, you can also put tags inside other tags (like we did with the `<title>` tags inside the `<head>` tags). This is called _nesting_ elements.
In this case, we would say that the `<head>` _contains_ the `<title>`. Sometimes when you have a lot of nested tags, it's hard to keep track, so you have to format your code with spacing, as shown. Typically, inner tags are spaced more than their outer tags (just as `<title>` is indented further than `<head>`).
Let's take a look again at part1.html in the **1 - Structure** folder. You'll notice that the first line has `<!doctype html>`. Every HTML document and website has to have this special tag, as it tells the browser what language we're using. This is one of those special tags I mentioned that doesn't need a closing tag. Let's take a look again at part1.html in the **1 - Structure** folder. You'll notice that the first line has `<!doctype html>`. Every HTML document and website has to have this special tag, as it tells the browser what language we're using. This is one of those special tags I mentioned that doesn't need a closing tag.
@@ -119,7 +121,7 @@ Inside `<html>`, there are two elements: `<head>`and `<body>`. Contained in `<he
On the other side of the planet, we have `<body></body>`. Everything visible to the user is contained in these tags. Right now, all that consists of is "Hello, World!" Let's change that for fun. Replace "Hello, World!" with your own text in your favorite HTML editor, and then open the page in your browser. Neat! On the other side of the planet, we have `<body></body>`. Everything visible to the user is contained in these tags. Right now, all that consists of is "Hello, World!" Let's change that for fun. Replace "Hello, World!" with your own text in your favorite HTML editor, and then open the page in your browser. Neat!
###Structuring text ### Structuring text
Let's get juicy. We're going to talk about some new tags for structuring your text. Because you're not going to want just one style of text throughout your whole website, right? Let's get juicy. We're going to talk about some new tags for structuring your text. Because you're not going to want just one style of text throughout your whole website, right?
@@ -127,17 +129,17 @@ Check out part2.html in the **1 - Structure** folder. The tags that we'll be ta
Now, let's talk about it. Now, let's talk about it.
First, we have `<h1>`, which adds a *heading* to our website. Basically, a heading is just text with a bigger font. But still. Important. We'll soon learn how to adjust any and all font sizes, but not yet. Just know that your headings should be in `<h1>` tags. Also, if you have a smaller heading, or *sub-heading*, you could use `<h2>`, which is smaller than `<h1>`, but bigger than regular text. You can keep going with more numbers until you reach `<h6>`, with each heading a bit smaller than the previous. Try adding some subheadings underneath our current heading! First, we have `<h1>`, which adds a _heading_ to our website. Basically, a heading is just text with a bigger font. But still. Important. We'll soon learn how to adjust any and all font sizes, but not yet. Just know that your headings should be in `<h1>` tags. Also, if you have a smaller heading, or _sub-heading_, you could use `<h2>`, which is smaller than `<h1>`, but bigger than regular text. You can keep going with more numbers until you reach `<h6>`, with each heading a bit smaller than the previous. Try adding some subheadings underneath our current heading!
Next, we have `<p>` tags. `<p>` adds a *paragraph* of text to our website, which are blocks of text that have some space before and after them. Edit the text in the paragraphs given, and add your own to see what I mean! Next, we have `<p>` tags. `<p>` adds a _paragraph_ of text to our website, which are blocks of text that have some space before and after them. Edit the text in the paragraphs given, and add your own to see what I mean!
And finally, we have `<ul>`. `<ul>` means a bulleted list (also known as an *unordered list*), where every `<li>` is an item in that list (called a *list item*). But what if you want a numbered list? You could change `<ul>` to `<ol>` (and don't forget its closing tag), it's that simple! `<ol>` is an *ordered list*, which has numbers instead of bullet points, and that is truly the only difference. Add some list items (`<li>`) to the list (make sure you stay inside the `<ul>` tags), and then change your `<ul>` tags to `<ol>`! And finally, we have `<ul>`. `<ul>` means a bulleted list (also known as an _unordered list_), where every `<li>` is an item in that list (called a _list item_). But what if you want a numbered list? You could change `<ul>` to `<ol>` (and don't forget its closing tag), it's that simple! `<ol>` is an _ordered list_, which has numbers instead of bullet points, and that is truly the only difference. Add some list items (`<li>`) to the list (make sure you stay inside the `<ul>` tags), and then change your `<ul>` tags to `<ol>`!
###Links ### Links
Links are what makes the world/Internet go 'round. Seriously. So, let's learn about them. Links are what makes the world/Internet go 'round. Seriously. So, let's learn about them.
Links are made with the `<a>` tag, which stands for *anchor*. Links are made with the `<a>` tag, which stands for _anchor_.
Open up the **2 - Tags** folder, and add this piece of code right after your heading in page1.html: Open up the **2 - Tags** folder, and add this piece of code right after your heading in page1.html:
@@ -146,17 +148,17 @@ Open up the **2 - Tags** folder, and add this piece of code right after your hea
Open page1.html in a browser and click on it! BEAUTIFUL. Open page1.html in a browser and click on it! BEAUTIFUL.
Okay, so let's take a look at this. First of all, you can see the `<a>` tag there contained in the paragraph. Beautiful. Okay, so let's take a look at this. First of all, you can see the `<a>` tag there contained in the paragraph. Beautiful.
But what's that funky milk `href=`? Well, that syntax called an *attribute*. Attributes change the way a tag works, and are not visible to the website's user. You only add attributes to the opening tag, not a closing tag. Tags can have multiple attributes, for example: But what's that funky milk `href=`? Well, that syntax called an _attribute_. Attributes change the way a tag works, and are not visible to the website's user. You only add attributes to the opening tag, not a closing tag. Tags can have multiple attributes, for example:
<tag attribute="value1" attribute2="value2">Content of tag</tag>` <tag attribute="value1" attribute2="value2">Content of tag</tag>`
Got it? Good. You're so good looking. Got it? Good. You're so good looking.
So, anyway, the attribute 'href' tells us where the link is going to go when the user clicks on it (and for those curious, it stands for *hyperreference*). Try adding some more links to the page to different websites! So, anyway, the attribute 'href' tells us where the link is going to go when the user clicks on it (and for those curious, it stands for _hyperreference_). Try adding some more links to the page to different websites!
Also, one thing you should note: Links don't have to be in `<p>` tags like I put above. You could put them in `<li>` tags in a list, `<h1>` tags for a linking header, or completely on their own! Also, one thing you should note: Links don't have to be in `<p>` tags like I put above. You could put them in `<li>` tags in a list, `<h1>` tags for a linking header, or completely on their own!
####Adding links to other pages in your website #### Adding links to other pages in your website
Let's just say you have a fully functioning website called fakewebsite.com. You have your homepage and your "Contact Us" page in the same directory or folder. Let's just say you have a fully functioning website called fakewebsite.com. You have your homepage and your "Contact Us" page in the same directory or folder.
Normally when a beginner links to different pages on their website, they just make links that look like `<a href="http://www.fakewebsite.com/index.htmL">Home</a>` and `<a href="http://www.fakewebsite.com/contactus.htmL">Contact Us</a>`. Normally when a beginner links to different pages on their website, they just make links that look like `<a href="http://www.fakewebsite.com/index.htmL">Home</a>` and `<a href="http://www.fakewebsite.com/contactus.htmL">Contact Us</a>`.
@@ -171,37 +173,37 @@ Paste this line of code into page1.html. Watch the magic happen.
Now, if you were to change your domain or location of your files, you don't have to change a thing. Boo yah. Now, if you were to change your domain or location of your files, you don't have to change a thing. Boo yah.
###Other tags ### Other tags
So, you can reference the links that I showed you before if you want to check out some jazzy stuff you can do with your page. There are some other ones though that you might want to see before we move on to cooler and bigger things. So, you can reference the links that I showed you before if you want to check out some jazzy stuff you can do with your page. There are some other ones though that you might want to see before we move on to cooler and bigger things.
####Images #### Images
`<img>`. Let's just say you want to put an image on your website. This is probably a good tag to know. `<img>`. Let's just say you want to put an image on your website. This is probably a good tag to know.
Add the following to page1.html: Add the following to page1.html:
<img src="http://i.imgur.com/B9q0A.gif" /> <img src="http://i.imgur.com/B9q0A.gif" />
Open up the page in a browser. WHOA. Image! So, the `<img>` tag is one of those special tags. First of all, it doesn't have a closing tag. You just stick in a `/` at the end of the one tag and you're done. Secondly, it also has a `src` attribute (which is short for *source*), and in the value of that attribute you put the URL of the image (similar to `href` in the anchor tag). Open up the page in a browser. WHOA. Image! So, the `<img>` tag is one of those special tags. First of all, it doesn't have a closing tag. You just stick in a `/` at the end of the one tag and you're done. Secondly, it also has a `src` attribute (which is short for _source_), and in the value of that attribute you put the URL of the image (similar to `href` in the anchor tag).
One attribute that might be good for you to remember for `<img>` tags is the `alt` attribute. If you changed the code above to: One attribute that might be good for you to remember for `<img>` tags is the `alt` attribute. If you changed the code above to:
<img src="http://i.imgur.com/B9q0A.gif" alt="I could have danced all night" /> <img src="http://i.imgur.com/B9q0A.gif" alt="I could have danced all night" />
When you load the page in the browser, the image looks the same. But, if you roll your mouse over the image, you'll see some words appear! WOW. That's the `alt` attribute. It stands for the *alternate text* for an image, and it's used when a user can't view the image for whatever reason (using a screen reader, slow connection, error in the `src` attribute, etc.). Or, in the case of [XKCD](http://xkcd.com/), it's used to add more humor to the page (roll your mouse over all of the comics on the site, they always add another joke or two that a lot of people don't know about). When you load the page in the browser, the image looks the same. But, if you roll your mouse over the image, you'll see some words appear! WOW. That's the `alt` attribute. It stands for the _alternate text_ for an image, and it's used when a user can't view the image for whatever reason (using a screen reader, slow connection, error in the `src` attribute, etc.). Or, in the case of [XKCD](http://xkcd.com/), it's used to add more humor to the page (roll your mouse over all of the comics on the site, they always add another joke or two that a lot of people don't know about).
####Line breaks #### Line breaks
Let's just say you want to keep all your content in one paragraph `<p>`, but you still want to break it up. Let's just say you want to keep all your content in one paragraph `<p>`, but you still want to break it up.
That's easy. That's easy.
So, there's two special tags here, `<hr>` and `<br>`. They are *empty tags*, meaning they have no closing tag. So, there's two special tags here, `<hr>` and `<br>`. They are _empty tags_, meaning they have no closing tag.
`<hr>` stands for *horizontal rule*, and creates a visible line break. `<hr>` stands for _horizontal rule_, and creates a visible line break.
`<br>` is a simple line break, all it does is split your paragraph up. `<br>` is a simple line break, all it does is split your paragraph up.
Try inserting these in between some of your `<p>` tags to try it out! Try inserting these in between some of your `<p>` tags to try it out!
####Tables #### Tables
Tables are really cool. They can also be a bit confusing. Open up tables.html (in the **2 - Tags** folder) in a browser to check out the example table I made for you there. Tables are really cool. They can also be a bit confusing. Open up tables.html (in the **2 - Tags** folder) in a browser to check out the example table I made for you there.
There's several tags for tables, but the essential ones are `<table>`, `<tr>`, `<th>`, and `<td>`. Look at tables.html in your editor. There's several tags for tables, but the essential ones are `<table>`, `<tr>`, `<th>`, and `<td>`. Look at tables.html in your editor.
@@ -217,7 +219,7 @@ This will contain all the parts of your table. Sometimes, tables have a `border
Boom. Let's add some more. Boom. Let's add some more.
The next tag we're gonna check out is `<tr>`, which is for a *table row*. Easy peasy. So, let's add 3 `<tr>` tags to our table. The next tag we're gonna check out is `<tr>`, which is for a _table row_. Easy peasy. So, let's add 3 `<tr>` tags to our table.
<table border="1"> <table border="1">
<tr> <tr>
@@ -228,7 +230,7 @@ The next tag we're gonna check out is `<tr>`, which is for a *table row*. Easy
</tr> </tr>
</table> </table>
And finally, we have the actual cells of the table. There are two types of tags for this, `<th>` (*table header*) and `<td>` (*table data*). As their names indicate, the former is for the header of the table and the latter is for all of the data in the table. And finally, we have the actual cells of the table. There are two types of tags for this, `<th>` (_table header_) and `<td>` (_table data_). As their names indicate, the former is for the header of the table and the latter is for all of the data in the table.
In our first set of `<tr>` tags, add 4 `<th>` tags, and in the second and third `<tr>` tags add 4 `<td>` tags. In our first set of `<tr>` tags, add 4 `<th>` tags, and in the second and third `<tr>` tags add 4 `<td>` tags.
@@ -282,13 +284,13 @@ One other fun thing you can try playing with are the `colspan` and `rowspan` att
You can also nest tables, but I won't get into that right now. If you want to play around with the code, try adding some `<tr>` and `<td>` tags inside your current `<td>` tags. MaGiCal ThInGs. You can also nest tables, but I won't get into that right now. If you want to play around with the code, try adding some `<tr>` and `<td>` tags inside your current `<td>` tags. MaGiCal ThInGs.
###Making Things Gorgeous The Wrong Way ### Making Things Gorgeous The Wrong Way
So, your website right now looks pretty bland, and that's normal. But, we want a website that is hot, sexy, ravishing, and powerful. Yes, that's right, we want a website just like you. So, your website right now looks pretty bland, and that's normal. But, we want a website that is hot, sexy, ravishing, and powerful. Yes, that's right, we want a website just like you.
So first, I will show you the wrong way to style your pages. You might ask why, but trust me, if you learn in this order, you'll understand HTML attributes a lot better, and then when you move on to CSS your mind will explode with joy. Explode. So first, I will show you the wrong way to style your pages. You might ask why, but trust me, if you learn in this order, you'll understand HTML attributes a lot better, and then when you move on to CSS your mind will explode with joy. Explode.
####Colors #### Colors
Alrighty. Let's get frisky. Open up the **3 - Styles** folder and the file style1.html. You might notice that this file is pretty bland right now, but that's what we're gonna fix. Be patient, my grasshopper. Alrighty. Let's get frisky. Open up the **3 - Styles** folder and the file style1.html. You might notice that this file is pretty bland right now, but that's what we're gonna fix. Be patient, my grasshopper.
@@ -302,20 +304,20 @@ So, you might wonder, "what the heck how does that work can I just type any colo
How do you get a specific color of your liking? Well that's when you use RGB or HEX colors. This is kind of a pain to grasp, it took me a little bit, so I'll explain it as simply as I can: RGB stands for Red, Green, and Blue. You can have the values 0 to 255 in each to form pretty much any color in existance. Whoa. The way to form an RGB code similarly to the one above is simple: `style="color: rgb(255,0,0)"`. In this example, there's 255 reds, 0 greens, and 0 blues. So, it's all red. Boom, simple enough. How do you get a specific color of your liking? Well that's when you use RGB or HEX colors. This is kind of a pain to grasp, it took me a little bit, so I'll explain it as simply as I can: RGB stands for Red, Green, and Blue. You can have the values 0 to 255 in each to form pretty much any color in existance. Whoa. The way to form an RGB code similarly to the one above is simple: `style="color: rgb(255,0,0)"`. In this example, there's 255 reds, 0 greens, and 0 blues. So, it's all red. Boom, simple enough.
Now HEX colors is very similar. It consists of the hashtag sign `#`, and then 6 *hexadecimal digits*, which are 0123456789ABCDEF, with F being the highest digit. Like RGB, the first two digits of HEX are reds, the second two digits are blues, and the third couple of digits are greens. So, to write the same color code above, you'd do `style="color: #FF0000"` to get red, because you have FF for reds, 00 for blues, and 00 for greens. Simple? Simple. Now HEX colors is very similar. It consists of the hashtag sign `#`, and then 6 _hexadecimal digits_, which are 0123456789ABCDEF, with F being the highest digit. Like RGB, the first two digits of HEX are reds, the second two digits are blues, and the third couple of digits are greens. So, to write the same color code above, you'd do `style="color: #FF0000"` to get red, because you have FF for reds, 00 for blues, and 00 for greens. Simple? Simple.
Don't worry, you won't have to come up with RGB and HEX colors yourself. There's plenty of websites and programs and color pickers out there to help you with that. Here's a few: Don't worry, you won't have to come up with RGB and HEX colors yourself. There's plenty of websites and programs and color pickers out there to help you with that. Here's a few:
* [Color Picker](http://www.colorpicker.com/) - [Color Picker](http://www.colorpicker.com/)
* [HTML color codes and names](http://www.computerhope.com/htmcolor.htm) - [HTML color codes and names](http://www.computerhope.com/htmcolor.htm)
* [HTML Color Codes](http://html-color-codes.info/) - [HTML Color Codes](http://html-color-codes.info/)
* [HTML Color Picker](http://www.w3schools.com/tags/ref_colorpicker.asp) - [HTML Color Picker](http://www.w3schools.com/tags/ref_colorpicker.asp)
Try adding colors to various tags on the page! You can make your `<h1>` the color `#005DFC`, your `<h3>` tag `rgb(242,127,56)`, and your `<p>` tag `lightblue`. Keep playing til you're happy. Try adding colors to various tags on the page! You can make your `<h1>` the color `#005DFC`, your `<h3>` tag `rgb(242,127,56)`, and your `<p>` tag `lightblue`. Keep playing til you're happy.
Now, you might see the syntax in your HTML journey where you actually have the `color` attribute, like `<p color="red">wut</p>`. Though this is technically allowed, please don't do this. Please. You'll be so much happier in the long run, I promise. Now, you might see the syntax in your HTML journey where you actually have the `color` attribute, like `<p color="red">wut</p>`. Though this is technically allowed, please don't do this. Please. You'll be so much happier in the long run, I promise.
####Width and Height #### Width and Height
So, what if you want to make a picture or a paragraph a different size? Easy peasy. So, what if you want to make a picture or a paragraph a different size? Easy peasy.
@@ -339,16 +341,16 @@ Now, you can also do these changes with the `style` attribute.
<img src="http://i.imgur.com/wjiVXJe.gif" style="width: 600px" /> <img src="http://i.imgur.com/wjiVXJe.gif" style="width: 600px" />
Simple enough! Now, we've looked at the `style` attribute a bit now but I haven't explained the syntax. The `style` attribute is for *inline styles*. This means that you're styling your HTML directly in each element, rather than using CSS. But, we haven't gotten that far yet, so I won't go into that part. Simple enough! Now, we've looked at the `style` attribute a bit now but I haven't explained the syntax. The `style` attribute is for _inline styles_. This means that you're styling your HTML directly in each element, rather than using CSS. But, we haven't gotten that far yet, so I won't go into that part.
Now, the syntax within a `style` attribute is a little funky. It is always `style="property: value"`, where the *property* is literally a property of the tag you're editing (for example, `color`, `width`, `height`), and the *value* is to what you're changing or editing the property (for example `blue`, `600px`, `#FF0000`). Now, the syntax within a `style` attribute is a little funky. It is always `style="property: value"`, where the _property_ is literally a property of the tag you're editing (for example, `color`, `width`, `height`), and the _value_ is to what you're changing or editing the property (for example `blue`, `600px`, `#FF0000`).
If you have more than one property that you want to style, for example both height and width, you put a semicolon between delarations. So, in our example, if you want to edit both height and width of our image in the `style` attribute, we'd do: If you have more than one property that you want to style, for example both height and width, you put a semicolon between delarations. So, in our example, if you want to edit both height and width of our image in the `style` attribute, we'd do:
<img src="http://i.imgur.com/wjiVXJe.gif" style="width: 600px; height: 800px" /> <img src="http://i.imgur.com/wjiVXJe.gif" style="width: 600px; height: 800px" />
Why is the syntax this funky? Well, that's because it's secretly CSS syntax. But we'll get into that more later. Why is the syntax this funky? Well, that's because it's secretly CSS syntax. But we'll get into that more later.
####Borders #### Borders
What if we have a paragraph IN A BOX. That's right. Kind of like a table. But not. That'd be cool. Of course, there are plenty of other things that can have a border. Buttons (we'll get to those later), color blocks (also later), and images, and MORE can have them. Mmmhm. What if we have a paragraph IN A BOX. That's right. Kind of like a table. But not. That'd be cool. Of course, there are plenty of other things that can have a border. Buttons (we'll get to those later), color blocks (also later), and images, and MORE can have them. Mmmhm.
@@ -366,8 +368,8 @@ Whoa. That's a lot of crap in there. Let's break it down.
The first part of the declaration is obvious, `border`. This is the property that we're editing. Man, this is easy. The first part of the declaration is obvious, `border`. This is the property that we're editing. Man, this is easy.
Next, we have 3 parts in the value section. The first part is `5px`. Firstly, `px` stands for *pixels*. We used this above for our width and heights as well. You always have to include the units (just like in 5th grade math) in your styling, and our units here are pixels. Now, that whole first part, `5px`, is the border's thickness. You guessed it: it's 5 pixels thick. Gosh you're smart. Next, we have 3 parts in the value section. The first part is `5px`. Firstly, `px` stands for _pixels_. We used this above for our width and heights as well. You always have to include the units (just like in 5th grade math) in your styling, and our units here are pixels. Now, that whole first part, `5px`, is the border's thickness. You guessed it: it's 5 pixels thick. Gosh you're smart.
The next part is the *border style*. You can plug in several words here, as indicated [on this webpage](http://www.w3schools.com/css/css_border.asp). We used `solid`, but you can also say `dotted`, `dashed`, or `double`. There are some other words you can use, but those depend on the color of the border. The next part is the _border style_. You can plug in several words here, as indicated [on this webpage](http://www.w3schools.com/css/css_border.asp). We used `solid`, but you can also say `dotted`, `dashed`, or `double`. There are some other words you can use, but those depend on the color of the border.
Color? What? OH YEAH. That's the third part of the border style. You can stick in any color for that, but in this example, we have `black`. Color? What? OH YEAH. That's the third part of the border style. You can stick in any color for that, but in this example, we have `black`.
Let's mix it up a bit with different borders for you to check out. I'm just going to keep using the same image, you can replace it with whatever. Stick this in the `<body>` tags of style1.html and check it out, and play with the values yourself! Let's mix it up a bit with different borders for you to check out. I'm just going to keep using the same image, you can replace it with whatever. Stick this in the `<body>` tags of style1.html and check it out, and play with the values yourself!
@@ -377,10 +379,9 @@ Let's mix it up a bit with different borders for you to check out. I'm just goi
<img src="http://i.imgur.com/wjiVXJe.gif" style="border:8px outset red" /> <img src="http://i.imgur.com/wjiVXJe.gif" style="border:8px outset red" />
<img src="http://i.imgur.com/wjiVXJe.gif" style="border:3px double #333a21; height: 30px" /> <img src="http://i.imgur.com/wjiVXJe.gif" style="border:3px double #333a21; height: 30px" />
Notice how I added `width` and `height` to a couple of them. We're getting incestuous with our stylings. Aww yeah. Notice how I added `width` and `height` to a couple of them. We're getting incestuous with our stylings. Aww yeah.
####Text Styles #### Text Styles
Besides having header tags and colors, there are other text styles that you can use. What if you want bold text, or italics? Different sizes? Once again, the `style` attribute comes to the rescue. Besides having header tags and colors, there are other text styles that you can use. What if you want bold text, or italics? Different sizes? Once again, the `style` attribute comes to the rescue.
@@ -399,7 +400,7 @@ Browser time. You've now got some text in the font Arial, and it's italic! WOO
The properties we used here are `font-family` and `font-style`. For the former, you can choose a lot of fonts, but you have to be careful. Not every computer has the same fonts. This is just my personal opinion: don't put something here besides Arial unless you've done some JavaScript magic. And because I'm assuming you don't know JavaScript, don't use this unless you're changing this to Arial. At least not yet. :) The properties we used here are `font-family` and `font-style`. For the former, you can choose a lot of fonts, but you have to be careful. Not every computer has the same fonts. This is just my personal opinion: don't put something here besides Arial unless you've done some JavaScript magic. And because I'm assuming you don't know JavaScript, don't use this unless you're changing this to Arial. At least not yet. :)
And for `font-style`, it can be `normal`, `oblique`, and `italic`. You can play with those now, it's pretty straightforward. And for `font-style`, it can be `normal`, `oblique`, and `italic`. You can play with those now, it's pretty straightforward.
###The `<head>` Tag ### The `<head>` Tag
Before we start going insane with how good you are at HTML, let's start looking at something that you haven't played with yet. The `<head>` tag. Before we start going insane with how good you are at HTML, let's start looking at something that you haven't played with yet. The `<head>` tag.
@@ -407,43 +408,43 @@ I mentioned before that in the `<head>` is information that the user doesn't see
So. What else can go in the `<head>`? We've already got `<title>`, which we've talked about already to help search engines find us. What if we want to help the search engines out a bit more? Incoming, the `<meta>` tag. So. What else can go in the `<head>`? We've already got `<title>`, which we've talked about already to help search engines find us. What if we want to help the search engines out a bit more? Incoming, the `<meta>` tag.
The `<meta>` tag gives *metadata* about the HTML document. Metadata will not be displayed on the page, but machines can read it. An example of metadata not on a webpage is in a typical music file. When you have a music file on your computer and you open it in some media player of some kind, it shows the album title, the artist, the genre, and other information about the song. This information is metadata. The user can't see it directly in the music file, but your music players can read it and will tell you what it is. The `<meta>` tag gives _metadata_ about the HTML document. Metadata will not be displayed on the page, but machines can read it. An example of metadata not on a webpage is in a typical music file. When you have a music file on your computer and you open it in some media player of some kind, it shows the album title, the artist, the genre, and other information about the song. This information is metadata. The user can't see it directly in the music file, but your music players can read it and will tell you what it is.
So, on a website, this metadata is used by search engines, your browser, and other web services to make your website easy to find, read, and display. So, on a website, this metadata is used by search engines, your browser, and other web services to make your website easy to find, read, and display.
There are 4 important uses for the `<meta>` tag. There are plenty of other uses, but let's be honest, I don't care about them right now, and I don't think you do either. There are 4 important uses for the `<meta>` tag. There are plenty of other uses, but let's be honest, I don't care about them right now, and I don't think you do either.
Open up the **4 - Head** (heh get it? Forehead? I crack myself up.) folder, and open cooking.html in your favorite editor. Open up the **4 - Head** (heh get it? Forehead? I crack myself up.) folder, and open cooking.html in your favorite editor.
* *Defining keywords for search engines.* Let's say that you have a website that's about cooking, hence our filename. You want people searching for your website to be able to find it. So, you can add the following right before the `<title>` tag: - _Defining keywords for search engines._ Let's say that you have a website that's about cooking, hence our filename. You want people searching for your website to be able to find it. So, you can add the following right before the `<title>` tag:
`<meta name="keywords" content="cooking, cook, recipe, food, microwave">` `<meta name="keywords" content="cooking, cook, recipe, food, microwave">`
Simple enough. Now, when people search using the terms cooking, cook, recipe, food, and microwave, your website is pushed up in the results. Nice! Simple enough. Now, when people search using the terms cooking, cook, recipe, food, and microwave, your website is pushed up in the results. Nice!
* *Defining a description of your site.* Again, this one is for the search engines. Whenever you search for a website, there's a tiny description in the search results. Go search for anything right now, and you'll see it. So, you can define what that is with this snippet: - _Defining a description of your site._ Again, this one is for the search engines. Whenever you search for a website, there's a tiny description in the search results. Go search for anything right now, and you'll see it. So, you can define what that is with this snippet:
`<meta name="description" content="The best cooking website in the entire universe. You're welcome.">` `<meta name="description" content="The best cooking website in the entire universe. You're welcome.">`
Add this right after the keywords line in cooking.html. Now if people were searching for this, they'd get this description and instantly see that your website is the best cooking website in the universe. Add this right after the keywords line in cooking.html. Now if people were searching for this, they'd get this description and instantly see that your website is the best cooking website in the universe.
* *Defining the author of a website.* Let's say that someone's looking for the author of your website, because your writing style is sexy. Or something. You can let them know who you are with the following: - _Defining the author of a website._ Let's say that someone's looking for the author of your website, because your writing style is sexy. Or something. You can let them know who you are with the following:
`<meta name="author" content="Sexy McGoodlooking">` `<meta name="author" content="Sexy McGoodlooking">`
Add this after your description line, and stick your name in it! I think I got it as close as possible. Add this after your description line, and stick your name in it! I think I got it as close as possible.
* *Refreshing your document every 30 seconds.* This one is for your browser. Let's say that you have comments available on your recipes, and you want to have the page refresh so the comments can appear "live". Just add this: - _Refreshing your document every 30 seconds._ This one is for your browser. Let's say that you have comments available on your recipes, and you want to have the page refresh so the comments can appear "live". Just add this:
`<meta http-equiv="refresh" content="30">` `<meta http-equiv="refresh" content="30">`
And there you have it, a self-refreshing webpage. You're so good at this. And there you have it, a self-refreshing webpage. You're so good at this.
###Putting it all together so far ### Putting it all together so far
Okay, you have a pretty solid understanding of stuff so far. I want you to take cooking.html, and make it shine. Okay, you have a pretty solid understanding of stuff so far. I want you to take cooking.html, and make it shine.
Resize the images so the page is more uniform. Add borders to them. Change the font styles and weights. Change the colors. Add some keywords in the metadata and change the title of the page. Resize the images so the page is more uniform. Add borders to them. Change the font styles and weights. Change the colors. Add some keywords in the metadata and change the title of the page.
Using the information I've given you so far, you can make a pretty good looking site! Using the information I've given you so far, you can make a pretty good looking site!
##What, why did we stop? ## What, why did we stop?
This concludes Part 1 of this tutorial! You've done such a great job so far. You're so hot. This concludes Part 1 of this tutorial! You've done such a great job so far. You're so hot.
[You can find Part 2 here.](http://cassidoo.github.io/html/css/tutorial/2014/02/10/html-css-tutorial-part-2/) Go get 'em! [You can find Part 2 here.](http://cassidoo.github.io/html/css/tutorial/2014/02/10/html-css-tutorial-part-2/) Go get 'em!

1
src/posts/l4-digital-first-impressions.md
View File

@@ -21,4 +21,3 @@ Now Thursday was a special day (not that all days at L4 aren't).  Every first T
Finally, Friday, I got to dive into code!  My machine was finally all set up, so I made my first pull requests in the codebase.  I also got to play some Super Smash Brothers, watch a pushup contest (I politely declined participating when the first person did over 50 of them), join a book club, learn how to use the 3D printer, and try out some of the great office snacks.  Not bad for a Friday. Finally, Friday, I got to dive into code!  My machine was finally all set up, so I made my first pull requests in the codebase.  I also got to play some Super Smash Brothers, watch a pushup contest (I politely declined participating when the first person did over 50 of them), join a book club, learn how to use the 3D printer, and try out some of the great office snacks.  Not bad for a Friday.
So, the first week is up!  L4 has made a great first impression on me.  I'm so excited to be a part of a creative, exciting group of people.  Everyone has such a diverse set of interests, and they really emphasize celebrating those here.  I know I made the right choice joining a team like L4, and I'm eagerly anticipating Monday! So, the first week is up!  L4 has made a great first impression on me.  I'm so excited to be a part of a creative, exciting group of people.  Everyone has such a diverse set of interests, and they really emphasize celebrating those here.  I know I made the right choice joining a team like L4, and I'm eagerly anticipating Monday!

2
src/posts/making-the-whitney-api.md
View File

@@ -13,7 +13,7 @@ Anyway, I took a nap the other day and I dreamt that I made a Whitney Houston AP
But, I had never made an API from scratch before. [I had nothing](https://www.youtube.com/watch?v=FxYw0XPEoKE). But I had to try. But, I had never made an API from scratch before. [I had nothing](https://www.youtube.com/watch?v=FxYw0XPEoKE). But I had to try.
First, I had to get all of the songs she ever recorded. Wikipedia came to save the day. I scraped [the article of all of her songs](https://en.wikipedia.org/wiki/List_of_songs_recorded_by_Whitney_Houston) with a Python script, and then got to work on parsing it. Let me tell you, it was not fun. The HTML in Wikipedia tables is a pain in the BUTT to deal with. Sure, I *could* do it, but I wouldn't wish that mess on anyone. So, I said to myself, [it's not right, but it's okay](https://www.youtube.com/watch?v=6J538b-OLRU), I'll get through this. First, I had to get all of the songs she ever recorded. Wikipedia came to save the day. I scraped [the article of all of her songs](https://en.wikipedia.org/wiki/List_of_songs_recorded_by_Whitney_Houston) with a Python script, and then got to work on parsing it. Let me tell you, it was not fun. The HTML in Wikipedia tables is a pain in the BUTT to deal with. Sure, I _could_ do it, but I wouldn't wish that mess on anyone. So, I said to myself, [it's not right, but it's okay](https://www.youtube.com/watch?v=6J538b-OLRU), I'll get through this.
Once I filtered out a lot of crap (like stripping out the links and the special characters) and broke it down into something readable, it looked more like this: Once I filtered out a lot of crap (like stripping out the links and the special characters) and broke it down into something readable, it looked more like this:
``` ```

1
src/posts/my-last-days-at-isu.md
View File

@@ -22,7 +22,6 @@ I got an email from a high school student in New Jersey later. I had hung out w
> Thanks, > Thanks,
> Glenn > Glenn
I'm so happy that Glenn made this decision. He and his mom were so nice, and I think he's a very motivated young guy. He's going to be really successful someday. I'm so happy that Glenn made this decision. He and his mom were so nice, and I think he's a very motivated young guy. He's going to be really successful someday.
Right before our final CSE Club meeting (for those of you who don't know by the way, it's the Computer Science and Software Engineering Club), I got an awesome email from one of our club members. Right before our final CSE Club meeting (for those of you who don't know by the way, it's the Computer Science and Software Engineering Club), I got an awesome email from one of our club members.

4
src/posts/my-talk-at-tedxdesmoines.md
View File

@@ -23,15 +23,19 @@ And, you know I like feedback! I'm so happy about some of the comments and disc
> "I particularly enjoyed this presentation. For some silly reason, many of the Math, Science and Engineering academic folks do not embrace Computer Science as a core element of STEM. In reality, Computer Science is the cortex of STEM. This young woman encorages everyone to have a passion, explore, network and have fun! > "I particularly enjoyed this presentation. For some silly reason, many of the Math, Science and Engineering academic folks do not embrace Computer Science as a core element of STEM. In reality, Computer Science is the cortex of STEM. This young woman encorages everyone to have a passion, explore, network and have fun!
> She is combining her avocation with her vocation! I applaud her.. clap clap clap." > She is combining her avocation with her vocation! I applaud her.. clap clap clap."
>
> - Arta Szathmary > - Arta Szathmary
> "I believe that Cassidy is a perfect STEM model for women and humankind." > "I believe that Cassidy is a perfect STEM model for women and humankind."
>
> - Chris Pirillo > - Chris Pirillo
> "Cassidy will change the world, I am honored to know and work with her! Please show this video to all your daughters!" > "Cassidy will change the world, I am honored to know and work with her! Please show this video to all your daughters!"
>
> - Rane Johnson-Stempson > - Rane Johnson-Stempson
> "Wonderful speech and thank you for being such an inspiration for young women everywhere! I can only hope that the doors you are working to open are there for my daughter when she gets older. Keep up the great work and keep inspiring everyone! <3" > "Wonderful speech and thank you for being such an inspiration for young women everywhere! I can only hope that the doors you are working to open are there for my daughter when she gets older. Keep up the great work and keep inspiring everyone! <3"
>
> - Dee Sunday > - Dee Sunday
I don't know if any of those people will read this post, but I hope they know how much I appreciated their thoughts! I don't know if any of those people will read this post, but I hope they know how much I appreciated their thoughts!

10
src/posts/picking-my-brain.md
View File

@@ -16,7 +16,7 @@ just a one-off, it's a constant stream of requests.
I've slowly gotten better at handling them, I use [Assistant.to](http://www.assistant.to/) I've slowly gotten better at handling them, I use [Assistant.to](http://www.assistant.to/)
to schedule things and try to only meet with people a max of twice a week, but to schedule things and try to only meet with people a max of twice a week, but
that's created *quite* the backlog. that's created _quite_ the backlog.
So, this is a post for you, the meeting requester, and for the benefit of you So, this is a post for you, the meeting requester, and for the benefit of you
and myself/anyone busy to whom you might be reaching out. This is how to ask a and myself/anyone busy to whom you might be reaching out. This is how to ask a
@@ -32,7 +32,7 @@ I don't know what you mean.
You could want to literally pick pieces of their brain out for all I know. Not You could want to literally pick pieces of their brain out for all I know. Not
to be dramatic. But you didn't specify. to be dramatic. But you didn't specify.
Make sure you say *how* you met the person you're contacting, and why you're Make sure you say _how_ you met the person you're contacting, and why you're
contacting them. Simple stuff. Big impact. contacting them. Simple stuff. Big impact.
### 2. Be flexible. ### 2. Be flexible.
@@ -65,9 +65,9 @@ give relevant, efficient information and advice!
### That's it. ### That's it.
A *much* better email is something like, "hey, I'm interested in how you got to A _much_ better email is something like, "hey, I'm interested in how you got to
where you are today. I'm a ________ at ________, I met you at/read about you in where you are today. I'm a **\_\_\_\_** at **\_\_\_\_**, I met you at/read about you in
________ and I just have a few questions about what classes I should take/which **\_\_\_\_** and I just have a few questions about what classes I should take/which
role I should follow/how I should format my resume. Could we meet for coffee? role I should follow/how I should format my resume. Could we meet for coffee?
My treat! I'm pretty free over the next few weeks, Tuesdays and Thursdays are My treat! I'm pretty free over the next few weeks, Tuesdays and Thursdays are
best! I know you're a busy bee, so I can work around your schedule. best! I know you're a busy bee, so I can work around your schedule.

2
src/posts/subconscious-learning.md
View File

@@ -30,7 +30,7 @@ which are released in response to stress. The switches are controlled by the
[amygdala](http://en.wikipedia.org/wiki/Amygdala), the part of the brain that's [amygdala](http://en.wikipedia.org/wiki/Amygdala), the part of the brain that's
responsible for both memory and emotional reactions. There's a really responsible for both memory and emotional reactions. There's a really
interesting study by Schwabe, Tegenthoff, and Hoffken that talks about this. You interesting study by Schwabe, Tegenthoff, and Hoffken that talks about this. You
can read it [here](http://www.biologicalpsychiatryjournal.com/article/S0006-3223(13)00513-1/abstract). can read it [here](<http://www.biologicalpsychiatryjournal.com/article/S0006-3223(13)00513-1/abstract>).
So, it turns out that when I said that I "operate well under stress" in college, So, it turns out that when I said that I "operate well under stress" in college,
I wasn't actually making that up! I wasn't actually making that up!

5
src/posts/the-history-of-the-png.md
View File

@@ -7,7 +7,6 @@ added: "Jun 15 2015"
tags: [technical] tags: [technical]
--- ---
I remember clear as day several years ago (2007 to be more exact) when transparent PNGs (Portable Network Graphics) became a reality. I was pretty young, at 15 years old, and I was checking out this web design/development forum I regularly looked at for help as I was teaching myself to code. I remember clear as day several years ago (2007 to be more exact) when transparent PNGs (Portable Network Graphics) became a reality. I was pretty young, at 15 years old, and I was checking out this web design/development forum I regularly looked at for help as I was teaching myself to code.
I logged on, and the site was UGLY. I was so confused. They had pictures of what could have been beautiful icons and graphics, but they all just had these horrible off-color borders and backgrounds. I logged on, and the site was UGLY. I was so confused. They had pictures of what could have been beautiful icons and graphics, but they all just had these horrible off-color borders and backgrounds.
@@ -22,7 +21,7 @@ img {
} }
``` ```
But, back then, there was no `filter` property in CSS. It was a totally proprietary extension by Microsoft that only worked in IE. And there were *so* many bugs with it back then, it was beautiful. If you used a PNG background image, links wouldn't often be clickable, and forms might have become unfocusable. It was slow to load. Background images couldn't be positioned nor repeated. Ah, the past. So broken. So delightful. But, back then, there was no `filter` property in CSS. It was a totally proprietary extension by Microsoft that only worked in IE. And there were _so_ many bugs with it back then, it was beautiful. If you used a PNG background image, links wouldn't often be clickable, and forms might have become unfocusable. It was slow to load. Background images couldn't be positioned nor repeated. Ah, the past. So broken. So delightful.
The PNG was first specified in October of 1996, and became an official international standard in November of 2003. There was a [period of time though when it wasn't so popular](http://www.libpng.org/pub/png/slashpng-1999.html). The PNG was first specified in October of 1996, and became an official international standard in November of 2003. There was a [period of time though when it wasn't so popular](http://www.libpng.org/pub/png/slashpng-1999.html).
Fast forward to now, and the PNG is the most used lossless image compression format on the internet. It was originally created to be a replacement of the GIF, but alas, you can't replace this: Fast forward to now, and the PNG is the most used lossless image compression format on the internet. It was originally created to be a replacement of the GIF, but alas, you can't replace this:
@@ -34,6 +33,6 @@ PNG was decided early on to be a single-image format. The developers of PNG tri
Outside of animation, though, the PNG excels relative to the GIF. A PNG file with the same information as a GIF is almost always smaller, by as much as 50%. Dang, son. Outside of animation, though, the PNG excels relative to the GIF. A PNG file with the same information as a GIF is almost always smaller, by as much as 50%. Dang, son.
The PNG today is great. The PNG today is great.
It supports grayscale, transparency, palette-based images, non-palette-based RGB[A] images, *and* it's lossless. There's [whole books](http://www.libpng.org/pub/png/book/cover.html) dedicated to how revolutionary it was back in the day. It supports grayscale, transparency, palette-based images, non-palette-based RGB[A] images, _and_ it's lossless. There's [whole books](http://www.libpng.org/pub/png/book/cover.html) dedicated to how revolutionary it was back in the day.
So take some time, [read up about it](https://en.wikipedia.org/wiki/Portable_Network_Graphics), and appreciate history, darn it. So take some time, [read up about it](https://en.wikipedia.org/wiki/Portable_Network_Graphics), and appreciate history, darn it.

12
src/posts/the-laptop-you-need-for-college.md
View File

@@ -23,27 +23,29 @@ By the middle of my junior year, I was using a different laptop, that was actual
So, moral of the story, don’t spend too much on the best, state-of-the-art laptop you can when you go to college. Every single one of my friends is on a different machine than the one they started with. So, moral of the story, don’t spend too much on the best, state-of-the-art laptop you can when you go to college. Every single one of my friends is on a different machine than the one they started with.
##So, what laptop SHOULD you buy? ## So, what laptop SHOULD you buy?
Well, that depends on what you want to do, and what you like! Well, that depends on what you want to do, and what you like!
I’ll give you some general guidelines that should help you. I won’t tell you straight up which laptop would be perfect for you, because everyone’s different (this is like Harry Potter getting a wand, oh boy oh boy), but these ideas should help you out. I’ll give you some general guidelines that should help you. I won’t tell you straight up which laptop would be perfect for you, because everyone’s different (this is like Harry Potter getting a wand, oh boy oh boy), but these ideas should help you out.
*Disclaimer:* I’m biased. _Disclaimer:_ I’m biased.
Also I’m going to talk about computers that aren’t as expensive, which means I probably won’t mention Macs much. But hey, Macs are good computers. They just cost an arm and a leg. Also I’m going to talk about computers that aren’t as expensive, which means I probably won’t mention Macs much. But hey, Macs are good computers. They just cost an arm and a leg.
### For non-technical majors: ### For non-technical majors:
I’m looking at you, you lovely people who write a lot of papers and proposals for your business classes and your education classes and your sociology classes. Hi. You could probably get away with something not too powerful, but still easy to use and efficient. A Chromebook might be good, if you’re okay with using something like GoogleDocs for all of your files. A Microsoft Surface might also be an awesome solution for you, because it’s lightweight and still has all of Microsoft Office and other cool applications. If you want a more traditional laptop with Windows on it, I recommend the Lenovo ThinkPad E Series and L Series, as well as the Toshiba Satellite laptops. From what I’ve seen, those computers are super functional and fast for what you need, and won’t destroy your budget. I’m looking at you, you lovely people who write a lot of papers and proposals for your business classes and your education classes and your sociology classes. Hi. You could probably get away with something not too powerful, but still easy to use and efficient. A Chromebook might be good, if you’re okay with using something like GoogleDocs for all of your files. A Microsoft Surface might also be an awesome solution for you, because it’s lightweight and still has all of Microsoft Office and other cool applications. If you want a more traditional laptop with Windows on it, I recommend the Lenovo ThinkPad E Series and L Series, as well as the Toshiba Satellite laptops. From what I’ve seen, those computers are super functional and fast for what you need, and won’t destroy your budget.
### For engineers, 3D-modelers, and drafters: ### For engineers, 3D-modelers, and drafters:
Hey, CAD-users. You’re going to need something with some pretty solid graphics and memory to handle all the things you’re making. You should have at least a 2.8 GHz CPU/Processor Speed for an i3 processor, or 1.8 GHz for an i5 or i7 processor, a 500 GB Hard-disk drive, and 4-6 GB RAM. I don’t think you’ll need as high as an i7 processor, but that’s just speaking from experience. You might be making something that is greater than I could ever imagine. Anyway, the machines that might just rock your boat are the HP Envy laptops, Asus K-Series laptops, and the Lenovo T Series laptops. These are some pretty powerful machines that’ll get the job done. Hey, CAD-users. You’re going to need something with some pretty solid graphics and memory to handle all the things you’re making. You should have at least a 2.8 GHz CPU/Processor Speed for an i3 processor, or 1.8 GHz for an i5 or i7 processor, a 500 GB Hard-disk drive, and 4-6 GB RAM. I don’t think you’ll need as high as an i7 processor, but that’s just speaking from experience. You might be making something that is greater than I could ever imagine. Anyway, the machines that might just rock your boat are the HP Envy laptops, Asus K-Series laptops, and the Lenovo T Series laptops. These are some pretty powerful machines that’ll get the job done.
*For design majors:* Hey, artsy fartsy. For you, I’m going to recommend a Mac. The entire Design college at my school uses Macs. They will want you to have a Mac, even if you’ve already bought a PC. So, get one. Sorry there’s not much of an option here. But hey, it makes your choice easy. If you do get a PC, get one with a really good graphics card. _For design majors:_ Hey, artsy fartsy. For you, I’m going to recommend a Mac. The entire Design college at my school uses Macs. They will want you to have a Mac, even if you’ve already bought a PC. So, get one. Sorry there’s not much of an option here. But hey, it makes your choice easy. If you do get a PC, get one with a really good graphics card.
###For programmers and scientific majors: ### For programmers and scientific majors:
Haaaayyyy hollerrrr. I’m one of you. For you, you will need the extra RAM, at least 6-8GB, I’d say. You’re going to be sticking a lot of data on your computer. I’d also go with an i5 processor. You won’t be using THAT much power, unless you’re doing some extreme OpenGL programming (which if you are, you’re brave, and should look at the engineering bullet above). I recommend an ultrabook for you. It’ll give you the power and portability you need. I have an i5 Samsung ultrabook, and I really like it. Lenovo has some sexy ultrabooks too. If you’re in the field more often (like for biological, animal, or agricultural sciences), I recommend something more like a Toshiba. They’re really hardcore and can take a hit if you bring it outside. Haaaayyyy hollerrrr. I’m one of you. For you, you will need the extra RAM, at least 6-8GB, I’d say. You’re going to be sticking a lot of data on your computer. I’d also go with an i5 processor. You won’t be using THAT much power, unless you’re doing some extreme OpenGL programming (which if you are, you’re brave, and should look at the engineering bullet above). I recommend an ultrabook for you. It’ll give you the power and portability you need. I have an i5 Samsung ultrabook, and I really like it. Lenovo has some sexy ultrabooks too. If you’re in the field more often (like for biological, animal, or agricultural sciences), I recommend something more like a Toshiba. They’re really hardcore and can take a hit if you bring it outside.
Boom. Boom.
So, there you have it. Now, you might disagree with my laptop opinions here. Again, everyone’s different. But, these guidelines should give you a general idea of what could be best for you. And again, don’t drop too much cash on a computer. Technology is moving fast, and you might end up getting a new one before you even graduate. So, there you have it. Now, you might disagree with my laptop opinions here. Again, everyone’s different. But, these guidelines should give you a general idea of what could be best for you. And again, don’t drop too much cash on a computer. Technology is moving fast, and you might end up getting a new one before you even graduate.
##Good luck! ## Good luck!