diff --git a/.gitignore b/.gitignore index 66fd66c..d763b2d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +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 @@ + + + \ 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 @@ + + + \ 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-modules/package.json b/javascript-modules/package.json index d2b3523..6ebbe01 100644 --- a/javascript-modules/package.json +++ b/javascript-modules/package.json @@ -24,6 +24,6 @@ "devDependencies": { "babel-preset-es2015": "^6.3.13", "babelify": "^7.2.0", - "budo": "^7.1.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`
Grrrr
` +// document.body.appendChild(element) +// +// setTimeout(function () { +// yo.update(element, yo`

Growl

`) +// }, 1000) + +function list (items, onadd) { + return yo`
    + ${items.map(function (item) { + return yo`
  • ${item}
    • ` + })} +
  • ${button(onadd)}
    • +
` +} + +function button (onclick) { + var el = yo`` + css(el, { + 'border-radius': 10 + }) + return el +} + +var bears = ['Polar', 'Brown', 'Grizzly'] +var element = list(bears, function onadd () { + bears.push('Black') + yo.update(element, list(bears, onadd)) +}) +document.body.appendChild(element) diff --git a/learn-to-yo-yo/package.json b/learn-to-yo-yo/package.json new file mode 100644 index 0000000..aea44e3 --- /dev/null +++ b/learn-to-yo-yo/package.json @@ -0,0 +1,15 @@ +{ + "name": "learn-to-yo-yo", + "version": "0.1.0", + "description": "", + "main": "index.js", + "scripts": { + "start": "budo index.js", + "test": "node test.js" + }, + "author": "Kyle Robinson Young (http://dontkry.com)", + "license": "MIT", + "devDependencies": { + "budo": "^11.2.0" + } +} diff --git a/mastering-callbacks/package.json b/mastering-callbacks/package.json index 794b373..8ce1efe 100644 --- a/mastering-callbacks/package.json +++ b/mastering-callbacks/package.json @@ -9,6 +9,6 @@ "author": "Kyle Robinson Young (http://dontkry.com)", "license": "MIT", "devDependencies": { - "budo": "^4.0.0" + "budo": "^11.2.0" } } diff --git a/multi-window-electron-desktop-app/app.js b/multi-window-electron-desktop-app/app.js index 7f2c2ff..475bd53 100644 --- a/multi-window-electron-desktop-app/app.js +++ b/multi-window-electron-desktop-app/app.js @@ -1,13 +1,11 @@ -var app = require('app') -var BrowserWindow = require('browser-window') -var ipc = require('ipc') +const {app, BrowserWindow, ipcMain} = require('electron') app.on('ready', function () { var mainWindow = new BrowserWindow({ width: 800, height: 600 }) - mainWindow.loadUrl('file://' + __dirname + '/main.html') + mainWindow.loadURL('file://' + __dirname + '/main.html') mainWindow.openDevTools() var prefsWindow = new BrowserWindow({ @@ -15,12 +13,13 @@ app.on('ready', function () { height: 400, show: false }) - prefsWindow.loadUrl('file://' + __dirname + '/prefs.html') + prefsWindow.loadURL('file://' + __dirname + '/prefs.html') - ipc.on('toggle-prefs', function () { + ipcMain.on('toggle-prefs', function () { if (prefsWindow.isVisible()) prefsWindow.hide() else prefsWindow.show() }) -}) + +}) \ No newline at end of file diff --git a/multi-window-electron-desktop-app/main.js b/multi-window-electron-desktop-app/main.js index 5f2724d..a6bf75e 100644 --- a/multi-window-electron-desktop-app/main.js +++ b/multi-window-electron-desktop-app/main.js @@ -1,18 +1,20 @@ -var remote = require('remote') -var ipc = require('ipc') -var Menu = remote.require('menu') +const {remote, ipcRenderer} = require('electron') +const {Menu, MenuItem} = remote -var menu = Menu.buildFromTemplate([ +const menu = new Menu() + +menu.append(new MenuItem( { label: 'Electron', submenu: [ { label: 'Prefs', click: function () { - ipc.send('toggle-prefs') + ipcRenderer.send('toggle-prefs') } } ] - } -]) -Menu.setApplicationMenu(menu) + }) +) + +Menu.setApplicationMenu(menu) \ No newline at end of file diff --git a/multi-window-electron-desktop-app/prefs.html b/multi-window-electron-desktop-app/prefs.html index 52ee719..ab4028e 100644 --- a/multi-window-electron-desktop-app/prefs.html +++ b/multi-window-electron-desktop-app/prefs.html @@ -5,14 +5,14 @@ Prefs - + \ No newline at end of file diff --git a/simple-p2p-with-webrtc/README.md b/simple-p2p-with-webrtc/README.md new file mode 100644 index 0000000..142d040 --- /dev/null +++ b/simple-p2p-with-webrtc/README.md @@ -0,0 +1,13 @@ +# P2P Signaling for WebRTC +# I MADE A WEBRTC MISTAKE + +> [https://youtu.be/jY9k4rfXwEI](https://youtu.be/jY9k4rfXwEI) + +> UPDATED with WebRTC: [https://www.youtube.com/watch?v=IqPJb6o_S1Q](https://www.youtube.com/watch?v=IqPJb6o_S1Q) + +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/simple-p2p-with-webrtc/index.js b/simple-p2p-with-webrtc/index.js new file mode 100644 index 0000000..379d143 --- /dev/null +++ b/simple-p2p-with-webrtc/index.js @@ -0,0 +1,73 @@ +navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(function (stream) { + + const signalhub = require('signalhub') + const createSwarm = require('webrtc-swarm') + const hub = signalhub('my-game', [ + 'http://localhost:8080' + ]) + const swarm = createSwarm(hub, { + stream: stream + }) + + const Player = require('./player.js') + const you = new Player() + you.addStream(stream) + + const players = {} + swarm.on('connect', function (peer, id) { + if (!players[id]) { + players[id] = new Player() + peer.on('data', function (data) { + data = JSON.parse(data.toString()) + players[id].update(data) + }) + players[id].addStream(peer.stream) + } + }) + + swarm.on('disconnect', function (peer, id) { + if (players[id]) { + players[id].element.parentNode.removeChild(players[id].element) + delete players[id] + } + }) + + // hub.subscribe('update').on('data', function (data) { + // if (data.color === you.color) return + // if (!players[data.color]) { + // players[data.color] = new Player(data) + // } + // players[data.color].update(data) + // //console.log(data) + // }) + + setInterval(function () { + //hub.broadcast('update', window.location.hash) + you.update() + //hub.broadcast('update', you) + const youString = JSON.stringify(you) + swarm.peers.forEach(function (peer) { + peer.send(youString) + }) + }, 100) + + document.addEventListener('keypress', function (e) { + const speed = 16 + switch (e.key) { + case 'a': + you.x -= speed + break + case 'd': + you.x += speed + break + case 'w': + you.y -= speed + break + case 's': + you.y += speed + break + } + }, false) + +}) + diff --git a/simple-p2p-with-webrtc/package.json b/simple-p2p-with-webrtc/package.json new file mode 100644 index 0000000..a735c9e --- /dev/null +++ b/simple-p2p-with-webrtc/package.json @@ -0,0 +1,19 @@ +{ + "name": "simple-p2p-with-webrtc", + "version": "0.1.0", + "description": "", + "main": "index.js", + "scripts": { + "start": "budo index.js", + "signalhub": "signalhub listen -p 8080" + }, + "author": "Kyle Robinson Young (http://dontkry.com)", + "license": "MIT", + "devDependencies": { + "budo": "^11.2.0" + }, + "dependencies": { + "signalhub": "^4.9.0", + "webrtc-swarm": "^2.9.0" + } +} diff --git a/simple-p2p-with-webrtc/player.js b/simple-p2p-with-webrtc/player.js new file mode 100644 index 0000000..a188163 --- /dev/null +++ b/simple-p2p-with-webrtc/player.js @@ -0,0 +1,37 @@ +module.exports = Player + +function Player (data) { + data = data || {} + this.color = data.color || randomColor() + this.x = 0 + this.y = 0 + this.element = document.createElement('video') + Object.assign(this.element.style, { + width: '64px', + height: '64px', + position: 'absolute', + top: '0px', + left: '0px', + backgroundColor: this.color + }) + document.body.appendChild(this.element) +} + +Player.prototype.addStream = function (stream) { + this.element.srcObject = stream + this.element.play() +} + +Player.prototype.update = function (data) { + data = data || {} + this.x = data.x || this.x + this.y = data.y || this.y + Object.assign(this.element.style, { + top: this.y + 'px', + left: this.x + 'px' + }) +} + +function randomColor () { + return '#' + Math.random().toString(16).substr(-6) +} \ No newline at end of file diff --git a/tagged-template-literals/README.md b/tagged-template-literals/README.md new file mode 100644 index 0000000..875f1bb --- /dev/null +++ b/tagged-template-literals/README.md @@ -0,0 +1,9 @@ +# ES6 Tagged Template Literals + +> [https://www.youtube.com/watch?v=c9j0avG5L4c](https://www.youtube.com/watch?v=c9j0avG5L4c) + +Install [Node.js](https://nodejs.org/). + +Then run `node index.js` to run the example. + +Or `npm start` and go to http://localhost:9966 in the browser. diff --git a/tagged-template-literals/index.js b/tagged-template-literals/index.js new file mode 100644 index 0000000..05c9da6 --- /dev/null +++ b/tagged-template-literals/index.js @@ -0,0 +1,30 @@ +// var polar = false +// var bears = ` +// ${polar ? 'Polar' : ''} +// Brown +// Grizzly +// ` +// var out = `Bears: ${bears.split('\n').join(', ')}` +// console.log(out) + +// var bears = ['Polar', 'Brown', 'Grizzly'] +// var html = `
    +// ${bears.map(function (bear) { +// return `
  • ${bear}
    • ` +// }).join('')} +//
` +// console.log(html) + +var bear = 'Grizzly' +var createElement = html`
${bear}
` + +function html (strings, expr1, expr2, expr3) { + return function () { + var el = document.createElement('div') + el.textContent = expr1 + return el + } +} + +document.body.appendChild(createElement()) + diff --git a/tagged-template-literals/package.json b/tagged-template-literals/package.json new file mode 100644 index 0000000..9406723 --- /dev/null +++ b/tagged-template-literals/package.json @@ -0,0 +1,15 @@ +{ + "name": "tagged-template-literals", + "version": "0.1.0", + "description": "", + "main": "index.js", + "scripts": { + "start": "budo index.js", + "test": "node test.js" + }, + "author": "Kyle Robinson Young (http://dontkry.com)", + "license": "MIT", + "devDependencies": { + "budo": "^8.3.0" + } +} diff --git a/vuejs-computed-properties/App.vue b/vuejs-computed-properties/App.vue new file mode 100644 index 0000000..3bc8f6a --- /dev/null +++ b/vuejs-computed-properties/App.vue @@ -0,0 +1,69 @@ + + + \ No newline at end of file diff --git a/vuejs-computed-properties/README.md b/vuejs-computed-properties/README.md new file mode 100644 index 0000000..7a5eefd --- /dev/null +++ b/vuejs-computed-properties/README.md @@ -0,0 +1,10 @@ +# Vue.js Computed Properties + +> [https://www.youtube.com/watch?v=8antoF7LyIo](https://www.youtube.com/watch?v=8antoF7LyIo) + +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/vuejs-computed-properties/index.html b/vuejs-computed-properties/index.html new file mode 100644 index 0000000..e16f160 --- /dev/null +++ b/vuejs-computed-properties/index.html @@ -0,0 +1,11 @@ + + + + + Document + + +
+ + + \ No newline at end of file diff --git a/vuejs-computed-properties/index.js b/vuejs-computed-properties/index.js new file mode 100644 index 0000000..49fe2a2 --- /dev/null +++ b/vuejs-computed-properties/index.js @@ -0,0 +1,28 @@ +const Vue = require('vue') +const App = require('./App.vue') + +const beardb = { + 'bear1': { + name: 'Oliver', + type: 'grizzly' + }, + 'bear3': { + name: 'Sheryl', + type: 'brown' + }, + 'bear55': { + name: 'Frank', + type: 'polar' + }, +} + +new Vue({ + el: '#app', + render: function (h) { + return h(App, { + props: { + beardb: beardb + } + }) + } +}) \ No newline at end of file diff --git a/vuejs-computed-properties/package.json b/vuejs-computed-properties/package.json new file mode 100644 index 0000000..8f6f8b5 --- /dev/null +++ b/vuejs-computed-properties/package.json @@ -0,0 +1,22 @@ +{ + "name": "vuejs-computed-properties", + "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" + } +}