First Commit 😀
Joe Wroten
3
.babelrc
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"presets": ["es2015"]
|
||||||
|
}
|
||||||
5
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
dist
|
||||||
|
vendor
|
||||||
|
node_modules
|
||||||
|
|
||||||
|
.DS_Store
|
||||||
9
README.md
Normal file
|
|
@ -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.
|
||||||
73
app.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
78
index.html
Normal file
|
|
@ -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>
|
||||||
21
oh-i-use-backend.js
Normal file
|
|
@ -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));
|
||||||
|
};
|
||||||
22
package.json
Normal file
|
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
96
src/app.js
Normal file
|
|
@ -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();
|
||||||
|
}
|
||||||
BIN
src/favicon/android-icon-144x144.png
Normal file
|
After Width: | Height: | Size: 7.6 KiB |
BIN
src/favicon/android-icon-192x192.png
Normal file
|
After Width: | Height: | Size: 9.6 KiB |
BIN
src/favicon/android-icon-36x36.png
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
BIN
src/favicon/android-icon-48x48.png
Normal file
|
After Width: | Height: | Size: 2.3 KiB |
BIN
src/favicon/android-icon-72x72.png
Normal file
|
After Width: | Height: | Size: 3.6 KiB |
BIN
src/favicon/android-icon-96x96.png
Normal file
|
After Width: | Height: | Size: 4.4 KiB |
BIN
src/favicon/apple-icon-114x114.png
Normal file
|
After Width: | Height: | Size: 6.1 KiB |
BIN
src/favicon/apple-icon-120x120.png
Normal file
|
After Width: | Height: | Size: 6.3 KiB |
BIN
src/favicon/apple-icon-144x144.png
Normal file
|
After Width: | Height: | Size: 7.6 KiB |
BIN
src/favicon/apple-icon-152x152.png
Normal file
|
After Width: | Height: | Size: 8.1 KiB |
BIN
src/favicon/apple-icon-180x180.png
Normal file
|
After Width: | Height: | Size: 9.9 KiB |
BIN
src/favicon/apple-icon-57x57.png
Normal file
|
After Width: | Height: | Size: 2.4 KiB |
BIN
src/favicon/apple-icon-60x60.png
Normal file
|
After Width: | Height: | Size: 2.5 KiB |
BIN
src/favicon/apple-icon-72x72.png
Normal file
|
After Width: | Height: | Size: 3.6 KiB |
BIN
src/favicon/apple-icon-76x76.png
Normal file
|
After Width: | Height: | Size: 3.5 KiB |
BIN
src/favicon/apple-icon-precomposed.png
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
src/favicon/apple-icon.png
Normal file
|
After Width: | Height: | Size: 10 KiB |
2
src/favicon/browserconfig.xml
Normal file
|
|
@ -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>
|
||||||
BIN
src/favicon/favicon-16x16.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/favicon/favicon-32x32.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/favicon/favicon-96x96.png
Normal file
|
After Width: | Height: | Size: 4.4 KiB |
BIN
src/favicon/favicon.ico
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
41
src/favicon/manifest.json
Normal file
|
|
@ -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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
src/favicon/ms-icon-144x144.png
Normal file
|
After Width: | Height: | Size: 7.6 KiB |
BIN
src/favicon/ms-icon-150x150.png
Normal file
|
After Width: | Height: | Size: 8.2 KiB |
BIN
src/favicon/ms-icon-310x310.png
Normal file
|
After Width: | Height: | Size: 22 KiB |
BIN
src/favicon/ms-icon-70x70.png
Normal file
|
After Width: | Height: | Size: 2.7 KiB |