Olá devs! Minha primeira postagem aqui na TabNews, estou animado pelo crescimento da plataforma!

Venho hoje relatar como foi minha experiência ao criar um projeto
open-source. O objetivo não é ensinar a usar a API, se quiser dar uma olhada, confira o repositório aqui.

O projeto em si se chama Dynamic Image Renderer, e a função dele é renderizar imagens de forma dinâmica de acordo com a query string passada na URL da API. Eu decidi criar ele depois de me deparar com um projeto chamado Capsule Render, aonde ele tem o mesmo objetivo. Eu decidi fazer o meu próprio "renderizador" com um código mais limpo, implementações de novas funcionalidades de uma maneira mais fácil, entre outras coisas.

Como funciona?

A ideia aqui é gerar um SVG de acordo com os parâmetros passados. O SVG gerado tem o objetivo de ser usado principalmente em repositórios no github, mas funciona em qualquer lugar aonde você pode linkar uma imagem, como aqui.

Eu decidi usar o EJS para deixar separado a parte do SVG em um arquivo. Conseguiria retornar o SVG em uma string? Sim! Mas optei por SSR (Server Side Rendering) por questões de organização. Um exemplo de como usei os parâmetros passados para o EJS.

<!-- exemplo -->
<svg 
width="<%= width %>"
height="<%= height %>"
/>

Tecnologias usadas

Eu utilizei o express juntamente com TypeScript, o projeto está hospedado na Vercel.

Dificuldades

Como nem tudo na vida são flores... Claro que teve alguns afins! 😂

• Primeiro, tive que aprender um monte de coisa sobre SVG! Desde como usar um simples <rect/> até aplicar animações com o CSS nos elementos. Admito que não foi a experiência mais legal do mundo 😅.

• Segundamente, foi usar o GIT corretamente, sem brincadeira, o terceiro commit do repositório tem o projeto praticamente inteiro! 😂 Vou melhorar, é sério.

• Outra: organização de pastas. Meti os tipos na pasta types, umas funções úteis na pasta utils e já era. Dá para fazer melhor? Sim. Mas como o projeto tem poucos arquivos, não é o fim do mundo, se tiverem alguma sugestão de nomenclatura / arquitetura deixem nos comentários. ;)

• Por fim: Testes. Simplesmente não existe 😐! Eu sei que é essencial, principalmente para projetos open-source, mas como é uma geração de imagem, eu não faço a menor ideia de como testar isso. Se tiverem alguma sugestão, deixem nos comentários, please!

Sistema de presets

Durante a criação do projeto, obviamente eu fui testando, e eu percebi uma coisa: as URLs estavam ficando muito grandes para algumas coisas mais comuns, então, foi aí que eu tive a ideia genial, aonde você pode usar presets prontos, mudando apenas coisas básicas como o title e o subtitle.

Para criar esse sistema, eu achei muito interessante esse jeito: ele vai, de certa forma, estender o preset padrão, chamando o mesmo com o spread operator, que vai "espalhar" o objeto, e, logo após, fazemos a mesma coisa com um novo objeto, sendo assim, esse segundo objeto vai sobrescrever apenas o necessário, não precisando, em todo novo preset, criar coisas que são padrões.

function dracula(): imageSettings {
    return {
        ...defaultPreset(),
        ... {
            titleColor: "#bd93f9",
            titleBgColor: "#44475a",
            subtitle: "// dynamic image renderer.",
            subtitleColor: "#6272a4",
            subtitleShadow: "false",
            backgroundColor: "#282a36",
        }
    }
}

Se ficou meio confuso, veja esse exemplo:

// digamos que esse é o preset padrão
const pessoaBase = {
    nome: 'Fulano',
    idade: 18,
}

// esse seria o preset que estende o padrão
function criaPessoaCom18Anos(nome: string) {
    return {
        ...pessoaBase,
        ... {
            nome: nome
        }
    }
}
const pessoa1 = criaPessoaCom18Anos("Bob")
console.log(pessoa1)
/* OUTPUT
{
  "nome": "Bob",
  "idade": 18
} 
*/
// Claro que esse é um exemplo SUPER simples, 
// Chega a ser ineficiente fazer desta forma nessa situação
// Mas a ideia é essa, espero que deu para entender.

Conclusão

Esse mundo open-source ainda é meio novo para mim, esse projeto foi uma forma de eu treinar algumas coisas, como escrever documentações, tentar escrever um código limpo, e criar algo minimamente útil (pelo menos eu uso 😂).

Eu nunca contribui para um projeto open-source ainda, pretendo contribuir com algo na TabNews, quando for liberado. 💡

Enfim, o repositório está lá para quem quiser dar uma olhada, aceito críticas construtivas, PRs... Obrigado a todos que leram até aqui, fico grato.