commit 931a9981612ee91b832f797786da55da34e705eb Author: Joe Wroten Date: Thu Oct 6 16:08:54 2016 -0500 First Commit 😀 diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..c13c5f6 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["es2015"] +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..87b83ff --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +dist +vendor +node_modules + +.DS_Store diff --git a/README.md b/README.md new file mode 100644 index 0000000..48ee52e --- /dev/null +++ b/README.md @@ -0,0 +1,9 @@ +# Oh I Use... + +**[Play around with the app live.](https://sharpshark28.github.io/oh-i-use/)** + +Developing Javascript web apps can be convoluted. Become that bleeding edge dev with the coolest sounding tech stack made from _randomly generated fake tool names_. + +--- + +This is a silly app made using the tech it makes fun of. Be proud of what you do. diff --git a/app.css b/app.css new file mode 100644 index 0000000..4259ab8 --- /dev/null +++ b/app.css @@ -0,0 +1,73 @@ +#stack { + white-space: normal; +} + +/* Thanks to http://projects.lukehaas.me/css-loaders */ +.loader { + color: #ccc; + font-size: 90px; + text-indent: -9999em; + overflow: hidden; + width: 1em; + height: 1em; + border-radius: 50%; + margin: 72px auto; + position: relative; + -webkit-transform: translateZ(0); + -ms-transform: translateZ(0); + transform: translateZ(0); + -webkit-animation: load6 1.7s infinite ease; + animation: load6 1.7s infinite ease; +} +@-webkit-keyframes load6 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; + } + 5%, + 95% { + box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; + } + 10%, + 59% { + box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; + } + 20% { + box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; + } + 38% { + box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; + } +} +@keyframes load6 { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; + } + 5%, + 95% { + box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; + } + 10%, + 59% { + box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; + } + 20% { + box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; + } + 38% { + box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..4fd9a37 --- /dev/null +++ b/index.html @@ -0,0 +1,78 @@ + + + + + + + Oh I Use... + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ +

+ + This is a silly app made using the tech it makes fun of. Be proud of what you do. + Fork Me On Github + +

+ +

+ Developing Javascript web apps can be convoluted. Become that bleeding edge dev with the coolest sounding tech stack made from randomly generated fake tool names. +

+ +

Oh I Use...

+ +

+ + + {{ stack }} + + + +

+ +

