diff --git a/.gitignore b/.gitignore
index 3c3629e..d763b2d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,3 @@
node_modules
+npm-debug.log*
+package-lock.json
\ No newline at end of file
diff --git a/README.md b/README.md
index db7a5dc..bee0d8d 100644
--- a/README.md
+++ b/README.md
@@ -6,3 +6,70 @@ All the code examples for the youtube series
## Ideas?
If you have any screencast you'd like to see or suggestions, please
[open an issue here](https://github.com/shama/letswritecode/issues). Thanks!
+
+## Dev Setup
+Throughout these videos I typically use the same development environment. This
+is a guide through that development setup.
+
+### Dependencies
+Rather than copying / pasting script tags into my HTML for 3rd party code, I use
+[npm](https://www.npmjs.com/). The `npm` command comes with Node.js. When I run
+`npm install jquery`, it downloads the 3rd party files into the `node_modules/jquery/`
+folder.
+
+The `package.json` file can hold those dependencies and versions, so the next
+time you want to install those files, run `npm install` in the same folder.
+
+### Build Tool
+[Browserify](http://browserify.org/) is a tool that reads your JavaScript source
+files and files you've installed with `npm`. Then outputs those files loaded in
+the correct order to a single bundled file.
+
+You can install the `browserify` command on your machine with: `npm install browserify -g`.
+
+To create a bundled file, run `browserify index.js -o bundle.js`, where `index.js`
+is the entry point to all your scripts.
+
+In your `index.js` file, you can include other files with `require('./other.js')`
+or a 3rd party file installed with `npm` by doing `require('jquery')`.
+
+Once you have generated this `bundle.js` file, you can add a single script tag in
+your HTML: `` and host those assets like any
+other HTML, JavaScript and CSS files.
+
+### Dev Server
+While rapidly developing, running the `browserify` command every time you make
+a change in the code can get tedious. Also having to FTP, git push or some other
+method to deploy the code to a server can slow your development down.
+
+I use a tool called [budo](https://www.npmjs.com/package/budo) which runs a server
+locally on your machine (`http://localhost:9966`) and automatically bundles your
+code with Browserify as you refresh the page or live as you make changes if you
+have the `--live` option on.
+
+Install the `budo` command with: `npm install budo` and run the server with:
+`budo index.js`. Now you can rapidly develop the code by viewing `localhost:9966`.
+
+For convenience, I add the `budo` command to the `scripts` section of my
+`package.json`:
+
+```json
+{
+ "scripts": {
+ "start": "budo index.js:bundle.js"
+ }
+}
+```
+
+Now I only need to run `npm start` to start developing code.
+
+### Deployment
+After you're done developing the code, run `browserify index.js -o bundle.js` to
+create your JavaScript bundle. Add the script tag to your HTML:
+`` to load that JavaScript file.
+
+Then upload those files to your remote server. Either via FTP/SFTP,
+[`git` deploying](https://www.youtube.com/watch?v=9qIK8ZC9BnU),
+[heroku](https://devcenter.heroku.com/categories/deployment),
+[firebase](https://firebase.google.com/docs/hosting/deploying) or whatever method
+you normally use to deploy your website.
diff --git a/ajax-requests/package.json b/ajax-requests/package.json
index 13656ce..ed9637e 100644
--- a/ajax-requests/package.json
+++ b/ajax-requests/package.json
@@ -12,6 +12,6 @@
"nets": "^3.1.0"
},
"devDependencies": {
- "budo": "^4.1.0"
+ "budo": "^11.2.0"
}
}
diff --git a/debugging-javascript/package.json b/debugging-javascript/package.json
index f6a635b..bfed94b 100644
--- a/debugging-javascript/package.json
+++ b/debugging-javascript/package.json
@@ -12,6 +12,6 @@
"nets": "^3.2.0"
},
"devDependencies": {
- "budo": "^5.1.5"
+ "budo": "^11.2.0"
}
}
diff --git a/dom-event-listeners/README.md b/dom-event-listeners/README.md
new file mode 100644
index 0000000..789b957
--- /dev/null
+++ b/dom-event-listeners/README.md
@@ -0,0 +1,10 @@
+# DOM Event Listeners
+
+> [https://youtu.be/ocXVINp-5oU](https://youtu.be/ocXVINp-5oU)
+
+Install [Node.js](https://nodejs.org/en/).
+
+Within this folder run the terminal command `npm install` to install the
+`dependencies`.
+
+Then run `npm start` to start up a development server on `http://localhost:9966`
diff --git a/dom-event-listeners/index.js b/dom-event-listeners/index.js
new file mode 100644
index 0000000..9155c39
--- /dev/null
+++ b/dom-event-listeners/index.js
@@ -0,0 +1,31 @@
+const bear = document.createElement('button')
+bear.textContent = 'growl'
+
+// bear.addEventListener('click', function onclick (e) {
+// console.log(e.target)
+// }, false)
+
+
+const forest = document.createElement('div')
+for (var i = 0; i < 100; i++) {
+ const bear = document.createElement('button')
+ bear.textContent = 'click ' + i
+ forest.appendChild(bear)
+}
+document.body.appendChild(forest)
+
+forest.addEventListener('click', function (e) {
+ console.log(e.currentTarget)
+}, false)
+
+document.addEventListener('click', function (e) {
+ console.log(e.target)
+}, false)
+
+const cat = document.createElement('button')
+cat.textContent = 'meow'
+forest.appendChild(cat)
+cat.addEventListener('click', function (e) {
+ e.stopPropagation()
+ console.log('mew')
+}, false)
\ No newline at end of file
diff --git a/dom-event-listeners/package.json b/dom-event-listeners/package.json
new file mode 100644
index 0000000..33a8962
--- /dev/null
+++ b/dom-event-listeners/package.json
@@ -0,0 +1,15 @@
+{
+ "name": "dom-event-listeners",
+ "version": "0.1.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "start": "budo index.js --live",
+ "test": "node test.js"
+ },
+ "author": "Kyle Robinson Young (http://dontkry.com)",
+ "license": "MIT",
+ "devDependencies": {
+ "budo": "^11.2.0"
+ }
+}
diff --git a/drawing-animating-svgs/README.md b/drawing-animating-svgs/README.md
new file mode 100644
index 0000000..577e553
--- /dev/null
+++ b/drawing-animating-svgs/README.md
@@ -0,0 +1,10 @@
+# Drawing & Animating SVGs
+
+> [https://www.youtube.com/watch?v=Nnnx9ytFqK4](https://www.youtube.com/watch?v=Nnnx9ytFqK4)
+
+Install [Node.js](https://nodejs.org/).
+
+Within this folder run the terminal command `npm install` to install the
+`dependencies` and `devDependencies`.
+
+Then run `npm start` to run the app viewable on `http://localhost:9966`.
diff --git a/drawing-animating-svgs/index.html b/drawing-animating-svgs/index.html
new file mode 100644
index 0000000..12cd9d8
--- /dev/null
+++ b/drawing-animating-svgs/index.html
@@ -0,0 +1,53 @@
+
+
+
+
+ Obligatory Bear Inclusion
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/drawing-animating-svgs/index.js b/drawing-animating-svgs/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/drawing-animating-svgs/package.json b/drawing-animating-svgs/package.json
new file mode 100644
index 0000000..105a321
--- /dev/null
+++ b/drawing-animating-svgs/package.json
@@ -0,0 +1,15 @@
+{
+ "name": "drawing-animating-svgs",
+ "version": "0.1.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "start": "budo index.js --live",
+ "test": "node test.js"
+ },
+ "author": "Kyle Robinson Young (http://dontkry.com)",
+ "license": "MIT",
+ "devDependencies": {
+ "budo": "^11.2.0"
+ }
+}
diff --git a/easier-webgl-shaders-stackgl/README.md b/easier-webgl-shaders-stackgl/README.md
new file mode 100644
index 0000000..33caf49
--- /dev/null
+++ b/easier-webgl-shaders-stackgl/README.md
@@ -0,0 +1,10 @@
+# Easier WebGL and Shaders with stack.gl
+
+> [https://www.youtube.com/watch?v=Qsku8RfB-pM](https://www.youtube.com/watch?v=Qsku8RfB-pM)
+
+Install [Node.js](https://nodejs.org/).
+
+Within this folder run the terminal command `npm install` to install the
+`dependencies` and `devDependencies`.
+
+Then run `npm start` to run the app viewable on `http://localhost:9966`.
diff --git a/easier-webgl-shaders-stackgl/index.js b/easier-webgl-shaders-stackgl/index.js
new file mode 100644
index 0000000..656949b
--- /dev/null
+++ b/easier-webgl-shaders-stackgl/index.js
@@ -0,0 +1,48 @@
+const shell = require('gl-now')()
+const createShader = require('gl-shader')
+const createBuffer = require('gl-buffer')
+const mat4 = require('gl-mat4')
+
+let shader, buffer
+shell.on('gl-init', function () {
+ const gl = shell.gl
+ shader = createShader(gl, `
+ uniform mat4 model;
+ uniform mat4 camera;
+ attribute vec3 position;
+ void main() {
+ gl_Position = camera * model * vec4(position, 1.0);
+ }
+ `, `
+ void main() {
+ gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
+ }
+ `)
+ buffer = createBuffer(gl, [
+ 0.0, 0.5, 0.0,
+ -0.5, -0.5, 0.0,
+ 0.5, -0.5, 0.0,
+ ])
+})
+
+shell.on('gl-render', function () {
+ const gl = shell.gl
+ shader.bind()
+ buffer.bind()
+
+ const camera = mat4.create()
+ mat4.perspective(camera, 45 * Math.PI / 180, shell.width / shell.height, 0.1, 1000.0)
+ mat4.translate(camera, camera, [0, 0, -2])
+ shader.uniforms.camera = camera
+
+ const model = mat4.create()
+ mat4.translate(model, model, [-.3, 0, 0])
+ //mat4.rotate(model, model, 45, [0, 0, 1])
+ mat4.scale(model, model, [.5, .5, 1])
+ shader.uniforms.model = model
+ shader.attributes.position.pointer()
+ gl.drawArrays(gl.TRIANGLES, 0, 3)
+})
+
+
+
diff --git a/easier-webgl-shaders-stackgl/package.json b/easier-webgl-shaders-stackgl/package.json
new file mode 100644
index 0000000..3bb131a
--- /dev/null
+++ b/easier-webgl-shaders-stackgl/package.json
@@ -0,0 +1,20 @@
+{
+ "name": "easier-webgl-shaders-stackgl",
+ "version": "0.1.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "start": "budo index.js --live"
+ },
+ "author": "Kyle Robinson Young (http://dontkry.com)",
+ "license": "MIT",
+ "devDependencies": {
+ "budo": "^11.2.0"
+ },
+ "dependencies": {
+ "gl-buffer": "^2.1.2",
+ "gl-mat4": "^1.2.0",
+ "gl-now": "^1.4.0",
+ "gl-shader": "^4.2.1"
+ }
+}
diff --git a/electron-webpack-vuejs/.gitignore b/electron-webpack-vuejs/.gitignore
new file mode 100644
index 0000000..0841ed3
--- /dev/null
+++ b/electron-webpack-vuejs/.gitignore
@@ -0,0 +1,3 @@
+dist
+node_modules
+package-lock.json
\ No newline at end of file
diff --git a/electron-webpack-vuejs/README.md b/electron-webpack-vuejs/README.md
new file mode 100644
index 0000000..e5b86ce
--- /dev/null
+++ b/electron-webpack-vuejs/README.md
@@ -0,0 +1,10 @@
+# Electron with webpack and Vue.js
+
+> [https://youtu.be/oL7vIDkDOsg](https://youtu.be/oL7vIDkDOsg)
+
+Install [Node.js](https://nodejs.org/).
+
+Within this folder run the terminal command `npm install` to install the
+`dependencies` and `devDependencies`.
+
+Then run `npm start` to run the app.
diff --git a/electron-webpack-vuejs/package.json b/electron-webpack-vuejs/package.json
new file mode 100644
index 0000000..cd652ea
--- /dev/null
+++ b/electron-webpack-vuejs/package.json
@@ -0,0 +1,24 @@
+{
+ "name": "electron-webpack-vuejs",
+ "version": "0.1.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "start": "electron-webpack dev",
+ "build": "electron-webpack && electron-builder -c.mac.identity=null"
+ },
+ "author": "Kyle Robinson Young (http://dontkry.com)",
+ "license": "MIT",
+ "devDependencies": {
+ "electron": "^2.0.2",
+ "electron-builder": "^20.15.1",
+ "electron-webpack": "^2.1.2",
+ "vue": "^2.5.16",
+ "vue-loader": "^15.2.2",
+ "vue-template-compiler": "^2.5.16",
+ "webpack": "^4.9.1"
+ },
+ "dependencies": {
+ "source-map-support": "^0.5.6"
+ }
+}
diff --git a/electron-webpack-vuejs/src/index.html b/electron-webpack-vuejs/src/index.html
new file mode 100644
index 0000000..b438956
--- /dev/null
+++ b/electron-webpack-vuejs/src/index.html
@@ -0,0 +1,18 @@
+
+
+
+ <%= process.env.npm_package_productName %>
+
+
+
+
+
+
+
diff --git a/electron-webpack-vuejs/src/main/index.js b/electron-webpack-vuejs/src/main/index.js
new file mode 100644
index 0000000..acd13a1
--- /dev/null
+++ b/electron-webpack-vuejs/src/main/index.js
@@ -0,0 +1,32 @@
+import { app, BrowserWindow } from 'electron'
+import path from 'path'
+import { format as formatUrl } from 'url'
+
+const isDevelopment = process.env.NODE_ENV !== 'production'
+
+app.on('ready', () => {
+ let window = new BrowserWindow({
+ width: 1024,
+ webPreferences: {
+ nodeIntegration: true
+ }
+ })
+ if (isDevelopment) {
+ window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`)
+ } else {
+ window.loadURL(formatUrl({
+ pathname: path.join(__dirname, 'index.html'),
+ protocol: 'file',
+ slashes: true
+ }))
+ }
+ window.on("closed", () => {
+ window = null;
+ })
+})
+
+app.on("window-all-closed", () => {
+ if (process.platform !== "darwin") {
+ app.quit();
+ }
+})
\ No newline at end of file
diff --git a/electron-webpack-vuejs/src/renderer/App.vue b/electron-webpack-vuejs/src/renderer/App.vue
new file mode 100644
index 0000000..49f4ae4
--- /dev/null
+++ b/electron-webpack-vuejs/src/renderer/App.vue
@@ -0,0 +1,13 @@
+
+
{{name}}
+
+
+
\ No newline at end of file
diff --git a/electron-webpack-vuejs/src/renderer/index.js b/electron-webpack-vuejs/src/renderer/index.js
new file mode 100644
index 0000000..734a3c1
--- /dev/null
+++ b/electron-webpack-vuejs/src/renderer/index.js
@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+new Vue({
+ el: '#app',
+ render(h) {
+ return h(App)
+ }
+})
\ No newline at end of file
diff --git a/electron-webpack-vuejs/webpack.config.js b/electron-webpack-vuejs/webpack.config.js
new file mode 100644
index 0000000..f9d3d0e
--- /dev/null
+++ b/electron-webpack-vuejs/webpack.config.js
@@ -0,0 +1,14 @@
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+module.exports = {
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ use: 'vue-loader'
+ }
+ ]
+ },
+ plugins: [
+ new VueLoaderPlugin()
+ ]
+}
\ No newline at end of file
diff --git a/getting-started-with-browserify/package.json b/getting-started-with-browserify/package.json
index cf9744f..4437839 100644
--- a/getting-started-with-browserify/package.json
+++ b/getting-started-with-browserify/package.json
@@ -10,10 +10,10 @@
"author": "Kyle Robinson Young (http://dontkry.com)",
"license": "MIT",
"devDependencies": {
- "browserify": "^9.0.8",
+ "browserify": "^16.1.1",
"watchify": "^3.1.1"
},
"dependencies": {
- "jquery": "^2.1.3"
+ "jquery": "^3.3.1"
}
}
diff --git a/getting-started-with-electron-1.0/README.md b/getting-started-with-electron-1.0/README.md
new file mode 100644
index 0000000..ea8ff42
--- /dev/null
+++ b/getting-started-with-electron-1.0/README.md
@@ -0,0 +1,7 @@
+# Getting Started with Electron 1.x
+
+> [https://youtu.be/jKzBJAowmGg](https://youtu.be/jKzBJAowmGg)
+
+* Install [Node.js](https://nodejs.org/).
+* Install dependencies: `npm install`
+* Then run `npm start` to open the desktop application.
diff --git a/getting-started-with-electron-1.0/bear.html b/getting-started-with-electron-1.0/bear.html
new file mode 100644
index 0000000..6d8cc10
--- /dev/null
+++ b/getting-started-with-electron-1.0/bear.html
@@ -0,0 +1,10 @@
+
+
+
+
+ Document
+
+
+ I'm bear a html file!
+
+
\ No newline at end of file
diff --git a/getting-started-with-electron-1.0/index.html b/getting-started-with-electron-1.0/index.html
new file mode 100644
index 0000000..2880bc8
--- /dev/null
+++ b/getting-started-with-electron-1.0/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+ Document
+
+
+
Grrr!
+
+
+
\ No newline at end of file
diff --git a/getting-started-with-electron-1.0/index.js b/getting-started-with-electron-1.0/index.js
new file mode 100644
index 0000000..6ec8439
--- /dev/null
+++ b/getting-started-with-electron-1.0/index.js
@@ -0,0 +1,10 @@
+
+const remote = require('electron').remote
+const main = remote.require('./main.js')
+
+var button = document.createElement('button')
+button.textContent = 'Open Window'
+button.addEventListener('click', () => {
+ main.openWindow()
+}, false)
+document.body.appendChild(button)
diff --git a/getting-started-with-electron-1.0/main.js b/getting-started-with-electron-1.0/main.js
new file mode 100644
index 0000000..50bf629
--- /dev/null
+++ b/getting-started-with-electron-1.0/main.js
@@ -0,0 +1,13 @@
+const electron = require('electron')
+const {app, BrowserWindow} = electron
+
+app.on('ready', () => {
+ let win = new BrowserWindow({width:800, height: 600})
+ win.loadURL(`file://${__dirname}/index.html`)
+ win.webContents.openDevTools()
+})
+
+exports.openWindow = () => {
+ let win = new BrowserWindow({width:400, height: 200})
+ win.loadURL(`file://${__dirname}/bear.html`)
+}
diff --git a/getting-started-with-electron-1.0/package.json b/getting-started-with-electron-1.0/package.json
new file mode 100644
index 0000000..8b0889e
--- /dev/null
+++ b/getting-started-with-electron-1.0/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "getting-started-with-electron-1.0",
+ "version": "0.1.0",
+ "description": "",
+ "main": "main.js",
+ "scripts": {
+ "start": "electron main.js"
+ },
+ "author": "Kyle Robinson Young (http://dontkry.com)",
+ "license": "MIT",
+ "devDependencies": {
+ "electron-prebuilt": "^1.2.5"
+ }
+}
diff --git a/getting-started-with-vuejs/App.vue b/getting-started-with-vuejs/App.vue
new file mode 100644
index 0000000..6054544
--- /dev/null
+++ b/getting-started-with-vuejs/App.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/getting-started-with-vuejs/BearList.vue b/getting-started-with-vuejs/BearList.vue
new file mode 100644
index 0000000..55bf739
--- /dev/null
+++ b/getting-started-with-vuejs/BearList.vue
@@ -0,0 +1,19 @@
+
+
+
+ {{bear}}
+
+
+
+
+
\ No newline at end of file
diff --git a/getting-started-with-vuejs/README.md b/getting-started-with-vuejs/README.md
new file mode 100644
index 0000000..6bf2a66
--- /dev/null
+++ b/getting-started-with-vuejs/README.md
@@ -0,0 +1,10 @@
+# Getting Started with Vue.js
+
+> [https://www.youtube.com/watch?v=iFqWU1dxm8U](https://www.youtube.com/watch?v=iFqWU1dxm8U)
+
+Install [Node.js](https://nodejs.org/).
+
+Within this folder run the terminal command `npm install` to install the
+`dependencies` and `devDependencies`.
+
+Then run `npm start` to run the app viewable on `http://localhost:9966`.
diff --git a/getting-started-with-vuejs/index.html b/getting-started-with-vuejs/index.html
new file mode 100644
index 0000000..e16f160
--- /dev/null
+++ b/getting-started-with-vuejs/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+ Document
+
+
+
+
+
+
\ No newline at end of file
diff --git a/getting-started-with-vuejs/index.js b/getting-started-with-vuejs/index.js
new file mode 100644
index 0000000..8e76601
--- /dev/null
+++ b/getting-started-with-vuejs/index.js
@@ -0,0 +1,8 @@
+const Vue = require('vue')
+const App = require('./App.vue')
+new Vue({
+ el: '#app',
+ render: function (h) {
+ return h(App)
+ }
+})
\ No newline at end of file
diff --git a/getting-started-with-vuejs/package.json b/getting-started-with-vuejs/package.json
new file mode 100644
index 0000000..ad018b6
--- /dev/null
+++ b/getting-started-with-vuejs/package.json
@@ -0,0 +1,22 @@
+{
+ "name": "getting-started-with-vuejs",
+ "version": "0.1.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "start": "budo index.js:bundle.js -- -t vueify",
+ "test": "node test.js"
+ },
+ "browser": {
+ "vue": "vue/dist/vue.common.js"
+ },
+ "author": "Kyle Robinson Young (http://dontkry.com)",
+ "license": "MIT",
+ "devDependencies": {
+ "budo": "^11.2.0",
+ "vueify": "^9.4.1"
+ },
+ "dependencies": {
+ "vue.js": "^0.3.2"
+ }
+}
diff --git a/getting-started-with-webpack/package.json b/getting-started-with-webpack/package.json
index 84eb5e8..4322a9f 100644
--- a/getting-started-with-webpack/package.json
+++ b/getting-started-with-webpack/package.json
@@ -8,18 +8,15 @@
"author": "Kyle Robinson Young (http://dontkry.com)",
"license": "MIT",
"devDependencies": {
- "css-loader": "^0.15.1",
- "style-loader": "^0.12.3",
- "webpack": "^1.10.1",
- "webpack-dev-server": "^1.10.1"
+ "css-loader": "^0.28.11",
+ "style-loader": "^0.20.3",
+ "webpack": "^4.2.0",
+ "webpack-cli": "^2.0.13",
+ "webpack-dev-server": "^3.1.1"
},
"dependencies": {
- "css-loader": "~0.15.1",
- "jquery": "^2.1.4",
- "node-libs-browser": "~0.5.2",
- "style-loader": "~0.12.3",
- "webpack": "~1.10.1",
- "webpack-dev-server": "~1.10.1"
+ "jquery": "^3.3.1",
+ "node-libs-browser": "^2.1.0"
},
"description": ""
}
diff --git a/getting-started-with-webpack/webpack.config.js b/getting-started-with-webpack/webpack.config.js
index 6b1ee5c..e0ce9c5 100644
--- a/getting-started-with-webpack/webpack.config.js
+++ b/getting-started-with-webpack/webpack.config.js
@@ -4,9 +4,16 @@ module.exports = {
path: __dirname,
filename: 'bundle.js'
},
+ mode: 'development',
module: {
- loaders: [
- { test: /\.css$/, loader: 'style!css!' }
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
]
}
}
diff --git a/how-to-make-chrome-extensions/README.md b/how-to-make-chrome-extensions/README.md
new file mode 100644
index 0000000..fc9afa3
--- /dev/null
+++ b/how-to-make-chrome-extensions/README.md
@@ -0,0 +1,8 @@
+# How To Make Chrome Extensions
+
+> [https://youtu.be/Ipa58NVGs_c](https://youtu.be/Ipa58NVGs_c)
+
+* Go to `chrome://extensions/`
+* Enable Developer mode
+* Load unpacked and select the `bear` folder from this project.
+
diff --git a/how-to-make-chrome-extensions/bear/background.js b/how-to-make-chrome-extensions/bear/background.js
new file mode 100644
index 0000000..9373dd3
--- /dev/null
+++ b/how-to-make-chrome-extensions/bear/background.js
@@ -0,0 +1,8 @@
+window.bears = {}
+chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
+ window.bears[request.url] = request.count
+})
+
+chrome.browserAction.onClicked.addListener(function (tab) {
+ chrome.tabs.create({url: 'popup.html'})
+})
\ No newline at end of file
diff --git a/how-to-make-chrome-extensions/bear/content.js b/how-to-make-chrome-extensions/bear/content.js
new file mode 100644
index 0000000..b249bae
--- /dev/null
+++ b/how-to-make-chrome-extensions/bear/content.js
@@ -0,0 +1,14 @@
+//alert('Grrr.')
+// chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
+// const re = new RegExp('bear', 'gi')
+// const matches = document.documentElement.innerHTML.match(re)
+// sendResponse({count: matches.length})
+// })
+
+const re = new RegExp('bear', 'gi')
+const matches = document.documentElement.innerHTML.match(re) || []
+
+chrome.runtime.sendMessage({
+ url: window.location.href,
+ count: matches.length
+})
\ No newline at end of file
diff --git a/how-to-make-chrome-extensions/bear/manifest.json b/how-to-make-chrome-extensions/bear/manifest.json
new file mode 100644
index 0000000..0896d7f
--- /dev/null
+++ b/how-to-make-chrome-extensions/bear/manifest.json
@@ -0,0 +1,18 @@
+{
+ "name": "bear",
+ "version": "1.0",
+ "manifest_version": 2,
+ "content_scripts": [
+ {
+ "matches": [""],
+ "js": ["content.js"]
+ }
+ ],
+ "browser_action": {
+ "default_title": "Bear"
+ },
+ "background": {
+ "scripts": ["background.js"]
+ },
+ "permissions": ["tabs"]
+}
\ No newline at end of file
diff --git a/how-to-make-chrome-extensions/bear/popup.html b/how-to-make-chrome-extensions/bear/popup.html
new file mode 100644
index 0000000..78b4998
--- /dev/null
+++ b/how-to-make-chrome-extensions/bear/popup.html
@@ -0,0 +1,11 @@
+
+
+
+
+ Document
+
+
+
+
+
+
\ No newline at end of file
diff --git a/how-to-make-chrome-extensions/bear/popup.js b/how-to-make-chrome-extensions/bear/popup.js
new file mode 100644
index 0000000..8918f30
--- /dev/null
+++ b/how-to-make-chrome-extensions/bear/popup.js
@@ -0,0 +1,23 @@
+document.addEventListener('DOMContentLoaded', function () {
+
+ const bg = chrome.extension.getBackgroundPage()
+ Object.keys(bg.bears).forEach(function (url) {
+ const div = document.createElement('div')
+ div.textContent = `${url}: ${bg.bears[url]}`
+ document.body.appendChild(div)
+ })
+
+ // document.querySelector('button').addEventListener('click', onclick, false)
+ //
+ // function onclick () {
+ // chrome.tabs.query({currentWindow: true, active: true}, function (tabs) {
+ // chrome.tabs.sendMessage(tabs[0].id, 'hi', setCount)
+ // })
+ // }
+ //
+ // function setCount (res) {
+ // const div = document.createElement('div')
+ // div.textContent = `${res.count} bears`
+ // document.body.appendChild(div)
+ // }
+}, false)
\ No newline at end of file
diff --git a/intro-to-leveldb/package.json b/intro-to-leveldb/package.json
index e447f3c..6fb6107 100644
--- a/intro-to-leveldb/package.json
+++ b/intro-to-leveldb/package.json
@@ -13,7 +13,7 @@
"author": "Kyle Robinson Young (http://dontkry.com)",
"license": "MIT",
"devDependencies": {
- "budo": "^4.2.1"
+ "budo": "^11.2.0"
},
"dependencies": {
"level": "^1.3.0",
diff --git a/javascript-filereader/README.md b/javascript-filereader/README.md
new file mode 100644
index 0000000..f2e3785
--- /dev/null
+++ b/javascript-filereader/README.md
@@ -0,0 +1,10 @@
+# JavaScript FileReader
+
+> [https://www.youtube.com/watch?v=-AR-6X_98rM](https://www.youtube.com/watch?v=-AR-6X_98rM)
+
+Install [Node.js](https://nodejs.org/).
+
+Within this folder run the terminal command `npm install` to install the
+`dependencies` and `devDependencies`.
+
+Then run `npm start` to run the app viewable on `http://localhost:9966`.
diff --git a/javascript-filereader/bear.jpg b/javascript-filereader/bear.jpg
new file mode 100644
index 0000000..3b4a4ae
Binary files /dev/null and b/javascript-filereader/bear.jpg differ
diff --git a/javascript-filereader/bears.csv b/javascript-filereader/bears.csv
new file mode 100644
index 0000000..771bfa2
--- /dev/null
+++ b/javascript-filereader/bears.csv
@@ -0,0 +1,3 @@
+name,type
+tim,grizzly
+randy,brown
\ No newline at end of file
diff --git a/javascript-filereader/index.html b/javascript-filereader/index.html
new file mode 100644
index 0000000..1a19517
--- /dev/null
+++ b/javascript-filereader/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+ JS FileReader
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/javascript-filereader/index.js b/javascript-filereader/index.js
new file mode 100644
index 0000000..2b3ef6f
--- /dev/null
+++ b/javascript-filereader/index.js
@@ -0,0 +1,56 @@
+const input = document.querySelector('input[type="file"]')
+function handleFiles (files) {
+ console.log(files)
+ const reader = new FileReader()
+ reader.onload = function () {
+ // const lines = reader.result.split('\n').map(function (line) {
+ // return line.split(',')
+ // })
+ // console.log(lines)
+ const img = new Image()
+ img.onload = function () {
+ const canvas = document.createElement('canvas')
+ const context = canvas.getContext('2d')
+ context.drawImage(img, 0, 0)
+
+ const imageData = context.getImageData(0, 0, canvas.width, canvas.height)
+ const data = imageData.data
+ for (var i = 0; i <= data.length; i += 4) {
+ const avg = (data[i] + data[i + 1] + data[i + 2]) / 3
+ data[i] = avg
+ data[i + 1] = avg
+ data[i + 2] = avg
+ }
+ context.putImageData(imageData, 0, 0)
+
+ document.body.appendChild(canvas)
+ //canvas.toDataURL()
+ //const csvfile = new Blob(['one,two,three'], { type: 'text/csv' })
+ canvas.toBlob(function (blob) {
+ const form = new FormData()
+ form.append('image', blob, 'moody.jpg')
+ const xhr = new XMLHttpRequest()
+ xhr.open('POST', '/imageupload', true)
+ xhr.send(form)
+ })
+ }
+ img.src = reader.result
+ //document.body.appendChild(img)
+ }
+ //reader.readAsText(files[0])
+ reader.readAsDataURL(files[0])
+}
+
+input.addEventListener('change', function (e) {
+ handleFiles(input.files)
+}, false)
+
+document.addEventListener('dragover', function (e) {
+ e.preventDefault()
+ e.stopPropagation()
+}, false)
+document.addEventListener('drop', function (e) {
+ e.preventDefault()
+ e.stopPropagation()
+ handleFiles(e.dataTransfer.files)
+}, false)
\ No newline at end of file
diff --git a/javascript-filereader/package.json b/javascript-filereader/package.json
new file mode 100644
index 0000000..270a1f7
--- /dev/null
+++ b/javascript-filereader/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "javascript-filereader",
+ "version": "0.1.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "start": "budo index.js:bundle.js"
+ },
+ "author": "Kyle Robinson Young (http://dontkry.com)",
+ "license": "MIT",
+ "devDependencies": {
+ "budo": "^11.2.2"
+ }
+}
diff --git a/javascript-generators/README.md b/javascript-generators/README.md
new file mode 100644
index 0000000..5a6cc1a
--- /dev/null
+++ b/javascript-generators/README.md
@@ -0,0 +1,7 @@
+# JavaScript Generators
+
+> [https://youtu.be/Zk_rX2n3Ml8](https://youtu.be/Zk_rX2n3Ml8)
+
+Install [Node.js](https://nodejs.org/).
+
+Then run `node index.js` to run the example.
diff --git a/javascript-generators/big.file b/javascript-generators/big.file
new file mode 100644
index 0000000..005f4dc
--- /dev/null
+++ b/javascript-generators/big.file
@@ -0,0 +1 @@
+This file is really big.
diff --git a/javascript-generators/index.js b/javascript-generators/index.js
new file mode 100644
index 0000000..d39d425
--- /dev/null
+++ b/javascript-generators/index.js
@@ -0,0 +1,38 @@
+// function* bears () {
+// var kind = yield 'grizzly'
+// yield kind + ' polar'
+// console.log('kind: ' + kind)
+// return 'done'
+// }
+// var bear = bears()
+// console.log(bear.next().value)
+// console.log(bear.next('ferocious').value)
+// console.log(bear.next().value)
+
+var fs = require('fs')
+
+run(function* (resume) {
+ var contents = yield fs.readFile('big.file', 'utf8', resume)
+ var uppercase = contents.toUpperCase()
+ yield fs.writeFile('uppercase.file', uppercase, resume)
+ console.log('All done!')
+})
+
+function run (generator) {
+ var data = null, yielded = false
+ var iterator = generator(function () {
+ data = arguments
+ check()
+ })
+ yielded = !!(iterator.next())
+ check()
+ function check () {
+ while (data && yielded) {
+ var err = data[0], item = data[1]
+ data = null
+ yielded = false
+ if (err) return iterator.throw(err)
+ yielded = !!(iterator.next(item))
+ }
+ }
+}
diff --git a/javascript-generators/package.json b/javascript-generators/package.json
new file mode 100644
index 0000000..f2e84d8
--- /dev/null
+++ b/javascript-generators/package.json
@@ -0,0 +1,11 @@
+{
+ "name": "generators-async-await",
+ "version": "0.1.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "start": "node index.js"
+ },
+ "author": "Kyle Robinson Young (http://dontkry.com)",
+ "license": "MIT"
+}
diff --git a/javascript-generators/uppercase.file b/javascript-generators/uppercase.file
new file mode 100644
index 0000000..7b3c02e
--- /dev/null
+++ b/javascript-generators/uppercase.file
@@ -0,0 +1 @@
+THIS FILE IS REALLY BIG.
diff --git a/javascript-modules/README.md b/javascript-modules/README.md
new file mode 100644
index 0000000..4b308f0
--- /dev/null
+++ b/javascript-modules/README.md
@@ -0,0 +1,11 @@
+# JavaScript Modules: ES6 Import and Export
+
+> [https://www.youtube.com/watch?v=_3oSWwapPKQ](https://www.youtube.com/watch?v=_3oSWwapPKQ)
+
+Install [Node.js](https://nodejs.org/).
+
+Within this folder run the terminal command `npm install` to install the
+`devDependencies`.
+
+Then run `npm start` to start up a development server on `http://localhost:9966`
+and run the scripts through the client side.
diff --git a/javascript-modules/index.js b/javascript-modules/index.js
new file mode 100644
index 0000000..0536e66
--- /dev/null
+++ b/javascript-modules/index.js
@@ -0,0 +1,2 @@
+import {type} from './lib/bears.js'
+console.log(type)
diff --git a/javascript-modules/lib/bears.js b/javascript-modules/lib/bears.js
new file mode 100644
index 0000000..7b0996a
--- /dev/null
+++ b/javascript-modules/lib/bears.js
@@ -0,0 +1,7 @@
+export default 'bears!'
+
+export function growl () {
+ return 'grrr'
+}
+
+export const type = 'Grizzly'
diff --git a/javascript-modules/package.json b/javascript-modules/package.json
new file mode 100644
index 0000000..6ebbe01
--- /dev/null
+++ b/javascript-modules/package.json
@@ -0,0 +1,29 @@
+{
+ "name": "javascript-modules",
+ "version": "0.1.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "start": "budo index.js"
+ },
+ "browserify": {
+ "transform": [
+ [
+ "babelify",
+ {
+ "presets": [
+ "es2015"
+ ]
+ }
+ ]
+ ]
+ },
+ "author": "Kyle Robinson Young (http://dontkry.com)",
+ "license": "MIT",
+ "dependencies": {},
+ "devDependencies": {
+ "babel-preset-es2015": "^6.3.13",
+ "babelify": "^7.2.0",
+ "budo": "^11.2.0"
+ }
+}
diff --git a/javascript-mutation-observer/README.md b/javascript-mutation-observer/README.md
new file mode 100644
index 0000000..bef233b
--- /dev/null
+++ b/javascript-mutation-observer/README.md
@@ -0,0 +1,10 @@
+# JavaScript Mutation Observer
+
+> [https://youtu.be/Hn2zzi_lquA](https://youtu.be/Hn2zzi_lquA)
+
+Install [Node.js](https://nodejs.org/).
+
+Within this folder run the terminal command `npm install` to install the
+`dependencies` and `devDependencies`.
+
+Then run `npm start` to run the app viewable on `http://localhost:9966`.
diff --git a/javascript-mutation-observer/bears.js b/javascript-mutation-observer/bears.js
new file mode 100644
index 0000000..d00f052
--- /dev/null
+++ b/javascript-mutation-observer/bears.js
@@ -0,0 +1,13 @@
+const theOnlyBearsIKnow = ['Polar', 'Brown', 'Grizzly']
+
+setTimeout(function addBear () {
+ const bears = document.querySelector('ul.bears')
+ const bear = document.createElement('li')
+ bear.textContent = theOnlyBearsIKnow[parseInt(Math.random() * theOnlyBearsIKnow.length, 10)]
+ bears.appendChild(bear)
+}, Math.random() * 2000)
+
+setTimeout(function removeBear () {
+ const bears = document.querySelector('ul.bears')
+ bears.removeChild(bears.querySelector('li'))
+}, Math.random() * 2000 + 2000)
\ No newline at end of file
diff --git a/javascript-mutation-observer/index.html b/javascript-mutation-observer/index.html
new file mode 100644
index 0000000..538748f
--- /dev/null
+++ b/javascript-mutation-observer/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+ MutationObserver
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/javascript-mutation-observer/index.js b/javascript-mutation-observer/index.js
new file mode 100644
index 0000000..ea09770
--- /dev/null
+++ b/javascript-mutation-observer/index.js
@@ -0,0 +1,40 @@
+require('./bears.js')
+require('./sizer.js')
+
+const observer = new MutationObserver(function (mutations) {
+ mutations.forEach(function (mutation) {
+ if (mutation.attributeName === 'style') {
+ centerModal()
+ }
+ if (mutation.addedNodes.length) {
+ console.log('Added', mutation.addedNodes[0])
+ }
+ if (mutation.removedNodes.length) {
+ console.log('Removed', mutation.removedNodes[0])
+ }
+ })
+})
+const bears = document.querySelector('ul.bears')
+observer.observe(bears, {
+ childList: false,
+ attributes: true
+})
+
+function centerModal () {
+ const width = parseInt(bears.offsetWidth, 10)
+ const height = parseInt(bears.offsetHeight, 10)
+ Object.assign(bears.style, {
+ top: '50%',
+ left: '50%',
+ marginTop: -(height / 2) + 'px',
+ marginLeft: -(width / 2) + 'px',
+ })
+}
+
+// const poller = setInterval(function () {
+// const bear = document.querySelector('ul.bears li')
+// if (bear) {
+// console.log(bear)
+// clearInterval(poller)
+// }
+// }, 1000)
\ No newline at end of file
diff --git a/javascript-mutation-observer/package.json b/javascript-mutation-observer/package.json
new file mode 100644
index 0000000..62c095c
--- /dev/null
+++ b/javascript-mutation-observer/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "javascript-mutation-observer",
+ "version": "0.1.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "start": "budo index.js:bundle.js"
+ },
+ "author": "Kyle Robinson Young (http://dontkry.com)",
+ "license": "MIT",
+ "devDependencies": {
+ "budo": "^11.2.0"
+ }
+}
diff --git a/javascript-mutation-observer/sizer.js b/javascript-mutation-observer/sizer.js
new file mode 100644
index 0000000..1623c2b
--- /dev/null
+++ b/javascript-mutation-observer/sizer.js
@@ -0,0 +1,13 @@
+setInterval(function sizer () {
+ const bears = document.querySelector('ul.bears')
+ Object.assign(bears.style, {
+ position: 'absolute',
+ border: '1px solid #ddd',
+ width: (Math.random() * 200) + 'px',
+ height: (Math.random() * 200) + 'px',
+ boxShadow: '0px 0px 5px 0px rgba(0,0,0,.3)',
+ overflow: 'hidden',
+ padding: '20px',
+ listStyle: 'none'
+ })
+}, 1000)
\ No newline at end of file
diff --git a/javascript-proxy/README.md b/javascript-proxy/README.md
new file mode 100644
index 0000000..6596ec9
--- /dev/null
+++ b/javascript-proxy/README.md
@@ -0,0 +1,10 @@
+# JavaScript Proxy
+
+> [https://youtu.be/gZ4MCb2nlfQ](https://youtu.be/gZ4MCb2nlfQ)
+
+Install [Node.js](https://nodejs.org/).
+
+Within this folder run the terminal command `npm install` to install the
+`dependencies` and `devDependencies`.
+
+Then run `npm start` to run the app viewable on `http://localhost:9966`.
diff --git a/javascript-proxy/array.js b/javascript-proxy/array.js
new file mode 100644
index 0000000..5125216
--- /dev/null
+++ b/javascript-proxy/array.js
@@ -0,0 +1,59 @@
+
+const IndexedArray = new Proxy(Array, {
+ construct: function (target, [originalArray]) {
+ const index = {}
+ originalArray.forEach(function (item) {
+ index[item.id] = item
+ })
+
+ const newArray = new target(...originalArray)
+
+ return new Proxy(newArray, {
+ get: function (target, name) {
+ if (name === 'push') {
+ return function (item) {
+ index[item.id] = item
+ return target[name].call(target, item)
+ }
+ } else if (name === 'findById') {
+ return function (searchId) {
+ return index[searchId]
+ }
+ }
+ return target[name]
+ }
+ })
+ }
+})
+
+const bears = new IndexedArray([
+ {
+ id: 2,
+ name: 'grizzly',
+ },
+ {
+ id: 4,
+ name: 'black',
+ },
+ {
+ id: 3,
+ name: 'polar',
+ },
+])
+
+bears.push({
+ id: 55,
+ name: 'brown'
+})
+
+const brown = bears.findById(55)
+console.log(brown)
+console.log(bears.findById(3))
+
+// const index = {}
+// bears.forEach(function (bear) {
+// index[bear.id] = bear
+// })
+//
+// const polar = index[3]
+// const black = index[4]
diff --git a/javascript-proxy/index.js b/javascript-proxy/index.js
new file mode 100644
index 0000000..88d7492
--- /dev/null
+++ b/javascript-proxy/index.js
@@ -0,0 +1,53 @@
+let bears = { grizzly: true }
+
+let grizzlyCount = 0
+
+const proxyBears = new Proxy(bears, {
+ get: function (target, prop) {
+ if (prop === 'grizzly') grizzlyCount++
+ return target[prop]
+ },
+ set: function (target, prop, value) {
+ if (['grizzly', 'brown', 'polar'].indexOf(prop) === -1) {
+ throw new Error('THAT IS TOTALLY NOT A BEAR!')
+ }
+ target[prop] = value
+ },
+ deleteProperty: function (target, prop) {
+ console.log(`You have deleted ${prop}`)
+ delete target[prop]
+ }
+})
+
+//proxyBears.aardvark = true
+proxyBears.polar = true
+//delete proxyBears.polar
+//console.log(proxyBears.polar)
+
+// proxyBears.grizzly
+// proxyBears.grizzly
+// proxyBears.grizzly
+// proxyBears.grizzly
+// console.log(grizzlyCount)
+
+function growl() {
+ return 'grrr'
+}
+const loudGrowl = new Proxy(growl, {
+ apply: function (target, thisArg, args) {
+ return target().toUpperCase() + '!!!'
+ }
+})
+
+console.log(loudGrowl())
+
+
+
+
+
+
+
+
+
+
+
diff --git a/javascript-proxy/package.json b/javascript-proxy/package.json
new file mode 100644
index 0000000..8c75330
--- /dev/null
+++ b/javascript-proxy/package.json
@@ -0,0 +1,16 @@
+{
+ "name": "javascript-proxy",
+ "version": "0.1.0",
+ "description": "",
+ "main": "index.js",
+ "dependencies": {},
+ "devDependencies": {
+ "budo": "^9.1.0"
+ },
+ "scripts": {
+ "start": "budo array.js --live",
+ "test": "node test.js"
+ },
+ "author": "Kyle Robinson Young (http://dontkry.com)",
+ "license": "MIT"
+}
diff --git a/javascript-proxy/person.js b/javascript-proxy/person.js
new file mode 100644
index 0000000..0d05ecd
--- /dev/null
+++ b/javascript-proxy/person.js
@@ -0,0 +1,20 @@
+const person = {
+ first: 'Bear',
+ last: 'McBearison'
+}
+
+const cleverPerson = new Proxy(person, {
+ get: function (target, prop) {
+ if (!(prop in target)) {
+ return prop.split('_').map(function (part) {
+ return target[part]
+ }).join(' ')
+ }
+ return target[prop]
+ }
+})
+
+console.log(cleverPerson.last_first_first_first_first_first)
+
+cleverPerson.last = 'Beary'
+console.log(cleverPerson.first_last)
\ No newline at end of file
diff --git a/js-arrays/package.json b/js-arrays/package.json
index 7ace0d8..c258380 100644
--- a/js-arrays/package.json
+++ b/js-arrays/package.json
@@ -10,6 +10,6 @@
"author": "Kyle Robinson Young (http://dontkry.com)",
"license": "MIT",
"devDependencies": {
- "budo": "^4.1.0"
+ "budo": "^11.2.0"
}
}
diff --git a/js-timers/package.json b/js-timers/package.json
index 03b07da..99f25bb 100644
--- a/js-timers/package.json
+++ b/js-timers/package.json
@@ -9,6 +9,6 @@
"author": "Kyle Robinson Young (http://dontkry.com)",
"license": "MIT",
"devDependencies": {
- "budo": "^4.2.1"
+ "budo": "^11.2.0"
}
}
diff --git a/learn-to-yo-yo/README.md b/learn-to-yo-yo/README.md
new file mode 100644
index 0000000..975f30a
--- /dev/null
+++ b/learn-to-yo-yo/README.md
@@ -0,0 +1,7 @@
+# Learn to yo-yo
+
+> [https://youtu.be/MKJHuub6UJI](https://youtu.be/MKJHuub6UJI)
+
+* Install [Node.js](https://nodejs.org/).
+* Install dependencies: `npm install`
+* Then run `npm start` and go to http://localhost:9966 in the browser.
diff --git a/learn-to-yo-yo/index.js b/learn-to-yo-yo/index.js
new file mode 100644
index 0000000..f1b90cb
--- /dev/null
+++ b/learn-to-yo-yo/index.js
@@ -0,0 +1,33 @@
+var yo = require('yo-yo')
+var css = require('dom-css')
+
+// var element = yo`