<%= process.env.npm_package

diff --git a/README.md b/README.md index 6959969..bee0d8d 100644 --- a/README.md +++ b/README.md @@ -56,7 +56,7 @@ For convenience, I add the `budo` command to the `scripts` section of my ```json { "scripts": { - "start": "budo index.js" + "start": "budo index.js:bundle.js" } } ``` 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/how-to-make-chrome-extensions/bear/content.js b/how-to-make-chrome-extensions/bear/content.js index e11d1c4..b249bae 100644 --- a/how-to-make-chrome-extensions/bear/content.js +++ b/how-to-make-chrome-extensions/bear/content.js @@ -6,7 +6,8 @@ // }) const re = new RegExp('bear', 'gi') -const matches = document.documentElement.innerHTML.match(re) +const matches = document.documentElement.innerHTML.match(re) || [] + chrome.runtime.sendMessage({ url: window.location.href, count: matches.length 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-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/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" + } +}