First Commit 😀

2016-10-06 16:08:54 -05:00 · 2016-10-06 16:08:54 -05:00 · 931a998161
commit 931a998161
35 changed files with 350 additions and 0 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,5 @@
+dist
+vendor
+node_modules
+
+.DS_Store
--- a/README.md
+++ 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.
--- a/app.css
+++ 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;
+  }
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,78 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <title>Oh I Use...</title>
+
+  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
+  <link rel="stylesheet" href="vendor/css/normalize.css">
+  <link rel="stylesheet" href="vendor/css/skeleton.css">
+  <link rel="stylesheet" href="app.css">
+
+  <link rel="apple-touch-icon" sizes="57x57" href="dist/favicon/apple-icon-57x57.png">
+  <link rel="apple-touch-icon" sizes="60x60" href="dist/favicon/apple-icon-60x60.png">
+  <link rel="apple-touch-icon" sizes="72x72" href="dist/favicon/apple-icon-72x72.png">
+  <link rel="apple-touch-icon" sizes="76x76" href="dist/favicon/apple-icon-76x76.png">
+  <link rel="apple-touch-icon" sizes="114x114" href="dist/favicon/apple-icon-114x114.png">
+  <link rel="apple-touch-icon" sizes="120x120" href="dist/favicon/apple-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="144x144" href="dist/favicon/apple-icon-144x144.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="dist/favicon/apple-icon-152x152.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="dist/favicon/apple-icon-180x180.png">
+  <link rel="icon" type="image/png" sizes="192x192"  href="dist/favicon/android-icon-192x192.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="dist/favicon/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="96x96" href="dist/favicon/favicon-96x96.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="dist/favicon/favicon-16x16.png">
+  <link rel="manifest" href="dist/favicon/manifest.json">
+  <meta name="msapplication-TileColor" content="#ffffff">
+  <meta name="msapplication-TileImage" content="dist/favicon/ms-icon-144x144.png">
+  <meta name="theme-color" content="#ffffff">
+
+  <!--[if lt IE 9]>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+  <![endif]-->
+</head>
+
+<body>
+
+  <div class="container" id="app">
+
+    <div class="row">
+      <div class="twelve column">
+        <p>
+          <small>
+            This is a silly app made using the tech it makes fun of. Be proud of what you do.
+            <a href="https://github.com/sharpshark28/oh-i-use" class="u-pull-right">Fork Me On Github</a>
+          </small>
+        </p>
+
+        <h6>
+          Developing Javascript web apps can be convoluted. Become that bleeding edge dev with the coolest sounding tech stack made from <em>randomly generated fake tool names</em>.
+        </h6>
+
+        <h1>Oh I Use...</h1>
+
+        <div v-if="loading" class="loader">Loading...</div>
+        <p v-else class="row">
+          <code id="stack" class="twelve column">
+            <br />
+            {{ stack }}
+            <br />
+            <br />
+          </code>
+        </p>
+
+        <button v-on:click="newStack" class="button-primary u-full-width">
+          No that's stupid, try again.
+        </h1>
+      </div>
+    </div>
+
+  </div>
+
+  <script src="vendor/js/fetch.js"></script>
+  <script src="vendor/js/vue.min.js"></script>
+  <script src="dist/app.js"></script>
+</body>
+</html>
--- a/oh-i-use-backend.js
+++ 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));
+};
--- a/package.json
+++ 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 <sharpshark28@gmail.com>",
+  "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"
+  }
+}
--- a/src/app.js
+++ 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();
+}
--- a/src/favicon/android-icon-144x144.png
+++ b/src/favicon/android-icon-144x144.png
--- a/src/favicon/android-icon-192x192.png
+++ b/src/favicon/android-icon-192x192.png
--- a/src/favicon/android-icon-36x36.png
+++ b/src/favicon/android-icon-36x36.png
--- a/src/favicon/android-icon-48x48.png
+++ b/src/favicon/android-icon-48x48.png
--- a/src/favicon/android-icon-72x72.png
+++ b/src/favicon/android-icon-72x72.png
--- a/src/favicon/android-icon-96x96.png
+++ b/src/favicon/android-icon-96x96.png
--- a/src/favicon/apple-icon-114x114.png
+++ b/src/favicon/apple-icon-114x114.png
--- a/src/favicon/apple-icon-120x120.png
+++ b/src/favicon/apple-icon-120x120.png
--- a/src/favicon/apple-icon-144x144.png
+++ b/src/favicon/apple-icon-144x144.png
--- a/src/favicon/apple-icon-152x152.png
+++ b/src/favicon/apple-icon-152x152.png
--- a/src/favicon/apple-icon-180x180.png
+++ b/src/favicon/apple-icon-180x180.png
--- a/src/favicon/apple-icon-57x57.png
+++ b/src/favicon/apple-icon-57x57.png
--- a/src/favicon/apple-icon-60x60.png
+++ b/src/favicon/apple-icon-60x60.png
--- a/src/favicon/apple-icon-72x72.png
+++ b/src/favicon/apple-icon-72x72.png
--- a/src/favicon/apple-icon-76x76.png
+++ b/src/favicon/apple-icon-76x76.png
--- a/src/favicon/apple-icon-precomposed.png
+++ b/src/favicon/apple-icon-precomposed.png
--- a/src/favicon/apple-icon.png
+++ b/src/favicon/apple-icon.png
--- a/src/favicon/browserconfig.xml
+++ b/src/favicon/browserconfig.xml
@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
--- a/src/favicon/favicon-16x16.png
+++ b/src/favicon/favicon-16x16.png
--- a/src/favicon/favicon-32x32.png
+++ b/src/favicon/favicon-32x32.png
--- a/src/favicon/favicon-96x96.png
+++ b/src/favicon/favicon-96x96.png
--- a/src/favicon/favicon.ico
+++ b/src/favicon/favicon.ico
--- a/src/favicon/manifest.json
+++ 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"
+  }
+ ]
+}
--- a/src/favicon/ms-icon-144x144.png
+++ b/src/favicon/ms-icon-144x144.png
--- a/src/favicon/ms-icon-150x150.png
+++ b/src/favicon/ms-icon-150x150.png
--- a/src/favicon/ms-icon-310x310.png
+++ b/src/favicon/ms-icon-310x310.png
--- a/src/favicon/ms-icon-70x70.png
+++ b/src/favicon/ms-icon-70x70.png