🐿️ 🥤 🚻 5 ferramentas gratuitas de produtividade para desenvolvedores da Web 🚧 👦🏾 📺

O autor do artigo, cuja tradução estamos publicando hoje, diz que uma das maneiras de organizar racionalmente o trabalho do desenvolvedor é usar ferramentas que permitam obter mais com menos esforço. Aqui ele quer falar sobre cinco ferramentas maravilhosas que permitirão a qualquer desenvolvedor aumentar sua produtividade. Aqui está um vídeo que fornece uma visão geral dessas ferramentas.

Notas preliminares

Sei que aqueles que lêem isso não têm muito tempo, então aqui descreverei brevemente as ferramentas oferecidas a sua atenção. Se você gosta de algo, pode integrá-lo facilmente ao seu fluxo de trabalho. Além disso, quero observar que não tenho nada a ver com nenhum dos projetos considerados aqui. Eu só quero compartilhar com todos que querem me beneficiar.

1. Excalidraw

Excalidraw

Se você estiver projetando uma arquitetura de software e ainda desenhar todos os tipos de esquemas, poderá gostar do projeto Excalidraw . Essa ferramenta permite que você participe da criação de equipes de vários tipos de esquemas no navegador. Nós da Devias, usamos o Excalidraw para realizar sessões de brainstorming sobre vários problemas, como o comportamento do usuário no site ou a arquitetura de nosso back-end. Como já mencionado, o Excalidraw suporta a colaboração. E isso, especialmente agora, durante a quarentena, quando muitos trabalham em um site remoto, é especialmente útil. O único ponto negativo deste projeto, decorrente de sua abertura e de forma gratuita, é que ele não suporta armazenamento de dados em nuvem, o que permitiria, por exemplo, salvar os resultados do trabalho em sua conta. Mas, francamente, esse não é um problema particularmente grande, pois os resultados do trabalho podem ser salvos localmente e, se necessário, enviados de volta ao site.

2. Transição de ícones do Núcleo

Transição de ícones do Nucleo

Agora vamos para coisas mais práticas e falamos sobre uma pequena ferramenta que permite gerar transições entre dois ícones SVG. Este é um projeto da Nucleo Icon Transition . Aqui você pode configurar o efeito de transição (dimensionar ou girar), selecione o tipo de evento que aciona a transição (clique ou passe o mouse). Essa ferramenta gera um único arquivo SVG contendo descrições dos dois ícones e o código JavaScript responsável pela transição. A essência dessa ferramenta é que ela equipa ícones com as classes com as quais o script trabalha.

Para adicionar um ícone animado ao seu projeto, basta carregar o arquivo SVG resultante e adicionar seu conteúdo ao seu código HTML. Aqui está a aparência do conteúdo deste arquivo.

Conteúdo de um arquivo SVG gerado automaticamente

Aqui está o que eu recebi.

Ícone animado gerado automaticamente

Se você planeja usar o efeito de transição para muitos ícones, pode otimizar o código com um script, pois o mesmo script é usado em todos os lugares.

3. Escala de tipo

Escala de tipo

Se você, como eu, costuma criar sites do zero, pode gostar do projeto Escala de tipo , que pode ajudá-lo na seleção de fontes. Ele suporta a seleção de fontes e a personalização de suas propriedades, como tamanho e fator de escala. As configurações da fonte são exibidas imediatamente na página usando o texto do modelo que contém vários elementos. Você pode exportar código CSS contendo opções de fonte. Normalmente, uso essa ferramenta quando preciso de algumas fontes especiais e não quero gastar muito tempo escolhendo seus parâmetros.

4. Pesquisa de Roam

Pesquisa em roaming

Minha produtividade ajuda a manter o uso contínuo de listas de tarefas. Para manter essas listas, eu uso o aplicativo Roam Research, que, entre outras coisas, permite conectar negócios. O projeto usa algo como uma linguagem de marcação especial. Os relacionamentos entre casos permitem que você considere listas de tarefas na forma de entidades interconectadas, o que ajuda, por exemplo, a originar uma determinada idéia e a analisar as etapas associadas à sua implementação. De fato, a maneira como este projeto funciona é bastante difícil de explicar, ou talvez eu simplesmente não saiba como expressar essas idéias. Comecei a usar o Roam Research apenas alguns dias atrás, mas devo dizer que gostei muito da ideia deste projeto. Talvez isso se deva ao fato de ele estar me pressionando a criar notas curtas que expressem as descrições mais importantes, e não longas, dos casos que nunca li. Agora o Roam Research é um projeto gratuito, devido à sua novidade. Mas tenho certezaque sua opção gratuita sempre existirá.

5. Tons felizes

Tons felizes

Esta ferramenta é destinada a desenvolvedores que estão um pouco envolvidos no design. É sobre o projeto Happy Hues . Isso não é um aplicativo, mas um recurso projetado para quem não é muito bom em escolher paletas de cores. Neste site, você pode encontrar muitas combinações de cores pré-selecionadas. Suponho que seja simplesmente impossível não encontrar algo que corresponda ao seu estilo. Eu sempre mantenho esse recurso à mão, recorrendo a ele, por exemplo, quando preciso encontrar uma boa combinação de cores, que se distingue por um nível decente de contraste e passa nos testes de disponibilidade de conteúdo.

Sumário

Acabei de compartilhar com você uma lista secreta de ferramentas que me ajudam a trabalhar de forma produtiva. É possível que alguns deles sejam úteis para você. Se você conhece alguma ferramenta interessante que aumenta a produtividade dos desenvolvedores da Web, compartilhe-a nos comentários!

Lembramos que continuamos o concurso de previsões no qual você pode ganhar um novo iPhone. Ainda há tempo para entrar nele e fazer a previsão mais precisa dos valores atuais.

5 ferramentas gratuitas de produtividade para desenvolvedores da Web