Executando verificação de segurança...
63

Pitch: Enquetes dentro do TabNews (e qualquer markdown!)

O Problema

Há alguns dias senti vontade de criar uma enquete dentro do TabNews, mas não havia como fazer sem depender de comentarios, e pela politica do TabNews, comentarios curtos são desincentivados, impedindo que a enquete funcione como deveria.

A Solução

Criei um pequeno SaaS, ainda em beta, que permite você criar enquetes com até 5 escolhas, e embeddar direto no markdown.

Para criar uma enquete, basta visitar: https://md-poll.vercel.app/polls/create e preencher rapidamente o formulario com um título (a pergunta da sua enquete), e as opções que quer dar para o usuário votar, e salvar.

Será exibido uma prévia da enquete, e logo abaixo será exibido o código markdown para incluir a enquete aqui no tabnews, ou em qualquer ambiente markdown.

Exemplo

Criei uma enquete de exemplo para embeddar aqui. O código markdown a ser incluído é esse:

Você acha essa ideia útil?

<a href="https://md-poll.vercel.app/polls/b5235ff9-fb8d-419f-b159-2e382002f5b7/vote?option=0&close" target="_blank">
  <img src="https://md-poll.vercel.app/api/polls/b5235ff9-fb8d-419f-b159-2e382002f5b7/options/0/img" alt="Não acho"/>
</a>
<br/>
<a href="https://md-poll.vercel.app/polls/b5235ff9-fb8d-419f-b159-2e382002f5b7/vote?option=1&close" target="_blank">
  <img src="https://md-poll.vercel.app/api/polls/b5235ff9-fb8d-419f-b159-2e382002f5b7/options/1/img" alt="Acho um pouco"/>
</a>
<br/>
<a href="https://md-poll.vercel.app/polls/b5235ff9-fb8d-419f-b159-2e382002f5b7/vote?option=2&close" target="_blank">
  <img src="https://md-poll.vercel.app/api/polls/b5235ff9-fb8d-419f-b159-2e382002f5b7/options/2/img" alt="Acho bastante"/>
</a>
<br/>
<a href="https://md-poll.vercel.app/polls/b5235ff9-fb8d-419f-b159-2e382002f5b7/vote?option=3&close" target="_blank">
  <img src="https://md-poll.vercel.app/api/polls/b5235ff9-fb8d-419f-b159-2e382002f5b7/options/3/img" alt="Achei demais!!!"/>
</a>
<br/>
<small>Click on the option you want to vote.</small>

E gera a seguinte enquete, que você pode clicar em uma opção e votar.
Por uma limitação da implementação, é preciso atualizar a página após votar para
ver a quantidade de votos atualizada.

Você acha essa ideia útil?

Não acho
Acho um pouco
Acho bastante
Achei demais!!!
Click on the option you want to vote.

Próximos passos

Como disse, fiz este projeto em 5 dias, sendo que perdi 2 dias só fazendo o deploy na vercel pois havia uma incompatibilidade da biblioteca canvas com o ambiente da vercel, portanto, ainda há muito o que implementar:

  • Impedir multiplos votos na mesma enquete por endereço IP
  • Salvar endereço de IP do criador da enquete
  • Implementar rate-limit de criação de enquetes por IP
  • Melhorar a interface de usuário e estilizar melhor as opções da enquete
  • Implementar multi-idiomas
  • Implementar estatisticas da enquete
  • Implementar autenticação para evitar flood de enquetes (continuar permitindo sem autenticação, porém com rate-limit por IP)
  • Implementar cache da renderização da opção
  • Pagina de estatisticas gerais (https://md-poll.vercel.app/polls)
  • Implementar ✅ como feedback na opção votada

GitHub

O projeto está acessivel para quem quiser contribuir no github: https://github.com/iget-master/markdown-poll/

Caso haja interesse da comunidade, irei continuar o projeto!

9

Achei demais!!! a ideia e inclusive testei e funcionou perfeitamente 🤝

Parabéns pelo projeto e a utilidade disso vai muito além do TabNews, como você colocou, qualquer projeto que aceite Markdown 💪

PS: Alterei o título de Lançamento para Pitch 🤝

4

Exatamente, a ideia surgiu dentro do Tabnews, mas inclusive já estou colocando em uso dentro dos projetos github da minha empresa para votação dentro de issues, no qual antes dependiamos de votar usando emojis, rs.

Obrigado!

3

Acabei esquecendo de comentar, mas eu não tinha conhecimento em NextJS, e nem queria perder tempo criando uma estrutura do zero, então acabei estudando e usando parte da base de código do TabNews como referência :-) Muito interessante a forma com que foi criado e estruturado.

3
2

Já foi implementado o limite por IP e diversas outras melhorias e features.

Na sua opinião, o correto é atualizar esse post com as mudanças ou criar um novo post sempre que houver progresso considerável?

1
1
3
3

Achei sensacional esse projeto. Ele resolve um problema real.

Eu tive a impressão de o site não estar funcionando. O link redireciona para uma página em branco e as enquetes desse post não atualizam, mesmo atualizando a página ou trocando de browser.

4

Qual link te leva a uma pagina em branco? poderia me dizer qual navegador você usa?

