This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan
<p>I've got some ideas for projects that make it easier to create sites on the web - one of the ideas is to make a <a href="https://docs.netlify.com/site-deploys/create-deploys/#drag-and-drop">netlify-like drag and drop interface</a> for <a href="https://zeit.co/">zeit</a> based projects (I like zeit but it requires a tiny bit of cli magic to deploy).</p>
<p>This post covers just one small piece of the puzzle: creating project names.</p>
<p><a href="https://glitch.com/">Glitch</a> is a good example of this, when you create a project it gives it a whimsical randomly generated name. The team also created a <a href="https://github.com/FogCreek/friendly-words">good dictionary of fairly safe words</a> that combine well (and if you want they have a simple server to host).</p>
<p>So, the side project this Sunday was to create a simple micro-service to generate random project names using Zeit's <a href="https://zeit.co/docs/v2/advanced/concepts/serverless-functions/">serverless-functions</a> and the dictionary from Glitch.</p>
<p><a href="https://friendly-project-name.kinlan.now.sh/">And here it is</a> (<a href="https://github.com/PaulKinlan/friendly-project-name-generator">code</a>), it's pretty short and not too complex.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">words</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">require</span>(<span style="color:#e6db74">"friendly-words"</span>);
<span style="color:#66d9ef">function</span> <span style="color:#a6e22e">generate</span>(<span style="color:#a6e22e">count</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">1</span>, <span style="color:#a6e22e">separator</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">"-"</span>) {
<span style="color:#66d9ef">const</span> { <span style="color:#a6e22e">predicates</span>, <span style="color:#a6e22e">objects</span> } <span style="color:#f92672">=</span> <span style="color:#a6e22e">words</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">pCount</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">predicates</span>.<span style="color:#a6e22e">length</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">oCount</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">objects</span>.<span style="color:#a6e22e">length</span>;
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">output</span> <span style="color:#f92672">=</span> [];
<span style="color:#66d9ef">for</span> (<span style="color:#66d9ef">let</span> <span style="color:#a6e22e">i</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>; <span style="color:#a6e22e">i</span> <span style="color:#f92672"><</span> <span style="color:#a6e22e">count</span>; <span style="color:#a6e22e">i</span><span style="color:#f92672">++</span>) {
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">pair</span> <span style="color:#f92672">=</span> [<span style="color:#a6e22e">predicates</span>[Math.<span style="color:#a6e22e">floor</span>(Math.<span style="color:#a6e22e">random</span>() <span style="color:#f92672">*</span> <span style="color:#a6e22e">pCount</span>)], <span style="color:#a6e22e">objects</span>[Math.<span style="color:#a6e22e">floor</span>(Math.<span style="color:#a6e22e">random</span>() <span style="color:#f92672">*</span> <span style="color:#a6e22e">oCount</span>)]];
<span style="color:#a6e22e">output</span>.<span style="color:#a6e22e">push</span>(<span style="color:#a6e22e">pair</span>.<span style="color:#a6e22e">join</span>(<span style="color:#a6e22e">separator</span>));
}
<span style="color:#66d9ef">return</span> <span style="color:#a6e22e">output</span>;
}
<span style="color:#a6e22e">module</span>.<span style="color:#a6e22e">exports</span> <span style="color:#f92672">=</span> { <span style="color:#a6e22e">generate</span> }
</code></pre></div><p>If you don't want to include it in your project directly, you can use the HTTP endpoint to generate random project names (in the form of "X-Y") by making a web request to https://friendly-project-name.kinlan.now.sh/api/names, which will return something like the following.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript">[<span style="color:#e6db74">"momentous-professor"</span>]
</code></pre></div><p>You can also control how many names to generate with the a query-string parameter of <i>count=x</i>, e.g. https://friendly-project-name.kinlan.now.sh/api/names?count=100</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript">[<span style="color:#e6db74">"melon-tangerine"</span>,<span style="color:#e6db74">"broad-jury"</span>,<span style="color:#e6db74">"rebel-hardcover"</span>,<span style="color:#e6db74">"far-friend"</span>,<span style="color:#e6db74">"notch-hornet"</span>,<span style="color:#e6db74">"principled-wildcat"</span>,<span style="color:#e6db74">"level-pilot"</span>,<span style="color:#e6db74">"steadfast-bovid"</span>,<span style="color:#e6db74">"holistic-plant"</span>,<span style="color:#e6db74">"expensive-ulna"</span>,<span style="color:#e6db74">"sixth-gear"</span>,<span style="color:#e6db74">"political-wrench"</span>,<span style="color:#e6db74">"marred-spatula"</span>,<span style="color:#e6db74">"aware-weaver"</span>,<span style="color:#e6db74">"awake-pair"</span>,<span style="color:#e6db74">"nosy-hub"</span>,<span style="color:#e6db74">"absorbing-petunia"</span>,<span style="color:#e6db74">"rhetorical-birth"</span>,<span style="color:#e6db74">"paint-sprint"</span>,<span style="color:#e6db74">"stripe-reward"</span>,<span style="color:#e6db74">"fine-guardian"</span>,<span style="color:#e6db74">"coconut-jumbo"</span>,<span style="color:#e6db74">"spangle-eye"</span>,<span style="color:#e6db74">"sudden-euphonium"</span>,<span style="color:#e6db74">"familiar-fossa"</span>,<span style="color:#e6db74">"third-seaplane"</span>,<span style="color:#e6db74">"workable-cough"</span>,<span style="color:#e6db74">"hot-light"</span>,<span style="color:#e6db74">"diligent-ceratonykus"</span>,<span style="color:#e6db74">"literate-cobalt"</span>,<span style="color:#e6db74">"tranquil-sandalwood"</span>,<span style="color:#e6db74">"alabaster-pest"</span>,<span style="color:#e6db74">"sage-detail"</span>,<span style="color:#e6db74">"mousy-diascia"</span>,<span style="color:#e6db74">"burly-food"</span>,<span style="color:#e6db74">"fern-pie"</span>,<span style="color:#e6db74">"confusion-capybara"</span>,<span style="color:#e6db74">"harsh-asterisk"</span>,<span style="color:#e6db74">"simple-triangle"</span>,<span style="color:#e6db74">"brindle-collard"</span>,<span style="color:#e6db74">"destiny-poppy"</span>,<span style="color:#e6db74">"power-globeflower"</span>,<span style="color:#e6db74">"ruby-crush"</span>,<span style="color:#e6db74">"absorbed-trollius"</span>,<span style="color:#e6db74">"meadow-blackberry"</span>,<span style="color:#e6db74">"fierce-zipper"</span>,<span style="color:#e6db74">"coal-mailbox"</span>,<span style="color:#e6db74">"sponge-language"</span>,<span style="color:#e6db74">"snow-lawyer"</span>,<span style="color:#e6db74">"adjoining-bramble"</span>,<span style="color:#e6db74">"deserted-flower"</span>,<span style="color:#e6db74">"able-tortoise"</span>,<span style="color:#e6db74">"equatorial-bugle"</span>,<span style="color:#e6db74">"neat-evergreen"</span>,<span style="color:#e6db74">"pointy-quart"</span>,<span style="color:#e6db74">"occipital-tax"</span>,<span style="color:#e6db74">"balsam-fork"</span>,<span style="color:#e6db74">"dear-fairy"</span>,<span style="color:#e6db74">"polished-produce"</span>,<span style="color:#e6db74">"darkened-gondola"</span>,<span style="color:#e6db74">"sugar-pantry"</span>,<span style="color:#e6db74">"broad-slouch"</span>,<span style="color:#e6db74">"safe-cormorant"</span>,<span style="color:#e6db74">"foregoing-ostrich"</span>,<span style="color:#e6db74">"quasar-mailman"</span>,<span style="color:#e6db74">"glittery-marble"</span>,<span style="color:#e6db74">"abalone-titanosaurus"</span>,<span style="color:#e6db74">"descriptive-arch"</span>,<span style="color:#e6db74">"nickel-ostrich"</span>,<span style="color:#e6db74">"historical-candy"</span>,<span style="color:#e6db74">"mire-mistake"</span>,<span style="color:#e6db74">"painted-eater"</span>,<span style="color:#e6db74">"pineapple-sassafras"</span>,<span style="color:#e6db74">"pastoral-thief"</span>,<span style="color:#e6db74">"holy-waterlily"</span>,<span style="color:#e6db74">"mewing-humor"</span>,<span style="color:#e6db74">"bubbly-cave"</span>,<span style="color:#e6db74">"pepper-situation"</span>,<span style="color:#e6db74">"nosy-colony"</span>,<span style="color:#e6db74">"sprout-aries"</span>,<span style="color:#e6db74">"cyan-bestseller"</span>,<span style="color:#e6db74">"humorous-plywood"</span>,<span style="color:#e6db74">"heavy-beauty"</span>,<span style="color:#e6db74">"spiral-riverbed"</span>,<span style="color:#e6db74">"gifted-income"</span>,<span style="color:#e6db74">"lead-kiwi"</span>,<span style="color:#e6db74">"pointed-catshark"</span>,<span style="color:#e6db74">"ninth-ocean"</span>,<span style="color:#e6db74">"purple-toucan"</span>,<span style="color:#e6db74">"tundra-cut"</span>,<span style="color:#e6db74">"coal-geography"</span>,<span style="color:#e6db74">"icy-lunaria"</span>,<span style="color:#e6db74">"agate-wildcat"</span>,<span style="color:#e6db74">"respected-garlic"</span>,<span style="color:#e6db74">"polar-almandine"</span>,<span style="color:#e6db74">"periodic-narcissus"</span>,<span style="color:#e6db74">"carbonated-waiter"</span>,<span style="color:#e6db74">"lavish-breadfruit"</span>,<span style="color:#e6db74">"confirmed-brand"</span>,<span style="color:#e6db74">"repeated-period"</span>]
</code></pre></div><p>You can control separator with the a query-string parameter of separator. i.e, separator=@ , e.g. <a href="https://friendly-project-name.kinlan.now.sh/api/names?separator=@">https://friendly-project-name.kinlan.now.sh/api/names?separator=@</a></p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-fallback" data-lang="fallback">["handsomely@asterisk"]
</code></pre></div><p>A very useful aspect of this project is that if a combination of words tends towards being offensive, it is easy to update the Glitch repo to ensure that it doesn't happen again.</p>
<p>Assuming that the project hosting doesn't get too expensive I will keep the service up, but feel free to clone it yourselves if you ever want to create a similar micro-service.</p>
<h3 id="live-example">Live example</h3>
<p>What follows is a super quick example of the API in action.</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-javascript" data-lang="javascript"><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">render</span> <span style="color:#f92672">=</span> (<span style="color:#a6e22e">promise</span>, <span style="color:#a6e22e">elementId</span>) => {
<span style="color:#a6e22e">promise</span>.<span style="color:#a6e22e">then</span>(<span style="color:#a6e22e">async</span>(<span style="color:#a6e22e">response</span>) => {
<span style="color:#66d9ef">const</span> <span style="color:#a6e22e">el</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#a6e22e">elementId</span>);
<span style="color:#a6e22e">el</span>.<span style="color:#a6e22e">innerText</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">await</span> <span style="color:#a6e22e">response</span>.<span style="color:#a6e22e">text</span>();
})
};
<span style="color:#a6e22e">onload</span> <span style="color:#f92672">=</span> () => {
<span style="color:#a6e22e">render</span>(<span style="color:#a6e22e">fetch</span>(<span style="color:#e6db74">"https://friendly-project-name.kinlan.now.sh/api/names"</span>), <span style="color:#e6db74">"basic"</span>);
<span style="color:#a6e22e">render</span>(<span style="color:#a6e22e">fetch</span>(<span style="color:#e6db74">"https://friendly-project-name.kinlan.now.sh/api/names?count=100"</span>), <span style="color:#e6db74">"many"</span>);
<span style="color:#a6e22e">render</span>(<span style="color:#a6e22e">fetch</span>(<span style="color:#e6db74">"https://friendly-project-name.kinlan.now.sh/api/names?separator=@"</span>), <span style="color:#e6db74">"separator"</span>);
}
</code></pre></div><h4 id="single-response">Single response</h4>
<pre id="basic"></pre>
<h4 id="many-resposnses">Many resposnses</h4>
<pre id="many"></pre>
<h4 id="custom-separators">Custom separators</h4>
<pre id="separator"></pre>
<style>
pre {
overflow: auto;
}
</style>
<script>
const render = (promise, elementId) => {
promise.then(async(response) => {
const el = document.getElementById(elementId);
el.innerText = await response.text();
})
};
addEventListener('load', () => {
render(fetch("https://friendly-project-name.kinlan.now.sh/api/names"), "basic");
render(fetch("https://friendly-project-name.kinlan.now.sh/api/names?count=100"), "many");
render(fetch("https://friendly-project-name.kinlan.now.sh/api/names?separator=@"), "separator");
});
</script>
This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan
