Friendly Project Name Generator with Zeit

Webでサイトを簡単に作成できるプロジェクトのアイデアがいくつかあります-アイデアの1つは、 zeitベースのプロジェクトにnetlify-like drag and drop interfacezeitすることです(zeitが好きですが、展開するにはちょっとしたcliマジックが必要です)。

この投稿では、プロジェクト名の作成というパズルのほんの一部を取り上げています。

Glitchはこの良い例です。プロジェクトを作成すると、ランダムに生成された気まぐれな名前が付けられます。また、チームはうまく組み合わせたgood dictionary of fairly safe wordsを作成しました(そして、必要に応じて、ホストする単純なサーバーが必要です)。

そのため、 serverless-functions日曜日のサイドプロジェクトは、Zeitのserverless-functionsとGlitchの辞書を使用して、ランダムなプロジェクト名を生成するシンプルなマイクロサービスを作成することでした。

And here it iscode )、かなり短く、複雑すぎません。

const words = require("friendly-words");

function generate(count = 1, separator = "-") {
  const { predicates, objects } = words;
  const pCount = predicates.length;
  const oCount = objects.length;
  const output = [];

  for (let i = 0; i < count; i++) {
    const pair = [predicates[Math.floor(Math.random() * pCount)], objects[Math.floor(Math.random() * oCount)]];
    output.push(pair.join(separator));
  }

  return output;
}

module.exports = { generate }

プロジェクトに直接含めたくない場合は、HTTPエンドポイントを使用して、https:// friendly-project-nameにWebリクエストを行うことにより、ランダムなプロジェクト名(「XY」の形式)を生成できます。 kinlan.now.sh/api/names。次のようなものを返します。

["momentous-professor"]

また、https://friendly-project-name.kinlan.now.sh/api/names? count = 100などのcount = xのクエリ文字列パラメーターを使用して、生成する名前の数を制御することもできます。

["melon-tangerine","broad-jury","rebel-hardcover","far-friend","notch-hornet","principled-wildcat","level-pilot","steadfast-bovid","holistic-plant","expensive-ulna","sixth-gear","political-wrench","marred-spatula","aware-weaver","awake-pair","nosy-hub","absorbing-petunia","rhetorical-birth","paint-sprint","stripe-reward","fine-guardian","coconut-jumbo","spangle-eye","sudden-euphonium","familiar-fossa","third-seaplane","workable-cough","hot-light","diligent-ceratonykus","literate-cobalt","tranquil-sandalwood","alabaster-pest","sage-detail","mousy-diascia","burly-food","fern-pie","confusion-capybara","harsh-asterisk","simple-triangle","brindle-collard","destiny-poppy","power-globeflower","ruby-crush","absorbed-trollius","meadow-blackberry","fierce-zipper","coal-mailbox","sponge-language","snow-lawyer","adjoining-bramble","deserted-flower","able-tortoise","equatorial-bugle","neat-evergreen","pointy-quart","occipital-tax","balsam-fork","dear-fairy","polished-produce","darkened-gondola","sugar-pantry","broad-slouch","safe-cormorant","foregoing-ostrich","quasar-mailman","glittery-marble","abalone-titanosaurus","descriptive-arch","nickel-ostrich","historical-candy","mire-mistake","painted-eater","pineapple-sassafras","pastoral-thief","holy-waterlily","mewing-humor","bubbly-cave","pepper-situation","nosy-colony","sprout-aries","cyan-bestseller","humorous-plywood","heavy-beauty","spiral-riverbed","gifted-income","lead-kiwi","pointed-catshark","ninth-ocean","purple-toucan","tundra-cut","coal-geography","icy-lunaria","agate-wildcat","respected-garlic","polar-almandine","periodic-narcissus","carbonated-waiter","lavish-breadfruit","confirmed-brand","repeated-period"]

separatorのquery-stringパラメーターを使用して、セパレーターを制御できます。すなわち、separator = @、例えばhttps://friendly-project-name.kinlan.now.sh/api/names?separator=@

["handsomely@asterisk"]

このプロジェクトの非常に有用な側面は、言葉の組み合わせが不快になる傾向がある場合、Glitchレポを簡単に更新して、再び発生しないようにすることです。

プロジェクトのホスティングが高くなりすぎないと仮定して、サービスを維持しますが、同様のマイクロサービスを作成したい場合は自分でクローンを作成してください。

ライブの例

以下は、実行中のAPIの非常に簡単な例です。

const render = (promise, elementId) => {
  promise.then(async(response) => {
    const el = document.getElementById(elementId);
    el.innerText = await response.text();
  })
};


onload = () => {
  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");
}

シングルレスポンス


多くの回答


カスタムセパレーター


{{<raw-html>}}

{{</ raw-html>}}

Picture of me smiling.

Paul Kinlan

I lead the Chrome Developer Relations team at Google.

We want people to have the best experience possible on the web without having to install a native app or produce content in a walled garden.

Our team tries to make it easier for developers to build on the web by supporting every Chrome release, creating great content to support developers on web.dev, contributing to MDN, helping to improve browser compatibility, and some of the best developer tools like Lighthouse, Workbox, Squoosh to name just a few.

RSS Github Medium