Friendly Project Name Generator with Zeit

Eu tenho algumas idéias para projetos que facilitam a criação de sites na Web - uma das idéias é criar um netlify-like drag and drop interface para projetos baseados em zeit (eu gosto do zeit, mas requer um pouco de magia do cli para implantar).

Este post aborda apenas uma pequena parte do quebra-cabeça: a criação de nomes de projetos.

Glitch é um bom exemplo disso, quando você cria um projeto, ele fornece um nome caprichoso gerado aleatoriamente. A equipe também criou um good dictionary of fairly safe words que combina bem (e se você quiser que eles tenham um servidor simples para hospedar).

Portanto, o projeto paralelo neste domingo foi criar um micro-serviço simples para gerar nomes de projetos aleatórios usando o serverless-functions do Zeit e o dicionário da Glitch.

And here it is ( code ), é bem curto e não é muito complexo.

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 }

Se você não quiser incluí-lo diretamente no seu projeto, poderá usar o terminal HTTP para gerar nomes de projetos aleatórios (na forma de "XY") fazendo uma solicitação da Web para https: // friendly-project-name. kinlan.now.sh/api/names, que retornará algo como o seguinte.

["momentous-professor"]

Você também pode controlar quantos nomes serão gerados com o parâmetro de string de consulta de count = x , por exemplo, https://friendly-project-name.kinlan.now.sh/api/names?count=100

["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"]

Você pode controlar o separador com o parâmetro de uma string de consulta do separador. por exemplo, separator = @, por exemplo, https://friendly-project-name.kinlan.now.sh/api/names?separator=@

["handsomely@asterisk"]

Um aspecto muito útil deste projeto é que, se uma combinação de palavras tende a ser ofensiva, é fácil atualizar o repositório Glitch para garantir que isso não ocorra novamente.

Supondo que a hospedagem do projeto não fique muito cara, eu continuarei com o serviço, mas sinta-se à vontade para cloná-lo se desejar criar um microsserviço semelhante.

Exemplo ao vivo

A seguir, é apresentado um exemplo super rápido da API em ação.

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");
}

Resposta única


Muitas respostas


personalizados


{{<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