+ + + + + + diff --git a/oh-i-use-backend.js b/oh-i-use-backend.js new file mode 100644 index 0000000..89f8b23 --- /dev/null +++ b/oh-i-use-backend.js @@ -0,0 +1,21 @@ +'use latest'; +require('isomorphic-fetch'); + +module.exports = function(ctx, done) { + if (!ctx.data.word) { + done(null, 'Please supply a word'); + return; + } + + fetch(`https://wordsapiv1.p.mashape.com/words/${ctx.data.word}/hasTypes`, { + method: 'GET', + mode: 'cors', + headers: { + 'Accepts': 'application/json', + 'X-Mashape-Key': 'C7TVYyPI9Fmsh61STvYMLm8opXXgp1JB6NOjsn3Tdw5PRqjaTj' + } + }) + .then(r => r.json()) + .then(r => done(null, r)) // Return content to the user + .catch(e => done(null, e.error)); +}; diff --git a/package.json b/package.json new file mode 100644 index 0000000..52fb971 --- /dev/null +++ b/package.json @@ -0,0 +1,22 @@ +{ + "name": "oh-i-use", + "version": "1.0.0", + "description": "Developing Javascript web apps can be convoluted. Become that bleeding edge dev with the coolest sounding tech stack made from _randomly generated fake tool names_.", + "main": "index.js", + "scripts": { + "build": "npm run vendor && babel src --out-dir dist", + "watch": "npm run vendor && babel src --watch --out-dir dist --source-maps inline", + "vendor": "mkdir -p vendor vendor/css vendor/js && cp -R ./src/favicon ./dist/favicon && cp -R ./node_modules/skeleton-css/css/ ./vendor/css && cp ./node_modules/vue/dist/vue.min.js ./vendor/js/vue.min.js && cp ./node_modules/whatwg-fetch/fetch.js ./vendor/js/fetch.js" + }, + "author": "Joe Wroten ", + "license": "ISC", + "devDependencies": { + "babel-cli": "^6.16.0", + "babel-preset-es2015": "^6.16.0" + }, + "dependencies": { + "skeleton-css": "^2.0.4", + "vue": "^2.0.1", + "whatwg-fetch": "^1.0.0" + } +} diff --git a/src/app.js b/src/app.js new file mode 100644 index 0000000..8918bdf --- /dev/null +++ b/src/app.js @@ -0,0 +1,96 @@ +Array.prototype.random = function() { + return this[Math.floor(Math.random() * this.length)]; +} + +let wordThemes = ['candy', 'beer', 'coffee', 'car', 'liquor', 'mustache']; +let suffixes = ['', 'JS', 'Script', '.js', '.io', 'DB']; +let wordsToUse = 3; + +let stackPhrases = { + intros: [ + 'My prefered tech stack is a', + 'I feel the best way to build ambitious apps is with a', + 'An ideal stack would be a', + 'I start off with a' + ], + toolVarieties: [ + '', + 'engine', + 'generator', + 'framework', + 'setup', + 'frontend', + 'backend', + 'library', + 'plugin' + ], + toolConnections: [ + 'powered by a', + 'controlling a', + 'alongside a', + 'integrated with a', + 'plugged into a', + 'synced to a' + ], + outros: [ + 'to build ambitious web apps.', + 'to innovate to the best of my ability.', + 'to inspire the Open Source community of makers.' + ] +}; + +let app = new Vue({ + el: '#app', + data: { + loading: true, + stack: '' + }, + methods: { + newStack() { + this.loading = true; + this.stack = generateStack() + .then(stack => { + this.loading = false; + this.stack = stack; + }) + .catch(e => { + this.loading = false; + this.stack = 'Uhoh! There was a problem generating a silly tech stack. Most likely we have hit our API limit for the month. Hang in there!'; + }); + } + } +}); + +// Fire off a new stack request on load +app.newStack(); + +function generateStack() { + return Promise.all(wordThemes.map(w => getWordsRelatedTo(w))) + .then(data => data.reduce((prev, cur) => [].concat(prev.length ? prev : [], cur.hasTypes))) + .then(wordsToStack); +} + +function getWordsRelatedTo(word) { + return fetch('https://wt-sharpshark28-gmail_com-0.run.webtask.io/oh-i-use-backend?word=' + word) + .then(r => r.json()); +} + +function wordsToStack(allWords) { + let stack = stackPhrases.intros.random(); + + for (let i = 1; i <= wordsToUse; i++) { + let techWord = wordToTechTerm(allWords.random()); + let variety = stackPhrases.toolVarieties.random(); + let connection = stackPhrases.toolConnections.random(); + let outro = stackPhrases.outros.random(); + let end = i < wordsToUse ? connection : outro; + stack += ` ${techWord} ${variety} ${end}`; + } + + return stack; +} + +function wordToTechTerm(word) { + word = word.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)); // Capitalize each word + return word.join('') + suffixes.random(); +} diff --git a/src/favicon/android-icon-144x144.png b/src/favicon/android-icon-144x144.png new file mode 100644 index 0000000..c6c90cd Binary files /dev/null and b/src/favicon/android-icon-144x144.png differ diff --git a/src/favicon/android-icon-192x192.png b/src/favicon/android-icon-192x192.png new file mode 100644 index 0000000..c4be4b6 Binary files /dev/null and b/src/favicon/android-icon-192x192.png differ diff --git a/src/favicon/android-icon-36x36.png b/src/favicon/android-icon-36x36.png new file mode 100644 index 0000000..9836289 Binary files /dev/null and b/src/favicon/android-icon-36x36.png differ diff --git a/src/favicon/android-icon-48x48.png b/src/favicon/android-icon-48x48.png new file mode 100644 index 0000000..dae27c0 Binary files /dev/null and b/src/favicon/android-icon-48x48.png differ diff --git a/src/favicon/android-icon-72x72.png b/src/favicon/android-icon-72x72.png new file mode 100644 index 0000000..962e839 Binary files /dev/null and b/src/favicon/android-icon-72x72.png differ diff --git a/src/favicon/android-icon-96x96.png b/src/favicon/android-icon-96x96.png new file mode 100644 index 0000000..6de66d1 Binary files /dev/null and b/src/favicon/android-icon-96x96.png differ diff --git a/src/favicon/apple-icon-114x114.png b/src/favicon/apple-icon-114x114.png new file mode 100644 index 0000000..fb497d2 Binary files /dev/null and b/src/favicon/apple-icon-114x114.png differ diff --git a/src/favicon/apple-icon-120x120.png b/src/favicon/apple-icon-120x120.png new file mode 100644 index 0000000..39f0e06 Binary files /dev/null and b/src/favicon/apple-icon-120x120.png differ diff --git a/src/favicon/apple-icon-144x144.png b/src/favicon/apple-icon-144x144.png new file mode 100644 index 0000000..c6c90cd Binary files /dev/null and b/src/favicon/apple-icon-144x144.png differ diff --git a/src/favicon/apple-icon-152x152.png b/src/favicon/apple-icon-152x152.png new file mode 100644 index 0000000..0f63340 Binary files /dev/null and b/src/favicon/apple-icon-152x152.png differ diff --git a/src/favicon/apple-icon-180x180.png b/src/favicon/apple-icon-180x180.png new file mode 100644 index 0000000..2b94363 Binary files /dev/null and b/src/favicon/apple-icon-180x180.png differ diff --git a/src/favicon/apple-icon-57x57.png b/src/favicon/apple-icon-57x57.png new file mode 100644 index 0000000..0aeb442 Binary files /dev/null and b/src/favicon/apple-icon-57x57.png differ diff --git a/src/favicon/apple-icon-60x60.png b/src/favicon/apple-icon-60x60.png new file mode 100644 index 0000000..590903a Binary files /dev/null and b/src/favicon/apple-icon-60x60.png differ diff --git a/src/favicon/apple-icon-72x72.png b/src/favicon/apple-icon-72x72.png new file mode 100644 index 0000000..962e839 Binary files /dev/null and b/src/favicon/apple-icon-72x72.png differ diff --git a/src/favicon/apple-icon-76x76.png b/src/favicon/apple-icon-76x76.png new file mode 100644 index 0000000..abdc6cf Binary files /dev/null and b/src/favicon/apple-icon-76x76.png differ diff --git a/src/favicon/apple-icon-precomposed.png b/src/favicon/apple-icon-precomposed.png new file mode 100644 index 0000000..df400d7 Binary files /dev/null and b/src/favicon/apple-icon-precomposed.png differ diff --git a/src/favicon/apple-icon.png b/src/favicon/apple-icon.png new file mode 100644 index 0000000..df400d7 Binary files /dev/null and b/src/favicon/apple-icon.png differ diff --git a/src/favicon/browserconfig.xml b/src/favicon/browserconfig.xml new file mode 100644 index 0000000..c554148 --- /dev/null +++ b/src/favicon/browserconfig.xml @@ -0,0 +1,2 @@ + +#ffffff \ No newline at end of file diff --git a/src/favicon/favicon-16x16.png b/src/favicon/favicon-16x16.png new file mode 100644 index 0000000..a800f80 Binary files /dev/null and b/src/favicon/favicon-16x16.png differ diff --git a/src/favicon/favicon-32x32.png b/src/favicon/favicon-32x32.png new file mode 100644 index 0000000..e9d9481 Binary files /dev/null and b/src/favicon/favicon-32x32.png differ diff --git a/src/favicon/favicon-96x96.png b/src/favicon/favicon-96x96.png new file mode 100644 index 0000000..6de66d1 Binary files /dev/null and b/src/favicon/favicon-96x96.png differ diff --git a/src/favicon/favicon.ico b/src/favicon/favicon.ico new file mode 100644 index 0000000..9fdf4da Binary files /dev/null and b/src/favicon/favicon.ico differ diff --git a/src/favicon/manifest.json b/src/favicon/manifest.json new file mode 100644 index 0000000..013d4a6 --- /dev/null +++ b/src/favicon/manifest.json @@ -0,0 +1,41 @@ +{ + "name": "App", + "icons": [ + { + "src": "\/android-icon-36x36.png", + "sizes": "36x36", + "type": "image\/png", + "density": "0.75" + }, + { + "src": "\/android-icon-48x48.png", + "sizes": "48x48", + "type": "image\/png", + "density": "1.0" + }, + { + "src": "\/android-icon-72x72.png", + "sizes": "72x72", + "type": "image\/png", + "density": "1.5" + }, + { + "src": "\/android-icon-96x96.png", + "sizes": "96x96", + "type": "image\/png", + "density": "2.0" + }, + { + "src": "\/android-icon-144x144.png", + "sizes": "144x144", + "type": "image\/png", + "density": "3.0" + }, + { + "src": "\/android-icon-192x192.png", + "sizes": "192x192", + "type": "image\/png", + "density": "4.0" + } + ] +} \ No newline at end of file diff --git a/src/favicon/ms-icon-144x144.png b/src/favicon/ms-icon-144x144.png new file mode 100644 index 0000000..c6c90cd Binary files /dev/null and b/src/favicon/ms-icon-144x144.png differ diff --git a/src/favicon/ms-icon-150x150.png b/src/favicon/ms-icon-150x150.png new file mode 100644 index 0000000..65c9526 Binary files /dev/null and b/src/favicon/ms-icon-150x150.png differ diff --git a/src/favicon/ms-icon-310x310.png b/src/favicon/ms-icon-310x310.png new file mode 100644 index 0000000..a1c3511 Binary files /dev/null and b/src/favicon/ms-icon-310x310.png differ diff --git a/src/favicon/ms-icon-70x70.png b/src/favicon/ms-icon-70x70.png new file mode 100644 index 0000000..4638978 Binary files /dev/null and b/src/favicon/ms-icon-70x70.png differ