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.
Para utilizar o Action Table,siga os seguintes passos:
- 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:
- 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.
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:
- Acesse o editor online:
- Visite o Ska Tailwind Editorpara começar.
- 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
LEIA TAMBÉM:Livros e cursos grátis para DevOps e DevSecOps
VAI GOSTAR
- GitHub Copilot:Claude 3.5,Gemini 1.5 e OpenAI o1-preview
- Domine a IA do Chrome DevTools – para Desenvolvedores
- Os Melhores Cursos Grátis de Inteligência Artificial com Certificação
- Audible:Aumente Seus Conhecimentos e Produtividade com Audiolivros
- A Melhor Estação de Trabalho para Desenvolvedores em 2025
- Robótica e Programação para Crianças e Adolescentes
- Como Assinar um PDF Digitalmente em Node.js
- GitHub Copilot – Hacks,Tutoriais e Novidades
- Meu dinheiro
- Vida Financeira Saudável:Dicas Práticas e Hacks para Economizar Dinheiro
