Em 2020, larguei o emprego e fiquei em casa, tendo bastante tempo todos os dias. Então, comecei a desenvolver algumas ferramentas relacionadas ao desenvolvimento, com o objetivo de solucionar problemas encontrados durante o desenvolvimento ou ajudar a obter um entendimento mais profundo de determinados conceitos técnicos.

Escrever pequenas ferramentas todos os dias, o tempo passava dia após dia. Olhando para trás, essa experiência foi realmente bastante interessante.

No início, a UI dessas ferramentas era de fato bastante rudimentar. No entanto, com o passar do tempo, melhorei continuamente sua aparência. Embora ainda não sejam considerados excelentes agora, eles fizeram progressos significativos.

Para ser honesto, essas ferramentas têm muito pouca orientação e documentação do usuário, mais parecidas com o meu mundinho. Através dos dados do Google Analytics, descobri que algumas ferramentas podem ter apenas eu como usuário, como a hospedagem de micro imagens. Mas precisamente porque eu mesmo as utilizo, embora a frequência de adição de novas ferramentas tenha diminuído recentemente, tenho-as mantido de forma consistente.

O que me deixa satisfeito é que enviei algumas dessas ferramentas para o blog do Sr. Ruan Yifeng, e muitas das pequenas ferramentas receberam sua recomendação. Isso foi um grande incentivo para mim.

Algumas ferramentas relacionadas a princípios aprofundados

Essas ferramentas são projetadas para ajudar os desenvolvedores a obter uma compreensão mais profunda de alguns conceitos básicos e princípios subjacentes.

Conversão de ponto flutuante IEEE754

Esta ferramenta pode ajudá-lo a entender a representação interna de números de ponto flutuante de precisão dupla no padrão IEEE 754. Ele pode converter números decimais em sua representação binária correspondente, mostrando claramente o bit de sinal, os bits de expoente e os bits de mantissa. Isso é muito útil para entender como os computadores lidam com números de ponto flutuante.

De acordo com o padrão IEEE754, a conversão de ponto flutuante para Infinity é: todos os bits de expoente são 1, todos os bits de mantissa são 0.

Aqui está a conversão de ponto flutuante para Infinity:

De acordo com o padrão IEEE754, a conversão de ponto flutuante para 0 é: bit de sinal é 0, todos os bits de expoente são 0, todos os bits de mantissa são 0.

Aqui está a conversão de ponto flutuante para 0:

Conversão de codificação UTF-8

UTF-8 é uma codificação de caracteres de comprimento variável. Esta ferramenta pode ajudá-lo a entender como os caracteres Unicode são codificados em UTF-8. Você pode inserir qualquer caractere Unicode e a ferramenta exibirá sua representação binária codificada em UTF-8, permitindo que você veja visualmente o processo de codificação.

Conversão de codificação Base64

Base64 é um método de codificação comumente usado, especialmente ao lidar com dados binários. Esta ferramenta não apenas ajuda você a compreender os princípios da codificação Base64, mas também fornece funções convenientes de codificação e decodificação. É particularmente útil para cenários onde dados binários precisam ser transmitidos em um ambiente de texto.

Detecção de tipo de arquivo

Esta ferramenta pode ajudá-lo a entender como determinar os tipos de arquivo por meio de números mágicos de arquivo. Você pode fazer upload de um arquivo e a ferramenta lerá os dados binários do arquivo e determinará o tipo de arquivo com base no número mágico. Isso é muito útil ao lidar com arquivos desconhecidos ou verificar tipos de arquivos.

Por exemplo, JPEG é identificado porque seu número mágico é FF D8 FF DB

Relacionado à imagem

O processamento de imagens é um aspecto importante do desenvolvimento Web. Aqui estão algumas ferramentas relacionadas ao processamento de imagens.

Microimagem

Esta é uma ferramenta rápida de compactação de imagem que pode ajudá-lo a reduzir o tamanho dos arquivos de imagem sem reduzir significativamente a qualidade da imagem.

Ele suporta vários formatos de imagem e não tem limitações de tamanho ou quantidade de arquivo. Esta ferramenta é particularmente útil para otimizar a velocidade de carregamento do site.

Mais importante ainda, ele é implementado usando tecnologias frontend, não exigindo custos de servidor, então você não precisa se preocupar com questões de privacidade. Sua implementação é semelhante ao squoosh, ambos aproveitando o WebAssembly.

Hospedagem de micro imagens

Esta é uma ferramenta de hospedagem de imagens pessoais que permite usar um repositório GitHub como host de imagens pessoais. Ele fornece funções simples de upload e gerenciamento, tornando conveniente a referência de imagens em artigos ou páginas da web. Esta é uma ferramenta muito prática para desenvolvedores que frequentemente precisam compartilhar imagens online.

Compartilhamento de imagem

Esta ferramenta pode ajudá-lo a gerar rapidamente imagens com texto, adequadas para compartilhamento em redes sociais ou criação de pôsteres simples. Ele simplifica o processo de combinação de texto e imagens, permitindo criar imagens atraentes sem usar software complexo de edição de imagens.

Espaço reservado para imagem

Esta é uma ferramenta geradora de espaço reservado de imagem que pode criar rapidamente imagens de espaço reservado coloridas e de tamanho personalizado, muito adequadas para uso durante o processo de desenvolvimento. Pode ajudá-lo a manter a integridade do layout da página quando as imagens reais ainda não estão prontas.

Codificação e criptografia

No desenvolvimento Web, muitas vezes precisamos lidar com várias codificações e criptografias. Aqui estão algumas ferramentas relacionadas:

Codificação de URL

Esta ferramenta pode ajudá-lo a realizar codificação e decodificação de URLs, o que é muito útil para lidar com URLs contendo caracteres especiais. Ele pode garantir que seus URLs sejam transmitidos e analisados ​​​​corretamente em vários ambientes.

Codificação de entidade HTML

A ferramenta de codificação de entidade HTML pode ajudá-lo a converter caracteres especiais em entidades HTML, garantindo que sejam exibidos corretamente em HTML. Isso é importante para prevenir ataques XSS e garantir a renderização correta de documentos HTML.

Gerador de hash

Esta ferramenta pode gerar vários valores de hash comumente usados, incluindo MD5, SHA1, SHA256, etc. É muito útil em cenários como verificação de integridade de dados e armazenamento de senhas.

Ferramentas de cores

A cor é um elemento importante no web design. Aqui estão algumas ferramentas relacionadas a cores:

Conversão de cores

Esta ferramenta pode converter entre diferentes modelos de cores, como RGB, HSL, CMYK, etc. Ela pode ajudar designers e desenvolvedores a alternar livremente entre diferentes métodos de representação de cores.

Gerador de paleta

Esta ferramenta pode ajudá-lo a gerar matizes e tonalidades de cores, muito adequadas para criar temas de cores consistentes. Ele permite que você crie rapidamente esquemas de cores harmoniosos, melhorando a eficiência do design.

Calculadora de taxa de contraste

Esta ferramenta pode calcular a taxa de contraste entre duas cores, ajudando a garantir a legibilidade do texto em fundos. É muito importante para a criação de designs que atendam aos padrões de acessibilidade.

Conclusão

Embora algumas ferramentas possam ser usadas apenas por mim, é esse processo contínuo de aprendizagem e criação que me faz sentir realizado e feliz.

Continuarei a manter e melhorar essas ferramentas e darei as boas-vindas a todos para usá-las e fornecer feedback.