As melhores ferramentas para desenvolvedores front end

A intenção desse post é compartilhar as ferramentas gratuitas que eu utilizo para auxiliar na produção do desenvolvedor front end.

Não pretendo nesse post ensinar a utilizar as ferramentas e sim abordar a utilidade da mesma em tarefas de rotinas diárias. Hoje em dia existem muitas ferramentas que poupam qualquer desenvolvedor de reinventar a roda, minimizando o tempo de trabalho e maximizando a produção, a intenção deste post é apenas compartilhar estas ferramentas.

Antes apresentar a lista, existem alguns serviços que utilizo para me manter atualizado sobre tendências da Web:

  • Panda – serviço que apresenta as news dos feeds dos principais canais da área, como o behance, sidebar, entre outros.
  • Webdesignrepo – serviço que disponibiliza lista de canais sobre diversos assuntos da área separados por categorias.
  • Front-end Rescue – essa referência foi uma das melhores que eu tive quando decidi que ia atuar com desenvolvimento front-end. Nela tem muitas das melhores referências da área.

Vamos agora a lista das ferramentas.
A lista será dividida em categorias para melhor visualizar o conteúdo.


Imagens sem restrição autoral (grátis)

Cada vez mais imagens em alta definição estão sendo utilizadas para produção de websites, ai vão algumas dicas de serviços que disponibilizam fotografias em alta resolução gratuitamente.

  • Unplash – este serviço na verdade é um Tumblr que a cada 10 dias posta 10 novas fotos em alta resolução, livre de direitos e livre para utilização. As imagens disponibilizadas por este canal são incríveis!
  • PicJumbo – este serviço disponibiliza um repositório de fotos grátis e livres para utilização. Conta com fotos novas todos os dias.
  • SplitShire – este serviço também disponibiliza fotos gratuitas como os outros porém as fotos disponiveis neste canal tem um ar mais especifico dependendo do projeto, dê uma olhada na galeria do website para entender esta colocação. Não deixa de ser um ótimo repositório.


Edição de Imagens & Fotos

Hoje não dependemos de softwares locais para trabalhar imagens para internet, o próprio navegador pode ser utilizado para edição de imagens que garantem resultados rápidos e com resultados impressionantes, conforme as ferramentas abaixo.

Picmonkey

picmonkey_websocialdev_img_post

Eu particularmente gosto e utilizo muito esse serviço, ele edita imagens no próprio navegador. Neste serviço você começa a editar uma imagem em questão de segundos. Existem infinitas possibilidades de edição nesta ferramenta, vale a pena conferir. É uma ótima alternativa ao photoshop para edição simples de imagem.

Pixlr Editor

pixrleditor_websocialdev_img_post

O Pixlr Editor é um editor e gerador de imagens da Autodesk que faz parte do pacote Pixlr. Essa ferramenta traz muitas funcionalidades ala Photoshop, quebra um galho para editar imagens on demand.

Pixlr Express

Pixlr Express - Web Social Dev - IMG Post

O Pixlr Express é uma ferramenta online para edição de imagens, bem completa, inclusive possui aplicativo para mobile com as mesmas funções do portal web. Ferramenta super completa, com opções que vão do simples ao extravagante.


Design – Processos de produção de arte

FROONT

Picmonkey - Web Social Dev - IMG Post

O FROONT auxilia o desenvolvedor no processo de produção de layout, desde o wireframe até a produção final do layout e ainda da a opção para exportar o código font do layout criado. Ela é realmente uma ferramenta muito útil, principalmente para desenvolvedores que não gostam de utilizar várias ferramentas para um único processo de criação. Por ser grátis (conta com até 20 projetos, acima disso existe um plano pago), vale e muito a pena dar uma olhada.

Framer.js

Essa ferramenta, Framer.js, como diz a frase de apresentação do serviço, é responsável por animar um mockup estático, com interação e animações. Basicamente ele cria uma prévia “utilizável” do possível layout do seu projeto. Ferramenta gratuita, destinada a designers, requer pelo menos algum conhecimento de JavaScript.

Framer.Js - Web Social Dev - IMG Post

Editores de Códigos

Sublime Text

Sublime Text - Web Social Dev - IMG Post

