Componentes Web para desenvolvimento frontend

Olá, leitores da Ramos da Informática! Este artigo foi criado para facilitar sua vida como desenvolvedor frontend, apresentando componentes Web incríveis que agilizam e simplificam o trabalho com HTML e CSS. Cada componente é escolhido com base em sua funcionalidade, praticidade e impacto no desenvolvimento moderno. Além disso, este artigo será constantemente atualizado para garantir que você tenha sempre as melhores ferramentas em mãos. Não deixe de conferir a última atualização e descubra novidades que podem transformar seu workflow!

Data de atualização: (aqui vou colocar a data de atualização para você comparar com a data de publicação e saber que tem novidade): 15/11/2024

Action Table

O Action Table é um componente web nativo em HTML que adiciona funcionalidades de ordenação e filtragem a tabelas. Diferentemente de outras soluções, ele não utiliza Shadow DOM, permitindo uma integração mais direta com o CSS da sua aplicação. Isso facilita a personalização dos estilos para adequação à identidade visual desejada.

Principais características:

• Ordenação: Permite ordenar colunas de forma ascendente ou descendente ao clicar nos cabeçalhos.
• Filtragem: Oferece diversos tipos de filtros, como menus suspensos, caixas de seleção e campos de pesquisa, para facilitar a localização de dados específicos.
• Personalização: Inclui uma folha de estilos CSS que pode ser sobrescrita ou ajustada conforme necessário.
• Desempenho: Capaz de lidar com grandes volumes de dados, como demonstrado em uma tabela paginada com 1000 linhas disponível na demo.

Exemplo de uso:

Para utilizar o Action Table, siga os seguintes passos:

1. Importe o script do componente:

<script src="https://colinaut.github.io/action-table/action-table.js"></script>

Estruture sua tabela HTML:

<action-table>
  <table>
    <thead>
      <tr>
        <th data-sort="name">Nome</th>
        <th data-sort="age">Idade</th>
        <th data-sort="city">Cidade</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Maria</td>
        <td>30</td>
        <td>São Paulo</td>
      </tr>
      <tr>
        <td>João</td>
        <td>25</td>
        <td>Rio de Janeiro</td>
      </tr>
      <!-- Mais linhas conforme necessário -->
    </tbody>
  </table>
</action-table>

Adicione filtros, se necessário:

<action-table>
  <table>
    <thead>
      <tr>
        <th data-sort="name">Nome</th>
        <th data-sort="age">Idade</th>
        <th data-sort="city">Cidade</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Maria</td>
        <td>30</td>
        <td>São Paulo</td>
      </tr>
      <tr>
        <td>João</td>
        <td>25</td>
        <td>Rio de Janeiro</td>
      </tr>
      <!-- Mais linhas conforme necessário -->
    </tbody>
  </table>
  <div slot="filters">
    <label>
      Filtrar por cidade:
      <select data-filter="city">
        <option value="">Todas</option>
        <option value="São Paulo">São Paulo</option>
        <option value="Rio de Janeiro">Rio de Janeiro</option>
        <!-- Mais opções conforme necessário -->
      </select>
    </label>
  </div>
</action-table>

Acesse: Action Table

Tiny Static Map: Um Elemento Simples para Renderizar Mapas Estáticos

Uma biblioteca extremamente leve para adicionar mapas estáticos a uma página, centralizados em uma latitude/longitude específica de sua escolha. A biblioteca utiliza mapas do OpenStreetMap. Atenção: está licenciada sob a GPL 3.Características principais:

• Leve: Ideal para projetos onde você só precisa de um mapa estático simples, sem interatividade.
• Personalizável: Permite escolher a latitude e longitude do ponto central do mapa.
• Gratuito: Utiliza a base de mapas do OpenStreetMap, sem custos para uso.
• Licença: A biblioteca é distribuída sob a licença GPL 3, o que significa que alterações ou redistribuições devem manter a mesma licença.

Exemplo de uso rápido:

1. Inclua o script da biblioteca em sua página:

<script src="https://example.com/tiny-static-map.js"></script>

Adicione o componente do mapa ao seu HTML:

<tiny-static-map lat="40.7128" long="-74.0060" zoom="12" width="400" height="300"></tiny-static-map>

• lat: Latitude do ponto central do mapa (exemplo: 40.7128 para Nova York).
• long: Longitude do ponto central do mapa (exemplo: -74.0060 para Nova York).
• zoom: Nível de zoom (números maiores mostram mais detalhes).
• width/height: Dimensões do mapa em pixels.

Exemplo completo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tiny Static Map Example</title>
    <script src="https://example.com/tiny-static-map.js"></script>
</head>
<body>
    <h1>Mapa Estático</h1>
    <tiny-static-map lat="-23.5505" long="-46.6333" zoom="10" width="600" height="400"></tiny-static-map>
</body>
</html>

Este exemplo renderiza um mapa estático centralizado na cidade de São Paulo, Brasil.

Link aqui.

Ska Tailwind Editor: Edite HTML com Tailwind como Blocos do WordPress

Um editor online que imita a experiência do editor de blocos do WordPress, oferecendo várias opções visuais, mas com uma diferença: permite editar o HTML diretamente utilizando classes do Tailwind CSS.

Principais características:

• Familiaridade: Interface semelhante ao editor de blocos do WordPress, facilitando a adaptação para usuários habituados a ele.
• Flexibilidade: Permite adicionar, editar e estilizar componentes HTML utilizando as classes utilitárias do Tailwind CSS.
• Produtividade: Ideal para criar rapidamente protótipos ou layouts prontos para usar com Tailwind.
• Exportação Fácil: Após a edição, você pode copiar e colar o código gerado diretamente em seu projeto.

Exemplo de uso rápido:

1. Acesse o editor online:
   • Visite o Ska Tailwind Editor para começar.
2. Crie e edite seus blocos HTML:
   • Adicione um novo bloco clicando em “Adicionar Bloco”.
   • Utilize as classes do Tailwind para estilizar o conteúdo, por exemplo:

<div class="bg-blue-500 text-white p-4 rounded">
    <h1 class="text-xl font-bold">Título Personalizado</h1>
    <p>Este é um parágrafo com Tailwind.</p>
</div>

Visualize e ajuste o design:

• Utilize as opções do editor para ajustar responsividade, tamanhos, cores, e outras propriedades, sem sair da interface.

Exporte o HTML final:

• Após concluir o design, copie o código gerado pelo editor e cole em seu projeto Tailwind.

DEVE GOSTAR: React Query Builder – Realize consultas a banco de dados no frontend