Funciona assim, ao clicar numa opção, vai ser aberta uma nova aba no navegador, e de fato a pagina é em branco, mas assim que é carregado o voto é computado e um script para fecha a aba. É quase imperceptível.

Talvez tenha a impressão de que o voto não foi atualizado pois o voto é unico por IP agora, então só um voto pode não ser suficiente para mudar o % de uma opção.

Mas me ajude com esse feedback de qual link e qual seu navegador para eu investigar melhor. Se puder me informar qual seu IP (me manda no email [email protected]), assim posso ver se houve um voto computado por você.

outro problema que percebi é que os textos estão brancos quando se acessa num tema escuro, mas na estou trabalhando numa versão melhorada da UI, para ficar com menos cara de MVP.

2

Desculpa pela demora.
Eu acessei utilizando o Firefox com o tem escuro no mobile (Android). O link em questão era o de estatística, mas hoje já funcionou normalmente.

1

Obrigado pelo feedback. Estou trabalhando para dar uma cara mais bonita ao projeto e criando uma landing page! em breve posto novidades

2
1
1

Se já é guardado o IP, tem necessidade de usar coockie pra isso? O próprio impedimento de votar duas vezes na mesma enquete tem por base o IP, talvez dê para fazer essa outra checagem antes de gerar a imagem também.

1

Filipe, acabei de subir uma versão que faz o feedback de qual opção você escolheu.

O link para votar sofreu uma alteração para suportar essa funcionalidade, portanto as enquetes geradas antes desta versão não vão exibir. Vou colocar aqui nessa resposta uma demonstração.

Aproveitei para melhorar um pouco a renderização, e limitar a largura do texto da opção na renderização.

Demonstração

Gostou da funcionalidade?

Sim!
Yes!
Click on the option you want to vote.
Poll created with md-poll
2
0
2

Uma sugestão, para você analisar. Talvez fique mais fácil de compartilhar. Mas realmente eu não testei se o markdown permite inserir um Input type"image".
Mas se permitir, o elemento acima quando é submetido envia na url os parâmetros x e y do clique. Isso seria interessante pois seu backend poderia tratar o voto a partir dessas coordenadas.
Quais seriam as vantagens?

  • A pessoa poderia adicionar ou remover opções diretamente na área de gerenciamento ao invés de precisar alterar o código de compartilhamento.
  • o código de compartilhamento seria mais enxuto. Só colar o código do input chamando a imagem e já estaria funcionando.

Fonte: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image#using_the_x_and_y_data_points

1

Muito massa, acabei de usar no meu último, notei um bugzinho na hora de gerar as imagems que estão trucando o texto. Fiquei com vontade de contribuir.

2

Corrigi esse problema, de forma paliativa ainda, mas agora não deve truncar, ao invés disso o texto deve compactar horizontalmente. Para textos pequenos de até 30 caracteres funciona bem.

Vou alterar a validação no formulário para limitar à 32 caracteres na opção, assim resolve em definitivo.

Também implementei melhorias na renderização, e um ✅ na opção que você votou (só vai aparecer para votos computados a partir de agora)

2
1

Legal, fique a vontade para contribuir!

De fato apesar da validação da opção permitir 255 caracteres, não cabem tantos na imagem.

Tenho duas opções: reduzir a quantidade de caracteres, ou ajustar o tamanho da imagem caso os caracteres não caibam, criando uma segunda linha.

1

Obs como a maioria das redes residenciais são distribuídas via DHCP seria interessante limitar por usuário, pois por IP é reiniciar o modem ou por uma VPN, ou se 2 users utilizarem o mesmo servidor de VPN vai dar que um já votou mesmo sem ter votado. E eu acho q por user é ainda mais fácil de limitar. Aí só quem tá logado pode participar.

1

Ipv4 Publico é o único ip roteavel na internet, sendo assim se mais de um dispositivo precisa "sair pra internet" vai ter NAT.
Seu ipv4 atras do roteador que possui o ipv4 publico fornecido pelo ISP, é um ipv4 privado, que depende de NAT para sair para internet. Isso nao tem relacao com DHCP servico de entrega dos IPs.
E se o provedor entregar em CGNAT o Ipv4, voce alem de dividir esse ip com dispositivos da sua residencia/empresa etc, ainda vai esta dividindo com outros usuarios do provedor.
Ipv6 resolve isso por nao precisar de NAT, é roteamento fim a fim com cada dispositivo recebendo seu ip publico.
E sujiro a pensarem em internet ja com ipv6, apesar que nem ipv4 ta entendendo direito ......

1

Pensei nisso, porém torna a adoção mais difícil.

O que posso estudar em fazer é dura tr a criação da enquete, permitir ao criador liberar (não muitos) votos do mesmo IP.

Além disso, com o advento do ipv6, mesmo atrás de roteadores os dispositivos têm ipv6 unicos.

1

As companhias não vão parar com o DHCP pois elas tem que comprar uma pool de IP por exemplo 201...* é net claro, sendo assim vai continuar no IPV6 e as empresas vão implantar o DHCP para que não haja disperdicio em modens desligados. E IP fixo atrás de subnet... Pode se repetir...

1
1