O sublime text é um editor de códigos para web muito completo e muito querido por desenvolvedores no mundo todo. O grande diferencial do Sublime Text é a forma como você interage com o programa, que é totalmente focado na agilidade do desenvolvedor, então você consegue fazer quase tudo que o programa proporciona através apenas do teclado.

Aqui no blog já publiquei dois posts sobre o Sublime Text, a quem possa interessar:


Brackets

Brackets - Web Social Dev - IMG Post

O Brackets é um editor de códigos para web bem simples, inclusive lembra muito o Sublime Text. Ele é um projeto open source mantido pela Adobe através do GitHub, qualquer entusiasta pode contribuir com o software. Uma de suas funcionalidades mais interessantes é o preview automático do seu código no navegador. Na minha opinião ele é apenas uma versão aberta do Adobe Edge Code CC, mas isso não é confirmado pela Adobe.


Ferramentas de gerenciamento e desenvolvimento de projetos

Yeoman toolset - Web Social Dev - IMG Post
Bower – o Bower é um gerenciador de pacotes para projetos web. Basicamente ele gerencia a versão dos repositórios presentes em um projeto, você não precisa acompanhar a pagina do repositório que você utiliza para baixar uma versão mais nova, o Bower faz isso para você.

Também já publiquei aqui no blog um post de introdução ao Bower, qualquer duvida estou a disposição no post.

Grunt – o Grunt é um automatizador de tarefas feito em JavaScript e que roda através do Node.JS. Ele automatiza algumas tarefas repetitivas e relevantes, como testes do código, compilar SASS, otimizar imagens, entre outros. Hoje já temos muitas tarefas prontas e disponíveis para quem quiser utilizar o Grunt, e ele deve ser utilizado. Junto com o Bower e o Yeoman você tem um ambiente de desenvolvimento de alto nível com suporte para manter o projeto.

Yeoman – o Yeoman é um serviço que automatiza a construção do seu projeto e gerencia as dependências do mesmo. Basicamente ele cria pra você toda a estrutura de desenvolvimento necessária para iniciar a produção de um projeto, com base em geradores, geradores esses que são desenvolvidos por desenvolvedores que utilizam o serviço. No site do Yeoman é possível analisar a relação de geradores, por exemplo o gerador Webapp, que cria toda estrutura para você iniciar a produção de um aplicação web. Ele utiliza o Grunt e o Bower para gerenciar as dependências do projeto e automatizar tarefas.


Conclusão

Essas são as principais ferramentas, gratuitas, que eu utilizo para agilizar e tentar otmizar o meu workflow. São ferramentas simples mas que ajudam e muito qualquer desenvolvedor front-end, principalmente os iniciantes.

Qualquer duvida estou a disposição nos comentários! 😀

  • Johnson Vieira

    Muito bom!

    • Muito obrigado Johnson, qualquer duvida estamos ai!

  • João Paulo

    Parabéns mano. FIcou fera.

  • Athos

    Poxa cara. Parabéns. conteúdo fantástico!

  • Cayo JS

    Desenvolvi uma ferramenta que gera códigos de Animation do CSS3. Gera várias animações apenas com CSS.

    http://cayojs.com.br/efeitos/

    As animações são feitas com Keyframes.

    Basta selecionar o efeito desejado (são 62 efeitos) e clicar em Executar.

    A animação acontecerá conforme o efeito escolhido. O código de todo o efeito aparecerá logo à baixo.

    Basta copiar o código e colar em sua folha folha de estilo. Você então poderá chamar a classe do efeito em qualquer elemento HTML, ou chamar o efeito no :hover… ou adicionar a classe no addClass do JQuery… são muitas as formas de fazer isso, você é livre pra brincar e incrementar sua página com belos efeitos.

    O resultado é incrível.

    Eu utilizo sempre… nos sites que faço… nas landing pages… em tudo.

    Neste exemplo, os efeitos acontecem apenas no load da página.

    EX: http://www.hotelaeroportoguarulhos.com.br/

    Podem utilizar a ferramenta pessoal.

    Ahh, é Open Source. não ganho nenhum centavo com isso, apenas estou divulgando esta ferramenta.

    Obrigado